Fix calendar style

2026-06-14 13:05:53 +02:00
parent 4924982a8a
commit 6ed2a3ae0c
10 changed files with 1005 additions and 31 deletions
@@ -0,0 +1,190 @@
+import { ReactNode, useState, useEffect } from 'react'
+import type { PlannedLeaveDay } from '@/types'
+import './planned-day-modal.css'
+
+export interface PlannedDayModalProps {
+  date: string
+  isOpen: boolean
+  existingDay?: PlannedLeaveDay | null | undefined
+  parents: Array<{ id: string; name: string }>
+  selectedParentId: string
+  onSave: (payload: {
+    dayType: 'sjukpenning' | 'lagsta' | 'vacation'
+    parentId: string
+    isDubbeldag: boolean
+  }) => Promise<void>
+  onDelete?: (() => Promise<void>) | undefined
+  onClose: () => void
+  isSaving?: boolean | undefined
+  error?: string | null | undefined
+}
+
+export function PlannedDayModal({
+  date,
+  isOpen,
+  existingDay,
+  parents,
+  selectedParentId,
+  onSave,
+  onDelete,
+  onClose,
+  isSaving = false,
+  error = null,
+}: PlannedDayModalProps): ReactNode {
+  const [dayType, setDayType] = useState<'sjukpenning' | 'lagsta' | 'vacation'>('vacation')
+  const [parentId, setParentId] = useState(selectedParentId)
+  const [isDubbeldag, setIsDubbeldag] = useState(false)
+  const [localError, setLocalError] = useState<string | null>(null)
+
+  useEffect(() => {
+    if (existingDay) {
+      setDayType(existingDay.dayType as 'sjukpenning' | 'lagsta' | 'vacation')
+      setParentId(existingDay.parentPersonalDataUuid)
+      setIsDubbeldag(existingDay.isDubbeldag)
+    } else {
+      setDayType('vacation')
+      setParentId(selectedParentId)
+      setIsDubbeldag(false)
+    }
+    setLocalError(null)
+  }, [isOpen, existingDay, selectedParentId])
+
+  const handleSave = async () => {
+    try {
+      setLocalError(null)
+      await onSave({
+        dayType,
+        parentId,
+        isDubbeldag,
+      })
+    } catch (err) {
+      setLocalError(err instanceof Error ? err.message : 'Failed to save planned day')
+    }
+  }
+
+  const handleDelete = async () => {
+    if (!onDelete) return
+    if (confirm('Are you sure you want to delete this planned day?')) {
+      try {
+        setLocalError(null)
+        await onDelete()
+      } catch (err) {
+        setLocalError(err instanceof Error ? err.message : 'Failed to delete planned day')
+      }
+    }
+  }
+
+  if (!isOpen) return null
+
+  const displayDate = new Date(date + 'T00:00:00Z').toLocaleDateString('sv-SE', {
+    weekday: 'long',
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  })
+
+  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>
+          <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>
+
+          {(error || localError) && (
+            <div className="planned-day-modal__error" role="alert">
+              {error || localError}
+            </div>
+          )}
+
+          <div className="planned-day-modal__field">
+            <label htmlFor="day-type" className="planned-day-modal__label">
+              Leave Type
+            </label>
+            <select
+              id="day-type"
+              value={dayType}
+              onChange={(e) => setDayType(e.target.value as 'sjukpenning' | 'lagsta' | 'vacation')}
+              className="planned-day-modal__select"
+              disabled={isSaving}
+              data-testid="day-type-select"
+            >
+              <option value="vacation">Vacation</option>
+              <option value="sjukpenning">Sick Leave (390 level)</option>
+              <option value="lagsta">Parental (90 level)</option>
+            </select>
+          </div>
+
+          {parents.length > 1 && (
+            <div className="planned-day-modal__field">
+              <label htmlFor="parent-select" className="planned-day-modal__label">
+                Parent
+              </label>
+              <select
+                id="parent-select"
+                value={parentId}
+                onChange={(e) => setParentId(e.target.value)}
+                className="planned-day-modal__select"
+                disabled={isSaving}
+                data-testid="parent-select"
+              >
+                {parents.map((p) => (
+                  <option key={p.id} value={p.id}>
+                    {p.name}
+                  </option>
+                ))}
+              </select>
+            </div>
+          )}
+
+          <div className="planned-day-modal__field">
+            <label className="planned-day-modal__checkbox-label">
+              <input
+                type="checkbox"
+                checked={isDubbeldag}
+                onChange={(e) => setIsDubbeldag(e.target.checked)}
+                disabled={isSaving}
+                data-testid="dubbeldag-checkbox"
+              />
+              {' '}Double day (both parents taking leave)
+            </label>
+          </div>
+        </div>
+
+        <div className="planned-day-modal__footer">
+          {existingDay && onDelete && (
+            <button
+              className="planned-day-modal__button planned-day-modal__button--danger"
+              onClick={handleDelete}
+              disabled={isSaving}
+              data-testid="delete-button"
+            >
+              {isSaving ? 'Deleting...' : 'Delete'}
+            </button>
+          )}
+          <button
+            className="planned-day-modal__button planned-day-modal__button--secondary"
+            onClick={onClose}
+            disabled={isSaving}
+            data-testid="cancel-button"
+          >
+            Cancel
+          </button>
+          <button
+            className="planned-day-modal__button planned-day-modal__button--primary"
+            onClick={handleSave}
+            disabled={isSaving}
+            data-testid="save-button"
+          >
+            {isSaving ? 'Saving...' : 'Save'}
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}