diff --git a/frontend/messages/en.json b/frontend/messages/en.json index f0d67e6..cd85421 100644 --- a/frontend/messages/en.json +++ b/frontend/messages/en.json @@ -826,6 +826,7 @@ "previousDay": "Previous day", "nextDay": "Next day", "chooseDate": "Choose schedule date", + "today": "Today", "year": "Year", "month": "Month", "day": "Day", diff --git a/frontend/messages/fa.json b/frontend/messages/fa.json index 5c56946..aa79c80 100644 --- a/frontend/messages/fa.json +++ b/frontend/messages/fa.json @@ -827,6 +827,7 @@ "previousDay": "روز قبل", "nextDay": "روز بعد", "chooseDate": "انتخاب تاریخ برنامه", + "today": "امروز", "year": "سال", "month": "ماه", "day": "روز", diff --git a/frontend/messages/nl.json b/frontend/messages/nl.json index 8abac2d..e5759bd 100644 --- a/frontend/messages/nl.json +++ b/frontend/messages/nl.json @@ -827,6 +827,7 @@ "previousDay": "Vorige dag", "nextDay": "Volgende dag", "chooseDate": "Kies roosterdatum", + "today": "Vandaag", "year": "Jaar", "month": "Maand", "day": "Dag", diff --git a/frontend/src/components/ui/shared/ScheduleDayPicker.tsx b/frontend/src/components/ui/shared/ScheduleDayPicker.tsx index 2316703..09f67ef 100644 --- a/frontend/src/components/ui/shared/ScheduleDayPicker.tsx +++ b/frontend/src/components/ui/shared/ScheduleDayPicker.tsx @@ -3,12 +3,15 @@ import { useEffect, useId, useRef, useState } from 'react'; import { useTranslations } from 'next-intl'; import { ChevronDown, ChevronLeft, ChevronRight } from 'lucide-react'; -import { addCalendarDays, startOfLocalDay } from '@/components/appointments/appointmentTime'; +import { addCalendarDays, compareLocalDayStart, startOfLocalDay } from '@/components/appointments/appointmentTime'; +import { Checkbox } from '@/components/ui/shared/Checkbox'; interface ScheduleDayPickerProps { value: Date; onChange: (day: Date) => void; label?: string; + /** Show a "Today" toggle that jumps to the current local day when enabled. Default true. */ + showTodayToggle?: boolean; } const MONTH_KEYS = [ @@ -56,13 +59,20 @@ const selectClassName = ` * Calendar day navigator (arrows + year/month/day panel). * Does not restrict past dates — parent pages enforce read-only vs editable for schedule grids/forms. */ -export function ScheduleDayPicker({ value, onChange, label }: ScheduleDayPickerProps) { +export function ScheduleDayPicker({ + value, + onChange, + label, + showTodayToggle = true, +}: ScheduleDayPickerProps) { const t = useTranslations('schedule'); const panelId = useId(); const rootRef = useRef(null); const [panelOpen, setPanelOpen] = useState(false); const normalizedValue = startOfLocalDay(value); + const today = startOfLocalDay(new Date()); + const isTodaySelected = compareLocalDayStart(normalizedValue, today) === 0; const resolvedLabel = label ?? t('defaultLabel'); const labelText = normalizedValue.toLocaleDateString(undefined, { @@ -111,7 +121,22 @@ export function ScheduleDayPicker({ value, onChange, label }: ScheduleDayPickerP return (
-

{resolvedLabel}

+
+

{resolvedLabel}

+ {showTodayToggle ? ( + { + if (checked) { + onChange(today); + setPanelOpen(false); + } + }} + label={t('today')} + className="shrink-0" + /> + ) : null} +