feat(ui): mobile responsiveness audit + type fixes
Mobile Responsiveness: - Viewport meta tags toegevoegd in layout.tsx - EPD header: patient details verborgen op mobiel, zoekbalk responsive - Agenda: auto-switch naar dagview op mobiel, mini-kalender verborgen - Agenda toolbar: verticale stacking, Week/Werkweek knoppen verborgen - Patiëntenlijst: compact icoon-only button op mobiel - Verpleegrapportage: verticale flow i.p.v. twee-koloms layout - Cortex: artifact overlay met slide-in animatie op mobiel - Cortex: "Terug" knop toegevoegd aan artifact panels - Toast feedback bij succesvolle afspraak creatie Code Quality Fixes (KISS/DRY): - Resize listener vervangen door bestaande useMediaQuery hook - Dubbele flex class opgeschoond in epd-header.tsx - userScalable: false verwijderd (accessibility) Type Fixes: - actions.ts: status literal type met 'as const' - agenda-block.tsx: dateRange start/end optioneel - chat-empty-state.tsx: framer-motion ease type - cortex-store.ts: ChatEntities.dateRange consistent met Zod schema 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -10,6 +10,7 @@ import React, { useState, useCallback, useRef, useTransition, useEffect } from '
|
||||
import dynamic from 'next/dynamic';
|
||||
import { startOfWeek, endOfWeek, addDays, format } from 'date-fns';
|
||||
import { toast } from '@/hooks/use-toast';
|
||||
import { useMediaQuery } from '@/hooks/use-media-query';
|
||||
|
||||
// Lazy load FullCalendar component (~150KB+ savings)
|
||||
const AgendaCalendar = dynamic(
|
||||
@@ -62,6 +63,14 @@ export function AgendaView({ initialEvents, initialDate, highlightEncounterId }:
|
||||
const [pendingReschedule, setPendingReschedule] = useState<PendingReschedule | null>(null);
|
||||
const [isRescheduling, setIsRescheduling] = useState(false);
|
||||
|
||||
// Auto-switch to day view on mobile
|
||||
const isMobile = useMediaQuery('(max-width: 767px)');
|
||||
useEffect(() => {
|
||||
if (isMobile) {
|
||||
setCurrentView('timeGridDay');
|
||||
}
|
||||
}, [isMobile]);
|
||||
|
||||
const calendarRef = useRef<{ getApi: () => { prev: () => void; next: () => void; today: () => void; changeView: (view: string) => void; getDate: () => Date } } | null>(null);
|
||||
|
||||
// Auto-open appointment modal when navigating from a report
|
||||
@@ -118,7 +127,7 @@ export function AgendaView({ initialEvents, initialDate, highlightEncounterId }:
|
||||
|
||||
// Handle date range change from calendar
|
||||
const handleDateChange = useCallback((start: Date, end: Date) => {
|
||||
setCurrentDate((prev) =>
|
||||
setCurrentDate((prev) =>
|
||||
prev.toDateString() === start.toDateString() ? prev : start
|
||||
);
|
||||
fetchEvents(start, end);
|
||||
@@ -246,7 +255,7 @@ export function AgendaView({ initialEvents, initialDate, highlightEncounterId }:
|
||||
|
||||
<div className="flex flex-1 gap-4 min-h-0">
|
||||
{/* Mini calendar sidebar */}
|
||||
<div className="w-64 flex-shrink-0">
|
||||
<div className="w-64 flex-shrink-0 hidden md:block">
|
||||
<MiniCalendar
|
||||
selectedDate={currentDate}
|
||||
onDateSelect={handleMiniCalendarDateSelect}
|
||||
|
||||
Reference in New Issue
Block a user