frontend: donation request review page (HAFB)

Implement the admin donation-request review screen and the shared components
it needs. The database is not provisioned, so the page reads from a local
Zustand store seeded from a fixture; field names and actions mirror the
review-schema PR so wiring to the API later is a fetch swap.

New shared components (common/):
- ui/alert — cva callout (info/warning/destructive); ServiceAreaNotice now
  builds on it
- ui/collapsible, ui/copy-button, ui/toggle-group — thin base-ui wrappers
- data-display/PhotoStrip + PhotoLightboxDialog — thumbnail row and full-size
  viewer with prev/next + thumbnail rail
- layout/AdminHeader — logo + search + avatar top bar
- InformationBlock gains valueAction (copy button beside a value)
- status-labels gains ScheduledBadge

Flow (app/donation-request/[id]):
- Donor Information card with read + inline edit (Yes/No toggles), collapsible
- Item cards reusing the existing approve/reject dialogs, with the rejection
  reason shown once rejected and a photo strip that opens the lightbox
- Schedule / Edit pickup dialog (native date input per design; the calendar
  popover is not designed), scheduled-pickup card, and confirm-date dialog.
  Editing a confirmed pickup's date clears the confirmation, matching the
  dialog warning and the backend rule.
- Header badge derived from item + pickup state (pending / partially reviewed /
  reviewed + Schedule button / scheduled)

Tests: reviewStatus derivation, DonationItemCard, PhotoLightboxDialog
(18 new; suite 125 passing). Gallery entries added for the new shared pieces.
type-check, lint, prettier clean.

Two design gaps handled: frame 1 has no visible entry into donor-edit mode, so
an edit affordance sits beside the collapse chevron; frame 8's "2/4 Approved"
label is driven by the real approved/total counts.

Author: brian-fu

frontend/app/component-gallery/page.tsx

