feature: a minimal implementation of the appointment feature done.

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

@@ -0,0 +1,51 @@
+'use client';
+
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { addCalendarDays, compareLocalDayStart } from '@/lib/appointmentTime';
+
+interface ScheduleDayPickerProps {
+  value: Date;
+  onChange: (day: Date) => void;
+  /** Inclusive minimum calendar day (typically today at local midnight). */
+  minDate: Date;
+  label?: string;
+}
+
+export function ScheduleDayPicker({ value, onChange, minDate, label = 'Schedule date' }: ScheduleDayPickerProps) {
+  const canGoPrev = compareLocalDayStart(value, minDate) > 0;
+
+  const labelText = value.toLocaleDateString(undefined, {
+    weekday: 'short',
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+  });
+
+  return (
+    <div className="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"
+          disabled={!canGoPrev}
+          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 disabled:opacity-35 disabled:pointer-events-none focus:outline-none focus:ring-2 focus:ring-primary/35"
+          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))}
+          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>
+    </div>
+  );
+}