frontend: address review findings on the donation review screen

Schema alignment with the review-schema PR
- Renames `items` to `furniture_items`, matching DonationDetail, so wiring the
  live API stays a fetch swap.
- Widens ItemReviewStatus to all seven FurnitureStatus values. Only the first
  three are reachable from this screen, but an item can arrive from the API in a
  downstream state and was previously mistyped.
- Documents the deliberate divergences at the top of types.ts — DonorInformation
  is a display shape, `condition` holds UI copy rather than
  FurnitureConditionEnum, `request_id`/`submitted_at` are presentation fields,
  and `pickup` is pre-resolved to the active one — so the next reader can tell
  intent from oversight.

Review-status precedence
- deriveReviewStatus checked for a scheduled pickup first, so a pickup booked
  while items were still outstanding reported "scheduled" and hid them. The
  backend explicitly orders this the other way: scheduling only outranks a
  finished review. Reordered to match, and the test that asserted the old
  behaviour ("regardless of item states") is replaced with cases covering both
  directions.

Dates
- The header used a local formatShortDate carrying the same UTC off-by-one that
  was just fixed in common; it now uses the shared helper.

Other
- Drops the decorative calendar icon from the pickup date field: type="date"
  draws its own picker indicator, so the two rendered side by side.
- Donor card actions use Figma's borderless Cancel + outlined Save, distinct
  from the dialogs where Save is the filled primary action.
- Removes the unused DONATION_REQUESTS / donationRequestPath constants. Nothing
  referenced them, and dropping them leaves this branch touching only
  app/donation-request/.
- Adds donationRequestStore tests — the confirmation-invalidation rule the Edit
  dialog warns about had no coverage at all.

Author: brian-fu

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

