Phase 7

2026-08-03 21:15:24 +01:00
1 parent ec5583f972
commit 546613e677
@@ -1,12 +1,13 @@
 "use client";

+import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useState, useTransition } from "react";
 import { Button } from "@/components/ui/button";
 import { Switch } from "@/components/ui/switch";
 import { Weekday } from "@/generated/prisma/enums";
 import { saveWorkingHoursAction } from "../actions/working-hours";
-import type { WorkingHoursActionResult } from "../actions/working-hours";
+import type { WorkingHoursActionResult, WorkingHoursConflictItem } from "../actions/working-hours";
 import type { WorkingHoursDayInput } from "@/services/staff/staff.service";

 const DAY_ORDER: Weekday[] = [
@@ -58,11 +59,17 @@ export function WorkingHoursForm({
  initialRows,
  businessHoursLabel,
  onSave = saveWorkingHoursAction,
+  appointmentHrefBase = "/staff/appointments",
 }: {
  initialRows: InitialWorkingHoursRow[];
  businessHoursLabel: Record<Weekday, string>;
  /** Owner-on-behalf-of-staff editing (src/app/(owner)/owner/team/[id]/hours) injects its own Server Action here instead of the self-service default — same pattern as AppointmentStatusActions' `actions` prop. */
-  onSave?: (days: WorkingHoursDayInput[]) => Promise<WorkingHoursActionResult>;
+  onSave?: (
+    days: WorkingHoursDayInput[],
+    acknowledgeConflicts?: boolean,
+  ) => Promise<WorkingHoursActionResult>;
+  /** Conflict links point at /owner/appointments/[id] when the owner is editing on a staff member's behalf. */
+  appointmentHrefBase?: string;
 }) {
  const router = useRouter();
  const [days, setDays] = useState<DayState[]>(() =>
@@ -78,10 +85,12 @@ export function WorkingHoursForm({
  );
  const [error, setError] = useState<string | null>(null);
  const [saved, setSaved] = useState(false);
+  const [conflicts, setConflicts] = useState<WorkingHoursConflictItem[]>([]);
  const [isPending, startTransition] = useTransition();

  const updateDay = (dayOfWeek: Weekday, patch: Partial<DayState>) => {
    setSaved(false);
+    setConflicts([]);
    setDays((prev) => prev.map((d) => (d.dayOfWeek === dayOfWeek ? { ...d, ...patch } : d)));
  };

@@ -89,10 +98,11 @@ export function WorkingHoursForm({
    const monday = days.find((d) => d.dayOfWeek === Weekday.MONDAY);
    if (!monday) return;
    setSaved(false);
+    setConflicts([]);
    setDays((prev) => prev.map((d) => (d.dayOfWeek === Weekday.MONDAY ? d : { ...d, isOff: monday.isOff, startTime: monday.startTime, endTime: monday.endTime })));
  };

-  const handleSave = () => {
+  const submit = (acknowledgeConflicts: boolean) => {
    setError(null);
    startTransition(async () => {
      const result = await onSave(
@@ -101,49 +111,82 @@ export function WorkingHoursForm({
          isOff: d.isOff,
          ...(d.isOff ? {} : { startMinutes: toMinutes(d.startTime), endMinutes: toMinutes(d.endTime) }),
        })),
+        acknowledgeConflicts,
      );
      if (!result.success) {
        setError(result.error ?? "Couldn't save working hours.");
+        setConflicts(result.conflicts ?? []);
        return;
      }
      setSaved(true);
+      setConflicts([]);
      router.refresh();
    });
  };

+  if (conflicts.length > 0) {
+    return (
+      <div className="space-y-4">
+        <p role="alert" className="text-danger text-sm font-medium">
+          These hours would leave {conflicts.length} upcoming appointment{conflicts.length > 1 ? "s" : ""} outside
+          working hours. They won&apos;t be cancelled automatically — review them, then confirm if you still want to
+          save.
+        </p>
+        <ul className="space-y-2">
+          {conflicts.map((c) => (
+            <li key={c.id} className="border-line rounded-lg border bg-white p-3 text-xs">
+              <Link href={`${appointmentHrefBase}/${c.id}`} className="font-bold underline">
+                {c.customerName}
+              </Link>
+              <p className="text-muted">{c.serviceNames}</p>
+            </li>
+          ))}
+        </ul>
+        <div className="flex gap-3">
+          <Button variant="secondary" className="flex-1" onClick={() => setConflicts([])}>
+            Go Back
+          </Button>
+          <Button variant="destructive" className="flex-1" isLoading={isPending} onClick={() => submit(true)}>
+            Save Anyway
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
  return (
    <div className="space-y-4">
-      <button type="button" onClick={copyMondayToAll} className="text-xs font-bold uppercase tracking-widest text-accent underline">
+      <button type="button" onClick={copyMondayToAll} className="text-accent text-xs font-bold tracking-widest uppercase underline">
        Copy Monday to all days
      </button>

-      <div className="divide-y divide-line rounded-jumbo border border-line bg-white">
+      <div className="divide-line rounded-jumbo border-line divide-y border bg-white">
        {days.map((day) => (
          <div key={day.dayOfWeek} className="flex items-center justify-between gap-4 px-5 py-4">
            <div className="flex items-center gap-3">
              <Switch checked={!day.isOff} onCheckedChange={(checked) => updateDay(day.dayOfWeek, { isOff: !checked })} aria-label={`${DAY_LABEL[day.dayOfWeek]} working`} />
              <div>
                <p className="text-sm font-bold">{DAY_LABEL[day.dayOfWeek]}</p>
-                <p className="text-[10px] text-muted">Business hours: {businessHoursLabel[day.dayOfWeek]}</p>
+                <p className="text-muted text-[10px]">Business hours: {businessHoursLabel[day.dayOfWeek]}</p>
              </div>
            </div>
            {day.isOff ? (
-              <span className="text-xs text-muted">Off</span>
+              <span className="text-muted text-xs">Off</span>
            ) : (
              <div className="flex items-center gap-2">
                <input
                  type="time"
                  value={day.startTime}
                  onChange={(e) => updateDay(day.dayOfWeek, { startTime: e.target.value })}
-                  className="rounded-lg border border-line px-2 py-1.5 text-xs"
+                  className="border-line rounded-lg border px-2 py-1.5 text-xs"
                  aria-label={`${DAY_LABEL[day.dayOfWeek]} start time`}
                />
-                <span className="text-xs text-muted">to</span>
+                <span className="text-muted text-xs">to</span>
                <input
                  type="time"
                  value={day.endTime}
                  onChange={(e) => updateDay(day.dayOfWeek, { endTime: e.target.value })}
-                  className="rounded-lg border border-line px-2 py-1.5 text-xs"
+                  className="border-line rounded-lg border px-2 py-1.5 text-xs"
                  aria-label={`${DAY_LABEL[day.dayOfWeek]} end time`}
                />
              </div>
@@ -153,16 +196,16 @@ export function WorkingHoursForm({
      </div>

      {error && (
-        <p role="alert" className="text-sm font-medium text-danger">
+        <p role="alert" className="text-danger text-sm font-medium">
          {error}
        </p>
      )}
      {saved && !error && (
-        <p role="status" className="text-sm font-medium text-accent">
+        <p role="status" className="text-accent-foreground text-sm font-medium">
          Saved.
        </p>
      )}
-      <Button className="w-full" isLoading={isPending} onClick={handleSave}>
+      <Button className="w-full" isLoading={isPending} onClick={() => submit(false)}>
        Save
      </Button>
    </div>