@wealthx/shadcn 1.2.1 → 1.3.0

package/src/components/ui/appointment-availability-settings.tsx

@@ -0,0 +1,645 @@
+import React from "react";
+import { Button } from "./button";
+import { DatePicker } from "./date-picker";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "./dialog";
+import { Input } from "./input";
+import { Label } from "./label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "./select";
+import { Separator } from "./separator";
+import { Switch } from "./switch";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "./tabs";
+import { cn } from "@/lib/utils";
+import { formatDateWithWeekday } from "@/lib/format-date";
+import { Plus, X } from "lucide-react";
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export interface AppointmentDaySchedule {
+  day: "Mon" | "Tue" | "Wed" | "Thu" | "Fri" | "Sat" | "Sun";
+  enabled: boolean;
+  /** 24h format — "09:00" */
+  startTime: string;
+  /** 24h format — "17:00" */
+  endTime: string;
+}
+
+export interface AppointmentAvailabilityPrefs {
+  meetingDuration: string;
+  schedulingBuffer: string;
+  maxSlotsPerDay: string;
+}
+
+export interface AppointmentBlockedDate {
+  /** ISO date string — "2026-04-25" */
+  date: string;
+  /** Human-readable label — "ANZAC Day" */
+  label?: string;
+  /** Partial day — start time in 24h format "09:00" */
+  timeStart?: string;
+  /** Partial day — end time in 24h format "17:00" */
+  timeEnd?: string;
+}
+
+export interface AppointmentAvailabilitySettingsProps {
+  schedule: AppointmentDaySchedule[];
+  blockedDates?: AppointmentBlockedDate[];
+  onSave?: (
+    schedule: AppointmentDaySchedule[],
+    prefs: AppointmentAvailabilityPrefs,
+  ) => void;
+  onBlockedDatesChange?: (dates: AppointmentBlockedDate[]) => void;
+}
+
+// ---------------------------------------------------------------------------
+// AU Public Holidays 2026
+// ---------------------------------------------------------------------------
+
+const AU_PUBLIC_HOLIDAYS_2026: AppointmentBlockedDate[] = [
+  { date: "2026-01-01", label: "New Year's Day" },
+  { date: "2026-01-26", label: "Australia Day" },
+  { date: "2026-04-03", label: "Good Friday" },
+  { date: "2026-04-04", label: "Easter Saturday" },
+  { date: "2026-04-06", label: "Easter Monday" },
+  { date: "2026-04-25", label: "ANZAC Day" },
+  { date: "2026-06-08", label: "King's Birthday" },
+  { date: "2026-12-25", label: "Christmas Day" },
+  { date: "2026-12-26", label: "Boxing Day" },
+];
+
+// ---------------------------------------------------------------------------
+// Internal type — Time Off entries with switch state
+// ---------------------------------------------------------------------------
+
+interface TimeOffEntry {
+  date: string;
+  label?: string;
+  enabled: boolean;
+  isHoliday: boolean;
+  timeStart?: string;
+  timeEnd?: string;
+}
+
+// ---------------------------------------------------------------------------
+// Time options — 30-min increments from 6:00 to 21:30
+// ---------------------------------------------------------------------------
+
+const TIME_OPTIONS: { value: string; label: string }[] = (() => {
+  const opts: { value: string; label: string }[] = [];
+  for (let h = 6; h <= 21; h++) {
+    for (const m of [0, 30]) {
+      const hh = String(h).padStart(2, "0");
+      const mm = String(m).padStart(2, "0");
+      const hour12 = h === 0 ? 12 : h > 12 ? h - 12 : h;
+      const ampm = h < 12 ? "AM" : "PM";
+      opts.push({ value: `${hh}:${mm}`, label: `${hour12}:${mm} ${ampm}` });
+    }
+  }
+  return opts;
+})();
+
+const timeLabel = (v: string) =>
+  TIME_OPTIONS.find((o) => o.value === v)?.label ?? v;
+
+function TimeSelect({
+  value,
+  onChange,
+  disabled,
+}: {
+  value: string;
+  onChange: (v: string) => void;
+  disabled?: boolean;
+}) {
+  return (
+    <Select
+      value={value}
+      onValueChange={(v) => onChange(v as string)}
+      disabled={disabled}
+    >
+      <SelectTrigger className="w-36">
+        <SelectValue />
+      </SelectTrigger>
+      <SelectContent>
+        {TIME_OPTIONS.map((opt) => (
+          <SelectItem key={opt.value} value={opt.value}>
+            {opt.label}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+}
+
+
+// ---------------------------------------------------------------------------
+// "Add More" dialog
+// ---------------------------------------------------------------------------
+
+function AddTimeOffDialog({
+  open,
+  onOpenChange,
+  onAdd,
+}: {
+  open: boolean;
+  onOpenChange: (v: boolean) => void;
+  onAdd: (entry: {
+    date: string;
+    label?: string;
+    timeStart?: string;
+    timeEnd?: string;
+  }) => void;
+}) {
+  const [label, setLabel] = React.useState("");
+  const [date, setDate] = React.useState<Date | undefined>(undefined);
+  const [includeTime, setIncludeTime] = React.useState(false);
+  const [timeStart, setTimeStart] = React.useState("09:00");
+  const [timeEnd, setTimeEnd] = React.useState("17:00");
+
+  const reset = () => {
+    setLabel("");
+    setDate(undefined);
+    setIncludeTime(false);
+    setTimeStart("09:00");
+    setTimeEnd("17:00");
+  };
+
+  const handleAdd = () => {
+    if (!date) return;
+    // Convert Date to ISO date string "YYYY-MM-DD"
+    const isoDate = [
+      date.getFullYear(),
+      String(date.getMonth() + 1).padStart(2, "0"),
+      String(date.getDate()).padStart(2, "0"),
+    ].join("-");
+    onAdd({
+      date: isoDate,
+      label: label.trim() || undefined,
+      timeStart: includeTime ? timeStart : undefined,
+      timeEnd: includeTime ? timeEnd : undefined,
+    });
+    reset();
+    onOpenChange(false);
+  };
+
+  const handleCancel = () => {
+    reset();
+    onOpenChange(false);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent size="auto" minWidth="26rem" align="top">
+        <DialogHeader>
+          <DialogTitle>Add time off</DialogTitle>
+          <DialogDescription>
+            Block a date when you are unavailable. Clients cannot book on this
+            date.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="flex flex-col gap-4 py-1">
+          {/* Label */}
+          <div className="flex flex-col gap-1.5">
+            <Label htmlFor="toff-label">
+              Name{" "}
+              <span className="font-normal text-muted-foreground">
+                (optional)
+              </span>
+            </Label>
+            <Input
+              id="toff-label"
+              placeholder="e.g. Conference, Personal day…"
+              value={label}
+              onChange={(e) => setLabel(e.target.value)}
+            />
+          </div>
+
+          {/* Date */}
+          <div className="flex flex-col gap-1.5">
+            <Label>Date</Label>
+            <DatePicker
+              value={date}
+              onChange={setDate}
+              placeholder="Pick a date"
+              calendarProps={{ fromDate: new Date() }}
+            />
+          </div>
+
+          {/* Add time switch */}
+          <div className="flex flex-col gap-3">
+            <div className="flex items-center gap-3">
+              <Switch
+                id="toff-include-time"
+                checked={includeTime}
+                onCheckedChange={setIncludeTime}
+              />
+              <Label
+                htmlFor="toff-include-time"
+                className="cursor-pointer text-sm"
+              >
+                Specify hours (partial day)
+              </Label>
+            </div>
+
+            {includeTime && (
+              <div className="flex items-center gap-3 pl-10">
+                <TimeSelect value={timeStart} onChange={setTimeStart} />
+                <span className="text-sm text-muted-foreground">to</span>
+                <TimeSelect value={timeEnd} onChange={setTimeEnd} />
+              </div>
+            )}
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={handleCancel}>
+            Cancel
+          </Button>
+          <Button onClick={handleAdd} disabled={!date}>
+            Add
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+export function AppointmentAvailabilitySettings({
+  schedule: initialSchedule,
+  blockedDates: blockedDatesProp,
+  onSave,
+  onBlockedDatesChange,
+}: AppointmentAvailabilitySettingsProps) {
+  // Track first render to skip auto-save on mount
+  const hasMounted = React.useRef(false);
+  React.useEffect(() => {
+    hasMounted.current = true;
+  }, []);
+
+  // --- Weekly Availability tab ---
+  const [schedule, setSchedule] =
+    React.useState<AppointmentDaySchedule[]>(initialSchedule);
+
+  // --- Booking Preferences tab ---
+  const [meetingDuration, setMeetingDuration] = React.useState("30");
+  const [schedulingBuffer, setSchedulingBuffer] = React.useState("0");
+  const [maxSlotsPerDay, setMaxSlotsPerDay] = React.useState("8");
+
+  // --- Time Off tab ---
+  const [timeOffEntries, setTimeOffEntries] = React.useState<TimeOffEntry[]>(
+    () => {
+      const holidayDates = new Set(AU_PUBLIC_HOLIDAYS_2026.map((h) => h.date));
+      const entries: TimeOffEntry[] = AU_PUBLIC_HOLIDAYS_2026.map((h) => ({
+        ...h,
+        enabled: true,
+        isHoliday: true,
+      }));
+      blockedDatesProp?.forEach((b) => {
+        if (!holidayDates.has(b.date)) {
+          entries.push({
+            date: b.date,
+            label: b.label,
+            enabled: true,
+            isHoliday: false,
+          });
+        }
+      });
+      return entries.sort((a, b) => a.date.localeCompare(b.date));
+    },
+  );
+  const [addMoreOpen, setAddMoreOpen] = React.useState(false);
+
+  // ---------------------------------------------------------------------------
+  // Auto-save — fires after each deliberate state change (skip initial mount)
+  // ---------------------------------------------------------------------------
+
+  const currentPrefs = React.useMemo(
+    () => ({ meetingDuration, schedulingBuffer, maxSlotsPerDay }),
+    [meetingDuration, schedulingBuffer, maxSlotsPerDay],
+  );
+
+  React.useEffect(() => {
+    if (!hasMounted.current) return;
+    onSave?.(schedule, currentPrefs);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [schedule]);
+
+  React.useEffect(() => {
+    if (!hasMounted.current) return;
+    onSave?.(schedule, currentPrefs);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [meetingDuration, schedulingBuffer, maxSlotsPerDay]);
+
+  React.useEffect(() => {
+    if (!hasMounted.current) return;
+    const blocked = timeOffEntries
+      .filter((e) => e.enabled)
+      .map(({ date, label, timeStart, timeEnd }) => ({
+        date,
+        label,
+        timeStart,
+        timeEnd,
+      }));
+    onBlockedDatesChange?.(blocked);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [timeOffEntries]);
+
+  // ---------------------------------------------------------------------------
+  // Weekly handlers
+  // ---------------------------------------------------------------------------
+
+  const toggleDay = (index: number) => {
+    setSchedule((prev) =>
+      prev.map((d, i) => (i === index ? { ...d, enabled: !d.enabled } : d)),
+    );
+  };
+
+  const updateTime = (
+    index: number,
+    field: "startTime" | "endTime",
+    value: string,
+  ) => {
+    setSchedule((prev) =>
+      prev.map((d, i) => (i === index ? { ...d, [field]: value } : d)),
+    );
+  };
+
+  // ---------------------------------------------------------------------------
+  // Time Off handlers
+  // ---------------------------------------------------------------------------
+
+  const toggleTimeOff = (date: string, enabled: boolean) => {
+    setTimeOffEntries((prev) =>
+      prev.map((e) => (e.date === date ? { ...e, enabled } : e)),
+    );
+  };
+
+  const removeCustomDate = (date: string) => {
+    setTimeOffEntries((prev) => prev.filter((e) => e.date !== date));
+  };
+
+  const handleAddMore = (entry: {
+    date: string;
+    label?: string;
+    timeStart?: string;
+    timeEnd?: string;
+  }) => {
+    if (timeOffEntries.some((e) => e.date === entry.date)) return;
+    setTimeOffEntries((prev) =>
+      [
+        ...prev,
+        {
+          date: entry.date,
+          label: entry.label,
+          enabled: true,
+          isHoliday: false,
+          timeStart: entry.timeStart,
+          timeEnd: entry.timeEnd,
+        },
+      ].sort((a, b) => a.date.localeCompare(b.date)),
+    );
+  };
+
+  return (
+    <div className="border border-border bg-card">
+      <Tabs defaultValue="weekly" className="gap-0">
+        {/* Tab strip */}
+        <div className="border-b border-border p-1">
+          <TabsList variant="default" className="w-full">
+            <TabsTrigger value="weekly">Weekly Availability</TabsTrigger>
+            <TabsTrigger value="booking">Booking Preferences</TabsTrigger>
+            <TabsTrigger value="time-off">Time Off</TabsTrigger>
+          </TabsList>
+        </div>
+
+        {/* ---------------------------------------------------------------- */}
+        {/* Tab 1: Weekly Availability                                        */}
+        {/* ---------------------------------------------------------------- */}
+        <TabsContent value="weekly">
+          <div className="flex flex-col divide-y divide-border">
+            {schedule.map((day, index) => (
+              <div
+                key={day.day}
+                className="flex min-h-[68px] items-center gap-5 px-6 py-4"
+              >
+                <div className="flex w-28 items-center gap-3">
+                  <Switch
+                    id={`day-${day.day}`}
+                    checked={day.enabled}
+                    onCheckedChange={() => toggleDay(index)}
+                  />
+                  <Label
+                    htmlFor={`day-${day.day}`}
+                    className="cursor-pointer text-sm font-medium"
+                  >
+                    {day.day}
+                  </Label>
+                </div>
+
+                {day.enabled ? (
+                  <div className="flex flex-1 items-center gap-3">
+                    <TimeSelect
+                      value={day.startTime}
+                      onChange={(v) => updateTime(index, "startTime", v)}
+                    />
+                    <span className="text-sm text-muted-foreground">to</span>
+                    <TimeSelect
+                      value={day.endTime}
+                      onChange={(v) => updateTime(index, "endTime", v)}
+                    />
+                  </div>
+                ) : (
+                  <p className="flex-1 text-sm text-muted-foreground">
+                    Unavailable
+                  </p>
+                )}
+              </div>
+            ))}
+          </div>
+        </TabsContent>
+
+        {/* ---------------------------------------------------------------- */}
+        {/* Tab 2: Booking Preferences                                        */}
+        {/* ---------------------------------------------------------------- */}
+        <TabsContent value="booking">
+          <div className="flex flex-col divide-y divide-border">
+            <div className="flex min-h-[68px] items-center justify-between px-6 py-4">
+              <div className="flex flex-col gap-0.5">
+                <p className="text-sm font-medium">Meeting Duration</p>
+                <p className="text-xs text-muted-foreground">
+                  Length of each appointment slot
+                </p>
+              </div>
+              <Select
+                value={meetingDuration}
+                onValueChange={(v) => setMeetingDuration(v as string)}
+              >
+                <SelectTrigger className="w-40">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="15">15 minutes</SelectItem>
+                  <SelectItem value="30">30 minutes</SelectItem>
+                  <SelectItem value="45">45 minutes</SelectItem>
+                  <SelectItem value="60">60 minutes</SelectItem>
+                  <SelectItem value="90">90 minutes</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div className="flex min-h-[68px] items-center justify-between px-6 py-4">
+              <div className="flex flex-col gap-0.5">
+                <p className="text-sm font-medium">Scheduling Buffer</p>
+                <p className="text-xs text-muted-foreground">
+                  Gap between consecutive bookings
+                </p>
+              </div>
+              <Select
+                value={schedulingBuffer}
+                onValueChange={(v) => setSchedulingBuffer(v as string)}
+              >
+                <SelectTrigger className="w-40">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="0">No buffer</SelectItem>
+                  <SelectItem value="5">5 minutes</SelectItem>
+                  <SelectItem value="10">10 minutes</SelectItem>
+                  <SelectItem value="15">15 minutes</SelectItem>
+                  <SelectItem value="30">30 minutes</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div className="flex min-h-[68px] items-center justify-between px-6 py-4">
+              <div className="flex flex-col gap-0.5">
+                <p className="text-sm font-medium">Daily Slot Limit</p>
+                <p className="text-xs text-muted-foreground">
+                  Maximum bookings accepted per day
+                </p>
+              </div>
+              <Select
+                value={maxSlotsPerDay}
+                onValueChange={(v) => setMaxSlotsPerDay(v as string)}
+              >
+                <SelectTrigger className="w-40">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="2">2 per day</SelectItem>
+                  <SelectItem value="4">4 per day</SelectItem>
+                  <SelectItem value="6">6 per day</SelectItem>
+                  <SelectItem value="8">8 per day</SelectItem>
+                  <SelectItem value="10">10 per day</SelectItem>
+                  <SelectItem value="unlimited">Unlimited</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+        </TabsContent>
+
+        {/* ---------------------------------------------------------------- */}
+        {/* Tab 3: Time Off                                                   */}
+        {/* ---------------------------------------------------------------- */}
+        <TabsContent value="time-off">
+          {/* Description + Add more button */}
+          <div className="flex items-center justify-between px-6 py-4">
+            <p className="text-sm text-muted-foreground">
+              Toggle dates when you are unavailable. Clients cannot book on
+              switched-on dates.
+            </p>
+            <Button
+              variant="outline"
+              size="sm"
+              className="ml-4 shrink-0 gap-1.5"
+              onClick={() => setAddMoreOpen(true)}
+            >
+              <Plus className="h-3.5 w-3.5" />
+              Add more
+            </Button>
+          </div>
+
+          <Separator />
+
+          {/* Holiday + custom date rows */}
+          <div className="flex flex-col divide-y divide-border">
+            {timeOffEntries.map((entry) => {
+              const formattedDate = formatDateWithWeekday(entry.date);
+              const hasTimeRange = entry.timeStart && entry.timeEnd;
+              return (
+                <div
+                  key={entry.date}
+                  className="flex min-h-[68px] items-center gap-5 px-6 py-4"
+                >
+                  <Switch
+                    id={`toff-${entry.date}`}
+                    checked={entry.enabled}
+                    onCheckedChange={(v) => toggleTimeOff(entry.date, v)}
+                  />
+                  <div className="min-w-0 flex-1">
+                    <Label
+                      htmlFor={`toff-${entry.date}`}
+                      className={cn(
+                        "cursor-pointer text-sm font-medium",
+                        !entry.enabled && "text-muted-foreground",
+                      )}
+                    >
+                      {entry.label ?? formattedDate}
+                    </Label>
+                    <p className="text-xs text-muted-foreground">
+                      {entry.label ? formattedDate : null}
+                      {hasTimeRange && (
+                        <>
+                          {entry.label ? " · " : ""}
+                          {timeLabel(entry.timeStart!)} –{" "}
+                          {timeLabel(entry.timeEnd!)}
+                        </>
+                      )}
+                    </p>
+                  </div>
+                  {/* Only custom (non-holiday) dates can be removed */}
+                  {!entry.isHoliday && (
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      size="icon"
+                      className="h-7 w-7 text-muted-foreground hover:text-destructive"
+                      onClick={() => removeCustomDate(entry.date)}
+                    >
+                      <X className="h-3.5 w-3.5" />
+                    </Button>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        </TabsContent>
+      </Tabs>
+
+      {/* Add More dialog */}
+      <AddTimeOffDialog
+        open={addMoreOpen}
+        onOpenChange={setAddMoreOpen}
+        onAdd={handleAddMore}
+      />
+    </div>
+  );
+}