@@ -65,7 +65,7 @@ export default function DonationRequestPage() {
             request={request}
             reviewStatus={reviewStatus}
             approvedCount={approvedCount}
-            totalItems={request.items.length}
+            totalItems={request.furniture_items.length}
             onSchedulePickup={openSchedule}
           />
 
@@ -81,9 +81,9 @@ export default function DonationRequestPage() {
 
           <section className="flex flex-col gap-lg">
             <h2 className="text-heading-3 font-semibold text-foreground">
-              {request.items.length} Items Donated
+              {request.furniture_items.length} Items Donated
             </h2>
-            {request.items.map((item) => (
+            {request.furniture_items.map((item) => (
               <DonationItemCard
                 key={item.id}
                 item={item}

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

@@ -44,9 +44,7 @@ function ApproveItemDialog({
           <DonationItemPreview {...item} />
         </DialogBody>
         <DialogFooter>
-          <DialogClose
-            render={<Button variant="outline" onClick={onCancel} />}
-          >
+          <DialogClose render={<Button variant="outline" onClick={onCancel} />}>
             Cancel
           </DialogClose>
           <DialogClose render={<Button onClick={onConfirm} />}>

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

@@ -9,7 +9,7 @@ import {
   PendingReviewBadge,
   ScheduledBadge,
 } from "@/common/components/status-labels";
-import { formatDate } from "@/common/utils/DateUtils";
+import { formatDate, formatShortDate } from "@/common/utils/DateUtils";
 import type { DonationRequest, ReviewStatus } from "./types";
 
 interface DonationRequestHeaderProps {
@@ -55,13 +55,6 @@ function ReviewStatusIndicator({
   }
 }
 
-/** "March 26, 2026" → "Mar 26" for the compact scheduled badge. */
-function formatShortDate(iso: string): string {
-  const date = new Date(iso);
-  if (Number.isNaN(date.getTime())) return iso;
-  return date.toLocaleDateString("en-US", { month: "short", day: "numeric" });
-}
-
 function DonationRequestHeader(props: DonationRequestHeaderProps) {
   const { request } = props;
   return (

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

@@ -232,11 +232,15 @@ function DonorInformationForm({
         />
       </FieldColumn>
 
+      {/* Figma's donor card uses a borderless Cancel next to an outlined Save —
+          distinct from the dialogs, where Save is the filled primary action. */}
       <div className="flex justify-end gap-xs">
-        <Button variant="outline" onClick={onCancel}>
+        <Button variant="ghost" onClick={onCancel}>
           Cancel
         </Button>
-        <Button onClick={onSave}>Save</Button>
+        <Button variant="outline" onClick={onSave}>
+          Save
+        </Button>
       </div>
     </div>
   );

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

@@ -1,7 +1,6 @@
 "use client";
 
 import { useEffect, useState } from "react";
-import { CalendarDays } from "lucide-react";
 
 import {
   Dialog,
@@ -79,16 +78,14 @@ function SchedulePickupDialog({
             <Label htmlFor="pickup-date">
               Date<span className="text-destructive"> *</span>
             </Label>
-            <div className="relative">
-              <CalendarDays className="pointer-events-none absolute left-sm top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
-              <Input
-                id="pickup-date"
-                type="date"
-                value={date}
-                onChange={(event) => setDate(event.target.value)}
-                className="pl-8"
-              />
-            </div>
+            {/* No decorative calendar icon here: type="date" draws its own
+                picker indicator, so adding one renders two side by side. */}
+            <Input
+              id="pickup-date"
+              type="date"
+              value={date}
+              onChange={(event) => setDate(event.target.value)}
+            />
           </div>
 
           <div className="flex flex-col gap-xs">

frontend/app/donation-request/components/fixture.ts

@@ -26,7 +26,7 @@ export const DONATION_REQUEST_FIXTURE: DonationRequest = {
     has_pets: false,
     pickup_address: "210 Drake Ave, NL, CA A2V 1K5",
   },
-  items: [
+  furniture_items: [
     {
       id: "item-dining",
       name: "Dining table & chairs / set",

frontend/app/donation-request/components/reviewStatus.test.ts

@@ -34,11 +34,18 @@ function makeRequest(
       has_pets: false,
       pickup_address: "210 Drake Ave",
     },
-    items,
+    furniture_items: items,
     pickup,
   };
 }
 
+const SCHEDULED_PICKUP: DonationRequest["pickup"] = {
+  id: "p1",
+  scheduled_date: "2026-03-26",
+  note: null,
+  confirmed_at: null,
+};
+
 describe("deriveReviewStatus", () => {
   it("is pending_review when a donation has no items", () => {
     expect(deriveReviewStatus(makeRequest([]))).toBe("pending_review");
@@ -68,16 +75,40 @@ describe("deriveReviewStatus", () => {
     expect(deriveReviewStatus(request)).toBe("reviewed");
   });
 
-  it("is scheduled once a pickup has a date, regardless of item states", () => {
-    const request = makeRequest([makeItem("a", "PICKUP_PENDING")], {
-      id: "p1",
-      scheduled_date: "2026-03-26",
-      note: null,
-      confirmed_at: null,
-    });
+  it("is scheduled once every item is reviewed and a pickup has a date", () => {
+    const request = makeRequest(
+      [makeItem("a", "APPROVED"), makeItem("b", "REJECTED")],
+      SCHEDULED_PICKUP
+    );
     expect(deriveReviewStatus(request)).toBe("scheduled");
   });
 
+  // Mirrors compute_review_status: "a pickup booked while items are still
+  // outstanding must not hide that they need attention."
+  it("does not let a scheduled pickup mask items still awaiting review", () => {
+    const request = makeRequest(
+      [makeItem("a", "APPROVED"), makeItem("b", "PICKUP_PENDING")],
+      SCHEDULED_PICKUP
+    );
+    expect(deriveReviewStatus(request)).toBe("partially_reviewed");
+  });
+
+  it("does not let a scheduled pickup mask a wholly unreviewed donation", () => {
+    const request = makeRequest(
+      [makeItem("a", "PICKUP_PENDING")],
+      SCHEDULED_PICKUP
+    );
+    expect(deriveReviewStatus(request)).toBe("pending_review");
+  });
+
+  it("treats downstream statuses as not-yet-reviewed, as the backend does", () => {
+    const request = makeRequest([
+      makeItem("a", "APPROVED"),
+      makeItem("b", "OFFERED"),
+    ]);
+    expect(deriveReviewStatus(request)).toBe("partially_reviewed");
+  });
+
   it("ignores a pickup with no scheduled date", () => {
     const request = makeRequest([makeItem("a", "APPROVED")], {
       id: "p1",

frontend/app/donation-request/components/reviewStatus.ts

@@ -1,33 +1,39 @@
 import type { DonationRequest, ReviewStatus } from "./types";
 
-/** Item statuses that count as "an admin has finished reviewing this item". */
+/**
+ * Item statuses that count as "an admin has finished reviewing this item".
+ * Mirrors services.donations.REVIEWED_FURNITURE_STATUSES — the downstream
+ * states (OFFERED, SCHEDULED, …) deliberately do not count as reviewed.
+ */
 const REVIEWED_ITEM_STATUSES = new Set(["APPROVED", "REJECTED"]);
 
 /**
  * Derive how far along the admin's review is. Mirrors the backend's
- * services.donations.compute_review_status so the badge stays consistent:
- * a scheduled pickup wins, otherwise it's driven by item review progress.
+ * services.donations.compute_review_status, including its ordering: scheduling
+ * only outranks a *finished* review, so a pickup booked while items are still
+ * outstanding must not hide that they need attention.
  */
 export function deriveReviewStatus(request: DonationRequest): ReviewStatus {
-  if (request.pickup?.scheduled_date) {
-    return "scheduled";
-  }
-
-  const items = request.items;
+  const items = request.furniture_items;
   const reviewed = items.filter((item) =>
     REVIEWED_ITEM_STATUSES.has(item.status)
   );
 
+  // A donation with no items yet has nothing to review.
   if (items.length === 0 || reviewed.length === 0) {
     return "pending_review";
   }
   if (reviewed.length < items.length) {
     return "partially_reviewed";
   }
+  if (request.pickup?.scheduled_date) {
+    return "scheduled";
+  }
   return "reviewed";
 }
 
 /** Count of approved items — drives the "n/m Approved" header label. */
 export function countApproved(request: DonationRequest): number {
-  return request.items.filter((item) => item.status === "APPROVED").length;
+  return request.furniture_items.filter((item) => item.status === "APPROVED")
+    .length;
 }

frontend/app/donation-request/components/types.ts

@@ -5,12 +5,32 @@
  * (see backend/app/schemas.py: DonationDetail, FurnitureDetail, Pickup) using
  * the same field names, so wiring to the live API later is a fetch swap rather
  * than a reshape. The page currently reads them from a local store — no API.
+ *
+ * Deliberate divergences from those schemas, so the next reader can tell intent
+ * from oversight:
+ *  - `DonorInformation` is a display shape, not backend `Donor`. It flattens the
+ *    donation-level `smoking_household` / `has_pets` onto the donor, and carries
+ *    `pickup_address` as one preformatted line where the backend stores
+ *    `address_line_1` / `address_line_2` / `city` / `postal_code` separately.
+ *  - `DonationRequestItem.condition` holds display copy ("No Stains"), NOT the
+ *    backend `FurnitureConditionEnum` (excellent | good | fair | poor).
+ *  - `request_id` and `submitted_at` are presentation fields; the backend
+ *    `Donation` exposes `id` and `created_at`.
+ *  - `pickup` is already resolved to the single active pickup — the backend
+ *    returns a list and picks one via `services.donations.get_active_pickup`.
+ * Everything else matches the schema field-for-field.
  */
 
+/** Mirrors backend FurnitureStatus. Only the first three are reachable from this
+ * screen; the rest are downstream states an item can arrive in from the API. */
 export type ItemReviewStatus =
   | "PICKUP_PENDING" // awaiting review
   | "APPROVED"
-  | "REJECTED";
+  | "REJECTED"
+  | "OFFERED"
+  | "SCHEDULED"
+  | "DELIVERED"
+  | "CLOSED";
 
 export type ReviewStatus =
   | "pending_review"
@@ -64,6 +84,6 @@ export interface DonationRequest {
   /** ISO date the request was submitted. */
   submitted_at: string;
   donor: DonorInformation;
-  items: DonationRequestItem[];
+  furniture_items: DonationRequestItem[];
   pickup: DonationPickup | null;
 }

frontend/app/donation-request/stores/donationRequestStore.test.ts

@@ -0,0 +1,104 @@
+import { useDonationRequestStore } from "./donationRequestStore";
+
+const store = () => useDonationRequestStore.getState();
+const pickup = () => store().request.pickup;
+const itemIds = () => store().request.furniture_items.map((item) => item.id);
+
+beforeEach(() => {
+  store().reset();
+});
+
+describe("item review", () => {
+  it("approves an item and clears any previous rejection", () => {
+    const [id] = itemIds();
+    store().rejectItem(id, "other", "Too large for the van");
+    store().approveItem(id);
+
+    const item = store().request.furniture_items.find((i) => i.id === id)!;
+    expect(item.status).toBe("APPROVED");
+    expect(item.rejection_reason).toBeNull();
+    expect(item.rejection_details).toBeNull();
+  });
+
+  it("records the reason and free-text details on rejection", () => {
+    const [id] = itemIds();
+    store().rejectItem(id, "other", "Too large for the van");
+
+    const item = store().request.furniture_items.find((i) => i.id === id)!;
+    expect(item.status).toBe("REJECTED");
+    expect(item.rejection_reason).toBe("other");
+    expect(item.rejection_details).toBe("Too large for the van");
+  });
+
+  it("leaves other items untouched", () => {
+    const [first, second] = itemIds();
+    store().approveItem(first);
+
+    const other = store().request.furniture_items.find((i) => i.id === second)!;
+    expect(other.status).toBe("PICKUP_PENDING");
+  });
+});
+
+describe("pickup scheduling", () => {
+  it("schedules an unconfirmed pickup", () => {
+    store().schedulePickup("2026-03-26", "Ring the buzzer");
+
+    expect(pickup()?.scheduled_date).toBe("2026-03-26");
+    expect(pickup()?.note).toBe("Ring the buzzer");
+    expect(pickup()?.confirmed_at).toBeNull();
+  });
+
+  it("confirms a scheduled pickup", () => {
+    store().schedulePickup("2026-03-26");
+    store().confirmPickup();
+
+    expect(pickup()?.confirmed_at).not.toBeNull();
+  });
+
+  it("will not confirm when nothing is scheduled", () => {
+    store().confirmPickup();
+    expect(pickup()).toBeNull();
+  });
+
+  // The subtlest rule in the flow, and the one the Edit dialog warns about.
+  it("clears the confirmation when a confirmed pickup moves to a new date", () => {
+    store().schedulePickup("2026-03-26");
+    store().confirmPickup();
+    expect(pickup()?.confirmed_at).not.toBeNull();
+
+    store().updatePickup("2026-03-27");
+
+    expect(pickup()?.scheduled_date).toBe("2026-03-27");
+    expect(pickup()?.confirmed_at).toBeNull();
+  });
+
+  it("keeps the confirmation when only the note changes", () => {
+    store().schedulePickup("2026-03-26", "Ring the buzzer");
+    store().confirmPickup();
+    const confirmedAt = pickup()!.confirmed_at;
+
+    store().updatePickup("2026-03-26", "Use the side door");
+
+    expect(pickup()?.note).toBe("Use the side door");
+    expect(pickup()?.confirmed_at).toBe(confirmedAt);
+  });
+
+  it("keeps the same pickup id across edits", () => {
+    store().schedulePickup("2026-03-26");
+    const id = pickup()!.id;
+
+    store().updatePickup("2026-03-27");
+
+    expect(pickup()?.id).toBe(id);
+  });
+});
+
+describe("donor edits", () => {
+  it("patches only the supplied fields", () => {
+    const before = store().request.donor;
+    store().updateDonor({ email: "new@example.com" });
+
+    expect(store().request.donor.email).toBe("new@example.com");
+    expect(store().request.donor.first_name).toBe(before.first_name);
+  });
+});