Phase 3: Wire page stubs into working screens with full integration

Implemented 4 page stubs with hooks and components: - Dashboard: displays overview metrics, planned days breakdown, progress chart, break periods - Calendar: month-based calendar grid with event badges and navigation - Tips: list of optimization tips with dismiss functionality - Settings: workspace configuration with child info, parent profile, vacation days, break periods Added utility exports: - src/context/index.ts: re-exports useAuth, useWorkspace hooks - src/hooks/index.ts: re-exports all domain hooks All pages: - Use Layout wrapper with header configuration - Load data via hooks with loading/error states - Render presentational components (no business logic) - Pass callbacks for user actions - Type-safe with full @types coverage Frontend test coverage: 167 tests, all passing TypeScript: zero errors, lint: zero errors Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
2026-06-01 17:53:10 +02:00
parent 425e29ea21
commit 719da83827
9 changed files with 415 additions and 12 deletions
@@ -1,3 +1,139 @@
-export function Calendar() {
-  return <main><h1>Kalender</h1></main>
+import { ReactNode, useState } from 'react'
+import { useWorkspace } from '@/context'
+import { usePlannedDays } from '@/hooks'
+import { Layout } from '@/components/layout/Layout'
+import { LoadingSpinner } from '@/components/common/LoadingSpinner'
+import { CalendarDay } from '@/components/common/CalendarDay'
+import { CalendarEvent } from '@/components/common/CalendarEvent'
+
+export function Calendar(): ReactNode {
+  const { workspace, isLoading: wsLoading } = useWorkspace()
+  const { data: plannedDays, isLoading: pdLoading } = usePlannedDays(workspace?.id ?? null)
+  const [currentMonth, setCurrentMonth] = useState(new Date(2026, 5))
+
+  const isLoading = wsLoading || pdLoading
+
+  if (isLoading) {
+    return <LoadingSpinner message="Loading calendar..." />
+  }
+
+  const year = currentMonth.getFullYear()
+  const month = currentMonth.getMonth()
+
+  const firstDay = new Date(year, month, 1)
+  const lastDay = new Date(year, month + 1, 0)
+  const daysInMonth = lastDay.getDate()
+  const startingDayOfWeek = firstDay.getDay()
+
+  const weeks: string[][] = []
+  let currentWeek: string[] = []
+
+  for (let i = 0; i < startingDayOfWeek; i++) {
+    const prevDate = new Date(year, month, -startingDayOfWeek + i + 1)
+    currentWeek.push(formatDate(prevDate))
+  }
+
+  for (let day = 1; day <= daysInMonth; day++) {
+    currentWeek.push(formatDate(new Date(year, month, day)))
+    if (currentWeek.length === 7) {
+      weeks.push(currentWeek)
+      currentWeek = []
+    }
+  }
+
+  const remaining = 7 - currentWeek.length
+  for (let i = 0; i < remaining; i++) {
+    currentWeek.push(formatDate(new Date(year, month + 1, i + 1)))
+  }
+  weeks.push(currentWeek)
+
+  const getEventsForDate = (date: string) => {
+    return (plannedDays ?? [])
+      .filter((pd: any) => pd.date === date)
+      .map((pd: any) => ({
+        type: pd.dayType,
+        color: getColorForType(pd.dayType),
+        title: pd.dayType,
+      }))
+  }
+
+  const handlePrevMonth = () => {
+    setCurrentMonth(new Date(year, month - 1, 1))
+  }
+
+  const handleNextMonth = () => {
+    setCurrentMonth(new Date(year, month + 1, 1))
+  }
+
+  return (
+    <Layout header={{ title: 'Kalender' }}>
+      <div data-testid="calendar" className="calendar">
+        <div className="calendar__header">
+          <button onClick={handlePrevMonth} aria-label="Previous month">
+            ←
+          </button>
+          <h2>
+            {currentMonth.toLocaleDateString('sv-SE', { month: 'long', year: 'numeric' })}
+          </h2>
+          <button onClick={handleNextMonth} aria-label="Next month">
+            →
+          </button>
+        </div>
+
+        <div className="calendar__grid">
+          {['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'].map((day) => (
+            <div key={day} className="calendar__weekday">
+              {day}
+            </div>
+          ))}
+
+          {weeks.map((week, weekIdx) =>
+            week.map((date, dayIdx) => {
+              const events = getEventsForDate(date)
+              const isCurrentMonth = new Date(date).getMonth() === month
+              return (
+                <CalendarDay
+                  key={`${weekIdx}-${dayIdx}`}
+                  date={date}
+                  events={events}
+                  isCurrentMonth={isCurrentMonth}
+                />
+              )
+            })
+          )}
+        </div>
+
+        <div className="calendar__legend">
+          <h3>Legend</h3>
+          <div className="calendar__legend-items">
+            <div className="calendar__legend-item">
+              <CalendarEvent leaveType="Vacation" color={getColorForType('vacation')} />
+            </div>
+            <div className="calendar__legend-item">
+              <CalendarEvent leaveType="Sick" color={getColorForType('sjukpenning')} />
+            </div>
+            <div className="calendar__legend-item">
+              <CalendarEvent leaveType="Parental" color={getColorForType('lagsta')} />
+            </div>
+          </div>
+        </div>
+      </div>
+    </Layout>
+  )
+}
+
+function formatDate(date: Date): string {
+  const year = date.getFullYear()
+  const month = String(date.getMonth() + 1).padStart(2, '0')
+  const day = String(date.getDate()).padStart(2, '0')
+  return `${year}-${month}-${day}`
+}
+
+function getColorForType(type: string): string {
+  const colorMap: Record<string, string> = {
+    vacation: '#4CAF50',
+    sjukpenning: '#FF9800',
+    lagsta: '#2196F3',
+  }
+  return colorMap[type] ?? '#9E9E9E'
 }