Revert "PHP Rebuild"

This reverts commit 2ef3654841.
2026-09-05 09:32:05 +01:00
1 parent a59f998f2b
commit 2aa8405006
@@ -0,0 +1,84 @@
+import Image from "next/image";
+import { Gift, NotebookText } from "lucide-react";
+import type { ReactNode } from "react";
+import { Card } from "@/components/ui/card";
+import { StatusPill } from "@/components/ui/status-pill";
+import type { AppointmentStatus, StaffSummary } from "@/types/domain";
+
+export interface AppointmentCardProps {
+  status: AppointmentStatus;
+  serviceName: string;
+  /** The other party shown on the card — the barber on a customer-facing card, the customer on a staff-facing one. Same {id, name, avatarUrl} shape either way. */
+  person: StaffSummary;
+  /** Defaults to "with" — a staff card might prefer e.g. "for". */
+  personLabel?: string;
+  /** Pre-formatted for display, e.g. "Sat, Oct 12" — omit when the surrounding page already makes the date clear (e.g. a single day's agenda). */
+  formattedDate?: string;
+  /** Pre-formatted for display, e.g. "2:00 PM". */
+  formattedTime: string;
+  /** Small notes-exist indicator — staff calendar/agenda use, customer cards leave this unset. */
+  hasNotes?: boolean;
+  /** Small loyalty-reward-available indicator — same. */
+  hasAvailableReward?: boolean;
+  /** Reschedule/Cancel/Book again buttons — left to the caller so this
+   * component stays agnostic of which actions apply to which status. */
+  actions?: ReactNode;
+  href?: string;
+}
+
+export function AppointmentCard({
+  status,
+  serviceName,
+  person,
+  personLabel = "with",
+  formattedDate,
+  formattedTime,
+  hasNotes,
+  hasAvailableReward,
+  actions,
+}: AppointmentCardProps) {
+  return (
+    <Card className="p-5">
+      <div className="mb-4 flex items-start justify-between">
+        <StatusPill status={status} />
+        <div className="text-right">
+          {formattedDate && <p className="text-sm font-bold">{formattedDate}</p>}
+          <p className="text-muted text-xs">{formattedTime}</p>
+        </div>
+      </div>
+      <div className="mb-4 flex items-center gap-3">
+        {person.avatarUrl ? (
+          <Image
+            src={person.avatarUrl}
+            alt=""
+            width={40}
+            height={40}
+            className="h-10 w-10 rounded-full object-cover"
+          />
+        ) : (
+          <div className="bg-stone text-muted flex h-10 w-10 items-center justify-center rounded-full text-xs font-bold">
+            {person.name.charAt(0)}
+          </div>
+        )}
+        <div className="min-w-0 flex-1">
+          <div className="flex items-center gap-1.5">
+            <h3 className="truncate text-sm font-bold">{serviceName}</h3>
+            {hasNotes && (
+              <NotebookText className="text-muted h-3.5 w-3.5 shrink-0" aria-label="Has notes" />
+            )}
+            {hasAvailableReward && (
+              <Gift
+                className="text-accent-loyalty h-3.5 w-3.5 shrink-0"
+                aria-label="Reward available"
+              />
+            )}
+          </div>
+          <p className="text-muted text-xs">
+            {personLabel} {person.name}
+          </p>
+        </div>
+      </div>
+      {actions && <div className="border-line flex gap-2 border-t pt-4">{actions}</div>}
+    </Card>
+  );
+}