@@ -20,8 +20,11 @@ import {
   SearchBar,
   DataTable,
   DataTableColumnHeader,
+  PhotoStrip,
+  PhotoLightboxDialog,
 } from "@/common/components/data-display";
 import {
+  Alert,
   Avatar,
   AvatarFallback,
   AvatarImage,
@@ -36,6 +39,10 @@ import {
   CardHeader,
   CardTitle,
   Checkbox,
+  Collapsible,
+  CollapsiblePanel,
+  CollapsibleTrigger,
+  CopyButton,
   Dialog,
   DialogBody,
   DialogClose,
@@ -72,6 +79,8 @@ import {
   TabsList,
   TabsTrigger,
   Textarea,
+  ToggleGroup,
+  ToggleGroupItem,
   Tooltip,
   TooltipContent,
   TooltipProvider,
@@ -92,6 +101,7 @@ import {
   ReviewedBadge,
   PendingReviewBadge,
   PartiallyReviewedBadge,
+  ScheduledBadge,
   ApprovalsLabel,
   ApprovedBadge,
   RejectedBadge,
@@ -200,6 +210,7 @@ function StatusLabelsDemo() {
         <ReviewedBadge />
         <PendingReviewBadge />
         <PartiallyReviewedBadge />
+        <ScheduledBadge date="Mar 14" />
       </div>
       <div className="flex flex-wrap gap-sm">
         <ApprovalsLabel approved={0} total={4} />
@@ -480,7 +491,10 @@ const SAMPLE_DONATION_ITEM: DonationItem = {
 
 function DonationItemPreviewDemo() {
   return (
-    <DonationItemPreview {...SAMPLE_DONATION_ITEM} className="w-full max-w-md" />
+    <DonationItemPreview
+      {...SAMPLE_DONATION_ITEM}
+      className="w-full max-w-md"
+    />
   );
 }
 
@@ -1204,18 +1218,97 @@ function DataTableDemo() {
   );
 }
 
+function AlertDemo() {
+  return (
+    <div className="flex w-full max-w-md flex-col gap-sm">
+      <Alert variant="info">This is an informational notice.</Alert>
+      <Alert variant="warning">
+        Selecting a new date will require new confirmation.
+      </Alert>
+      <Alert variant="destructive">Something went wrong.</Alert>
+    </div>
+  );
+}
+
+function CopyButtonDemo() {
+  return (
+    <div className="flex items-center gap-sm text-paragraph-small text-muted-foreground">
+      katiesun@uwblueprint.org
+      <CopyButton value="katiesun@uwblueprint.org" label="Copy email" />
+    </div>
+  );
+}
+
+function CollapsibleDemo() {
+  return (
+    <Collapsible
+      defaultOpen
+      className="w-full max-w-md rounded-lg border border-border p-md"
+    >
+      <CollapsibleTrigger render={<Button variant="ghost" size="sm" />}>
+        Toggle details
+      </CollapsibleTrigger>
+      <CollapsiblePanel>
+        <p className="pt-sm text-paragraph-small text-muted-foreground">
+          Hidden content revealed by the trigger.
+        </p>
+      </CollapsiblePanel>
+    </Collapsible>
+  );
+}
+
+function ToggleGroupDemo() {
+  const [value, setValue] = useState<string[]>(["no"]);
+  return (
+    <ToggleGroup value={value} onValueChange={setValue} aria-label="Yes or no">
+      <ToggleGroupItem value="yes">Yes</ToggleGroupItem>
+      <ToggleGroupItem value="no">No</ToggleGroupItem>
+    </ToggleGroup>
+  );
+}
+
+const SAMPLE_PHOTOS = Array.from({ length: 5 }, (_, i) => ({
+  url: `https://picsum.photos/seed/gallery-${i}/240/240`,
+  alt: `Sample photo ${i + 1}`,
+}));
+
+function PhotoStripDemo() {
+  const [open, setOpen] = useState(false);
+  const [index, setIndex] = useState(0);
+  return (
+    <div className="w-full max-w-md">
+      <PhotoStrip
+        photos={SAMPLE_PHOTOS}
+        onView={(i) => {
+          setIndex(i);
+          setOpen(true);
+        }}
+      />
+      <PhotoLightboxDialog
+        open={open}
+        onOpenChange={setOpen}
+        photos={SAMPLE_PHOTOS}
+        initialIndex={index}
+      />
+    </div>
+  );
+}
+
 // ─── registry ─────────────────────────────────────────────────────────────────
 // To add a base component: add an entry to BASE_COMPONENTS.
 // To add a composed component: add an entry to COMPOSED_COMPONENTS.
 
 const BASE_COMPONENTS: { name: string; Demo: () => ReactNode }[] = [
+  { name: "Alert", Demo: AlertDemo },
   { name: "Avatar", Demo: AvatarDemo },
   { name: "Badge", Demo: BadgeDemo },
   { name: "StatusLabels", Demo: StatusLabelsDemo },
   { name: "Breadcrumb", Demo: BreadcrumbDemo },
   { name: "Button", Demo: ButtonDemo },
   { name: "Card", Demo: CardDemo },
   { name: "Checkbox", Demo: CheckboxSectionDemo },
+  { name: "Collapsible", Demo: CollapsibleDemo },
+  { name: "CopyButton", Demo: CopyButtonDemo },
   { name: "Dialog", Demo: DialogDemo },
   { name: "Dropdown", Demo: DropdownMenuDemo },
   { name: "Input", Demo: InputDemo },
@@ -1229,6 +1322,7 @@ const BASE_COMPONENTS: { name: string; Demo: () => ReactNode }[] = [
   { name: "Tabs", Demo: TabsDemo },
   { name: "Furniture category tabs", Demo: FurnitureCategoryTabsDemo },
   { name: "Textarea", Demo: TextareaDemo },
+  { name: "ToggleGroup", Demo: ToggleGroupDemo },
   { name: "Tooltip", Demo: TooltipDemo },
 ];
 
@@ -1244,6 +1338,7 @@ const COMPOSED_COMPONENTS: { name: string; Demo: () => ReactNode }[] = [
   { name: "Form breadcrumb", Demo: FormBreadcrumbDemo },
   { name: "DataTable", Demo: DataTableDemo },
   { name: "BigToggleButton", Demo: BigToggleButtonDemo },
+  { name: "PhotoStrip + Lightbox", Demo: PhotoStripDemo },
 ];
 
 // ─── page ─────────────────────────────────────────────────────────────────────

frontend/app/donation-request/[id]/page.tsx

@@ -0,0 +1,128 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+
+import { SidebarAppShell } from "@/common/components/ui/sidebar-app-shell";
+import { AdminSidebar } from "@/common/components/ui/admin-sidebar";
+import { AdminHeader } from "@/common/components/layout";
+import { Button } from "@/common/components/ui/button";
+import { useDonationRequestStore } from "@/app/donation-request/stores/donationRequestStore";
+import {
+  ConfirmPickupDateDialog,
+  DonationItemCard,
+  DonationRequestHeader,
+  DonorInformationCard,
+  SchedulePickupDialog,
+  ScheduledPickupCard,
+  countApproved,
+  deriveReviewStatus,
+} from "@/app/donation-request/components";
+
+export default function DonationRequestPage() {
+  const router = useRouter();
+  const [search, setSearch] = useState("");
+  const [scheduleOpen, setScheduleOpen] = useState(false);
+  const [scheduleMode, setScheduleMode] = useState<"schedule" | "edit">(
+    "schedule"
+  );
+  const [confirmOpen, setConfirmOpen] = useState(false);
+
+  const request = useDonationRequestStore((state) => state.request);
+  const approveItem = useDonationRequestStore((state) => state.approveItem);
+  const rejectItem = useDonationRequestStore((state) => state.rejectItem);
+  const updateDonor = useDonationRequestStore((state) => state.updateDonor);
+  const schedulePickup = useDonationRequestStore(
+    (state) => state.schedulePickup
+  );
+  const updatePickup = useDonationRequestStore((state) => state.updatePickup);
+  const confirmPickup = useDonationRequestStore((state) => state.confirmPickup);
+
+  const reviewStatus = deriveReviewStatus(request);
+  const approvedCount = countApproved(request);
+  const { pickup } = request;
+
+  const openSchedule = () => {
+    setScheduleMode("schedule");
+    setScheduleOpen(true);
+  };
+  const openEdit = () => {
+    setScheduleMode("edit");
+    setScheduleOpen(true);
+  };
+
+  return (
+    <SidebarAppShell sidebar={<AdminSidebar activeItem="donation-requests" />}>
+      <div className="flex min-h-svh flex-col">
+        <AdminHeader
+          search={search}
+          onSearchChange={setSearch}
+          userInitials="WX"
+        />
+
+        <main className="mx-auto flex w-full max-w-[1174px] flex-1 flex-col gap-2xl px-2xl py-lg">
+          <DonationRequestHeader
+            request={request}
+            reviewStatus={reviewStatus}
+            approvedCount={approvedCount}
+            totalItems={request.items.length}
+            onSchedulePickup={openSchedule}
+          />
+
+          <DonorInformationCard donor={request.donor} onSave={updateDonor} />
+
+          {pickup?.scheduled_date && (
+            <ScheduledPickupCard
+              pickup={pickup}
+              onEdit={openEdit}
+              onConfirm={() => setConfirmOpen(true)}
+            />
+          )}
+
+          <section className="flex flex-col gap-lg">
+            <h2 className="text-heading-3 font-semibold text-foreground">
+              {request.items.length} Items Donated
+            </h2>
+            {request.items.map((item) => (
+              <DonationItemCard
+                key={item.id}
+                item={item}
+                onApprove={approveItem}
+                onReject={rejectItem}
+              />
+            ))}
+          </section>
+        </main>
+
+        <nav className="mt-auto flex w-full justify-end border-t border-border px-2xl py-lg">
+          <Button variant="outline" onClick={() => router.back()}>
+            Back
+          </Button>
+        </nav>
+      </div>
+
+      <SchedulePickupDialog
+        open={scheduleOpen}
+        onOpenChange={setScheduleOpen}
+        mode={scheduleMode}
+        isConfirmed={Boolean(pickup?.confirmed_at)}
+        defaultDate={pickup?.scheduled_date ?? ""}
+        defaultNote={pickup?.note ?? ""}
+        onSubmit={(date, note) =>
+          scheduleMode === "edit"
+            ? updatePickup(date, note)
+            : schedulePickup(date, note)
+        }
+      />
+
+      {pickup?.scheduled_date && (
+        <ConfirmPickupDateDialog
+          open={confirmOpen}
+          onOpenChange={setConfirmOpen}
+          date={pickup.scheduled_date}
+          onConfirm={confirmPickup}
+        />
+      )}
+    </SidebarAppShell>
+  );
+}

frontend/app/donation-request/components/ConfirmPickupDateDialog.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import {
+  Dialog,
+  DialogBody,
+  DialogClose,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+} from "@/common/components/ui/dialog";
+import { Button } from "@/common/components/ui/button";
+import { InformationBlock } from "@/common/components/data-display";
+import { formatDate } from "@/common/utils/DateUtils";
+
+interface ConfirmPickupDateDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  /** ISO date being confirmed. */
+  date: string;
+  onConfirm: () => void;
+}
+
+/**
+ * Final confirmation before notifying the donor of the scheduled pickup date.
+ */
+function ConfirmPickupDateDialog({
+  open,
+  onOpenChange,
+  date,
+  onConfirm,
+}: ConfirmPickupDateDialogProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Confirm Pickup Date</DialogTitle>
+          <DialogDescription>
+            A confirmation email will be sent to the donor with the chosen
+            pickup date.
+          </DialogDescription>
+        </DialogHeader>
+        <DialogBody>
+          <InformationBlock label="Selected Date" value={formatDate(date)} />
+        </DialogBody>
+        <DialogFooter>
+          <DialogClose render={<Button variant="outline" />}>
+            Cancel
+          </DialogClose>
+          <DialogClose render={<Button onClick={onConfirm} />}>
+            Confirm and Send
+          </DialogClose>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export { ConfirmPickupDateDialog };