Phase 5

Phase 5 is complete. All 53 tasks are done, verified on a fresh database in a single clean run: **121 unit tests**, **55 integration tests**, and **15 E2E journeys** (6 Phase 4 + 9 new Phase 5) all passing, plus a clean `tsc`/`eslint`/`build`.

Summary of this final stretch:

- **Fixed a real bug**: `StaffService`'s break/time-off update/delete functions threw uncaught instead of failing gracefully on a permission mismatch — fixed with proper `PERMISSION_DENIED` handling, covered by new integration tests.
- **Built the remaining Phase 5 UI**: Breaks editor, Time Off editor, Barber Profile, and Notification Preferences — all wired to real services, no placeholders.
- **Extended seed data**: more customers, loyalty accounts/transactions/rewards, and appointments spanning every status today (anchored to real time so the "Current Appointment" priority logic is reliably exercised).
- **Found and fixed a second real bug live in the browser**: the Break/Time-Off edit sheets showed stale default values instead of the item being edited (a classic `useState`-doesn't-reinitialize-on-prop-change bug) — fixed with a `key` prop to force remount.
- **Wrote the full Phase 5 test suite**: unit tests for `selectCurrentAppointment` and all `StaffService` validators, integration tests for `LoyaltyService` and `StaffService` (including the permission-fix regression tests), and 9 new Playwright E2E journeys covering the brief's exact required list.
- **Did the desktop-responsive pass**: a persistent sidebar nav replacing the bottom bar at `lg:`, a genuine calendar+"Right Now" side-by-side split, and 2-column layouts for the clients list and customer details — addressing the brief's explicit "more than simple centering" requirement.
- **Wrote [docs/phase-5-summary.md](docs/phase-5-summary.md)** documenting everything above in full.

Nothing is committed — the whole session (Phases 2–5) sits uncommitted on top of the initial template commit, same as you left it. Let me know if you'd like me to commit, or if you want to move on to Phase 6.

src/components/ui/appointment-card.tsx

@@ -1,4 +1,5 @@
 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";
@@ -7,11 +8,18 @@ import type { AppointmentStatus, StaffSummary } from "@/types/domain";
 export interface AppointmentCardProps {
   status: AppointmentStatus;
   serviceName: string;
-  staff: StaffSummary;
-  /** Pre-formatted for display, e.g. "Sat, Oct 12". */
-  formattedDate: 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;
@@ -21,9 +29,12 @@ export interface AppointmentCardProps {
 export function AppointmentCard({
   status,
   serviceName,
-  staff,
+  person,
+  personLabel = "with",
   formattedDate,
   formattedTime,
+  hasNotes,
+  hasAvailableReward,
   actions,
 }: AppointmentCardProps) {
   return (
@@ -31,30 +42,43 @@ export function AppointmentCard({
       <div className="mb-4 flex items-start justify-between">
         <StatusPill status={status} />
         <div className="text-right">
-          <p className="text-sm font-bold">{formattedDate}</p>
-          <p className="text-xs text-muted">{formattedTime}</p>
+          {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">
-        {staff.avatarUrl ? (
+        {person.avatarUrl ? (
           <Image
-            src={staff.avatarUrl}
+            src={person.avatarUrl}
             alt=""
             width={40}
             height={40}
             className="h-10 w-10 rounded-full object-cover"
           />
         ) : (
-          <div className="flex h-10 w-10 items-center justify-center rounded-full bg-stone text-xs font-bold text-muted">
-            {staff.name.charAt(0)}
+          <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>
-          <h3 className="text-sm font-bold">{serviceName}</h3>
-          <p className="text-xs text-muted">with {staff.name}</p>
+        <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="flex gap-2 border-t border-line pt-4">{actions}</div>}
+      {actions && <div className="border-line flex gap-2 border-t pt-4">{actions}</div>}
     </Card>
   );
 }