{/* One box, with 2px of ink between the segments. The border is what says these three are
the same control; as separate fills on the ground they read as three buttons. */}
);
}
/** Tabs with counts — OPEN 3 / DONE 11.
*
* Pressed rather than the full tablist/tabpanel machinery: these swap the list underneath rather
* than switching between labelled panels, and claiming a role the markup doesn't keep would be
* worse than the honest one. */
export function Tabs
{options.map((o, i) => {
const on = o.key === value;
return (
);
})}
{options.map((o, i) => {
const on = o.key === value;
return (
);
})}
{items.map((it) => {
const inner = (
<>
{it.icon && {it.icon}}
{/* The caption sits above the label, muted: it says what the tile is for — "Last: Navy
tunic" — and the label is what you tap, so the label reads last and loudest. */}
{it.caption && {it.caption}}
{it.label}
);
const st: React.CSSProperties = {
background: "#fff", minHeight: 88, padding: 12, border: 0, borderRadius: 0,
font: "inherit", color: INK, textAlign: "left", cursor: "pointer", textDecoration: "none",
display: "flex", flexDirection: "column", justifyContent: "flex-end",
};
return it.href
? {inner}
: ;
})}
{/* An odd number of tiles would leave the ink ground showing through the empty half of the
last row, which reads as a broken tile rather than as a frame. It happens in the ordinary
way: "Same again" is only drawn for somebody who has asked for something before. */}
{items.length % 2 === 1 && (
)}
);
}
/* ---------------------------------------------------------------- notice & banner ---- */
/** A broadcast from the linen room. Not a message — nobody replies to it. */
export function Notice({ kicker = "From the linen room", children }: { kicker?: string; children: React.ReactNode }) {
return (
{children}
{steps.map((s, i) => {
const last = i === steps.length - 1;
return (
);
})}
);
}
/* ---------------------------------------------------------------- messages ---- */
export function DateSeparator({ children }: { children: React.ReactNode }) {
// The only centred text in the system.
return (
{s.label}
{/* Mono, as the mockup has it: a column of stamps that line up is read down rather
than across, and tabular figures are what make that possible. */}
{s.meta && {s.meta}
}
{children}
);
}
export function Bubble({ mine, author, body, stamp }: { mine: boolean; author?: string; body: string; stamp: string }) {
return (
{/* A 2px ink border rather than an accent edge: the accent edge is the linen room's voice on
a row, and in a thread every bubble from them would wear it. The mockup draws both sides
as bordered boxes, the wearer's own filled ink. */}
);
}
/** The strip under the app bar saying which order this thread belongs to.
*
* The mockup's `.notice`: a bordered white box inset from the edge, not a full-bleed band. It is
* about the order rather than from the linen room, so it takes the 2px ink border and none of the
* accent edge that marks their voice. */
export function ContextStrip({ children }: { children: React.ReactNode }) {
return (
{body}
{/* Who said it and when, on one line under the words. As an uppercase kicker above the body
it read as a heading on every message — three words of chrome per sentence, in a thread
that is mostly one-liners. */}
{author ? `${author} · ${stamp}` : stamp}
{children}
{String(n).padStart(2, "0")}
{label}
{options.map((o) => {
const on = o.key === value;
return (
);
})}
);
}
/** Square, like everything else. */
export function Toggle({ on, onChange, label, disabled }: { on: boolean; onChange: (v: boolean) => void; label: string; disabled?: boolean }) {
return (
);
}
/** The optional photo. Dashed, because it is the one thing on the screen that isn’t required. */
export function PhotoWell({ has, onPick, hint }: { has: boolean; onPick: () => void; hint?: string }) {
return (
);
}
/* ---------------------------------------------------------------- rows ---- */
/** A row with an emphasis border. accent = needs attention, divider = neutral, ink = informational. */
export function EdgeRow({ tone = "divider", onClick, href, children }: {
tone?: "accent" | "divider" | "ink"; onClick?: () => void; href?: string; children: React.ReactNode;
}) {
const edge = tone === "accent" ? ACCENT : tone === "ink" ? INK : DIVIDER;
const st: React.CSSProperties = {
display: "block", width: "100%", textAlign: "left", font: "inherit", color: INK,
background: "#fff", border: 0, borderLeft: `6px solid ${edge}`, borderRadius: 0,
padding: "14px 16px", cursor: onClick || href ? "pointer" : "default", textDecoration: "none",
};
if (href) return {children};
if (onClick) return ;
return {children}
;
}
/** A muted row — a job already done. */
export function DoneRow({ children }: { children: React.ReactNode }) {
return {children}
;
}
/** 44px is the floor for anything you tap. */
export function CompactAction({ label, onClick, tone = "outline", disabled }: {
label: string; onClick?: () => void; tone?: "outline" | "accent"; disabled?: boolean;
}) {
return (
);
}
/** Full-width, transparent, 2px ink border. The action you are allowed but not encouraged to take. */
export function SecondaryBar({ label, onClick, href, disabled }: { label: string; onClick?: () => void; href?: string; disabled?: boolean }) {
const st: React.CSSProperties = {
/* A top rule and nothing else. Boxed, it read as a second button competing with the 64px bar
under it; the mockup's `.sbar` is the foot of the screen rather than a control floating on
it. */
minHeight: 52, width: "100%", border: 0, borderTop: `2px solid ${INK}`, borderRadius: 0, background: "transparent",
color: INK, font: "inherit", fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: 14,
letterSpacing: "0.08em", textTransform: "uppercase", display: "flex", alignItems: "center",
padding: "0 20px", gap: 12, cursor: disabled ? "not-allowed" : "pointer", opacity: disabled ? 0.45 : 1,
textDecoration: "none",
};
const inner = <>{label}
{lines.map((l) => {
const off = l.status === "declined";
return (
);
})}
);
}
/** A line on a request nobody has sent yet. `key` is the row's identity while it is being edited —
* the same garment in two sizes is two rows, and neither has an id until the server writes one. */
export type DraftLine = { key: string; itemId: string; si: number; item: string; size: string; qty: number };
/** The list somebody is building. Every row can be counted up and down or taken out again, which is
* the whole difference between this and the old one-garment form: getting a line wrong costs a tap
* rather than a second request and a second approval. */
export function DraftLineList({ lines, maxQty, onQty, onRemove }: {
lines: readonly DraftLine[]; maxQty: number;
onQty: (key: string, qty: number) => void; onRemove: (key: string) => void;
}) {
return (
{lineText(l)}
{off && (
Declined{l.declineReason ? ` — ${l.declineReason}` : ""}
)}
{!off && mixed && (
Approved
)}
{lines.map((l) => (
onQty(l.key, v)} min={1} max={maxQty} />
))}
);
}
export type PickerSize = { size: string; si: number; word: string; countedOn?: string; held?: number };
export type PickerItem = { id: string; item: string; type: string; gender?: string; sizes: PickerSize[] };
/** Choosing one garment to add to a request. Shared by the wearer's own request screen and the one
* a manager raises on somebody else's behalf, because the only thing that differs between them is
* whose sizes and holdings are being shown — and that arrives as `defaultSi` and `note` rather
* than as a second copy of this.
*
* The garment list is narrowed by a row of category chips — Tops, Bottoms, Maternity, Outerwear,
* Everything else. On a real catalogue the flat list is the longest scroll in the flow and it is
* walked once per garment, on a request that often runs to three or four.
*
* Chips rather than a heading over each group, for two reasons. A heading labels a long scroll;
* only a filter shortens it, and the length is the complaint. And OptionList's arrow keys walk one
* radiogroup, so a separate list per category would trap the arrows in whichever section they
* started in — one filtered list keeps the keyboard walking the whole picker.
*
* The categories come from garmentCategory(), which reads the type already on the garment and
* falls back to its name, so this needs no new prop and no data entry: both screens that render
* the picker get the grouping without knowing it exists. */
export function GarmentPicker({ items, defaultSi, note, maxQty, addLabel = "Add to the request", onAdd, onCancel }: {
items: readonly I[];
defaultSi: (item: I) => number | null;
note?: (item: I, size: PickerSize | null) => React.ReactNode;
maxQty: number;
addLabel?: string;
onAdd: (line: { itemId: string; si: number; item: string; size: string; qty: number }) => void;
onCancel?: () => void;
}) {
const [itemId, setItemId] = useState
{l.item} — {l.size}
{filtering && (
c.key === cat)?.label}`}
value={itemId}
onPick={(id) => {
setItemId(id);
setQty(1);
// Opening on the size the record already knows is the difference between three taps and
// one, and the wrong size is what generates the exchange this app exists to stop.
const it = items.find((i) => i.id === id);
setSi(it ? defaultSi(it) : null);
}}
options={shown.map((i) => ({
key: i.id,
label: i.item,
meta: [i.type, i.gender && i.gender !== "Unisex" ? i.gender : ""].filter(Boolean).join(" · "),
}))}
/>
{item && (
<>
setSi(Number(k))}
// Unavailable sizes are shown greyed, never hidden: "it isn't there" is the information
// the person came for.
options={item.sizes.map((s) => ({
key: String(s.si),
label: String(s.size),
meta: [s.word === "none" ? "none" : s.word === "low" ? "low" : "", s.held ? `${s.held} held` : ""].filter(Boolean).join(" · "),
}))}
/>
{note &&
{
if (!item || !size) return;
onAdd({ itemId: item.id, si: size.si, item: item.item, size: String(size.size), qty });
// The chosen garment clears for the next one; the category filter deliberately does
// not. Somebody adding two tops is still looking at tops.
setItemId(null); setSi(null); setQty(1);
}}
/>
{onCancel &&
);
}
/* ---------------------------------------------------------------- banners, tabs, states ---- */
/** The one full-bleed banner at the top of Home: "3 requests waiting on you ›".
*
* A link, not a card with a button in it: the whole strip is the target, which is the only sensible
* size for something somebody taps while walking. At most one is ever drawn — a home screen with
* two things shouting at once has nothing at the top. */
export function AlertBar({ title, href }: { title: string; href: string }) {
return (
{title}
{[{ key: "all" as const, label: "All", n: items.length }, ...chips.map((c) => ({ key: c.key, label: c.label, n: counts.get(c.key) || 0 }))].map((c) => {
const on = c.key === cat;
return (
);
})}
)}
{note(item, size)}
}
No signal. Nothing you typed is lost.
);
}
/** The collection code, full screen and nothing else: this is held up across a counter, often at
* arm's length, and everything else on the screen is something to read past.
*
* ⛔ Done is a real link to the order, never `history.back()`. This screen is opened cold at least
* three ways — a notification tap, a refresh on a ward phone, an app link — and in each of them
* there is no history to pop, so a back-button Done walks the person out of the app holding an
* unread code.
*
* The digits are given an aria-label that reads them singly: 92px mono is announced as one
* four-digit number, and somebody reading it out to a clerk needs the digits. */
export function FullCode({ code, name, lines, backHref }: {
code: string; name: string; lines: string[]; backHref: string;
}) {
return (
{code}
{name}
{lines.length > 0 && (
{lines.map((l, i) =>
)}
Done
{l}
)}
{label} — {done} of {total}{unit ? ` ${unit}` : ""}
{date}
-
{lines.map((l, i) => (
- {lineText(l)} ))}
Your signature
{failed
? not stored
// eslint-disable-next-line @next/next/no-img-element
: 
setFailed(true)} style={{ display: "block", maxHeight: 70, maxWidth: "62%" }} />}
);
}
export { ACCENT, ACCENT_300, ACCENT_700, DIVIDER, GROUND, INK, N200, N300, N400, N500, N600, N700, OK, SURFACE };