bugfix: all the toasts unfied inide appointments feature. DateSelector component updated to an expandable one.

frontend/src/components/ui/common/ScheduleDayPicker.tsx

@@ -1,48 +1,299 @@
 'use client';
 
-import { ChevronLeft, ChevronRight } from 'lucide-react';
-import { addCalendarDays } from '@/lib/appointmentTime';
+import { useEffect, useId, useRef, useState } from 'react';
+import { ChevronDown, ChevronLeft, ChevronRight } from 'lucide-react';
+import {
+  addCalendarDays,
+  compareLocalDayStart,
+  startOfLocalDay,
+} from '@/lib/appointmentTime';
 
 interface ScheduleDayPickerProps {
   value: Date;
   onChange: (day: Date) => void;
-  /** Optional lower bound; picker navigation is unrestricted for history browsing. */
+  /** Optional lower bound for day selection and previous-day navigation. */
   minDate?: Date;
   label?: string;
 }
 
-export function ScheduleDayPicker({ value, onChange, label = 'Schedule date' }: ScheduleDayPickerProps) {
-  const labelText = value.toLocaleDateString(undefined, {
+const MONTH_LABELS = [
+  'January',
+  'February',
+  'March',
+  'April',
+  'May',
+  'June',
+  'July',
+  'August',
+  'September',
+  'October',
+  'November',
+  'December',
+] as const;
+
+function daysInMonth(year: number, month: number): number {
+  return new Date(year, month + 1, 0).getDate();
+}
+
+function buildLocalDay(year: number, month: number, day: number): Date {
+  return new Date(year, month, day, 0, 0, 0, 0);
+}
+
+function clampToValidDay(
+  year: number,
+  month: number,
+  day: number,
+  min?: Date,
+): Date {
+  const maxDay = daysInMonth(year, month);
+  let next = buildLocalDay(year, month, Math.min(Math.max(1, day), maxDay));
+  if (min) {
+    const floor = startOfLocalDay(min);
+    if (compareLocalDayStart(next, floor) < 0) {
+      next = floor;
+    }
+  }
+  return next;
+}
+
+function yearRange(min?: Date, anchor?: Date): number[] {
+  const now = new Date();
+  const startYear = min ? min.getFullYear() : now.getFullYear() - 5;
+  const endYear = Math.max(now.getFullYear() + 2, anchor?.getFullYear() ?? now.getFullYear());
+  const years: number[] = [];
+  for (let y = startYear; y <= endYear; y += 1) {
+    years.push(y);
+  }
+  return years;
+}
+
+const selectClassName = `
+  w-full appearance-none rounded-[var(--radius-sm)] border border-border
+  bg-background-card/90 text-text-primary text-sm
+  pl-2 pr-7 py-1.5
+  focus:outline-none focus:ring-2 focus:ring-primary/35 focus:border-border-strong
+  disabled:opacity-50 disabled:cursor-not-allowed
+`;
+
+export function ScheduleDayPicker({
+  value,
+  onChange,
+  minDate,
+  label = 'Schedule date',
+}: ScheduleDayPickerProps) {
+  const panelId = useId();
+  const rootRef = useRef<HTMLDivElement>(null);
+  const [panelOpen, setPanelOpen] = useState(false);
+
+  const normalizedValue = startOfLocalDay(value);
+  const normalizedMin = minDate ? startOfLocalDay(minDate) : undefined;
+
+  const labelText = normalizedValue.toLocaleDateString(undefined, {
     weekday: 'short',
     month: 'short',
     day: 'numeric',
     year: 'numeric',
   });
 
+  const previousDay = addCalendarDays(normalizedValue, -1);
+  const canGoPrevious =
+    !normalizedMin || compareLocalDayStart(previousDay, normalizedMin) >= 0;
+
+  const years = yearRange(normalizedMin, normalizedValue);
+  const selectedYear = normalizedValue.getFullYear();
+  const selectedMonth = normalizedValue.getMonth();
+  const selectedDay = normalizedValue.getDate();
+  const dayCount = daysInMonth(selectedYear, selectedMonth);
+
+  function applyParts(year: number, month: number, day: number, closePanel = false) {
+    onChange(clampToValidDay(year, month, day, normalizedMin));
+    if (closePanel) {
+      setPanelOpen(false);
+    }
+  }
+
+  function handlePreviousDay() {
+    if (!canGoPrevious) return;
+    onChange(previousDay);
+  }
+
+  useEffect(() => {
+    if (!panelOpen) return;
+
+    function onPointerDown(event: MouseEvent) {
+      if (!rootRef.current?.contains(event.target as Node)) {
+        setPanelOpen(false);
+      }
+    }
+
+    function onKeyDown(event: KeyboardEvent) {
+      if (event.key === 'Escape') {
+        setPanelOpen(false);
+      }
+    }
+
+    document.addEventListener('mousedown', onPointerDown);
+    document.addEventListener('keydown', onKeyDown);
+    return () => {
+      document.removeEventListener('mousedown', onPointerDown);
+      document.removeEventListener('keydown', onKeyDown);
+    };
+  }, [panelOpen]);
+
   return (
-    <div className="w-full max-w-md">
+    <div ref={rootRef} className="relative w-full max-w-md">
       <p className="text-sm font-medium text-text-secondary mb-2">{label}</p>
       <div className="flex items-center gap-1 rounded-[var(--radius-md)] border border-border bg-background-secondary/90 px-1 py-1 shadow-[inset_0_1px_0_rgba(255,255,255,0.02)]">
         <button
           type="button"
-          onClick={() => onChange(addCalendarDays(value, -1))}
-          className="shrink-0 rounded-[var(--radius-sm)] p-2 text-text-muted hover:text-text-primary hover:bg-background-card/80 focus:outline-none focus:ring-2 focus:ring-primary/35"
+          onClick={handlePreviousDay}
+          disabled={!canGoPrevious}
+          className="shrink-0 rounded-[var(--radius-sm)] p-2 text-text-muted hover:text-text-primary hover:bg-background-card/80 focus:outline-none focus:ring-2 focus:ring-primary/35 disabled:opacity-40 disabled:pointer-events-none"
           aria-label="Previous day"
         >
           <ChevronLeft className="h-4 w-4 icon-flat" />
         </button>
-        <div className="flex-1 min-w-0 text-center text-sm font-medium text-text-primary tabular-nums px-2 py-1.5">
-          {labelText}
-        </div>
+
         <button
           type="button"
-          onClick={() => onChange(addCalendarDays(value, 1))}
+          onClick={() => setPanelOpen((open) => !open)}
+          aria-expanded={panelOpen}
+          aria-controls={panelId}
+          aria-haspopup="dialog"
+          className="flex flex-1 min-w-0 items-center justify-center gap-1 rounded-[var(--radius-sm)] px-2 py-1.5 text-sm font-medium text-text-primary tabular-nums hover:bg-background-card/80 focus:outline-none focus:ring-2 focus:ring-primary/35"
+        >
+          <span className="truncate">{labelText}</span>
+          <ChevronDown
+            className={`h-3.5 w-3.5 shrink-0 text-text-muted icon-flat transition-transform ${panelOpen ? 'rotate-180' : ''}`}
+            aria-hidden
+          />
+        </button>
+
+        <button
+          type="button"
+          onClick={() => onChange(addCalendarDays(normalizedValue, 1))}
           className="shrink-0 rounded-[var(--radius-sm)] p-2 text-text-muted hover:text-text-primary hover:bg-background-card/80 focus:outline-none focus:ring-2 focus:ring-primary/35"
           aria-label="Next day"
         >
           <ChevronRight className="h-4 w-4 icon-flat" />
         </button>
       </div>
+
+      {panelOpen && (
+        <div
+          id={panelId}
+          role="dialog"
+          aria-label="Choose schedule date"
+          className="absolute left-0 right-0 top-full z-50 mt-2 rounded-[var(--radius-md)] border border-border bg-background-secondary p-3 shadow-lg"
+        >
+          <div className="grid grid-cols-3 gap-2">
+            <div>
+              <label
+                htmlFor={`${panelId}-year`}
+                className="mb-1 block text-xs font-medium text-text-muted"
+              >
+                Year
+              </label>
+              <div className="relative">
+                <select
+                  id={`${panelId}-year`}
+                  value={selectedYear}
+                  onChange={(e) =>
+                    applyParts(Number(e.target.value), selectedMonth, selectedDay)
+                  }
+                  className={selectClassName}
+                >
+                  {years.map((year) => (
+                    <option key={year} value={year}>
+                      {year}
+                    </option>
+                  ))}
+                </select>
+                <ChevronDown
+                  className="pointer-events-none absolute right-1.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-text-muted icon-flat"
+                  aria-hidden
+                />
+              </div>
+            </div>
+
+            <div>
+              <label
+                htmlFor={`${panelId}-month`}
+                className="mb-1 block text-xs font-medium text-text-muted"
+              >
+                Month
+              </label>
+              <div className="relative">
+                <select
+                  id={`${panelId}-month`}
+                  value={selectedMonth}
+                  onChange={(e) =>
+                    applyParts(selectedYear, Number(e.target.value), selectedDay)
+                  }
+                  className={selectClassName}
+                >
+                  {MONTH_LABELS.map((name, index) => {
+                    const disabled =
+                      normalizedMin &&
+                      selectedYear === normalizedMin.getFullYear() &&
+                      index < normalizedMin.getMonth();
+                    return (
+                      <option key={name} value={index} disabled={disabled}>
+                        {name}
+                      </option>
+                    );
+                  })}
+                </select>
+                <ChevronDown
+                  className="pointer-events-none absolute right-1.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-text-muted icon-flat"
+                  aria-hidden
+                />
+              </div>
+            </div>
+
+            <div>
+              <label
+                htmlFor={`${panelId}-day`}
+                className="mb-1 block text-xs font-medium text-text-muted"
+              >
+                Day
+              </label>
+              <div className="relative">
+                <select
+                  id={`${panelId}-day`}
+                  value={selectedDay}
+                  onChange={(e) =>
+                    applyParts(
+                      selectedYear,
+                      selectedMonth,
+                      Number(e.target.value),
+                      true,
+                    )
+                  }
+                  className={selectClassName}
+                >
+                  {Array.from({ length: dayCount }, (_, i) => i + 1).map((day) => {
+                    const disabled =
+                      normalizedMin &&
+                      selectedYear === normalizedMin.getFullYear() &&
+                      selectedMonth === normalizedMin.getMonth() &&
+                      day < normalizedMin.getDate();
+                    return (
+                      <option key={day} value={day} disabled={disabled}>
+                        {day}
+                      </option>
+                    );
+                  })}
+                </select>
+                <ChevronDown
+                  className="pointer-events-none absolute right-1.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-text-muted icon-flat"
+                  aria-hidden
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
 }