Update calendar with multi-select

frontend/src/components/modals/PlannedDayModal.tsx

@@ -17,6 +17,9 @@ export interface PlannedDayModalProps {
   onClose: () => void
   isSaving?: boolean | undefined
   error?: string | null | undefined
+  isRangeMode?: boolean | undefined
+  dayCount?: number | undefined
+  defaultDayType?: 'sjukpenning' | 'lagsta' | 'vacation' | undefined
 }
 
 export function PlannedDayModal({
@@ -30,6 +33,9 @@ export function PlannedDayModal({
   onClose,
   isSaving = false,
   error = null,
+  isRangeMode = false,
+  dayCount = 1,
+  defaultDayType,
 }: PlannedDayModalProps): ReactNode {
   const [dayType, setDayType] = useState<'sjukpenning' | 'lagsta' | 'vacation'>('vacation')
   const [parentId, setParentId] = useState(selectedParentId)
@@ -42,12 +48,18 @@ export function PlannedDayModal({
       setParentId(existingDay.parentPersonalDataUuid)
       setIsDubbeldag(existingDay.isDubbeldag)
     } else {
-      setDayType('vacation')
+      setDayType(defaultDayType ?? 'vacation')
       setParentId(selectedParentId)
       setIsDubbeldag(false)
     }
     setLocalError(null)
-  }, [isOpen, existingDay, selectedParentId])
+  }, [isOpen, existingDay, selectedParentId, defaultDayType])
+
+  useEffect(() => {
+    if (dayType === 'vacation') {
+      setIsDubbeldag(false)
+    }
+  }, [dayType])
 
   const handleSave = async () => {
     try {
@@ -83,18 +95,20 @@ export function PlannedDayModal({
     day: 'numeric',
   })
 
+  const modalTitle = isRangeMode ? `Plan ${dayCount} days` : existingDay ? 'Edit Planned Day' : 'Plan a Day'
+
   return (
     <div className="planned-day-modal__overlay" onClick={onClose}>
       <div className="planned-day-modal__content" onClick={(e) => e.stopPropagation()}>
         <div className="planned-day-modal__header">
-          <h2 data-testid="modal-title">{existingDay ? 'Edit Planned Day' : 'Plan a Day'}</h2>
+          <h2 data-testid="modal-title">{modalTitle}</h2>
           <button className="planned-day-modal__close" onClick={onClose} aria-label="Close">
             ×
           </button>
         </div>
 
         <div className="planned-day-modal__body">
-          <p className="planned-day-modal__date">{displayDate}</p>
+          {!isRangeMode && <p className="planned-day-modal__date">{displayDate}</p>}
 
           {(error || localError) && (
             <div className="planned-day-modal__error" role="alert">
@@ -148,16 +162,21 @@ export function PlannedDayModal({
                 type="checkbox"
                 checked={isDubbeldag}
                 onChange={(e) => setIsDubbeldag(e.target.checked)}
-                disabled={isSaving}
+                disabled={isSaving || dayType === 'vacation'}
                 data-testid="dubbeldag-checkbox"
               />
               {' '}Double day (both parents taking leave)
             </label>
+            {dayType === 'vacation' && (
+              <p className="planned-day-modal__hint">
+                Dubbeldagar gäller inte för semester
+              </p>
+            )}
           </div>
         </div>
 
         <div className="planned-day-modal__footer">
-          {existingDay && onDelete && (
+          {!isRangeMode && existingDay && onDelete && (
             <button
               className="planned-day-modal__button planned-day-modal__button--danger"
               onClick={handleDelete}