refactor: codebase and some fixes

src/components/caregiver/CheckboxOption.tsx

@@ -0,0 +1,58 @@
+'use client'
+
+import { Checkbox } from '@/components/ui/checkbox'
+import { Label } from '@/components/ui/label'
+import { cn } from '@/lib/utils'
+
+interface CheckboxOptionProps {
+  id: string
+  label: string
+  checked: boolean
+  onCheckedChange: (checked: boolean) => void
+  disabled?: boolean
+  className?: string
+}
+
+export function CheckboxOption({
+  id,
+  label,
+  checked,
+  onCheckedChange,
+  disabled = false,
+  className,
+}: CheckboxOptionProps) {
+  return (
+    <div
+      className={cn(
+        'flex items-center space-x-3 rounded-lg border p-3 cursor-pointer transition-colors select-none',
+        checked ? 'border-primary bg-primary/5' : 'border-border hover:bg-muted/50',
+        disabled && 'opacity-50 cursor-not-allowed',
+        className,
+      )}
+      onClick={() => !disabled && onCheckedChange(!checked)}
+      role="button"
+      tabIndex={disabled ? -1 : 0}
+      onKeyDown={(e) => {
+        if (!disabled && (e.key === 'Enter' || e.key === ' ')) {
+          e.preventDefault()
+          onCheckedChange(!checked)
+        }
+      }}
+    >
+      <Checkbox
+        id={id}
+        checked={checked}
+        onCheckedChange={onCheckedChange}
+        onClick={(e) => e.stopPropagation()}
+        disabled={disabled}
+      />
+      <Label
+        htmlFor={id}
+        className={cn('cursor-pointer flex-1 text-sm', disabled && 'cursor-not-allowed')}
+        onClick={(e) => e.stopPropagation()}
+      >
+        {label}
+      </Label>
+    </div>
+  )
+}