ThreadCount Community edition
Uniform stock management for healthcare linen rooms. Licensed under the GNU AGPL v3.
This commit is contained in:
ThreadCount
@@ -0,0 +1,85 @@
|
||||
import Link from "next/link";
|
||||
import { Band, CtaBand, SiteNav, body, h2, h3, kicker, wrap } from "@/components/site";
|
||||
import { plansLive } from "@/lib/plans-live";
|
||||
|
||||
export const metadata = {
|
||||
title: "Who built it",
|
||||
description: "ThreadCount was written by a hospital uniform coordinator for their own linen room, because the workbook stopped being enough.",
|
||||
alternates: { canonical: "/about" },
|
||||
};
|
||||
|
||||
const STORY = [
|
||||
"A hospital linen room runs on memory. Who has how many sets, which sizes are short, what was ordered three weeks ago and never arrived, which ward should be paying for it. Most of that lives in a workbook, a notepad, and the coordinator’s head.",
|
||||
"That works until it doesn’t. A staff member insists they were never issued a jacket. Finance asks why one ward’s spend doubled. A size runs out on a Monday morning and nobody knew it was low on Friday.",
|
||||
"ThreadCount was built to answer those questions from a record rather than from recollection. Every garment is scanned to a named person, every issue starts its own replacement order, and every dollar lands on the ward that wore it. The features exist because each one solved a real morning at a real counter.",
|
||||
"It’s free. No licence, no per-device charge, no sales process. If it’s useful to your room, use it.",
|
||||
];
|
||||
// The last paragraph and the last principle once plans are live: the software is still free, and
|
||||
// the sentence now says what is and isn't. Everything above them is unchanged — see lib/plans-live.ts.
|
||||
const STORY_LAST_LIVE = "The software is free — run it yourself and it costs nothing. Hosting it for you is what costs money, and a small room is hosted free. If it’s useful to your room, use it.";
|
||||
const PRINCIPLE_LAST_LIVE = { t: "Free to run, and portable", b: "The code is published, there is no lock-in, and paying for hosting never locks anything else. Every report and register exports as CSV, and one backup file takes the whole facility. Leaving is as easy as arriving." };
|
||||
|
||||
const PRINCIPLES = [
|
||||
{ t: "Built at the counter", b: "Nothing in the product exists because it demonstrates well. Every screen was written to survive a queue of nurses at eight in the morning." },
|
||||
{ t: "No paperwork tax", b: "The finance outputs are assembled from data already being entered. There’s no second system to keep fed." },
|
||||
{ t: "Free, and portable", b: "No licence and no lock-in. Every report and register exports as CSV, and one backup file takes the whole facility. Leaving is as easy as arriving." },
|
||||
];
|
||||
|
||||
export default async function About() {
|
||||
const live = await plansLive();
|
||||
const story = live ? [...STORY.slice(0, -1), STORY_LAST_LIVE] : STORY;
|
||||
const principles = live ? [...PRINCIPLES.slice(0, -1), PRINCIPLE_LAST_LIVE] : PRINCIPLES;
|
||||
return (
|
||||
<>
|
||||
<SiteNav />
|
||||
|
||||
{/* Half-and-half hero: type left, photograph right behind an ink border. */}
|
||||
<section style={{ borderBottom: "2px solid var(--color-text)" }}>
|
||||
<div className="tcm-split" style={{ display: "grid", gridTemplateColumns: "1fr 1fr" }}>
|
||||
<div style={{ padding: "clamp(56px,7vw,88px) 40px clamp(52px,6vw,76px)", maxWidth: 760, marginLeft: "auto", width: "100%" }}>
|
||||
<div style={kicker}>Who built it</div>
|
||||
<h1 style={{ fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: "clamp(34px,4.4vw,64px)", lineHeight: 1.0, letterSpacing: "-0.035em", margin: "18px 0 0" }}>One coordinator, one linen room, one spreadsheet too many.</h1>
|
||||
<p style={{ ...body, fontSize: 17, maxWidth: "46ch", margin: "22px 0 0" }}>ThreadCount was written by the person doing the job, for the job. It exists because the workbook stopped being enough.</p>
|
||||
</div>
|
||||
<div style={{ borderLeft: "2px solid var(--color-text)", minHeight: "clamp(280px,32vw,460px)", overflow: "hidden" }}>
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img className="grayscale" src="/photos/tc-photo-kitchen.jpg" alt="" aria-hidden="true" style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "center 40%", display: "block" }} />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Band>
|
||||
<div className="tcm-rowgrid" style={{ display: "grid", gridTemplateColumns: "200px 1fr", gap: 40 }}>
|
||||
<div style={kicker}>The story</div>
|
||||
<div style={{ maxWidth: "64ch" }}>
|
||||
{story.map((p, i) => <p key={i} style={{ ...body, margin: i ? "18px 0 0" : 0 }}>{p}</p>)}
|
||||
</div>
|
||||
</div>
|
||||
</Band>
|
||||
|
||||
<Band tone="ink" pad="clamp(48px,6vw,76px) 40px">
|
||||
<div style={{ fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: "clamp(24px,3.2vw,44px)", lineHeight: 1.15, letterSpacing: "-0.03em", maxWidth: "26ch", color: "#fff" }}>Every feature here started as an annoyance, not a roadmap item.</div>
|
||||
</Band>
|
||||
|
||||
<Band tone="surface">
|
||||
<div className="tcm-3col" style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 0, border: "2px solid var(--color-text)", background: "var(--color-bg)" }}>
|
||||
{principles.map((p, i) => (
|
||||
<div key={p.t} style={{ padding: "26px 28px 32px", borderRight: i < 2 ? "1px solid var(--color-divider)" : undefined }}>
|
||||
<h3 style={{ ...h3, fontSize: 20 }}>{p.t}</h3>
|
||||
<p style={{ fontSize: 14.5, lineHeight: 1.65, color: "var(--color-neutral-800)", marginTop: 10 }}>{p.b}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Band>
|
||||
|
||||
<Band>
|
||||
<div className="tcm-split" style={{ display: "grid", gridTemplateColumns: "1fr auto", gap: 32, alignItems: "center" }}>
|
||||
<h2 style={{ ...h2, fontSize: "clamp(22px,2.6vw,34px)" }}>If your linen room, aged-care home or clinic has the same problem, come and say so.</h2>
|
||||
<Link href="/contact" className="btn btn-primary">Get in touch</Link>
|
||||
</div>
|
||||
</Band>
|
||||
|
||||
<CtaBand />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
import LegalDoc from "@/components/LegalDoc";
|
||||
import { DOC_META } from "@/lib/legal";
|
||||
|
||||
const M = DOC_META["Acceptable Use"];
|
||||
export const metadata = { title: M.title, description: M.desc, alternates: { canonical: M.path } };
|
||||
|
||||
export default function Page() {
|
||||
return <LegalDoc name="Acceptable Use" />;
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
import Link from "next/link";
|
||||
import ContactForm from "@/components/ContactForm";
|
||||
import { CtaBand, PageHead, SPLIT_PAD, SiteNav, body, h3, kicker, small, wrap } from "@/components/site";
|
||||
|
||||
export const metadata = {
|
||||
title: "Contact",
|
||||
description: "Ask a question about ThreadCount, book a walkthrough, or raise a security review. One person answers.",
|
||||
alternates: { canonical: "/contact" },
|
||||
};
|
||||
|
||||
export default function Contact() {
|
||||
return (
|
||||
<>
|
||||
<SiteNav />
|
||||
<PageHead kicker="Contact" title="Ask a question, or watch it run." lede="One person reads these — the one who built it. You’ll get a straight answer rather than a sales call." />
|
||||
|
||||
<section style={{ borderBottom: "2px solid var(--color-text)" }}>
|
||||
<div style={{ ...wrap, padding: 0 }}>
|
||||
<div className="tcm-split" style={{ display: "grid", gridTemplateColumns: "1.25fr 1fr" }}>
|
||||
<div className={SPLIT_PAD} style={{ paddingTop: "clamp(36px,4vw,56px)", paddingRight: 40, paddingBottom: "clamp(44px,5vw,64px)" }}>
|
||||
<ContactForm />
|
||||
</div>
|
||||
|
||||
<div style={{ borderLeft: "2px solid var(--color-text)" }}>
|
||||
<div style={{ background: "var(--color-accent-600)", color: "#fff", padding: "30px 32px 34px" }}>
|
||||
<div style={{ ...kicker, color: "#fff" }}>Book a walkthrough</div>
|
||||
<h2 style={{ fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: "clamp(22px,2.4vw,30px)", letterSpacing: "-0.02em", margin: "10px 0 0" }}>Twenty minutes, on real screens.</h2>
|
||||
<p style={{ fontSize: 15, lineHeight: 1.65, margin: "12px 0 0" }}>Bring your own questions and your own room. No slides unless you want them.</p>
|
||||
{/* No direction: below 900px this panel stacks under the form, so there is no left. */}
|
||||
<p style={{ fontSize: 13.5, lineHeight: 1.6, margin: "16px 0 0" }}>Pick “Book a walkthrough” on the form and say when suits — I’ll work around your shift rather than the other way round.</p>
|
||||
</div>
|
||||
|
||||
<div style={{ padding: "28px 32px 34px" }}>
|
||||
<div style={kicker}>Who replies</div>
|
||||
<h3 style={{ ...h3, fontSize: 20, marginTop: 10 }}>One person, the one who built it.</h3>
|
||||
<p style={{ ...body, fontSize: 15, marginTop: 10 }}>Usually within a working day. It’s maintained alongside a day job, so nights and weekends aren’t covered — <Link href="/support" style={{ fontWeight: 700 }}>Support</Link> sets out what that means honestly.</p>
|
||||
<div style={{ marginTop: 22, borderTop: "1px solid var(--color-divider)", paddingTop: 18 }}>
|
||||
<div style={{ ...small }}>Prefer email? <a href="mailto:hello@threadcount.tech" style={{ fontWeight: 700 }}>hello@threadcount.tech</a> for questions, <a href="mailto:privacy@threadcount.tech" style={{ fontWeight: 700 }}>privacy@</a> for privacy requests, <a href="mailto:security@threadcount.tech" style={{ fontWeight: 700 }}>security@</a> for security reports.</div>
|
||||
</div>
|
||||
<div style={{ display: "flex", gap: 12, marginTop: 22, flexWrap: "wrap" }}>
|
||||
<Link href="/demo" data-umami-event="open-demo" data-umami-event-placement="contact" className="btn btn-secondary">Open the working demo</Link>
|
||||
<Link href="/faq" className="btn btn-ghost">Read the FAQ first</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<CtaBand />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
import LegalDoc from "@/components/LegalDoc";
|
||||
import { DOC_META } from "@/lib/legal";
|
||||
|
||||
const M = DOC_META["Data Security"];
|
||||
export const metadata = { title: M.title, description: M.desc, alternates: { canonical: M.path } };
|
||||
|
||||
export default function Page() {
|
||||
return <LegalDoc name="Data Security" />;
|
||||
}
|
||||
@@ -0,0 +1,162 @@
|
||||
import Link from "next/link";
|
||||
import { Band, CtaBand, PageHead, SiteNav, body, h2, h3, kicker } from "@/components/site";
|
||||
|
||||
/* Google Play requires a publicly reachable page that explains how to delete an account and what
|
||||
happens to the data — reachable without signing in, which is why it lives on the marketing site
|
||||
rather than inside the app. */
|
||||
export const metadata = {
|
||||
title: "Delete your account",
|
||||
description: "How to delete a ThreadCount account or just some of its data, what goes with it, and what is kept.",
|
||||
alternates: { canonical: "/delete-account" },
|
||||
};
|
||||
|
||||
const KEPT = [
|
||||
["Nothing, once the facility goes", "Deleting the last account deletes the facility outright. There is no archive copy and no soft-delete flag — the rows are gone from the database."],
|
||||
["Your name on past records, if colleagues remain", "If someone else still runs the facility, only your login is deleted. Issues, stocktakes and slips you recorded keep the name they were stamped with, because a stock record nobody signed isn’t an audit trail."],
|
||||
["Backups you downloaded", "A backup file you exported before deleting stays on your own computer. Delete it yourself if you don’t want it."],
|
||||
["Encrypted server backups, briefly", "Routine server backups roll off on their own schedule. Nothing is restored from them except to recover the whole server after a failure."],
|
||||
];
|
||||
|
||||
const STEPS = [
|
||||
["Sign in at threadcount.tech", "Use the account you want to delete. Deletion is done by the account holder — there is no form to fill in and nobody to email."],
|
||||
["Open Settings, then the Account tab", "It’s the last section on that tab, under your profile, password and users."],
|
||||
["Read which of the two cases you’re in", "The page tells you whether you’re the last person who can sign in. If you are, download a backup first — the link is right there."],
|
||||
["Confirm", "Enter your password. If deleting takes the facility with it, you also type the facility name exactly. Then it’s done immediately."],
|
||||
];
|
||||
|
||||
const PARTIAL: [string, string][] = [
|
||||
["Remove one person from the staff register", "Settings isn’t needed — open the staff member on the Staff Register and delete them. Their name stays on garments already issued, because a stock record nobody signed isn’t an audit trail."],
|
||||
["Wipe the activity, keep the setup", "Deletes every issue, return, order, delivery, pickup, stocktake, approval and photo, and resets stock adjustments. The catalogue, staff register, suppliers and departments stay, so the room can carry on from a clean ledger."],
|
||||
["Start fresh", "Deletes everything the facility has entered — catalogue, barcodes, staff, departments and all history — and leaves only the logins and the facility’s own settings. It’s the reset for a room that wants to begin again without losing its accounts."],
|
||||
["Export first, if you want a copy", "Settings › Data offers a complete JSON backup before you delete anything. It downloads to your own device and we keep no copy of it."],
|
||||
];
|
||||
|
||||
export default function DeleteAccount() {
|
||||
return (
|
||||
<>
|
||||
<SiteNav />
|
||||
<PageHead
|
||||
kicker="Your data"
|
||||
title="Delete your account"
|
||||
lede="You can delete a ThreadCount account yourself, from inside the app, without asking anyone — or delete data without closing the account at all. This page explains both, and exactly what goes with each."
|
||||
/>
|
||||
|
||||
<Band>
|
||||
<div style={wrapNarrow}>
|
||||
<h2 style={h2}>How to do it</h2>
|
||||
<ol style={{ ...body, marginTop: 28, padding: 0, listStyle: "none", display: "grid", gap: 0, borderTop: "2px solid var(--color-text)" }}>
|
||||
{STEPS.map(([t, b], i) => (
|
||||
<li key={t} style={{ display: "grid", gridTemplateColumns: "44px 1fr", gap: 20, padding: "22px 0", borderBottom: "1px solid var(--color-divider)", alignItems: "start" }}>
|
||||
<span style={{ fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: 22, color: "var(--color-neutral-600)", fontVariantNumeric: "tabular-nums" }}>{String(i + 1).padStart(2, "0")}</span>
|
||||
<span><b style={{ fontSize: 17 }}>{t}</b><span style={{ display: "block", marginTop: 4 }}>{b}</span></span>
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
<p style={{ ...body, marginTop: 28 }}>
|
||||
Can't sign in? Use the <Link href="/contact">contact form</Link> from the email address on the account and say which facility it belongs to.
|
||||
</p>
|
||||
</div>
|
||||
</Band>
|
||||
|
||||
<Band tone="surface">
|
||||
<div style={wrapNarrow}>
|
||||
<div style={kicker}>If you use the staff app</div>
|
||||
<h2 style={{ ...h2, marginTop: 14 }}>Ask the linen room — it takes effect immediately</h2>
|
||||
<p style={{ ...body, marginTop: 18 }}>
|
||||
The steps above are for a linen-room coordinator. If you are a staff member who signs in
|
||||
to <b>ThreadCount Staff</b> to see your own uniform, your account works differently,
|
||||
because the record it attaches to belongs to the linen room rather than to you.
|
||||
</p>
|
||||
<p style={{ ...body, marginTop: 18 }}>
|
||||
Ask your uniform coordinator to remove your access. There is a button on your staff
|
||||
record that does exactly that: it deletes your sign-in, and it ends every session you
|
||||
have open straight away. You can be given a fresh code later if you change your mind.
|
||||
</p>
|
||||
<p style={{ ...body, marginTop: 18 }}>
|
||||
Your register entry and issue history stay behind, because the facility needs them for
|
||||
its own stock and financial records — the same way your employer keeps a record of any
|
||||
equipment issued to you. Deleting those is the facility's decision, not something
|
||||
one sign-in controls.
|
||||
</p>
|
||||
<p style={{ ...body, marginTop: 18 }}>
|
||||
If you would rather not ask your coordinator, or you want a copy of what is held about
|
||||
you first, write to <b>privacy@threadcount.tech</b> and we will route it through your
|
||||
facility's privacy process.
|
||||
</p>
|
||||
</div>
|
||||
</Band>
|
||||
|
||||
<Band tone="surface">
|
||||
<div style={wrapNarrow}>
|
||||
<div style={kicker}>The two cases</div>
|
||||
<h2 style={{ ...h2, marginTop: 14 }}>What gets deleted depends on whether anyone else is left</h2>
|
||||
<div style={{ display: "grid", gridTemplateColumns: "1fr", gap: 0, marginTop: 32, border: "2px solid var(--color-text)" }}>
|
||||
<div style={{ padding: "26px 28px", borderBottom: "1px solid var(--color-divider)" }}>
|
||||
<h3 style={h3}>Other people can still sign in</h3>
|
||||
<p style={{ ...body, marginTop: 10 }}>
|
||||
Only your login is deleted. The facility, its catalogue, staff register, stock and history all stay,
|
||||
because they belong to the linen room rather than to you. Your name stays on what you recorded.
|
||||
</p>
|
||||
</div>
|
||||
<div style={{ padding: "26px 28px", background: "var(--color-bg)" }}>
|
||||
<h3 style={{ ...h3, color: "var(--color-accent-700)" }}>You are the last one</h3>
|
||||
<p style={{ ...body, marginTop: 10 }}>
|
||||
Deleting your account deletes the whole facility: every user, the catalogue and barcodes, the staff
|
||||
register, every issue, return, order, delivery, stocktake, photo and signature. It happens immediately,
|
||||
it cannot be undone, and support cannot get it back. Download a backup first if any of it matters.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Band>
|
||||
|
||||
<Band tone="surface">
|
||||
<div style={wrapNarrow}>
|
||||
<div style={kicker}>Without closing your account</div>
|
||||
<h2 style={{ ...h2, marginTop: 14 }}>Deleting some data, but not all of it</h2>
|
||||
<p style={{ ...body, marginTop: 18 }}>
|
||||
You don't have to delete your account to remove data. An administrator can do any of these from
|
||||
Settings › Data, and keep working afterwards:
|
||||
</p>
|
||||
<ol style={{ ...body, marginTop: 24, padding: 0, listStyle: "none", borderTop: "2px solid var(--color-text)" }}>
|
||||
{PARTIAL.map(([t, b], i) => (
|
||||
<li key={t} style={{ display: "grid", gridTemplateColumns: "44px 1fr", gap: 20, padding: "22px 0", borderBottom: "1px solid var(--color-divider)", alignItems: "start" }}>
|
||||
<span style={{ fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: 22, color: "var(--color-neutral-600)", fontVariantNumeric: "tabular-nums" }}>{String(i + 1).padStart(2, "0")}</span>
|
||||
<span><b style={{ fontSize: 17 }}>{t}</b><span style={{ display: "block", marginTop: 4 }}>{b}</span></span>
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
<p style={{ ...body, marginTop: 24 }}>
|
||||
All of these happen immediately and can't be undone. None of them touches your login, so you stay
|
||||
signed in and the facility keeps running.
|
||||
</p>
|
||||
</div>
|
||||
</Band>
|
||||
|
||||
<Band>
|
||||
<div style={wrapNarrow}>
|
||||
<h2 style={h2}>What is kept, and for how long</h2>
|
||||
<div style={{ marginTop: 28, borderTop: "2px solid var(--color-text)" }}>
|
||||
{KEPT.map(([t, b]) => (
|
||||
<div key={t} style={{ padding: "22px 0", borderBottom: "1px solid var(--color-divider)" }}>
|
||||
<b style={{ fontSize: 17 }}>{t}</b>
|
||||
<p style={{ ...body, marginTop: 4 }}>{b}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<p style={{ ...body, marginTop: 28 }}>
|
||||
More detail on how data is held is in the <Link href="/privacy">privacy policy</Link> and{" "}
|
||||
<Link href="/data-security">data security</Link> pages.
|
||||
</p>
|
||||
</div>
|
||||
</Band>
|
||||
|
||||
<CtaBand
|
||||
title="Deleting because something isn’t working?"
|
||||
lede="If ThreadCount isn’t doing what your linen room needs, that’s worth hearing before you delete anything. The contact form goes straight to the person who wrote it."
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
const wrapNarrow: React.CSSProperties = { maxWidth: 860 };
|
||||
@@ -0,0 +1,66 @@
|
||||
import Link from "next/link";
|
||||
import { DEMO_FACILITY, DEMO_RESET_MINUTES } from "@/lib/demo";
|
||||
import { CtaBand, SiteNav } from "@/components/site";
|
||||
import { switches } from "@/lib/switches";
|
||||
|
||||
/* Rendered per request, unlike the rest of the site: the demo switch lives in the database now
|
||||
* and can be flipped from the console, and a page cached for a day would keep offering "Enter as
|
||||
* Admin" long after the entry endpoint had started answering 404. */
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
export const metadata = {
|
||||
title: "Try the working demo",
|
||||
description: "Open a stocked, fictional hospital linen room and use ThreadCount as an Admin or an Issuer. The same screens run an aged-care home’s store or a clinic’s cupboard. No sign-up.",
|
||||
alternates: { canonical: "/demo" },
|
||||
};
|
||||
|
||||
const CARDS = [
|
||||
{ as: "admin", role: "Admin", who: "Alex Demo · Uniform Coordinator", body: "The coordinator’s view. Settings, the catalogue and prices, the staff register, suppliers, reorder levels, every report and the month-end pack." },
|
||||
{ as: "issuer", role: "Issuer", who: "Sam Demo · Linen Room Assistant", body: "The counter view. Issue stock, record a manager’s approval, run a stocktake, receive a delivery and work through the pickup call list." },
|
||||
];
|
||||
|
||||
export default async function DemoPage({ searchParams }: { searchParams: Promise<{ signedin?: string }> }) {
|
||||
const sp = await searchParams;
|
||||
/* The same switch the entry endpoint honours (app/api/auth/demo/route.ts), read here too.
|
||||
*
|
||||
* With the demo out of service that endpoint answers a bare JSON 404, so a page that still
|
||||
* offers "Enter as Admin" walks somebody weighing the product onto a white screen of raw JSON
|
||||
* with no nav and no way back. Sign-ups are handled the same way — /auth hides the create-account
|
||||
* form when sign-ups are closed rather than letting the button fail — and the demo has to go
|
||||
* quiet at the same moment its endpoint does. */
|
||||
const { demoOpen } = await switches();
|
||||
return (
|
||||
<>
|
||||
<SiteNav />
|
||||
<div style={{ maxWidth: 980, margin: "0 auto", padding: "56px 32px 80px" }}>
|
||||
<div style={{ fontSize: 12, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--color-accent-700)", fontWeight: 700 }}>Working demo</div>
|
||||
<h1 style={{ fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: "clamp(32px, 4vw, 52px)", letterSpacing: "-0.025em", lineHeight: 1.02, margin: "14px 0 0", textWrap: "balance" as never }}>{demoOpen ? <>Have a look around {DEMO_FACILITY}’s linen room.</> : <>The demo is closed for the moment.</>}</h1>
|
||||
<p style={{ fontSize: 16, lineHeight: 1.6, color: "var(--color-neutral-800)", maxWidth: 620, margin: "18px 0 0" }}>{demoOpen
|
||||
? "It is a made-up hospital, but everything in it is real: a stocked shelf, staff on the register, orders still open with the supplier, people waiting on a pickup, and three months of issues behind it. It could as easily be an aged-care home or a day surgery — the shelf, the counter and the screens are the same. Pick a role and have a look around. Nothing to sign up for."
|
||||
: `${DEMO_FACILITY} is a made-up hospital anyone can walk into, and it has been taken out of service for a while. Nothing is wrong with ThreadCount itself, and a facility of your own is unaffected.`}</p>
|
||||
{sp.signedin === "1" && <div style={{ border: "2px solid var(--color-accent)", padding: "10px 14px", marginTop: 24, fontSize: 13, fontWeight: 600, color: "var(--color-accent-700)" }}>You’re signed in to your own facility. <Link href="/app">Go to your app</Link>, or sign out first to open the demo.</div>}
|
||||
{demoOpen ? <>
|
||||
<div className="tc-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 0, marginTop: 36, border: "2px solid var(--color-text)" }}>
|
||||
{CARDS.map((c, i) => (
|
||||
<div key={c.as} style={{ padding: "28px 28px 32px", borderRight: i === 0 ? "1px solid var(--color-divider)" : undefined, display: "flex", flexDirection: "column" }}>
|
||||
<div style={{ fontSize: 11, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--color-neutral-700)", fontWeight: 700 }}>{c.who}</div>
|
||||
<div style={{ fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: 26, marginTop: 8, borderTop: "4px solid var(--color-accent)", paddingTop: 10, display: "inline-block", alignSelf: "flex-start" }}>Enter as {c.role}</div>
|
||||
<p style={{ fontSize: 14, lineHeight: 1.65, color: "var(--color-neutral-800)", margin: "10px 0 0", flex: 1 }}>{c.body}</p>
|
||||
<a href={`/api/auth/demo?as=${c.as}`} className={"btn " + (i === 0 ? "btn-primary" : "btn-secondary")} style={{ marginTop: 22, alignSelf: "flex-start" }}>Open the {c.role} view</a>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div style={{ marginTop: 28, border: "2px solid var(--color-text)", padding: "18px 22px", fontSize: 13.5, lineHeight: 1.65, color: "var(--color-neutral-800)" }}>
|
||||
<b style={{ color: "var(--color-text)" }}>How the demo works.</b> Everyone shares the one demo facility, so you might spot someone else’s changes while you are in there. It goes back to the same starting point every {DEMO_RESET_MINUTES} minutes, so feel free to break things. Demo accounts can’t change passwords or users, or wipe the data. Everything else — issuing, ordering, receiving, stocktakes, reports, printing — behaves exactly as it would in your own facility. None of it is real hospital data.
|
||||
</div>
|
||||
</> : (
|
||||
<div style={{ marginTop: 36, border: "2px solid var(--color-text)", padding: "18px 22px", fontSize: 13.5, lineHeight: 1.65, color: "var(--color-neutral-800)" }}>
|
||||
<b style={{ color: "var(--color-text)" }}>There is nothing to open just now.</b> The shared demo facility is off, so the two role buttons that normally sit here would only lead to a closed door. Until it is back, <Link href="/how-it-works" style={{ fontWeight: 700 }}>how it works</Link> walks through the same day at the counter, and <Link href="/features" style={{ fontWeight: 700 }}>the feature list</Link> covers what is in it. If you would rather be shown around, <Link href="/contact" style={{ fontWeight: 700 }}>ask for a look</Link>.
|
||||
</div>
|
||||
)}
|
||||
<div style={{ marginTop: 28, fontSize: 14 }}>Want one of your own? <Link href="/auth?mode=signup" data-umami-event="signup-cta" data-umami-event-placement="demo-page" style={{ fontWeight: 700 }}>Set up your facility</Link> — it takes about a minute, and your catalogue and staff register come in from CSV.</div>
|
||||
</div>
|
||||
<CtaBand />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,72 @@
|
||||
import Link from "next/link";
|
||||
import { CtaBand, PageHead, SiteNav, body, h3, kicker, small } from "@/components/site";
|
||||
import JsonLd from "@/components/JsonLd";
|
||||
import { faqPage, graph } from "@/lib/schema";
|
||||
import { PRICES } from "@/lib/plan";
|
||||
import { plansLive } from "@/lib/plans-live";
|
||||
|
||||
export const metadata = {
|
||||
title: "Questions",
|
||||
description: "Is it really free, is it only for hospitals, what does it run on, do we need scanners, how do nursing entitlements work, where is our data, and what if we stop using it.",
|
||||
alternates: { canonical: "/faq" },
|
||||
};
|
||||
|
||||
/* [number, question, answer, plainAnswer?]
|
||||
The fourth slot exists only for the answer whose JSX can’t be serialised into
|
||||
structured data. Everything else marks up exactly the string on the page. */
|
||||
const faqs = (live: boolean): [string, string, React.ReactNode, string?][] => [
|
||||
live
|
||||
? ["01", "Is it really free?", `The software is. Run it on your own server and it costs nothing, with every feature. Hosted on threadcount.tech it is free for a room under ${PRICES.freeStaff} staff records, and $${PRICES.hostedAnnual.toLocaleString("en-AU")} a year for a facility past that — which pays for the hosting, the backups and a person who answers. It was built by a hospital uniform coordinator for their own room, and there’s no sales process attached to it.`]
|
||||
: ["01", "Is it really free?", "Yes. No licence fee, no per-device charge, no per-user charge. It was built by a hospital uniform coordinator for their own room, and there’s no sales process attached to it."],
|
||||
["02", "Is it only for hospitals?", "No. It was built in a hospital linen room, and that is the setting it knows best, but the loop is the same anywhere uniforms go out from a shelf: an aged-care home, a day surgery, a dental or GP practice, allied health, pathology, community and home care. One thing to know up front — the screens say ward and linen room, because that is the vocabulary it was written in."],
|
||||
["03", "What does it run on?", "Any browser, on the phones, tablets and computers the room already has, and nothing needs installing to start. Camera scanning is the one part that depends on which browser: Chrome and Edge read a barcode straight from the camera, on Android and on a computer. Safari on an iPhone or iPad, and Firefox anywhere, cannot — there you type the code or use a USB scanner."],
|
||||
["04", "Do we need barcode scanners?", "No, though a USB scanner is the fastest thing at a counter. It works with the supplier barcodes already printed on the garment, read by that scanner or by the phone camera in a browser that supports it. If a code isn’t recognised, tell it once what the garment is and it stays bound."],
|
||||
["05", "Can more than one person use it at a time?", "Yes. Access is per person, not per device, so the counter and the ward, wing or clinic can all be working without anyone waiting for a licence to free up."],
|
||||
["06", "How does it handle nursing entitlements?", "Through the FTE table on the signed order form. The hours someone works propose their starting kit, and their manager can sign for more than it proposes. Nobody holds more than six sets at a time — or whatever ceiling you set — nurses included — past that it takes a hand-in or a coordinator’s recorded override. You choose which staff groups use the table; the others start on a fixed kit, or have a manager approve each set."],
|
||||
["07", "What happens when the box arrives short?", "Receive the lines that came, and the shortfall splits automatically to a back order against the same supplier reference. Nothing has to be re-keyed."],
|
||||
["08", "Will finance accept the export?", "The journal comes out as one debit line per cost centre against your GL account, in CSV. Most finance teams upload it directly; if yours needs a different layout, say so."],
|
||||
["09", "Where is our data held, and who can see it?", <>Only the people you invite can see your room’s records, and nothing is pooled with another facility. Hosting, backup and retention should be agreed with your information security team before real staff data goes in — there’s more in <Link href="/security" style={{ fontWeight: 700 }}>Security & data</Link>.</>,
|
||||
"Only the people you invite can see your room’s records, and nothing is pooled with another facility. Hosting, backup and retention should be agreed with your information security team before real staff data goes in."],
|
||||
["10", "What if we want to stop using it?", "Every report and register exports as CSV. An admin can also download the whole facility as one backup file, every issue, order and count included. Take the data and go: there’s nothing to cancel and nothing held back."],
|
||||
];
|
||||
|
||||
export default async function Faq() {
|
||||
const FAQS = faqs(await plansLive());
|
||||
return (
|
||||
<>
|
||||
<SiteNav />
|
||||
<JsonLd
|
||||
data={graph(
|
||||
faqPage(
|
||||
FAQS.filter(([, , a, plain]) => typeof a === "string" || plain)
|
||||
.map(([, q, a, plain]) => ({ q, a: plain ?? (a as string) })),
|
||||
),
|
||||
)}
|
||||
/>
|
||||
<PageHead kicker="Questions" title="The ones people actually ask." />
|
||||
|
||||
{/* Deliberately narrower than the rest of the site. */}
|
||||
<section style={{ borderBottom: "2px solid var(--color-text)" }}>
|
||||
<div style={{ maxWidth: 1040, margin: "0 auto", padding: "clamp(28px,4vw,44px) 40px clamp(48px,6vw,72px)" }}>
|
||||
{FAQS.map(([n, q, a]) => (
|
||||
<div key={n} style={{ display: "grid", gridTemplateColumns: "44px 1fr", gap: 20, padding: "34px 0", borderBottom: "1px solid var(--color-divider)" }}>
|
||||
<div style={{ fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: 15, color: "var(--color-neutral-600)" }}>{n}</div>
|
||||
<div>
|
||||
<h2 style={{ ...h3, fontSize: "clamp(19px,2vw,25px)", margin: 0 }}>{q}</h2>
|
||||
<p style={{ ...body, margin: "10px 0 0", maxWidth: "66ch" }}>{a}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
<div style={{ marginTop: 40, border: "2px solid var(--color-text)", padding: "26px 30px 30px" }}>
|
||||
<div style={kicker}>Something not covered here?</div>
|
||||
<h2 style={{ ...h3, fontSize: "clamp(20px,2.2vw,27px)", marginTop: 10 }}>Ask it directly.</h2>
|
||||
<div style={{ ...small, marginTop: 8, maxWidth: "56ch" }}>Replies come from the person who built the thing, so the answer will be straight.</div>
|
||||
<Link href="/contact" className="btn btn-primary" style={{ marginTop: 20, display: "inline-block" }}>Ask a question</Link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<CtaBand />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,95 @@
|
||||
import Link from "next/link";
|
||||
import { Band, CtaBand, PageHead, SiteNav, body, h2, h3, kicker, small } from "@/components/site";
|
||||
|
||||
export const metadata = {
|
||||
title: "Features",
|
||||
description: "Nine things a linen room does every day, in a hospital, an aged-care home or a clinic: scanning, the pickup call list, supplier orders, stocktakes, allowances set per staff group, roles, staff records, catalogue and suppliers.",
|
||||
alternates: { canonical: "/features" },
|
||||
};
|
||||
|
||||
const FEATURES = [
|
||||
{ n: "02", t: "The pickup call list", b: "Staff orders that have arrived queue by days waiting. Ring them, mark them contacted, print the collection slip, tick them off when they take it." },
|
||||
{ n: "03", t: "Orders you can trace back", b: "Supplier order number, invoice, tracking, what actually turned up on each line, a purchase order you can print, and a back order raised for whatever the box was short." },
|
||||
{ n: "04", t: "Stocktakes that stay filed", b: "Scan to count, with a blind mode when you would rather not see the system figure while you count. Variances in dollars as you go, and each count kept with the date, who counted, and every line that moved." },
|
||||
{ n: "05", t: "Three routes, one ceiling", b: "Name your own staff groups and give each one a route. On the FTE table, the hours someone works propose their starting kit and a manager can sign for more. On a starting kit, they get a fixed number of sets on day one and more as they need them. On manager approval, a manager signs for each set. Every route stops at six sets held at any one time, unless you set a different figure. Past it takes a hand-in or a coordinator’s recorded override." },
|
||||
{ n: "06", t: "Two roles, and only two", b: "Admins look after settings, staff, the catalogue, suppliers and prices. Issuers issue, count and receive. Nobody edits a price or a past issue by accident, because Issuers simply can’t." },
|
||||
{ n: "07", t: "Staff records with size history", b: "Every staff member carries their ward or clinic, cost centre, staff group and the sizes they were last issued, so the second visit takes seconds." },
|
||||
{ n: "08", t: "Catalogue and suppliers together", b: "Garments, sizes, unit costs and supplier codes live in one place. Change a price once and every future issue values correctly — past issues keep the price they were recorded at." },
|
||||
{ n: "09", t: "Nothing to install", b: "It runs in the browser on the devices the room already has. Chrome and Edge — on Android and on a computer — read garment barcodes straight from the camera with nothing extra installed. On an iPhone or iPad, and in Firefox, the code is typed or read with a USB scanner." },
|
||||
];
|
||||
|
||||
export default function Features() {
|
||||
return (
|
||||
<>
|
||||
<SiteNav current="features" />
|
||||
<PageHead
|
||||
kicker="Features"
|
||||
tone="ink"
|
||||
title="Built for a busy Monday morning."
|
||||
right={<p style={{ fontSize: 16.5, lineHeight: 1.7, color: "var(--color-neutral-200)", maxWidth: "42ch", margin: 0 }}>Nine things the room actually does every day, and nothing it doesn’t. No modules to buy, and no setting up before you can issue a scrub top.</p>}
|
||||
/>
|
||||
|
||||
<Band pad="0 40px 0">
|
||||
{/* Row 01 is the emphasised one — bigger numeral, its own kicker. */}
|
||||
<div className="tcm-rowgrid" style={{ display: "grid", gridTemplateColumns: "110px 1fr 1.1fr", gap: 32, padding: "48px 0 44px", borderBottom: "1px solid var(--color-divider)" }}>
|
||||
<div style={{ fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: 56, lineHeight: 1, color: "var(--color-accent)" }}>01</div>
|
||||
<div>
|
||||
<div style={kicker}>The difference</div>
|
||||
<h2 style={{ ...h3, fontSize: "clamp(22px,2.4vw,30px)", marginTop: 8 }}>Scan-first, at the counter and out on the floor</h2>
|
||||
</div>
|
||||
<p style={{ ...body, margin: 0, maxWidth: "52ch" }}>It reads the barcodes already printed on the garment labels, using a USB scanner at the counter, or your phone camera out on a ward, a wing or a clinic room in a browser that can read one — Chrome and Edge can; Safari on an iPhone or iPad cannot. Scan something it doesn’t know and you tell it once what it is; after that it just knows. Issuing, counting and receiving are all the same scan.</p>
|
||||
</div>
|
||||
|
||||
{FEATURES.map((f) => (
|
||||
<div key={f.n} className="tcm-rowgrid" style={{ display: "grid", gridTemplateColumns: "110px 1fr 1.1fr", gap: 32, padding: "34px 0", borderBottom: "1px solid var(--color-divider)" }}>
|
||||
<div style={{ fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: 40, lineHeight: 1, color: "var(--color-neutral-600)" }}>{f.n}</div>
|
||||
<h2 style={{ ...h3, fontSize: "clamp(19px,2vw,25px)", margin: 0 }}>{f.t}</h2>
|
||||
<p style={{ ...body, fontSize: 15.5, margin: 0, maxWidth: "52ch" }}>{f.b}</p>
|
||||
</div>
|
||||
))}
|
||||
<div style={{ height: 24 }} />
|
||||
</Band>
|
||||
|
||||
{/* Slips band with the recreated collection slip */}
|
||||
<Band tone="surface">
|
||||
<div className="tcm-split" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 56, alignItems: "center" }}>
|
||||
<div>
|
||||
<h2 style={h2}>Slips come out filled in.</h2>
|
||||
<p style={{ ...body, marginTop: 18, maxWidth: "46ch" }}>Collection slips, ward delivery notes and the credit slips against a manager’s approval print with the staff member, ward, sets and order reference already on them. Whoever takes the round can sign the paper, or sign on screen when you hand it over; an on-screen signature is kept with that delivery and deleted with it.</p>
|
||||
</div>
|
||||
<div style={{ border: "2px solid var(--color-text)", background: "var(--color-bg)" }}>
|
||||
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "10px 16px", borderBottom: "2px solid var(--color-text)" }}>
|
||||
<b style={{ fontSize: 13 }}>Collection slip — 04 Sep 2026</b><span className="tag tag-outline">Print</span>
|
||||
</div>
|
||||
<div style={{ padding: "14px 16px", fontSize: 13 }}>
|
||||
{[["Staff", "M. Whitfield, RN"], ["Ward", "3A · cost centre RGH-3010"], ["Approved sets", "3 of 5 · manager’s approval on file"]].map(([k, v]) => (
|
||||
<div key={k} style={{ display: "flex", justifyContent: "space-between", gap: 16, padding: "6px 0", borderBottom: "1px solid var(--color-divider)" }}><span style={{ color: "var(--color-neutral-700)" }}>{k}</span><b>{v}</b></div>
|
||||
))}
|
||||
<div style={{ marginTop: 12 }}>
|
||||
{[["RN Active Scrub Top · M ×2", "From stock", false], ["Elastic Waist Scrub Pant · M ×2", "From stock", false], ["Softshell Jacket · M ×1", "Order in", true]].map(([n, s, red]) => (
|
||||
<div key={String(n)} style={{ display: "flex", justifyContent: "space-between", gap: 16, padding: "6px 0", borderBottom: "1px solid var(--color-divider)" }}><span>{n}</span><b style={red ? { color: "var(--color-accent-700)" } : undefined}>{s}</b></div>
|
||||
))}
|
||||
</div>
|
||||
<div style={{ marginTop: 18, color: "var(--color-neutral-700)" }}>Signature ______________________</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Band>
|
||||
|
||||
<Band>
|
||||
<div className="tcm-split" style={{ display: "grid", gridTemplateColumns: "1fr auto", gap: 32, alignItems: "center" }}>
|
||||
<div>
|
||||
<h2 style={{ ...h2, fontSize: "clamp(22px,2.6vw,34px)" }}>See it running with demonstration data.</h2>
|
||||
<div style={{ ...small, marginTop: 10 }}>A stocked shelf, staff on the register, orders open and three months of history behind it.</div>
|
||||
</div>
|
||||
<div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
|
||||
<Link href="/demo" data-umami-event="open-demo" data-umami-event-placement="features" className="btn btn-primary">Open the working demo</Link>
|
||||
<Link href="/how-it-works" className="btn btn-secondary">How it works</Link>
|
||||
</div>
|
||||
</div>
|
||||
</Band>
|
||||
|
||||
<CtaBand />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,80 @@
|
||||
import Link from "next/link";
|
||||
import { Band, CtaBand, PageHead, SiteNav, body, h2, h3, kicker } from "@/components/site";
|
||||
|
||||
export const metadata = {
|
||||
title: "Getting started",
|
||||
description: "Five steps from opening the demo to issuing at the counter, with an honest time estimate against each one. The same five whether the shelf is a linen room or a store cupboard.",
|
||||
alternates: { canonical: "/getting-started" },
|
||||
};
|
||||
|
||||
const STEPS = [
|
||||
{ n: "1", t: "Open the demo and have a look", b: "Everything works on demonstration data. Issue a set, receive a box, run a report. Nothing you do here touches a real record.", time: "20 minutes" },
|
||||
{ n: "2", t: "Load the catalogue", b: "Garments, sizes, unit costs and supplier codes. This is the one piece worth doing carefully, because every report values from it.", time: "An hour" },
|
||||
{ n: "3", t: "Load the staff list", b: "Name your staff groups in Settings and choose each one’s route first, then load the list: name, department, cost centre and group. Sizes fill in as people are issued, so don’t hold up the start waiting for them.", time: "An hour" },
|
||||
{ n: "4", t: "Count what’s on the shelf", b: "Run a stocktake as your opening balance. From that point on-hand is live and reorder flags start working.", time: "An afternoon" },
|
||||
{ n: "5", t: "Start issuing", b: "That’s it. The first replenishment order builds itself from the first day’s movement.", time: "Same day" },
|
||||
];
|
||||
|
||||
const READY = [
|
||||
"The garment list with sizes and current unit costs",
|
||||
"Supplier names, codes and order contacts",
|
||||
"The staff list with departments and cost centres",
|
||||
"Your GL account for uniform spend",
|
||||
"Whoever signs off entitlements for each team",
|
||||
];
|
||||
|
||||
export default function GettingStarted() {
|
||||
return (
|
||||
<>
|
||||
<SiteNav />
|
||||
<PageHead
|
||||
kicker="Getting started"
|
||||
title="Issuing by the end of the first afternoon."
|
||||
lede="There’s no implementation project. Five steps, done in the order below, and the counter is live."
|
||||
/>
|
||||
|
||||
<Band pad="0 40px 0">
|
||||
{STEPS.map((s) => (
|
||||
<div key={s.n} className="tcm-rowgrid" style={{ display: "grid", gridTemplateColumns: "120px 1fr 180px", gap: 32, padding: "34px 0", borderBottom: "1px solid var(--color-divider)", alignItems: "start" }}>
|
||||
<div style={{ fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: 56, lineHeight: 0.9, color: "var(--color-accent)" }}>{s.n}</div>
|
||||
<div>
|
||||
<h2 style={{ ...h3, fontSize: "clamp(19px,2vw,25px)", margin: 0 }}>{s.t}</h2>
|
||||
<p style={{ ...body, fontSize: 15.5, margin: "10px 0 0", maxWidth: "56ch" }}>{s.b}</p>
|
||||
</div>
|
||||
<div style={{ textAlign: "right" }}>
|
||||
<div style={{ ...kicker, color: "var(--color-neutral-700)", fontSize: 11 }}>About</div>
|
||||
<div style={{ fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: 18, marginTop: 4 }}>{s.time}</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
<div style={{ height: 22 }} />
|
||||
</Band>
|
||||
|
||||
<Band tone="surface">
|
||||
<h2 style={h2}>What to have ready.</h2>
|
||||
<p style={{ ...body, marginTop: 14, maxWidth: "56ch" }}>None of it is hard to find. Most linen rooms and store cupboards already have all five in a workbook somewhere.</p>
|
||||
<div style={{ marginTop: 26 }}>
|
||||
{READY.map((r) => (
|
||||
<div key={r} style={{ display: "flex", gap: 16, padding: "13px 0", borderBottom: "1px solid var(--color-divider)", fontSize: 16 }}>
|
||||
<span style={{ width: 8, height: 8, background: "var(--color-accent)", flex: "none", marginTop: 8 }} />{r}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Band>
|
||||
|
||||
<Band>
|
||||
<div style={{ border: "2px solid var(--color-text)", padding: "28px 32px 32px" }}>
|
||||
<div style={kicker}>One thing first</div>
|
||||
<h2 style={{ ...h2, fontSize: "clamp(22px,2.6vw,34px)", marginTop: 10 }}>Talk to information security before real staff data goes in.</h2>
|
||||
<p style={{ ...body, marginTop: 14, maxWidth: "58ch" }}>Try the demo with demonstration data as long as you like. The moment you want your own staff list in it, hosting, backup and retention should be agreed with your facility.</p>
|
||||
<div style={{ display: "flex", gap: 12, marginTop: 24, flexWrap: "wrap" }}>
|
||||
<Link href="/demo" data-umami-event="open-demo" data-umami-event-placement="getting-started" className="btn btn-primary">Open the working demo</Link>
|
||||
<Link href="/security" className="btn btn-secondary">Security & data</Link>
|
||||
</div>
|
||||
</div>
|
||||
</Band>
|
||||
|
||||
<CtaBand />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,109 @@
|
||||
import Link from "next/link";
|
||||
import { Band, body, small } from "@/components/site";
|
||||
import { GuideFoot, GuideHead, GuideMeta, Pitfalls, Steps, type Step } from "@/components/guide";
|
||||
|
||||
export const metadata = {
|
||||
title: "Charging uniforms to the right cost centre",
|
||||
description:
|
||||
"How to attribute uniform spend to the ward, wing or clinic that incurred it: what to capture at the counter, how to value an issue, and what finance needs in the journal before they will accept it.",
|
||||
alternates: { canonical: "/guides/cost-centre-reporting" },
|
||||
};
|
||||
|
||||
const STEPS: Step[] = [
|
||||
{
|
||||
n: "01",
|
||||
h: "Attribute at the moment of issue, not at month end",
|
||||
p: <>The only person who reliably knows which ward, wing or clinic a garment is for is the person handing it over. Reconstructing that from invoices four weeks later is guesswork, and it is the reason most linen rooms end up charging everything to one central code. Capture the cost centre when the garment leaves the counter and the month-end job becomes an export rather than an investigation.</>,
|
||||
},
|
||||
{
|
||||
n: "02",
|
||||
h: "Hang the cost centre off the person, not the transaction",
|
||||
p: <>Asking “which cost centre?” at every issue is a question that will be answered wrong under pressure. Put the ward and cost centre on the staff record, so the issue inherits it. The counter stays fast, and corrections happen once on the register rather than repeatedly at the counter.</>,
|
||||
},
|
||||
{
|
||||
n: "03",
|
||||
h: "Decide what an issue is worth",
|
||||
p: <>Unit cost is the defensible answer: what you paid the supplier for that garment, per unit. Avoid apportioning freight and avoid an average across sizes if your sizes genuinely differ in price. The figure needs to be one you can explain in a sentence, because at some point someone will ask you to.</>,
|
||||
},
|
||||
{
|
||||
n: "04",
|
||||
h: "Decide when the charge lands",
|
||||
p: <>There are two honest answers and you must pick one: at purchase, or at issue. Charging at purchase makes the linen room’s budget lumpy and makes wards indifferent to what they take. Charging at issue is what most facilities want — the ward or clinic feels the cost of its own consumption — but it means your stock on hand is an asset carried by the linen room until it moves. Pick one, write it down, and don’t quietly change it mid-year.</>,
|
||||
},
|
||||
{
|
||||
n: "05",
|
||||
h: "Produce one line per cost centre",
|
||||
p: <>Finance does not want your transaction list. They want a journal: one debit line per cost centre, one credit to the GL account the stock was bought against, for a stated period, totalling to a number that matches. Give them exactly that as CSV and the upload takes minutes. Give them a spreadsheet of every issue and it will sit in an inbox.</>,
|
||||
},
|
||||
{
|
||||
n: "06",
|
||||
h: "Keep the detail behind the summary",
|
||||
p: <>The summary is what gets uploaded; the detail is what settles the argument when a ward manager queries their figure. You want to be able to go from “Ward 3A, $1,840” to the individual issues behind it without rebuilding anything. If your summary can’t be drilled into, expect to spend the following week defending it.</>,
|
||||
},
|
||||
];
|
||||
|
||||
const PITFALLS: [string, string][] = [
|
||||
["One catch-all cost centre", "Everything charged centrally means no ward, wing or clinic ever sees the cost of its own uniform consumption, so nothing ever changes."],
|
||||
["Cost centres that only exist in someone’s head", "If the mapping from ward or team to code lives in memory, it leaves when that person does. Put it on the record."],
|
||||
["Charging at purchase and at issue", "Double-counting is the fastest way to lose finance’s trust, and it is easy to do accidentally when the method changes mid-year."],
|
||||
["Retail price instead of unit cost", "There is no margin here. Anything other than what you paid invites a question you cannot answer."],
|
||||
["No period stamped on the export", "A journal without an unambiguous date range cannot be reconciled and will be sent back."],
|
||||
["Rounding per line", "Round the total, not each line, or the journal won’t balance against the invoice and someone will spend an afternoon on eleven cents."],
|
||||
];
|
||||
|
||||
export default function Page() {
|
||||
return (
|
||||
<>
|
||||
<GuideMeta
|
||||
slug="cost-centre-reporting"
|
||||
title="Charging uniforms to the right cost centre"
|
||||
description={metadata.description}
|
||||
updated="2026-09-07"
|
||||
/>
|
||||
<GuideHead
|
||||
kicker="Guide"
|
||||
title="Charging uniforms to the right cost centre"
|
||||
lede="Uniform spend that lands in one central code tells nobody anything. Attributing it properly is mostly a matter of capturing one field at the right moment."
|
||||
/>
|
||||
|
||||
<Band>
|
||||
<Steps steps={STEPS} />
|
||||
</Band>
|
||||
|
||||
<Band tone="surface">
|
||||
<div style={{ fontSize: 11.5, letterSpacing: "0.12em", textTransform: "uppercase", fontWeight: 800, borderBottom: "2px solid var(--color-text)", paddingBottom: 9 }}>
|
||||
What finance sends back
|
||||
</div>
|
||||
<Pitfalls items={PITFALLS} />
|
||||
</Band>
|
||||
|
||||
<Band>
|
||||
<h2 style={{ fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: "clamp(24px,3vw,36px)", letterSpacing: "-0.02em", margin: 0 }}>
|
||||
Doing this in ThreadCount
|
||||
</h2>
|
||||
<p style={{ ...body, margin: "16px 0 0", maxWidth: "62ch" }}>
|
||||
Ward and cost centre sit on the staff record, so every issue values itself at unit cost
|
||||
against the right code without anyone being asked at the counter. The journal exports as
|
||||
one debit line per cost centre for the month you choose, and each line opens the issues
|
||||
behind it — who, what, which size, what it cost — when someone queries their
|
||||
number.
|
||||
</p>
|
||||
<p style={{ ...small, margin: "14px 0 0", maxWidth: "62ch" }}>
|
||||
If your finance team needs a different layout, that is usually a small change — say what
|
||||
they need.
|
||||
</p>
|
||||
<div style={{ display: "flex", gap: 12, marginTop: 24, flexWrap: "wrap" }}>
|
||||
<Link href="/reporting" className="btn btn-primary">See the reporting</Link>
|
||||
<Link href="/contact" className="btn btn-secondary">Ask about a layout</Link>
|
||||
</div>
|
||||
</Band>
|
||||
|
||||
<GuideFoot
|
||||
related={[
|
||||
["Staff entitlements and manager approvals", "/guides/manager-approvals"],
|
||||
["How to run a uniform stocktake", "/guides/uniform-stocktake"],
|
||||
]}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,113 @@
|
||||
import Link from "next/link";
|
||||
import { Band, body, small } from "@/components/site";
|
||||
import { GuideFoot, GuideHead, GuideMeta, Pitfalls, Steps, type Step } from "@/components/guide";
|
||||
|
||||
export const metadata = {
|
||||
title: "Staff uniform entitlements and manager approvals",
|
||||
description:
|
||||
"How to run a uniform entitlement that holds, on a ward or in an aged-care home: what an approval needs to record, how to handle part-time and agency staff, what to do when someone asks for more.",
|
||||
alternates: { canonical: "/guides/manager-approvals" },
|
||||
};
|
||||
|
||||
const STEPS: Step[] = [
|
||||
{
|
||||
n: "01",
|
||||
h: "Write the entitlement down before you need it",
|
||||
p: <>An entitlement that exists only as custom is one you will renegotiate at the counter, individually, forever. Agree the number of sets per role, put it somewhere both the linen room and the wards, homes or clinics it serves can see, and date it. The specific number matters far less than everyone knowing what it is.</>,
|
||||
},
|
||||
{
|
||||
n: "02",
|
||||
h: "Prorate honestly, or don’t prorate at all",
|
||||
p: <>Part-time staff are where entitlement schemes get messy. A nurse at 0.4 FTE — or a care worker on two shifts a week, or a dental assistant covering Fridays — still needs enough sets to get through a week without doing laundry nightly, so a straight multiplication produces something unworkable and quietly ignored. Either set a floor below which nobody drops, or don’t prorate and say so. What you cannot do is have a rule on paper that the counter overrides in practice, because then there is no rule.</>,
|
||||
},
|
||||
{
|
||||
n: "03",
|
||||
h: "Make the approval carry its own evidence",
|
||||
p: <>An approval should record who approved it, what they approved, for whom, and when. The approver is the staff member’s own manager — the ward, clinic or team manager. “The manager said it was fine” is not an approval, and it is exactly what you will be holding when someone asks why a ward went over budget. Name, number of sets, FTE if it bears on the calculation, and a date.</>,
|
||||
},
|
||||
{
|
||||
n: "04",
|
||||
h: "Separate the entitlement from the issue",
|
||||
p: <>Someone can be entitled to five sets and take three today. Track the entitlement and the issues against it as different things, so the balance is visible. Otherwise the only way to know what someone is still owed is to add up their history, and nobody does that at a counter with three people waiting.</>,
|
||||
},
|
||||
{
|
||||
n: "05",
|
||||
h: "Give them the balance in writing",
|
||||
p: <>When a staff member takes less than their entitlement — because the size isn’t there, or they only wanted two — hand over something that records the balance. A credit slip stops the same conversation happening again in a fortnight with a different person at the counter, and it stops the quiet inflation that happens when nobody can remember what was already given.</>,
|
||||
},
|
||||
{
|
||||
n: "06",
|
||||
h: "Decide what happens when someone asks for more",
|
||||
p: <>They will, and often for good reason: a garment condemned after a spill, a size change, a genuine increase in hours. Have a route that isn’t “no” and isn’t “yes, quietly”. An over-entitlement issue with a recorded approval keeps the room helpful and the numbers honest at the same time.</>,
|
||||
},
|
||||
{
|
||||
n: "07",
|
||||
h: "Handle agency and students explicitly",
|
||||
p: <>Short-term staff are the fastest route to unreturned stock, because there is often nobody to ask afterwards. Decide in advance whether they get issued at all, and if so whether it is a loan against a return date. Whatever you decide, decide it once rather than at the counter.</>,
|
||||
},
|
||||
];
|
||||
|
||||
const PITFALLS: [string, string][] = [
|
||||
["Verbal approvals", "Nothing to show and nothing to reconcile. The first budget query will land on the linen room, not on the person who approved it."],
|
||||
["Entitlement with no start date", "Without a date you cannot tell an annual renewal from a duplicate issue, and long-serving staff quietly accumulate."],
|
||||
["Prorating below a workable minimum", "A rule that makes it impossible to get through a week will be broken at the counter, and then no rule is being followed at all."],
|
||||
["No record of what’s outstanding", "If the balance isn’t visible, the safe answer at the counter is always to hand over another set."],
|
||||
["Treating a size change as a new issue", "It doubles the person’s apparent consumption and hides a real signal about how you’re buying sizes."],
|
||||
["No closing routine for leavers", "The entitlement was correct; nobody asked for the garments back. This is the single largest source of unreturned stock in most rooms."],
|
||||
];
|
||||
|
||||
export default function Page() {
|
||||
return (
|
||||
<>
|
||||
<GuideMeta
|
||||
slug="manager-approvals"
|
||||
title="Staff uniform entitlements and manager approvals"
|
||||
description={metadata.description}
|
||||
updated="2026-09-07"
|
||||
/>
|
||||
<GuideHead
|
||||
kicker="Guide"
|
||||
title="Entitlements and manager approvals"
|
||||
lede="Most disputes at a uniform counter are not about uniforms. They are about a rule nobody wrote down, applied inconsistently by people trying to be helpful."
|
||||
/>
|
||||
|
||||
<Band>
|
||||
<Steps steps={STEPS} />
|
||||
</Band>
|
||||
|
||||
<Band tone="surface">
|
||||
<div style={{ fontSize: 11.5, letterSpacing: "0.12em", textTransform: "uppercase", fontWeight: 800, borderBottom: "2px solid var(--color-text)", paddingBottom: 9 }}>
|
||||
Where entitlements come apart
|
||||
</div>
|
||||
<Pitfalls items={PITFALLS} />
|
||||
</Band>
|
||||
|
||||
<Band>
|
||||
<h2 style={{ fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: "clamp(24px,3vw,36px)", letterSpacing: "-0.02em", margin: 0 }}>
|
||||
Doing this in ThreadCount
|
||||
</h2>
|
||||
<p style={{ ...body, margin: "16px 0 0", maxWidth: "62ch" }}>
|
||||
Entitlement sits on the staff record and the balance is on screen at the counter, so the
|
||||
person handing over garments can see what is still owed without adding anything up. An
|
||||
approval records the approver, the sets approved and the FTE it was based on. Take less
|
||||
than the entitlement and a credit slip prints for the balance.
|
||||
</p>
|
||||
<p style={{ ...small, margin: "14px 0 0", maxWidth: "62ch" }}>
|
||||
Going over is allowed — it just asks for the approval first, which is the only difference
|
||||
between a helpful exception and an unexplained one.
|
||||
</p>
|
||||
<div style={{ display: "flex", gap: 12, marginTop: 24, flexWrap: "wrap" }}>
|
||||
<Link href="/demo" data-umami-event="open-demo" data-umami-event-placement="guide" className="btn btn-primary">Open the demo</Link>
|
||||
<Link href="/how-it-works" className="btn btn-secondary">How issuing works</Link>
|
||||
</div>
|
||||
</Band>
|
||||
|
||||
<GuideFoot
|
||||
related={[
|
||||
["Where hospital and aged-care uniforms actually go", "/guides/uniform-loss"],
|
||||
["Charging uniforms to the right cost centre", "/guides/cost-centre-reporting"],
|
||||
]}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
import { permanentRedirect } from "next/navigation";
|
||||
|
||||
// The guide moved to /guides/manager-approvals once the approval stopped being a nursing-only
|
||||
// idea. This is a 308 rather than the 307 /product uses: that path was live only briefly before
|
||||
// launch, whereas this one has been in the sitemap, in cold emails and in search results for
|
||||
// months. The move is permanent, so say so — search engines hand the ranking to the new URL and
|
||||
// browsers stop asking for the old one.
|
||||
export default function NumApprovalsRedirect() {
|
||||
permanentRedirect("/guides/manager-approvals");
|
||||
}
|
||||
@@ -0,0 +1,74 @@
|
||||
import Link from "next/link";
|
||||
import { Band, CtaBand, PageHead, SiteNav, body, small } from "@/components/site";
|
||||
|
||||
export const metadata = {
|
||||
title: "Guides",
|
||||
description:
|
||||
"Notes on running a linen room — hospital, aged care or clinic: stocktakes that produce a usable number, where uniforms actually go, charging spend to the right ward, and entitlements that hold up.",
|
||||
alternates: { canonical: "/guides" },
|
||||
};
|
||||
|
||||
/* Written for the person doing the job, not for the person buying software. Each of these is
|
||||
useful with a clipboard and no product at all — which is the only reason anyone would link to
|
||||
them. */
|
||||
export const GUIDES: [string, string, string][] = [
|
||||
[
|
||||
"/guides/uniform-stocktake",
|
||||
"How to run a uniform stocktake",
|
||||
"What to count, how to split a room into shelves, what to do about garments at the laundry, and how to record a variance so the number still means something a month later.",
|
||||
],
|
||||
[
|
||||
"/guides/uniform-loss",
|
||||
"Where the uniforms actually go",
|
||||
"Loss is rarely theft. Leavers nobody closed off, sizes swapped at the shelf, laundry that never came back, damage never written off — and how to tell them apart.",
|
||||
],
|
||||
[
|
||||
"/guides/cost-centre-reporting",
|
||||
"Charging uniforms to the right cost centre",
|
||||
"Capturing the cost centre at the counter, valuing an issue defensibly, and producing a journal finance will actually accept.",
|
||||
],
|
||||
[
|
||||
"/guides/manager-approvals",
|
||||
"Entitlements and manager approvals",
|
||||
"Writing the entitlement down, prorating part-time hours honestly, recording an approval that carries its own evidence, and what to do when someone asks for more.",
|
||||
],
|
||||
];
|
||||
|
||||
export default function Guides() {
|
||||
return (
|
||||
<>
|
||||
<SiteNav />
|
||||
<PageHead
|
||||
kicker="Guides"
|
||||
title="How the job is actually done."
|
||||
lede="Notes from running a hospital linen room. What follows works the same in an aged-care home, a day surgery or a clinic cupboard. No product required — take the method and use a clipboard if that is what you have."
|
||||
/>
|
||||
|
||||
<Band>
|
||||
{GUIDES.map(([href, title, blurb], i) => (
|
||||
<Link
|
||||
key={href}
|
||||
href={href}
|
||||
style={{ textDecoration: "none", color: "var(--color-text)", display: "grid", gridTemplateColumns: "44px 1fr", gap: 20, padding: "32px 0", borderBottom: "1px solid var(--color-divider)" }}
|
||||
>
|
||||
<div style={{ fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: 15, color: "var(--color-neutral-600)" }}>
|
||||
{String(i + 1).padStart(2, "0")}
|
||||
</div>
|
||||
<div>
|
||||
<h2 style={{ fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: "clamp(20px,2.2vw,28px)", letterSpacing: "-0.02em", margin: 0 }}>
|
||||
{title}
|
||||
</h2>
|
||||
<p style={{ ...body, margin: "10px 0 0", maxWidth: "64ch" }}>{blurb}</p>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
<p style={{ ...small, margin: "26px 0 0", maxWidth: "58ch" }}>
|
||||
Something missing that you had to work out the hard way?{" "}
|
||||
<Link href="/contact" style={{ fontWeight: 700 }}>Tell us</Link> and it will get written up.
|
||||
</p>
|
||||
</Band>
|
||||
|
||||
<CtaBand />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,104 @@
|
||||
import Link from "next/link";
|
||||
import { Band, body, small } from "@/components/site";
|
||||
import { GuideFoot, GuideHead, GuideMeta, Pitfalls, Steps, type Step } from "@/components/guide";
|
||||
|
||||
export const metadata = {
|
||||
title: "Where hospital and aged-care uniforms actually go",
|
||||
description:
|
||||
"Uniform loss is rarely theft. The honest causes — starters who never return a set, sizes swapped at the shelf, laundry that never comes back, leavers nobody closed off — and what to record so you can tell them apart.",
|
||||
alternates: { canonical: "/guides/uniform-loss" },
|
||||
};
|
||||
|
||||
const STEPS: Step[] = [
|
||||
{
|
||||
n: "01",
|
||||
h: "Stop calling it shrinkage",
|
||||
p: <>Borrowing the retail word imports the retail assumption, which is that stock is being stolen. In a linen room that is almost never the main cause, and starting there sours every conversation you need to have with the ward, wing or practice manager. What you have is unreturned stock, and most of it left through a door you can name.</>,
|
||||
},
|
||||
{
|
||||
n: "02",
|
||||
h: "Leavers who were never closed off",
|
||||
p: <>The single largest cause in most rooms. Someone is issued three sets on their first day, works for two years, resigns, and nobody tells the linen room. The sets are gone and the record still shows them holding stock. This is a process gap, not a stock problem: what you need is a reliable signal from HR, the ward or the practice when someone leaves, and a routine for closing the record and asking for the garments back while there is still someone to ask.</>,
|
||||
},
|
||||
{
|
||||
n: "03",
|
||||
h: "Size changes that were never recorded",
|
||||
p: <>A staff member takes a medium, finds it tight, and swaps it at the shelf for a large. Two garments have now moved and the record shows one. Do it a hundred times a year and your per-size figures drift far enough that ordering becomes guesswork. The fix is cheap: make the exchange a recorded action — the old size back, the new size out, in one movement — rather than something people do quietly because the proper route is slow.</>,
|
||||
},
|
||||
{
|
||||
n: "04",
|
||||
h: "Laundry that never came back",
|
||||
p: <>Garments sent for washing are stock in transit, and transit is where things vanish without anyone noticing, because nobody owns the gap. If you send in bulk and receive in bulk, count both ends. A persistent difference between what went and what returned is a conversation with the laundry provider, and it is a conversation you can only have with numbers.</>,
|
||||
},
|
||||
{
|
||||
n: "05",
|
||||
h: "Damage that was never written off",
|
||||
p: <>Torn, stained beyond use, or condemned on infection-control grounds. This is legitimate loss and should be recorded as such. If it isn’t, it lands in the same bucket as unreturned stock and makes your genuine problem look worse than it is — which costs you credibility exactly when you are asking for something.</>,
|
||||
},
|
||||
{
|
||||
n: "06",
|
||||
h: "Then, and only then, the small remainder",
|
||||
p: <>When the four causes above are recorded properly, what is left is usually a modest number. That remainder is worth attention, and it is now attention you can direct, because you know it is not laundry, not leavers, not swaps and not damage.</>,
|
||||
},
|
||||
];
|
||||
|
||||
const PITFALLS: [string, string][] = [
|
||||
["Issuing to a ward instead of a person", "Stock issued to “Ward 3A” can never be returned by anyone, because nobody holds it. Issue to a named person or accept that it is a write-off."],
|
||||
["No opening entitlement", "If nobody agreed how many sets a role gets, there is no such thing as too many, and every request is reasonable."],
|
||||
["Counting loss only in units", "A hundred lost XS gowns and a hundred lost theatre sets are the same number and very different money. Value it, or the case for change won’t land."],
|
||||
["Chasing individuals first", "Going after named staff before fixing the leaver process makes the room unpopular and recovers very little. Fix the doors before the people."],
|
||||
["Annual review only", "A number produced once a year is a post-mortem. Monthly, it is a control, and you still remember what happened."],
|
||||
["No agreed definition of loss", "If finance, the ward and the linen room each mean something different by it, the meeting is about definitions rather than uniforms."],
|
||||
];
|
||||
|
||||
export default function Page() {
|
||||
return (
|
||||
<>
|
||||
<GuideMeta
|
||||
slug="uniform-loss"
|
||||
title="Where hospital and aged-care uniforms actually go"
|
||||
description={metadata.description}
|
||||
updated="2026-09-07"
|
||||
/>
|
||||
<GuideHead
|
||||
kicker="Guide"
|
||||
title="Where the uniforms actually go"
|
||||
lede="Almost every linen room — in a hospital, an aged-care home or a clinic — has a gap between what it bought and what it can find. Naming the causes honestly is what turns that gap from an accusation into a work plan."
|
||||
/>
|
||||
|
||||
<Band>
|
||||
<Steps steps={STEPS} />
|
||||
</Band>
|
||||
|
||||
<Band tone="surface">
|
||||
<div style={{ fontSize: 11.5, letterSpacing: "0.12em", textTransform: "uppercase", fontWeight: 800, borderBottom: "2px solid var(--color-text)", paddingBottom: 9 }}>
|
||||
What makes it worse
|
||||
</div>
|
||||
<Pitfalls items={PITFALLS} />
|
||||
</Band>
|
||||
|
||||
<Band>
|
||||
<h2 style={{ fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: "clamp(24px,3vw,36px)", letterSpacing: "-0.02em", margin: 0 }}>
|
||||
Doing this in ThreadCount
|
||||
</h2>
|
||||
<p style={{ ...body, margin: "16px 0 0", maxWidth: "62ch" }}>
|
||||
Every issue is against a named person, so a leaver’s outstanding sets are a list
|
||||
rather than a mystery. A size change is one recorded exchange rather than two movements
|
||||
nobody made. Returns carry a condition, so damage is written off as damage. What remains
|
||||
unexplained stays visible instead of being averaged away.
|
||||
</p>
|
||||
<div style={{ display: "flex", gap: 12, marginTop: 24, flexWrap: "wrap" }}>
|
||||
<Link href="/demo" data-umami-event="open-demo" data-umami-event-placement="guide" className="btn btn-primary">Open the demo</Link>
|
||||
<Link href="/reporting" className="btn btn-secondary">What the reports show</Link>
|
||||
</div>
|
||||
</Band>
|
||||
|
||||
<GuideFoot
|
||||
related={[
|
||||
["How to run a uniform stocktake", "/guides/uniform-stocktake"],
|
||||
["Staff entitlements and manager approvals", "/guides/manager-approvals"],
|
||||
]}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,113 @@
|
||||
import Link from "next/link";
|
||||
import { Band, body, small } from "@/components/site";
|
||||
import { GuideFoot, GuideHead, GuideMeta, Pitfalls, Steps, type Step } from "@/components/guide";
|
||||
|
||||
export const metadata = {
|
||||
title: "How to run a uniform stocktake in a hospital, aged-care home or clinic",
|
||||
description:
|
||||
"A count that survives scrutiny in a hospital linen room or an aged-care store: what to count, how to split a room into shelves, what to do about garments at the laundry, and how to record a variance.",
|
||||
alternates: { canonical: "/guides/uniform-stocktake" },
|
||||
};
|
||||
|
||||
const STEPS: Step[] = [
|
||||
{
|
||||
n: "01",
|
||||
h: "Decide what a count is for before you start",
|
||||
p: <>A stocktake answers one of two questions, and they need different counts. Either you are correcting the on-hand figure so ordering stops going wrong, or you are producing a stock valuation someone in finance will sign. The first can be done shelf by shelf over a fortnight. The second has to be a single point in time with issuing stopped, or the number is meaningless. Most linen rooms need the first far more often than the second, and get into trouble by attempting the second casually.</>,
|
||||
},
|
||||
{
|
||||
n: "02",
|
||||
h: "Freeze movement, or record it",
|
||||
p: <>The commonest way a count goes wrong is that garments move while it is happening. If you can, stop issuing for the duration. If you cannot — and on a ward or in an aged-care home at shift change you usually cannot — then write down every issue and every return made during the count, and apply them afterwards. An unrecorded issue mid-count looks exactly like a loss, and you will spend an afternoon chasing it.</>,
|
||||
},
|
||||
{
|
||||
n: "03",
|
||||
h: "Break the room into shelves, not into products",
|
||||
p: <>Count by location, not by catalogue. A person standing at a shelf can count everything on it accurately; the same person asked to count “all scrub tops” has to walk the whole room, and will miss the bay by the door. Give every shelf and bay a name, count it as a unit, and record the count against that location. It also means two people can count different parts of the room at once without colliding.</>,
|
||||
},
|
||||
{
|
||||
n: "04",
|
||||
h: "Count by size, always",
|
||||
p: <>“Forty scrub tops” is not a usable number. Forty tops that are all XXL is a shortage of every other size wearing a healthy total. Every count line should be item plus size, because that is the level at which you run out, and the level at which you reorder.</>,
|
||||
},
|
||||
{
|
||||
n: "05",
|
||||
h: "Account for what isn’t on the shelf",
|
||||
p: <>At any moment a large share of your stock is legitimately elsewhere: at the laundry, issued to staff, in a delivery not yet put away, or set aside for a starter pack. None of that is missing, but if your count only covers shelves then all of it reads as a loss. Decide in advance how each of those is treated and be consistent — the usual approach is to count shelves only, and compare against expected shelf stock rather than against everything you have ever bought.</>,
|
||||
},
|
||||
{
|
||||
n: "06",
|
||||
h: "Write down why, not just what",
|
||||
p: <>A variance with no reason beside it is worthless three weeks later. “Twelve fewer size M tops than expected” tells you nothing; “twelve fewer, ward reported a bin sent to laundry unlogged” tells you where to look next time. Make a reason mandatory past a threshold you choose — five is a sensible starting point — so small counting noise passes without ceremony and real gaps get explained while the explanation is still known.</>,
|
||||
},
|
||||
{
|
||||
n: "07",
|
||||
h: "Apply it, then look at the pattern",
|
||||
p: <>Correcting the on-hand figure is the easy half. The value is in what repeats: the same size short every count, the same shelf always over, a variance that appears only after a particular roster. One count is an anecdote. Four counts with reasons attached is an argument you can take to a manager.</>,
|
||||
},
|
||||
];
|
||||
|
||||
const PITFALLS: [string, string][] = [
|
||||
["Counting into a spreadsheet nobody reconciles", "A count that never gets applied to the on-hand figure changes nothing. If the spreadsheet is where it ends, ordering carries on from the same wrong number."],
|
||||
["Recounting only the lines that look wrong", "Recounting a shortfall and accepting every surplus quietly biases the result. Recount by shelf, not by whether you liked the answer."],
|
||||
["Treating the laundry as loss", "Garments in the wash are stock. Counted as missing, they justify orders you do not need, and the surplus arrives a fortnight later."],
|
||||
["One person counting their own room", "Not because anyone is dishonest — because you see what you expect. Where the count feeds a valuation, have someone else count at least a sample."],
|
||||
["No date on the count", "A number without the moment it was true cannot be reconciled against anything. Record when the count was taken, not when it was typed up."],
|
||||
["Stopping at the total", "The total is the least useful figure in a stocktake. The per-size variance is the one that changes what you order on Monday."],
|
||||
];
|
||||
|
||||
export default function Page() {
|
||||
return (
|
||||
<>
|
||||
<GuideMeta
|
||||
slug="uniform-stocktake"
|
||||
title="How to run a uniform stocktake in a hospital, aged-care home or clinic"
|
||||
description={metadata.description}
|
||||
updated="2026-09-07"
|
||||
/>
|
||||
<GuideHead
|
||||
kicker="Guide"
|
||||
title="How to run a uniform stocktake"
|
||||
lede="Counting a linen room is not hard, and neither is counting an aged-care store or a clinic cupboard. Producing a number that still means something a month later is, and that difference is almost entirely in the preparation."
|
||||
/>
|
||||
|
||||
<Band>
|
||||
<Steps steps={STEPS} />
|
||||
</Band>
|
||||
|
||||
<Band tone="surface">
|
||||
<div style={{ fontSize: 11.5, letterSpacing: "0.12em", textTransform: "uppercase", fontWeight: 800, borderBottom: "2px solid var(--color-text)", paddingBottom: 9 }}>
|
||||
Where counts go wrong
|
||||
</div>
|
||||
<Pitfalls items={PITFALLS} />
|
||||
</Band>
|
||||
|
||||
<Band>
|
||||
<h2 style={{ fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: "clamp(24px,3vw,36px)", letterSpacing: "-0.02em", margin: 0 }}>
|
||||
Doing this in ThreadCount
|
||||
</h2>
|
||||
<p style={{ ...body, margin: "16px 0 0", maxWidth: "62ch" }}>
|
||||
Counts are taken by location, on a phone, scanning each garment. The expected figure stays
|
||||
on screen as you go, the tally survives putting the phone down mid-shelf, and a gap past
|
||||
your chosen threshold asks for a reason before it will commit. Nothing is applied to your
|
||||
on-hand figures until you commit the count.
|
||||
</p>
|
||||
<p style={{ ...small, margin: "14px 0 0", maxWidth: "62ch" }}>
|
||||
None of which you need in order to follow the steps above — a clipboard and a consistent
|
||||
method will do. It is just faster when the expected number is already in your hand.
|
||||
</p>
|
||||
<div style={{ display: "flex", gap: 12, marginTop: 24, flexWrap: "wrap" }}>
|
||||
<Link href="/demo" data-umami-event="open-demo" data-umami-event-placement="guide" className="btn btn-primary">Open the demo</Link>
|
||||
<Link href="/features" className="btn btn-secondary">What else it does</Link>
|
||||
</div>
|
||||
</Band>
|
||||
|
||||
<GuideFoot
|
||||
related={[
|
||||
["Where hospital and aged-care uniforms actually go", "/guides/uniform-loss"],
|
||||
["Charging uniforms to the right cost centre", "/guides/cost-centre-reporting"],
|
||||
]}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,87 @@
|
||||
import Link from "next/link";
|
||||
import { Band, CtaBand, PageHead, SiteNav, body, h2, h3, kicker, small } from "@/components/site";
|
||||
|
||||
export const metadata = {
|
||||
title: "How it works",
|
||||
description: "Issue, replenish, receive — the three steps a linen room runs on, in a hospital, an aged-care home or a clinic, and what a morning at the counter actually looks like.",
|
||||
alternates: { canonical: "/how-it-works" },
|
||||
};
|
||||
|
||||
const STEPS = [
|
||||
{ n: "1", t: "Issue", b: "Scan the garment, pick the staff member, record it. Their ward or wing, cost centre, allowance route and last-issued sizes are already on the record, so a repeat visit takes seconds.", h: "What happens behind it", d: ["Nobody goes past six sets held without a recorded override", "A manager’s signed approval draws down as sets go over", "A credit slip prints for the rest of what was signed for", "The issue values at unit cost against the ward or clinic"] },
|
||||
{ n: "2", t: "Replenish", b: "Every shelf issue feeds a draft supplier order, grouped by supplier. Review it, add the supplier’s order number, send. Nothing you issue goes unreplaced.", h: "What you get", d: ["A draft built from real movement, not guesswork", "Reorder flags before a size runs out", "A printable purchase order with your codes", "Order number, invoice and tracking held together"] },
|
||||
{ n: "3", t: "Receive", b: "Tick lines off the box as they arrive. Price-check against the order, then send each line to the shelf or to a staff pickup.", h: "And when the box is short", d: ["Shorts split to a back order automatically", "Staff lines join the pickup call list", "Shelf lines update on-hand immediately", "The variance against the invoice is recorded"] },
|
||||
];
|
||||
|
||||
const DAY = [
|
||||
["07:40", "Open the dashboard. Three orders open, one overdue at six days, seven sizes at or below reorder."],
|
||||
["08:05", "Two nurses at the counter. Scan, pick, issue — both walk away with their sets and a printed slip."],
|
||||
["09:30", "A box arrives. Receive it line by line, one item short; the back order writes itself."],
|
||||
["11:00", "Work the pickup call list — two wards and the day-surgery unit. Mark contacted, print collection slips for the ones coming down."],
|
||||
["14:15", "Review the draft replenishment order, add the supplier’s reference, send."],
|
||||
["16:20", "Month end approaching: run the cost centre report and the journal CSV, ready for finance."],
|
||||
];
|
||||
|
||||
export default function HowItWorks() {
|
||||
return (
|
||||
<>
|
||||
<SiteNav current="how" />
|
||||
<PageHead
|
||||
kicker="How it works"
|
||||
title="Three steps, and the loop closes."
|
||||
lede="Issue, replenish, receive. Nothing leaves the shelf without a replacement drafted, and nothing arrives without a line to tick it against."
|
||||
/>
|
||||
|
||||
<Band pad="0 40px 0">
|
||||
{STEPS.map((s) => (
|
||||
<div key={s.n} className="tcm-rowgrid" style={{ display: "grid", gridTemplateColumns: "180px 1fr 1fr", gap: 40, padding: "48px 0", borderBottom: "1px solid var(--color-divider)" }}>
|
||||
<div>
|
||||
<div style={{ fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: "clamp(64px,8vw,120px)", lineHeight: 0.9, color: "var(--color-accent)" }}>{s.n}</div>
|
||||
<div style={{ width: 60, height: 4, background: "var(--color-text)", marginTop: 14 }} />
|
||||
</div>
|
||||
<div>
|
||||
<h2 style={{ ...h3, margin: 0 }}>{s.t}</h2>
|
||||
<p style={{ ...body, margin: "12px 0 0", maxWidth: "44ch" }}>{s.b}</p>
|
||||
</div>
|
||||
<div style={{ borderLeft: "2px solid var(--color-text)", paddingLeft: 28 }}>
|
||||
<div style={{ ...kicker, color: "var(--color-neutral-700)" }}>{s.h}</div>
|
||||
<div style={{ marginTop: 12 }}>
|
||||
{s.d.map((d) => (
|
||||
<div key={d} style={{ display: "flex", gap: 12, padding: "7px 0", fontSize: 15, lineHeight: 1.6, color: "var(--color-neutral-800)" }}>
|
||||
<span style={{ width: 7, height: 7, background: "var(--color-accent)", flex: "none", marginTop: 8 }} />{d}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
<div style={{ height: 20 }} />
|
||||
</Band>
|
||||
|
||||
{/* Full-bleed photo band */}
|
||||
<section style={{ borderBottom: "2px solid var(--color-text)", height: "clamp(300px,34vw,460px)", overflow: "hidden" }}>
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img className="grayscale" src="/photos/tc-photo-housekeeping.jpg" alt="" aria-hidden="true" style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "center 40%", display: "block" }} />
|
||||
</section>
|
||||
|
||||
<Band tone="surface">
|
||||
<div style={kicker}>A morning at the counter</div>
|
||||
<h2 style={{ ...h2, marginTop: 12 }}>What an ordinary Tuesday looks like.</h2>
|
||||
<div style={{ marginTop: 30 }}>
|
||||
{DAY.map(([t, w]) => (
|
||||
<div key={t} className="tcm-rowgrid" style={{ display: "grid", gridTemplateColumns: "140px 1fr", gap: 24, padding: "16px 0", borderBottom: "1px solid var(--color-divider)" }}>
|
||||
<div style={{ fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: 19, color: "var(--color-accent-700)" }}>{t}</div>
|
||||
<div style={{ fontSize: 15.5, lineHeight: 1.65, color: "var(--color-neutral-800)" }}>{w}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div style={{ display: "flex", gap: 12, marginTop: 30, flexWrap: "wrap", alignItems: "center" }}>
|
||||
<Link href="/demo" data-umami-event="open-demo" data-umami-event-placement="how-it-works" className="btn btn-primary">Open the working demo</Link>
|
||||
<span style={small}>Try the same flow with demonstration data.</span>
|
||||
</div>
|
||||
</Band>
|
||||
|
||||
<CtaBand />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
import { SiteFooter } from "@/components/site";
|
||||
import Analytics from "@/components/Analytics";
|
||||
import JsonLd from "@/components/JsonLd";
|
||||
import { graph, organization, website } from "@/lib/schema";
|
||||
|
||||
// Route group: no URL segment. Wraps every public marketing page in the same shell so the nav and
|
||||
// footer are defined once. The nav itself is rendered per page so it can mark the active link.
|
||||
|
||||
// These pages are prerendered. Two things in them move on their own: the footer's copyright year,
|
||||
// and — once, on the day plans go live — the price on every page that states one (lib/plans-live.ts).
|
||||
// A minute keeps the pages served from the prerender for every reader while letting the console's
|
||||
// plans switch reach the site without a deploy.
|
||||
export const revalidate = 60;
|
||||
export default function SiteLayout({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<div style={{ fontFamily: "var(--font-body)", color: "var(--color-text)", background: "var(--color-bg)", minHeight: "100vh", display: "flex", flexDirection: "column" }}>
|
||||
{/* The link has to be the first focusable thing on the page, so it lives here rather than in
|
||||
SiteNav. Its target is the page heading — PageHead carries id="content" — because each
|
||||
page renders its own nav inside `children` to mark the active link, so a target on this
|
||||
wrapper would land above the nav and skip nothing. */}
|
||||
<a className="skip-link" href="#content">Skip to content</a>
|
||||
<main style={{ flex: 1 }}>{children}</main>
|
||||
<SiteFooter />
|
||||
<Analytics site="marketing" />
|
||||
{/* Who this is and what site it is. Stated once, on the shell every public page uses. */}
|
||||
<JsonLd data={graph(organization, website)} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
import LegalDoc from "@/components/LegalDoc";
|
||||
import { DOC_META } from "@/lib/legal";
|
||||
|
||||
const M = DOC_META["About & Contact"];
|
||||
export const metadata = { title: M.title, description: M.desc, alternates: { canonical: M.path } };
|
||||
|
||||
export default function Page() {
|
||||
return <LegalDoc name="About & Contact" />;
|
||||
}
|
||||
@@ -0,0 +1,189 @@
|
||||
import Link from "next/link";
|
||||
import JsonLd from "@/components/JsonLd";
|
||||
import { graph, softwareApplication } from "@/lib/schema";
|
||||
import { Band, CtaBand, SiteNav, body, h2, kicker, small, wrap } from "@/components/site";
|
||||
import { PRICES } from "@/lib/plan";
|
||||
import { plansLive } from "@/lib/plans-live";
|
||||
import { COMMUNITY } from "@/lib/edition";
|
||||
import { redirect } from "next/navigation";
|
||||
|
||||
export const metadata = { alternates: { canonical: "/" } };
|
||||
|
||||
const CARDS = [
|
||||
{ k: "Know", t: "What’s on the shelf", b: "On-hand by size, updated as you issue, and flagged before a size runs out on you." },
|
||||
{ k: "Prove", t: "Where it went", b: "Every garment against the staff member who took it, dated, on a slip they signed." },
|
||||
{ k: "Charge", t: "The right ward or clinic", b: "Issues carry the wearer’s cost centre at the price you paid, so the journal is already written." },
|
||||
];
|
||||
|
||||
const LOOP = [
|
||||
{ n: "1", t: "Issue", b: "Scan the garment, pick the staff member, done. Their ward or clinic, cost centre and last sizes are already there, so a repeat visit takes seconds.", pad: 0 },
|
||||
{ n: "2", t: "Replenish", b: "What you take off the shelf lands on a draft order for that supplier. Check it, add their order number, send. Nothing you issue goes quietly unreplaced.", pad: 36 },
|
||||
{ n: "3", t: "Receive", b: "Tick lines off against the invoice as you unpack, then send each one to the shelf or to whoever is waiting. A short delivery becomes a back order on its own.", pad: 72 },
|
||||
];
|
||||
|
||||
const row: React.CSSProperties = { display: "flex", justifyContent: "space-between", padding: "8px 0", borderBottom: "1px solid var(--color-divider)", fontSize: 13 };
|
||||
|
||||
export default async function Home() {
|
||||
// A Community instance is the product, not the website: its front door is the sign-in.
|
||||
if (COMMUNITY) redirect("/auth");
|
||||
const live = await plansLive();
|
||||
return (
|
||||
<>
|
||||
{/* The product, with its price as it stands today, on the page that is actually about it. */}
|
||||
<JsonLd data={graph(softwareApplication(live))} />
|
||||
<SiteNav />
|
||||
|
||||
{/* Hero: full-bleed greyscale photograph with a solid ink panel flush left over it. */}
|
||||
<section style={{ position: "relative", borderBottom: "2px solid var(--color-text)", minHeight: "clamp(440px,50vw,640px)", display: "flex", alignItems: "stretch" }}>
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img className="grayscale" src="/photos/tc-photo-ward.jpg" alt="" aria-hidden="true" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", objectPosition: "center 30%" }} />
|
||||
<div style={{ ...wrap, position: "relative", zIndex: 2, display: "flex", alignItems: "flex-start" }}>
|
||||
{/* The panel sizes to its widest line rather than a fixed 760: the headline scales to 84px,
|
||||
where "ACCOUNTED FOR." is 753px and was breaking out of the box onto the photograph
|
||||
from 1440px up. Hugging the content means the ink always contains the words. */}
|
||||
<div style={{ background: "var(--color-text)", color: "#fff", width: "fit-content", maxWidth: "min(880px, 100%)", padding: "clamp(32px,6vw,52px) clamp(20px,5vw,48px) clamp(56px,9vw,104px)" }}>
|
||||
<div style={{ ...kicker, color: "var(--color-accent-300)", display: "flex", alignItems: "center", gap: 10 }}>
|
||||
<span style={{ width: 28, height: 3, background: "var(--color-accent)" }} />{live ? "For hospitals, aged care and clinics" : "Free for hospitals, aged care and clinics"}
|
||||
</div>
|
||||
<h1 style={{ fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: "clamp(30px,7.2vw,84px)", lineHeight: 0.95, letterSpacing: "-0.035em", textTransform: "uppercase", margin: "24px 0 0" }}>Every garment out the door, accounted for.</h1>
|
||||
<p style={{ fontSize: 18, lineHeight: 1.6, color: "var(--color-neutral-200)", maxWidth: "48ch", margin: "24px 0 0" }}>ThreadCount follows a garment from the shelf, to the person wearing it, to the order that puts another one back.</p>
|
||||
<div style={{ display: "flex", gap: 12, marginTop: 30, flexWrap: "wrap" }}>
|
||||
<Link href="/demo" data-umami-event="open-demo" data-umami-event-placement="hero" className="btn" style={{ background: "#fff", color: "var(--color-accent-700)", border: "2px solid #fff", fontWeight: 700 }}>Open the working demo</Link>
|
||||
<Link href="/how-it-works" className="btn" style={{ background: "transparent", color: "#fff", border: "2px solid #fff", fontWeight: 700 }}>How it works</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Card row pulls up over the hero's bottom padding. */}
|
||||
<section style={{ background: "var(--color-bg)" }}>
|
||||
<div style={{ ...wrap, position: "relative", zIndex: 5 }}>
|
||||
<div className="tcm-3col tcm-pullup" style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", border: "2px solid var(--color-text)", background: "var(--color-bg)", marginTop: -58 }}>
|
||||
{CARDS.map((c, i) => (
|
||||
<div key={c.k} style={{ padding: "26px 28px 30px", borderRight: i < 2 ? "1px solid var(--color-divider)" : undefined }}>
|
||||
<div style={kicker}>{c.k}</div>
|
||||
<div style={{ fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: 24, letterSpacing: "-0.02em", marginTop: 10 }}>{c.t}</div>
|
||||
<p style={{ fontSize: 14.5, lineHeight: 1.65, color: "var(--color-neutral-800)", margin: "8px 0 0" }}>{c.b}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Proposition split */}
|
||||
<Band pad="110px 40px clamp(64px,7vw,88px)">
|
||||
<div className="tcm-split" style={{ display: "grid", gridTemplateColumns: "1.25fr 1fr", gap: 64 }}>
|
||||
<h2 style={h2}>One coordinator can run the whole room from a phone.</h2>
|
||||
<div>
|
||||
<p style={{ ...body, margin: 0 }}>Scan the garment, pick the staff member, record it. The order to replace it starts itself, the cost lands on the right ward, wing or clinic, and the month-end pack is a button rather than a weekend.</p>
|
||||
<Link href="/features" style={{ display: "inline-block", marginTop: 22, textDecoration: "none", fontSize: 14, fontWeight: 800, letterSpacing: "0.04em", textTransform: "uppercase", color: "var(--color-text)", borderBottom: "3px solid var(--color-accent)", paddingBottom: 3 }}>See everything it does</Link>
|
||||
</div>
|
||||
</div>
|
||||
</Band>
|
||||
|
||||
{/* The loop, with the designed vertical stagger */}
|
||||
<Band tone="surface">
|
||||
<div style={kicker}>The loop</div>
|
||||
<div className="tcm-3col tcm-stagger" style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 40, marginTop: 28 }}>
|
||||
{LOOP.map((l) => (
|
||||
<div key={l.n} style={{ paddingTop: l.pad }}>
|
||||
<div style={{ fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: 88, lineHeight: 1, color: "var(--color-neutral-300)" }}>{l.n}</div>
|
||||
<div style={{ borderTop: "4px solid var(--color-accent)", paddingTop: 12, marginTop: 6, fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: 22, display: "inline-block" }}>{l.t}</div>
|
||||
<p style={{ fontSize: 15, lineHeight: 1.7, color: "var(--color-neutral-800)", margin: "10px 0 0", maxWidth: "38ch" }}>{l.b}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Band>
|
||||
|
||||
{/* Pricing band */}
|
||||
<Band>
|
||||
<div className="tcm-split" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 56, alignItems: "center" }}>
|
||||
<div>
|
||||
<div style={kicker}>Pricing</div>
|
||||
{live
|
||||
? <div style={{ fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: "clamp(44px,7vw,104px)", lineHeight: 0.9, letterSpacing: "-0.04em", textTransform: "uppercase", marginTop: 10 }}>Free to run.<br />Paid to host.</div>
|
||||
: <div style={{ fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: "clamp(80px,13vw,190px)", lineHeight: 0.82, letterSpacing: "-0.04em", textTransform: "uppercase", marginTop: 10 }}>Free</div>}
|
||||
</div>
|
||||
<div>
|
||||
<p style={{ fontSize: "clamp(17px,1.9vw,22px)", lineHeight: 1.55, color: "var(--color-neutral-800)", margin: 0 }}>
|
||||
{live
|
||||
? `Every feature in every edition. Run it yourself for nothing, or have it hosted from $${PRICES.hostedAnnual.toLocaleString("en-AU")} a year — free for a room under ${PRICES.freeStaff} staff records.`
|
||||
: "No licence, no per-device charge, no per-user charge. Every feature, every report, everyone in the room."}
|
||||
</p>
|
||||
<Link href="/pricing" style={{ display: "inline-block", marginTop: 20, textDecoration: "none", fontSize: 14, fontWeight: 800, letterSpacing: "0.04em", textTransform: "uppercase", color: "var(--color-text)", borderBottom: "3px solid var(--color-accent)", paddingBottom: 3 }}>{live ? "The plans" : "What free covers"}</Link>
|
||||
</div>
|
||||
</div>
|
||||
</Band>
|
||||
|
||||
{/* Recreated product UI */}
|
||||
<Band tone="surface">
|
||||
<div style={kicker}>On the screen</div>
|
||||
<h2 style={{ ...h2, marginTop: 12 }}>The whole counter on one screen.</h2>
|
||||
<div className="table-wrap" style={{ marginTop: 30 }}>
|
||||
<div style={{ border: "2px solid var(--color-text)", background: "var(--color-bg)", minWidth: 620 }}>
|
||||
<div style={{ display: "flex", alignItems: "center", gap: 8, padding: "10px 16px", borderBottom: "2px solid var(--color-text)" }}>
|
||||
<span style={{ width: 9, height: 9, border: "2px solid var(--color-text)" }} />
|
||||
<span style={{ width: 9, height: 9, border: "2px solid var(--color-text)" }} />
|
||||
<span style={{ width: 9, height: 9, background: "var(--color-accent)" }} />
|
||||
<span style={{ ...kicker, color: "var(--color-neutral-700)", fontSize: 11, marginLeft: 10 }}>ThreadCount — Dashboard</span>
|
||||
<span style={{ marginLeft: "auto", fontSize: 11, color: "var(--color-neutral-600)" }}>Signed in · Coordinator</span>
|
||||
</div>
|
||||
<div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", borderBottom: "2px solid var(--color-text)" }}>
|
||||
{[["Orders", "3 open", "1 overdue — NL-48211, 6 days", true], ["Stock", "$18,240", "7 sizes at or below reorder", false], ["Staff", "212 active", "14 issues recorded this week", false]].map(([k, v, s, red], i) => (
|
||||
<div key={String(k)} style={{ padding: "18px 22px", borderRight: i < 2 ? "1px solid var(--color-divider)" : undefined }}>
|
||||
<div style={{ ...kicker, color: "var(--color-neutral-700)", fontSize: 10 }}>{k}</div>
|
||||
<div style={{ fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: 30, marginTop: 4 }}>{v}</div>
|
||||
<div style={{ fontSize: 12, color: red ? "var(--color-accent-700)" : "var(--color-neutral-700)", fontWeight: red ? 600 : 400 }}>{s}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div style={{ display: "grid", gridTemplateColumns: "3fr 2fr" }}>
|
||||
<div style={{ padding: "16px 22px", borderRight: "1px solid var(--color-divider)" }}>
|
||||
<div style={{ ...kicker, color: "var(--color-text)", fontSize: 11, borderBottom: "2px solid var(--color-text)", paddingBottom: 6 }}>Awaiting pickup — call list</div>
|
||||
{[["K. Osei · Softshell Jacket M", "16 days", "tag tag-accent", "Contacted"], ["T. Nguyen · Polo Shirt L ×2", "4 days", "tag tag-neutral", "Call"], ["R. Patel · Cargo Pant 88R", "1 day", "tag tag-neutral", "Call"]].map(([n, d, cls, act]) => (
|
||||
<div key={String(n)} style={{ display: "flex", gap: 12, alignItems: "center", padding: "8px 0", borderBottom: "1px solid var(--color-divider)", fontSize: 13 }}>
|
||||
<b style={{ flex: 1 }}>{n}</b><span className={String(cls)}>{d}</span><span className="tag tag-outline">{act}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div style={{ padding: "16px 22px" }}>
|
||||
<div style={{ ...kicker, color: "var(--color-text)", fontSize: 11, borderBottom: "2px solid var(--color-text)", paddingBottom: 6 }}>Reorder flags</div>
|
||||
{[["RN Scrub Top · S", "2 left"], ["Chef Jacket · L", "0 left"], ["Security Polo · XL", "3 left"]].map(([n, v]) => (
|
||||
<div key={n} style={row}><span>{n}</span><b style={{ color: "var(--color-accent-700)" }}>{v}</b></div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ ...small, marginTop: 14 }}>Inventory, issuing, ordering, stocktakes and reports all work the same way, so there is only one thing to learn.</div>
|
||||
</Band>
|
||||
|
||||
{/* The guides. Someone arriving from a search for their problem rather than for a product
|
||||
should find the useful writing without hunting for it — and someone weighing this up
|
||||
wants evidence the person behind it knows the job. These do both. */}
|
||||
<Band>
|
||||
<div style={kicker}>Guides</div>
|
||||
<h2 style={{ ...h2, marginTop: 12 }}>Written from the counter, not the brochure.</h2>
|
||||
<p style={{ ...body, marginTop: 16, maxWidth: "58ch" }}>
|
||||
Notes on running a linen room — in a hospital, an aged-care home or a clinic — that are useful whether or not you ever use ThreadCount.
|
||||
Take the method and use a clipboard if that’s what you have.
|
||||
</p>
|
||||
<div className="tcm-2col" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", columnGap: 56, rowGap: 0, marginTop: 24 }}>
|
||||
{[
|
||||
["How to run a uniform stocktake", "/guides/uniform-stocktake"],
|
||||
["Where the uniforms actually go", "/guides/uniform-loss"],
|
||||
["Charging uniforms to the right cost centre", "/guides/cost-centre-reporting"],
|
||||
["Entitlements and manager approvals", "/guides/manager-approvals"],
|
||||
].map(([label, href]) => (
|
||||
<Link key={href} href={href} style={{ textDecoration: "none", color: "var(--color-text)", borderBottom: "1px solid var(--color-divider)", padding: "18px 0", display: "flex", alignItems: "baseline", gap: 14 }}>
|
||||
<span style={{ fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: 18 }}>{label}</span>
|
||||
<span aria-hidden style={{ marginLeft: "auto", color: "var(--color-accent)", fontWeight: 800 }}>→</span>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</Band>
|
||||
|
||||
<CtaBand title="I built this for my own linen room." lede="I coordinate uniforms at a hospital, and I got tired of a spreadsheet that never matched the shelf. If your room has the same problem, it’s yours to use." />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,195 @@
|
||||
import Link from "next/link";
|
||||
import type { Metadata } from "next";
|
||||
import { Band, CtaBand, SiteNav, body, h2, h3, kicker, small, wrap } from "@/components/site";
|
||||
import { PRICES } from "@/lib/plan";
|
||||
import { plansLive } from "@/lib/plans-live";
|
||||
|
||||
/* Two pages in one file, and which one renders is decided by the console's plans switch, not by a
|
||||
* deploy — see lib/plans-live.ts for why. The first is the page as it stood while ThreadCount was
|
||||
* free, kept word for word: its promises are the reason the second page reads the way it does.
|
||||
* The founder's sentence under "Why …" is the same on both; only the heading's object moves. */
|
||||
|
||||
export async function generateMetadata(): Promise<Metadata> {
|
||||
const live = await plansLive();
|
||||
return live
|
||||
? { title: "Pricing", description: `ThreadCount is free to run yourself and free to host for rooms under ${PRICES.freeStaff} staff records. Hosting a facility is $${PRICES.hostedAnnual} a year. Every feature is in every edition.`, alternates: { canonical: "/pricing" } }
|
||||
: { title: "Pricing", description: "ThreadCount is free. No licence, no per-device charge, no per-user charge, and no tier above this one holding the useful parts back.", alternates: { canonical: "/pricing" } };
|
||||
}
|
||||
|
||||
const INCLUDED = [
|
||||
{ t: "Every person, every device", b: "Access is per person and costs nothing, so the counter, the ward or wing, and the coordinator’s phone can all be signed in at once." },
|
||||
{ t: "Every feature", b: "Issuing, ordering, receiving, stocktakes, all nine report tabs and the month-end pack. There is no locked tier." },
|
||||
{ t: "Every record, exportable", b: "Every report and register exports as CSV. One backup file carries the whole facility out. Nothing is held back to make leaving hard." },
|
||||
];
|
||||
const COVERED = [
|
||||
"Unlimited staff records", "Unlimited garments and sizes", "Unlimited issues and receipts",
|
||||
"Scanning by USB scanner, or by phone camera where the browser reads one", "Draft replenishment orders", "Printable purchase orders and slips",
|
||||
"Stocktakes with blind counting", "All nine report tabs", "Journal CSV for finance", "The one-click month-end pack",
|
||||
];
|
||||
const HONEST = [
|
||||
{ q: "Is there a paid tier coming?", a: "Nothing is planned. If that ever changes, the rooms using it will hear before the website does." },
|
||||
{ q: "What’s the catch?", a: "It’s maintained by one person alongside a day job. That’s the honest limitation — not a cost, but a support surface worth discussing before you commit a whole site to it." },
|
||||
{ q: "Do we need to buy hardware?", a: "No. It runs on the phones and computers the room already has. A USB scanner speeds up the counter but isn’t required." },
|
||||
{ q: "What about hosting costs?", a: "There is nothing for you to pay. If your facility needs it hosted inside their own environment, that’s a conversation worth having early." },
|
||||
];
|
||||
|
||||
/* ---------- the page once plans are live ---------- */
|
||||
const P = PRICES;
|
||||
const money = (n: number) => `$${n.toLocaleString("en-AU")}`;
|
||||
const PLANS = [
|
||||
{
|
||||
name: "Community", price: "$0", per: "", who: "Run it on your own server. The source is published; every feature is in it.",
|
||||
rows: ["Everything, no ceiling", "Your Postgres, your backups", "Your own single sign-on broker, if you want one", "A public issue tracker"],
|
||||
cta: ["Read the install guide", "/getting-started"], lead: false,
|
||||
},
|
||||
{
|
||||
name: "Hosted", price: money(P.hostedMonthly), per: "a facility, a month", who: `Or ${money(P.hostedAnnual)} a year. Free for a room under ${P.freeStaff} staff records.`,
|
||||
rows: ["Everything", "Australian hosting, nightly backups kept 35 days", "Point-in-time restore", "Single sign-on set up for you", "Email support, next business day"],
|
||||
cta: ["Start a 60-day trial", "/auth?mode=signup"], lead: true,
|
||||
},
|
||||
{
|
||||
name: "Health Service", price: money(P.healthServiceAnnual), per: "a year", who: `Up to ${P.healthServiceFacilities} facilities, then ${money(P.healthServiceExtra)} each.`,
|
||||
rows: ["Everything, across every site", "One sign-in, switch between facilities", "Roll-up reports and a shared catalogue", "Named support, same business day", "Invoice, purchase order, security questionnaire"],
|
||||
cta: ["Talk about a pilot", "/contact"], lead: false,
|
||||
},
|
||||
];
|
||||
const HONEST_LIVE = [
|
||||
{ q: "Is there a locked tier?", a: "No. Community, Hosted and Health Service run the same code. The differences are who runs it, how long the backups are kept, and how many sites it covers." },
|
||||
{ q: "We signed up when it was free. What changes?", a: "Nothing. Every facility created before this page changed stays on the free hosted plan, with everything, for as long as it exists. That was promised here, and it is written into the terms." },
|
||||
{ q: `Why ${P.freeStaff} staff records?`, a: "It is roughly where a room stops being one person and a cupboard and starts being a job. A clinic, a dental practice or a small home sits under it and pays nothing; a hospital ward is over it on day one." },
|
||||
{ q: "What happens if we stop paying?", a: "The facility goes read-only after a fortnight’s grace. Every report, export and the full backup keep working. Nothing is deleted, and writing starts again when the invoice is paid." },
|
||||
{ q: "How do we pay?", a: "By invoice, annually, against your purchase order. Prices are in Australian dollars before GST." },
|
||||
{ q: "What’s the catch?", a: "It is still maintained by one person alongside a day job. Hosted buys a response time; it does not buy a team." },
|
||||
];
|
||||
|
||||
function FreePage() {
|
||||
return (
|
||||
<>
|
||||
<section style={{ background: "var(--color-accent-600)", color: "#fff", borderBottom: "2px solid var(--color-text)" }}>
|
||||
<div style={{ ...wrap, padding: "52px 40px 56px" }}>
|
||||
<div style={{ ...kicker, color: "#fff" }}>Pricing</div>
|
||||
<h1 style={{ fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: "clamp(52px,7vw,104px)", lineHeight: 0.9, letterSpacing: "-0.04em", textTransform: "uppercase", margin: "12px 0 0" }}>Free</h1>
|
||||
<p style={{ fontSize: 17.5, lineHeight: 1.6, maxWidth: "46ch", marginTop: 20 }}>No licence. No per-device charge. No per-user charge. That is the whole page.</p>
|
||||
</div>
|
||||
</section>
|
||||
<Band>
|
||||
<h2 style={h2}>What free actually covers.</h2>
|
||||
<p style={{ ...body, marginTop: 16, maxWidth: "56ch" }}>Everything. There is no tier above this one holding the useful parts back.</p>
|
||||
<div className="tcm-3col" style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 0, marginTop: 34, border: "2px solid var(--color-text)" }}>
|
||||
{INCLUDED.map((c, i) => (
|
||||
<div key={c.t} style={{ padding: "26px 28px 30px", borderRight: i < 2 ? "1px solid var(--color-divider)" : undefined }}>
|
||||
<h3 style={{ ...h3, fontSize: 20 }}>{c.t}</h3>
|
||||
<p style={{ fontSize: 14.5, lineHeight: 1.65, color: "var(--color-neutral-800)", marginTop: 10 }}>{c.b}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Band>
|
||||
<Band tone="surface">
|
||||
<div style={kicker}>In the box</div>
|
||||
<div className="tcm-2col" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0 56px", marginTop: 20 }}>
|
||||
{COVERED.map((c) => (
|
||||
<div key={c} style={{ display: "flex", gap: 14, alignItems: "baseline", padding: "12px 0", borderBottom: "1px solid var(--color-divider)", fontSize: 15.5 }}>
|
||||
<span style={{ color: "var(--color-accent)", fontWeight: 800 }}>✓</span>{c}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Band>
|
||||
<Band>
|
||||
<div className="tcm-split" style={{ display: "grid", gridTemplateColumns: "1fr 1.15fr", gap: 56 }}>
|
||||
<div>
|
||||
<h2 style={h2}>Why it costs nothing.</h2>
|
||||
<p style={{ ...body, marginTop: 18, maxWidth: "40ch" }}>It was built by a hospital uniform coordinator to solve their own room’s problem. It already exists, it already works, and charging for it was never the point.</p>
|
||||
</div>
|
||||
<div>
|
||||
{HONEST.map((h) => (
|
||||
<div key={h.q} style={{ padding: "18px 0", borderBottom: "1px solid var(--color-divider)" }}>
|
||||
<div style={{ fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: 17 }}>{h.q}</div>
|
||||
<p style={{ fontSize: 15, lineHeight: 1.65, color: "var(--color-neutral-800)", margin: "7px 0 0", maxWidth: "56ch" }}>{h.a}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</Band>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function LivePage() {
|
||||
return (
|
||||
<>
|
||||
<section style={{ background: "var(--color-accent-600)", color: "#fff", borderBottom: "2px solid var(--color-text)" }}>
|
||||
<div style={{ ...wrap, padding: "52px 40px 56px" }}>
|
||||
<div style={{ ...kicker, color: "#fff" }}>Pricing</div>
|
||||
<h1 style={{ fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: "clamp(40px,6vw,88px)", lineHeight: 0.92, letterSpacing: "-0.04em", textTransform: "uppercase", margin: "12px 0 0", maxWidth: "12ch" }}>Free to run. Paid to host.</h1>
|
||||
<p style={{ fontSize: 17.5, lineHeight: 1.6, maxWidth: "50ch", marginTop: 20 }}>Every feature is in every edition. You pay for someone to keep it running, backed up and supported. A room under {P.freeStaff} staff records pays nothing either way.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Band pad="0 40px">
|
||||
<div className="tcm-3col" style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 0, borderLeft: "2px solid var(--color-text)", borderRight: "2px solid var(--color-text)" }}>
|
||||
{PLANS.map((p, i) => (
|
||||
<div key={p.name} style={{ padding: "30px 26px 34px", borderRight: i < 2 ? "1px solid var(--color-divider)" : undefined, background: p.lead ? "var(--color-surface)" : undefined, display: "flex", flexDirection: "column" }}>
|
||||
<h2 style={{ ...h3, fontSize: 22 }}>{p.name}</h2>
|
||||
<div style={{ fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: 44, letterSpacing: "-0.04em", lineHeight: 1, marginTop: 16 }}>{p.price}</div>
|
||||
{p.per && <div style={{ ...small, marginTop: 6 }}>{p.per}</div>}
|
||||
<p style={{ fontSize: 14, lineHeight: 1.6, color: "var(--color-neutral-800)", margin: "10px 0 0", minHeight: 44 }}>{p.who}</p>
|
||||
<ul style={{ listStyle: "none", padding: 0, margin: "18px 0 0", flex: 1 }}>
|
||||
{p.rows.map((r) => <li key={r} style={{ padding: "8px 0", borderBottom: "1px solid var(--color-divider)", fontSize: 14.5 }}>{r}</li>)}
|
||||
</ul>
|
||||
<Link href={p.cta[1]} className="btn" data-umami-event={p.lead ? "signup-cta" : undefined} data-umami-event-placement={p.lead ? "pricing-hosted" : undefined} style={{ marginTop: 22, textAlign: "center", fontWeight: 700, ...(p.lead ? { background: "var(--color-text)", color: "var(--color-bg)", border: "2px solid var(--color-text)" } : { border: "2px solid var(--color-text)", color: "var(--color-text)" }) }}>{p.cta[0]}</Link>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Band>
|
||||
|
||||
<Band tone="surface">
|
||||
<div style={kicker}>In every edition</div>
|
||||
<div className="tcm-2col" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0 56px", marginTop: 20 }}>
|
||||
{COVERED.map((c) => (
|
||||
<div key={c} style={{ display: "flex", gap: 14, alignItems: "baseline", padding: "12px 0", borderBottom: "1px solid var(--color-divider)", fontSize: 15.5 }}>
|
||||
<span style={{ color: "var(--color-accent)", fontWeight: 800 }}>✓</span>{c}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<p style={{ ...small, marginTop: 18, maxWidth: "60ch" }}>“Unlimited staff records” is true of Community, Hosted Facility and Health Service. The free hosted room holds {P.freeStaff}; past that it is a Hosted facility.</p>
|
||||
</Band>
|
||||
|
||||
<Band>
|
||||
<div className="tcm-split" style={{ display: "grid", gridTemplateColumns: "1fr 1.15fr", gap: 56 }}>
|
||||
<div>
|
||||
<h2 style={h2}>Why the software costs nothing.</h2>
|
||||
<p style={{ ...body, marginTop: 18, maxWidth: "40ch" }}>It was built by a hospital uniform coordinator to solve their own room’s problem. It already exists, it already works, and charging for it was never the point.</p>
|
||||
<p style={{ ...body, marginTop: 14, maxWidth: "40ch" }}>What costs money is running it for other people, carefully: the servers, the backups, and being the person who answers.</p>
|
||||
</div>
|
||||
<div>
|
||||
{HONEST_LIVE.map((h) => (
|
||||
<div key={h.q} style={{ padding: "18px 0", borderBottom: "1px solid var(--color-divider)" }}>
|
||||
<div style={{ fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: 17 }}>{h.q}</div>
|
||||
<p style={{ fontSize: 15, lineHeight: 1.65, color: "var(--color-neutral-800)", margin: "7px 0 0", maxWidth: "56ch" }}>{h.a}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</Band>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default async function Pricing() {
|
||||
const live = await plansLive();
|
||||
return (
|
||||
<>
|
||||
<SiteNav current="pricing" />
|
||||
{live ? <LivePage /> : <FreePage />}
|
||||
<Band tone="ink">
|
||||
<h2 style={{ ...h2, color: "#fff" }}>Nothing to sign. Open it and look.</h2>
|
||||
<p style={{ fontSize: 16.5, lineHeight: 1.7, color: "var(--color-neutral-200)", maxWidth: "50ch", marginTop: 18 }}>The demo runs on demonstration data. Nothing you do in it touches a real record.</p>
|
||||
<div style={{ display: "flex", gap: 12, marginTop: 28, flexWrap: "wrap" }}>
|
||||
<Link href="/demo" data-umami-event="open-demo" data-umami-event-placement="pricing" className="btn" style={{ background: "#fff", color: "var(--color-accent-700)", border: "2px solid #fff", fontWeight: 700 }}>Open the working demo</Link>
|
||||
<Link href="/getting-started" className="btn" style={{ background: "transparent", color: "#fff", border: "2px solid #fff", fontWeight: 700 }}>Getting started</Link>
|
||||
</div>
|
||||
</Band>
|
||||
<CtaBand />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
import LegalDoc from "@/components/LegalDoc";
|
||||
import { DOC_META } from "@/lib/legal";
|
||||
|
||||
const M = DOC_META["Privacy Policy"];
|
||||
export const metadata = { title: M.title, description: M.desc, alternates: { canonical: M.path } };
|
||||
|
||||
export default function Page() {
|
||||
return <LegalDoc name="Privacy Policy" />;
|
||||
}
|
||||
@@ -0,0 +1,112 @@
|
||||
import Link from "next/link";
|
||||
import { Band, CtaBand, SPLIT_PAD, SiteNav, body, h2, h3, kicker, small, wrap } from "@/components/site";
|
||||
|
||||
export const metadata = {
|
||||
title: "Reporting",
|
||||
description: "Cost centre spend, a journal laid out for upload, valuation, shrinkage, exceptions and supplier spend — each prints or exports as CSV.",
|
||||
alternates: { canonical: "/reporting" },
|
||||
};
|
||||
|
||||
// One entry per tab on the Reports screen, in the order they appear there. The month-end pack is
|
||||
// not one of them — it is a button that gathers six of these into one printed document — so it is
|
||||
// named under the list rather than counted as a tab.
|
||||
const REPORTS = [
|
||||
["01", "Cost centre spend", "What each department wore, at unit cost, for any month."],
|
||||
["02", "Journal export", "One debit per cost centre, formatted for upload."],
|
||||
["03", "Top stock", "The fifteen most-issued garments of the month, each with its share and its year-to-date count."],
|
||||
["04", "Stock valuation", "On-hand value by garment, at unit cost, dated."],
|
||||
["05", "Shrinkage", "Every stocktake this financial year, and what each one cost or found."],
|
||||
["06", "Exceptions", "Anyone over their operational limit, or over the monthly threshold you set."],
|
||||
["07", "Supplier spend", "Orders placed, what they came to, and the invoice numbers against them."],
|
||||
["08", "Approvals", "Manager approvals still outstanding: sets approved, collected and remaining."],
|
||||
["09", "Pre-loved", "Free reissues and what they saved, hand-ins, and what is in the pool."],
|
||||
];
|
||||
|
||||
const TABLE: [string, string, string, string][] = [
|
||||
["Willow Ward · RGH-3010", "14", "$412.60", "+$96"],
|
||||
["ICU · RGH-4010", "9", "$268.20", "−$31"],
|
||||
["Operational Support", "11", "$343.75", "+$12"],
|
||||
];
|
||||
|
||||
export default function Reporting() {
|
||||
return (
|
||||
<>
|
||||
<SiteNav current="reporting" />
|
||||
|
||||
{/* Split header: type on the ground, a fixed accent column at the right. */}
|
||||
<section style={{ borderBottom: "2px solid var(--color-text)" }}>
|
||||
<div style={{ ...wrap, padding: 0, display: "grid", gridTemplateColumns: "1fr 320px" }} className="tcm-split">
|
||||
<div className={SPLIT_PAD} style={{ paddingTop: "clamp(56px,7vw,88px)", paddingRight: 40, paddingBottom: "clamp(52px,6vw,76px)" }}>
|
||||
<div style={kicker}>Reporting</div>
|
||||
<h1 style={{ fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: "clamp(38px,5.2vw,78px)", lineHeight: 0.98, letterSpacing: "-0.035em", margin: "18px 0 0" }}>When finance asks, it’s already done.</h1>
|
||||
<p style={{ ...body, fontSize: 17, maxWidth: "52ch", margin: "22px 0 0" }}>Every issue lands on the wearer’s cost centre at the price you actually paid, so the month-end numbers are already written by the time anyone asks for them.</p>
|
||||
</div>
|
||||
<div style={{ background: "var(--color-accent-600)", color: "#fff", padding: "44px 32px", display: "flex", flexDirection: "column", justifyContent: "flex-end" }}>
|
||||
<div style={{ fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: 64, lineHeight: 1 }}>9</div>
|
||||
<div style={{ ...kicker, color: "#fff", marginTop: 6 }}>Report tabs</div>
|
||||
<div style={{ width: 60, height: 4, background: "#fff", marginTop: 16 }} />
|
||||
<div style={{ fontSize: 13.5, lineHeight: 1.6, marginTop: 16 }}>Each one prints or exports as CSV, and six of them gather into the one-click month-end pack.</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Band tone="surface">
|
||||
<div className="tcm-split" style={{ display: "grid", gridTemplateColumns: "1.15fr 1fr", gap: 56, alignItems: "center" }}>
|
||||
<div className="table-wrap">
|
||||
<div style={{ border: "2px solid var(--color-text)", background: "var(--color-bg)", minWidth: 420 }}>
|
||||
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "10px 16px", borderBottom: "2px solid var(--color-text)" }}>
|
||||
<b style={{ fontSize: 13 }}>Cost centre report — August</b>
|
||||
<span style={{ display: "flex", gap: 6 }}><span className="tag tag-outline">Print</span><span className="tag tag-accent">CSV</span></span>
|
||||
</div>
|
||||
<div style={{ padding: "8px 16px 14px", fontSize: 13 }}>
|
||||
<div style={{ display: "grid", gridTemplateColumns: "2fr 1fr 1fr 1fr", gap: 10, padding: "6px 0", borderBottom: "2px solid var(--color-text)", ...kicker, color: "var(--color-neutral-700)", fontSize: 10 }}>
|
||||
<span>Cost centre</span><span style={{ textAlign: "right" }}>Items</span><span style={{ textAlign: "right" }}>Spend</span><span style={{ textAlign: "right" }}>Δ</span>
|
||||
</div>
|
||||
{TABLE.map(([cc, n, sp, d]) => (
|
||||
<div key={cc} style={{ display: "grid", gridTemplateColumns: "2fr 1fr 1fr 1fr", gap: 10, padding: "7px 0", borderBottom: "1px solid var(--color-divider)" }}>
|
||||
<span>{cc}</span><span style={{ textAlign: "right" }}>{n}</span><span style={{ textAlign: "right" }}><b>{sp}</b></span>
|
||||
<span style={{ textAlign: "right", color: d.startsWith("+") ? "var(--color-accent-700)" : "var(--color-neutral-700)" }}>{d}</span>
|
||||
</div>
|
||||
))}
|
||||
<div style={{ display: "grid", gridTemplateColumns: "2fr 1fr 1fr 1fr", gap: 10, padding: "8px 0 0", fontWeight: 800 }}>
|
||||
<span>TOTAL</span><span style={{ textAlign: "right" }}>34</span><span style={{ textAlign: "right" }}>$1,024.55</span><span />
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ padding: "10px 16px", borderTop: "2px solid var(--color-text)", fontSize: 12, color: "var(--color-neutral-700)" }}>Journal: one debit per cost centre, GL 631020, ready for upload</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2 style={h2}>The journal comes out formatted.</h2>
|
||||
<p style={{ ...body, marginTop: 18, maxWidth: "44ch" }}>One debit line per cost centre against your GL account, in the layout your finance system expects. No workbook, no pivot table, no retyping.</p>
|
||||
</div>
|
||||
</div>
|
||||
</Band>
|
||||
|
||||
<Band>
|
||||
<div style={kicker}>What you can pull</div>
|
||||
<div className="tcm-2col" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0 56px", marginTop: 24 }}>
|
||||
{REPORTS.map(([n, t, b]) => (
|
||||
<div key={n} style={{ display: "grid", gridTemplateColumns: "44px 1fr", gap: 16, padding: "18px 0", borderBottom: "1px solid var(--color-divider)" }}>
|
||||
<div style={{ fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: 15, color: "var(--color-neutral-600)" }}>{n}</div>
|
||||
<div>
|
||||
<div style={{ fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: 17 }}>{t}</div>
|
||||
<div style={{ fontSize: 14.5, lineHeight: 1.6, color: "var(--color-neutral-800)", marginTop: 4 }}>{b}</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Band>
|
||||
|
||||
<Band tone="ink">
|
||||
<h2 style={{ ...h2, color: "#fff" }}>One click at month end.</h2>
|
||||
<p style={{ fontSize: 16.5, lineHeight: 1.7, color: "var(--color-neutral-200)", maxWidth: "52ch", marginTop: 18 }}>The month-end pack prints one dated document: cost centre spend, the journal, top stock, shrinkage, and anything still outstanding — over a summary carrying the month’s supplier spend and the value of the stock on the shelf.</p>
|
||||
<div style={{ display: "flex", gap: 12, marginTop: 28, flexWrap: "wrap" }}>
|
||||
<Link href="/demo" data-umami-event="open-demo" data-umami-event-placement="reporting" className="btn" style={{ background: "#fff", color: "var(--color-accent-700)", border: "2px solid #fff", fontWeight: 700 }}>See the reports in the demo</Link>
|
||||
</div>
|
||||
<div style={{ ...small, color: "var(--color-neutral-300)", marginTop: 14 }}>Nothing is re-priced after the fact, so a report you ran in August still says in December what it said in August.</div>
|
||||
</Band>
|
||||
|
||||
<CtaBand />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,85 @@
|
||||
import Link from "next/link";
|
||||
import { Band, CtaBand, PageHead, SiteNav, h2, h3, kicker, small } from "@/components/site";
|
||||
|
||||
export const metadata = {
|
||||
title: "Roadmap",
|
||||
description: "What’s being built next for ThreadCount, and what has shipped since the list was written. No dates — the order is intent, and it came from linen rooms asking.",
|
||||
alternates: { canonical: "/roadmap" },
|
||||
};
|
||||
|
||||
// Still to come. No dates, because a date on a public page is a promise the room can't always keep.
|
||||
const PLANNED = [
|
||||
{ t: "Automatic reorder triggers at par level", b: "Set a par level per garment and size, and let the draft order raise itself when the shelf drops below it." },
|
||||
{ t: "Offline mode for the linen room", b: "Keep issuing and counting when the wireless drops out, and sync when it returns." },
|
||||
{ t: "Staff self-service issue kiosk", b: "A screen at the counter where staff identify themselves and collect what has been approved, without queueing for the coordinator." },
|
||||
{ t: "Cost per staff member reporting", b: "Spend by individual as well as by ward, for the conversations about outliers." },
|
||||
{ t: "Laundry contractor reconciliation", b: "Match what went out against what came back, and put a number on what the contract is losing." },
|
||||
{ t: "Multi-site and group-wide rollout", b: "Several stores running independently — a hospital’s linen rooms, an aged-care group’s homes, a network of clinics — with combined reporting above them." },
|
||||
];
|
||||
|
||||
/* Four things that were on this list have since been built, and leaving them tagged "Planned"
|
||||
* made the page contradict /features and /faq — a reader could not tell which one to believe. They
|
||||
* stay on the page rather than quietly disappearing from it, because a room that read the list
|
||||
* three months ago should be able to see what happened to it, but they are out of the numbering
|
||||
* of what is still to come. Size history was listed here as "size and fit history"; what shipped is
|
||||
* the size half — the record knows the last size somebody was issued, not whether it fitted them —
|
||||
* so the title says size only rather than promising a fit note nobody writes. The two apps are the
|
||||
* one honest half-state: both are built, and the Play listings are in review, so the tag says
|
||||
* exactly that until the listings are public. */
|
||||
const DONE = [
|
||||
{ t: "Barcode and QR scanning on phone", b: "Scanning for issuing, counting and receiving, using the supplier codes already on the garment. Chrome and Edge read a barcode from the camera; on an iPhone or iPad, and in Firefox, the code is typed or read with a USB scanner.", tag: "Shipped" },
|
||||
{ t: "Size history per person", b: "Every staff member carries the size of the last one they were issued, garment by garment, so the counter opens on what they had rather than on a guess — on the coordinator’s desk and in the staff app both.", tag: "Shipped" },
|
||||
{ t: "Bulk import from existing spreadsheets", b: "The staff register, catalogue, locations and opening stock come in from CSV, each with a template to fill.", tag: "Shipped" },
|
||||
{ t: "Android app", b: "Two of them: the counter app for the linen room, and a staff app for the people who wear the uniform. Both are built and the Play listings are in review.", tag: "In review" },
|
||||
];
|
||||
|
||||
function Row({ n, t, b, tag, accent }: { n: string; t: string; b: string; tag: string; accent?: boolean }) {
|
||||
return (
|
||||
<div className="tcm-rowgrid" style={{ display: "grid", gridTemplateColumns: "64px 1fr 150px", gap: 28, padding: "26px 0", borderBottom: "1px solid var(--color-divider)", alignItems: "start" }}>
|
||||
<div style={{ fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: 20, color: "var(--color-neutral-600)" }}>{n}</div>
|
||||
<div>
|
||||
<h2 style={{ ...h3, fontSize: "clamp(18px,1.9vw,23px)", margin: 0 }}>{t}</h2>
|
||||
<p style={{ fontSize: 15, lineHeight: 1.65, color: "var(--color-neutral-800)", margin: "7px 0 0", maxWidth: "58ch" }}>{b}</p>
|
||||
</div>
|
||||
<div style={{ textAlign: "right" }}><span className={"tag " + (accent ? "tag-accent" : "tag-outline")}>{tag}</span></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function Roadmap() {
|
||||
return (
|
||||
<>
|
||||
<SiteNav />
|
||||
<PageHead
|
||||
kicker="Roadmap"
|
||||
title="What’s being built next."
|
||||
tone="ink"
|
||||
lede="No dates. The list below is in order of intent, and what has been built since it was written is at the foot of the page."
|
||||
/>
|
||||
|
||||
<Band pad="0 40px 0">
|
||||
{PLANNED.map((it, i) => <Row key={it.t} n={String(i + 1).padStart(2, "0")} t={it.t} b={it.b} tag="Planned" />)}
|
||||
<div style={{ height: 22 }} />
|
||||
</Band>
|
||||
|
||||
<Band>
|
||||
<div style={kicker}>Since this list was written</div>
|
||||
<div style={{ marginTop: 10 }}>
|
||||
{DONE.map((it) => <Row key={it.t} n="—" t={it.t} b={it.b} tag={it.tag} accent={it.tag === "Shipped"} />)}
|
||||
</div>
|
||||
</Band>
|
||||
|
||||
<Band tone="surface">
|
||||
<div className="tcm-split" style={{ display: "grid", gridTemplateColumns: "1fr auto", gap: 32, alignItems: "center" }}>
|
||||
<div>
|
||||
<h2 style={{ ...h2, fontSize: "clamp(22px,2.6vw,34px)" }}>Something you need that isn’t on this list?</h2>
|
||||
<div style={{ ...small, marginTop: 10 }}>The list came from real linen rooms asking. Yours can change the order of it.</div>
|
||||
</div>
|
||||
<Link href="/contact" className="btn btn-primary">Tell me what’s missing</Link>
|
||||
</div>
|
||||
</Band>
|
||||
|
||||
<CtaBand />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,75 @@
|
||||
import Link from "next/link";
|
||||
import { Band, CtaBand, PageHead, SiteNav, body, h2, h3, kicker } from "@/components/site";
|
||||
|
||||
export const metadata = {
|
||||
title: "Security & data",
|
||||
description: "ThreadCount records who was issued what, which makes it a staff record. Where it lives, who can see it, and what to agree with information security first.",
|
||||
alternates: { canonical: "/security" },
|
||||
};
|
||||
|
||||
const PILLARS = [
|
||||
{ t: "Your facility’s records", b: "Every issue, count and order belongs to the facility that entered it. Nothing is pooled with another site." },
|
||||
{ t: "Two roles, clear limits", b: "Admin manages settings, catalogue and pricing. Issuer issues, counts and receives. Prices and history cannot be edited by accident." },
|
||||
{ t: "History is kept", b: "Issues, receipts and counts are written with the date and the person who recorded them, and stay that way." },
|
||||
{ t: "Export whenever", b: "Every report and register exports as CSV, the ward request queue included. One backup file takes the whole facility out at once, so the data is never held hostage in the product." },
|
||||
];
|
||||
|
||||
const PLAIN = [
|
||||
"Only the people you invite can see your room’s records.",
|
||||
"Staff names, the ward or clinic they work on, and cost centres are stored to run the loop, and for nothing else.",
|
||||
"No garment data is sold, shared, or used to train anything.",
|
||||
"Slips print for a signature on paper. A ward-round handover can be signed on screen instead, and that signature is stored with the delivery, shown only to your facility, and deleted with the record.",
|
||||
"Deactivating a staff member removes them from issuing while keeping the historical record intact for finance.",
|
||||
"You can export the whole facility to one file and walk away at any point.",
|
||||
];
|
||||
|
||||
export default function Security() {
|
||||
return (
|
||||
<>
|
||||
<SiteNav />
|
||||
<PageHead
|
||||
kicker="Security and data"
|
||||
tone="accent"
|
||||
title={<span style={{ maxWidth: "17ch", display: "block" }}>It holds staff names. So it holds them carefully.</span>}
|
||||
lede="ThreadCount records who was issued what. That makes it a staff record, and it is built to be treated as one."
|
||||
/>
|
||||
|
||||
<Band>
|
||||
<div className="tcm-pillars tcm-2col" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 0, border: "2px solid var(--color-text)" }}>
|
||||
{PILLARS.map((p, i) => (
|
||||
<div key={p.t} style={{ padding: "26px 28px 30px", borderRight: i % 2 === 0 ? "1px solid var(--color-divider)" : undefined, borderBottom: i < 2 ? "1px solid var(--color-divider)" : undefined }}>
|
||||
<h3 style={{ ...h3, fontSize: 20 }}>{p.t}</h3>
|
||||
<p style={{ fontSize: 14.5, lineHeight: 1.65, color: "var(--color-neutral-800)", marginTop: 10 }}>{p.b}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Band>
|
||||
|
||||
<Band tone="surface">
|
||||
<div style={kicker}>In plain English</div>
|
||||
<h2 style={{ ...h2, marginTop: 12 }}>The commitments, without the certification language nobody reads.</h2>
|
||||
<div style={{ marginTop: 28 }}>
|
||||
{PLAIN.map((p) => (
|
||||
<div key={p} style={{ display: "flex", gap: 16, padding: "14px 0", borderBottom: "1px solid var(--color-divider)", fontSize: 16, lineHeight: 1.6 }}>
|
||||
<span style={{ width: 8, height: 8, background: "var(--color-accent)", flex: "none", marginTop: 8 }} />{p}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Band>
|
||||
|
||||
<Band>
|
||||
<div style={{ border: "2px solid var(--color-text)", padding: "28px 32px 32px" }}>
|
||||
<div style={kicker}>Before you deploy</div>
|
||||
<h2 style={{ ...h2, fontSize: "clamp(22px,2.6vw,34px)", marginTop: 10 }}>Take it to your information security team early.</h2>
|
||||
<p style={{ ...body, marginTop: 14, maxWidth: "58ch" }}>Hosting location, backup arrangement and retention period should be agreed with your facility before real staff data goes in — with an information security team in a hospital, or with whoever signs off on systems in a smaller practice. Ask, and you’ll get the answers in writing.</p>
|
||||
<div style={{ display: "flex", gap: 12, marginTop: 24, flexWrap: "wrap" }}>
|
||||
<Link href="/contact" className="btn btn-primary">Ask a security question</Link>
|
||||
<Link href="/data-security" className="btn btn-secondary">Read the data security policy</Link>
|
||||
</div>
|
||||
</div>
|
||||
</Band>
|
||||
|
||||
<CtaBand />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,77 @@
|
||||
import Link from "next/link";
|
||||
import { Band, CtaBand, PageHead, SiteNav, body, h2, h3, kicker } from "@/components/site";
|
||||
import { plansLive } from "@/lib/plans-live";
|
||||
|
||||
export const metadata = {
|
||||
title: "Support",
|
||||
description: "Support comes from the person who wrote the software — what that means in practice, and what it honestly doesn’t cover.",
|
||||
alternates: { canonical: "/support" },
|
||||
};
|
||||
|
||||
// The handoff stated these as commitments ("Same day", "2 working days", "A week"). They are phrased
|
||||
// here as what is aimed for, because one person alongside a day job can't guarantee a clock.
|
||||
const TIERS = [
|
||||
{ k: "Can’t issue", time: "Usually same day", t: "The counter is stopped", b: "Anything stopping the room issuing, receiving or counting gets looked at first — normally the day it’s reported." },
|
||||
{ k: "Something’s wrong", time: "Usually a couple of days", t: "It works, but not properly", b: "A number that looks off, a report that won’t export, a slip printing the wrong field." },
|
||||
{ k: "Can it do", time: "Usually within the week", t: "Questions and requests", b: "How-to questions and feature requests. Requests go on the roadmap in the order rooms ask for them." },
|
||||
];
|
||||
|
||||
const HONEST = [
|
||||
"Support is one person, alongside a day job. Nights and weekends aren’t covered.",
|
||||
"There is no phone line. Everything goes through the contact form so it’s written down.",
|
||||
"None of the times above is a contractual service level — they’re what usually happens, not a promise.",
|
||||
"If your facility needs guaranteed response times in writing, have that conversation before a whole site depends on it.",
|
||||
];
|
||||
|
||||
export default async function Support() {
|
||||
const live = await plansLive();
|
||||
return (
|
||||
<>
|
||||
<SiteNav />
|
||||
<PageHead
|
||||
kicker="Support"
|
||||
title="One person answers. No ticket maze."
|
||||
lede="Support comes from the person who wrote the software. That means straight answers, and it means being honest about how fast they arrive."
|
||||
/>
|
||||
|
||||
<Band>
|
||||
<div className="tcm-3col" style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 0, border: "2px solid var(--color-text)" }}>
|
||||
{TIERS.map((t, i) => (
|
||||
<div key={t.k} style={{ padding: "26px 28px 32px", borderRight: i < 2 ? "1px solid var(--color-divider)" : undefined }}>
|
||||
<div style={kicker}>{t.k}</div>
|
||||
<div style={{ fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: "clamp(22px,2.4vw,30px)", letterSpacing: "-0.02em", marginTop: 10 }}>{t.time}</div>
|
||||
<div style={{ width: 44, height: 4, background: "var(--color-accent)", margin: "14px 0 14px" }} />
|
||||
<h3 style={{ ...h3, fontSize: 18 }}>{t.t}</h3>
|
||||
<p style={{ fontSize: 14.5, lineHeight: 1.65, color: "var(--color-neutral-800)", marginTop: 8 }}>{t.b}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Band>
|
||||
|
||||
<Band tone="surface">
|
||||
<div style={kicker}>Being straight about it</div>
|
||||
<h2 style={{ ...h2, marginTop: 12 }}>{live ? "ThreadCount is maintained by one person." : "ThreadCount is free and maintained by one person."}</h2>
|
||||
<p style={{ ...body, marginTop: 14, maxWidth: "56ch" }}>Here’s what that honestly means, so nobody finds out the hard way.</p>
|
||||
<div style={{ marginTop: 26 }}>
|
||||
{HONEST.map((h) => (
|
||||
<div key={h} style={{ display: "flex", gap: 16, padding: "14px 0", borderBottom: "1px solid var(--color-divider)", fontSize: 16, lineHeight: 1.6 }}>
|
||||
<span style={{ width: 8, height: 8, background: "var(--color-accent)", flex: "none", marginTop: 8 }} />{h}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Band>
|
||||
|
||||
<Band>
|
||||
<div className="tcm-split" style={{ display: "grid", gridTemplateColumns: "1fr auto", gap: 32, alignItems: "center" }}>
|
||||
<h2 style={{ ...h2, fontSize: "clamp(22px,2.6vw,34px)" }}>Stuck on something? Say what it is.</h2>
|
||||
<div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
|
||||
<Link href="/contact" className="btn btn-primary">Get in touch</Link>
|
||||
<Link href="/faq" className="btn btn-secondary">Check the FAQ</Link>
|
||||
</div>
|
||||
</div>
|
||||
</Band>
|
||||
|
||||
<CtaBand />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
import LegalDoc from "@/components/LegalDoc";
|
||||
import { DOC_META } from "@/lib/legal";
|
||||
|
||||
const M = DOC_META["Terms of Service"];
|
||||
export const metadata = { title: M.title, description: M.desc, alternates: { canonical: M.path } };
|
||||
|
||||
export default function Page() {
|
||||
return <LegalDoc name="Terms of Service" />;
|
||||
}
|
||||
@@ -0,0 +1,65 @@
|
||||
import { NextResponse } from "next/server";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
/* Digital Asset Links — what lets the staff app open threadcount.tech/my links itself.
|
||||
*
|
||||
* Without this file, tapping "Approve" in a manager's email opens Chrome rather than the app they
|
||||
* installed. Android fetches it over HTTPS and checks that the certificate it names matches the
|
||||
* one the installed app was signed with.
|
||||
*
|
||||
* The fingerprint has to be **Play's app-signing certificate**, not the upload key — with Play App
|
||||
* Signing, Google re-signs the bundle, so the certificate on the device is theirs. Find it at
|
||||
* Play Console → Test and release → Setup → App signing → "SHA-256 certificate fingerprint", and
|
||||
* put it in the environment as ANDROID_APP_FINGERPRINTS. Several may be listed, comma-separated:
|
||||
* both apps, or an old and a new key during a rotation.
|
||||
*
|
||||
* Served from an env var rather than a static file on purpose. The fingerprint is only knowable
|
||||
* after the first upload, and a deploy is a cheaper way to add it than a code change — and if it
|
||||
* is ever rotated, nothing here needs editing.
|
||||
*
|
||||
* With no fingerprint configured this returns an empty statement list, which is the honest answer:
|
||||
* no app is authorised to handle these links yet, and Android falls back to the browser exactly as
|
||||
* it does today. It never returns a malformed or guessed fingerprint.
|
||||
*/
|
||||
const PACKAGES: { name: string; label: string }[] = [
|
||||
{ name: "tech.threadcount.staff", label: "ANDROID_APP_FINGERPRINTS_STAFF" },
|
||||
{ name: "tech.threadcount.app", label: "ANDROID_APP_FINGERPRINTS_COUNTER" },
|
||||
];
|
||||
|
||||
function fingerprints(specific: string): string[] {
|
||||
const raw = process.env[specific] || process.env.ANDROID_APP_FINGERPRINTS || "";
|
||||
return raw
|
||||
.split(",")
|
||||
.map((f) => f.trim().toUpperCase())
|
||||
// A SHA-256 fingerprint is 32 colon-separated hex pairs. Anything else is a paste error, and
|
||||
// shipping it would just make Android's verification fail silently.
|
||||
.filter((f) => /^([0-9A-F]{2}:){31}[0-9A-F]{2}$/.test(f));
|
||||
}
|
||||
|
||||
export async function GET() {
|
||||
const statements = PACKAGES.flatMap((p) => {
|
||||
const fps = fingerprints(p.label);
|
||||
if (!fps.length) return [];
|
||||
return [{
|
||||
relation: [
|
||||
// Opens threadcount.tech/my links in the app instead of the browser.
|
||||
"delegate_permission/common.handle_all_urls",
|
||||
// Credential sharing: the site and the app are one account system, so a password saved on
|
||||
// either autofills on the other. A staff member sets theirs once, on whichever surface the
|
||||
// printed slip's link happened to open on, and shouldn't have to remember which.
|
||||
"delegate_permission/common.get_login_creds",
|
||||
],
|
||||
target: { namespace: "android_app", package_name: p.name, sha256_cert_fingerprints: fps },
|
||||
}];
|
||||
});
|
||||
|
||||
return NextResponse.json(statements, {
|
||||
headers: {
|
||||
"content-type": "application/json",
|
||||
// Android caches this; an hour is short enough that adding a fingerprint takes effect the
|
||||
// same day, and long enough that it isn't fetched on every link tap.
|
||||
"cache-control": "public, max-age=3600",
|
||||
},
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,121 @@
|
||||
import { NextRequest, NextResponse } from "next/server";
|
||||
import bcrypt from "bcryptjs";
|
||||
import QRCode from "qrcode";
|
||||
import { prisma } from "@/lib/db";
|
||||
import { currentUser } from "@/lib/session";
|
||||
import { sameOriginJson } from "@/lib/csrf";
|
||||
import { allow, clientIp } from "@/lib/ratelimit";
|
||||
import {
|
||||
decryptSecret, encryptSecret, hashRecoveryCode, newRecoveryCodes, newTotpSecret, otpauthUrl, totpVerify,
|
||||
} from "@/lib/totp";
|
||||
import { recordAuthEvent } from "@/lib/audit";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
/* Turning a second factor on and off, for your own account only.
|
||||
*
|
||||
* Three steps rather than one, because a secret that is stored the moment it is generated leaves
|
||||
* an account half-enrolled if the person never finishes — and then their next sign-in asks for
|
||||
* codes from an app they never set up.
|
||||
*
|
||||
* setup — generate a secret and show the QR. Stored, but not yet in force.
|
||||
* enable — prove a code from it works, then switch it on and hand back recovery codes.
|
||||
* disable — password required, because turning a factor off is a privileged act.
|
||||
*/
|
||||
export async function GET() {
|
||||
const user = await currentUser();
|
||||
if (!user) return NextResponse.json({ error: "Not signed in" }, { status: 401 });
|
||||
const u = await prisma.user.findUnique({ where: { id: user.id }, select: { totpEnabledAt: true } });
|
||||
const left = await prisma.recoveryCode.count({ where: { userId: user.id, usedAt: null } });
|
||||
return NextResponse.json({ enabled: !!u?.totpEnabledAt, enabledAt: u?.totpEnabledAt ?? null, recoveryLeft: left });
|
||||
}
|
||||
|
||||
export async function POST(req: NextRequest) {
|
||||
const csrf = sameOriginJson(req);
|
||||
if (csrf) return NextResponse.json({ error: csrf }, { status: 403 });
|
||||
const user = await currentUser();
|
||||
if (!user) return NextResponse.json({ error: "Not signed in" }, { status: 401 });
|
||||
|
||||
const ip = clientIp(req.headers);
|
||||
if (!allow("2fa-manage:" + user.id, 30, 15 * 60 * 1000)) {
|
||||
return NextResponse.json({ error: "Too many attempts — try again in a few minutes." }, { status: 429 });
|
||||
}
|
||||
|
||||
// Turning a second factor on or off is one of the few changes to an account that leaves no trace
|
||||
// in the records themselves, so it is one of the few worth recording on its own.
|
||||
const actor = {
|
||||
facilityId: user.facilityId, userId: user.id,
|
||||
userName: `${user.first} ${user.last}`.trim() || user.email,
|
||||
};
|
||||
|
||||
let body: { action?: unknown; code?: unknown; password?: unknown };
|
||||
try { body = await req.json(); } catch { return NextResponse.json({ error: "Bad request" }, { status: 400 }); }
|
||||
const action = String(body.action ?? "");
|
||||
|
||||
const u = await prisma.user.findUnique({
|
||||
where: { id: user.id },
|
||||
select: { id: true, email: true, passwordHash: true, totpSecret: true, totpEnabledAt: true },
|
||||
});
|
||||
if (!u) return NextResponse.json({ error: "Not signed in" }, { status: 401 });
|
||||
|
||||
if (action === "setup") {
|
||||
if (u.totpEnabledAt) return NextResponse.json({ error: "Two-factor is already on for this account." }, { status: 400 });
|
||||
const secret = newTotpSecret();
|
||||
await prisma.user.update({ where: { id: u.id }, data: { totpSecret: encryptSecret(secret) } });
|
||||
const url = otpauthUrl(secret, u.email);
|
||||
// SVG, generated here rather than in the browser: it keeps a QR library out of the bundle that
|
||||
// ward phones download, and the secret never has to be handed to client-side code to render.
|
||||
const qr = await QRCode.toString(url, { type: "svg", margin: 1, width: 220, errorCorrectionLevel: "M" });
|
||||
recordAuthEvent(actor, "2fa:setup", ip);
|
||||
return NextResponse.json({ ok: true, secret, url, qr });
|
||||
}
|
||||
|
||||
if (action === "enable") {
|
||||
if (u.totpEnabledAt) return NextResponse.json({ error: "Two-factor is already on." }, { status: 400 });
|
||||
const secret = decryptSecret(u.totpSecret);
|
||||
if (!secret) return NextResponse.json({ error: "Start the setup again." }, { status: 400 });
|
||||
if (!totpVerify(secret, String(body.code ?? ""))) {
|
||||
return NextResponse.json({ error: "That code isn't right. Use the current one from your app." }, { status: 400 });
|
||||
}
|
||||
const codes = newRecoveryCodes();
|
||||
await prisma.$transaction(async (tx) => {
|
||||
await tx.user.update({ where: { id: u.id }, data: { totpEnabledAt: new Date() } });
|
||||
await tx.recoveryCode.deleteMany({ where: { userId: u.id } });
|
||||
await tx.recoveryCode.createMany({ data: codes.map((c) => ({ userId: u.id, codeHash: hashRecoveryCode(c) })) });
|
||||
});
|
||||
recordAuthEvent(actor, "2fa:enable", ip);
|
||||
// The only time these are ever readable. They are stored hashed, so there is no second chance.
|
||||
return NextResponse.json({ ok: true, codes });
|
||||
}
|
||||
|
||||
if (action === "disable") {
|
||||
if (!u.totpEnabledAt) return NextResponse.json({ ok: true });
|
||||
const pw = String(body.password ?? "");
|
||||
if (!pw || !(await bcrypt.compare(pw, u.passwordHash))) {
|
||||
return NextResponse.json({ error: "That password isn't right." }, { status: 401 });
|
||||
}
|
||||
await prisma.$transaction(async (tx) => {
|
||||
await tx.user.update({ where: { id: u.id }, data: { totpEnabledAt: null, totpSecret: "" } });
|
||||
await tx.recoveryCode.deleteMany({ where: { userId: u.id } });
|
||||
});
|
||||
recordAuthEvent(actor, "2fa:disable", ip);
|
||||
return NextResponse.json({ ok: true });
|
||||
}
|
||||
|
||||
if (action === "regenerate") {
|
||||
if (!u.totpEnabledAt) return NextResponse.json({ error: "Two-factor isn't on." }, { status: 400 });
|
||||
const pw = String(body.password ?? "");
|
||||
if (!pw || !(await bcrypt.compare(pw, u.passwordHash))) {
|
||||
return NextResponse.json({ error: "That password isn't right." }, { status: 401 });
|
||||
}
|
||||
const codes = newRecoveryCodes();
|
||||
await prisma.$transaction(async (tx) => {
|
||||
await tx.recoveryCode.deleteMany({ where: { userId: u.id } });
|
||||
await tx.recoveryCode.createMany({ data: codes.map((c) => ({ userId: u.id, codeHash: hashRecoveryCode(c) })) });
|
||||
});
|
||||
recordAuthEvent(actor, "2fa:regenerate", ip);
|
||||
return NextResponse.json({ ok: true, codes });
|
||||
}
|
||||
|
||||
return NextResponse.json({ error: "Unknown action" }, { status: 400 });
|
||||
}
|
||||
@@ -0,0 +1,58 @@
|
||||
import { NextRequest, NextResponse } from "next/server";
|
||||
import { prisma } from "@/lib/db";
|
||||
import { currentUser } from "@/lib/session";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
const PAGE = 100;
|
||||
|
||||
/* The audit trail, read back.
|
||||
*
|
||||
* Admin only, and scoped to the caller's own facility by the query rather than by a filter the
|
||||
* client sends — the client never gets to say which facility it wants. Paged by cursor rather
|
||||
* than offset so a busy room's log doesn't shift under you as new rows land while you read.
|
||||
*
|
||||
* The cursor is (timestamp, id), not timestamp alone. Prisma stores DateTime at millisecond
|
||||
* precision, and two events sharing a millisecond is ordinary rather than exotic — two coordinators
|
||||
* saving at once, or two ops committed inside one transaction. A strict `at < cursor` dropped every
|
||||
* row that shared the last one's millisecond, so the log looked complete with an event missing from
|
||||
* it, which is the one failure an audit trail cannot have.
|
||||
*/
|
||||
|
||||
/** `<iso>|<id>` — one opaque string, because the client only ever hands it straight back. */
|
||||
function readCursor(raw: string | null): { at: Date; id: string } | null {
|
||||
if (!raw) return null;
|
||||
const cut = raw.lastIndexOf("|");
|
||||
const iso = cut === -1 ? raw : raw.slice(0, cut);
|
||||
const id = cut === -1 ? "" : raw.slice(cut + 1);
|
||||
if (Number.isNaN(Date.parse(iso))) return null;
|
||||
return { at: new Date(iso), id: id.slice(0, 40) };
|
||||
}
|
||||
|
||||
export async function GET(req: NextRequest) {
|
||||
const user = await currentUser();
|
||||
if (!user) return NextResponse.json({ error: "Not signed in" }, { status: 401 });
|
||||
// SessionUser.role is the database enum ("ADMIN"), not the snapshot's display form ("Admin").
|
||||
if (user.role !== "ADMIN") return NextResponse.json({ error: "Admin only" }, { status: 403 });
|
||||
|
||||
const cursor = readCursor(req.nextUrl.searchParams.get("before"));
|
||||
|
||||
const rows = await prisma.auditEvent.findMany({
|
||||
where: {
|
||||
facilityId: user.facilityId,
|
||||
// Everything strictly older, plus the rest of the millisecond we stopped in the middle of.
|
||||
...(cursor ? { OR: [{ at: { lt: cursor.at } }, { at: cursor.at, id: { lt: cursor.id } }] } : {}),
|
||||
},
|
||||
orderBy: [{ at: "desc" }, { id: "desc" }],
|
||||
take: PAGE + 1,
|
||||
select: { id: true, at: true, userName: true, op: true, target: true },
|
||||
});
|
||||
|
||||
const more = rows.length > PAGE;
|
||||
const page = rows.slice(0, PAGE);
|
||||
const last = page[page.length - 1];
|
||||
return NextResponse.json({
|
||||
events: page.map((r) => ({ id: r.id, at: r.at.toISOString(), who: r.userName, op: r.op, target: r.target })),
|
||||
nextBefore: more && last ? `${last.at.toISOString()}|${last.id}` : null,
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,74 @@
|
||||
import { NextRequest, NextResponse } from "next/server";
|
||||
import { prisma } from "@/lib/db";
|
||||
import { pwVersion, setSessionCookie } from "@/lib/session";
|
||||
import { sameOriginJson } from "@/lib/csrf";
|
||||
import { allow, clientIp } from "@/lib/ratelimit";
|
||||
import { decryptSecret, hashRecoveryCode, totpVerify } from "@/lib/totp";
|
||||
import { readTicket } from "@/lib/twofactor";
|
||||
import { recordAuthEvent } from "@/lib/audit";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
/* Second step of sign-in: the code from the authenticator, or one recovery code.
|
||||
*
|
||||
* Rate limited hard. A six-digit code is one in a million per guess, which is only meaningful if
|
||||
* guessing is expensive — unthrottled, a million tries is minutes of work. */
|
||||
export async function POST(req: NextRequest) {
|
||||
const csrf = sameOriginJson(req);
|
||||
if (csrf) return NextResponse.json({ error: csrf }, { status: 403 });
|
||||
|
||||
const ip = clientIp(req.headers);
|
||||
let body: { ticket?: unknown; code?: unknown };
|
||||
try { body = await req.json(); } catch { return NextResponse.json({ error: "Bad request" }, { status: 400 }); }
|
||||
|
||||
const t = readTicket(String(body.ticket ?? ""));
|
||||
if (!t) return NextResponse.json({ error: "That sign-in has expired. Start again." }, { status: 400 });
|
||||
|
||||
// Per account and per address: one stolen ticket can't be brute-forced, and one machine can't
|
||||
// work through several accounts at once.
|
||||
if (!allow("2fa-user:" + t.uid, 10, 15 * 60 * 1000) || !allow("2fa-ip:" + ip, 300, 15 * 60 * 1000)) {
|
||||
return NextResponse.json({ error: "Too many attempts — try again in a few minutes." }, { status: 429 });
|
||||
}
|
||||
|
||||
const u = await prisma.user.findUnique({
|
||||
where: { id: t.uid },
|
||||
select: { id: true, facilityId: true, email: true, first: true, last: true, role: true, inactive: true, passwordHash: true, totpSecret: true, totpEnabledAt: true },
|
||||
});
|
||||
if (!u || u.inactive || !u.totpEnabledAt) {
|
||||
return NextResponse.json({ error: "That sign-in has expired. Start again." }, { status: 400 });
|
||||
}
|
||||
// The password changed between the two steps — the ticket is stale for the same reason a session
|
||||
// would be.
|
||||
if (pwVersion(u.passwordHash) !== t.pv) {
|
||||
return NextResponse.json({ error: "That sign-in has expired. Start again." }, { status: 400 });
|
||||
}
|
||||
|
||||
const raw = String(body.code ?? "").trim();
|
||||
const secret = decryptSecret(u.totpSecret);
|
||||
let good = !!secret && totpVerify(secret, raw);
|
||||
let usedRecovery = false;
|
||||
|
||||
if (!good && raw.replace(/[^A-Za-z0-9]/g, "").length >= 10) {
|
||||
// A recovery code. Single use: consumed in the same conditional update that finds it, so two
|
||||
// simultaneous attempts can't both spend it.
|
||||
const hash = hashRecoveryCode(raw);
|
||||
const hit = await prisma.recoveryCode.findFirst({ where: { userId: u.id, codeHash: hash, usedAt: null }, select: { id: true } });
|
||||
if (hit) {
|
||||
const consumed = await prisma.recoveryCode.updateMany({ where: { id: hit.id, usedAt: null }, data: { usedAt: new Date() } });
|
||||
good = consumed.count === 1;
|
||||
usedRecovery = good;
|
||||
}
|
||||
}
|
||||
|
||||
if (!good) return NextResponse.json({ error: "That code isn't right. Try the current one from your app." }, { status: 401 });
|
||||
|
||||
await setSessionCookie(u.id, u.passwordHash);
|
||||
// How they got in matters more here than anywhere else: a recovery code means the phone is gone,
|
||||
// and a run of them means something else is going on.
|
||||
recordAuthEvent(
|
||||
{ facilityId: u.facilityId, userId: u.id, userName: `${u.first} ${u.last}`.trim() || u.email },
|
||||
"auth:signin", ip, usedRecovery ? "recovery" : "totp",
|
||||
);
|
||||
const left = await prisma.recoveryCode.count({ where: { userId: u.id, usedAt: null } });
|
||||
return NextResponse.json({ ok: true, name: `${u.first} ${u.last}`, role: u.role, usedRecovery, recoveryLeft: left });
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
import { NextRequest, NextResponse } from "next/server";
|
||||
import { timingSafeEqual } from "crypto";
|
||||
import { resetDemo } from "@/lib/demo";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
// Called by the host's threadcount-demo-reset.timer every 20 minutes with the shared token.
|
||||
export async function POST(req: NextRequest) {
|
||||
const want = process.env.DEMO_RESET_TOKEN || "";
|
||||
const got = req.headers.get("x-demo-token") || "";
|
||||
if (!want || want.length !== got.length || !timingSafeEqual(Buffer.from(want), Buffer.from(got))) return NextResponse.json({ error: "Forbidden" }, { status: 403 });
|
||||
const f = await resetDemo();
|
||||
return NextResponse.json({ ok: true, facility: f.name, resetAt: f.demoResetAt });
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
import { NextRequest, NextResponse } from "next/server";
|
||||
import { COOKIE_NAME, currentUser, signSession } from "@/lib/session";
|
||||
import { allow, clientIp } from "@/lib/ratelimit";
|
||||
import { demoUserFor, ensureDemo } from "@/lib/demo";
|
||||
import { switches } from "@/lib/switches";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
// One-click entry into the shared demo facility. Redirects use a raw relative Location so the
|
||||
// proxy in front of the app can't rewrite the host.
|
||||
export async function GET(req: NextRequest) {
|
||||
if (!(await switches()).demoOpen) return NextResponse.json({ error: "The demo is switched off." }, { status: 404 });
|
||||
if (req.headers.get("sec-fetch-site") === "cross-site") return new NextResponse(null, { status: 303, headers: { Location: "/demo" } });
|
||||
const as = req.nextUrl.searchParams.get("as") === "issuer" ? "issuer" : "admin";
|
||||
// A link can't be used to swap a signed-in coordinator's real session for the demo (login CSRF).
|
||||
const cur = await currentUser();
|
||||
if (cur && !cur.isDemo) return new NextResponse(null, { status: 303, headers: { Location: "/demo?signedin=1" } });
|
||||
if (!allow("demo:" + clientIp(req.headers), 30, 10 * 60 * 1000)) return NextResponse.json({ error: "Too many requests — try again shortly." }, { status: 429 });
|
||||
const f = await ensureDemo();
|
||||
const u = demoUserFor(f, as);
|
||||
const res = new NextResponse(null, { status: 303, headers: { Location: "/app" } });
|
||||
res.cookies.set(COOKIE_NAME, signSession(u.id, u.passwordHash, 60 * 60 * 4), { httpOnly: true, sameSite: "lax", secure: process.env.NODE_ENV === "production", path: "/", maxAge: 60 * 60 * 4 });
|
||||
return res;
|
||||
}
|
||||
@@ -0,0 +1,80 @@
|
||||
import { NextRequest, NextResponse } from "next/server";
|
||||
import { prisma } from "@/lib/db";
|
||||
import { allow, clientIp, fail, over } from "@/lib/ratelimit";
|
||||
import { sameOriginJson } from "@/lib/csrf";
|
||||
import { verifyTurnstile } from "@/lib/turnstile";
|
||||
import { sendTo, transactionalConfigured } from "@/lib/mail";
|
||||
import { RESET_TTL_MS, newResetToken, resetEmail, resetUrl } from "@/lib/reset";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
/* Request a password reset.
|
||||
*
|
||||
* Before this existed a facility whose only admin forgot their password was locked out for good —
|
||||
* the sign-in screen told them to ask an admin, and they were the admin. Deleting the last admin
|
||||
* deletes the whole facility, so there was no way back in at all.
|
||||
*
|
||||
* The response is identical whether or not the address has an account. Anything else turns this
|
||||
* into a way to ask "does this hospital use ThreadCount, and is this person a coordinator there?"
|
||||
*/
|
||||
export async function POST(req: NextRequest) {
|
||||
const csrf = sameOriginJson(req);
|
||||
if (csrf) return NextResponse.json({ error: csrf }, { status: 403 });
|
||||
|
||||
const ip = clientIp(req.headers);
|
||||
let body: { email?: unknown; cfToken?: unknown };
|
||||
try { body = await req.json(); } catch { return NextResponse.json({ error: "Bad request" }, { status: 400 }); }
|
||||
const email = String(body.email ?? "").trim().toLowerCase().slice(0, 160);
|
||||
|
||||
// A slow ceiling per IP, so one machine can't walk a staff list to find out which addresses exist
|
||||
// by watching how long each request takes. The per-address ceiling deliberately lives further
|
||||
// down, past the bot check — see the note beside it.
|
||||
if (!allow("forgot-ip:" + ip, 60, 60 * 60 * 1000)) {
|
||||
return NextResponse.json({ ok: true });
|
||||
}
|
||||
|
||||
const cfErr = await verifyTurnstile(body.cfToken, ip);
|
||||
if (cfErr) return NextResponse.json({ error: cfErr }, { status: 400 });
|
||||
|
||||
if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) return NextResponse.json({ ok: true });
|
||||
|
||||
const user = await prisma.user.findUnique({ where: { email }, select: { id: true, first: true, inactive: true, ssoBreakGlass: true, facility: { select: { ssoRequired: true } } } });
|
||||
// A facility that requires single sign-on has no password door for most of its people, so a
|
||||
// reset link would be a way round its identity provider. Break-glass admins keep theirs. The
|
||||
// answer to the caller is the same either way.
|
||||
const ssoOnly = !!user && user.facility.ssoRequired && !user.ssoBreakGlass;
|
||||
if (user && !user.inactive && !ssoOnly) {
|
||||
// The per-address ceiling counts mail actually sent, not requests received, and it is only
|
||||
// consulted once the bot check has passed. Spent on requests, it handed a stranger a way to
|
||||
// hold a facility's only coordinator out of their own account: four anonymous posts with no
|
||||
// Turnstile token filled the bucket, and every later attempt by the coordinator was answered
|
||||
// with "a reset link is on its way" and no mail. Counted this way the only way to exhaust the
|
||||
// budget is to have four reset mails delivered to that same inbox, so whoever forgot their
|
||||
// password always has a working link waiting for them.
|
||||
const mailKey = "forgot-email:" + email;
|
||||
if (over(mailKey, 4, 60 * 60 * 1000)) {
|
||||
console.warn("[forgot] four reset mails already sent this hour — suppressing another for user", user.id);
|
||||
} else {
|
||||
const { token, tokenHash } = newResetToken();
|
||||
await prisma.$transaction(async (tx) => {
|
||||
// Asking again supersedes anything outstanding, so a forwarded older email goes dead.
|
||||
await tx.passwordReset.updateMany({
|
||||
where: { userId: user.id, usedAt: null },
|
||||
data: { usedAt: new Date() },
|
||||
});
|
||||
await tx.passwordReset.create({
|
||||
data: { userId: user.id, tokenHash, expiresAt: new Date(Date.now() + RESET_TTL_MS), requestIp: ip },
|
||||
});
|
||||
});
|
||||
const { subject, text } = resetEmail(user.first, resetUrl(token));
|
||||
const sent = await sendTo(email, subject, text);
|
||||
// Only a mail that left the building counts. A send that failed gave the coordinator nothing,
|
||||
// so charging them for it would shut them out for an hour over a mail outage.
|
||||
if (sent) fail(mailKey, 60 * 60 * 1000);
|
||||
else console.error("[forgot] reset requested but mail could not be sent for user", user.id);
|
||||
}
|
||||
}
|
||||
|
||||
// Told to the caller regardless, so the answer carries no information about the address.
|
||||
return NextResponse.json({ ok: true, mail: transactionalConfigured() });
|
||||
}
|
||||
@@ -0,0 +1,100 @@
|
||||
import { NextRequest, NextResponse } from "next/server";
|
||||
import bcrypt from "bcryptjs";
|
||||
import { prisma } from "@/lib/db";
|
||||
import { pwVersion, setSessionCookie } from "@/lib/session";
|
||||
import { mintTicket } from "@/lib/twofactor";
|
||||
import { sameOriginJson } from "@/lib/csrf";
|
||||
import { clientIp, fail, over } from "@/lib/ratelimit";
|
||||
import { signInStaff } from "@/lib/staffauth";
|
||||
import { verifyTurnstile } from "@/lib/turnstile";
|
||||
import { recordAuthEvent } from "@/lib/audit";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
// Simple in-memory throttle per IP+email (per process).
|
||||
const attempts = new Map<string, { n: number; t: number }>();
|
||||
|
||||
/** The trail names the person, not the address they typed — see lib/audit.ts. */
|
||||
const actorFor = (u: { id: string; facilityId: string; first: string; last: string; email: string }) =>
|
||||
({ facilityId: u.facilityId, userId: u.id, userName: `${u.first} ${u.last}`.trim() || u.email });
|
||||
|
||||
export async function POST(req: NextRequest) {
|
||||
const csrf = sameOriginJson(req); if (csrf) return NextResponse.json({ error: csrf }, { status: 403 });
|
||||
let body: { email?: string; password?: string; cfToken?: string };
|
||||
try { body = await req.json(); } catch { return NextResponse.json({ error: "Bad request" }, { status: 400 }); }
|
||||
const email = String(body.email || "").trim().toLowerCase().slice(0, 160);
|
||||
const password = String(body.password || "").slice(0, 200);
|
||||
// Spray protection independent of the per-(ip,email) counter below. Both buckets count only the
|
||||
// attempts that FAILED — a whole hospital signs in from one NAT address at shift change, and a
|
||||
// ceiling on attempts would have to lock that ward out to be worth anything against an attacker.
|
||||
const ipKey = clientIp(req.headers);
|
||||
if (over("login-ip:" + ipKey, 40, 15 * 60 * 1000) || (email && over("login-email:" + email, 25, 15 * 60 * 1000))) return NextResponse.json({ error: "Too many attempts — try again in 15 minutes." }, { status: 429 });
|
||||
if (!email || !password) return NextResponse.json({ error: "Enter your email and password." }, { status: 400 });
|
||||
|
||||
// nginx appends the real client IP last; earlier entries are client-supplied and spoofable.
|
||||
const xff = req.headers.get("x-forwarded-for")?.split(",").map((x) => x.trim()).filter(Boolean) || [];
|
||||
const ip = xff[xff.length - 1] || "local";
|
||||
if (attempts.size > 5000) for (const [kk, v] of attempts) if (Date.now() - v.t > 15 * 60 * 1000) attempts.delete(kk);
|
||||
const k = `${ip}|${email}`;
|
||||
const a = attempts.get(k);
|
||||
if (a && a.n >= 8 && Date.now() - a.t < 15 * 60 * 1000) return NextResponse.json({ error: "Too many attempts — try again in 15 minutes." }, { status: 429 });
|
||||
|
||||
const cfErr = await verifyTurnstile(body.cfToken, ipKey); if (cfErr) return NextResponse.json({ error: cfErr }, { status: 400 });
|
||||
const u = await prisma.user.findUnique({ where: { email } });
|
||||
/* One box, both kinds of account.
|
||||
*
|
||||
* A wearer reaches the product the way anyone else does — the home page, then Log in — and types
|
||||
* the details they set up in the staff app. So when this address has no coordinator account, the
|
||||
* register is asked before the answer is called wrong.
|
||||
*
|
||||
* A coordinator account always wins: it is the one with the counter, the orders and the register
|
||||
* behind it, and a coordinator who also wears a uniform can open their own record from inside the
|
||||
* app. One address therefore has one destination, every time.
|
||||
*
|
||||
* This is a lookup, not a second attempt. "Try the coordinator, and if that fails try the staff
|
||||
* one" would score a failure against every single staff sign-in, and these ceilings count
|
||||
* failures — behind one hospital's NAT address at shift change that is a locked-out ward.
|
||||
*/
|
||||
if (!u) {
|
||||
const s = await signInStaff(email, password, ipKey, false);
|
||||
if (s.kind === "ok") return NextResponse.json({ ok: true, name: s.name, staff: true });
|
||||
if (s.kind === "error") return NextResponse.json({ error: s.error }, { status: s.status });
|
||||
// `none`: no staff account either, so this falls through to the answer below, which counts the
|
||||
// failure once and says the same thing it has always said.
|
||||
}
|
||||
const ok = u ? await bcrypt.compare(password, u.passwordHash) : await bcrypt.compare(password, "$2b$12$C6UzMDM.H6dfI/f/IKcEeO5x3FvDS3kqB6r0Jt3g7Lz0vX4o0JZ1u");
|
||||
if (!u || !ok) {
|
||||
attempts.set(k, { n: (a && Date.now() - a.t < 15 * 60 * 1000 ? a.n : 0) + 1, t: Date.now() });
|
||||
fail("login-ip:" + ipKey, 15 * 60 * 1000);
|
||||
if (email) fail("login-email:" + email, 15 * 60 * 1000);
|
||||
// An address with no account here is recorded nowhere: there is no facility to file it under,
|
||||
// and a log of attempts on addresses that don't exist would be a list of other people's email
|
||||
// addresses that nobody asked us to keep.
|
||||
if (u) recordAuthEvent(actorFor(u), "auth:signin.failed", ipKey);
|
||||
return NextResponse.json({ error: "Email or password doesn’t match." }, { status: 401 });
|
||||
}
|
||||
attempts.delete(k);
|
||||
if (u.inactive) {
|
||||
// The right password on an account that has been taken away is worth knowing about.
|
||||
recordAuthEvent(actorFor(u), "auth:signin.refused", ipKey, "inactive");
|
||||
return NextResponse.json({ error: "This account has been deactivated. Ask an admin at your facility to reactivate it." }, { status: 403 });
|
||||
}
|
||||
const fac = await prisma.facility.findUnique({ where: { id: u.facilityId }, select: { isDemo: true, ssoEnabled: true, ssoRequired: true } });
|
||||
if (fac?.isDemo) return NextResponse.json({ error: "Demo accounts can’t log in here — open the demo from the home page." }, { status: 403 });
|
||||
// The facility has decided its people sign in through its own identity provider. The password
|
||||
// was right, and it is still refused — except for the admin the facility keeps as its fire
|
||||
// escape. The box sends them on to single sign-on rather than reporting a failure.
|
||||
if (fac?.ssoEnabled && fac.ssoRequired && !u.ssoBreakGlass) {
|
||||
recordAuthEvent(actorFor(u), "auth:signin.refused", ipKey, "sso required");
|
||||
return NextResponse.json({ error: "Your facility signs in with single sign-on.", ssoRequired: true }, { status: 403 });
|
||||
}
|
||||
// With a second factor on the account the password alone opens nothing. The ticket says only
|
||||
// "this password was correct", is accepted by no other endpoint, and expires in five minutes.
|
||||
if (u.totpEnabledAt) {
|
||||
return NextResponse.json({ need2fa: true, ticket: mintTicket(u.id, pwVersion(u.passwordHash)) });
|
||||
}
|
||||
|
||||
await setSessionCookie(u.id, u.passwordHash);
|
||||
recordAuthEvent(actorFor(u), "auth:signin", ipKey, "password");
|
||||
return NextResponse.json({ ok: true, name: `${u.first} ${u.last}`, role: u.role });
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
import { NextRequest, NextResponse } from "next/server";
|
||||
import { clearSessionCookie, currentUser } from "@/lib/session";
|
||||
import { sameOriginJson } from "@/lib/csrf";
|
||||
import { clientIp } from "@/lib/ratelimit";
|
||||
import { recordAuthEvent } from "@/lib/audit";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
export async function POST(req: NextRequest) {
|
||||
const csrf = sameOriginJson(req, false); if (csrf) return NextResponse.json({ error: csrf }, { status: 403 });
|
||||
// Read the session before dropping it, so the trail can say who left. An unauthenticated call
|
||||
// still clears the cookie and still answers ok — signing out must never fail.
|
||||
const user = await currentUser();
|
||||
await clearSessionCookie();
|
||||
if (user) {
|
||||
recordAuthEvent(
|
||||
{ facilityId: user.facilityId, userId: user.id, userName: `${user.first} ${user.last}`.trim() || user.email },
|
||||
"auth:signout", clientIp(req.headers),
|
||||
);
|
||||
}
|
||||
return NextResponse.json({ ok: true });
|
||||
}
|
||||
@@ -0,0 +1,96 @@
|
||||
import { NextRequest, NextResponse } from "next/server";
|
||||
import bcrypt from "bcryptjs";
|
||||
import { prisma } from "@/lib/db";
|
||||
import { allow, clientIp } from "@/lib/ratelimit";
|
||||
import { sameOriginJson } from "@/lib/csrf";
|
||||
import { pwVersion, setSessionCookie } from "@/lib/session";
|
||||
import { mintTicket } from "@/lib/twofactor";
|
||||
import { hashResetToken } from "@/lib/reset";
|
||||
import { recordAuthEvent } from "@/lib/audit";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
const MIN_PASSWORD = 8;
|
||||
|
||||
/* Complete a password reset.
|
||||
*
|
||||
* Changing the hash invalidates every existing session for that user on its own — the session
|
||||
* cookie carries a version derived from the password hash — so a reset also kicks out whoever
|
||||
* prompted it, which is the behaviour you want if the reason was a shared or stolen password. */
|
||||
export async function POST(req: NextRequest) {
|
||||
const csrf = sameOriginJson(req);
|
||||
if (csrf) return NextResponse.json({ error: csrf }, { status: 403 });
|
||||
|
||||
const ip = clientIp(req.headers);
|
||||
if (!allow("reset-ip:" + ip, 100, 60 * 60 * 1000)) {
|
||||
return NextResponse.json({ error: "Too many attempts — try again later." }, { status: 429 });
|
||||
}
|
||||
|
||||
let body: { token?: unknown; password?: unknown };
|
||||
try { body = await req.json(); } catch { return NextResponse.json({ error: "Bad request" }, { status: 400 }); }
|
||||
const token = String(body.token ?? "").trim().slice(0, 400);
|
||||
const password = String(body.password ?? "");
|
||||
|
||||
if (!token) return NextResponse.json({ error: "That link is incomplete. Ask for a new one." }, { status: 400 });
|
||||
if (password.length < MIN_PASSWORD) {
|
||||
return NextResponse.json({ error: `Use at least ${MIN_PASSWORD} characters.` }, { status: 400 });
|
||||
}
|
||||
|
||||
// Looked up by hash, so the raw token never has to be compared against stored material.
|
||||
const row = await prisma.passwordReset.findUnique({
|
||||
where: { tokenHash: hashResetToken(token) },
|
||||
select: {
|
||||
id: true, userId: true, expiresAt: true, usedAt: true,
|
||||
user: { select: { inactive: true, passwordHash: true, totpEnabledAt: true, facilityId: true, first: true, last: true, email: true } },
|
||||
},
|
||||
});
|
||||
|
||||
const dead = !row || row.usedAt || row.expiresAt.getTime() < Date.now() || row.user.inactive;
|
||||
if (dead) {
|
||||
return NextResponse.json({ error: "That link has expired or has already been used. Ask for a new one." }, { status: 400 });
|
||||
}
|
||||
|
||||
const hash = await bcrypt.hash(password, 12);
|
||||
await prisma.$transaction(async (tx) => {
|
||||
// Consume the token in the same write as the password change, so a double submit can't set the
|
||||
// password twice or leave a live token behind.
|
||||
const consumed = await tx.passwordReset.updateMany({
|
||||
where: { id: row.id, usedAt: null },
|
||||
data: { usedAt: new Date() },
|
||||
});
|
||||
if (consumed.count !== 1) throw new Error("token already consumed");
|
||||
await tx.user.update({ where: { id: row.userId }, data: { passwordHash: hash } });
|
||||
// Any other outstanding requests for this account die with it.
|
||||
await tx.passwordReset.updateMany({ where: { userId: row.userId, usedAt: null }, data: { usedAt: new Date() } });
|
||||
}).catch(() => null);
|
||||
|
||||
const fresh = await prisma.user.findUnique({ where: { id: row.userId }, select: { passwordHash: true } });
|
||||
if (!fresh || fresh.passwordHash !== hash) {
|
||||
return NextResponse.json({ error: "That link has expired or has already been used. Ask for a new one." }, { status: 400 });
|
||||
}
|
||||
|
||||
const actor = {
|
||||
facilityId: row.user.facilityId,
|
||||
userId: row.userId,
|
||||
userName: [row.user.first, row.user.last].filter(Boolean).join(" ").trim() || row.user.email,
|
||||
};
|
||||
|
||||
// A second factor is a second factor here too. Control of the mailbox is one proof, and on an
|
||||
// account with TOTP the front door refuses to open on one proof — so this door must not either,
|
||||
// or resetting the password would be the supported way around the authenticator, and the new
|
||||
// password would then be enough to turn it off for good.
|
||||
//
|
||||
// The same five-minute ticket the sign-in screen uses, accepted by the same endpoint: nothing new
|
||||
// to keep, nothing new to get wrong.
|
||||
if (row.user.totpEnabledAt) {
|
||||
recordAuthEvent(actor, "auth:password.reset", ip, "email-link");
|
||||
return NextResponse.json({ need2fa: true, ticket: mintTicket(row.userId, pwVersion(hash)) });
|
||||
}
|
||||
|
||||
// Otherwise sign them straight in: they have just proven control of the mailbox and chosen a
|
||||
// password, and making them type it again immediately is friction with no security value.
|
||||
await setSessionCookie(row.userId, hash);
|
||||
recordAuthEvent(actor, "auth:password.reset", ip, "email-link");
|
||||
recordAuthEvent(actor, "auth:signin", ip, "reset");
|
||||
return NextResponse.json({ ok: true });
|
||||
}
|
||||
@@ -0,0 +1,93 @@
|
||||
import { NextRequest, NextResponse } from "next/server";
|
||||
import bcrypt from "bcryptjs";
|
||||
import { prisma } from "@/lib/db";
|
||||
import { setSessionCookie } from "@/lib/session";
|
||||
import { allow, clientIp } from "@/lib/ratelimit";
|
||||
import { sameOriginJson } from "@/lib/csrf";
|
||||
import { verifyTurnstile } from "@/lib/turnstile";
|
||||
import { sendTo, transactionalConfigured } from "@/lib/mail";
|
||||
import { switches } from "@/lib/switches";
|
||||
import { alertNewSignup } from "@/lib/ops/alerts";
|
||||
import { recordAuthEvent } from "@/lib/audit";
|
||||
import { TRIAL_DAYS } from "@/lib/plan";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
/* Creating a facility.
|
||||
*
|
||||
* The address typed here is not verified, and deliberately isn't: a confirmation step in front of
|
||||
* a linen room's first ten minutes is a wall, and a facility half-created behind an unclicked link
|
||||
* is worse than one created. But it is the *only* way back in — /api/auth/forgot answers a
|
||||
* stranger and the owner identically, so a typo produces no signal at all until the day the
|
||||
* password is forgotten, and by then the facility is unreachable and undeletable.
|
||||
*
|
||||
* So the address is exercised immediately instead. A note goes to it saying, in as many words,
|
||||
* that this is the address that recovers the account, and the answer here says whether it was
|
||||
* sent — which is what lets the sign-up screen show the address back and tell someone who never
|
||||
* receives it what to do about it while they are still signed in and can still act.
|
||||
*/
|
||||
function welcomeEmail(first: string, facility: string) {
|
||||
const subject = "Your ThreadCount facility is set up";
|
||||
const text = [
|
||||
`Hi ${first || "there"},`,
|
||||
"",
|
||||
`${facility} is set up on ThreadCount, and this address is the coordinator account for it.`,
|
||||
"",
|
||||
"Keep this message. This is the address a password reset is sent to, and it is the only way",
|
||||
"back into the facility if the password is forgotten — so if it is wrong, sign in and add a",
|
||||
"second admin with an address that works, under Settings → Users.",
|
||||
"",
|
||||
`${process.env.NEXT_PUBLIC_SITE_URL || "https://threadcount.tech"}/app`,
|
||||
"",
|
||||
"— ThreadCount",
|
||||
].join("\n");
|
||||
return { subject, text };
|
||||
}
|
||||
|
||||
export async function POST(req: NextRequest) {
|
||||
const sw = await switches();
|
||||
if (!sw.signupsOpen) return NextResponse.json({ error: "New facility sign-ups are closed." }, { status: 403 });
|
||||
const csrf = sameOriginJson(req); if (csrf) return NextResponse.json({ error: csrf }, { status: 403 });
|
||||
if (!allow("signup:" + clientIp(req.headers), 5, 60 * 60 * 1000)) return NextResponse.json({ error: "Too many sign-ups from this connection — try again later." }, { status: 429 });
|
||||
let b: Record<string, string>;
|
||||
try { b = await req.json(); } catch { return NextResponse.json({ error: "Bad request" }, { status: 400 }); }
|
||||
const first = String(b.first || "").trim().slice(0, 80), last = String(b.last || "").trim().slice(0, 80);
|
||||
const facility = String(b.facility || "").trim().slice(0, 120);
|
||||
const email = String(b.email || "").trim().toLowerCase().slice(0, 160);
|
||||
const password = String(b.password || "");
|
||||
if (!first || !last || !facility) return NextResponse.json({ error: "Name and facility are required." }, { status: 400 });
|
||||
if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) return NextResponse.json({ error: "Enter a valid work email." }, { status: 400 });
|
||||
if (password.length < 8) return NextResponse.json({ error: "Password must be at least 8 characters." }, { status: 400 });
|
||||
const cfErr = await verifyTurnstile(b.cfToken, clientIp(req.headers)); if (cfErr) return NextResponse.json({ error: cfErr }, { status: 400 });
|
||||
if (await prisma.user.findUnique({ where: { email } })) return NextResponse.json({ error: "That email already has an account — log in instead." }, { status: 409 });
|
||||
|
||||
const u = await prisma.$transaction(async (tx) => {
|
||||
// No staff groups: the facility names its own. Any list handed over here would be one employer's
|
||||
// organisation chart on another employer's register, and a group sitting on a route nobody
|
||||
// chose decides who is handed a starting kit. Both route lists start empty with it, so until the
|
||||
// coordinator puts a group on the FTE table or the starting kit, everybody is on manager approval
|
||||
// and nobody has been promised a kit the counter would not hand over.
|
||||
// Until plans are live the page still says free, so a facility created today is grandfathered:
|
||||
// free with everything, for good. Once they are live a new room starts on the plan it chose —
|
||||
// Hosted Small, free, or a Hosted Facility trial with its end date set now. Anything else
|
||||
// sent as `plan` is Hosted Small: the free room is the safe misreading.
|
||||
const trial = sw.plansLive && b.plan === "hosted_facility";
|
||||
const planData = !sw.plansLive
|
||||
? { grandfathered: true, planStatus: "free" }
|
||||
: trial
|
||||
? { plan: "hosted_facility", planStatus: "trial", trialEndsAt: new Date(Date.now() + TRIAL_DAYS * 86_400_000) }
|
||||
: { plan: "hosted_small", planStatus: "free" };
|
||||
const f = await tx.facility.create({ data: { name: facility, coordinator: `${first} ${last}`, ...planData } });
|
||||
return tx.user.create({ data: { facilityId: f.id, email, passwordHash: await bcrypt.hash(password, 12), first, last, title: "Uniform Coordinator", role: "ADMIN" } });
|
||||
});
|
||||
await setSessionCookie(u.id, u.passwordHash);
|
||||
recordAuthEvent({ facilityId: u.facilityId, userId: u.id, userName: `${first} ${last}`.trim() || email }, "auth:signup", clientIp(req.headers));
|
||||
alertNewSignup({ id: u.facilityId, name: facility }); // the facility's name only — never the person
|
||||
|
||||
const em = welcomeEmail(first, facility);
|
||||
const mailed = await sendTo(email, em.subject, em.text);
|
||||
if (!mailed && transactionalConfigured()) console.error("[signup] welcome mail could not be sent for user", u.id);
|
||||
// `mailed` is false when no SMTP is configured at all, which is a different thing from a bad
|
||||
// address — the screen says so rather than pretending the address has been proven.
|
||||
return NextResponse.json({ ok: true, email, mailed, mail: transactionalConfigured() });
|
||||
}
|
||||
@@ -0,0 +1,89 @@
|
||||
import { NextRequest, NextResponse } from "next/server";
|
||||
import { prisma } from "@/lib/db";
|
||||
import { setSessionCookie } from "@/lib/session";
|
||||
import { setStaffCookie } from "@/lib/staffsession";
|
||||
import { allow, clientIp, fail, over } from "@/lib/ratelimit";
|
||||
import { recordAuthEvent } from "@/lib/audit";
|
||||
import { exchangeCode, fetchProfile, readState, ssoConfigured, SsoError, STATE_COOKIE } from "@/lib/sso";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
/* The broker sends the browser back here with ?code&state once the identity provider has spoken.
|
||||
* This route is the whole trust boundary, so, in order:
|
||||
*
|
||||
* 1. state must be the nonce in our signed cookie, which also says WHICH facility this login
|
||||
* was started for and whether a coordinator or a wearer is expected;
|
||||
* 2. the code is exchanged server-side and the profile read from the broker — the IdP's tokens
|
||||
* never touch the browser;
|
||||
* 3. the profile's email must match an existing, active account IN THAT FACILITY: a coordinator
|
||||
* (User) or, if the facility allows wearers, a staff account. Nothing is ever created here —
|
||||
* an address the identity provider vouches for but the facility never added is not a person
|
||||
* the facility asked to let in;
|
||||
* 4. only then is the ordinary session cookie minted, marked sso. A passed assertion is a whole
|
||||
* authentication (the identity provider owns the second factor), so no TOTP step follows.
|
||||
*
|
||||
* No Turnstile and no same-origin check: this is a top-level navigation from the broker's origin,
|
||||
* and the state cookie is the CSRF proof. Every failure lands on /auth?error=…, never a bypass. */
|
||||
const back = (path: string) => {
|
||||
const res = new NextResponse(null, { status: 303, headers: { Location: path } });
|
||||
res.cookies.set(STATE_COOKIE, "", { httpOnly: true, sameSite: "lax", path: "/api/auth/sso", maxAge: 0 });
|
||||
return res;
|
||||
};
|
||||
|
||||
export async function GET(req: NextRequest) {
|
||||
if (!ssoConfigured()) return back("/auth?error=sso_unavailable");
|
||||
const ip = clientIp(req.headers);
|
||||
// Failures only, so a whole site signing in behind one address is never locked out.
|
||||
if (over("sso-callback:" + ip, 20, 15 * 60 * 1000)) return back("/auth?error=sso_failed");
|
||||
const bad = (path: string) => { fail("sso-callback:" + ip, 15 * 60 * 1000); return back(path); };
|
||||
if (!allow("sso-callback-all:" + ip, 120, 15 * 60 * 1000)) return back("/auth?error=sso_failed");
|
||||
|
||||
const code = req.nextUrl.searchParams.get("code") || "";
|
||||
const state = req.nextUrl.searchParams.get("state") || "";
|
||||
if (req.nextUrl.searchParams.get("error") || !code || !state) return bad("/auth?error=sso_failed");
|
||||
|
||||
const st = readState(req.cookies.get(STATE_COOKIE)?.value, state);
|
||||
if (!st) return bad("/auth?error=sso_state");
|
||||
const f = await prisma.facility.findUnique({ where: { id: st.facilityId }, select: { id: true, isDemo: true, ssoEnabled: true, ssoStaff: true } });
|
||||
if (!f || f.isDemo || !f.ssoEnabled) return bad("/auth?error=sso_unavailable");
|
||||
|
||||
let email: string;
|
||||
try {
|
||||
email = (await fetchProfile(await exchangeCode(code))).email;
|
||||
} catch (e) {
|
||||
if (!(e instanceof SsoError)) console.error("[sso] callback exchange failed", e);
|
||||
return bad("/auth?error=sso_failed");
|
||||
}
|
||||
|
||||
if (st.aud === "staff") {
|
||||
if (!f.ssoStaff) return bad("/auth?error=sso_unavailable");
|
||||
const acc = await prisma.staffAccount.findUnique({ where: { email }, select: { id: true, facilityId: true, passwordHash: true, staff: { select: { id: true, first: true, last: true, inactive: true } } } });
|
||||
if (!acc || acc.facilityId !== f.id) return bad("/auth?error=sso_no_account");
|
||||
if (acc.staff.inactive) return bad("/auth?error=sso_inactive");
|
||||
await prisma.staffAccount.update({ where: { id: acc.id }, data: { lastSeenAt: new Date() } });
|
||||
await setStaffCookie(acc.id, acc.passwordHash, true);
|
||||
recordAuthEvent({ facilityId: acc.facilityId, userId: acc.staff.id, userName: `${acc.staff.first} ${acc.staff.last}` }, "staff:signin", ip, "sso");
|
||||
return back("/my");
|
||||
}
|
||||
|
||||
const u = await prisma.user.findUnique({ where: { email }, select: { id: true, facilityId: true, passwordHash: true, first: true, last: true, inactive: true } });
|
||||
if (!u || u.facilityId !== f.id) {
|
||||
// A wearer typing at the shared box reaches here with aud "user"; if the facility lets its
|
||||
// wearers use SSO, look them up too rather than sending them away.
|
||||
if (f.ssoStaff) {
|
||||
const acc = await prisma.staffAccount.findUnique({ where: { email }, select: { id: true, facilityId: true, passwordHash: true, staff: { select: { id: true, first: true, last: true, inactive: true } } } });
|
||||
if (acc && acc.facilityId === f.id) {
|
||||
if (acc.staff.inactive) return bad("/auth?error=sso_inactive");
|
||||
await prisma.staffAccount.update({ where: { id: acc.id }, data: { lastSeenAt: new Date() } });
|
||||
await setStaffCookie(acc.id, acc.passwordHash, true);
|
||||
recordAuthEvent({ facilityId: acc.facilityId, userId: acc.staff.id, userName: `${acc.staff.first} ${acc.staff.last}` }, "staff:signin", ip, "sso");
|
||||
return back("/my");
|
||||
}
|
||||
}
|
||||
return bad("/auth?error=sso_no_account");
|
||||
}
|
||||
if (u.inactive) return bad("/auth?error=sso_inactive");
|
||||
await setSessionCookie(u.id, u.passwordHash, true);
|
||||
recordAuthEvent({ facilityId: u.facilityId, userId: u.id, userName: `${u.first} ${u.last}` }, "auth:signin", ip, "sso");
|
||||
return back("/app");
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
import { NextRequest, NextResponse } from "next/server";
|
||||
import { sameOriginJson } from "@/lib/csrf";
|
||||
import { allow, clientIp } from "@/lib/ratelimit";
|
||||
import { facilityForEmail, ssoConfigured } from "@/lib/sso";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
/* Does this address belong to a facility that signs in with single sign-on?
|
||||
*
|
||||
* Asked by the Log in box once an address is typed, so the box can offer "Continue with single
|
||||
* sign-on" before anyone reaches for a password. It answers about a DOMAIN, never a person: a
|
||||
* facility that registered its domain is a fact about the facility, and the reply carries nothing
|
||||
* about whether the address itself has an account. Throttled per address, since it is a lookup
|
||||
* anyone may make. */
|
||||
export async function POST(req: NextRequest) {
|
||||
const csrf = sameOriginJson(req);
|
||||
if (csrf) return NextResponse.json({ error: csrf }, { status: 403 });
|
||||
if (!allow("sso-lookup:" + clientIp(req.headers), 60, 15 * 60 * 1000)) return NextResponse.json({ sso: false });
|
||||
if (!ssoConfigured()) return NextResponse.json({ sso: false });
|
||||
let body: { email?: unknown };
|
||||
try { body = await req.json(); } catch { return NextResponse.json({ error: "Bad request" }, { status: 400 }); }
|
||||
const email = String(body.email ?? "").trim().toLowerCase().slice(0, 160);
|
||||
const f = await facilityForEmail(email);
|
||||
if (!f) return NextResponse.json({ sso: false });
|
||||
return NextResponse.json({ sso: true, required: f.ssoRequired, facility: f.name });
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
import { NextRequest, NextResponse } from "next/server";
|
||||
import { currentUser } from "@/lib/session";
|
||||
import { allow, clientIp } from "@/lib/ratelimit";
|
||||
import { buildAuthorizeUrl, facilityForEmail, mintState, ssoConfigured, STATE_COOKIE } from "@/lib/sso";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
/* Begin single sign-on for the facility that owns this address's domain.
|
||||
*
|
||||
* Mints a nonce, keeps it in a signed, httpOnly cookie bound to that facility (and to whether a
|
||||
* wearer or a coordinator is expected back), echoes it as the OAuth `state`, and sends the browser
|
||||
* to the broker. The callback requires the returned state to be the cookie's nonce, so a forged
|
||||
* or replayed callback has nothing to match. The redirect target handed to the broker is the
|
||||
* product's one fixed callback address — never a request header.
|
||||
*
|
||||
* A cross-site link may not start this (login CSRF: a stranger's page must not be able to sign
|
||||
* you into an account of its choosing), and a signed-in coordinator is sent to the app instead. */
|
||||
export async function GET(req: NextRequest) {
|
||||
if (!ssoConfigured()) return NextResponse.json({ error: "Single sign-on is not available." }, { status: 404 });
|
||||
if (req.headers.get("sec-fetch-site") === "cross-site") return new NextResponse(null, { status: 303, headers: { Location: "/auth" } });
|
||||
if (!allow("sso-start:" + clientIp(req.headers), 60, 15 * 60 * 1000)) return new NextResponse(null, { status: 303, headers: { Location: "/auth?error=sso_failed" } });
|
||||
const cur = await currentUser();
|
||||
if (cur && !cur.isDemo) return new NextResponse(null, { status: 303, headers: { Location: "/app" } });
|
||||
|
||||
const email = (req.nextUrl.searchParams.get("email") || "").trim().toLowerCase().slice(0, 160);
|
||||
const f = await facilityForEmail(email);
|
||||
if (!f) return new NextResponse(null, { status: 303, headers: { Location: "/auth?error=sso_unavailable" } });
|
||||
|
||||
const aud = req.nextUrl.searchParams.get("as") === "staff" ? "staff" : "user";
|
||||
if (aud === "staff" && !f.ssoStaff) return new NextResponse(null, { status: 303, headers: { Location: "/auth?error=sso_unavailable" } });
|
||||
const { nonce, cookie } = mintState(f.id, aud);
|
||||
const res = new NextResponse(null, { status: 302, headers: { Location: buildAuthorizeUrl(f.id, nonce) } });
|
||||
res.cookies.set(STATE_COOKIE, cookie, {
|
||||
httpOnly: true,
|
||||
secure: process.env.NODE_ENV === "production",
|
||||
sameSite: "lax", // the broker returns by a top-level navigation, which lax still sends
|
||||
path: "/api/auth/sso",
|
||||
maxAge: 10 * 60,
|
||||
});
|
||||
return res;
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
import { NextResponse } from "next/server";
|
||||
import { currentUser } from "@/lib/session";
|
||||
import { prisma } from "@/lib/db";
|
||||
import { exportBackup } from "@/lib/ops";
|
||||
import { facilityToday } from "@/lib/compute";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
export async function GET() {
|
||||
const user = await currentUser();
|
||||
if (!user) return NextResponse.json({ error: "Not signed in" }, { status: 401 });
|
||||
if (user.role !== "ADMIN") return NextResponse.json({ error: "Admin only" }, { status: 403 });
|
||||
const data = await exportBackup(user);
|
||||
// The date on the filename is the day where the linen room stands, not where the box is. It has
|
||||
// to agree with the lastBackup stamp exportBackup writes against the same facility, or a room
|
||||
// taking a backup at eight in the morning ends up with a file named for yesterday sitting beside
|
||||
// a settings screen that says it was taken today.
|
||||
const fac = await prisma.facility.findUniqueOrThrow({ where: { id: user.facilityId }, select: { timezone: true } });
|
||||
return new NextResponse(JSON.stringify(data, null, 1), {
|
||||
headers: {
|
||||
"content-type": "application/json; charset=utf-8",
|
||||
"content-disposition": `attachment; filename="threadcount-backup-${facilityToday(fac.timezone)}.json"`,
|
||||
},
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,81 @@
|
||||
import { NextRequest, NextResponse } from "next/server";
|
||||
import { prisma } from "@/lib/db";
|
||||
import { allow, clientIp } from "@/lib/ratelimit";
|
||||
import { sameOriginJson } from "@/lib/csrf";
|
||||
import { verifyTurnstile } from "@/lib/turnstile";
|
||||
import { mailConfigured, sendMail } from "@/lib/mail";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
const str = (v: unknown, max: number) => String(v ?? "").trim().slice(0, max);
|
||||
|
||||
/* Retention.
|
||||
*
|
||||
* A message through the contact form carries a name, a work address, a facility, a role, whatever
|
||||
* the person chose to write and the address they wrote it from. It was kept forever: the model has
|
||||
* no facility to cascade from, so nothing would ever have deleted one. Twelve months is long
|
||||
* enough for the enquiry and any follow-up it turns into, and the privacy note says the same
|
||||
* number — this is the mechanism that makes that sentence true rather than aspirational.
|
||||
*
|
||||
* Swept from here rather than from a cron, because a cron is a second thing to deploy and this
|
||||
* table only grows when this handler runs. The limiter is doing duty as an interval: one sweep an
|
||||
* hour, and the message the person is sending never waits on it. */
|
||||
const RETENTION_DAYS = 365;
|
||||
|
||||
function pruneOldMessages() {
|
||||
if (!allow("contact-prune", 1, 60 * 60 * 1000)) return;
|
||||
const cutoff = new Date(Date.now() - RETENTION_DAYS * 24 * 60 * 60 * 1000);
|
||||
void prisma.contactMessage
|
||||
.deleteMany({ where: { createdAt: { lt: cutoff } } })
|
||||
.then((r) => { if (r.count) console.log(`[contact] retention: removed ${r.count} message(s) older than ${RETENTION_DAYS} days`); })
|
||||
.catch((e) => console.error("[contact] retention sweep failed:", (e as Error).message));
|
||||
}
|
||||
|
||||
export async function POST(req: NextRequest) {
|
||||
const csrf = sameOriginJson(req);
|
||||
if (csrf) return NextResponse.json({ error: csrf }, { status: 403 });
|
||||
|
||||
const ip = clientIp(req.headers);
|
||||
// Two buckets: a burst guard and a slower daily ceiling, so one address can't grind through it.
|
||||
if (!allow("contact:" + ip, 5, 60 * 60 * 1000) || !allow("contact-day:" + ip, 20, 24 * 60 * 60 * 1000)) {
|
||||
return NextResponse.json({ error: "That's a few messages in a short time. Try again later, or email hello@threadcount.tech." }, { status: 429 });
|
||||
}
|
||||
|
||||
let b: Record<string, unknown>;
|
||||
try { b = await req.json(); } catch { return NextResponse.json({ error: "Bad request" }, { status: 400 }); }
|
||||
|
||||
// Honeypot: a real person never fills this in.
|
||||
if (str(b.company, 100)) return NextResponse.json({ ok: true });
|
||||
|
||||
const name = str(b.name, 120);
|
||||
const email = str(b.email, 160).toLowerCase();
|
||||
const message = str(b.message, 4000);
|
||||
if (!name) return NextResponse.json({ error: "Add your name so I know who I'm replying to." }, { status: 400 });
|
||||
if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) return NextResponse.json({ error: "Add an email address I can reply to." }, { status: 400 });
|
||||
if (message.length < 10) return NextResponse.json({ error: "Say a little more about what you need." }, { status: 400 });
|
||||
|
||||
const cfErr = await verifyTurnstile(b.cfToken, ip);
|
||||
if (cfErr) return NextResponse.json({ error: cfErr }, { status: 400 });
|
||||
|
||||
pruneOldMessages();
|
||||
|
||||
const row = await prisma.contactMessage.create({
|
||||
data: {
|
||||
name, email, message, ip,
|
||||
role: str(b.role, 120), facility: str(b.facility, 160),
|
||||
topic: str(b.topic, 60), slot: str(b.slot, 60),
|
||||
},
|
||||
});
|
||||
|
||||
const emailed = await sendMail(
|
||||
`ThreadCount contact — ${row.topic || "A question"} — ${name}`,
|
||||
[`From: ${name}${row.role ? ` (${row.role})` : ""}`, row.facility && `Facility: ${row.facility}`, `Email: ${email}`,
|
||||
row.topic && `Topic: ${row.topic}`, row.slot && `Walkthrough: ${row.slot}`, "", message, "", `Received ${row.createdAt.toISOString()} from ${ip}`]
|
||||
.filter(Boolean).join("\n"),
|
||||
email,
|
||||
);
|
||||
if (emailed) await prisma.contactMessage.update({ where: { id: row.id }, data: { emailed: true } });
|
||||
else if (!mailConfigured()) console.warn("[contact] stored", row.id, "— SMTP not configured, no notification sent");
|
||||
|
||||
return NextResponse.json({ ok: true });
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
import { NextResponse } from "next/server";
|
||||
import { prisma } from "@/lib/db";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
/* Is this server actually able to do its job?
|
||||
*
|
||||
* The deploy probes /app, which proves the process is serving HTML — but /app renders a redirect to
|
||||
* the sign-in page whether or not Prisma can reach the database, so the one failure that takes the
|
||||
* whole product down is exactly the one that probe cannot see. This asks the database a question
|
||||
* instead, and answers 503 when it cannot.
|
||||
*
|
||||
* No auth and no cache on purpose: it is watched continuously by an uptime monitor with no account,
|
||||
* and it must never answer from a cached success. It is listed in proxy.ts's `publicApi` for the
|
||||
* same reason. Nothing about the facility, the schema or the error is returned — a monitor needs a
|
||||
* status code, and an unauthenticated caller is owed nothing more.
|
||||
*/
|
||||
export async function GET() {
|
||||
try {
|
||||
await prisma.$queryRaw`SELECT 1`;
|
||||
return NextResponse.json({ ok: true }, { headers: { "cache-control": "no-store" } });
|
||||
} catch (e) {
|
||||
console.error("[health] database unreachable:", (e as Error).message);
|
||||
return NextResponse.json({ ok: false }, { status: 503, headers: { "cache-control": "no-store" } });
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
import { NextResponse } from "next/server";
|
||||
import { currentUser } from "@/lib/session";
|
||||
import { prisma } from "@/lib/db";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
/** Serves the signed-in user's facility logo (stored as a data URL). */
|
||||
export async function GET() {
|
||||
const user = await currentUser();
|
||||
if (!user) return new NextResponse(null, { status: 401 });
|
||||
const fac = await prisma.facility.findUnique({ where: { id: user.facilityId }, select: { logoData: true } });
|
||||
const m = /^data:(image\/(?:png|jpeg|jpg|gif|webp));base64,([A-Za-z0-9+/=]+)$/.exec(fac?.logoData || "");
|
||||
if (!m) return new NextResponse(null, { status: 404 });
|
||||
return new NextResponse(Buffer.from(m[2], "base64"), { headers: { "content-type": m[1], "cache-control": "private, no-cache", "x-content-type-options": "nosniff", "content-security-policy": "sandbox" } });
|
||||
}
|
||||
@@ -0,0 +1,80 @@
|
||||
import { NextRequest, NextResponse } from "next/server";
|
||||
import { prisma } from "@/lib/db";
|
||||
import { currentUser } from "@/lib/session";
|
||||
import { allow } from "@/lib/ratelimit";
|
||||
import { gtinInfo } from "@/lib/compute";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
export type LookupResult = {
|
||||
code: string;
|
||||
gtin: ReturnType<typeof gtinInfo>;
|
||||
enabled: boolean; // is public lookup turned on for this facility
|
||||
found: boolean;
|
||||
name?: string;
|
||||
brand?: string;
|
||||
category?: string;
|
||||
source?: string;
|
||||
note?: string; // why there's no result, in plain words
|
||||
};
|
||||
|
||||
const TIMEOUT_MS = 4500;
|
||||
const cache = new Map<string, { at: number; v: Omit<LookupResult, "enabled" | "gtin" | "code"> }>();
|
||||
const CACHE_MS = 12 * 60 * 60 * 1000;
|
||||
|
||||
async function getJson(url: string): Promise<unknown | null> {
|
||||
const ac = new AbortController();
|
||||
const t = setTimeout(() => ac.abort(), TIMEOUT_MS);
|
||||
try {
|
||||
const r = await fetch(url, { signal: ac.signal, headers: { accept: "application/json", "user-agent": "ThreadCount/1.0 (uniform stock management)" }, cache: "no-store" });
|
||||
if (!r.ok) return null;
|
||||
return await r.json();
|
||||
} catch { return null; } finally { clearTimeout(t); }
|
||||
}
|
||||
|
||||
/** UPCitemdb's keyless trial tier — small daily quota per server IP, so misses are expected. */
|
||||
async function upcItemDb(gtin: string) {
|
||||
const j = await getJson(`https://api.upcitemdb.com/prod/trial/lookup?upc=${encodeURIComponent(gtin)}`) as { items?: { title?: string; brand?: string; category?: string }[] } | null;
|
||||
const it = j?.items?.[0];
|
||||
if (!it?.title) return null;
|
||||
return { name: String(it.title).slice(0, 160), brand: String(it.brand || "").slice(0, 80), category: String(it.category || "").slice(0, 80), source: "UPCitemdb" };
|
||||
}
|
||||
|
||||
/** Open Products Facts — the non-food sibling of Open Food Facts; open data, no key. */
|
||||
async function openProductsFacts(gtin: string) {
|
||||
const j = await getJson(`https://world.openproductsfacts.org/api/v2/product/${encodeURIComponent(gtin)}.json?fields=product_name,brands,categories`) as { status?: number; product?: { product_name?: string; brands?: string; categories?: string } } | null;
|
||||
const pr = j?.product;
|
||||
if (j?.status !== 1 || !pr?.product_name) return null;
|
||||
return { name: String(pr.product_name).slice(0, 160), brand: String(pr.brands || "").slice(0, 80), category: String(pr.categories || "").slice(0, 80), source: "Open Products Facts" };
|
||||
}
|
||||
|
||||
export async function GET(req: NextRequest) {
|
||||
const user = await currentUser();
|
||||
if (!user) return NextResponse.json({ error: "Not signed in" }, { status: 401 });
|
||||
if (user.role !== "ADMIN") return NextResponse.json({ error: "Admin only" }, { status: 403 });
|
||||
|
||||
const gtin = gtinInfo(req.nextUrl.searchParams.get("code") || "");
|
||||
const base = { code: gtin.code, gtin, found: false } as LookupResult;
|
||||
if (!gtin.code) return NextResponse.json({ ...base, enabled: false, note: "No barcode given." });
|
||||
|
||||
const fac = await prisma.facility.findUnique({ where: { id: user.facilityId }, select: { barcodeLookup: true } });
|
||||
const enabled = !!fac?.barcodeLookup;
|
||||
if (!enabled) return NextResponse.json({ ...base, enabled: false, note: "Product lookup is off. Turn it on in Settings → Data if you want ThreadCount to ask a public barcode database for a name." });
|
||||
// Only real retail GTINs are worth sending anywhere; a mis-read or an in-house code never matches.
|
||||
if (!gtin.valid || !["EAN-13", "UPC-A", "EAN-8", "GTIN-14"].includes(gtin.kind)) {
|
||||
return NextResponse.json({ ...base, enabled, note: gtin.kind ? "The check digit doesn't match, so this wasn't looked up — scan it again." : "Not a standard retail barcode, so there's nothing to look up. Type the details in." });
|
||||
}
|
||||
if (!allow("lookup:" + user.facilityId, 120, 60 * 60 * 1000)) return NextResponse.json({ ...base, enabled, note: "Too many lookups this hour — type the details in for now." }, { status: 429 });
|
||||
|
||||
const hit = cache.get(gtin.digits);
|
||||
if (hit && Date.now() - hit.at < CACHE_MS) return NextResponse.json({ ...base, enabled, ...hit.v });
|
||||
|
||||
let found = await upcItemDb(gtin.digits);
|
||||
if (!found) found = await openProductsFacts(gtin.digits);
|
||||
const v = found
|
||||
? { found: true, ...found }
|
||||
: { found: false, note: "No public listing for this barcode — normal for workwear and hospital uniforms. Type the details in once and the barcode stays bound." };
|
||||
cache.set(gtin.digits, { at: Date.now(), v });
|
||||
if (cache.size > 500) for (const k of [...cache.keys()].slice(0, 100)) cache.delete(k);
|
||||
return NextResponse.json({ ...base, enabled, ...v });
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
import { NextRequest, NextResponse } from "next/server";
|
||||
import { currentUser } from "@/lib/session";
|
||||
import { OpError, bumpRev, demoGuard, restoreBackup, runOp } from "@/lib/ops";
|
||||
import { sameOriginJson } from "@/lib/csrf";
|
||||
import { allow, clientIp } from "@/lib/ratelimit";
|
||||
import { recordAudit } from "@/lib/audit";
|
||||
import { report } from "@/lib/glitchtip";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
export async function POST(req: NextRequest) {
|
||||
const user = await currentUser();
|
||||
if (!user) return NextResponse.json({ error: "Not signed in" }, { status: 401 });
|
||||
const csrf = sameOriginJson(req); if (csrf) return NextResponse.json({ error: csrf }, { status: 403 });
|
||||
if (parseInt(req.headers.get("content-length") || "0", 10) > 60 * 1024 * 1024) return NextResponse.json({ error: "Request too large" }, { status: 413 });
|
||||
let body: { op?: string; payload?: unknown };
|
||||
try { body = await req.json(); } catch { return NextResponse.json({ error: "Bad JSON" }, { status: 400 }); }
|
||||
const op = String(body.op || "");
|
||||
if (!allow("mutate:" + user.id, 600, 60 * 1000)) return NextResponse.json({ error: "Slow down — too many changes in a minute." }, { status: 429 });
|
||||
if (op === "photo.put" && !allow("photo:" + user.facilityId, 120, 60 * 60 * 1000)) return NextResponse.json({ error: "Photo limit reached for this hour." }, { status: 429 });
|
||||
if ((op === "backup.restore" || op === "import.rows") && !allow("bulk:" + user.id, 20, 10 * 60 * 1000)) return NextResponse.json({ error: "Too many imports — wait a few minutes." }, { status: 429 });
|
||||
try {
|
||||
if (op === "backup.restore") demoGuard(user, op);
|
||||
const result = op === "backup.restore" ? await restoreBackup(user, body.payload) : await runOp(user, op, body.payload);
|
||||
// Only after it actually succeeded, and only from here: every one of the 57 ops passes through
|
||||
// this one function, so the trail can't be forgotten in a new case branch later.
|
||||
recordAudit(user, op, body.payload, clientIp(req.headers));
|
||||
// Handed back so the screen that made this change does not bounce again when it next polls.
|
||||
const rev = await bumpRev(user.facilityId);
|
||||
return NextResponse.json({ ok: true, result, rev });
|
||||
} catch (e) {
|
||||
if (e instanceof OpError) return NextResponse.json({ error: e.message }, { status: e.status });
|
||||
// Reported from here, not from instrumentation.ts: onRequestError only sees what Next itself
|
||||
// catches, and an exception caught in this handler never reaches it. Every write in the product
|
||||
// comes through this line, so without it the whole write path fails invisibly.
|
||||
report({ error: e, where: "server", url: "/api/mutate", tags: { op } });
|
||||
console.error(`[mutate ${op}]`, e);
|
||||
return NextResponse.json({ error: "Something went wrong — nothing was saved." }, { status: 500 });
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,100 @@
|
||||
import { NextRequest, NextResponse } from "next/server";
|
||||
import bcrypt from "bcryptjs";
|
||||
import { prisma } from "@/lib/db";
|
||||
import { sameOriginJson } from "@/lib/csrf";
|
||||
import { clientIp, fail, over } from "@/lib/ratelimit";
|
||||
import { setOpsCookie, logOperatorEvent } from "@/lib/ops/session";
|
||||
import { verifyOperatorCode } from "@/lib/ops/totp";
|
||||
import { hashRecoveryCode } from "@/lib/totp";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
/* The break-glass door for the operations console.
|
||||
*
|
||||
* Single sign-on is the front door. This is the fire escape, and a fire escape must not depend
|
||||
* on the thing that is on fire — so there is no Turnstile here. The sitekey is bound to the
|
||||
* product's domain and compiled in at build time; on this hostname it would refuse with a
|
||||
* generic "security check failed", discovered during the exact incident this route exists for.
|
||||
*
|
||||
* Instead: failures are counted under the console's own buckets. Not `login-ip:` — that is the
|
||||
* product's, and a public credential-stuffing run against coordinator accounts must not be able
|
||||
* to lock the operator out of the console. The limits are tighter than the product's because
|
||||
* there is one operator, not a ward arriving at shift change.
|
||||
*
|
||||
* ⛔ This route mints an OPERATOR session and nothing else. It must never call setSessionCookie
|
||||
* or setStaffCookie; an operator signing in as a customer is the data plane by another door. */
|
||||
|
||||
// A constant to compare against when there is no such operator, so a missing address and a
|
||||
// wrong password take the same time.
|
||||
const DUMMY = "$2b$12$C6UzMDM.H6dfI/f/IKcEeO5x3FvDS3kqB6r0Jt3g7Lz0vX4o0JZ1u";
|
||||
const WINDOW = 15 * 60 * 1000;
|
||||
|
||||
export async function POST(req: NextRequest) {
|
||||
const csrf = sameOriginJson(req);
|
||||
if (csrf) return NextResponse.json({ error: csrf }, { status: 403 });
|
||||
|
||||
let body: { email?: unknown; password?: unknown; code?: unknown };
|
||||
try { body = await req.json(); } catch { return NextResponse.json({ error: "Bad request" }, { status: 400 }); }
|
||||
const email = String(body.email ?? "").trim().toLowerCase().slice(0, 160);
|
||||
const password = String(body.password ?? "").slice(0, 200);
|
||||
const code = body.code === undefined || body.code === null ? "" : String(body.code).slice(0, 16);
|
||||
|
||||
const ip = clientIp(req.headers);
|
||||
if (over("ops-login-ip:" + ip, 20, WINDOW) || (email && over("ops-login-email:" + email, 10, WINDOW))) {
|
||||
return NextResponse.json({ error: "Too many attempts — try again in 15 minutes." }, { status: 429 });
|
||||
}
|
||||
if (!email || !password) return NextResponse.json({ error: "Enter your email and password." }, { status: 400 });
|
||||
|
||||
const op = await prisma.operator.findUnique({
|
||||
where: { email },
|
||||
select: { id: true, name: true, passwordHash: true, inactive: true, totpSecret: true, totpEnabledAt: true },
|
||||
});
|
||||
const ok = await bcrypt.compare(password, op?.passwordHash ?? DUMMY);
|
||||
if (!op || !ok) {
|
||||
fail("ops-login-ip:" + ip, WINDOW);
|
||||
if (email) fail("ops-login-email:" + email, WINDOW);
|
||||
if (op) logOperatorEvent({ operatorId: op.id, action: "ops:signin.failed", detail: "password", ip });
|
||||
return NextResponse.json({ error: "Email or password doesn’t match." }, { status: 401 });
|
||||
}
|
||||
if (op.inactive) {
|
||||
logOperatorEvent({ operatorId: op.id, action: "ops:signin.refused", detail: "inactive", ip });
|
||||
return NextResponse.json({ error: "This operator account has been deactivated." }, { status: 403 });
|
||||
}
|
||||
|
||||
// Once a second factor is enrolled, the password alone opens nothing. `needCode` tells the form
|
||||
// to ask for it; a wrong code is a counted failure like a wrong password.
|
||||
let second = "";
|
||||
if (op.totpEnabledAt) {
|
||||
if (!code) return NextResponse.json({ error: "Enter the code from your authenticator app.", needCode: true }, { status: 401 });
|
||||
// Ten or more letters and digits is a recovery code; six digits is an authenticator code — the
|
||||
// same heuristic as the coordinator door. A recovery code is spent in the same conditional
|
||||
// update that finds it, so it cannot be used twice, and a spent or unknown one is a counted
|
||||
// failure like any other.
|
||||
const looksRecovery = code.replace(/[^A-Za-z0-9]/g, "").length >= 10;
|
||||
if (looksRecovery) {
|
||||
const spent = await prisma.operatorRecoveryCode.updateMany({
|
||||
where: { operatorId: op.id, codeHash: hashRecoveryCode(code), usedAt: null },
|
||||
data: { usedAt: new Date() },
|
||||
});
|
||||
if (spent.count !== 1) {
|
||||
fail("ops-login-ip:" + ip, WINDOW);
|
||||
fail("ops-login-email:" + email, WINDOW);
|
||||
logOperatorEvent({ operatorId: op.id, action: "ops:signin.failed", detail: "recovery", ip });
|
||||
return NextResponse.json({ error: "That recovery code isn’t right, or has already been used.", needCode: true }, { status: 401 });
|
||||
}
|
||||
second = "recovery";
|
||||
} else if (!verifyOperatorCode(op, code)) {
|
||||
fail("ops-login-ip:" + ip, WINDOW);
|
||||
fail("ops-login-email:" + email, WINDOW);
|
||||
logOperatorEvent({ operatorId: op.id, action: "ops:signin.failed", detail: "totp", ip });
|
||||
return NextResponse.json({ error: "That code isn’t right.", needCode: true }, { status: 401 });
|
||||
} else {
|
||||
second = "totp";
|
||||
}
|
||||
}
|
||||
|
||||
await prisma.operator.update({ where: { id: op.id }, data: { lastSeenAt: new Date() } });
|
||||
await setOpsCookie(op.id, op.passwordHash, false);
|
||||
logOperatorEvent({ operatorId: op.id, action: "ops:signin", detail: second ? `password+${second}` : "password", ip });
|
||||
return NextResponse.json({ ok: true, name: op.name });
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
import { NextRequest, NextResponse } from "next/server";
|
||||
import { clientIp } from "@/lib/ratelimit";
|
||||
import { clearOpsCookie, currentOperator, logOperatorEvent } from "@/lib/ops/session";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
/* Ends the operator session. Reached by a plain form post from the console, so it answers with a
|
||||
* redirect rather than JSON. Recorded in the trail when there was a session to end. */
|
||||
export async function POST(req: NextRequest) {
|
||||
const op = await currentOperator();
|
||||
if (op) logOperatorEvent({ operatorId: op.id, action: "ops:signout", ip: clientIp(req.headers) });
|
||||
await clearOpsCookie();
|
||||
const url = req.nextUrl.clone();
|
||||
url.pathname = "/ops/login"; url.search = "";
|
||||
return NextResponse.redirect(url, { status: 303 });
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
import { NextRequest, NextResponse } from "next/server";
|
||||
import { prisma } from "@/lib/db";
|
||||
import { clientIp } from "@/lib/ratelimit";
|
||||
import { safeOpsNext, verifyAccessJwt } from "@/lib/ops/cfAccess";
|
||||
import { logOperatorEvent, setOpsCookie } from "@/lib/ops/session";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
/* Single sign-on entry. Reached when a browser arrives with a Cloudflare Access assertion but no
|
||||
* operator session (the sign-in page hands off here). The assertion is verified fail-closed
|
||||
* (lib/ops/cfAccess.ts), the verified email is mapped to an EXISTING, ACTIVE operator, and the
|
||||
* ordinary tc_ops session is minted, marked `sso`. Never creates an operator: an email Access
|
||||
* admits but the console does not know falls back to the password door. Every failure lands on
|
||||
* /ops/login?sso=failed — never a bypass, never a loop (the sign-in page does not re-trigger SSO
|
||||
* when ?sso is present).
|
||||
*
|
||||
* Relative Location on purpose: an absolute URL built from the request would carry the origin
|
||||
* nginx sees (127.0.0.1:3000), not the public host. */
|
||||
function seeOther(location: string): NextResponse {
|
||||
return new NextResponse(null, { status: 303, headers: { Location: location } });
|
||||
}
|
||||
|
||||
export async function GET(req: NextRequest) {
|
||||
const failed = seeOther("/ops/login?sso=failed");
|
||||
const next = safeOpsNext(req.nextUrl.searchParams.get("next"));
|
||||
const ip = clientIp(req.headers);
|
||||
|
||||
const email = await verifyAccessJwt(req.headers.get("cf-access-jwt-assertion"));
|
||||
if (!email) return failed;
|
||||
|
||||
const op = await prisma.operator.findUnique({
|
||||
where: { email },
|
||||
select: { id: true, inactive: true, passwordHash: true },
|
||||
});
|
||||
if (!op || op.inactive) {
|
||||
// The trail cannot name an operator it does not have; the address goes in the detail, since
|
||||
// "who Access let in that the console refused" is the fact worth keeping.
|
||||
console.warn("[ops sso] no active operator for", email, "from", ip);
|
||||
return failed;
|
||||
}
|
||||
|
||||
await setOpsCookie(op.id, op.passwordHash, true);
|
||||
logOperatorEvent({ operatorId: op.id, action: "ops:signin.sso", ip });
|
||||
prisma.operator.update({ where: { id: op.id }, data: { lastSeenAt: new Date() } }).catch(() => {});
|
||||
return seeOther(next);
|
||||
}
|
||||
@@ -0,0 +1,112 @@
|
||||
import { NextRequest, NextResponse } from "next/server";
|
||||
import bcrypt from "bcryptjs";
|
||||
import QRCode from "qrcode";
|
||||
import { prisma } from "@/lib/db";
|
||||
import { sameOriginJson } from "@/lib/csrf";
|
||||
import { allow, clientIp } from "@/lib/ratelimit";
|
||||
import { hashRecoveryCode, newRecoveryCodes, newTotpSecret, otpauthUrl, totpVerify } from "@/lib/totp";
|
||||
import { currentOperator, logOperatorEvent } from "@/lib/ops/session";
|
||||
import { decryptOpsSecret, encryptOpsSecret } from "@/lib/ops/totp";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
/* An operator's second factor: the same three steps as a coordinator's (app/api/2fa/route.ts),
|
||||
* for the same reason — a secret stored the moment it is generated leaves an account
|
||||
* half-enrolled if the person never finishes, and their next sign-in asks for codes from an app
|
||||
* they never set up.
|
||||
*
|
||||
* setup — generate a secret and show the QR. Stored, but not yet in force.
|
||||
* enable — prove a code from it works, switch it on, hand back recovery codes once.
|
||||
* disable — password required; turning a factor off is a privileged act.
|
||||
* regenerate — password required; new recovery codes, old ones gone.
|
||||
*
|
||||
* The secret is encrypted under the console's own key (lib/ops/totp.ts), never the product's.
|
||||
* The QR is generated here as SVG, as the product does it: the secret never has to be handed to
|
||||
* client-side code to render. */
|
||||
export async function GET() {
|
||||
const op = await currentOperator();
|
||||
if (!op) return NextResponse.json({ error: "Not signed in" }, { status: 401 });
|
||||
const left = await prisma.operatorRecoveryCode.count({ where: { operatorId: op.id, usedAt: null } });
|
||||
return NextResponse.json({ enabled: op.totpEnabled, recoveryLeft: left, viaSso: op.viaSso });
|
||||
}
|
||||
|
||||
export async function POST(req: NextRequest) {
|
||||
const csrf = sameOriginJson(req);
|
||||
if (csrf) return NextResponse.json({ error: csrf }, { status: 403 });
|
||||
const op = await currentOperator();
|
||||
if (!op) return NextResponse.json({ error: "Not signed in" }, { status: 401 });
|
||||
|
||||
const ip = clientIp(req.headers);
|
||||
if (!allow("ops-2fa-manage:" + op.id, 30, 15 * 60 * 1000)) {
|
||||
return NextResponse.json({ error: "Too many attempts — try again in a few minutes." }, { status: 429 });
|
||||
}
|
||||
|
||||
let body: { action?: unknown; code?: unknown; password?: unknown };
|
||||
try { body = await req.json(); } catch { return NextResponse.json({ error: "Bad request" }, { status: 400 }); }
|
||||
const action = String(body.action ?? "");
|
||||
|
||||
const o = await prisma.operator.findUnique({
|
||||
where: { id: op.id },
|
||||
select: { id: true, email: true, passwordHash: true, totpSecret: true, totpEnabledAt: true },
|
||||
});
|
||||
if (!o) return NextResponse.json({ error: "Not signed in" }, { status: 401 });
|
||||
|
||||
if (action === "setup") {
|
||||
if (o.totpEnabledAt) return NextResponse.json({ error: "Two-factor is already on for this account." }, { status: 400 });
|
||||
const secret = newTotpSecret();
|
||||
await prisma.operator.update({ where: { id: o.id }, data: { totpSecret: encryptOpsSecret(secret) } });
|
||||
const url = otpauthUrl(secret, o.email, "ThreadCount ops");
|
||||
const qr = await QRCode.toString(url, { type: "svg", margin: 1, width: 220, errorCorrectionLevel: "M" });
|
||||
logOperatorEvent({ operatorId: o.id, action: "ops:2fa.setup", ip });
|
||||
return NextResponse.json({ ok: true, secret, url, qr });
|
||||
}
|
||||
|
||||
if (action === "enable") {
|
||||
if (o.totpEnabledAt) return NextResponse.json({ error: "Two-factor is already on." }, { status: 400 });
|
||||
const secret = decryptOpsSecret(o.totpSecret);
|
||||
if (!secret) return NextResponse.json({ error: "Start the setup again." }, { status: 400 });
|
||||
if (!totpVerify(secret, String(body.code ?? "").replace(/\s+/g, ""))) {
|
||||
return NextResponse.json({ error: "That code isn't right. Use the current one from your app." }, { status: 400 });
|
||||
}
|
||||
const codes = newRecoveryCodes();
|
||||
await prisma.$transaction(async (tx) => {
|
||||
await tx.operator.update({ where: { id: o.id }, data: { totpEnabledAt: new Date() } });
|
||||
await tx.operatorRecoveryCode.deleteMany({ where: { operatorId: o.id } });
|
||||
await tx.operatorRecoveryCode.createMany({ data: codes.map((c) => ({ operatorId: o.id, codeHash: hashRecoveryCode(c) })) });
|
||||
});
|
||||
logOperatorEvent({ operatorId: o.id, action: "ops:2fa.enable", ip });
|
||||
// The only time these are ever readable. Stored hashed, so there is no second chance.
|
||||
return NextResponse.json({ ok: true, codes });
|
||||
}
|
||||
|
||||
if (action === "disable") {
|
||||
if (!o.totpEnabledAt) return NextResponse.json({ ok: true });
|
||||
const pw = String(body.password ?? "");
|
||||
if (!pw || !(await bcrypt.compare(pw, o.passwordHash))) {
|
||||
return NextResponse.json({ error: "That password isn't right." }, { status: 401 });
|
||||
}
|
||||
await prisma.$transaction(async (tx) => {
|
||||
await tx.operator.update({ where: { id: o.id }, data: { totpEnabledAt: null, totpSecret: "" } });
|
||||
await tx.operatorRecoveryCode.deleteMany({ where: { operatorId: o.id } });
|
||||
});
|
||||
logOperatorEvent({ operatorId: o.id, action: "ops:2fa.disable", ip });
|
||||
return NextResponse.json({ ok: true });
|
||||
}
|
||||
|
||||
if (action === "regenerate") {
|
||||
if (!o.totpEnabledAt) return NextResponse.json({ error: "Two-factor isn't on." }, { status: 400 });
|
||||
const pw = String(body.password ?? "");
|
||||
if (!pw || !(await bcrypt.compare(pw, o.passwordHash))) {
|
||||
return NextResponse.json({ error: "That password isn't right." }, { status: 401 });
|
||||
}
|
||||
const codes = newRecoveryCodes();
|
||||
await prisma.$transaction(async (tx) => {
|
||||
await tx.operatorRecoveryCode.deleteMany({ where: { operatorId: o.id } });
|
||||
await tx.operatorRecoveryCode.createMany({ data: codes.map((c) => ({ operatorId: o.id, codeHash: hashRecoveryCode(c) })) });
|
||||
});
|
||||
logOperatorEvent({ operatorId: o.id, action: "ops:2fa.regenerate", ip });
|
||||
return NextResponse.json({ ok: true, codes });
|
||||
}
|
||||
|
||||
return NextResponse.json({ error: "Unknown action" }, { status: 400 });
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
import { NextRequest, NextResponse } from "next/server";
|
||||
import { sameOriginJson } from "@/lib/csrf";
|
||||
import { allow, clientIp } from "@/lib/ratelimit";
|
||||
import { currentOperator } from "@/lib/ops/session";
|
||||
import { ControlError, deleteFacility, PLAN_NOTE_MAX, planControl, resetDemoNow, setSwitch, type PlanAct } from "@/lib/ops/controls";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
/* The console's one write endpoint. Each action is a function in lib/ops/controls.ts; this route
|
||||
* checks the operator, shapes the input and turns a ControlError into a status. */
|
||||
export async function POST(req: NextRequest) {
|
||||
const csrf = sameOriginJson(req);
|
||||
if (csrf) return NextResponse.json({ error: csrf }, { status: 403 });
|
||||
const op = await currentOperator();
|
||||
if (!op) return NextResponse.json({ error: "Not signed in" }, { status: 401 });
|
||||
|
||||
const ip = clientIp(req.headers);
|
||||
if (!allow("ops-controls:" + op.id, 30, 15 * 60 * 1000)) {
|
||||
return NextResponse.json({ error: "Too many changes — try again in a few minutes." }, { status: 429 });
|
||||
}
|
||||
|
||||
let body: Record<string, unknown>;
|
||||
try { body = await req.json(); } catch { return NextResponse.json({ error: "Bad request" }, { status: 400 }); }
|
||||
const s = (k: string, max = 200) => String(body[k] ?? "").slice(0, max);
|
||||
const facilityId = s("facilityId", 40);
|
||||
const idOk = /^[a-z0-9]{20,40}$/.test(facilityId);
|
||||
|
||||
try {
|
||||
switch (s("action", 40)) {
|
||||
case "switch": {
|
||||
const key = s("key", 40);
|
||||
if (key !== "signupsDisabled" && key !== "demoDisabled" && key !== "plansLive") return NextResponse.json({ error: "Unknown switch" }, { status: 400 });
|
||||
await setSwitch(op, key, body.value === true, ip);
|
||||
return NextResponse.json({ ok: true });
|
||||
}
|
||||
case "demo.reset":
|
||||
await resetDemoNow(op, ip);
|
||||
return NextResponse.json({ ok: true });
|
||||
case "plan": {
|
||||
if (!idOk) return NextResponse.json({ error: "Bad request" }, { status: 400 });
|
||||
const num = (k: string) => Number(body[k]);
|
||||
let a: PlanAct;
|
||||
switch (s("act", 20)) {
|
||||
case "set": a = { act: "set", plan: s("plan", 40), planNote: s("planNote", PLAN_NOTE_MAX + 1), grandfathered: typeof body.grandfathered === "boolean" ? body.grandfathered : undefined }; break;
|
||||
case "trial": a = { act: "trial", days: num("days") }; break;
|
||||
case "paid": a = { act: "paid", months: num("months") }; break;
|
||||
case "readonly": a = { act: "readonly", on: body.on === true }; break;
|
||||
case "free": a = { act: "free" }; break;
|
||||
default: return NextResponse.json({ error: "Unknown plan action" }, { status: 400 });
|
||||
}
|
||||
await planControl(op, facilityId, a, ip);
|
||||
return NextResponse.json({ ok: true });
|
||||
}
|
||||
case "facility.delete": {
|
||||
if (!idOk) return NextResponse.json({ error: "Bad request" }, { status: 400 });
|
||||
const r = await deleteFacility(op, facilityId, s("confirm", 200), s("code", 20), ip);
|
||||
return NextResponse.json({ ok: true, deleted: r.name });
|
||||
}
|
||||
default:
|
||||
return NextResponse.json({ error: "Unknown action" }, { status: 400 });
|
||||
}
|
||||
} catch (e) {
|
||||
if (e instanceof ControlError) return NextResponse.json({ error: e.message }, { status: e.status });
|
||||
throw e;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
import { NextRequest, NextResponse } from "next/server";
|
||||
import { sameOriginJson } from "@/lib/csrf";
|
||||
import { allow, clientIp } from "@/lib/ratelimit";
|
||||
import { currentOperator } from "@/lib/ops/session";
|
||||
import { opsDb } from "@/lib/ops/db";
|
||||
import { grantReveal, REASON_MIN, REASON_MAX, REVEAL_MINUTES } from "@/lib/ops/reveal";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
/* Open a thirty-minute window on one facility's coordinator contacts. The whole act — grant row,
|
||||
* trail row, email — is lib/ops/reveal.ts; this route only checks the operator, the facility and
|
||||
* the reason, and answers. The contacts are not in the response: the page reads them, through the
|
||||
* reveal role, on its next render. */
|
||||
export async function POST(req: NextRequest) {
|
||||
const csrf = sameOriginJson(req);
|
||||
if (csrf) return NextResponse.json({ error: csrf }, { status: 403 });
|
||||
const op = await currentOperator();
|
||||
if (!op) return NextResponse.json({ error: "Not signed in" }, { status: 401 });
|
||||
|
||||
const ip = clientIp(req.headers);
|
||||
// Ten an hour: a reveal is a considered act, and a run of them across facilities is exactly the
|
||||
// pattern the limit exists to slow down.
|
||||
if (!allow("ops-reveal:" + op.id, 10, 60 * 60 * 1000)) {
|
||||
return NextResponse.json({ error: "Too many reveals in the last hour." }, { status: 429 });
|
||||
}
|
||||
|
||||
let body: { facilityId?: unknown; reason?: unknown };
|
||||
try { body = await req.json(); } catch { return NextResponse.json({ error: "Bad request" }, { status: 400 }); }
|
||||
const facilityId = String(body.facilityId ?? "").trim();
|
||||
const reason = String(body.reason ?? "").trim();
|
||||
if (!/^[a-z0-9]{20,40}$/.test(facilityId)) return NextResponse.json({ error: "Bad request" }, { status: 400 });
|
||||
if (reason.length < REASON_MIN) {
|
||||
return NextResponse.json({ error: `Give a reason — at least ${REASON_MIN} characters. It goes in the trail and in the email.` }, { status: 400 });
|
||||
}
|
||||
if (reason.length > REASON_MAX) return NextResponse.json({ error: `Keep the reason under ${REASON_MAX} characters.` }, { status: 400 });
|
||||
|
||||
// The facility's name and kind come from the ordinary role; nothing here reads a contact.
|
||||
const f = await opsDb().facility.findUnique({ where: { id: facilityId }, select: { id: true, name: true, isDemo: true } });
|
||||
if (!f) return NextResponse.json({ error: "No such facility" }, { status: 404 });
|
||||
if (f.isDemo) return NextResponse.json({ error: "The demo facility has no real contacts to reveal." }, { status: 400 });
|
||||
|
||||
const r = await grantReveal({ operator: op, facilityId: f.id, facilityName: f.name, reason, ip });
|
||||
return NextResponse.json({ ok: true, minutes: REVEAL_MINUTES, expiresAt: r.expiresAt.toISOString(), mailed: r.mailed });
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
import { NextRequest, NextResponse } from "next/server";
|
||||
import { prisma } from "@/lib/db";
|
||||
import { currentUser } from "@/lib/session";
|
||||
import { parseDataUrl, readPhoto } from "@/lib/photostore";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
/* Serves a stored capture or signature to a signed-in user of the same facility.
|
||||
*
|
||||
* Images live on disk now; rows written before that move still carry a base64 data URL, so both
|
||||
* are handled and old records keep working without a flag day. */
|
||||
export async function GET(_req: NextRequest, ctx: { params: Promise<{ id: string }> }) {
|
||||
const user = await currentUser();
|
||||
if (!user) return NextResponse.json({ error: "Not signed in" }, { status: 401 });
|
||||
const { id } = await ctx.params;
|
||||
|
||||
// Scoped by facility in the query: a photo id from another room is simply not found.
|
||||
const ph = await prisma.photo.findFirst({
|
||||
where: { id, facilityId: user.facilityId },
|
||||
select: { data: true, path: true, mime: true },
|
||||
});
|
||||
if (!ph) return NextResponse.json({ error: "Not found" }, { status: 404 });
|
||||
|
||||
let mime = ph.mime;
|
||||
let bytes: Buffer | null = null;
|
||||
|
||||
if (ph.path) {
|
||||
bytes = await readPhoto(ph.path);
|
||||
} else if (ph.data) {
|
||||
const parsed = parseDataUrl(ph.data);
|
||||
if (parsed) { mime = parsed.mime; bytes = parsed.bytes; }
|
||||
}
|
||||
|
||||
if (!bytes) return NextResponse.json({ error: "Not found" }, { status: 404 });
|
||||
if (!/^image\/(jpeg|png)$/.test(mime)) return NextResponse.json({ error: "Bad photo" }, { status: 500 });
|
||||
|
||||
return new NextResponse(new Uint8Array(bytes), {
|
||||
headers: {
|
||||
"content-type": mime,
|
||||
"cache-control": "private, max-age=3600",
|
||||
"content-disposition": "inline",
|
||||
"x-content-type-options": "nosniff",
|
||||
"content-security-policy": "sandbox",
|
||||
},
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,220 @@
|
||||
import { NextRequest, NextResponse } from "next/server";
|
||||
import { prisma } from "@/lib/db";
|
||||
import { currentUser } from "@/lib/session";
|
||||
import { bagLines, linesSummary, reqLines } from "@/lib/staffdata";
|
||||
import { decisionSummary, garmentCount } from "@/lib/staffreq";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
/* The linen room's view of staff requests.
|
||||
*
|
||||
* Its own endpoint rather than part of the snapshot, for the same reason the audit trail is: this
|
||||
* grows without limit, and putting it in the snapshot would make every page in the app heavier
|
||||
* forever to serve one screen.
|
||||
*/
|
||||
export async function GET(req: NextRequest) {
|
||||
const user = await currentUser();
|
||||
if (!user) return NextResponse.json({ error: "Not signed in" }, { status: 401 });
|
||||
|
||||
/* One person's requests, or the whole facility's.
|
||||
*
|
||||
* `?staff=` is how a staff record asks for its own order-form history. Without it that screen
|
||||
* pulled the facility's last 400 requests — every line, message and event on each — and kept the
|
||||
* handful belonging to one person, which is a large answer to a small question on a busy
|
||||
* register. Worse, that person's older requests fell off the end of the 400 and simply were not
|
||||
* on their record any more. Scoped, the ceiling is per person, and either way it is reported
|
||||
* back so a screen can say it has been reached rather than ending a history without a word.
|
||||
*/
|
||||
const staffId = (req.nextUrl.searchParams.get("staff") || "").trim().slice(0, 64);
|
||||
const requestLimit = staffId ? 200 : 400;
|
||||
|
||||
// One more row than is returned, so "there are older ones than these" is something we know
|
||||
// rather than something guessed from a full page.
|
||||
const found = await prisma.request.findMany({
|
||||
where: { facilityId: user.facilityId, ...(staffId ? { subjectId: staffId } : {}) },
|
||||
orderBy: { createdAt: "desc" },
|
||||
take: requestLimit + 1,
|
||||
include: {
|
||||
lines: { include: { item: { select: { item: true, gender: true, sizes: true } } }, orderBy: { sort: "asc" } },
|
||||
subject: { select: { first: true, last: true, num: true, dept: true } },
|
||||
messages: { orderBy: { createdAt: "asc" }, select: { id: true, fromStaff: true, authorName: true, body: true, createdAt: true } },
|
||||
events: { orderBy: { at: "asc" }, select: { id: true, label: true, meta: true, actorName: true, at: true } },
|
||||
},
|
||||
});
|
||||
const requests = found.slice(0, requestLimit);
|
||||
const moreRequests = found.length > requestLimit;
|
||||
|
||||
const mapped = requests.map((r) => {
|
||||
/* Every line, and separately the ones that are actually a pick.
|
||||
*
|
||||
* The linen room needs both. `lines` is the record — a declined fleece still belongs on the
|
||||
* order the wearer will read — while `bag` is the work: what to take off the shelf, put in
|
||||
* the bag and hand across the counter. Picking from `lines` would put a garment the manager
|
||||
* refused into somebody's hands, so the two are never the same field. */
|
||||
const lines = reqLines(r.lines);
|
||||
const bag = bagLines(lines);
|
||||
return {
|
||||
id: r.id, code: r.code, status: r.status,
|
||||
staffId: r.subjectId,
|
||||
staffName: `${r.subject.first} ${r.subject.last}`.trim(),
|
||||
staffNum: r.subject.num, ward: r.subject.dept,
|
||||
lines, bag,
|
||||
summary: linesSummary(lines), garments: garmentCount(bag), lineCount: lines.length,
|
||||
decision: decisionSummary(lines),
|
||||
reason: r.reason, note: r.note,
|
||||
managerName: r.managerName,
|
||||
/* Who the approver is, not just how their name is spelled. A manager may now approve a
|
||||
* request raised for herself, and the only thing that can show that happened is this id
|
||||
* beside the subject's — the name on its own would have any screen comparing two spellings
|
||||
* of the same person, which is precisely how a self-approval goes unnoticed. */
|
||||
managerId: r.managerId,
|
||||
declineReason: r.declineReason,
|
||||
route: r.route, collectCode: r.collectCode, holdUntil: r.holdUntil,
|
||||
signerName: r.signerName, signerRole: r.signerRole,
|
||||
signedAt: r.signedAt?.toISOString() ?? null,
|
||||
claimedAt: r.claimedAt?.toISOString() ?? null,
|
||||
/* Who raised it, and which person on the register that is.
|
||||
*
|
||||
* The name alone is not enough for the queue screen: it builds the list of people a stranded
|
||||
* request can be handed to, and the one name certain to be refused is the person who raised
|
||||
* it — a manager asking for one of her own reports' garments is exactly why the request
|
||||
* escalated with nobody to approve it. Told only her name, the screen would have to match
|
||||
* her by spelling against a ward where two people share one, which is how the wrong person
|
||||
* drops out of a dropdown.
|
||||
*
|
||||
* Only the staff column, because only it can ever name somebody who could approve anything.
|
||||
* A raise at the counter is stamped with the coordinator's own account instead, and a
|
||||
* coordinator is not on the ward register at all; a wearer raising for herself is stamped
|
||||
* with neither. Both arrive here as null, which is right — neither is a name this queue
|
||||
* could offer. */
|
||||
raisedById: r.raisedByStaffId,
|
||||
raisedByName: r.raisedByName,
|
||||
createdAt: r.createdAt.toISOString(),
|
||||
decidedAt: r.decidedAt?.toISOString() ?? null,
|
||||
messages: r.messages.map((m) => ({ id: m.id, fromStaff: m.fromStaff, authorName: m.authorName, body: m.body, at: m.createdAt.toISOString() })),
|
||||
events: r.events.map((e) => ({ id: e.id, label: e.label, meta: e.meta, actorName: e.actorName, at: e.at.toISOString() })),
|
||||
};
|
||||
});
|
||||
|
||||
/* Everything below is the linen room's queue screen — open disputes, the kit check, the
|
||||
* waitlist, damage nobody has handed back. A staff record asks for one person's order forms and
|
||||
* reads none of it, so a scoped ask stops here instead of running four more facility-wide
|
||||
* queries whose answers are thrown away. Those keys are absent from a scoped reply rather than
|
||||
* empty: an empty list would read as "there are none", which nobody asked and nobody knows. */
|
||||
if (staffId) return NextResponse.json({ requests: mapped, requestLimit, moreRequests });
|
||||
|
||||
const [disputes, cycle, waiting, damage] = await Promise.all([
|
||||
prisma.recordDispute.findMany({
|
||||
where: { facilityId: user.facilityId, resolvedAt: null },
|
||||
orderBy: { createdAt: "desc" },
|
||||
take: 100,
|
||||
include: { staff: { select: { first: true, last: true, num: true, dept: true } } },
|
||||
}),
|
||||
prisma.kitCheck.findFirst({
|
||||
where: { facilityId: user.facilityId, closedAt: null },
|
||||
orderBy: { openedAt: "desc" },
|
||||
select: { id: true, dueBy: true, openedAt: true, openedBy: true, _count: { select: { answers: true } } },
|
||||
}),
|
||||
prisma.waitlistEntry.findMany({
|
||||
where: { facilityId: user.facilityId, leftAt: null, acceptedAt: null },
|
||||
orderBy: { createdAt: "asc" },
|
||||
include: {
|
||||
staff: { select: { first: true, last: true, num: true, dept: true } },
|
||||
item: { select: { item: true, sizes: true } },
|
||||
},
|
||||
}),
|
||||
// Damage reports the counter has not yet taken the garment back for. Reporting damage and
|
||||
// asking for a replacement are two separate acts in the staff app, so a report can arrive with
|
||||
// no request behind it — and until this list existed nothing in the product ever showed one to
|
||||
// anybody, which made the Damage screen's promise ("it comes off your record when you hand it
|
||||
// in at the counter") a promise no screen could keep.
|
||||
prisma.damageReport.findMany({
|
||||
where: { facilityId: user.facilityId, handedInAt: null },
|
||||
orderBy: { createdAt: "desc" },
|
||||
take: 100,
|
||||
include: {
|
||||
staff: { select: { first: true, last: true, num: true, dept: true } },
|
||||
issue: { select: { sizeIndex: true, item: { select: { item: true, sizes: true } } } },
|
||||
},
|
||||
}),
|
||||
]);
|
||||
|
||||
/* What the open kit check has actually turned up.
|
||||
*
|
||||
* The cycle used to be reported to the linen room as a bare count of answers, which is the one
|
||||
* thing about it that doesn't matter: nobody opens a kit check to find out how many people
|
||||
* replied. The answers are the point — every one where somebody could not account for what the
|
||||
* record says they hold — and until this query existed no screen, export or report in the
|
||||
* product read them, so the whole cycle collected evidence into a table nothing looked at.
|
||||
*
|
||||
* Only the shortfalls, and only for the cycle still open. An answer that matches the record is
|
||||
* the record agreeing with itself; a closed cycle is history and belongs with the rest of it.
|
||||
*/
|
||||
const answers = cycle
|
||||
? await prisma.kitCheckAnswer.findMany({
|
||||
where: { kitCheckId: cycle.id, confirmed: { lt: prisma.kitCheckAnswer.fields.onRecord } },
|
||||
orderBy: { answeredAt: "desc" },
|
||||
take: 400,
|
||||
include: {
|
||||
staff: { select: { id: true, first: true, last: true, num: true, dept: true } },
|
||||
item: { select: { item: true, sizes: true } },
|
||||
},
|
||||
})
|
||||
: [];
|
||||
|
||||
// DamageReport.requestId is a plain column rather than a relation, so the replacement's code is
|
||||
// looked up here. It is what the linen room actually needs: "torn, and she has asked for R-0042"
|
||||
// is a different job from "torn, and she has not".
|
||||
const replacementCodes = new Map<string, string>();
|
||||
const replacementIds = damage.map((d) => d.requestId).filter((x): x is string => !!x);
|
||||
if (replacementIds.length) {
|
||||
const reps = await prisma.request.findMany({
|
||||
where: { facilityId: user.facilityId, id: { in: replacementIds } },
|
||||
select: { id: true, code: true },
|
||||
});
|
||||
for (const r of reps) replacementCodes.set(r.id, r.code);
|
||||
}
|
||||
|
||||
return NextResponse.json({
|
||||
requests: mapped, requestLimit, moreRequests,
|
||||
disputes: disputes.map((d) => ({
|
||||
id: d.id, body: d.body,
|
||||
staffName: `${d.staff.first} ${d.staff.last}`.trim(),
|
||||
staffNum: d.staff.num, ward: d.staff.dept,
|
||||
at: d.createdAt.toISOString(),
|
||||
})),
|
||||
cycle: cycle && {
|
||||
id: cycle.id, dueBy: cycle.dueBy, openedBy: cycle.openedBy,
|
||||
openedAt: cycle.openedAt.toISOString(), answers: cycle._count.answers,
|
||||
},
|
||||
shortfalls: answers.map((a) => ({
|
||||
id: a.id,
|
||||
staffId: a.staff.id,
|
||||
staffName: `${a.staff.first} ${a.staff.last}`.trim(),
|
||||
staffNum: a.staff.num, ward: a.staff.dept,
|
||||
item: a.item.item, size: String(a.item.sizes[a.sizeIndex] ?? a.sizeIndex),
|
||||
onRecord: a.onRecord, confirmed: a.confirmed, short: a.onRecord - a.confirmed,
|
||||
at: a.answeredAt.toISOString(),
|
||||
})),
|
||||
waiting: waiting.map((w) => ({
|
||||
id: w.id,
|
||||
staffName: `${w.staff.first} ${w.staff.last}`.trim(),
|
||||
staffNum: w.staff.num, ward: w.staff.dept,
|
||||
item: w.item.item, size: String(w.item.sizes[w.sizeIndex] ?? w.sizeIndex),
|
||||
since: w.createdAt.toISOString(),
|
||||
offeredAt: w.offeredAt?.toISOString() ?? null,
|
||||
})),
|
||||
damage: damage.map((d) => ({
|
||||
id: d.id, kind: d.kind, note: d.note, photoId: d.photoId,
|
||||
staffId: d.staffId,
|
||||
staffName: `${d.staff.first} ${d.staff.last}`.trim(),
|
||||
staffNum: d.staff.num, ward: d.staff.dept,
|
||||
// The garment comes off the Issue the report was raised against. That issue can be deleted
|
||||
// (a wipe, a correction) and the column is SetNull, so an older report may name no garment.
|
||||
item: d.issue ? d.issue.item.item : "",
|
||||
size: d.issue ? String(d.issue.item.sizes[d.issue.sizeIndex] ?? d.issue.sizeIndex) : "",
|
||||
requestCode: d.requestId ? replacementCodes.get(d.requestId) ?? "" : "",
|
||||
at: d.createdAt.toISOString(),
|
||||
})),
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
import { NextRequest, NextResponse } from "next/server";
|
||||
import { prisma } from "@/lib/db";
|
||||
import { currentUser } from "@/lib/session";
|
||||
import { currentStaff } from "@/lib/staffsession";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
/* "Has anything changed?", answered in one integer.
|
||||
*
|
||||
* Every screen in the product already knows how to reload itself — a mutation ends in
|
||||
* router.refresh(). What it could not know was that somebody ELSE had changed something, so a
|
||||
* phone left open on a ward showed whatever the catalogue looked like when it was opened, and a
|
||||
* coordinator adding a garment at the desk had to tell the counter to pull down to refresh.
|
||||
*
|
||||
* The obvious fix — poll the snapshot and diff it — is the expensive one: that is the facility's
|
||||
* catalogue, staff register, stock and history, re-read on a timer by every open device to learn,
|
||||
* almost always, that nothing happened. This returns the counter that the three mutating routes
|
||||
* bump, so the cost of asking is a primary-key lookup, and the cost of the real reload is paid only
|
||||
* when the number has actually moved.
|
||||
*
|
||||
* Both session kinds answer here. A coordinator at the desk and a wearer on a ward are watching the
|
||||
* same facility, and there is nothing in a bare revision number to keep apart — it says that
|
||||
* something changed, never what. Anyone with no session at all gets 401 rather than a number,
|
||||
* because even "this facility is busy" is not ours to hand out.
|
||||
*/
|
||||
export async function GET(_req: NextRequest) {
|
||||
const user = await currentUser();
|
||||
const facilityId = user?.facilityId || (await currentStaff())?.facilityId;
|
||||
if (!facilityId) return NextResponse.json({ error: "Not signed in" }, { status: 401 });
|
||||
|
||||
const f = await prisma.facility.findUnique({ where: { id: facilityId }, select: { rev: true } });
|
||||
if (!f) return NextResponse.json({ error: "Not signed in" }, { status: 401 });
|
||||
|
||||
// Never from a cache: a stale revision is indistinguishable from nothing having happened, which
|
||||
// is the one wrong answer this endpoint can give.
|
||||
return NextResponse.json({ rev: f.rev }, { headers: { "cache-control": "no-store" } });
|
||||
}
|
||||
@@ -0,0 +1,151 @@
|
||||
import { NextRequest, NextResponse } from "next/server";
|
||||
import { prisma } from "@/lib/db";
|
||||
import { currentUser } from "@/lib/session";
|
||||
import { sameOriginJson } from "@/lib/csrf";
|
||||
import { allow, clientIp } from "@/lib/ratelimit";
|
||||
import { recordAudit } from "@/lib/audit";
|
||||
import { bumpRev } from "@/lib/ops";
|
||||
import { createOrUpdateConnection, deleteConnection, domainTakenBy, getConnection, normaliseDomain, ssoConfigured, SsoError } from "@/lib/sso";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
/* An admin's single sign-on settings for their own facility.
|
||||
*
|
||||
* GET the switches, the registered domains, and whether the broker holds a connection;
|
||||
* POST connect: hand the IdP metadata to the broker, then — and only then — switch SSO on;
|
||||
* PATCH the switches and domains, with SSO already connected;
|
||||
* DELETE disconnect: remove the connection from the broker and switch everything off.
|
||||
*
|
||||
* The IdP metadata never touches this database; the broker keeps it. The switches live on the
|
||||
* facility row, so the sign-in routes can read them without asking the broker. Admin only, never
|
||||
* the demo, and 404 throughout when no broker is configured — the feature then does not exist. */
|
||||
function notHere() { return NextResponse.json({ error: "Single sign-on is not available on this server." }, { status: 404 }); }
|
||||
|
||||
async function gate(req: NextRequest, json: boolean) {
|
||||
if (!ssoConfigured()) return { res: notHere() } as const;
|
||||
const csrf = sameOriginJson(req, json);
|
||||
if (csrf) return { res: NextResponse.json({ error: csrf }, { status: 403 }) } as const;
|
||||
const user = await currentUser();
|
||||
if (!user) return { res: NextResponse.json({ error: "Not signed in" }, { status: 401 }) } as const;
|
||||
if (user.role !== "ADMIN") return { res: NextResponse.json({ error: "Admins only" }, { status: 403 }) } as const;
|
||||
if (user.isDemo) return { res: NextResponse.json({ error: "Not available in the demo." }, { status: 403 }) } as const;
|
||||
if (!allow("sso-admin:" + user.id, 30, 15 * 60 * 1000)) return { res: NextResponse.json({ error: "Too many changes — try again in a few minutes." }, { status: 429 }) } as const;
|
||||
return { user } as const;
|
||||
}
|
||||
|
||||
export async function GET() {
|
||||
if (!ssoConfigured()) return notHere();
|
||||
const user = await currentUser();
|
||||
if (!user) return NextResponse.json({ error: "Not signed in" }, { status: 401 });
|
||||
if (user.role !== "ADMIN") return NextResponse.json({ error: "Admins only" }, { status: 403 });
|
||||
const f = await prisma.facility.findUniqueOrThrow({ where: { id: user.facilityId }, select: { ssoEnabled: true, ssoRequired: true, ssoStaff: true, ssoDomains: true } });
|
||||
let connected: boolean | null = null, idp: string | null = null;
|
||||
try {
|
||||
const c = await getConnection(user.facilityId);
|
||||
connected = !!c;
|
||||
idp = c?.idpMetadata?.provider || c?.idpMetadata?.entityID || null;
|
||||
} catch {
|
||||
connected = null; // the broker could not be reached; the switches still say what they say
|
||||
}
|
||||
return NextResponse.json({ enabled: f.ssoEnabled, required: f.ssoRequired, staff: f.ssoStaff, domains: f.ssoDomains, connected, idp });
|
||||
}
|
||||
|
||||
export async function POST(req: NextRequest) {
|
||||
const g = await gate(req, true);
|
||||
if ("res" in g) return g.res;
|
||||
const { user } = g;
|
||||
let body: { metadataUrl?: unknown; metadataXml?: unknown; domains?: unknown };
|
||||
try { body = await req.json(); } catch { return NextResponse.json({ error: "Bad request" }, { status: 400 }); }
|
||||
const metadataUrl = String(body.metadataUrl ?? "").trim().slice(0, 2000);
|
||||
const metadataXml = String(body.metadataXml ?? "").trim().slice(0, 200_000);
|
||||
if (!metadataUrl && !metadataXml) return NextResponse.json({ error: "Paste your identity provider's metadata URL or its XML." }, { status: 400 });
|
||||
if (metadataUrl) {
|
||||
let u: URL;
|
||||
try { u = new URL(metadataUrl); } catch { return NextResponse.json({ error: "That metadata URL isn't a valid URL." }, { status: 400 }); }
|
||||
// Fetched by the broker server-side: only https, or a document could be swapped in transit.
|
||||
if (u.protocol !== "https:") return NextResponse.json({ error: "The metadata URL must start with https://." }, { status: 400 });
|
||||
}
|
||||
const domains = await checkDomains(body.domains, user.facilityId);
|
||||
if ("error" in domains) return NextResponse.json({ error: domains.error }, { status: 400 });
|
||||
if (domains.list.length === 0) return NextResponse.json({ error: "Add at least one email domain — it is how your people reach your sign-in." }, { status: 400 });
|
||||
|
||||
const f = await prisma.facility.findUniqueOrThrow({ where: { id: user.facilityId }, select: { name: true } });
|
||||
try {
|
||||
await createOrUpdateConnection({ facilityId: user.facilityId, facilityName: f.name, metadataUrl: metadataUrl || undefined, metadataXml: metadataXml || undefined });
|
||||
} catch (e) {
|
||||
if (e instanceof SsoError) return NextResponse.json({ error: e.message }, { status: 502 });
|
||||
throw e;
|
||||
}
|
||||
// Only once the broker holds a real connection does the switch go on.
|
||||
await prisma.facility.update({ where: { id: user.facilityId }, data: { ssoEnabled: true, ssoDomains: domains.list } });
|
||||
recordAudit(user, "settings.sso.connect", { domains: domains.list, via: metadataUrl ? "url" : "xml" }, clientIp(req.headers));
|
||||
await bumpRev(user.facilityId);
|
||||
return NextResponse.json({ ok: true, enabled: true, domains: domains.list });
|
||||
}
|
||||
|
||||
export async function PATCH(req: NextRequest) {
|
||||
const g = await gate(req, true);
|
||||
if ("res" in g) return g.res;
|
||||
const { user } = g;
|
||||
let body: { required?: unknown; staff?: unknown; domains?: unknown };
|
||||
try { body = await req.json(); } catch { return NextResponse.json({ error: "Bad request" }, { status: 400 }); }
|
||||
const f = await prisma.facility.findUniqueOrThrow({ where: { id: user.facilityId }, select: { ssoEnabled: true } });
|
||||
if (!f.ssoEnabled) return NextResponse.json({ error: "Connect your identity provider first." }, { status: 400 });
|
||||
const data: { ssoRequired?: boolean; ssoStaff?: boolean; ssoDomains?: string[] } = {};
|
||||
if (body.required !== undefined) {
|
||||
data.ssoRequired = body.required === true;
|
||||
if (data.ssoRequired) {
|
||||
// Requiring SSO with nobody left holding a password is a facility nobody can enter the day
|
||||
// the identity provider is down. Somebody — an admin — keeps a key.
|
||||
const keys = await prisma.user.count({ where: { facilityId: user.facilityId, role: "ADMIN", inactive: false, ssoBreakGlass: true } });
|
||||
if (keys === 0) return NextResponse.json({ error: "Mark at least one admin as break-glass first — they keep a working password for the day the identity provider is down." }, { status: 400 });
|
||||
}
|
||||
}
|
||||
if (body.staff !== undefined) data.ssoStaff = body.staff === true;
|
||||
if (body.domains !== undefined) {
|
||||
const domains = await checkDomains(body.domains, user.facilityId);
|
||||
if ("error" in domains) return NextResponse.json({ error: domains.error }, { status: 400 });
|
||||
if (domains.list.length === 0) return NextResponse.json({ error: "Keep at least one email domain." }, { status: 400 });
|
||||
data.ssoDomains = domains.list;
|
||||
}
|
||||
await prisma.facility.update({ where: { id: user.facilityId }, data });
|
||||
recordAudit(user, "settings.sso.update", data, clientIp(req.headers));
|
||||
await bumpRev(user.facilityId);
|
||||
return NextResponse.json({ ok: true, ...data });
|
||||
}
|
||||
|
||||
export async function DELETE(req: NextRequest) {
|
||||
const g = await gate(req, false);
|
||||
if ("res" in g) return g.res;
|
||||
const { user } = g;
|
||||
try {
|
||||
await deleteConnection(user.facilityId);
|
||||
} catch (e) {
|
||||
if (e instanceof SsoError) return NextResponse.json({ error: e.message }, { status: 502 });
|
||||
throw e;
|
||||
}
|
||||
// Everything off, whatever the broker said: the button's job is to end SSO here.
|
||||
await prisma.facility.update({ where: { id: user.facilityId }, data: { ssoEnabled: false, ssoRequired: false, ssoStaff: false } });
|
||||
recordAudit(user, "settings.sso.disconnect", {}, clientIp(req.headers));
|
||||
await bumpRev(user.facilityId);
|
||||
return NextResponse.json({ ok: true, enabled: false });
|
||||
}
|
||||
|
||||
/** Up to ten well-formed domains, each owned by no other facility. */
|
||||
async function checkDomains(raw: unknown, facilityId: string): Promise<{ list: string[] } | { error: string }> {
|
||||
const arr = Array.isArray(raw) ? raw : typeof raw === "string" ? raw.split(/[\s,]+/) : [];
|
||||
const list: string[] = [];
|
||||
for (const r of arr) {
|
||||
if (typeof r !== "string" || !r.trim()) continue;
|
||||
const d = normaliseDomain(r);
|
||||
if (!d) return { error: `“${String(r).slice(0, 60)}” isn't a domain. Use the part after the @ in your work addresses, like health.example.` };
|
||||
if (["gmail.com", "outlook.com", "hotmail.com", "yahoo.com", "icloud.com", "live.com"].includes(d)) return { error: `${d} is a public mail service, not your facility's — anyone could sign up there.` };
|
||||
if (!list.includes(d)) list.push(d);
|
||||
}
|
||||
if (list.length > 10) return { error: "Ten domains at most." };
|
||||
for (const d of list) {
|
||||
const owner = await domainTakenBy(d, facilityId);
|
||||
if (owner) return { error: `${d} is already registered by another facility.` };
|
||||
}
|
||||
return { list };
|
||||
}
|
||||
@@ -0,0 +1,132 @@
|
||||
import { NextRequest, NextResponse } from "next/server";
|
||||
import bcrypt from "bcryptjs";
|
||||
import { prisma } from "@/lib/db";
|
||||
import { sameOriginJson } from "@/lib/csrf";
|
||||
import { allow, clientIp } from "@/lib/ratelimit";
|
||||
import { normaliseCode, setStaffCookie } from "@/lib/staffsession";
|
||||
import { verifyTurnstile } from "@/lib/turnstile";
|
||||
import { recordAuthEvent } from "@/lib/audit";
|
||||
import { bumpRev } from "@/lib/ops";
|
||||
import { SLIP_DAYS, facilityToday, slipLive } from "@/lib/compute";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
const MIN_PW = 8;
|
||||
|
||||
/* Claiming your own record with the code the linen room printed for you.
|
||||
*
|
||||
* The code alone identifies the person, because it is presented before we know anything about them
|
||||
* — there is no facility to scope it to and no email to look up yet. That is why it is globally
|
||||
* unique, why it is 58 bits wide, and why this route is throttled to the point where working
|
||||
* through the space is not a strategy.
|
||||
*
|
||||
* It is spent in the same update that finds it, so two people racing the same slip can't both
|
||||
* claim the record; the loser gets the ordinary "code isn't right" message.
|
||||
*
|
||||
* It also goes stale on its own after fourteen days, because the far more likely way a slip is
|
||||
* misused is not a guessed code but a printed one nobody ever collected.
|
||||
*/
|
||||
export async function POST(req: NextRequest) {
|
||||
const csrf = sameOriginJson(req);
|
||||
if (csrf) return NextResponse.json({ error: csrf }, { status: 403 });
|
||||
|
||||
const ip = clientIp(req.headers);
|
||||
if (!allow("staff-activate:" + ip, 200, 15 * 60 * 1000)) {
|
||||
return NextResponse.json({ error: "Too many attempts — try again in 15 minutes." }, { status: 429 });
|
||||
}
|
||||
|
||||
let body: { code?: unknown; email?: unknown; password?: unknown; cfToken?: unknown; agreed?: unknown };
|
||||
try { body = await req.json(); } catch { return NextResponse.json({ error: "Bad request" }, { status: 400 }); }
|
||||
|
||||
const code = normaliseCode(String(body.code ?? ""));
|
||||
const email = String(body.email ?? "").trim().toLowerCase().slice(0, 160);
|
||||
const password = String(body.password ?? "").slice(0, 200);
|
||||
|
||||
if (!code) return NextResponse.json({ error: "That code isn't right. It's twelve characters, in three groups." }, { status: 400 });
|
||||
if (!/^[^@\s]+@[^@\s.]+\.[^@\s]+$/.test(email)) return NextResponse.json({ error: "Enter an email address you can get to." }, { status: 400 });
|
||||
if (password.length < MIN_PW) return NextResponse.json({ error: `Use at least ${MIN_PW} characters for your password.` }, { status: 400 });
|
||||
// The agreement is collected where the account is created. The screen's tick is what sets it,
|
||||
// and the door checks it too so a client that skips the box gets the same answer.
|
||||
if (body.agreed !== true) return NextResponse.json({ error: "Tick the box to agree to the terms of use and privacy policy." }, { status: 400 });
|
||||
|
||||
// Checked before the code is looked up, so a bot working through the code space is stopped by
|
||||
// Cloudflare rather than by the per-IP throttle alone.
|
||||
const cfErr = await verifyTurnstile(body.cfToken, ip);
|
||||
if (cfErr) return NextResponse.json({ error: cfErr }, { status: 400 });
|
||||
|
||||
const staff = await prisma.staff.findUnique({
|
||||
where: { activateCode: code },
|
||||
select: { id: true, facilityId: true, first: true, last: true, inactive: true, activateCodeAt: true, account: { select: { id: true } }, facility: { select: { timezone: true } } },
|
||||
});
|
||||
// One message for every way this can fail, so the response can't be used to tell a real code from
|
||||
// a spent one.
|
||||
const nope = () => NextResponse.json({ error: "That code isn't right, or it has already been used. Ask the linen room for a new one." }, { status: 400 });
|
||||
if (!staff || staff.inactive || staff.account) return nope();
|
||||
|
||||
/* An old slip is refused whether or not anyone ever claimed it. It is a bearer token on paper:
|
||||
* whoever picks one out of a folder months later can bind their own email and password to this
|
||||
* person's record and from then on be them — their issues, their requests, their signature on the
|
||||
* ward round, and their approvals queue if they manage anyone. Fourteen days is long enough for
|
||||
* someone on leave to come back to it and short enough that a forgotten one is dead by the time
|
||||
* it turns up.
|
||||
*
|
||||
* An unstamped code counts as stale: its age is unknown, so it has to be assumed old. This leans
|
||||
* on staff.selfCode in lib/ops.ts stamping activateCodeAt as it prints — if that stamp ever stops
|
||||
* being written, every new slip is dead on arrival.
|
||||
*
|
||||
* This says plainly that the slip has expired rather than joining the deliberately vague message
|
||||
* above. Landing here means the code was right, and a code is 58 bits behind a throttle and a
|
||||
* Turnstile — so anyone who gets this far is holding a real slip and needs to be told that a
|
||||
* reprint, not a retype, is the fix.
|
||||
*
|
||||
* The age is asked of slipLive() in lib/compute, the same test the staff register and the requests
|
||||
* queue use to say whether a slip is still worth chasing, counted in whole days on the facility's
|
||||
* own calendar. The day a coordinator's screen calls a slip expired is therefore the day this
|
||||
* refuses it — never a few hours later, with a nurse who was told it was dead finding it still
|
||||
* works, or one who was told it was fine being turned away. */
|
||||
const tz = staff.facility.timezone;
|
||||
if (!slipLive(staff.activateCodeAt, facilityToday(tz), tz)) {
|
||||
return NextResponse.json(
|
||||
{ error: `That code was printed ${SLIP_DAYS} or more days ago, so it has expired. Ask the linen room to print you a new slip.` },
|
||||
{ status: 400 },
|
||||
);
|
||||
}
|
||||
|
||||
// The email has to be free across staff accounts. Coordinator accounts live in a different table
|
||||
// and a person may legitimately be both — a linen-room supervisor who also wears the uniform.
|
||||
const taken = await prisma.staffAccount.findUnique({ where: { email }, select: { id: true } });
|
||||
if (taken) return NextResponse.json({ error: "That email is already on an account here. Sign in instead." }, { status: 400 });
|
||||
|
||||
const passwordHash = await bcrypt.hash(password, 12);
|
||||
|
||||
// Spend the code first, conditionally. If it has gone in the meantime, nothing was created.
|
||||
// The stamp goes with the code, so a spent row can't be read as a slip still waiting out there.
|
||||
const spent = await prisma.staff.updateMany({ where: { id: staff.id, activateCode: code }, data: { activateCode: null, activateCodeAt: null } });
|
||||
if (spent.count !== 1) return nope();
|
||||
|
||||
let account;
|
||||
try {
|
||||
account = await prisma.staffAccount.create({
|
||||
data: { facilityId: staff.facilityId, staffId: staff.id, email, passwordHash },
|
||||
select: { id: true, passwordHash: true },
|
||||
});
|
||||
} catch {
|
||||
// The code is gone but the account didn't happen — put the code back rather than stranding
|
||||
// someone with a dead slip. The original print date goes back with it: a failed attempt is not
|
||||
// a reprint and must not restart the fourteen days.
|
||||
await prisma.staff.update({ where: { id: staff.id }, data: { activateCode: code, activateCodeAt: staff.activateCodeAt } }).catch(() => {});
|
||||
return NextResponse.json({ error: "That didn't work — try again." }, { status: 500 });
|
||||
}
|
||||
|
||||
await setStaffCookie(account.id, account.passwordHash);
|
||||
recordAuthEvent(
|
||||
{ facilityId: staff.facilityId, userId: staff.id, userName: `${staff.first} ${staff.last}`.trim() || email },
|
||||
"staff:activate", ip,
|
||||
);
|
||||
// The fourth door that changes a facility's data, and the only one outside the three mutate
|
||||
// routes. Without this the coordinator standing over the nurse while she activates keeps seeing
|
||||
// "code outstanding" until some unrelated edit moves the revision, and reissues a code that
|
||||
// can't be reissued.
|
||||
await bumpRev(staff.facilityId);
|
||||
return NextResponse.json({ ok: true, name: `${staff.first} ${staff.last}` });
|
||||
}
|
||||
@@ -0,0 +1,87 @@
|
||||
import { NextRequest, NextResponse } from "next/server";
|
||||
import { sameOriginJson } from "@/lib/csrf";
|
||||
import { allow, clientIp } from "@/lib/ratelimit";
|
||||
import { readApprovalToken } from "@/lib/approvallink";
|
||||
import { StaffOpError, decideRequest } from "@/lib/staffops";
|
||||
import { recordFor } from "@/lib/audit";
|
||||
import { bumpRev } from "@/lib/ops";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
/* Deciding a request from the emailed link, without signing in.
|
||||
*
|
||||
* This is a POST and only a POST. The link in the email is a GET that renders /my/approve, and the
|
||||
* decision is made from that page — because corporate mail scanners and link-preview crawlers
|
||||
* fetch every URL in every message, and a GET that approved a uniform request would be approved by
|
||||
* the mail gateway before the manager ever saw it.
|
||||
*
|
||||
* The decision itself is decideRequest()'s, not this route's. A request now carries a line per
|
||||
* garment, and settling it means settling every line and then rolling the request up from them;
|
||||
* an approval made here that moved only the request would leave every line `awaiting`, so the
|
||||
* linen room's bag would come out empty and the wearer's order would show no decision at all.
|
||||
* There is no room on this page for a garment-by-garment answer — there is no signed-in person to
|
||||
* check one against — so it takes the whole-request shorthand, `approveAll`, which is the reason
|
||||
* that argument exists.
|
||||
*
|
||||
* Single use falls out of the state machine rather than a table of spent tokens: decideRequest's
|
||||
* update is conditional on the request still being `awaiting`, so the approve link and the decline
|
||||
* link in the same email both stop working the moment either is used.
|
||||
*/
|
||||
export async function POST(req: NextRequest) {
|
||||
const csrf = sameOriginJson(req);
|
||||
if (csrf) return NextResponse.json({ error: csrf }, { status: 403 });
|
||||
|
||||
const ip = clientIp(req.headers);
|
||||
if (!allow("staff-decide:" + ip, 200, 15 * 60 * 1000)) {
|
||||
return NextResponse.json({ error: "Too many attempts — try again in a few minutes." }, { status: 429 });
|
||||
}
|
||||
|
||||
let body: { token?: unknown; action?: unknown; reason?: unknown };
|
||||
try { body = await req.json(); } catch { return NextResponse.json({ error: "Bad request" }, { status: 400 }); }
|
||||
|
||||
const claim = readApprovalToken(String(body.token ?? ""));
|
||||
if (!claim) return NextResponse.json({ error: "That link has expired. Open the app and use the approvals queue." }, { status: 400 });
|
||||
|
||||
const action = String(body.action ?? "");
|
||||
if (action !== "approve" && action !== "decline") return NextResponse.json({ error: "Unknown action" }, { status: 400 });
|
||||
|
||||
let done: Awaited<ReturnType<typeof decideRequest>>;
|
||||
try {
|
||||
done = await decideRequest({
|
||||
requestId: claim.rid,
|
||||
managerId: claim.mid,
|
||||
approveAll: action === "approve",
|
||||
reason: body.reason,
|
||||
});
|
||||
} catch (e) {
|
||||
if (!(e instanceof StaffOpError)) throw e;
|
||||
/* The refusals are worded for somebody standing in their mail client, not in the app.
|
||||
*
|
||||
* A 403 here is decideRequest re-reading the register and finding the manager off it, or the
|
||||
* wearer off it — the check that makes a fortnight-old token in a mailbox that has since been
|
||||
* closed or handed on safe. Neither the sacked manager nor a stranger reading their mail is
|
||||
* told which of the two it was; "ask the linen room" is where that conversation belongs.
|
||||
*
|
||||
* A 409 is the link already spent, and keeps the `already` flag the page reads to show the
|
||||
* decision that was made rather than an error. */
|
||||
if (e.status === 403) return NextResponse.json({ error: "That link is no longer valid — ask the linen room." }, { status: 403 });
|
||||
if (e.status === 404) return NextResponse.json({ error: "That request is no longer there." }, { status: 404 });
|
||||
if (e.status === 409) return NextResponse.json({ error: "That request has already been decided.", already: true }, { status: 409 });
|
||||
return NextResponse.json({ error: e.message }, { status: e.status });
|
||||
}
|
||||
|
||||
// Filed under the manager's own Staff id, exactly as the in-app approval is, so the log names
|
||||
// the same person either way; the op says which door the decision came through, because "an
|
||||
// email link, from an address we can't see" is part of the answer to who authorised this.
|
||||
recordFor(
|
||||
{ facilityId: done.facilityId, userId: claim.mid, userName: done.managerName },
|
||||
done.status === "accepted" ? "staff:request.approve.email" : "staff:request.decline.email",
|
||||
{ id: claim.rid }, ip,
|
||||
);
|
||||
|
||||
// The third door into the facility's data, so the third place the revision has to move: a manager
|
||||
// approving from their mail is exactly the change the linen room's screen is waiting to see.
|
||||
await bumpRev(done.facilityId);
|
||||
|
||||
return NextResponse.json({ ok: true, status: done.status, notified: done.notified });
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
import { NextRequest, NextResponse } from "next/server";
|
||||
import { sameOriginJson } from "@/lib/csrf";
|
||||
import { clientIp } from "@/lib/ratelimit";
|
||||
import { signInStaff, staffThrottled } from "@/lib/staffauth";
|
||||
import { verifyTurnstile } from "@/lib/turnstile";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
/* The staff app's own door: the printed slip, the Play app's welcome, and /my/signin.
|
||||
*
|
||||
* The Log in box on the website reaches the same register through lib/staffauth.ts, so what counts
|
||||
* as a match, what a deactivated record is told, and what lands in the audit trail are decided in
|
||||
* one place for both. This route is the HTTP shape of it: the origin check, the security check, and
|
||||
* the throttle asked in that order. */
|
||||
export async function POST(req: NextRequest) {
|
||||
const csrf = sameOriginJson(req);
|
||||
if (csrf) return NextResponse.json({ error: csrf }, { status: 403 });
|
||||
|
||||
let body: { email?: unknown; password?: unknown; cfToken?: unknown };
|
||||
try { body = await req.json(); } catch { return NextResponse.json({ error: "Bad request" }, { status: 400 }); }
|
||||
const email = String(body.email ?? "").trim().toLowerCase().slice(0, 160);
|
||||
const password = String(body.password ?? "").slice(0, 200);
|
||||
|
||||
const ip = clientIp(req.headers);
|
||||
// Asked before the security check, because a Turnstile token is good for one use and somebody who
|
||||
// is already throttled should not spend theirs to be told so.
|
||||
if (staffThrottled(email, ip)) {
|
||||
return NextResponse.json({ error: "Too many attempts — try again in 15 minutes." }, { status: 429 });
|
||||
}
|
||||
if (!email || !password) return NextResponse.json({ error: "Enter your email and password." }, { status: 400 });
|
||||
|
||||
// The same bot check the coordinator door has. A ward account opens one person's uniform record,
|
||||
// and a manager's opens the approvals queue, so leaving this to the in-memory throttles alone
|
||||
// meant a list of hospital addresses and enough patience was the whole attack.
|
||||
const cfErr = await verifyTurnstile(body.cfToken, ip);
|
||||
if (cfErr) return NextResponse.json({ error: cfErr }, { status: 400 });
|
||||
|
||||
// `true`: this is the register's own door, so an address with no account here is a plain wrong
|
||||
// answer and is counted as one.
|
||||
const r = await signInStaff(email, password, ip, true);
|
||||
if (r.kind === "ok") return NextResponse.json({ ok: true, name: r.name });
|
||||
if (r.kind === "error") return NextResponse.json({ error: r.error }, { status: r.status });
|
||||
// Unreachable at this door: `none` is only returned when the caller asked not to be counted.
|
||||
return NextResponse.json({ error: "Email or password doesn’t match." }, { status: 401 });
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
import { NextRequest, NextResponse } from "next/server";
|
||||
import { sameOriginJson } from "@/lib/csrf";
|
||||
import { clearStaffCookie, currentStaff } from "@/lib/staffsession";
|
||||
import { clientIp } from "@/lib/ratelimit";
|
||||
import { recordAuthEvent } from "@/lib/audit";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
export async function POST(req: NextRequest) {
|
||||
const csrf = sameOriginJson(req);
|
||||
if (csrf) return NextResponse.json({ error: csrf }, { status: 403 });
|
||||
// Read the session before dropping it, so the trail can say who left. Signing out still succeeds
|
||||
// when there was nothing to sign out of.
|
||||
const sess = await currentStaff();
|
||||
await clearStaffCookie();
|
||||
if (sess) {
|
||||
recordAuthEvent(
|
||||
{ facilityId: sess.facilityId, userId: sess.staffId, userName: `${sess.first} ${sess.last}`.trim() || sess.email },
|
||||
"staff:signout", clientIp(req.headers),
|
||||
);
|
||||
}
|
||||
return NextResponse.json({ ok: true });
|
||||
}
|
||||
@@ -0,0 +1,56 @@
|
||||
import { NextRequest, NextResponse } from "next/server";
|
||||
import { currentStaff } from "@/lib/staffsession";
|
||||
import { StaffOpError, runStaffOp } from "@/lib/staffops";
|
||||
import { sameOriginJson } from "@/lib/csrf";
|
||||
import { allow, clientIp } from "@/lib/ratelimit";
|
||||
import { recordStaffAudit } from "@/lib/audit";
|
||||
import { bumpRev } from "@/lib/ops";
|
||||
import { report } from "@/lib/glitchtip";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
/* The one door for everything a wearer, manager or ward clerk changes.
|
||||
*
|
||||
* Separate from /api/mutate, and reached only with a staff session. The two never share a handler:
|
||||
* a single endpoint that accepted either kind of caller would put the whole coordinator op table
|
||||
* one authorisation slip away from a wearer's phone.
|
||||
*/
|
||||
export async function POST(req: NextRequest) {
|
||||
const sess = await currentStaff();
|
||||
if (!sess) return NextResponse.json({ error: "Not signed in" }, { status: 401 });
|
||||
const csrf = sameOriginJson(req);
|
||||
if (csrf) return NextResponse.json({ error: csrf }, { status: 403 });
|
||||
|
||||
let body: { op?: string; payload?: unknown };
|
||||
try { body = await req.json(); } catch { return NextResponse.json({ error: "Bad JSON" }, { status: 400 }); }
|
||||
const op = String(body.op || "");
|
||||
|
||||
if (!allow("staff-mutate:" + sess.accountId, 120, 60 * 1000)) {
|
||||
return NextResponse.json({ error: "Slow down — too many changes in a minute." }, { status: 429 });
|
||||
}
|
||||
// Requests are the expensive ones: each sends an email to a manager. A tighter budget stops a
|
||||
// stuck retry loop turning into a mailbox full of the same approval.
|
||||
// damage.report and waitlist.accept raise a request (and mail the manager) through the same
|
||||
// path, so they draw on the same budget — otherwise the loop just picks a different door.
|
||||
if (["request.create", "damage.report", "waitlist.accept"].includes(op) && !allow("staff-request:" + sess.staffId, 12, 60 * 60 * 1000)) {
|
||||
return NextResponse.json({ error: "That's a lot of requests in an hour — talk to the linen room." }, { status: 429 });
|
||||
}
|
||||
|
||||
const ip = clientIp(req.headers);
|
||||
try {
|
||||
const payload = (body.payload || {}) as Record<string, unknown>;
|
||||
const result = await runStaffOp(sess, op, payload);
|
||||
// The same discipline as /api/mutate, and for the same reason: a uniform issued to a ward is
|
||||
// authorised here as often as it is in the linen room, and "who approved this" is the question
|
||||
// the trail exists to answer. Recorded only after the op actually succeeded.
|
||||
recordStaffAudit(sess, op, payload, ip, result);
|
||||
// Handed back so the screen that made this change does not bounce again when it next polls.
|
||||
const rev = await bumpRev(sess.facilityId);
|
||||
return NextResponse.json({ ok: true, result, rev });
|
||||
} catch (e) {
|
||||
if (e instanceof StaffOpError) return NextResponse.json({ error: e.message }, { status: e.status });
|
||||
report({ error: e, where: "server", url: "/api/staff/mutate", tags: { op } });
|
||||
console.error(`[staff mutate ${op}]`, e, "ip=", ip);
|
||||
return NextResponse.json({ error: "Something went wrong — nothing was saved." }, { status: 500 });
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,72 @@
|
||||
import { NextRequest, NextResponse } from "next/server";
|
||||
import { allow, clientIp } from "@/lib/ratelimit";
|
||||
import { sameOriginJson } from "@/lib/csrf";
|
||||
import { verifyTurnstile } from "@/lib/turnstile";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
/* Newsletter sign-up.
|
||||
*
|
||||
* ThreadCount keeps two promises that shape this endpoint. The contact form says, at the point of
|
||||
* collection, "No mailing list, no follow-up sequence" — so nothing that arrives through the
|
||||
* contact form ever reaches this list, and the two paths share no code and no storage. And the
|
||||
* list is double opt-in: this handler only ever creates an *unconfirmed* subscriber, and Listmonk
|
||||
* emails a confirmation link that the person has to click before they can be sent anything.
|
||||
*
|
||||
* It posts to ThreadCount's own Listmonk (lists.threadcount.tech), which is a separate instance
|
||||
* from ClearAudit's: Listmonk has a single global from-address, so sharing one would have sent
|
||||
* ThreadCount's confirmation emails from ClearAudit and failed SPF/DKIM alignment for this domain.
|
||||
*
|
||||
* The list uuid is not a secret — it is designed to sit in a public subscription form — so it is
|
||||
* committed rather than left to an env var that a build could forget. */
|
||||
const LIST_UUID = process.env.LISTMONK_LIST_UUID || "734e9011-5fd5-48a7-b0ae-4ea0e1deb972";
|
||||
const LISTMONK = process.env.LISTMONK_URL || "https://lists.threadcount.tech";
|
||||
|
||||
const str = (v: unknown, max: number) => String(v ?? "").trim().slice(0, max);
|
||||
|
||||
export async function POST(req: NextRequest) {
|
||||
const csrf = sameOriginJson(req);
|
||||
if (csrf) return NextResponse.json({ error: csrf }, { status: 403 });
|
||||
|
||||
const ip = clientIp(req.headers);
|
||||
if (!allow("subscribe:" + ip, 5, 60 * 60 * 1000) || !allow("subscribe-day:" + ip, 20, 24 * 60 * 60 * 1000)) {
|
||||
return NextResponse.json({ error: "That's a few attempts in a short time. Try again later." }, { status: 429 });
|
||||
}
|
||||
|
||||
let b: Record<string, unknown>;
|
||||
try { b = await req.json(); } catch { return NextResponse.json({ error: "Bad request" }, { status: 400 }); }
|
||||
|
||||
// Honeypot, same as the contact form: a real person never fills this in.
|
||||
if (str(b.company, 100)) return NextResponse.json({ ok: true });
|
||||
|
||||
const email = str(b.email, 160).toLowerCase();
|
||||
if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
|
||||
return NextResponse.json({ error: "That email address doesn't look right." }, { status: 400 });
|
||||
}
|
||||
|
||||
const cfErr = await verifyTurnstile(b.cfToken, ip);
|
||||
if (cfErr) return NextResponse.json({ error: cfErr }, { status: 400 });
|
||||
|
||||
// Listmonk's public subscription handler. It creates the subscriber as unconfirmed and sends the
|
||||
// opt-in email itself, which is why this endpoint never needs an admin token.
|
||||
const form = new URLSearchParams({ email, name: "", l: LIST_UUID });
|
||||
|
||||
try {
|
||||
const r = await fetch(`${LISTMONK}/subscription/form`, {
|
||||
method: "POST",
|
||||
headers: { "content-type": "application/x-www-form-urlencoded" },
|
||||
body: form.toString(),
|
||||
redirect: "manual", // success is a 302 back to a thank-you page
|
||||
signal: AbortSignal.timeout(8000),
|
||||
});
|
||||
if (r.status >= 500) {
|
||||
return NextResponse.json({ error: "Sign-up is unavailable for a moment — please try again shortly." }, { status: 502 });
|
||||
}
|
||||
} catch {
|
||||
return NextResponse.json({ error: "Sign-up is unavailable for a moment — please try again shortly." }, { status: 502 });
|
||||
}
|
||||
|
||||
// Deliberately the same answer whether or not the address was already on the list: otherwise
|
||||
// this endpoint would confirm to a stranger who is subscribed.
|
||||
return NextResponse.json({ ok: true });
|
||||
}
|
||||
@@ -0,0 +1,277 @@
|
||||
"use client";
|
||||
/* Who changed what.
|
||||
*
|
||||
* Reads from its own endpoint rather than the snapshot: the trail grows without limit and putting
|
||||
* it in the snapshot would make every page in the app heavier forever, to serve a screen almost
|
||||
* nobody opens on an ordinary day.
|
||||
*
|
||||
* It shows ids rather than names on purpose — see lib/audit.ts. The id is the handle for going and
|
||||
* looking at the record; copying its contents in here would quietly build a second, unmanaged copy
|
||||
* of the staff register. */
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { useSnap } from "@/lib/client";
|
||||
import { Empty, LiveRegion, PageHead } from "@/components/ui";
|
||||
import { csvEsc, csvOf, facilityDate, formatInZone } from "@/lib/compute";
|
||||
import { downloadCsv } from "@/lib/print";
|
||||
|
||||
type Event = { id: string; at: string; who: string; op: string; target: string };
|
||||
|
||||
/* Operation names are written for the code. These are written for whoever is reading the log at
|
||||
the point somebody asks what happened. */
|
||||
const LABELS: Record<string, string> = {
|
||||
"issue.create": "Issued garments",
|
||||
"issue.return": "Recorded a return",
|
||||
"issue.exchange": "Exchanged a size",
|
||||
"issue.delete": "Deleted an issue",
|
||||
"issue.receipt": "Attached a signed receipt",
|
||||
"stocktake.apply": "Committed a stocktake",
|
||||
"stock.reorder": "Changed a par level",
|
||||
"stock.moves": "Adjusted stock",
|
||||
"stock.orderFlagged": "Raised an order from low stock",
|
||||
"catalog.add": "Added a garment",
|
||||
"catalog.update": "Edited a garment",
|
||||
"catalog.delete": "Deleted a garment",
|
||||
"catalog.duplicate": "Duplicated a garment",
|
||||
"catalog.bulk": "Bulk-changed the catalogue",
|
||||
"catalog.variantAdd": "Added a size",
|
||||
"catalog.removeSize": "Removed a size",
|
||||
"barcode.bind": "Bound a barcode",
|
||||
"barcode.unbind": "Unbound a barcode",
|
||||
"order.create": "Created an order",
|
||||
"order.receive": "Received an order",
|
||||
"order.status": "Changed an order’s status",
|
||||
"order.update": "Edited an order",
|
||||
"order.duplicate": "Duplicated an order",
|
||||
"order.lineAdd": "Added an order line",
|
||||
"order.lineQty": "Changed an order quantity",
|
||||
"order.lineRemove": "Removed an order line",
|
||||
"staff.save": "Added or edited a staff record",
|
||||
"staff.patch": "Edited a staff record",
|
||||
"staff.delete": "Deleted a staff record",
|
||||
"dept.save": "Edited a department",
|
||||
"dept.delete": "Deleted a department",
|
||||
"supplier.add": "Added a supplier",
|
||||
"supplier.update": "Edited a supplier",
|
||||
"supplier.remove": "Removed a supplier",
|
||||
"location.save": "Added or edited a location",
|
||||
"location.delete": "Deleted a location",
|
||||
"location.place": "Placed stock on a shelf",
|
||||
"approval.add": "Recorded a manager's approval",
|
||||
"approval.remove": "Removed a manager's approval",
|
||||
"alteration.add": "Logged an alteration",
|
||||
"alteration.advance": "Advanced an alteration",
|
||||
"alteration.remove": "Removed an alteration",
|
||||
"handin.add": "Recorded a hand-in",
|
||||
"pickup.contacted": "Marked a pickup contacted",
|
||||
"pickup.pickedUp": "Marked a pickup collected",
|
||||
"pickup.deliver": "Delivered to a ward",
|
||||
"request.raise": "Raised a request for somebody",
|
||||
"request.pick": "Started picking a request",
|
||||
"request.hold": "Held a request at the counter",
|
||||
"request.round": "Put a request on the ward round",
|
||||
"request.collected": "Handed a request over",
|
||||
"request.reply": "Wrote back about a request",
|
||||
"request.reassign": "Sent a request to a different approver",
|
||||
"request.withdraw": "Withdrew a request",
|
||||
"damage.handedIn": "Took a damaged garment back",
|
||||
"dispute.resolve": "Closed a record query",
|
||||
"notice.set": "Changed the ward notice",
|
||||
"kitcheck.open": "Started a kit check",
|
||||
"kitcheck.close": "Closed a kit check",
|
||||
"waitlist.offer": "Offered a waiting size",
|
||||
"staff.selfCode": "Made a staff-app activation code",
|
||||
"staff.selfClear": "Cancelled an activation code",
|
||||
"staff.selfUnlink": "Removed somebody’s staff-app access",
|
||||
"users.add": "Invited a user",
|
||||
"users.update": "Changed a user",
|
||||
"users.remove": "Removed a user",
|
||||
"settings.update": "Changed settings",
|
||||
"import.rows": "Imported data",
|
||||
"backup.restore": "Restored a backup",
|
||||
"data.reset": "Reset facility data",
|
||||
"data.wipeActivity": "Wiped activity history",
|
||||
"me.password": "Changed their own password",
|
||||
"me.profile": "Edited their own profile",
|
||||
"me.deleteAccount": "Deleted their own account",
|
||||
|
||||
/* Signing in and out, and the second factor.
|
||||
*
|
||||
* The page promises "every change made in this facility", and who reached the account is part of
|
||||
* that — a stock adjustment nobody disputes reads differently next to a run of failed sign-ins
|
||||
* from an address nobody recognises. Without these lines the trail rendered the raw op names. */
|
||||
"auth:signin": "Signed in",
|
||||
"auth:signin.failed": "A failed sign-in",
|
||||
"auth:signin.refused": "Sign-in refused (deactivated)",
|
||||
"auth:signout": "Signed out",
|
||||
"auth:signup": "Created the facility",
|
||||
"auth:password.reset": "Set a new password from a reset link",
|
||||
"2fa:setup": "Started two-factor setup",
|
||||
"2fa:enable": "Turned two-factor on",
|
||||
"2fa:disable": "Turned two-factor OFF",
|
||||
"2fa:regenerate": "Made new recovery codes",
|
||||
|
||||
/* The staff app. Every one of these is somebody on a ward changing something the linen room has
|
||||
* to live with, so they belong in the same trail rather than a second one nobody opens. */
|
||||
"staff:signin": "Signed in to the staff app",
|
||||
"staff:signin.failed": "A failed staff-app sign-in",
|
||||
"staff:signin.refused": "Staff-app sign-in refused (deactivated)",
|
||||
"staff:signout": "Signed out of the staff app",
|
||||
"staff:activate": "Claimed their own record",
|
||||
"staff:request.create": "Raised a uniform request",
|
||||
"staff:request.approve": "Approved a request (in the app)",
|
||||
"staff:request.decline": "Declined a request (in the app)",
|
||||
"staff:request.approve.email": "Approved a request (email link)",
|
||||
"staff:request.decline.email": "Declined a request (email link)",
|
||||
"staff:request.message": "Wrote about a request",
|
||||
"staff:round.sign": "Signed for a ward delivery",
|
||||
"staff:round.claim": "Confirmed a ward bag was collected",
|
||||
"staff:damage.report": "Reported damage",
|
||||
"staff:dispute.raise": "Said their record is wrong",
|
||||
"staff:waitlist.join": "Joined a waiting list",
|
||||
"staff:waitlist.leave": "Left a waiting list",
|
||||
"staff:waitlist.accept": "Took up a waitlist offer",
|
||||
"staff:kit.answer": "Answered a kit check",
|
||||
"staff:account.password": "Changed their own staff-app password",
|
||||
};
|
||||
|
||||
/** Operations worth noticing in a list of hundreds. */
|
||||
const NOTABLE = new Set([
|
||||
"catalog.delete", "catalog.removeSize", "staff.delete", "dept.delete", "location.delete", "supplier.remove",
|
||||
"users.add", "users.remove", "users.update", "settings.update", "backup.restore",
|
||||
"data.reset", "data.wipeActivity", "me.deleteAccount", "catalog.bulk",
|
||||
// Turning the second factor off weakens every account in the facility, and a refused sign-in is
|
||||
// somebody with a password trying to get in after their access was taken away. Both are worth
|
||||
// catching an eye in a list of hundreds.
|
||||
"2fa:disable", "auth:signin.refused", "staff:signin.refused",
|
||||
// The two ends of staff-app access: selfCode mints a credential that opens somebody's record,
|
||||
// selfUnlink takes their account away. Both are the linen room reaching into a person's access
|
||||
// rather than into stock, which is exactly what an admin is looking for when they open this.
|
||||
"staff.selfCode", "staff.selfUnlink",
|
||||
]);
|
||||
|
||||
/* Stamped in the facility's own zone, not the browser's. An audit trail read on a laptop that is
|
||||
travelling, or served by a machine set to UTC, has to agree with the clock on the linen-room wall
|
||||
or the times are worse than useless in a dispute. */
|
||||
function when(iso: string, tz: string) {
|
||||
return formatInZone(iso, tz, { day: "numeric", month: "short", hour: "2-digit", minute: "2-digit", hour12: false });
|
||||
}
|
||||
|
||||
export default function Activity() {
|
||||
const { s, isAdmin } = useSnap();
|
||||
const [events, setEvents] = useState<Event[]>([]);
|
||||
const [before, setBefore] = useState<string | null>(null);
|
||||
const [more, setMore] = useState(false);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [err, setErr] = useState("");
|
||||
|
||||
const load = useCallback(async (cursor: string | null) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const r = await fetch("/api/activity" + (cursor ? `?before=${encodeURIComponent(cursor)}` : ""));
|
||||
const j = await r.json();
|
||||
if (!r.ok) { setErr(j.error || "Couldn’t load the log."); return; }
|
||||
setEvents((prev) => (cursor ? [...prev, ...j.events] : j.events));
|
||||
setBefore(j.nextBefore);
|
||||
setMore(!!j.nextBefore);
|
||||
} catch {
|
||||
setErr("Couldn’t load the log.");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => { if (isAdmin) void load(null); else setLoading(false); }, [isAdmin, load]);
|
||||
|
||||
/* The file is what is on screen, and nothing more — in two senses.
|
||||
*
|
||||
* The log is paged, so what comes out is what has been loaded. If the question reaches further
|
||||
* back than the screen does, press Load older first and export again; the file states on its
|
||||
* face how far it goes, so a first page can never be handed over as though it were the whole
|
||||
* trail. And no column appears that the screen does not show: the trail also records the address
|
||||
* each change came from, which is why the endpoint never sends it to this page, and a file that
|
||||
* leaves the building by email is the last place to start handing that around. */
|
||||
function exportCsv() {
|
||||
/* Full date, and seconds — neither of which the table needs, because you read it in order.
|
||||
A spreadsheet gets re-sorted the moment it lands: "9 Sep, 14:32" sorts as text into nonsense
|
||||
and carries no year at all, and two changes inside the same minute would lose the order they
|
||||
happened in, which is the whole question when a figure is disputed. The zone is the
|
||||
facility's, the same as the screen, and it is named at the top of the file so a copy opened
|
||||
in another state is not quietly read as local time. */
|
||||
const stamp = (iso: string) =>
|
||||
`${facilityDate(iso, s.tz)} ${formatInZone(iso, s.tz, { hour: "2-digit", minute: "2-digit", second: "2-digit", hour12: false, hourCycle: "h23" })}`;
|
||||
/* The four headings are the table's, and mean the same four things: What is the plain-English
|
||||
label the screen shows rather than the op name behind it, and Record is the identifier
|
||||
exactly as shown — left blank rather than carrying the screen's dash, which in a spreadsheet
|
||||
cell is only noise. */
|
||||
const reach = more ? `${events.length} (older events not loaded)` : `${events.length} (the whole log)`;
|
||||
downloadCsv(`threadcount-activity-${s.today}.csv`,
|
||||
`Activity log,${csvEsc(s.today)}\nTimes shown in,${csvEsc(s.tz)}\nEvents in this file,${csvEsc(reach)}\n\n`
|
||||
+ csvOf(["When", "Who", "What", "Record"], events.map((e) => [stamp(e.at), e.who, LABELS[e.op] || e.op, e.target])));
|
||||
}
|
||||
|
||||
if (!isAdmin) {
|
||||
return (
|
||||
<section>
|
||||
<PageHead eyebrow="Admin" title="Activity" />
|
||||
<Empty>Only an admin can read the change log.</Empty>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<section>
|
||||
<PageHead eyebrow="Admin" title="Activity" sub="Every change made in this facility, newest first — who made it and when.">
|
||||
<button className="btn btn-ghost" onClick={exportCsv} disabled={events.length === 0} title="Downloads the events shown.">
|
||||
{more ? `Export CSV (${events.length} shown)` : "Export CSV"}
|
||||
</button>
|
||||
</PageHead>
|
||||
|
||||
<LiveRegion tone="alert" msg={err} style={{ marginTop: 16, background: "var(--color-accent-600)", color: "#fff", padding: "10px 12px", fontWeight: 600 }} />
|
||||
|
||||
{/* The log is one block with its own head and foot rather than a table adrift on the page:
|
||||
how far back it reaches is the first thing anybody asks of it, so the count sits on the
|
||||
block itself and Load older sits under the same border as the rows it extends. */}
|
||||
<div className="tc-panel" style={{ marginTop: "var(--space-5)" }}>
|
||||
<div className="tc-panel-head">
|
||||
<span>Change log</span>
|
||||
<span className="tc-panel-aside">{events.length} shown{more ? " · older events not loaded" : ""}</span>
|
||||
</div>
|
||||
<div className="table-wrap">
|
||||
<table className="table" style={{ minWidth: 620 }}>
|
||||
<thead>
|
||||
<tr><th style={{ width: 150 }}>When</th><th style={{ width: 190 }}>Who</th><th>What</th><th style={{ width: 220 }}>Record</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{events.map((e) => {
|
||||
const notable = NOTABLE.has(e.op);
|
||||
return (
|
||||
<tr key={e.id}>
|
||||
<td style={{ whiteSpace: "nowrap", fontVariantNumeric: "tabular-nums" }}>{when(e.at, s.tz)}</td>
|
||||
<td>{e.who}</td>
|
||||
{/* A line worth stopping on is marked as well as coloured. The accent is the
|
||||
brand — it is the primary button and the current menu item — so a second red
|
||||
in a list of hundreds is a guess; the mark beside the words is what actually
|
||||
says "this one". Decoration, so it is hidden from a screen reader: the
|
||||
wording of the line is the message. */}
|
||||
<td style={{ fontWeight: notable ? 700 : 400, color: notable ? "var(--color-accent-700)" : undefined }}>
|
||||
{notable && <span className="tc-mark" aria-hidden="true" />}
|
||||
{LABELS[e.op] || e.op}
|
||||
</td>
|
||||
<td style={{ fontFamily: "monospace", fontSize: 11.5, color: "var(--color-neutral-700)", wordBreak: "break-all" }}>{e.target || "—"}</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
{!events.length && !loading && (
|
||||
<tr><td colSpan={4} style={{ color: "var(--color-neutral-700)" }}>Nothing recorded yet.</td></tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div className="tc-panel-foot" style={{ display: "flex", gap: "var(--space-3)", alignItems: "center", flexWrap: "wrap" }}>
|
||||
{more && <button className="btn btn-secondary" onClick={() => load(before)} disabled={loading}>{loading ? "Loading…" : "Load older"}</button>}
|
||||
<span style={{ fontSize: 12.5, color: "var(--color-neutral-700)" }}>{events.length} shown{more ? " — Export CSV writes these, so load the older events first if the file has to reach further back." : ". Export CSV writes the whole log."}</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,116 @@
|
||||
"use client";
|
||||
/* Help: the rules and routines a coordinator needs to know once, written down in one place so the
|
||||
* working screens don't have to carry them. The owner took the explanations off every screen and
|
||||
* asked for anything worth keeping to live here instead.
|
||||
*
|
||||
* Every figure is read from this facility's own settings rather than written in, so the page can't
|
||||
* quote a number the facility has changed. The import rules are the templates' own notes, so they
|
||||
* can't drift from what the importer accepts. */
|
||||
import { useSnap } from "@/lib/client";
|
||||
import { PageHead } from "@/components/ui";
|
||||
import { CSV_TEMPLATES } from "@/lib/csv";
|
||||
import { FTE_SETS, SLIP_DAYS } from "@/lib/compute";
|
||||
import { SET_GARMENTS, setsCap, setsOnStart } from "@/lib/sets";
|
||||
|
||||
function Section({ title, children }: { title: string; children: React.ReactNode }) {
|
||||
return (
|
||||
<div className="tc-panel" style={{ marginBottom: "var(--space-4)" }}>
|
||||
<div className="tc-panel-head"><span>{title}</span></div>
|
||||
<div className="tc-panel-body" style={{ fontSize: 14, lineHeight: 1.6 }}>{children}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const list = { margin: 0, paddingLeft: "1.2em", display: "grid", gap: "var(--space-1)" } as const;
|
||||
|
||||
export default function Help() {
|
||||
const { s } = useSnap();
|
||||
const cap = setsCap(s.settings.capSets);
|
||||
const start = Math.min(cap, setsOnStart(s.settings.initialSets));
|
||||
// The table as the form lists it: a full-timer's figure first, down to the smallest.
|
||||
const table = Object.entries(FTE_SETS).filter(([, n]) => n !== null) as [string, number][];
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageHead eyebrow="Help" title="How ThreadCount works" sub="The rules behind the screens, with this facility's own figures." />
|
||||
|
||||
<Section title="What anyone may hold">
|
||||
<ul style={list}>
|
||||
<li>Up to <b>{cap} sets</b> at any time — {cap} tops and {cap} pairs of trousers. The same for every staff group, nursing included.</li>
|
||||
<li>It counts everything issued and not handed in or returned, plus anything on order for them, waiting at the counter, or approved and not yet collected. Pre-loved garments count.</li>
|
||||
<li>Garments that aren't part of a set — fleeces, jackets, maternity wear — have their own ceiling of {cap}.</li>
|
||||
<li>It isn't a yearly allowance and nothing resets in July. At the ceiling, the next garment comes by handing one in first, or on a coordinator's override, which is recorded.</li>
|
||||
<li>Change the figure under Settings → General.</li>
|
||||
</ul>
|
||||
</Section>
|
||||
|
||||
<Section title="The three routes">
|
||||
<p style={{ margin: "0 0 var(--space-2)" }}>Each staff group is on one route, chosen under Settings → Staff groups. All three stop at the same {cap} sets.</p>
|
||||
<ul style={list}>
|
||||
<li><b>FTE table</b> — the hours someone works propose their starting kit: {table.map(([fte, n]) => `${fte} FTE ${n}`).join(", ")} sets; a casual is at the manager's discretion. A manager may sign for more.</li>
|
||||
<li><b>Starting kit</b> — {start} sets on the first day ({start * SET_GARMENTS} garments), then more as needed. Nothing has to be handed back first.</li>
|
||||
<li><b>Manager approval</b> — no starting kit; the manager approves each set.</li>
|
||||
<li>A group can't be on two routes, and a group with people in it can't be removed — rename it instead.</li>
|
||||
</ul>
|
||||
</Section>
|
||||
|
||||
<Section title="The yearly figure">
|
||||
<p style={{ margin: 0 }}>“Items (FY)” on Reports and “drawn since July” on Issue Stock count what someone has drawn since 1 July. They feed the reports and the monthly exceptions list, and never limit what the counter issues. Groups on the FTE table aren't measured against one.</p>
|
||||
</Section>
|
||||
|
||||
<Section title="Hand-ins">
|
||||
<ul style={list}>
|
||||
<li>Handing a garment in frees room at the counter straight away, whether or not the credit box is ticked.</li>
|
||||
<li>The credit tick adds the good garments back to the yearly figure and to the manager's approval. Pre-loved garments earn neither.</li>
|
||||
<li>Good garments join the pre-loved pool and are reissued free; rags are counted for disposal.</li>
|
||||
</ul>
|
||||
</Section>
|
||||
|
||||
<Section title="Garment types">
|
||||
<p style={{ margin: 0 }}>A garment's type decides how it counts. Tops and trousers are each half a set; every other type counts toward the separate ceiling. A type typed in by hand that isn't on the list counts toward no set, so pick from the list.</p>
|
||||
<p style={{ margin: "var(--space-2) 0 0" }}>Each garment is tagged for the staff groups that wear it, or for all groups. Staff can only request their own groups' garments, and the counter needs a coordinator's override, which is recorded, to issue anyone a garment outside their group.</p>
|
||||
<p style={{ margin: "var(--space-2) 0 0" }}>A garment is also men's, women's or unisex. Somebody is offered the cut set as their Uniform style plus everything unisex; blank means every style until a coordinator sets it, and the counter needs the same override, also recorded, to issue anyone another cut.</p>
|
||||
</Section>
|
||||
|
||||
<Section title="The staff app">
|
||||
<ul style={list}>
|
||||
<li>Generate a code on the staff record and hand them the slip. A code works once and expires after {SLIP_DAYS} days.</li>
|
||||
<li>Record their manager first, under Manager's approval on the staff record — nobody can raise a request without one.</li>
|
||||
</ul>
|
||||
</Section>
|
||||
|
||||
<Section title="Requests and approvals">
|
||||
<ul style={list}>
|
||||
<li>A request goes to the person's manager — the same person who signs their paper order form.</li>
|
||||
<li>A manager can raise requests for the people who report to them; those go to the manager above. With nobody above, the request waits under Ward Requests → Needs an approver.</li>
|
||||
<li>Nobody approves a request they raised for somebody else.</li>
|
||||
<li>Anyone can be set as their own manager; what they approve for themselves is marked Self-approved.</li>
|
||||
</ul>
|
||||
</Section>
|
||||
|
||||
<Section title="Stock takes">
|
||||
<p style={{ margin: 0 }}>A count in progress is saved in this browser only, under your sign-in. It survives a reload, but not a move to another computer or the phone — finish a count where you started it.</p>
|
||||
</Section>
|
||||
|
||||
<Section title="Importing and exporting">
|
||||
<p style={{ margin: "0 0 var(--space-2)" }}>Settings → Data imports each list from a CSV file. The rules for each:</p>
|
||||
<ul style={list}>
|
||||
{Object.entries(CSV_TEMPLATES).map(([k, t]) => <li key={k}><b>{t.name}</b> — {t.note}</li>)}
|
||||
</ul>
|
||||
<p style={{ margin: "var(--space-2) 0 0" }}>The Staff Register's Export writes the same columns, so a ward's list can go to its manager, come back with Manager number filled in, and be imported again. The Approver name column is only for checking and is ignored on import.</p>
|
||||
</Section>
|
||||
|
||||
<Section title="Month-end journal">
|
||||
<p style={{ margin: 0 }}>One debit line per cost centre, priced at each garment's cost on the day it was issued. Finance posts the balancing credit.</p>
|
||||
</Section>
|
||||
|
||||
<Section title="Who ThreadCount emails">
|
||||
<ul style={list}>
|
||||
<li>You — password resets, and updates you've subscribed to.</li>
|
||||
<li>Staff — only about their own requests, once they've set up the staff app.</li>
|
||||
<li>Managers — the link to approve or decline a request.</li>
|
||||
</ul>
|
||||
</Section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,501 @@
|
||||
"use client";
|
||||
import Link from "next/link";
|
||||
import { useMemo, useState, useEffect } from "react";
|
||||
import { useDerived, useSnap } from "@/lib/client";
|
||||
import { PageHead, Empty, LiveRegion } from "@/components/ui";
|
||||
import { BindDialog, HandInDialog, ReturnDialog, openSlip, printCreditSlip } from "@/components/dialogs";
|
||||
import Camera from "@/components/Camera";
|
||||
import { SET_GARMENTS, allowance, approvalRemaining, bcParse, capCheck, capState, ccOf, entUsed, fmtDate, garmentForGroup, UNIFORM_STYLE_EITHER, garmentForStyle, genderLabel, groupBucket, groupsLabel, heldByStaff, inBucket, initialGarments, initialRemaining, isKit, isNursing, isPantItem, isTopItem, key, label, longLabel, money, onhand, openApproval, plOf, setsCap, setsHeld, staffName, type GarmentCounts, type IssueRec } from "@/lib/compute";
|
||||
|
||||
// src null = both shelf and pre-loved stock exist, the coordinator must pick one.
|
||||
type CartLine = { itemId: string; si: number; qty: number; src: "stock" | "order" | "preloved" | null };
|
||||
|
||||
const count = (n: number, one: string, many: string) => `${n} ${n === 1 ? one : many}`;
|
||||
|
||||
/** Where somebody stands against the ceiling before anything goes in the bag — for the tag beside
|
||||
* their name, and the line under it in the search results.
|
||||
*
|
||||
* Asked of the rule by putting one more of each kind in front of it, rather than by comparing their
|
||||
* sets with six here. The ceiling bites on tops and on pairs separately, so somebody holding six
|
||||
* tops and two pairs is "two sets" and is still refused the next top; a tag that read their sets
|
||||
* told the coordinator OK, and the counter then turned the person away. `full` names each kind the
|
||||
* next one of would be refused. Past the ceiling already, anything at all would be, so nothing is
|
||||
* singled out. */
|
||||
function standing(held: GarmentCounts, capSets: number) {
|
||||
const refused = (adding: { tops?: number; pants?: number; other?: number }) => capState({ held, adding, capSets }).over;
|
||||
const over = refused({});
|
||||
const full = over ? [] : ([refused({ tops: 1 }) && "tops", refused({ pants: 1 }) && "pairs", refused({ other: 1 }) && "garments outside a set"].filter(Boolean) as string[]);
|
||||
const room = full.length ? `no room for more ${full.length > 1 ? `${full.slice(0, -1).join(", ")} or ${full[full.length - 1]}` : full[0]}` : "";
|
||||
return { over, full, room, tag: over ? "OVER" : full.length ? "AT LIMIT" : "OK" };
|
||||
}
|
||||
|
||||
export default function IssuePage() {
|
||||
const { s, mutate } = useSnap();
|
||||
const { L, byId, staffById } = useDerived();
|
||||
const [staffQ, setStaffQ] = useState("");
|
||||
const [selId, setSelId] = useState<string | null>(null);
|
||||
const [scan, setScan] = useState("");
|
||||
const [qaQ, setQaQ] = useState("");
|
||||
const [cart, setCart] = useState<CartLine[]>([]);
|
||||
const [override, setOverride] = useState(false);
|
||||
const [apDeduct, setApDeduct] = useState<number | null>(null);
|
||||
const [issueMsg, setIssueMsg] = useState("");
|
||||
const [cam, setCam] = useState(false);
|
||||
useEffect(() => { const h = () => { setCamMsg(""); setCam(true); }; window.addEventListener("tc-scan", h); return () => window.removeEventListener("tc-scan", h); }, []);
|
||||
const [camMsg, setCamMsg] = useState("");
|
||||
const [bind, setBind] = useState("");
|
||||
const [ret, setRet] = useState<IssueRec | null>(null);
|
||||
const [busy, setBusy] = useState(false);
|
||||
const [handin, setHandin] = useState(false);
|
||||
|
||||
const sel = selId ? staffById[selId] : undefined;
|
||||
// An override is a coordinator's decision about one person and one bag, so the tick goes the
|
||||
// moment either of them changes. Left standing, a tick given for somebody past six rode along to
|
||||
// the next name clicked, and that person's ordinary collection went on the record as a rule
|
||||
// somebody bent. Cleared as the page draws rather than afterwards, so the new bag is never on
|
||||
// screen, even for an instant, with the old tick behind it.
|
||||
const bagKey = selId ? `${selId}|${cart.map((c) => `${c.itemId}:${c.si}:${c.qty}:${c.src}`).join(",")}` : "";
|
||||
const [tickedFor, setTickedFor] = useState(bagKey);
|
||||
if (tickedFor !== bagKey) { setTickedFor(bagKey); setOverride(false); }
|
||||
function addToCart(itemId: string, si: number) {
|
||||
setCart((c) => {
|
||||
const f = c.find((x) => x.itemId === itemId && x.si === si);
|
||||
if (f) return c.map((x) => x === f ? { ...x, qty: x.qty + 1 } : x);
|
||||
const oh = onhand(s, L, key(itemId, si)), pl = plOf(s, key(itemId, si));
|
||||
return [...c, { itemId, si, qty: 1, src: pl > 0 && oh >= 1 ? null : pl > 0 ? "preloved" : oh >= 1 ? "stock" : "order" }];
|
||||
});
|
||||
setIssueMsg("");
|
||||
}
|
||||
function handleScan(raw: string) {
|
||||
const p = bcParse(s, raw);
|
||||
if (!p) { setScan(""); setBind(raw.trim()); return; }
|
||||
addToCart(p.itemId, p.si); setScan("");
|
||||
}
|
||||
function camHit(raw: string) {
|
||||
const p = bcParse(s, raw);
|
||||
if (!p) { setCam(false); setBind(raw.trim()); return; }
|
||||
addToCart(p.itemId, p.si);
|
||||
setCamMsg("Added " + label(byId[p.itemId]) + " · " + byId[p.itemId].sizes[p.si] + " — keep scanning or press Done");
|
||||
}
|
||||
|
||||
const sq = staffQ.trim().toLowerCase();
|
||||
const matches = s.staff.filter((st) => !st.inactive).filter((st) => !sq || `${st.first} ${st.last}`.toLowerCase().includes(sq) || st.num.includes(sq)).slice(0, 6);
|
||||
const cartQtyAll = cart.reduce((t, c) => t + c.qty, 0);
|
||||
const nPl = cart.filter((c) => c.src === "preloved").reduce((t, c) => t + c.qty, 0);
|
||||
// Pre-loved lines are free, so they stay out of what the ward is charged and out of what a
|
||||
// manager's approval pays for. They are not out of the ceiling: six pre-loved tops fill a locker
|
||||
// exactly as six new ones do, which is why the whole cart goes to capCheck() below.
|
||||
const cartVal = cart.filter((c) => c.src !== "preloved").reduce((t, c) => t + c.qty * (byId[c.itemId]?.cost || 0), 0);
|
||||
const nStock = cart.filter((c) => c.src === "stock").reduce((t, c) => t + c.qty, 0);
|
||||
const nOrder = cart.filter((c) => c.src === "order").reduce((t, c) => t + c.qty, 0);
|
||||
const anyUnpicked = cart.some((c) => c.src === null);
|
||||
const used = sel ? entUsed(s, sel.id) : 0;
|
||||
// The one question the counter asks, worked out by the same function the server refuses with: after
|
||||
// this pickup, is this person still inside the six sets one person holds? Six at any time, every
|
||||
// group, whichever route it takes — what somebody has on their back and in their locker, never a figure
|
||||
// that starts again in July. This screen used to keep a private copy of the sum, and the day the
|
||||
// copy and the server disagreed the coordinator was asked for a tick the record then contradicted.
|
||||
//
|
||||
// The whole cart goes in, ordered-in and pre-loved lines with the rest, because all three end up on
|
||||
// the same person. Nothing here is a set count: the ceiling bites on tops and on trousers
|
||||
// separately, or twenty tops and one pair would read as one set and pass.
|
||||
const cap = useMemo(() => (sel ? capCheck(s, sel, cart.map((c) => ({ itemId: c.itemId, qty: c.qty }))) : null), [s, sel, cart]);
|
||||
// The same question with an empty bag: is this person already past what one person holds? Only an
|
||||
// override can have put them there, and the tag beside their name should say so rather than wait
|
||||
// for somebody to put a garment in the cart. Asked of the rule rather than worked out here, because
|
||||
// a locker of seven tops and two pairs is "two sets" by any count that isn't the rule's own.
|
||||
const capHeld = useMemo(() => (sel ? capCheck(s, sel, []) : null), [s, sel]);
|
||||
const selStanding = capHeld ? standing(capHeld, s.settings.capSets) : null;
|
||||
// Sets held for every person on the register, in one walk of the issues — the search results below
|
||||
// show it, and asking person by person makes a six-hundred-name register crawl.
|
||||
const heldAll = useMemo(() => heldByStaff(s), [s]);
|
||||
const capSets = setsCap(s.settings.capSets);
|
||||
// Their allowance counted in SETS, from the one function that owns that rule, so the counter says
|
||||
// what the wearer's own app says about the same person.
|
||||
const allow = useMemo(() => {
|
||||
if (!sel || !cap) return null;
|
||||
// What they hold comes from capCheck, so this screen counts a person's uniform once. The
|
||||
// facility's own figures go in with the question: left off, a site that issues four sets on
|
||||
// starting goes on telling everybody three. Both route answers go in: without the starting-kit
|
||||
// one, somebody whose group starts on a kit is told here that they start on nothing.
|
||||
return allowance({
|
||||
group: sel.group, held: cap.sets,
|
||||
nursing: isNursing(s, sel), kit: isKit(s, sel),
|
||||
capSets: s.settings.capSets, startingSets: s.settings.initialSets,
|
||||
});
|
||||
}, [s, sel, byId, cap]);
|
||||
// allowance() words its sentence about nobody in particular, so the counter can say it about the
|
||||
// person in front of it exactly as the wearer's own app says it to them.
|
||||
const allowNote = allow ? allow.note : "";
|
||||
// Garments of the starting kit this record still owes. What they are owed on starting, and no part
|
||||
// of what the counter refuses on: a new starter holds nothing and takes three sets, three is inside
|
||||
// six, and the head-room this figure used to be added to the year's tally for existed only to stop
|
||||
// somebody's own record turning their first collection into an override.
|
||||
const kitLeft = sel ? initialRemaining(s, sel) ?? 0 : 0;
|
||||
// Past what one person holds — one of the two things on this screen that asks for a tick. Nothing
|
||||
// else blocks the button: stamping an ordinary collection as an override taught the linen room to
|
||||
// tick the box without reading it, and that devalues every real one.
|
||||
const overCap = !!sel && !!cap && cap.over;
|
||||
// The other: garments in the bag that are not for this person's staff group. garmentForGroup() is
|
||||
// the question the server refuses with, and the sentence is worded as its refusal is. The same tick
|
||||
// lets either through; the server records a garment outside the group as that, never as the ceiling.
|
||||
const offItems = useMemo(() => (sel ? [...new Set(cart.map((c) => c.itemId))].map((id) => byId[id]).filter((it): it is NonNullable<typeof it> => !!it && !garmentForGroup(it, sel.group)) : []), [sel, cart, byId]);
|
||||
const offGroup = offItems.length > 0;
|
||||
const selGroup = (sel?.group || "").trim();
|
||||
const offLine = offGroup && sel ? `${offItems.map((it) => `${it.item} is for ${groupsLabel(it.groups)}`).join("; ")} — ${staffName(sel)} ${selGroup ? `is in ${selGroup}` : "has no staff group recorded"}.` : "";
|
||||
// And the third: garments in the bag that are not the cut this person is offered. garmentForStyle()
|
||||
// is the question the server refuses with, and the sentence is worded as its refusal is. Nothing is
|
||||
// ever named here for somebody left blank or set to Either — both are offered every cut — so this
|
||||
// line can only appear about a record a coordinator has set to Men's or Women's.
|
||||
const offStyleItems = useMemo(() => (sel ? [...new Set(cart.map((c) => c.itemId))].map((id) => byId[id]).filter((it): it is NonNullable<typeof it> => !!it && !garmentForStyle(it, sel.uniformStyle)) : []), [sel, cart, byId]);
|
||||
const offStyle = offStyleItems.length > 0;
|
||||
const styleLine = offStyle && sel ? `${offStyleItems.map((it) => `${it.item} is the ${genderLabel(it.gender)} cut`).join("; ")} — ${staffName(sel)} is set to ${sel.uniformStyle}.` : "";
|
||||
const needsTick = overCap || offGroup || offStyle;
|
||||
// The lead a coordinator checks against the person standing in front of them, worded the way the
|
||||
// server words it when it refuses the same pickup: what they have out now, and then the reason,
|
||||
// which comes from the rule itself rather than being worked out again here.
|
||||
//
|
||||
// What they hold includes what is on order for them or waiting to be collected, and nobody can see
|
||||
// a garment on order in a locker — so, as the refusal does, the lead says how much of it is still
|
||||
// to come, and only when some is. Somebody holding only garments outside a set is said to be
|
||||
// holding those, not to have nothing out: "nothing out" to a person wearing the fleece they were
|
||||
// issued is a sentence the coordinator can see is wrong.
|
||||
const capLead = useMemo(() => {
|
||||
if (!sel || !cap) return "";
|
||||
const inSets = cap.breach !== "other" && cap.tops + cap.pants > 0;
|
||||
const holds = inSets ? `${count(cap.tops, "top", "tops")} and ${count(cap.pants, "pair", "pairs")}` : `${count(cap.other, "garment", "garments")} outside a set`;
|
||||
const hasSome = inSets || cap.other > 0;
|
||||
const coming = inSets ? cap.owed.tops + cap.owed.pants : cap.owed.other;
|
||||
return `${staffName(sel)} ${hasSome ? `is holding ${holds}${coming ? `, ${coming} of them still to come` : ""}` : "has nothing out"}.`;
|
||||
}, [sel, cap]);
|
||||
const anyShort = cart.some((c) => (c.src === "stock" && c.qty > onhand(s, L, key(c.itemId, c.si))) || (c.src === "preloved" && c.qty > plOf(s, key(c.itemId, c.si))));
|
||||
const cannot = !sel || cart.length === 0 || anyShort || anyUnpicked || (needsTick && !override) || busy;
|
||||
|
||||
// Manager's approval, whichever route they are on: oldest with sets remaining.
|
||||
const ap = sel ? openApproval(s, sel.id) : undefined;
|
||||
const apRem = sel ? approvalRemaining(s, sel.id) : 0; // across all open approvals (draws down oldest-first)
|
||||
const cartTops = cart.reduce((t, c) => t + (isTopItem(byId[c.itemId]) && c.src !== "preloved" ? c.qty : 0), 0);
|
||||
const cartPants = cart.reduce((t, c) => t + (isPantItem(byId[c.itemId]) && c.src !== "preloved" ? c.qty : 0), 0);
|
||||
const apDefault = ap ? Math.min(apRem, Math.max(cartTops, cartPants)) : 0;
|
||||
const apN = apDeduct === null ? apDefault : Math.min(apDeduct, apRem);
|
||||
|
||||
// Repeat last issue: the person's most recent issue date, all non-returned lines that day.
|
||||
const lastSet = useMemo(() => {
|
||||
if (!sel) return [];
|
||||
const past = s.issues.filter((i) => i.staffId === sel.id && !i.returned).sort((a, b) => (a.date < b.date ? 1 : a.date > b.date ? -1 : 0));
|
||||
if (!past.length) return [];
|
||||
return past.filter((i) => i.date === past[0].date && byId[i.itemId] && !byId[i.itemId].archived);
|
||||
}, [s.issues, sel, byId]);
|
||||
|
||||
// Quick add: garments for the person's group and cut (or everything when searching), usual size
|
||||
// outlined. Both halves come from the shared helpers, so this list and the phone counter's agree.
|
||||
const profSizes = sel ? [sel.top, sel.pants].filter(Boolean).map(String) : [];
|
||||
const qaq = qaQ.trim().toLowerCase();
|
||||
const selBucket = sel ? groupBucket(sel.group) : "";
|
||||
const qaItems = useMemo(() => {
|
||||
const out: { it: (typeof s.catalog)[number]; rel: boolean }[] = [];
|
||||
for (const it of s.catalog) {
|
||||
if (it.archived) continue;
|
||||
if (qaq && !(it.item.toLowerCase().includes(qaq) || it.sku.toLowerCase().includes(qaq))) continue;
|
||||
const rel = !sel || (inBucket(it, selBucket || "All groups") && garmentForStyle(it, sel.uniformStyle));
|
||||
if (!qaq && !rel) continue;
|
||||
out.push({ it, rel });
|
||||
}
|
||||
return out.sort((a, b) => (b.rel ? 1 : 0) - (a.rel ? 1 : 0));
|
||||
}, [s.catalog, qaq, sel, selBucket]);
|
||||
const qaCap = qaq ? 14 : 10;
|
||||
const qaNote = qaItems.length > qaCap ? `Showing ${qaCap} of ${qaItems.length} — type to narrow.` : sel && !qaq ? `Showing items for ${selBucket || "their group"}${sel && sel.uniformStyle && sel.uniformStyle !== UNIFORM_STYLE_EITHER ? `, ${sel.uniformStyle} cut` : ""} — type to search everything.` : "";
|
||||
|
||||
async function doIssue() {
|
||||
if (cannot || !sel) return;
|
||||
setBusy(true);
|
||||
// Only the ticked box, and only while the box is on the screen. An override says somebody
|
||||
// knowingly bent a rule, so nothing but a person may set it, and only about the bag they were
|
||||
// shown: a tick left over from a pickup that has since come back inside six must not travel to
|
||||
// the record as a decision nobody made about this one.
|
||||
const r = await mutate<{ stock: number; ordered: number; preloved: number; apDeducted: number; apRemaining: number; offGroup?: number; offStyle?: number }>("issue.create", { staffId: sel.id, override: needsTick && override, apDeduct: ap ? apN : 0, lines: cart });
|
||||
setBusy(false);
|
||||
if (!r.ok) { setIssueMsg(r.error); return; }
|
||||
const parts = [];
|
||||
if (r.result.stock) parts.push(`issued ${r.result.stock} from stock — replenishment draft updated on Ordering`);
|
||||
if (r.result.ordered) parts.push(`ordered ${r.result.ordered} in (arrives to the pickup list)`);
|
||||
// Free to the ward, and still uniform this person is holding — so it is never said here that a
|
||||
// pre-loved garment doesn't count. It counts towards the six sets like anything else.
|
||||
if (r.result.preloved) parts.push(`${r.result.preloved} pre-loved (free — nothing charged to the ward)`);
|
||||
if (r.result.apDeducted) parts.push(`${r.result.apDeducted} set(s) off the manager's approval — ${r.result.apRemaining} remaining`);
|
||||
if (r.result.offGroup) parts.push(`${count(r.result.offGroup, "garment", "garments")} outside their staff group, on the override`);
|
||||
if (r.result.offStyle) parts.push(`${count(r.result.offStyle, "garment", "garments")} not their uniform style, on the override`);
|
||||
setCart([]); setOverride(false); setApDeduct(null);
|
||||
setIssueMsg(`Recorded for ${staffName(sel)}: ${parts.join(" · ")} (${money(cartVal)}). Print the receipt, get a signature, then tick “signed”.`);
|
||||
}
|
||||
// The slip is signed at the counter, so it has to say what actually crosses it. That is the shelf
|
||||
// and pre-loved lines together: pre-loved is free, which is why it stays out of what is charged, but
|
||||
// a free garment is still a garment the nurse walks away with and signs for. Ordered-in lines are
|
||||
// not on this slip at all — they are not in the bag today, and they get their own collection slip
|
||||
// off the pickup list when they arrive.
|
||||
const handed = cart.filter((c) => c.src === "stock" || c.src === "preloved");
|
||||
const slipData = () => ({
|
||||
staffName: staffName(sel), dept: sel?.dept, sets: handed.reduce((t, c) => t + c.qty, 0), po: "",
|
||||
// Itemised, so whoever signs can check the bag against the paper instead of trusting a total.
|
||||
lines: handed.map((c) => `${c.qty} × ${longLabel(byId[c.itemId])} — ${byId[c.itemId]?.sizes[c.si] ?? "?"}${c.src === "preloved" ? " (pre-loved)" : ""}`).join("\n"),
|
||||
dateReceived: s.today, requestedBy: sel?.num, deliveredBy: s.settings.coordinator, dateTime: s.today });
|
||||
const recent = useMemo(() => [...s.issues].filter((i) => !sel || i.staffId === sel.id).sort((a, b) => (b.createdAt > a.createdAt ? 1 : -1)).slice(0, 8), [s.issues, sel]);
|
||||
|
||||
return (
|
||||
<section>
|
||||
<PageHead eyebrow="Counter" title="Issue Stock" />
|
||||
<div className="tc-grid" style={{ display: "grid", gridTemplateColumns: "2fr 3fr", gap: "var(--space-6)" }}>
|
||||
<div>
|
||||
<div className="tc-panel">
|
||||
<div className="tc-panel-head">
|
||||
<div>1 · Staff member</div>
|
||||
{sel && <div className="tc-panel-aside">{sel.num}</div>}
|
||||
</div>
|
||||
{!sel ? (
|
||||
<>
|
||||
<div className="tc-panel-body" style={{ paddingBottom: 0 }}>
|
||||
<input className="input" style={{ width: "100%" }} aria-label="Search the staff register by name or staff number" placeholder="Search name or staff number" value={staffQ} onChange={(e) => setStaffQ(e.target.value)} autoFocus />
|
||||
</div>
|
||||
{s.staff.length === 0 && <div className="tc-panel-body"><Empty pad={3}>No staff on the register yet — add them on the Staff Register screen.</Empty></div>}
|
||||
{/* A real button, not a clickable row: this is step one of the counter's whole job, and
|
||||
a div with an onClick puts it out of reach of the keyboard, of switch access and of
|
||||
voice control. The styling is the row's, the semantics are the button's. */}
|
||||
<div className="tc-panel-list" style={{ marginTop: "var(--space-3)" }}>
|
||||
{/* The same standing as the tag once they are picked, so a name that reads fine here
|
||||
is not refused the moment somebody puts a top in the bag. */}
|
||||
{matches.map((st) => { const h = heldAll[st.id] || { tops: 0, pants: 0, other: 0, sets: 0 }; const g = standing(h, s.settings.capSets); return (
|
||||
<button type="button" key={st.id} className="tc-row" onClick={() => { setSelId(st.id); setIssueMsg(""); setApDeduct(null); }}>
|
||||
<span className="tc-row-main">
|
||||
<span className="tc-row-name" style={{ display: "block" }}>{st.first} {st.last} <span style={{ fontWeight: 400, color: "var(--color-neutral-700)" }}>{st.num}</span></span>
|
||||
<span className="tc-row-meta" style={{ display: "block" }}>{st.group} · {st.dept} · holds {h.sets} of {capSets} sets{g.tag === "OK" ? "" : ` — ${count(h.tops, "top", "tops")} and ${count(h.pants, "pair", "pairs")}${h.other ? `, ${h.other} outside a set` : ""} · ${g.over ? "past what one person holds" : g.room}`}</span>
|
||||
</span>
|
||||
</button>
|
||||
); })}
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<div className="tc-panel-body">
|
||||
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: "var(--space-2)" }}>
|
||||
<div style={{ fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: 18 }}>{staffName(sel)}</div>
|
||||
<div style={{ display: "flex", gap: "var(--space-1)" }}>
|
||||
<Link href={`/app/staff/${sel.id}`} className="btn btn-ghost">Profile</Link>
|
||||
<button className="btn btn-ghost" onClick={() => setHandin(true)}>Hand-in</button>
|
||||
<button className="btn btn-ghost" onClick={() => { setSelId(null); setApDeduct(null); }}>Change</button>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ fontSize: 13, color: "var(--color-neutral-800)", marginTop: "var(--space-1)", lineHeight: 1.7 }}>
|
||||
<div>{sel.group}</div>
|
||||
<div>{sel.dept} · Cost centre {ccOf(s, sel) || "—"}</div>
|
||||
<div>Sizes: top {sel.top || "—"}, pants {sel.pants || "—"}</div>
|
||||
</div>
|
||||
{/* What they are holding, in sets and in the two halves a set is made of, because the
|
||||
ceiling bites on each half: somebody with six tops and two pairs is "two sets" and
|
||||
still cannot be handed a seventh top. The tag says what the counter will do with the
|
||||
next garment, not how many sets they have — AT LIMIT for six tops and two pairs, and
|
||||
the sentence names the half that is full. Both are asked of lib/sets, so this screen,
|
||||
the counter phone, the wearer's app and the server's own refusal cannot answer the
|
||||
same question differently. */}
|
||||
{capHeld && selStanding && (
|
||||
<div style={{ marginTop: "var(--space-3)", display: "flex", alignItems: "center", gap: "var(--space-2)" }}>
|
||||
<span className={selStanding.over ? "tag tag-accent" : selStanding.full.length ? "tag tag-outline" : "tag tag-neutral"}>{selStanding.tag}</span>
|
||||
<span style={{ fontSize: 13 }}>Holds {capHeld.sets} of {capHeld.cap} sets — {count(capHeld.tops, "top", "tops")} and {count(capHeld.pants, "pair", "pairs")}{capHeld.other > 0 ? `, plus ${capHeld.other} outside a set` : ""}{capHeld.owed.tops + capHeld.owed.pants + capHeld.owed.other > 0 ? `, ${capHeld.owed.tops + capHeld.owed.pants + capHeld.owed.other} of them still to come` : ""}.{selStanding.over ? " Past what one person holds, so anything more needs a hand-in first or a coordinator override." : selStanding.room ? ` ${selStanding.room[0].toUpperCase()}${selStanding.room.slice(1)} without a hand-in first or a coordinator override.` : ""}</span>
|
||||
</div>
|
||||
)}
|
||||
{allow && (
|
||||
<div style={{ marginTop: "var(--space-2)", fontSize: 13, lineHeight: 1.6 }}>
|
||||
<div style={{ fontWeight: 700 }}>{allowNote}</div>
|
||||
{kitLeft > 0 && <div style={{ color: "var(--color-accent-700)", fontWeight: 600 }}>Starting kit: {kitLeft} of {initialGarments(s, sel) ?? kitLeft} garments still to issue.</div>}
|
||||
{/* Kept where the linen room can see it, and labelled for what it is. It is the
|
||||
figure the register and the monthly report quote; nothing on this screen and
|
||||
nothing on the server turns anybody away on it. */}
|
||||
<div style={{ color: "var(--color-neutral-700)" }}>{used} garment{used === 1 ? "" : "s"} drawn since July — a running total for the reports, not a limit.</div>
|
||||
</div>
|
||||
)}
|
||||
{/* Sets a manager has already signed off are credit waiting to be spent, so the block
|
||||
wears the same left rule as anything else on the screen that wants acting on. */}
|
||||
{ap && (
|
||||
<div className="tc-flag" style={{ marginTop: "var(--space-3)", border: "2px solid var(--color-text)", padding: "var(--space-2) var(--space-3)", fontSize: 13 }}>
|
||||
<div style={{ fontWeight: 700 }}>Manager's approval: {ap.sets - ap.used} of {ap.sets} sets remaining{apRem > ap.sets - ap.used ? ` (+${apRem - (ap.sets - ap.used)} on later approvals)` : ""}</div>
|
||||
<div style={{ fontSize: 12, color: "var(--color-neutral-700)" }}>Approved {fmtDate(ap.date)} by {ap.by || "the manager"}</div>
|
||||
<button className="btn btn-ghost" style={{ marginTop: "var(--space-1)", minHeight: 26, padding: "2px 8px" }} onClick={() => printCreditSlip(s, sel, ap)}>Print credit slip</button>
|
||||
</div>
|
||||
)}
|
||||
{lastSet.length > 0 && (
|
||||
<button className="btn btn-secondary" style={{ marginTop: "var(--space-3)", width: "100%" }} onClick={() => { setCart(lastSet.map((i) => ({ itemId: i.itemId, si: i.si, qty: i.qty, src: "stock" as const }))); setIssueMsg(""); }}>
|
||||
Repeat last issue — {fmtDate(lastSet[0].date)} · {lastSet.reduce((t, i) => t + i.qty, 0)} items
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="tc-panel" style={{ marginTop: "var(--space-6)" }}>
|
||||
<div className="tc-panel-head">{sel ? "Their issue history" : "Recent issues"}</div>
|
||||
{recent.length === 0 && <div className="tc-panel-body"><Empty pad={3}>{sel ? "Nothing issued yet." : "No issues recorded yet."}</Empty></div>}
|
||||
<div className="tc-panel-list">
|
||||
{recent.map((i) => {
|
||||
const it = byId[i.itemId];
|
||||
return (
|
||||
<div key={i.id} className="tc-row" style={{ fontSize: 12, gap: "var(--space-2)" }}>
|
||||
<div className="tc-row-main">
|
||||
<div className="tc-row-name" style={{ whiteSpace: "nowrap" }}>{label(it)} · {it?.sizes[i.si]} ×{i.qty}</div>
|
||||
<div className="tc-row-meta">{fmtDate(i.date)} · {staffName(staffById[i.staffId], "—")}{i.override ? " · override" : ""}{i.offGroup ? " · outside their group" : ""}{i.offStyle ? " · not their style" : ""}{i.direct ? " · pickup" : ""}</div>
|
||||
</div>
|
||||
{i.returned ? <span className="tag tag-neutral" title={i.returned.cond}>Returned</span> : i.handedIn ? <span className="tag tag-outline">Handed in</span> : <button className="btn btn-ghost" onClick={() => setRet(i)}>Return</button>}
|
||||
<label style={{ display: "flex", alignItems: "center", gap: 4, fontSize: 11, cursor: "pointer", whiteSpace: "nowrap" }}><input type="checkbox" checked={i.receipt} onChange={async (e) => { const r = await mutate("issue.receipt", { id: i.id, receipt: e.target.checked }); if (!r.ok) setIssueMsg(r.error); }} />signed</label>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="tc-panel">
|
||||
<div className="tc-panel-head">
|
||||
<div>2 · Scan items</div>
|
||||
<div className="tc-panel-aside">or tap a size below</div>
|
||||
</div>
|
||||
<div className="tc-panel-body" style={{ display: "flex", gap: "var(--space-2)" }}>
|
||||
<input className="input" style={{ flex: 1 }} aria-label="Scan a barcode to add it to the pickup" placeholder="Scan barcode, then Enter" value={scan} onChange={(e) => setScan(e.target.value)} onKeyDown={(e) => { if (e.key === "Enter" && scan.trim()) handleScan(scan); }} />
|
||||
<button className="btn btn-ghost" onClick={() => { setCamMsg(""); setCam(true); }}>Camera</button>
|
||||
</div>
|
||||
<div style={{ borderTop: "1px solid var(--color-divider)" }}>
|
||||
<div style={{ display: "flex", gap: "var(--space-2)", alignItems: "center", padding: "var(--space-2)", borderBottom: "1px solid var(--color-divider)" }}>
|
||||
<span className="tc-meta" style={{ flex: "none" }}>Quick add</span>
|
||||
<input className="input" style={{ flex: 1, minHeight: 28, padding: "2px 8px" }} aria-label="Filter the quick-add list" placeholder="Filter items…" value={qaQ} onChange={(e) => setQaQ(e.target.value)} />
|
||||
</div>
|
||||
{qaItems.length === 0 && <Empty pad={2}>{s.catalog.length === 0 ? "The catalogue is empty — import it in Settings → Data." : "No items match."}</Empty>}
|
||||
{qaItems.slice(0, qaCap).map(({ it }) => (
|
||||
<div key={it.id} style={{ display: "flex", gap: "var(--space-2)", alignItems: "center", padding: "var(--space-1) var(--space-2)", borderBottom: "1px solid var(--color-neutral-200)", flexWrap: "wrap" }}>
|
||||
<div style={{ fontSize: 12, fontWeight: 600, width: 165, flex: "none", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }} title={longLabel(it)}>{longLabel(it)}</div>
|
||||
<div style={{ display: "flex", gap: 4, flexWrap: "wrap", flex: 1, minWidth: 160, padding: "2px 0" }}>
|
||||
{it.sizes.map((sz, si) => {
|
||||
const inCart = cart.find((c) => c.itemId === it.id && c.si === si);
|
||||
const usual = profSizes.includes(String(sz));
|
||||
return <button key={si} className={"btn " + (inCart ? "btn-primary" : usual ? "btn-secondary" : "btn-ghost")} style={{ minHeight: 24, padding: "1px 7px", fontSize: 12 }} title={`${onhand(s, L, key(it.id, si))} on hand`} aria-label={`Add ${label(it)} size ${sz} — ${onhand(s, L, key(it.id, si))} on hand${inCart ? `, ${inCart.qty} in the pickup` : ""}`} onClick={() => addToCart(it.id, si)}>{String(sz)}{inCart ? ` ×${inCart.qty}` : ""}</button>;
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="tc-panel-foot" style={{ fontSize: 11, color: "var(--color-neutral-700)" }}>Tap a size to add it — tap again for +1. Outlined = their usual size, solid = in the cart; hover shows on-hand. {qaNote}</div>
|
||||
</div>
|
||||
<div className="tc-panel" style={{ marginTop: "var(--space-6)" }}>
|
||||
<div className="tc-panel-head">
|
||||
<div>3 · The pickup</div>
|
||||
{cart.length > 0 && <div className="tc-panel-aside">{cartQtyAll} item{cartQtyAll === 1 ? "" : "s"}</div>}
|
||||
</div>
|
||||
<div className="tc-panel-list">
|
||||
{cart.map((c, i) => {
|
||||
const it = byId[c.itemId]; const oh = onhand(s, L, key(c.itemId, c.si)); const pl = plOf(s, key(c.itemId, c.si));
|
||||
const setLine = (p: Partial<CartLine>) => setCart(cart.map((x, j) => j === i ? { ...x, ...p } : x));
|
||||
const note = c.src === "preloved" ? `${pl} pre-loved on hand` : c.src === "stock" ? `${oh} on hand` : c.src === null ? `${oh} on shelf · ${pl} pre-loved` : `order from ${it?.supplier || "supplier"} — lands in the pickup list when received`;
|
||||
const mine = sel && it ? [sel.top, sel.pants].filter(Boolean).map(String).filter((x) => it.sizes.map(String).includes(x)) : [];
|
||||
const sizeHint = it && mine.length && !mine.includes(String(it.sizes[c.si])) ? `Their usual size is ${mine.join(" / ")}` : "";
|
||||
const short = (c.src === "stock" && c.qty > oh) || (c.src === "preloved" && c.qty > pl);
|
||||
return (
|
||||
<div key={c.itemId + c.si} className={"tc-row" + (short || c.src === null ? " tc-flag" : "")} style={{ flexWrap: "wrap" }}>
|
||||
<div className="tc-row-main" style={{ minWidth: 200 }}>
|
||||
<div className="tc-row-name">{label(it)}</div>
|
||||
<div className="tc-row-meta">Size {it?.sizes[c.si]} · {c.src === "preloved" ? "free" : `${money(it?.cost || 0)} each`} · {note}</div>
|
||||
{sizeHint && <div style={{ fontSize: 12, color: "var(--color-accent-700)", fontWeight: 600, marginTop: 2 }}>{sizeHint}</div>}
|
||||
{/* A short line and an unpicked source both stop the issue being recorded, so each
|
||||
one says so in words on the line it belongs to — the tag carries its own mark,
|
||||
and the row carries the rule. */}
|
||||
{c.src === "stock" && c.qty > oh && <div style={{ marginTop: 2 }}><span className="tag tag-flag">Not enough on the shelf — switch to order in</span></div>}
|
||||
{c.src === "preloved" && c.qty > pl && <div style={{ marginTop: 2 }}><span className="tag tag-flag">Not enough in the pre-loved pool</span></div>}
|
||||
{c.src === null && <div style={{ fontSize: 11, color: "var(--color-accent-700)", fontWeight: 700, marginTop: 2 }}><span className="tc-mark" aria-hidden="true" />Both available — pick a source</div>}
|
||||
</div>
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: 4, alignItems: "flex-end" }}>
|
||||
{/* Three mutually exclusive choices, so the group is named once and each button
|
||||
says whether it is the one in force — one <label> could not name all three. */}
|
||||
<div className="seg" role="group" aria-label={`Where ${label(it)} size ${it?.sizes[c.si]} comes from`}>
|
||||
<button className={"seg-opt" + (c.src === "stock" ? " btn-primary" : "")} aria-pressed={c.src === "stock"} onClick={() => setLine({ src: "stock" })}>From stock</button>
|
||||
{(pl > 0 || c.src === "preloved") && <button className={"seg-opt" + (c.src === "preloved" ? " btn-primary" : "")} aria-pressed={c.src === "preloved"} onClick={() => setLine({ src: "preloved" })}>Pre-loved ({pl})</button>}
|
||||
<button className={"seg-opt" + (c.src === "order" ? " btn-primary" : "")} aria-pressed={c.src === "order"} onClick={() => setLine({ src: "order" })}>Order in</button>
|
||||
</div>
|
||||
{c.src === "order" && <span style={{ fontSize: 11, color: "var(--color-neutral-700)" }} title="Supplier is set by the product">{it?.supplier || "Supplier not set on product"}</span>}
|
||||
</div>
|
||||
<span style={{ display: "inline-flex", alignItems: "center", gap: "var(--space-1)" }}>
|
||||
<button className="btn btn-ghost" style={{ padding: "0 8px", minHeight: 26 }} aria-label={`One fewer ${label(it)} size ${it?.sizes[c.si]}`} onClick={() => setCart(c.qty <= 1 ? cart.filter((_, j) => j !== i) : cart.map((x, j) => j === i ? { ...x, qty: x.qty - 1 } : x))}>−</button>
|
||||
<span style={{ width: 24, textAlign: "center", fontWeight: 700 }}>{c.qty}</span>
|
||||
<button className="btn btn-ghost" style={{ padding: "0 8px", minHeight: 26 }} aria-label={`One more ${label(it)} size ${it?.sizes[c.si]}`} onClick={() => setLine({ qty: c.qty + 1 })}>+</button>
|
||||
</span>
|
||||
<button className="btn btn-ghost" aria-label={`Remove ${label(it)} size ${it?.sizes[c.si]} from the pickup`} onClick={() => setCart(cart.filter((_, j) => j !== i))}>Remove</button>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
{cart.length === 0 && <div className="tc-panel-body"><Empty>Scan a barcode or choose an item to start a pickup.</Empty></div>}
|
||||
{/* The pickup that goes through, said in figures a coordinator can check against the pile on
|
||||
the counter rather than left as a button that simply doesn't complain. It stands where the
|
||||
red box used to: somebody collecting more than they expected — a new starter's kit, a
|
||||
fourth set for somebody on the starting kit — is owed the reason it is allowed, and making them
|
||||
sign that off as an override taught the linen room to tick the box without reading it. */}
|
||||
{sel && cap && cart.length > 0 && !overCap && (
|
||||
<div style={{ margin: "var(--space-4)", border: "2px solid var(--color-text)", padding: "var(--space-3) var(--space-4)", fontSize: 13 }}>
|
||||
<div style={{ fontWeight: 800 }}>Inside what one person holds{needsTick ? "" : " — no override needed"}</div>
|
||||
<div>{capLead} After this pickup: {cap.note}</div>
|
||||
</div>
|
||||
)}
|
||||
{/* One box and one tick for every reason, each reason said in its own words — as the
|
||||
server's refusal names all of them at once, because one tick answers all of them at
|
||||
once. The server records the ceiling, the staff group and the cut apart, so the report
|
||||
can tell them apart too. */}
|
||||
{needsTick && sel && cap && (
|
||||
<div className="tc-flag" style={{ margin: "var(--space-4)", border: "2px solid var(--color-text)", padding: "var(--space-3) var(--space-4)", fontSize: 13 }}>
|
||||
{overCap && (
|
||||
<>
|
||||
<div style={{ fontWeight: 800, color: "var(--color-accent-700)" }}><span className="tc-mark" aria-hidden="true" />Past what one person holds</div>
|
||||
<div>{capLead} {cap.note}</div>
|
||||
</>
|
||||
)}
|
||||
{offGroup && (
|
||||
<>
|
||||
<div style={{ fontWeight: 800, color: "var(--color-accent-700)", marginTop: overCap ? "var(--space-2)" : 0 }}><span className="tc-mark" aria-hidden="true" />Outside their staff group</div>
|
||||
<div>{offLine}</div>
|
||||
</>
|
||||
)}
|
||||
{offStyle && (
|
||||
<>
|
||||
<div style={{ fontWeight: 800, color: "var(--color-accent-700)", marginTop: overCap || offGroup ? "var(--space-2)" : 0 }}><span className="tc-mark" aria-hidden="true" />Not their uniform style</div>
|
||||
<div>{styleLine}</div>
|
||||
</>
|
||||
)}
|
||||
<label style={{ display: "flex", gap: "var(--space-2)", alignItems: "center", marginTop: "var(--space-2)", cursor: "pointer" }}><input type="checkbox" checked={override} onChange={() => setOverride(!override)} /> Issue anyway (coordinator override for past the ceiling, outside their group or not their uniform style, noted on the record)</label>
|
||||
</div>
|
||||
)}
|
||||
{ap && cart.length > 0 && (
|
||||
<div style={{ display: "flex", alignItems: "center", gap: "var(--space-2)", padding: "var(--space-3) var(--space-4) 0", fontSize: 13, flexWrap: "wrap" }}>
|
||||
<span>Deduct from the manager's approval:</span>
|
||||
<button className="btn btn-ghost" style={{ padding: "0 8px", minHeight: 24 }} aria-label="One fewer set off the manager's approval" onClick={() => setApDeduct(Math.max(0, apN - 1))} disabled={apN <= 0}>−</button>
|
||||
<b style={{ width: 20, textAlign: "center" }}>{apN}</b>
|
||||
<button className="btn btn-ghost" style={{ padding: "0 8px", minHeight: 24 }} aria-label="One more set off the manager's approval" onClick={() => setApDeduct(Math.min(apN + 1, apRem))} disabled={apN >= apRem}>+</button>
|
||||
<span style={{ color: "var(--color-neutral-700)" }}>sets ({apRem} remaining)</span>
|
||||
</div>
|
||||
)}
|
||||
{/* What the bag is worth, at the bottom of the bag. This is the figure the coordinator
|
||||
reads back before anyone signs, so it is the screen's figure, not a line of small
|
||||
print in a toolbar. */}
|
||||
<div className="tc-panel-foot" style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: "var(--space-3)", flexWrap: "wrap" }}>
|
||||
<div>
|
||||
<div className="tc-meta">{cartQtyAll} item{cartQtyAll === 1 ? "" : "s"} · to charge</div>
|
||||
<div className="tc-figure">{money(cartVal)}</div>
|
||||
<div style={{ fontSize: 11, color: "var(--color-neutral-700)" }}>{cart.length ? `${nStock} from stock${nPl > 0 ? ` · ${nPl} pre-loved (free)` : ""}${nOrder > 0 ? ` · ${nOrder} ordered in` : ""}` : ""}</div>
|
||||
</div>
|
||||
<div style={{ display: "flex", gap: "var(--space-2)", flexWrap: "wrap" }}>
|
||||
<button className="btn btn-secondary" onClick={() => openSlip("collection", slipData())} disabled={cannot}>Collection slip</button>
|
||||
<button className="btn btn-secondary" onClick={() => openSlip("delivery", slipData())} disabled={cannot}>Delivery slip</button>
|
||||
<button className="btn btn-primary" onClick={doIssue} disabled={cannot}>Record issue</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<LiveRegion msg={issueMsg} style={{ marginTop: "var(--space-3)", borderTop: "2px solid var(--color-text)", paddingTop: "var(--space-2)", fontSize: 13, fontWeight: 600 }} />
|
||||
</div>
|
||||
</div>
|
||||
{cam && <Camera onHit={camHit} message={camMsg} onClose={() => setCam(false)} />}
|
||||
{bind && <BindDialog code={bind} onClose={() => setBind("")} onBound={(itemId, si) => addToCart(itemId, si)} />}
|
||||
{ret && <ReturnDialog issue={ret} onClose={() => setRet(null)} />}
|
||||
{handin && sel && <HandInDialog staff={sel} onClose={() => setHandin(false)} onDone={(msg) => setIssueMsg(msg)} />}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
import { redirect } from "next/navigation";
|
||||
import { currentUser } from "@/lib/session";
|
||||
import { buildSnapshot } from "@/lib/snapshot";
|
||||
import { SnapshotProvider } from "@/lib/client";
|
||||
import Shell from "@/components/Shell";
|
||||
import Analytics from "@/components/Analytics";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
export default async function AppLayout({ children }: { children: React.ReactNode }) {
|
||||
const user = await currentUser();
|
||||
if (!user) redirect("/auth");
|
||||
const snap = await buildSnapshot(user);
|
||||
return (
|
||||
<SnapshotProvider snap={snap}>
|
||||
<Shell>{children}</Shell>
|
||||
<Analytics site="app" />
|
||||
</SnapshotProvider>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,374 @@
|
||||
"use client";
|
||||
import Link from "next/link";
|
||||
import { useParams, useRouter } from "next/navigation";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { useDerived, useSnap } from "@/lib/client";
|
||||
import { PageHead, Empty, Field, ItemSizePicker, KpiStrip, LiveRegion } from "@/components/ui";
|
||||
import { ReceiveDialog } from "@/components/dialogs";
|
||||
import { viewPhoto } from "@/lib/photo";
|
||||
import { ccBudgetNote, ccFor, ccOfOrder, csvOf, daysBetween, fmtDate, isOverdue, label, money, orderTotal, staffName, statusTag, supplierInfo, csvEsc } from "@/lib/compute";
|
||||
import { downloadCsv, esc, openPrintWindow } from "@/lib/print";
|
||||
|
||||
export default function OrderDetail() {
|
||||
const { id } = useParams<{ id: string }>();
|
||||
const { s, isAdmin, mutate } = useSnap();
|
||||
const { byId, staffById } = useDerived();
|
||||
const router = useRouter();
|
||||
const o = s.orders.find((x) => x.id === id);
|
||||
const [rcv, setRcv] = useState(false);
|
||||
const [err, setErr] = useState("");
|
||||
const [pick, setPick] = useState("");
|
||||
const [priceDraft, setPriceDraft] = useState<Record<string, string>>({});
|
||||
const [draft, setDraft] = useState<Record<string, string>>({});
|
||||
// What the coordinator has tapped on the quantity steppers but the server hasn't confirmed yet.
|
||||
// The state is what the screen shows; the ref is what the next tap adds to while it is set,
|
||||
// because it is current the instant a tap happens, where the state and the snapshot are both a
|
||||
// render (or a whole round trip) behind.
|
||||
const [qtyDraft, setQtyDraft] = useState<Record<string, number>>({});
|
||||
const qtyWanted = useRef<Record<string, number>>({});
|
||||
// What the snapshot said about a line as its write came back, and the lines the latest snapshot
|
||||
// has. Both are read by the backstop below, from a timer: a timer armed two renders ago still
|
||||
// closes over that render's copy of the order, and judging the screen out of date from a copy
|
||||
// that is itself out of date is exactly how the pre-tap quantity gets back under a finger.
|
||||
const qtySeen = useRef<Record<string, number>>({});
|
||||
const snapLines = useRef(o?.lines);
|
||||
// The field edits a debounce is still sitting on, so leaving the page can send them (see below).
|
||||
const fieldWanted = useRef<Record<string, string>>({});
|
||||
const timers = useRef<Record<string, ReturnType<typeof setTimeout>>>({});
|
||||
/* Anything still in a debounce when this screen goes away is sent, not thrown away.
|
||||
*
|
||||
* Clearing the timers on unmount was silent data loss: tap + on a quantity, or type the invoice
|
||||
* number, then click straight through to another page inside the debounce window and the change
|
||||
* vanished — it was on the screen as the coordinator left, and the supplier got the old figure.
|
||||
* The writes go out bare because the component is already gone: there is nothing left to show an
|
||||
* error in, and the record is one refresh away for whoever opens it next. */
|
||||
const flush = useRef<() => void>(() => {});
|
||||
useEffect(() => {
|
||||
flush.current = () => {
|
||||
for (const [k, v] of Object.entries(fieldWanted.current)) void mutate("order.update", { id, [k]: v });
|
||||
for (const [lineId, qty] of Object.entries(qtyWanted.current)) void mutate("order.lineQty", { id, lineId, qty });
|
||||
};
|
||||
});
|
||||
useEffect(() => { const t = timers.current, f = flush; return () => { Object.values(t).forEach(clearTimeout); f.current(); }; }, []);
|
||||
useEffect(() => { snapLines.current = o?.lines; });
|
||||
// Hand a line back to the snapshot once the refreshed snapshot agrees with what was tapped (or
|
||||
// the line is gone). Waiting for agreement rather than for the write to return matters: the
|
||||
// provider re-renders on its own the moment a write lands, still carrying the old snapshot, and
|
||||
// dropping the tapped number there would flick the counter back to the old quantity and again
|
||||
// look like the taps had been lost.
|
||||
useEffect(() => {
|
||||
setQtyDraft((d) => {
|
||||
const n = Object.fromEntries(Object.entries(d).filter(([k, v]) => {
|
||||
const line = o?.lines.find((l) => l.id === k);
|
||||
return qtyWanted.current[k] !== undefined || (!!line && line.qty !== v);
|
||||
}));
|
||||
return Object.keys(n).length === Object.keys(d).length ? d : n;
|
||||
});
|
||||
});
|
||||
|
||||
if (!o) return <section><PageHead eyebrow="Supply · Order" title="Order not found" /><Empty><Link href="/app/orders">← All orders</Link></Empty></section>;
|
||||
|
||||
const st = o.staffId ? staffById[o.staffId] : undefined;
|
||||
const overdue = isOverdue(o, s.today);
|
||||
const forLabel = o.orderFor === "Stock" ? "For stock" : "For " + staffName(st, "staff member");
|
||||
const ccCode = ccOfOrder(s, o, staffById);
|
||||
const ccNote = ccBudgetNote(s, byId, staffById, ccCode, " (incl. this one)");
|
||||
|
||||
function saveField(k: string, v: string) {
|
||||
setDraft((d) => ({ ...d, [k]: v }));
|
||||
fieldWanted.current[k] = v;
|
||||
clearTimeout(timers.current[k]);
|
||||
timers.current[k] = setTimeout(async () => {
|
||||
// Off the pending list the moment it is on its way: a keystroke that lands after this point
|
||||
// has already put its own value back and scheduled its own timer.
|
||||
if (fieldWanted.current[k] === v) delete fieldWanted.current[k];
|
||||
const r = await mutate("order.update", { id: o!.id, [k]: v });
|
||||
if (!r.ok) setErr(r.error);
|
||||
}, 400);
|
||||
}
|
||||
const val = (k: keyof typeof o) => (draft[k] !== undefined ? draft[k] : String(o[k] ?? ""));
|
||||
/* The order as the coordinator can actually see it: the taps and the typing still sitting in a
|
||||
* debounce, laid over the snapshot that has not caught up with them yet.
|
||||
*
|
||||
* Everything that puts this order in front of a person reads it — the lines, the total, the
|
||||
* printed purchase order, the CSV, the receive dialog — so what leaves the building says what the
|
||||
* screen said when it was asked for. Printing from the snapshot sent the supplier a tunic count
|
||||
* one tap behind. Sending the pending write first would not have fixed it: the refreshed snapshot
|
||||
* lands some time after the write returns, and the print window has to open on the click itself
|
||||
* or the browser blocks it. Actions the server answers out of its own copy go through flushQty()
|
||||
* instead — that is what the database has to be right about. */
|
||||
const onScreen = { ...o, ref: val("ref"), invoice: val("invoice"), tracking: val("tracking"), expected: val("expected"), supplier: val("supplier"), notes: val("notes"), lines: o.lines.map((l) => (qtyDraft[l.id] !== undefined ? { ...l, qty: qtyDraft[l.id] } : l)) };
|
||||
async function act(op: string, payload: unknown) { setErr(""); const r = await mutate(op, payload); if (!r.ok) setErr(r.error); return r.ok; }
|
||||
/* Steppers count from what has been tapped, never from the snapshot.
|
||||
*
|
||||
* order.lineQty takes an absolute quantity and the snapshot only catches up once a write comes
|
||||
* back, so reading l.qty on every tap meant six quick taps on the size-14 tunic all posted
|
||||
* qty: 2: the line settled at 2 or 3 and the purchase order went to the supplier four tunics
|
||||
* short. Each tap now adds to the pending figure and the debounce sends whatever it reached.
|
||||
*
|
||||
* `shown` is the number on the screen, which is the one the coordinator is counting from. It
|
||||
* matters in the gap between a write landing and the refreshed snapshot arriving: the pending
|
||||
* figure is cleared the moment the write returns, so a tap in that gap would otherwise fall back
|
||||
* to the snapshot and count from the old quantity again — the very defect this exists to stop.
|
||||
* The pending figure still wins where it exists, because two taps in one frame both read the same
|
||||
* already-rendered number. */
|
||||
function bumpQty(lineId: string, shown: number, by: number) {
|
||||
clearTimeout(timers.current["qtyclear:" + lineId]);
|
||||
const next = (qtyWanted.current[lineId] ?? shown) + by;
|
||||
qtyWanted.current[lineId] = next;
|
||||
setQtyDraft((d) => ({ ...d, [lineId]: next }));
|
||||
clearTimeout(timers.current["qty:" + lineId]);
|
||||
timers.current["qty:" + lineId] = setTimeout(() => { void sendQty(lineId); }, 300);
|
||||
}
|
||||
async function sendQty(lineId: string) {
|
||||
const want = qtyWanted.current[lineId];
|
||||
if (want === undefined) return true;
|
||||
clearTimeout(timers.current["qty:" + lineId]);
|
||||
const ok = await act("order.lineQty", { id: o!.id, lineId, qty: want });
|
||||
// A tap that landed while this write was in the air has already raised the target; leaving it
|
||||
// pending lets the timer that tap scheduled send the higher number instead of losing it here.
|
||||
if (qtyWanted.current[lineId] === want) {
|
||||
delete qtyWanted.current[lineId];
|
||||
// Nothing was saved, so the tapped number must come off the screen now rather than sit there
|
||||
// above the error looking like a quantity the supplier is going to be sent.
|
||||
if (!ok) dropPendingQty(lineId);
|
||||
else {
|
||||
qtySeen.current[lineId] = snapLines.current?.find((l) => l.id === lineId)?.qty ?? want;
|
||||
timers.current["qtyclear:" + lineId] = setTimeout(() => dropOverriddenQty(lineId, want), 2000);
|
||||
}
|
||||
}
|
||||
return ok;
|
||||
}
|
||||
/* The backstop for the case where the snapshot never comes to agree — someone else editing the
|
||||
* same draft line. Without it this screen would keep showing our number over theirs.
|
||||
*
|
||||
* It runs on a clock, so it must never act on a snapshot that is merely late. Dropping the draft
|
||||
* the moment the two seconds were up put the pre-tap quantity back on the screen whenever the
|
||||
* refreshed snapshot was slower than that, and the next tap counted on from it — the miscount all
|
||||
* of this exists to stop. A snapshot still showing the figure it had when our write came back,
|
||||
* and not the figure we wrote, has not caught up yet: the tapped number stays and this waits
|
||||
* another two seconds. Once it moves — to ours, or to whatever the other coordinator saved — the
|
||||
* draft has nothing left to protect and goes. */
|
||||
function dropOverriddenQty(lineId: string, wrote: number) {
|
||||
const line = snapLines.current?.find((l) => l.id === lineId);
|
||||
if (line && line.qty !== wrote && line.qty === qtySeen.current[lineId]) { timers.current["qtyclear:" + lineId] = setTimeout(() => dropOverriddenQty(lineId, wrote), 2000); return; }
|
||||
dropPendingQty(lineId);
|
||||
}
|
||||
// Send anything still sitting in the debounce before an action the server answers out of its own
|
||||
// copy of the order — it reads the lines the database holds, not the ones on this screen — or
|
||||
// before one that closes the draft to edits and would have the pending write refused.
|
||||
async function flushQty() {
|
||||
for (const lineId of Object.keys(qtyWanted.current)) if (!(await sendQty(lineId))) return false;
|
||||
return true;
|
||||
}
|
||||
function dropPendingQty(lineId: string) {
|
||||
clearTimeout(timers.current["qty:" + lineId]);
|
||||
clearTimeout(timers.current["qtyclear:" + lineId]);
|
||||
delete qtyWanted.current[lineId];
|
||||
delete qtySeen.current[lineId];
|
||||
setQtyDraft((d) => { const n = { ...d }; delete n[lineId]; return n; });
|
||||
}
|
||||
async function removeLine(lineId: string) { dropPendingQty(lineId); await act("order.lineRemove", { id: o!.id, lineId }); }
|
||||
/* Every line is priced the way orderTotal() prices it — delivered units at the cost the delivery
|
||||
* was invoiced at, whatever is still outstanding at today's catalogue price — so the rows a
|
||||
* coordinator ticks off against the invoice add up to the total printed under them. Pricing the
|
||||
* rows from the catalogue while the total came from orderTotal() left the two visibly disagreeing
|
||||
* as soon as a delivery arrived at a different price, on the one screen where that sum is checked.
|
||||
*
|
||||
* The amounts come out of orderTotal() itself rather than a second copy of its arithmetic: what
|
||||
* line n contributes is the total of the first n lines less the total of the first n−1. Asking it
|
||||
* about a line on its own would not do, because it draws each delivery down across the lines in
|
||||
* order — two lines for the same size would then both claim the same delivery. */
|
||||
const lineAmt: Record<string, number> = {};
|
||||
let runTotal = 0;
|
||||
for (let i = 0; i < onScreen.lines.length; i++) { const t = orderTotal({ ...onScreen, lines: onScreen.lines.slice(0, i + 1) }, byId); lineAmt[onScreen.lines[i].id] = t - runTotal; runTotal = t; }
|
||||
const unitOf = (l: { id: string; itemId: string; qty: number }) => (l.qty > 0 ? lineAmt[l.id] / l.qty : byId[l.itemId]?.cost || 0);
|
||||
const received = (itemId: string, size: string) => o.receipts.reduce((t, r) => t + r.lines.filter((x) => x.itemId === itemId && x.size === size).reduce((a, x) => a + x.qty, 0), 0);
|
||||
|
||||
/* What the delivery docket gets checked against: the units this order asked for and the units
|
||||
that have actually turned up. Both are read off the same lines the total is priced from, so the
|
||||
figure above the table can never disagree with the table. */
|
||||
const units = onScreen.lines.reduce((t, l) => t + l.qty, 0);
|
||||
const got = o.receipts.reduce((t, rc) => t + rc.lines.reduce((n, l) => n + l.qty, 0), 0);
|
||||
const total = orderTotal(onScreen, byId);
|
||||
|
||||
const ev: { date: string; what: string; sub: string; photoId?: string | null }[] = [{ date: o.date, what: "Order created", sub: o.replenish ? "Auto-built replenishment draft" : o.source }];
|
||||
if (o.status !== "Draft" && o.status !== "Cancelled") ev.push({ date: o.date, what: "Placed with " + onScreen.supplier + (onScreen.ref ? " — ref " + onScreen.ref : ""), sub: "" });
|
||||
for (const rc of o.receipts) ev.push({ photoId: rc.photoId, date: rc.date, what: "Delivery received" + (rc.invoice ? " — invoice " + rc.invoice : ""), sub: rc.lines.map((x) => `${label(byId[x.itemId])} ${x.size} ×${x.qty}${x.dest === "pickup" ? " → pickup" : " → shelf"}`).join(", ") + (rc.note ? " · " + rc.note : "") });
|
||||
if (o.status === "Cancelled") ev.push({ date: "", what: "Order cancelled", sub: "" });
|
||||
const backOrders = s.orders.filter((x) => x.parentId === o.id);
|
||||
const parent = o.parentId ? s.orders.find((x) => x.id === o.parentId) : undefined;
|
||||
|
||||
function printPO() {
|
||||
const sp = supplierInfo(s, onScreen.supplier);
|
||||
const rows = onScreen.lines.map((l) => { const it = byId[l.itemId]; return `<tr><td>${esc(label(it))}</td><td>${esc(it?.sku || "—")}</td><td>${esc(l.size)}</td><td class="r">${l.qty}</td><td class="r">${esc(money(unitOf(l)))}</td><td class="r">${esc(money(lineAmt[l.id]))}</td></tr>`; }).join("");
|
||||
const css = ".hd{display:flex;justify-content:space-between;align-items:flex-end;border-bottom:2px solid #201e1d;padding-bottom:8px}.hd h1{border:none;padding:0;font-size:20px}.meta2{display:grid;grid-template-columns:1fr 1fr;gap:4px 24px;margin:12px 0;font-size:12px;line-height:1.7}.tot{text-align:right;font-size:16px;font-weight:800;margin-top:10px}.notes{margin-top:14px;font-size:12px;color:#444}";
|
||||
const body = `<div class="hd"><h1><span class="sq"></span>Purchase order — ${esc(onScreen.code)}</h1><div style="font-size:12px">${esc(s.settings.facility)} · ${esc(s.settings.location)}</div></div>` +
|
||||
`<div class="meta2"><div>Supplier: <b>${esc(onScreen.supplier)}${sp && (sp.contact || sp.phone) ? " · " + esc([sp.contact, sp.phone].filter(Boolean).join(" · ")) : ""}</b></div><div>Date: <b>${esc(fmtDate(onScreen.date || s.today))}</b></div><div>Supplier ref: <b>${esc(onScreen.ref || "—")}</b></div><div>Expected: <b>${esc(onScreen.expected ? fmtDate(onScreen.expected) : "—")}</b></div><div>Account: <b>${esc(sp?.account || "—")}</b> · ${esc(forLabel)}</div><div>Cost centre: <b>${esc(ccCode || "—")}</b></div></div>` +
|
||||
`<table><tr><th>Item</th><th>SKU</th><th>Size</th><th class="r">Qty</th><th class="r">Unit</th><th class="r">Total</th></tr>${rows}</table><div class="tot">Total ${esc(money(orderTotal(onScreen, byId)))}</div>` +
|
||||
(onScreen.notes ? `<div class="notes">Notes: ${esc(onScreen.notes)}</div>` : "") + `<div class="notes">Ordered by ____________________ Date ____________</div>`;
|
||||
openPrintWindow(onScreen.code, body, { page: "size:A4;margin:16mm", css, width: 780, height: 920 });
|
||||
}
|
||||
function exportCsv() {
|
||||
downloadCsv(onScreen.code.toLowerCase() + ".csv", `Order,${csvEsc(onScreen.code)}\nSupplier,${csvEsc(onScreen.supplier)}\nRef,${csvEsc(onScreen.ref)}\n\n` + csvOf(["Item", "SKU", "Size", "Qty", "Unit cost", "Total"], onScreen.lines.map((l) => { const it = byId[l.itemId]; return [label(it), it?.sku || "", l.size, l.qty, +unitOf(l).toFixed(2), lineAmt[l.id].toFixed(2)]; })));
|
||||
}
|
||||
async function duplicate() {
|
||||
if (!(await flushQty())) return;
|
||||
const r = await mutate<{ id: string }>("order.duplicate", { id: o!.id });
|
||||
if (!r.ok) { setErr(r.error); return; }
|
||||
router.push(`/app/orders/${r.result.id}`);
|
||||
}
|
||||
|
||||
return (
|
||||
<section>
|
||||
<header className="tc-pagehead">
|
||||
<div>
|
||||
{/* Flush with the eyebrow under it: the button's own 14px of padding would otherwise
|
||||
indent the one thing on the band that has to line up with the order number. */}
|
||||
<Link href="/app/orders" className="btn btn-ghost" style={{ marginBottom: "var(--space-2)", marginLeft: -14 }}>← All orders</Link>
|
||||
<div className="eyebrow">Supply · Order</div>
|
||||
<h1 className="h1">{o.code}</h1>
|
||||
<div style={{ fontSize: 13, color: "var(--color-neutral-700)", marginTop: "var(--space-1)" }}>{forLabel} · {onScreen.supplier} · placed {fmtDate(o.date)}{o.replenish ? " · replenishment" : ""}{parent && <> · back order of <Link href={`/app/orders/${parent.id}`}>{parent.code}</Link></>}</div>
|
||||
</div>
|
||||
<div style={{ display: "flex", gap: "var(--space-2)", alignItems: "center", flexWrap: "wrap", justifyContent: "flex-end" }}>
|
||||
{overdue && <span className="tag tag-flag">Overdue</span>}
|
||||
<span className={statusTag(o.status)}>{o.status}</span>
|
||||
<button className="btn btn-ghost" onClick={printPO}>Print order</button>
|
||||
<button className="btn btn-ghost" onClick={exportCsv}>CSV</button>
|
||||
<button className="btn btn-ghost" onClick={duplicate}>Duplicate</button>
|
||||
{isAdmin && ["Draft", "Ordered", "Back Order", "Shipped"].includes(o.status) && <button className="btn btn-ghost" onClick={async () => { if (confirm(`Cancel ${o.code}?`) && await flushQty()) act("order.status", { id: o.id, status: "Cancelled" }); }}>Cancel order</button>}
|
||||
{o.status === "Draft" && <button className="btn btn-primary" onClick={async () => { if (await flushQty()) act("order.status", { id: o.id, status: "Ordered" }); }} disabled={o.lines.length === 0}>Mark ordered</button>}
|
||||
{["Ordered", "Back Order"].includes(o.status) && <button className="btn btn-secondary" onClick={() => act("order.status", { id: o.id, status: "Shipped" })}>Mark shipped</button>}
|
||||
{["Ordered", "Shipped", "Back Order"].includes(o.status) && <button className="btn btn-primary" onClick={async () => { if (await flushQty()) setRcv(true); }}>Receive delivery</button>}
|
||||
</div>
|
||||
</header>
|
||||
{/* The left rule is what says "something is wrong here" from across the room. The red on its
|
||||
own would be the same red the status tag beside it wears when an order is merely open. */}
|
||||
<LiveRegion tone="alert" className="notice" msg={err} style={{ marginTop: "var(--space-3)", color: "var(--color-accent-700)" }} />
|
||||
{/* A late delivery is the one thing on this order somebody has to act on, so the date is
|
||||
marked the way the rest of the app marks trouble rather than simply turning red — the
|
||||
status tag two inches above it is already red on every order that is merely open. */}
|
||||
<KpiStrip items={[
|
||||
{ val: money(total), label: "Order value", note: `${onScreen.lines.length} line${onScreen.lines.length === 1 ? "" : "s"} · delivered units at the invoiced cost` },
|
||||
{ val: `${got} of ${units}`, label: "Units received", note: units > 0 && got >= units ? "Everything ordered has arrived" : o.status === "Draft" ? "Not sent to the supplier yet" : "Receive a delivery to book the rest in" },
|
||||
{ val: onScreen.expected ? fmtDate(onScreen.expected) : "—", label: "Expected", flag: overdue, note: overdue ? `${daysBetween(onScreen.expected, s.today)} day${daysBetween(onScreen.expected, s.today) === 1 ? "" : "s"} overdue — ring ${onScreen.supplier}` : onScreen.expected ? "The date the supplier gave" : "No delivery date recorded" },
|
||||
]} />
|
||||
<div className="tc-grid" style={{ display: "grid", gridTemplateColumns: "3fr 2fr", gap: "var(--space-8)", marginTop: "var(--space-6)", alignItems: "start" }}>
|
||||
<div>
|
||||
<div className="tc-panel">
|
||||
<div className="tc-panel-head">
|
||||
<span>Order details</span>
|
||||
<span className="tc-panel-aside">Changes save as you type</span>
|
||||
</div>
|
||||
<div className="tc-panel-body">
|
||||
<div className="tc-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "var(--space-3)" }}>
|
||||
{([["ref", "Supplier order no.", "text", "e.g. WWG-48211"], ["invoice", "Invoice no.", "text", "e.g. INV-102938"], ["tracking", "Tracking no.", "text", "e.g. 34XY990812"], ["expected", "Expected delivery", "date", ""]] as const).map(([k, lbl, type, ph]) => (
|
||||
<Field key={k} label={lbl}>{(c) => <input {...c} className="input" type={type} placeholder={ph} value={val(k)} onChange={(e) => saveField(k, e.target.value)} />}</Field>
|
||||
))}
|
||||
<Field label="Supplier">
|
||||
{(c) => s.settings.suppliers.length ? <select {...c} className="input" value={val("supplier")} onChange={(e) => saveField("supplier", e.target.value)}>{[...new Set([o.supplier, ...s.settings.suppliers])].filter(Boolean).map((x) => <option key={x}>{x}</option>)}</select> : <input {...c} className="input" value={val("supplier")} onChange={(e) => saveField("supplier", e.target.value)} />}
|
||||
</Field>
|
||||
<Field label="Order for">
|
||||
{(c) => (
|
||||
<select {...c} className="input" value={o.staffId || ""} onChange={(e) => act("order.update", { id: o.id, staffId: e.target.value })}>
|
||||
<option value="">Stock (linen room)</option>
|
||||
{s.staff.filter((x) => !x.inactive || x.id === o.staffId).map((x) => <option key={x.id} value={x.id}>{x.first} {x.last} ({x.num})</option>)}
|
||||
</select>
|
||||
)}
|
||||
</Field>
|
||||
<Field label="Cost centre">
|
||||
{(c) => (
|
||||
<select {...c} className="input" value={val("cc") || (st ? st.dept : "")} onChange={(e) => act("order.update", { id: o.id, cc: e.target.value })}>
|
||||
<option value="">— none —</option>
|
||||
{s.depts.map((d) => <option key={d.id} value={d.name}>{d.name}{d.cc ? ` (${d.cc})` : ""}</option>)}
|
||||
{o.cc && !s.depts.find((d) => d.name === o.cc) && <option value={o.cc}>{o.cc}{ccFor(s, o.cc) ? "" : " (code)"}</option>}
|
||||
</select>
|
||||
)}
|
||||
</Field>
|
||||
{ccNote && <div style={{ gridColumn: "1 / -1", fontSize: 12, color: "var(--color-neutral-700)", borderLeft: "4px solid var(--color-text)", paddingLeft: "var(--space-2)" }}>{ccNote}</div>}
|
||||
<Field label="Notes" style={{ gridColumn: "1 / -1" }}>{(c) => <input {...c} className="input" placeholder="e.g. rang WWG re back order 12/8" value={val("notes")} onChange={(e) => saveField("notes", e.target.value)} />}</Field>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="tc-panel" style={{ marginTop: "var(--space-6)" }}>
|
||||
<div className="tc-panel-head">
|
||||
<span>Lines</span>
|
||||
<span className="tc-panel-aside">{units} unit{units === 1 ? "" : "s"} ordered</span>
|
||||
</div>
|
||||
<div className="tc-panel-list">
|
||||
{onScreen.lines.map((l) => {
|
||||
const it = byId[l.itemId]; const rec = received(l.itemId, l.size); const cKey = l.id;
|
||||
const catCost = it ? it.cost : 0;
|
||||
// What this line is actually worth per unit once a delivery has been invoiced.
|
||||
const unit = unitOf(l);
|
||||
return (
|
||||
<div key={l.id} className="tc-row" style={{ flexWrap: "wrap", fontSize: 13 }}>
|
||||
<div className="tc-row-main" style={{ minWidth: 150 }}>
|
||||
<div className="tc-row-name">{label(it)}</div>
|
||||
<div className="tc-row-meta">size {l.size}{rec ? ` · received ${rec}` : ""}{Math.abs(unit - catCost) > 0.004 && <span title={`Delivered units are priced at what the invoice charged — ${money(unit)} a unit across this line`}> · invoice price</span>}</div>
|
||||
</div>
|
||||
<div style={{ display: "flex", alignItems: "center", gap: "var(--space-2)", flex: "none" }}>
|
||||
{o.status === "Draft" ? (
|
||||
<span style={{ display: "inline-flex", alignItems: "center", gap: "var(--space-1)" }}>
|
||||
<button className="btn btn-ghost" style={{ padding: "0 8px", minHeight: 24 }} aria-label={`One fewer ${label(it)} size ${l.size}`} onClick={() => l.qty > 1 ? bumpQty(l.id, l.qty, -1) : o.lines.length > 1 && removeLine(l.id)} disabled={l.qty <= 1 && o.lines.length <= 1}>−</button>
|
||||
<span style={{ width: 24, textAlign: "center", fontWeight: 700 }}>×{l.qty}</span>
|
||||
<button className="btn btn-ghost" style={{ padding: "0 8px", minHeight: 24 }} aria-label={`One more ${label(it)} size ${l.size}`} onClick={() => bumpQty(l.id, l.qty, 1)}>+</button>
|
||||
</span>
|
||||
) : <span>×{l.qty}</span>}
|
||||
<span>@ $</span>
|
||||
<input className="input" style={{ minHeight: 28, padding: "2px 8px", width: 70, textAlign: "right" }} inputMode="decimal" aria-label={`Unit cost of ${label(it)} size ${l.size}`} disabled={!isAdmin} value={priceDraft[cKey] !== undefined ? priceDraft[cKey] : String(catCost)}
|
||||
onChange={(e) => setPriceDraft({ ...priceDraft, [cKey]: e.target.value.replace(/[^0-9.]/g, "") })}
|
||||
onBlur={async () => { const v = parseFloat(priceDraft[cKey]); if (!isNaN(v) && v >= 0 && Math.abs(v - catCost) > 0.004 && it) { await act("catalog.update", { id: it.id, cost: v }); } const d = { ...priceDraft }; delete d[cKey]; setPriceDraft(d); }} />
|
||||
{o.status === "Draft" && o.lines.length > 1 && <button className="btn btn-ghost" style={{ minHeight: 26, padding: "2px 8px" }} aria-label={`Remove ${label(it)} size ${l.size} from this order`} onClick={() => removeLine(l.id)}>Remove</button>}
|
||||
</div>
|
||||
<div className="tc-row-fig" style={{ minWidth: 76, textAlign: "right" }}>{money(l.qty * unit)}</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
{o.status === "Draft" && (
|
||||
<div className="tc-panel-foot" style={{ display: "flex", gap: "var(--space-2)", alignItems: "center", flexWrap: "wrap" }}>
|
||||
<span style={{ fontSize: 12, color: "var(--color-neutral-700)", flex: "none" }}>Add line:</span>
|
||||
<ItemSizePicker s={s} itemId={pick} onItem={setPick} placeholder="Choose an item…" maxWidth={280} onSize={async (it, si) => { if (await flushQty()) act("order.lineAdd", { id: o.id, itemId: it.id, size: it.sizes[si], qty: 1 }); }} />
|
||||
</div>
|
||||
)}
|
||||
<div className="tc-panel-foot" style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: "var(--space-3)", flexWrap: "wrap" }}>
|
||||
<div style={{ fontSize: 11, color: "var(--color-neutral-700)" }}>{isAdmin ? "Editing a price updates that item’s catalogue cost everywhere." : "Prices are set by an admin."}</div>
|
||||
<div className="tc-figure">{money(total)}</div>
|
||||
</div>
|
||||
</div>
|
||||
{backOrders.length > 0 && <div style={{ fontSize: 12, color: "var(--color-neutral-700)", marginTop: "var(--space-2)" }}>Back order{backOrders.length > 1 ? "s" : ""}: {backOrders.map((b) => <Link key={b.id} href={`/app/orders/${b.id}`} style={{ marginRight: 8 }}>{b.code}</Link>)}</div>}
|
||||
</div>
|
||||
<div>
|
||||
<div className="tc-panel">
|
||||
<div className="tc-panel-head"><span>History</span></div>
|
||||
<div className="tc-panel-list">
|
||||
{ev.map((e, i) => (
|
||||
<div key={i} className="tc-row" style={{ alignItems: "flex-start" }}>
|
||||
<div className="tc-meta" style={{ minWidth: 82, flex: "none", paddingTop: 2 }}>{e.date ? fmtDate(e.date) : "—"}</div>
|
||||
<div className="tc-row-main">
|
||||
<div style={{ fontWeight: 600 }}>{e.what}{e.photoId && <button className="btn btn-ghost" style={{ minHeight: 22, padding: "0 6px", marginLeft: 8 }} onClick={() => viewPhoto(e.photoId!)}>Invoice photo</button>}</div>
|
||||
{e.sub && <div className="tc-row-meta">{e.sub}</div>}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
{st && (
|
||||
<div className="tc-panel" style={{ marginTop: "var(--space-6)" }}>
|
||||
<div className="tc-panel-head"><span>Staff member</span></div>
|
||||
<div className="tc-panel-body" style={{ fontSize: 13, lineHeight: 1.7 }}>
|
||||
<div style={{ fontWeight: 600 }}><Link href={`/app/staff/${st.id}`} className="link-name">{staffName(st)}</Link> <span style={{ fontWeight: 400, color: "var(--color-neutral-700)" }}>{st.num}</span></div>
|
||||
<div>{st.dept} · {st.phone || "no phone"}</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{isAdmin && o.status === "Draft" && o.replenish && (
|
||||
<div style={{ marginTop: "var(--space-4)", fontSize: 12, color: "var(--color-neutral-700)" }}>This draft grows as stock is issued — mark it ordered when you send it to {onScreen.supplier}.</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{rcv && <ReceiveDialog order={onScreen} onClose={() => { setRcv(false); router.refresh(); }} />}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,177 @@
|
||||
"use client";
|
||||
import Link from "next/link";
|
||||
import { useMemo, useState } from "react";
|
||||
import { useDerived, useSnap } from "@/lib/client";
|
||||
import { PageHead, Empty, KpiStrip, Seg } from "@/components/ui";
|
||||
import { NewOrderDialog } from "@/components/dialogs";
|
||||
import { ccOfOrder, csvOf, daysBetween, fmtDate, isOpen, isOverdue, isPlacedOpen, label, money, onhand, orderTotal, reorderAt, staffName, statusTag, touched } from "@/lib/compute";
|
||||
import { downloadCsv } from "@/lib/print";
|
||||
|
||||
const STATUSES = ["All", "Draft", "Open", "Received"] as const;
|
||||
|
||||
export default function OrdersPage() {
|
||||
const { s, mutate } = useSnap();
|
||||
const [flagMsg, setFlagMsg] = useState("");
|
||||
const { L, byId, staffById, variants } = useDerived();
|
||||
const [dlg, setDlg] = useState<null | "new">(null);
|
||||
const [q, setQ] = useState("");
|
||||
const [sup, setSup] = useState("All suppliers");
|
||||
const [status, setStatus] = useState<(typeof STATUSES)[number]>("All");
|
||||
|
||||
const suggested = useMemo(() => {
|
||||
const out: { itemId: string; size: string; lbl: string; oh: number; ro: number; sugg: number }[] = [];
|
||||
for (const v of variants) {
|
||||
const oh = onhand(s, L, v.key), ro = reorderAt(s, v.key);
|
||||
if (!touched(s, L, v.key) || oh > ro) continue;
|
||||
const onOrder = s.orders.some((o) => isOpen(o) && o.lines.some((l) => l.itemId === v.itemId && l.size === v.size));
|
||||
if (!onOrder) out.push({ itemId: v.itemId, size: v.size, lbl: label(v.item), oh, ro, sugg: Math.max(ro * 2 - oh, 1) });
|
||||
}
|
||||
return out;
|
||||
}, [s, L, variants]);
|
||||
|
||||
const kpi = useMemo(() => {
|
||||
const drafts = s.orders.filter((o) => o.status === "Draft").length;
|
||||
const open = s.orders.filter(isPlacedOpen);
|
||||
const overdue = s.orders.filter((o) => isOverdue(o, s.today)).length;
|
||||
const monthVal = s.orders.filter((o) => o.status === "Received" && o.received.slice(0, 7) === s.today.slice(0, 7)).reduce((t, o) => t + orderTotal(o, byId), 0);
|
||||
return { drafts, open: open.length, openVal: open.reduce((t, o) => t + orderTotal(o, byId), 0), overdue, monthVal };
|
||||
}, [s, byId]);
|
||||
|
||||
const supOpts = ["All suppliers", ...new Set(s.orders.map((o) => o.supplier).filter(Boolean))];
|
||||
const rank = (o: (typeof s.orders)[number]) => (o.status === "Draft" ? 0 : isPlacedOpen(o) ? 1 : o.status === "Received" ? 2 : 3);
|
||||
const ql = q.trim().toLowerCase();
|
||||
const orders = s.orders.filter((o) => {
|
||||
if (sup !== "All suppliers" && o.supplier !== sup) return false;
|
||||
if (status === "Draft" && o.status !== "Draft") return false;
|
||||
if (status === "Open" && !isPlacedOpen(o)) return false;
|
||||
if (status === "Received" && o.status !== "Received") return false;
|
||||
if (ql) { const st = o.staffId ? staffById[o.staffId] : undefined; const hay = `${o.code} ${o.ref} ${o.invoice} ${o.tracking} ${o.supplier} ${staffName(st)}`.toLowerCase(); if (!hay.includes(ql)) return false; }
|
||||
return true;
|
||||
}).sort((a, b) => rank(a) - rank(b) || (a.date < b.date ? 1 : a.date > b.date ? -1 : 0));
|
||||
|
||||
const narrowed = ql !== "" || sup !== "All suppliers" || status !== "All";
|
||||
/* This list is the view somebody reads to answer "what is still outstanding?" or "what did we
|
||||
order this quarter?", and the only way to get any of it out of ThreadCount was to open one
|
||||
order at a time and export each. The file is the rows on screen — the search, the supplier and
|
||||
the status tab all apply — because a coordinator who has narrowed to one supplier means that
|
||||
supplier, not three years of ordering.
|
||||
|
||||
Value is orderTotal(), never quantity times catalogue price. orderTotal prices what has already
|
||||
been delivered at the cost the delivery was invoiced at and only the rest at today's catalogue
|
||||
price; multiplying it out here would mean the finance spreadsheet disagreed with the order
|
||||
screen, Reports and the dashboard the moment an admin edited a price — the exact fault that was
|
||||
just fixed everywhere else.
|
||||
|
||||
Dates go out in the stored form (2026-09-11), not as the screen prints them, so a spreadsheet
|
||||
sorts and filters them as dates. Order notes are left out: they carry remarks for the linen
|
||||
room — a supplier dispute, a substitution offered — they are not on this screen, and the screen
|
||||
is the limit of what Export hands over. */
|
||||
function exportCsv() {
|
||||
// Ordered for and Staff member are split apart because the screen's single line ("For stock",
|
||||
// "For Jane Doe") can't be filtered on in a spreadsheet. Units ordered against Units received is
|
||||
// what makes a part-delivered order visible in the file, the way the Overdue tag makes a late
|
||||
// one visible here.
|
||||
const cols = ["Order no.", "Status", "Ordered", "Supplier", "Ordered for", "Staff member", "Supplier ref", "Invoice", "Tracking", "Cost centre", "Replenishment", "Expected", "Days overdue", "Received", "Lines", "Units ordered", "Units received", "Value"];
|
||||
downloadCsv(`threadcount-orders-${s.today}.csv`, csvOf(cols, orders.map((o) => {
|
||||
const st = o.staffId ? staffById[o.staffId] : undefined;
|
||||
const units = o.lines.reduce((t, l) => t + l.qty, 0);
|
||||
const got = o.receipts.reduce((t, rc) => t + rc.lines.reduce((n, l) => n + l.qty, 0), 0);
|
||||
return [o.code, o.status, o.date, o.supplier, o.orderFor === "Stock" ? "Stock" : "Staff member", staffName(st), o.ref, o.invoice, o.tracking, ccOfOrder(s, o, staffById), o.replenish ? "Yes" : "No", o.expected, isOverdue(o, s.today) ? daysBetween(o.expected, s.today) : "", o.received, o.lines.length, units, got, +orderTotal(o, byId).toFixed(2)];
|
||||
})));
|
||||
}
|
||||
|
||||
return (
|
||||
<section>
|
||||
<PageHead eyebrow="Supply" title="Ordering">
|
||||
<button className="btn btn-ghost" onClick={exportCsv} disabled={orders.length === 0} title="Downloads the orders shown, with the filters applied.">{narrowed ? `Export CSV (${orders.length} shown)` : "Export CSV"}</button>
|
||||
<button className="btn btn-primary" onClick={() => setDlg("new")}>New order</button>
|
||||
</PageHead>
|
||||
{/* Every open order on this screen already wears the brand red on its status tag, so a red
|
||||
figure on its own would say nothing here. Overdue earns the rule and the mark instead, and
|
||||
only when something is actually late. */}
|
||||
<KpiStrip items={[
|
||||
{ val: kpi.drafts, label: "Drafts to send", note: "Nothing reaches a supplier until it is marked ordered" },
|
||||
{ val: kpi.open, label: "Awaiting delivery", note: `${money(kpi.openVal)} on order` },
|
||||
{ val: kpi.overdue, label: "Overdue", flag: kpi.overdue > 0, note: kpi.overdue > 0 ? "Past the date the supplier gave" : "Everything open is still within its expected date" },
|
||||
{ val: money(kpi.monthVal), label: "Received this month", note: "Delivered stock, priced as invoiced" },
|
||||
]} />
|
||||
<div style={{ display: "flex", gap: "var(--space-3)", alignItems: "center", marginTop: "var(--space-4)", flexWrap: "wrap" }}>
|
||||
<input className="input" style={{ width: 240 }} aria-label="Search orders by number, reference or invoice" placeholder="Search order no., ref, invoice…" value={q} onChange={(e) => setQ(e.target.value)} />
|
||||
<select className="input" style={{ width: 180 }} aria-label="Supplier" value={sup} onChange={(e) => setSup(e.target.value)}>{supOpts.map((o) => <option key={o}>{o}</option>)}</select>
|
||||
<span role="group" aria-label="Order status"><Seg opts={STATUSES} value={status} onChange={setStatus} /></span>
|
||||
</div>
|
||||
{suggested.length > 0 && (
|
||||
/* Stock at or below its reorder level is the one thing on this screen that has to be acted
|
||||
on today, so it is marked the way everything else that wants attention is marked — the
|
||||
rule down the edge and the mark beside the word — rather than by being the only red box
|
||||
on a screen that already has red status tags on it. */
|
||||
<div className="tc-panel tc-flag" style={{ marginTop: "var(--space-6)" }}>
|
||||
<div className="tc-panel-head">
|
||||
<span><span className="tc-mark" aria-hidden="true" />Suggested order</span>
|
||||
<span className="tc-panel-aside">{suggested.length} line{suggested.length === 1 ? "" : "s"} at or below reorder level</span>
|
||||
</div>
|
||||
<div className="tc-panel-list">
|
||||
{suggested.slice(0, 10).map((x, i) => (
|
||||
<div key={i} className="tc-row">
|
||||
<div className="tc-row-main">
|
||||
<div className="tc-row-name">{x.lbl} · {x.size}</div>
|
||||
<div className="tc-row-meta">on hand {x.oh} · reorder at {x.ro}</div>
|
||||
</div>
|
||||
<div className="tc-row-fig">+{x.sugg}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="tc-panel-foot" style={{ display: "flex", gap: "var(--space-3)", alignItems: "center", justifyContent: "space-between", flexWrap: "wrap" }}>
|
||||
<div style={{ fontSize: 12, color: "var(--color-neutral-700)", flex: 1, minWidth: 240 }}>
|
||||
{suggested.length > 10 && <>+{suggested.length - 10} more lines. </>}
|
||||
Adds each line to its supplier's replenishment draft, topping up to 2× the reorder level and netting off stock already on order.{flagMsg && <b style={{ color: "var(--color-accent-700)" }}> {flagMsg}</b>}
|
||||
</div>
|
||||
<button className="btn btn-secondary" onClick={async () => { const r = await mutate<{ added: number }>("stock.orderFlagged", {}); setFlagMsg(!r.ok ? r.error : r.result.added ? `${r.result.added} line${r.result.added === 1 ? "" : "s"} added to draft supplier order(s) below.` : "Everything flagged already has enough on order."); }}>Add to supplier drafts</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="tc-panel" style={{ marginTop: "var(--space-6)" }}>
|
||||
<div className="tc-panel-head">
|
||||
<span>Orders</span>
|
||||
<span className="tc-panel-aside">{orders.length} of {s.orders.length} orders{orders.length > 0 ? " · Export CSV writes these" : ""}</span>
|
||||
</div>
|
||||
{orders.length === 0 && <div className="tc-panel-body"><Empty pad={2}>{s.orders.length === 0 ? "No orders yet." : "No orders match this filter."}</Empty></div>}
|
||||
<div className="tc-panel-list">
|
||||
{orders.map((o) => {
|
||||
const st = o.staffId ? staffById[o.staffId] : undefined;
|
||||
const overdue = isOverdue(o, s.today);
|
||||
/* "1 days overdue" is the kind of thing that makes a screen look unfinished, and a date
|
||||
printed for today or yesterday makes you do arithmetic to work out what it means. The
|
||||
two nearest days get named instead; anything further out is a count of days, plural
|
||||
only when it is one. */
|
||||
const late = overdue ? daysBetween(o.expected, s.today) : 0;
|
||||
const due = overdue
|
||||
? late === 1 ? "due yesterday" : `${late} days overdue`
|
||||
: isPlacedOpen(o) && o.expected
|
||||
? o.expected === s.today ? "due today" : `due ${fmtDate(o.expected)}`
|
||||
: "";
|
||||
return (
|
||||
<Link key={o.id} href={`/app/orders/${o.id}`} className={"tc-row" + (overdue ? " tc-flag" : "")} style={{ flexWrap: "wrap" }}>
|
||||
<div className="tc-row-main" style={{ minWidth: 200 }}>
|
||||
<div className="tc-row-name">{o.code}</div>
|
||||
<div className="tc-row-meta">
|
||||
{o.orderFor === "Stock" ? "For stock" : "For " + staffName(st, "staff member")} · {o.supplier} · {fmtDate(o.date)}{o.ref ? " · ref " + o.ref : ""}
|
||||
{/* No mark here: the Overdue tag across the row already carries one, and the
|
||||
same signal twice on one line reads as two different problems. */}
|
||||
{due && <> · <span style={{ color: "var(--color-accent-700)", fontWeight: 600 }}>{due}</span></>}
|
||||
</div>
|
||||
</div>
|
||||
{o.replenish && <span className="tag tag-outline">Replenishment</span>}
|
||||
{overdue && <span className="tag tag-flag">Overdue</span>}
|
||||
<span className={statusTag(o.status)}>{o.status}</span>
|
||||
<div className="tc-row-fig" style={{ minWidth: 80, textAlign: "right" }}>{money(orderTotal(o, byId))}</div>
|
||||
<span aria-hidden="true" style={{ fontSize: 12, color: "var(--color-neutral-600)" }}>→</span>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
{dlg === "new" && <NewOrderDialog onClose={() => setDlg(null)} />}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,178 @@
|
||||
"use client";
|
||||
import Link from "next/link";
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { useDerived, useSnap } from "@/lib/client";
|
||||
import { PageHead, Empty, ErrorLine, KpiStrip } from "@/components/ui";
|
||||
import { NewOrderDialog, openSlip } from "@/components/dialogs";
|
||||
import { capState, daysBetween, fyStart, heldByStaff, isOpen, isOverdue, label, money, onhand, orderTotal, reorderAt, setsCap, staffName, touched, telHref, type GarmentCounts } from "@/lib/compute";
|
||||
|
||||
/** Somebody with nothing out and nothing owed. heldByStaff only lists people holding something, and
|
||||
* they have to be read as holding none rather than skipped. */
|
||||
const NOTHING: GarmentCounts = { tops: 0, pants: 0, other: 0, sets: 0 };
|
||||
|
||||
export default function Dashboard() {
|
||||
const { s, mutate } = useSnap();
|
||||
const { L, byId, staffById, variants } = useDerived();
|
||||
const [newOrder, setNewOrder] = useState(false);
|
||||
const [welcome, setWelcome] = useState(false);
|
||||
const [err, setErr] = useState("");
|
||||
useEffect(() => { if (new URLSearchParams(window.location.search).get("welcome") === "1") setWelcome(true); }, []);
|
||||
|
||||
// The call list is the one place two people work the same rows at once — one marks a bag
|
||||
// collected at the counter while somebody else is still on the phone about it. A refusal there
|
||||
// has to be said out loud, or the second click reads as the first one not having taken.
|
||||
async function act(op: string, payload: unknown) { setErr(""); const r = await mutate(op, payload); if (!r.ok) setErr(r.error); }
|
||||
|
||||
const d = useMemo(() => {
|
||||
const openOrders = s.orders.filter(isOpen);
|
||||
const overdue = s.orders.filter((o) => isOverdue(o, s.today));
|
||||
const pickupQ = s.pickups.filter((p) => !p.pickedUp);
|
||||
const wait14 = pickupQ.filter((p) => daysBetween(p.received, s.today) >= 14);
|
||||
// Spend = orders actually placed this month (drafts, incl. auto-replenishment, are not spend yet).
|
||||
const mtd = s.orders.filter((o) => o.date.slice(0, 7) === s.today.slice(0, 7) && o.status !== "Cancelled" && o.status !== "Draft" && !o.parentId).reduce((t, o) => t + orderTotal(o, byId), 0);
|
||||
const lowRows: { label: string; size: string; onhand: number; reorder: number }[] = [];
|
||||
for (const v of variants) { const oh = onhand(s, L, v.key), ro = reorderAt(s, v.key); if (touched(s, L, v.key) && oh <= ro) lowRows.push({ label: label(v.item), size: v.size, onhand: oh, reorder: ro }); }
|
||||
// Who holds more than one person holds: what is out with them and what is owed to them, against
|
||||
// six sets at any time. Asked exactly the way the staff register asks it, so the two screens
|
||||
// always give the same count. It is not what anybody drew this year. By that measure a new
|
||||
// starter handed three sets on Monday has had a year's worth and is nowhere near the ceiling, and
|
||||
// a tile calling her over sends a coordinator after somebody the counter would serve without a
|
||||
// second look.
|
||||
//
|
||||
// There is no "nearly there" count beside it. Holding the full six is where somebody fully kitted
|
||||
// is meant to be, not a warning, so on a settled ward it would be most of the ward.
|
||||
const held = heldByStaff(s);
|
||||
const over = s.staff.filter((st) => !st.inactive && capState({ held: held[st.id] || NOTHING, capSets: s.settings.capSets }).over).length;
|
||||
const cap = setsCap(s.settings.capSets);
|
||||
const fy = fyStart(s.today);
|
||||
return { openOrders, overdue, pickupQ, wait14, mtd, lowRows, over, cap, fy };
|
||||
}, [s, L, byId, variants]);
|
||||
|
||||
/* The tiles are the read from the doorway: four things somebody has to act on today. Each one is
|
||||
either quiet or flagged, and a flagged tile says so three ways — a rule down its edge, a mark
|
||||
against the figure, and a note in plain words — because the vermilion is already the brand
|
||||
colour on the rail and on every primary button, and a second red across the room is a guess
|
||||
rather than a signal.
|
||||
|
||||
Nothing on a tile is repeated in the registers below it. A figure printed twice on one screen is
|
||||
two chances to disagree, and the linen room reads whichever one it happened to land on. */
|
||||
const tiles = [
|
||||
{ label: "Awaiting pickup", val: d.pickupQ.length, note: d.wait14.length ? `${d.wait14.length} waiting a fortnight or more` : "bags received and not collected", flag: d.wait14.length > 0 },
|
||||
{ label: "Overdue for delivery", val: d.overdue.length, note: d.overdue.length ? "past the date the supplier gave" : "nothing past its delivery date", flag: d.overdue.length > 0 },
|
||||
{ label: "Lines at reorder", val: d.lowRows.length, note: d.lowRows.length ? "at or below their reorder level" : "every line above its reorder level", flag: d.lowRows.length > 0 },
|
||||
{ label: "Over the ceiling", val: d.over, note: d.over ? `past the ${d.cap} sets one person holds` : `nobody past the ${d.cap} sets one person holds`, flag: d.over > 0 },
|
||||
];
|
||||
|
||||
// The facts that are not a task: true of the facility, worth a glance, never the reason somebody
|
||||
// walks to the counter. Three registers, one per part of the job.
|
||||
const registers: { title: string; rows: [string, React.ReactNode][] }[] = [
|
||||
{ title: "Orders", rows: [["Open orders", d.openOrders.length], ["Month-to-date spend", money(d.mtd)]] },
|
||||
{ title: "Stock", rows: [
|
||||
["Pre-loved pool", (() => { let u = 0, sz = 0; for (const k in s.stock) if (s.stock[k].preloved > 0) { u += s.stock[k].preloved; sz++; } return u ? `${u} across ${sz} size${sz === 1 ? "" : "s"}` : "0"; })()],
|
||||
["Issues recorded (FY)", s.issues.filter((i) => i.date >= d.fy).length],
|
||||
["Stocktake adjustments", Object.values(s.stock).filter((x) => x.adj).length],
|
||||
] },
|
||||
// "Receipts not yet signed" reads handedIn as well as returned: a garment handed back at the
|
||||
// counter is stamped handedIn and never gets a returned date, so it can never be signed for.
|
||||
// Counting those made the figure a queue that only ever grew, which is how a number the linen
|
||||
// room is meant to work down stops being read at all.
|
||||
{ title: "Staff", rows: [["On the register", s.staff.filter((st) => !st.inactive).length], ["Receipts not yet signed", s.issues.filter((i) => !i.receipt && !i.returned && !i.handedIn).length]] },
|
||||
];
|
||||
|
||||
const tasks = d.pickupQ.map((p) => ({ p, st: staffById[p.staffId], days: daysBetween(p.received, s.today) })).sort((a, b) => b.days - a.days);
|
||||
const setupNeeded = s.catalog.length === 0 || s.staff.length === 0;
|
||||
|
||||
return (
|
||||
<section>
|
||||
<PageHead eyebrow="Overview" title="Dashboard">
|
||||
<Link href="/app/issue" className="btn btn-primary">Issue stock</Link>
|
||||
<button className="btn btn-secondary" onClick={() => setNewOrder(true)}>New order</button>
|
||||
</PageHead>
|
||||
{(welcome || setupNeeded) && (
|
||||
<div className="tc-panel" style={{ marginBottom: "var(--space-6)" }}>
|
||||
<div className="tc-panel-body" style={{ display: "flex", gap: "var(--space-4)", alignItems: "center", flexWrap: "wrap" }}>
|
||||
<div style={{ flex: 1, minWidth: 240 }}>
|
||||
<div style={{ fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: 18 }}>{welcome ? "Welcome to ThreadCount" : "Finish setting up"}</div>
|
||||
<div style={{ fontSize: 13, color: "var(--color-neutral-800)", marginTop: 4, lineHeight: 1.6 }}>
|
||||
{s.catalog.length === 0 ? "Your catalogue is empty — import it from a CSV in Settings → Data. " : ""}
|
||||
{s.staff.length === 0 ? "The staff register is empty — add staff or import a CSV. " : ""}
|
||||
{!setupNeeded && "Your facility is set up. Set reorder levels on the Inventory screen and start issuing."}
|
||||
</div>
|
||||
</div>
|
||||
<Link href="/app/settings?tab=data" className="btn btn-primary">Open Settings → Data</Link>
|
||||
{welcome && <button className="btn btn-ghost" onClick={() => setWelcome(false)}>Dismiss</button>}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<KpiStrip items={tiles} />
|
||||
<div className="tc-grid" style={{ display: "grid", gridTemplateColumns: "3fr 2fr", gap: "var(--space-6)", marginTop: "var(--space-6)" }}>
|
||||
<div className="tc-panel">
|
||||
<div className="tc-panel-head">
|
||||
<div>Awaiting pickup — call list</div>
|
||||
<div className="tc-panel-aside">sorted by days waiting</div>
|
||||
</div>
|
||||
{/* ErrorLine draws nothing when there is nothing to say, so this wrapper collapses with it
|
||||
rather than opening a gap above the first row. */}
|
||||
<div style={{ padding: "0 var(--space-4)" }}><ErrorLine msg={err} /></div>
|
||||
{tasks.length === 0 && <div className="tc-panel-body"><Empty pad={2}>Nothing waiting to be collected.</Empty></div>}
|
||||
<div className="tc-panel-list">
|
||||
{tasks.map(({ p, st, days }) => {
|
||||
const ord = s.orders.find((o) => o.id === p.orderId);
|
||||
const late = days >= 14;
|
||||
return (
|
||||
<div key={p.id} className={"tc-row" + (late ? " tc-flag" : "")} style={{ flexWrap: "wrap" }}>
|
||||
<div className="tc-row-fig" style={{ width: 48, flex: "none" }}>{days}d</div>
|
||||
<div className="tc-row-main">
|
||||
<div className="tc-row-name">{staffName(st, "Staff")} {telHref(st?.phone) ? <a href={telHref(st?.phone)} style={{ fontWeight: 400, color: "var(--color-neutral-700)" }}>{st?.phone}</a> : <span style={{ fontWeight: 400, color: "var(--color-neutral-700)" }}>{st?.phone}</span>}</div>
|
||||
<div className="tc-row-meta">{late && <span className="tc-mark" aria-hidden="true" />}{late ? "Waiting a fortnight or more · " : ""}{p.lines.map((l) => `${label(byId[l.itemId])} ${l.size} ×${l.qty}`).join(", ")} · {p.orderCode}</div>
|
||||
</div>
|
||||
{p.contacted ? <span className="tag tag-neutral">Contacted</span> : <button className="btn btn-ghost" onClick={() => act("pickup.contacted", { id: p.id })}>Mark contacted</button>}
|
||||
<button className="btn btn-ghost" onClick={() => openSlip("collection", { staffName: staffName(st), dept: st?.dept, sets: p.lines.reduce((t, l) => t + l.qty, 0), po: ord?.ref || ord?.code || "", dateReceived: p.received, notifiedPhone: p.contacted, dateNotified: "" })}>Collection slip</button>
|
||||
<button className="btn btn-secondary" onClick={() => act("pickup.pickedUp", { id: p.id })}>Picked up</button>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
<div className="tc-panel">
|
||||
{/* Every row in here is by definition at its reorder level, so a rule down all of them
|
||||
would mark nothing. The rule is kept for the sizes that are actually empty — a nurse
|
||||
at the counter can be handed a low size and cannot be handed none. */}
|
||||
<div className="tc-panel-head">
|
||||
<div>Reorder flags</div>
|
||||
{d.lowRows.length > 0 && <div className="tc-panel-aside">{d.lowRows.length} line{d.lowRows.length === 1 ? "" : "s"}</div>}
|
||||
</div>
|
||||
{d.lowRows.length === 0 && <div className="tc-panel-body"><Empty pad={2}>No stock lines at or below reorder level.</Empty></div>}
|
||||
<div className="tc-panel-list">
|
||||
{d.lowRows.slice(0, 12).map((r, i) => (
|
||||
<div key={i} className={"tc-row" + (r.onhand <= 0 ? " tc-flag" : "")}>
|
||||
<div className="tc-row-main">
|
||||
<div className="tc-row-name" style={{ whiteSpace: "nowrap" }}>{r.label} · {r.size}</div>
|
||||
<div className="tc-row-meta">{r.onhand <= 0 && <span className="tc-mark" aria-hidden="true" />}{r.onhand <= 0 ? "None on the shelf · " : ""}re-order at {r.reorder}</div>
|
||||
</div>
|
||||
<div className="tc-row-fig">{r.onhand}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{d.lowRows.length > 12 && <div className="tc-panel-foot" style={{ fontSize: 12, color: "var(--color-neutral-700)" }}>+{d.lowRows.length - 12} more — use <Link href="/app/stock">Order flagged</Link> on Inventory.</div>}
|
||||
</div>
|
||||
</div>
|
||||
<div className="tc-grid" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "var(--space-6)", marginTop: "var(--space-6)" }}>
|
||||
{registers.map((g) => (
|
||||
<div key={g.title} className="tc-panel">
|
||||
<div className="tc-panel-head">{g.title}</div>
|
||||
<div className="tc-panel-list">
|
||||
{g.rows.map(([lbl, val]) => (
|
||||
<div key={lbl} className="tc-row">
|
||||
<div className="tc-row-main"><div className="tc-row-name" style={{ fontWeight: 500 }}>{lbl}</div></div>
|
||||
<div className="tc-row-fig">{val}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{newOrder && <NewOrderDialog onClose={() => setNewOrder(false)} />}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,537 @@
|
||||
"use client";
|
||||
import { useMemo, useState } from "react";
|
||||
import { useDerived, useSnap } from "@/lib/client";
|
||||
import { PageHead, Dialog, Empty, KpiStrip, th } from "@/components/ui";
|
||||
import { ccOf, countsAsIssued, csvEsc, csvOf, fmtDate, fyStart, issueCost, label, longLabel, money, monthLabel, onhand, orderTotal, prevMonth, setsCap, shiftMonth, signedInt, signedMoney, staffName } from "@/lib/compute";
|
||||
import { downloadCsv, printDoc, tbl, type Col } from "@/lib/print";
|
||||
|
||||
const TABS = ["Overview", "Journal", "Top stock", "Valuation", "Shrinkage", "Exceptions", "Suppliers", "Approvals", "Pre-loved"] as const;
|
||||
type Tab = (typeof TABS)[number];
|
||||
|
||||
/* Every table and every list on this screen sits in the same bordered block with its name across
|
||||
the top, because nine tabs that each invent their own heading is how a month-end pack ends up
|
||||
looking like nine different reports. `flag` is for the tab that is telling finance something is
|
||||
wrong — an unpostable journal line, stock gone missing, a garment handed over past the ceiling —
|
||||
and marks it the way the rest of the app marks trouble: a rule down the edge and a mark beside
|
||||
the name, so it does not rely on a red that is also the brand's. */
|
||||
function Panel({ title, aside, right, flag, children }: { title: React.ReactNode; aside?: React.ReactNode; right?: React.ReactNode; flag?: boolean; children: React.ReactNode }) {
|
||||
return (
|
||||
<div className={"tc-panel" + (flag ? " tc-flag" : "")} style={{ marginTop: "var(--space-6)" }}>
|
||||
<div className="tc-panel-head">
|
||||
<span>{flag && <span className="tc-mark" aria-hidden="true" />}{title}</span>
|
||||
{(aside || right) && <span style={{ display: "flex", alignItems: "baseline", gap: "var(--space-3)" }}>{aside && <span className="tc-panel-aside">{aside}</span>}{right}</span>}
|
||||
</div>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function ReportPage() {
|
||||
const { s } = useSnap();
|
||||
const { L, byId, staffById } = useDerived();
|
||||
const [month, setMonth] = useState(s.today.slice(0, 7));
|
||||
const [tab, setTab] = useState<Tab>("Overview");
|
||||
// The cost centre whose issues are open, as the keys its figure was summed from. Only the keys
|
||||
// are held: the items and the money are recounted from the snapshot on every render, so the
|
||||
// drill-down still agrees with the row underneath it if stock moves while the dialog is open.
|
||||
const [drill, setDrill] = useState<{ cc: string; dept: string; keys: string[] } | null>(null);
|
||||
|
||||
const R = useMemo(() => {
|
||||
const months = new Set([s.today.slice(0, 7)]);
|
||||
s.issues.forEach((i) => months.add(i.date.slice(0, 7))); s.orders.forEach((o) => o.date && months.add(o.date.slice(0, 7)));
|
||||
for (let i = 5; i >= 0; i--) months.add(shiftMonth(month, -i)); // trend bars are clickable, so they must be selectable
|
||||
const repMonths = [...months].sort().reverse();
|
||||
const cost = (itemId: string) => byId[itemId]?.cost || 0; // catalogue cost (stocktake lines, valuation)
|
||||
const mIssues = s.issues.filter((i) => i.date.slice(0, 7) === month && countsAsIssued(i) && !i.preloved);
|
||||
const mPl = s.issues.filter((i) => i.date.slice(0, 7) === month && countsAsIssued(i) && i.preloved);
|
||||
const pm = prevMonth(month);
|
||||
const pIssues = s.issues.filter((i) => i.date.slice(0, 7) === pm && countsAsIssued(i) && !i.preloved);
|
||||
// Pre-loved: free reissues (value saved at catalogue cost), hand-ins, and the pool at $0.
|
||||
const plIssueRows = mPl.map((i) => { const it = byId[i.itemId]; return { date: i.date, who: staffName(staffById[i.staffId], "—"), item: label(it), size: it ? String(it.sizes[i.si]) : "?", qty: i.qty, saved: i.qty * (it?.cost || 0) }; });
|
||||
const plSaved = plIssueRows.reduce((t, r) => t + r.saved, 0), plQty = mPl.reduce((t, i) => t + i.qty, 0);
|
||||
const mHi = s.handins.filter((h) => h.date.slice(0, 7) === month);
|
||||
const hiRows = mHi.map((h) => ({ date: h.date, who: staffName(staffById[h.staffId], "—"), by: h.by, good: h.lines.filter((l) => l.cond === "Good").reduce((t, l) => t + l.qty, 0), rag: h.lines.filter((l) => l.cond === "Rag").reduce((t, l) => t + l.qty, 0), credit: h.credit ? "Credited" : "—" }));
|
||||
const ragMonth = hiRows.reduce((t, r) => t + r.rag, 0);
|
||||
const plByItem: Record<string, string[]> = {};
|
||||
for (const k in s.stock) { const n = s.stock[k].preloved; if (!(n > 0)) continue; const itemId = k.slice(0, k.lastIndexOf(":")), si = +k.slice(k.lastIndexOf(":") + 1); const it = byId[itemId]; if (!it) continue; (plByItem[itemId] = plByItem[itemId] || []).push(`${it.sizes[si]} ×${n}`); }
|
||||
const plPoolRows = Object.keys(plByItem).map((itemId) => ({ item: label(byId[itemId]), sizes: plByItem[itemId].join(", "), total: plByItem[itemId].reduce((t, x) => t + parseInt(x.split("×")[1], 10), 0) }));
|
||||
const plPoolTotal = plPoolRows.reduce((t, r) => t + r.total, 0);
|
||||
type Agg = { items: number; amt: number };
|
||||
const sumBy = (arr: typeof mIssues, keyFn: (i: (typeof arr)[number]) => string) => { const m: Record<string, Agg> = {}; for (const i of arr) { const k = keyFn(i); if (!m[k]) m[k] = { items: 0, amt: 0 }; m[k].items += i.qty; m[k].amt += i.qty * issueCost(i, byId); } return m; };
|
||||
const ccKey = (i: (typeof mIssues)[number]) => { const st = staffById[i.staffId]; return st ? (ccOf(s, st) || "—") + "|" + (st.dept || "Unknown") : "—|Unknown"; };
|
||||
const byCC = sumBy(mIssues, ccKey), byCCPrev = sumBy(pIssues, ccKey);
|
||||
// Union of this month's and last month's cost centres so the Prev column reconciles to the previous-month total.
|
||||
const ccKeys = [...new Set([...Object.keys(byCC), ...Object.keys(byCCPrev)])];
|
||||
const ccRows = ccKeys.map((k) => { const v = byCC[k] || { items: 0, amt: 0 }; const [cc, dept] = k.split("|"); const prev = byCCPrev[k]?.amt || 0; return { key: k, cc, dept, items: v.items, amt: v.amt, prev, delta: v.amt - prev }; }).sort((a, b) => b.amt - a.amt || b.prev - a.prev);
|
||||
// What each cost-centre figure is actually made of, filed under the same key the total was
|
||||
// grouped on. Grouping the detail the same way as the total is what stops a drill-down from
|
||||
// disagreeing with the row that opened it — a ward manager checking their number would rather
|
||||
// have no drill-down than one that doesn't add up.
|
||||
const ccLines: Record<string, { date: string; who: string; item: string; size: string; qty: number; unit: number; amt: number }[]> = {};
|
||||
for (const i of mIssues) { const k = ccKey(i); const it = byId[i.itemId]; const unit = issueCost(i, byId); (ccLines[k] = ccLines[k] || []).push({ date: i.date, who: staffName(staffById[i.staffId], "—"), item: label(it), size: it ? String(it.sizes[i.si]) : "?", qty: i.qty, unit, amt: i.qty * unit }); }
|
||||
const totAmt = mIssues.reduce((t, i) => t + i.qty * issueCost(i, byId), 0), totPrev = pIssues.reduce((t, i) => t + i.qty * issueCost(i, byId), 0), totItems = mIssues.reduce((t, i) => t + i.qty, 0);
|
||||
// "Placed" = sent to the supplier; drafts (incl. auto-replenishment) are not spend yet.
|
||||
// Back orders carry the parent's short lines, so they're excluded from spend to avoid counting those lines twice.
|
||||
const placed = (o: (typeof s.orders)[number]) => o.status !== "Cancelled" && o.status !== "Draft" && !o.parentId;
|
||||
const mOrders = s.orders.filter((o) => o.date.slice(0, 7) === month && placed(o));
|
||||
const ordSpend = mOrders.reduce((t, o) => t + orderTotal(o, byId), 0);
|
||||
const byG = sumBy(mIssues, (i) => staffById[i.staffId]?.group || "Unknown");
|
||||
const groupRows = Object.entries(byG).sort((a, b) => b[1].amt - a[1].amt).map(([g, v]) => ({ g, ...v }));
|
||||
const supAgg: Record<string, { n: number; amt: number; inv: string[] }> = {};
|
||||
for (const o of mOrders) { const v = orderTotal(o, byId); if (!supAgg[o.supplier]) supAgg[o.supplier] = { n: 0, amt: 0, inv: [] }; supAgg[o.supplier].n++; supAgg[o.supplier].amt += v; if (o.invoice && !supAgg[o.supplier].inv.includes(o.invoice)) supAgg[o.supplier].inv.push(o.invoice); for (const rc of o.receipts) if (rc.invoice && !supAgg[o.supplier].inv.includes(rc.invoice)) supAgg[o.supplier].inv.push(rc.invoice); }
|
||||
const supRows = Object.entries(supAgg).sort((a, b) => b[1].amt - a[1].amt).map(([name, v]) => ({ name, n: v.n, amt: v.amt, invoices: v.inv.join(", ") || "—" }));
|
||||
const issueAgg = (m: string) => { const a = s.issues.filter((i) => i.date.slice(0, 7) === m && countsAsIssued(i) && !i.preloved); return { items: a.reduce((t, i) => t + i.qty, 0), amt: a.reduce((t, i) => t + i.qty * issueCost(i, byId), 0) }; };
|
||||
const orderAgg = (m: string) => s.orders.filter((o) => o.date.slice(0, 7) === m && placed(o)).reduce((t, o) => t + orderTotal(o, byId), 0);
|
||||
const fyMonths: string[] = []; { let cur = fyStart(month + "-15").slice(0, 7); let g = 0; while (cur <= month && g++ < 13) { fyMonths.push(cur); cur = shiftMonth(cur, 1); } }
|
||||
let fti = 0, fta = 0, fto = 0;
|
||||
const fyRows = fyMonths.map((m) => { const ia = issueAgg(m); const ov = orderAgg(m); fti += ia.items; fta += ia.amt; fto += ov; return { m, label: monthLabel(m, { month: "short", year: "2-digit" }), items: ia.items, issued: ia.amt, orders: ov }; });
|
||||
const trendM: string[] = []; for (let i = 5; i >= 0; i--) trendM.push(shiftMonth(month, -i));
|
||||
const tv = trendM.map((m) => issueAgg(m).amt); const tmax = Math.max(...tv, 1);
|
||||
const trend = trendM.map((m, i) => ({ m, label: monthLabel(m, { month: "short" }), amt: tv[i], h: tv[i] ? Math.max(Math.round((tv[i] / tmax) * 70), 4) : 2, sel: m === month }));
|
||||
const byS = sumBy(mIssues, (i) => i.staffId);
|
||||
const staffRows = Object.entries(byS).sort((a, b) => b[1].amt - a[1].amt).map(([sid, v]) => { const st = staffById[sid]; return { who: staffName(st, "—"), cc: ccOf(s, st), ...v }; });
|
||||
// Journal
|
||||
const glAcct = s.settings.glAccount || "—";
|
||||
const jnDesc = `${s.settings.journalDesc || "Uniform issues"} ${monthLabel(month)}`;
|
||||
// One debit per cost centre: departments that share a CC (or a ccOverride pointing at another dept's code) fold together.
|
||||
const jnAgg: Record<string, { cc: string; depts: string[]; keys: string[]; items: number; debit: number }> = {};
|
||||
for (const r of ccRows) { if (r.items <= 0) continue; const cc = r.cc === "—" ? "UNALLOCATED" : r.cc; const a = jnAgg[cc] || (jnAgg[cc] = { cc, depts: [], keys: [], items: 0, debit: 0 }); if (!a.depts.includes(r.dept)) a.depts.push(r.dept); a.keys.push(r.key); a.items += r.items; a.debit += r.amt; }
|
||||
const jnRows = Object.values(jnAgg).sort((a, b) => b.debit - a.debit).map((a) => ({ cc: a.cc, dept: a.depts.join(" / "), keys: a.keys, gl: glAcct, desc: jnDesc, items: a.items, debit: a.debit }));
|
||||
const jnUnallocated = jnRows.some((r) => r.cc === "UNALLOCATED");
|
||||
// Top stock
|
||||
const byItem: Record<string, Agg> = {}; const fyByItem: Record<string, number> = {};
|
||||
const fy = fyStart(month + "-15"); // financial year of the selected month
|
||||
// Every FY figure on this page — Top stock's, Exceptions' and Shrinkage's — stops at the end of
|
||||
// the selected month. Without the upper bound, reprinting June's pack in September counts three
|
||||
// months that hadn't happened when June closed, so the reprint no longer agrees with the pack
|
||||
// finance was already given.
|
||||
const fyCutoff = shiftMonth(month, 1) + "-01"; // exclusive: dates in `month` sort before it
|
||||
for (const i of mIssues) { if (!byItem[i.itemId]) byItem[i.itemId] = { items: 0, amt: 0 }; byItem[i.itemId].items += i.qty; byItem[i.itemId].amt += i.qty * issueCost(i, byId); }
|
||||
for (const i of s.issues) if (countsAsIssued(i) && !i.preloved && i.date >= fy && i.date < fyCutoff) fyByItem[i.itemId] = (fyByItem[i.itemId] || 0) + i.qty;
|
||||
const mTotQty = Object.values(byItem).reduce((t, v) => t + v.items, 0);
|
||||
const topRows = Object.entries(byItem).sort((a, b) => b[1].items - a[1].items).slice(0, 15).map(([id, v], n) => ({ n: n + 1, item: label(byId[id]), supplier: byId[id]?.supplier || "—", qty: v.items, val: v.amt, share: Math.round((v.items / Math.max(mTotQty, 1)) * 100) + "%", fyQty: fyByItem[id] || 0 }));
|
||||
// Valuation
|
||||
let negSizes = 0;
|
||||
const valRows = s.catalog.map((it) => { const units = it.sizes.reduce((t, _sz, si) => { const oh = onhand(s, L, `${it.id}:${si}`); if (oh < 0) negSizes++; return t + Math.max(0, oh); }, 0); return { item: longLabel(it), sku: it.sku || "—", supplier: it.supplier || "—", units, cost: it.cost, val: units * it.cost }; }).filter((x) => x.units > 0).sort((a, b) => b.val - a.val);
|
||||
const valTotUnits = valRows.reduce((t, x) => t + x.units, 0), valTot = valRows.reduce((t, x) => t + x.val, 0);
|
||||
// Shrinkage
|
||||
// Bounded at fyCutoff like the other FY figures: a count filed in July must not change the
|
||||
// shrinkage figure on June's pack after finance has it. Pool counts are at $0, not shrinkage.
|
||||
const fyTakes = s.stocktakes.filter((h) => h.date >= fy && h.date < fyCutoff && h.mode !== "preloved");
|
||||
let shU = 0, shV = 0;
|
||||
const shRows = fyTakes.map((h) => { const nu = h.lines.reduce((t, l) => t + (l.counted - l.sys), 0); const nv = h.lines.reduce((t, l) => t + (l.counted - l.sys) * cost(l.itemId), 0); shU += nu; shV += nv; return { date: h.date, by: h.by, counted: h.counted, variances: h.variances, net: nu, netVal: nv }; });
|
||||
// Exceptions
|
||||
const excThreshold = s.settings.exceptionHigh || 10;
|
||||
const mByStaff: Record<string, number> = {}; for (const i of mIssues) mByStaff[i.staffId] = (mByStaff[i.staffId] || 0) + i.qty;
|
||||
const cap = setsCap(s.settings.capSets);
|
||||
// Garments handed over this month past the six sets one person holds, on a coordinator's
|
||||
// override. That is the one exception the ceiling itself produces, and the counter stamps it on
|
||||
// the issue for this tab to find. It is read from that stamp rather than from anybody's locker
|
||||
// today, because today's locker is not June's: a June pack reprinted in September would name
|
||||
// whoever happens to be past the ceiling now, and saying who that is belongs to the staff
|
||||
// register and the dashboard. Every stamped row in the month counts, pre-loved and since-returned
|
||||
// included, because the decision was made at the counter on the day. A partial hand-in splits a
|
||||
// row without changing its date, so the halves still add up to what went over.
|
||||
const ovByStaff: Record<string, number> = {};
|
||||
for (const i of s.issues) if (i.override && i.date.slice(0, 7) === month) ovByStaff[i.staffId] = (ovByStaff[i.staffId] || 0) + i.qty;
|
||||
// Garments handed over this month outside the person's staff group, on the same tick but stamped
|
||||
// apart (offGroup), so they are counted and named apart. Same month rule as above. A garment can
|
||||
// be both, and then it is on both lines, because two rules were bent.
|
||||
const ogByStaff: Record<string, Record<string, number>> = {};
|
||||
for (const i of s.issues) if (i.offGroup && i.date.slice(0, 7) === month) { const m = (ogByStaff[i.staffId] = ogByStaff[i.staffId] || {}); const n = label(byId[i.itemId]); m[n] = (m[n] || 0) + i.qty; }
|
||||
// Garments handed over this month in a cut the person isn't offered, on the same tick and stamped
|
||||
// apart again (offStyle). Same month rule, and the same reason for counting it apart: the ceiling,
|
||||
// the staff group and the cut are three different decisions a coordinator made, and a row that
|
||||
// named them all as "an override" tells whoever reads the pack nothing about which was bent.
|
||||
const osByStaff: Record<string, Record<string, number>> = {};
|
||||
for (const i of s.issues) if (i.offStyle && i.date.slice(0, 7) === month) { const m = (osByStaff[i.staffId] = osByStaff[i.staffId] || {}); const n = label(byId[i.itemId]); m[n] = (m[n] || 0) + i.qty; }
|
||||
// What each person has drawn this financial year, to the end of the selected month. It is a
|
||||
// tally printed beside the month's figure, and nobody is flagged on it: what anybody may have is
|
||||
// six sets held at any time, with no year in it, and a report calling somebody over on a yearly
|
||||
// count sends a coordinator after a new starter the counter has kitted out quite properly.
|
||||
// Counted here rather than with entUsed(), which always measures the year containing today, so a
|
||||
// closed month reprints with the figures it was first printed with. fyCutoff is the one Top
|
||||
// stock and Shrinkage count to, so no two tabs quote a different window for the same month. Same
|
||||
// rules as entUsed(): pre-loved is free and not counted, a garment returned in good condition
|
||||
// never counted, and a credited hand-in takes the good garments back off.
|
||||
const fyByStaff: Record<string, number> = {};
|
||||
for (const i of s.issues) if (!i.preloved && countsAsIssued(i) && i.date >= fy && i.date < fyCutoff) fyByStaff[i.staffId] = (fyByStaff[i.staffId] || 0) + i.qty;
|
||||
for (const h of s.handins) if (h.credit && h.date >= fy && h.date < fyCutoff) for (const l of h.lines) fyByStaff[h.staffId] = (fyByStaff[h.staffId] || 0) - l.credited;
|
||||
const excRows: { who: string; group: string; cc: string; mQty: number; fyQty: number; ovQty: number; ogQty: number; osQty: number; flags: string[]; flag: string }[] = [];
|
||||
for (const st of s.staff) {
|
||||
const fyQ = Math.max(0, fyByStaff[st.id] || 0); const mQ = mByStaff[st.id] || 0; const ov = ovByStaff[st.id] || 0;
|
||||
const og = Object.entries(ogByStaff[st.id] || {}); const ogQ = og.reduce((t, [, n]) => t + n, 0);
|
||||
const os = Object.entries(osByStaff[st.id] || {}); const osQ = os.reduce((t, [, n]) => t + n, 0);
|
||||
const flags: string[] = [];
|
||||
if (ov) flags.push(`Past ${cap} sets on an override — ${ov} garment${ov === 1 ? "" : "s"}`);
|
||||
if (ogQ) flags.push(`Outside their staff group on an override — ${og.map(([n, q]) => `${n} ×${q}`).join(", ")}`);
|
||||
if (osQ) flags.push(`Not their uniform style on an override — ${os.map(([n, q]) => `${n} ×${q}`).join(", ")}`);
|
||||
if (mQ >= excThreshold) flags.push(`${mQ} items this month (threshold ${excThreshold})`);
|
||||
if (flags.length) excRows.push({ who: staffName(st), group: st.group, cc: ccOf(s, st), mQty: mQ, fyQty: fyQ, ovQty: ov, ogQty: ogQ, osQty: osQ, flags, flag: flags.join(" · ") });
|
||||
}
|
||||
// Overrides first, of any kind. Each one is a decision somebody made at the counter, and it is
|
||||
// the row a coordinator gets asked about. Volume on its own comes after, busiest first.
|
||||
excRows.sort((a, b) => Number(b.ovQty + b.ogQty + b.osQty > 0) - Number(a.ovQty + a.ogQty + a.osQty > 0) || b.mQty - a.mQty);
|
||||
// Approvals
|
||||
const apprRows = s.approvals.filter((a) => a.sets - a.used > 0).map((a) => { const st = staffById[a.staffId]; return { who: staffName(st, "—"), dept: st?.dept || "—", by: a.by, date: a.date, sets: a.sets, used: a.used, rem: a.sets - a.used }; });
|
||||
const apprTot = apprRows.reduce((t, a) => t + a.rem, 0);
|
||||
return { repMonths, ccRows, ccLines, totAmt, totPrev, totItems, ordSpend, groupRows, supRows, fyRows, fyTot: { items: fti, issued: fta, orders: fto }, trend, staffRows, glAcct, jnDesc, jnRows, jnUnallocated, topRows, valRows, valTotUnits, valTot, negSizes, shRows, shU, shV, cap, excThreshold, excRows, apprRows, apprTot, plIssueRows, plSaved, plQty, hiRows, ragMonth, plPoolRows, plPoolTotal };
|
||||
}, [s, L, byId, staffById, month]);
|
||||
|
||||
const mLbl = monthLabel(month);
|
||||
const meta = `${s.settings.facility} · ${s.settings.location} · prepared ${fmtDate(s.today)}${s.settings.coordinator ? " by " + s.settings.coordinator : ""}`;
|
||||
const jnTotItems = R.jnRows.reduce((t, r) => t + r.items, 0), jnTot = R.jnRows.reduce((t, r) => t + r.debit, 0);
|
||||
const drillRows = useMemo(() => (drill ? drill.keys.flatMap((k) => R.ccLines[k] || []).sort((a, b) => a.date.localeCompare(b.date) || a.who.localeCompare(b.who) || a.item.localeCompare(b.item)) : []), [drill, R]);
|
||||
const drillQty = drillRows.reduce((t, r) => t + r.qty, 0), drillAmt = drillRows.reduce((t, r) => t + r.amt, 0);
|
||||
const csvDrill = () => drill && downloadCsv(`threadcount-cost-centre-${drill.cc.replace(/[^A-Za-z0-9]+/g, "-").toLowerCase()}-${month}.csv`, `Issues behind cost centre,${csvEsc(drill.cc)},${month}\n\n` + csvOf(["Date", "Staff", "Item", "Size", "Qty", "Unit cost", "Value"], [...drillRows.map((r) => [r.date, r.who, r.item, r.size, r.qty, r.unit.toFixed(2), r.amt.toFixed(2)] as (string | number)[]), ["TOTAL", "", "", "", drillQty, "", drillAmt.toFixed(2)]]));
|
||||
|
||||
const csvOverview = () => {
|
||||
let csv = `ThreadCount monthly report,${month},${csvEsc(s.settings.facility)}\n\n` + csvOf(["Cost Centre", "Department", "Items", "Amount", "Previous Month"], [...R.ccRows.map((r) => [r.cc, r.dept, r.items, r.amt.toFixed(2), r.prev.toFixed(2)] as (string | number)[]), ["TOTAL", "", R.totItems, R.totAmt.toFixed(2), R.totPrev.toFixed(2)]]);
|
||||
csv += "\n" + csvOf(["Staff Group", "Items", "Amount"], R.groupRows.map((g) => [g.g, g.items, g.amt.toFixed(2)]));
|
||||
csv += "\n" + csvOf(["Staff", "Cost Centre", "Items", "Amount"], R.staffRows.map((r) => [r.who, r.cc, r.items, r.amt.toFixed(2)]));
|
||||
csv += "\n" + csvOf(["Supplier", "Orders", "Amount"], R.supRows.map((r) => [r.name, r.n, r.amt.toFixed(2)]));
|
||||
csv += "\n" + csvOf(["FY Month", "Items Issued", "Issued Value", "Orders Placed"], [...R.fyRows.map((m) => [m.label, m.items, m.issued.toFixed(2), m.orders.toFixed(2)] as (string | number)[]), ["FY TOTAL", R.fyTot.items, R.fyTot.issued.toFixed(2), R.fyTot.orders.toFixed(2)]]);
|
||||
downloadCsv(`threadcount-report-${month}.csv`, csv);
|
||||
};
|
||||
const csvJournal = () => downloadCsv(`threadcount-journal-${month}.csv`, csvOf(["Cost Centre", "Department", "GL Account", "Description", "Items", "Debit"], [...R.jnRows.map((r) => [r.cc, r.dept, r.gl, r.desc, r.items, r.debit.toFixed(2)] as (string | number)[]), ["TOTAL", "", "", "", jnTotItems, jnTot.toFixed(2)]]));
|
||||
const csvValuation = () => downloadCsv(`threadcount-valuation-${s.today}.csv`, `Stock valuation as at,${s.today}\n` + csvOf(["Item", "SKU", "Supplier", "Units", "Unit cost", "Value"], R.valRows.map((x) => [x.item, x.sku, x.supplier, x.units, x.cost, x.val.toFixed(2)])));
|
||||
const tabCsv: Record<Tab, () => void> = {
|
||||
Overview: csvOverview, Journal: csvJournal, Valuation: csvValuation,
|
||||
"Top stock": () => downloadCsv(`threadcount-top-stock-${month}.csv`, csvOf(["Rank", "Item", "Supplier", "Qty (month)", "Value (month)", "Share", "Qty (FY)"], R.topRows.map((r) => [r.n, r.item, r.supplier, r.qty, r.val.toFixed(2), r.share, r.fyQty]))),
|
||||
Shrinkage: () => downloadCsv(`threadcount-shrinkage-${month}.csv`, csvOf(["Date", "Counted by", "Lines counted", "Variances", "Net units", "Net value"], R.shRows.map((r) => [r.date, r.by, r.counted, r.variances, r.net, r.netVal.toFixed(2)]))),
|
||||
Exceptions: () => downloadCsv(`threadcount-exceptions-${month}.csv`, csvOf(["Staff", "Group", "Cost centre", "Items (month)", "Items (FY)", "Flag"], R.excRows.map((r) => [r.who, r.group, r.cc, r.mQty, r.fyQty, r.flag]))),
|
||||
Suppliers: () => downloadCsv(`threadcount-supplier-spend-${month}.csv`, csvOf(["Supplier", "Orders", "Value", "Invoices"], R.supRows.map((r) => [r.name, r.n, r.amt.toFixed(2), r.invoices]))),
|
||||
Approvals: () => downloadCsv(`threadcount-approvals-outstanding-${s.today}.csv`, csvOf(["Staff", "Ward", "Approved by", "Date", "Sets approved", "Collected", "Remaining"], R.apprRows.map((r) => [r.who, r.dept, r.by, r.date, r.sets, r.used, r.rem]))),
|
||||
"Pre-loved": () => downloadCsv(`threadcount-preloved-${month}.csv`, `Pre-loved issues ${month}\n` + csvOf(["Date", "Staff", "Item", "Size", "Qty", "Value saved"], R.plIssueRows.map((r) => [r.date, r.who, r.item, r.size, r.qty, r.saved.toFixed(2)])) + "\nHand-ins\n" + csvOf(["Date", "Staff", "Received by", "Good", "Rag", "Credit"], R.hiRows.map((r) => [r.date, r.who, r.by, r.good, r.rag, r.credit])) + "\nPool snapshot\n" + csvOf(["Item", "Sizes", "Total"], R.plPoolRows.map((r) => [r.item, r.sizes, r.total]))),
|
||||
};
|
||||
const C = (t: string, r = false): Col => ({ t, r });
|
||||
const tabPrint: Record<Tab, () => void> = {
|
||||
Overview: () => printDoc(`Cost centre report — ${mLbl}`, meta, [
|
||||
{ h: "Summary", html: tbl([C(""), C("", true)], [["Issued value (period)", money(R.totAmt)], ["Items issued", R.totItems], ["Supplier orders placed", money(R.ordSpend)], ["vs previous month", money(R.totPrev)]]) },
|
||||
{ h: "Issued value by cost centre", html: tbl([C("CC"), C("Department"), C("Items", true), C("This period", true), C("Prev", true), C("Δ", true)], [...R.ccRows.map((r) => [r.cc, r.dept, r.items, money(r.amt), money(r.prev), signedMoney(r.delta)] as (string | number)[]), ["TOTAL", "", R.totItems, money(R.totAmt), money(R.totPrev), ""]]) },
|
||||
{ h: "By staff group", html: tbl([C("Group"), C("Items", true), C("Value", true)], R.groupRows.map((g) => [g.g, g.items, money(g.amt)])) },
|
||||
{ h: "By staff member", html: tbl([C("Staff"), C("CC"), C("Items", true), C("Value", true)], R.staffRows.map((r) => [r.who, r.cc, r.items, money(r.amt)])) },
|
||||
{ h: "Financial year", html: tbl([C("Month"), C("Items", true), C("Issued", true), C("Orders", true)], [...R.fyRows.map((m) => [m.label, m.items, money(m.issued), money(m.orders)] as (string | number)[]), ["FY TOTAL", R.fyTot.items, money(R.fyTot.issued), money(R.fyTot.orders)]]) },
|
||||
]),
|
||||
Journal: () => printDoc(`End-of-month journal — ${mLbl}`, meta, [{ h: `One debit per cost centre — GL ${R.glAcct}`, html: tbl([C("CC"), C("Department"), C("GL"), C("Description"), C("Items", true), C("Debit", true)], [...R.jnRows.map((r) => [r.cc, r.dept, r.gl, r.desc, r.items, money(r.debit)] as (string | number)[]), ["TOTAL", "", "", "", jnTotItems, money(jnTot)]]) }]),
|
||||
"Top stock": () => printDoc(`Top stock — ${mLbl}`, meta, [{ h: "Most issued items", html: tbl([C("#"), C("Item"), C("Supplier"), C("Qty", true), C("Value", true), C("Share", true), C("Qty FY", true)], R.topRows.map((r) => [r.n, r.item, r.supplier, r.qty, money(r.val), r.share, r.fyQty])) }]),
|
||||
Valuation: () => printDoc(`Stock valuation — as at ${fmtDate(s.today)}`, meta, [{ h: "On-hand value by item", html: tbl([C("Item"), C("SKU"), C("Supplier"), C("Units", true), C("Unit cost", true), C("Value", true)], [...R.valRows.map((r) => [r.item, r.sku, r.supplier, r.units, money(r.cost), money(r.val)] as (string | number)[]), ["TOTAL", "", "", R.valTotUnits, "", money(R.valTot)]]) }]),
|
||||
Shrinkage: () => printDoc(`Stocktake variance / shrinkage — FY to end of ${mLbl}`, meta, [{ h: `${R.shRows.length} stocktakes · net ${signedInt(R.shU)} units · ${signedMoney(R.shV)}`, html: tbl([C("Date"), C("Counted by"), C("Lines", true), C("Variances", true), C("Net units", true), C("Net value", true)], R.shRows.map((r) => [fmtDate(r.date), r.by, r.counted, r.variances, signedInt(r.net), signedMoney(r.netVal)])) }]),
|
||||
Exceptions: () => printDoc(`Staff exceptions — ${mLbl}`, meta, [{ h: `Past ${R.cap} sets, outside their staff group or not their uniform style on an override, or ≥ ${R.excThreshold} items this month`, html: tbl([C("Staff"), C("Group"), C("CC"), C("Month", true), C("FY", true), C("Flag")], R.excRows.map((r) => [r.who, r.group, r.cc, r.mQty, r.fyQty, r.flag])) }]),
|
||||
Suppliers: () => printDoc(`Supplier spend — ${mLbl}`, meta, [{ h: "Orders placed this period", html: tbl([C("Supplier"), C("Orders", true), C("Value", true), C("Invoices")], R.supRows.map((r) => [r.name, r.n, money(r.amt), r.invoices])) }]),
|
||||
Approvals: () => printDoc(`Uncollected manager's approvals — as at ${fmtDate(s.today)}`, meta, [{ h: `${R.apprTot} sets outstanding`, html: tbl([C("Staff"), C("Ward"), C("Approved by"), C("Date"), C("Sets", true), C("Collected", true), C("Remaining", true)], R.apprRows.map((r) => [r.who, r.dept, r.by, fmtDate(r.date), r.sets, r.used, r.rem])) }]),
|
||||
"Pre-loved": () => printDoc(`Pre-loved uniforms — ${mLbl}`, meta, [
|
||||
{ h: `Issued free this period — saved ${money(R.plSaved)}`, html: tbl([C("Date"), C("Staff"), C("Item"), C("Size"), C("Qty", true), C("Value saved", true)], R.plIssueRows.map((r) => [fmtDate(r.date), r.who, r.item, r.size, r.qty, money(r.saved)])) },
|
||||
{ h: `Hand-ins this period · ${R.ragMonth} to rag disposal`, html: tbl([C("Date"), C("Staff"), C("Received by"), C("Good", true), C("Rag", true), C("Credit")], R.hiRows.map((r) => [fmtDate(r.date), r.who, r.by, r.good, r.rag, r.credit])) },
|
||||
{ h: `Pool snapshot — ${R.plPoolTotal} items at $0 book value`, html: tbl([C("Item"), C("Sizes"), C("Total", true)], R.plPoolRows.map((r) => [r.item, r.sizes, r.total])) },
|
||||
]),
|
||||
};
|
||||
function printEomPack() {
|
||||
const sections = [
|
||||
{ h: "Summary", html: tbl([C(""), C("", true), C(""), C("", true)], [["Issued value", money(R.totAmt), "Items issued", R.totItems], ["Supplier orders placed", money(R.ordSpend), "Stock on hand value", money(R.valTot)], ["Shrinkage (FY to end of month)", signedMoney(R.shV), "Stocktakes counted (FY)", R.shRows.length]]) },
|
||||
{ h: "Cost centre summary", html: tbl([C("CC"), C("Department"), C("Items", true), C("Value", true)], [...R.jnRows.map((r) => [r.cc, r.dept, r.items, money(r.debit)] as (string | number)[]), ["TOTAL", "", jnTotItems, money(jnTot)]]) },
|
||||
{ h: `Journal — one debit per cost centre (GL ${R.glAcct})`, html: tbl([C("CC"), C("Description"), C("Debit", true)], R.jnRows.map((r) => [r.cc, r.desc, money(r.debit)])) },
|
||||
{ h: "Top stock", html: tbl([C("Item"), C("Qty", true), C("Value", true)], R.topRows.slice(0, 10).map((r) => [r.item, r.qty, money(r.val)])) },
|
||||
];
|
||||
// Finance is promised shrinkage in this pack, and the net figure is in the summary above every
|
||||
// month. The count-by-count table only turns up when counts were actually filed, the same rule
|
||||
// the exceptions and approvals sections below follow — a heading over an empty table tells
|
||||
// finance nothing and costs them a page.
|
||||
if (R.shRows.length) sections.push({ h: `Shrinkage — stocktake variance, FY to end of ${mLbl} · net ${signedInt(R.shU)} units · ${signedMoney(R.shV)}`, html: tbl([C("Date"), C("Counted by"), C("Variances", true), C("Net units", true), C("Net value", true)], R.shRows.map((r) => [fmtDate(r.date), r.by, r.variances, signedInt(r.net), signedMoney(r.netVal)])) });
|
||||
if (R.excRows.length) sections.push({ h: "Staff exceptions", html: tbl([C("Staff"), C("Cost centre"), C("Flag")], R.excRows.map((r) => [r.who, r.cc, r.flag])) });
|
||||
if (R.apprRows.length) sections.push({ h: "Uncollected manager's approvals", html: tbl([C("Staff"), C("Approved by"), C("Remaining sets", true)], R.apprRows.map((r) => [r.who, r.by, r.rem])) });
|
||||
printDoc(`Month-end pack — ${mLbl}`, meta, sections);
|
||||
}
|
||||
const delta = (d: number) => <span style={{ color: d > 0 ? "var(--color-accent-700)" : "var(--color-neutral-700)" }}>{(d >= 0 ? "+" : "−") + money(Math.abs(d)).slice(1)}</span>;
|
||||
const R2 = (n: number) => ({ textAlign: "right" as const, fontWeight: n });
|
||||
/* A ward manager rings the linen room asking why their number doubled this month, and until now
|
||||
the coordinator had nothing on the screen to answer with. The cost centre is a button: it opens
|
||||
the issues that make the figure beside it — who, which garment, which size, when, what it cost.
|
||||
It is the cell and not the row because a row that only answers to a click is unreachable from
|
||||
the keyboard, and its name carries the figure so it is clear what the button opens. */
|
||||
const drillBtn = (cc: string, dept: string, keys: string[], items: number, amt: number) => {
|
||||
// The Overview prints an em dash for staff who have no cost centre; the journal calls those
|
||||
// UNALLOCATED, and that is the word to say out loud rather than "issues behind —".
|
||||
const name = cc === "—" ? "UNALLOCATED" : cc;
|
||||
return (
|
||||
<button type="button" aria-haspopup="dialog" aria-label={`Show the ${items} item${items === 1 ? "" : "s"} issued behind ${name} — ${money(amt)} in ${mLbl}`}
|
||||
onClick={() => setDrill({ cc: name, dept, keys })}
|
||||
style={{ background: "none", border: 0, padding: 0, font: "inherit", fontWeight: 700, color: "inherit", textDecoration: "underline", textUnderlineOffset: 3, cursor: "pointer" }}>{cc}</button>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<section>
|
||||
<PageHead eyebrow="Finance" title="Reports">
|
||||
<select className="input" aria-label="Reporting month" value={month} onChange={(e) => setMonth(e.target.value)}>{R.repMonths.map((m) => <option key={m} value={m}>{monthLabel(m)}</option>)}</select>
|
||||
<button className="btn btn-secondary" onClick={printEomPack}>Month-end pack</button>
|
||||
<button className="btn btn-ghost" onClick={tabCsv[tab]}>Export CSV</button>
|
||||
<button className="btn btn-ghost" onClick={tabPrint[tab]}>Print</button>
|
||||
</PageHead>
|
||||
<div className="seg" style={{ display: "inline-flex", flexWrap: "wrap", marginTop: "var(--space-4)" }}>
|
||||
{TABS.map((t) => <button key={t} className={"seg-opt" + (tab === t ? " btn-primary" : "")} onClick={() => setTab(t)}>{t}</button>)}
|
||||
</div>
|
||||
|
||||
{tab === "Overview" && (
|
||||
<>
|
||||
{/* Five figures rather than the four that were here: the pre-loved pool saves the ward
|
||||
real money every month and it was a sentence under the strip, which is not where
|
||||
anybody looks for a number. */}
|
||||
<KpiStrip items={[
|
||||
{ val: money(R.totAmt), label: "Issued value (period)", note: "Each garment at what it cost the day it was issued" },
|
||||
{ val: R.totItems, label: "Items issued", note: `Across ${R.ccRows.length} cost centre${R.ccRows.length === 1 ? "" : "s"}` },
|
||||
{ val: money(R.ordSpend), label: "Supplier orders placed", note: "Drafts are not spend until they are sent" },
|
||||
{ val: money(R.totPrev), label: "vs previous month", note: R.totAmt === R.totPrev ? "Level with last month" : `${R.totAmt > R.totPrev ? "Up" : "Down"} ${money(Math.abs(R.totAmt - R.totPrev))} on last month` },
|
||||
{ val: R.plQty, label: "Pre-loved issued (free)", note: `Saved ${money(R.plSaved)} at catalogue cost` },
|
||||
]} />
|
||||
<div className="tc-grid" style={{ display: "grid", gridTemplateColumns: "3fr 2fr", gap: "var(--space-8)" }}>
|
||||
<div>
|
||||
<Panel title="Issued value by cost centre" aside={`${mLbl} against the month before`}>
|
||||
<div className="tc-panel-body">
|
||||
<div className="table-wrap"><table className="table">
|
||||
<thead><tr>{th("Cost centre")}{th("Department")}{th("Items", true)}{th("This period", true)}{th("Prev", true)}{th("Δ", true)}</tr></thead>
|
||||
<tbody>
|
||||
{R.ccRows.map((r) => <tr key={r.cc + r.dept}><td style={{ fontWeight: 700 }}>{drillBtn(r.cc, r.dept, [r.key], r.items, r.amt)}</td><td>{r.dept}</td><td style={R2(400)}>{r.items}</td><td style={R2(700)}>{money(r.amt)}</td><td style={{ textAlign: "right", color: "var(--color-neutral-700)" }}>{money(r.prev)}</td><td style={{ textAlign: "right" }}>{delta(r.delta)}</td></tr>)}
|
||||
<tr><td style={{ fontWeight: 800 }}>TOTAL</td><td></td><td style={R2(800)}>{R.totItems}</td><td style={R2(800)}>{money(R.totAmt)}</td><td style={{ textAlign: "right", color: "var(--color-neutral-700)" }}>{money(R.totPrev)}</td><td></td></tr>
|
||||
</tbody>
|
||||
</table></div>
|
||||
{R.ccRows.length === 0 && <Empty pad={4}>No issues recorded in this period yet.</Empty>}
|
||||
</div>
|
||||
</Panel>
|
||||
<Panel title="Financial year summary" aside={`To the end of ${mLbl}`}>
|
||||
<div className="tc-panel-body">
|
||||
<div className="table-wrap"><table className="table">
|
||||
<thead><tr>{th("Month")}{th("Items issued", true)}{th("Issued value", true)}{th("Orders placed", true)}</tr></thead>
|
||||
<tbody>
|
||||
{R.fyRows.map((m) => <tr key={m.m}><td style={{ fontWeight: 600 }}>{m.label}</td><td style={R2(400)}>{m.items}</td><td style={R2(700)}>{money(m.issued)}</td><td style={{ textAlign: "right", color: "var(--color-neutral-700)" }}>{money(m.orders)}</td></tr>)}
|
||||
<tr><td style={{ fontWeight: 800 }}>FY TOTAL</td><td style={R2(800)}>{R.fyTot.items}</td><td style={R2(800)}>{money(R.fyTot.issued)}</td><td style={R2(800)}>{money(R.fyTot.orders)}</td></tr>
|
||||
</tbody>
|
||||
</table></div>
|
||||
</div>
|
||||
</Panel>
|
||||
</div>
|
||||
<div>
|
||||
<Panel title="By staff group">
|
||||
{R.groupRows.length === 0 ? <div className="tc-panel-body"><Empty pad={3}>Nothing issued in this period.</Empty></div> : (
|
||||
<div className="tc-panel-list">
|
||||
{R.groupRows.map((g) => (
|
||||
<div key={g.g} className="tc-row">
|
||||
<div className="tc-row-main"><div className="tc-row-name">{g.g}</div><div className="tc-row-meta">{g.items} item{g.items === 1 ? "" : "s"}</div></div>
|
||||
<div className="tc-row-fig">{money(g.amt)}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</Panel>
|
||||
<Panel title="By staff member">
|
||||
{R.staffRows.length === 0 ? <div className="tc-panel-body"><Empty pad={3}>Nothing issued in this period.</Empty></div> : (
|
||||
<div className="tc-panel-list">
|
||||
{R.staffRows.map((r, i) => (
|
||||
<div key={i} className="tc-row">
|
||||
<div className="tc-row-main"><div className="tc-row-name">{r.who}</div><div className="tc-row-meta">{r.cc || "no cost centre"} · {r.items} item{r.items === 1 ? "" : "s"}</div></div>
|
||||
<div className="tc-row-fig">{money(r.amt)}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</Panel>
|
||||
<Panel title="Supplier orders this period">
|
||||
{R.supRows.length === 0 ? <div className="tc-panel-body"><Empty pad={3}>No supplier orders placed this period.</Empty></div> : (
|
||||
<div className="tc-panel-list">
|
||||
{R.supRows.map((r) => (
|
||||
<div key={r.name} className="tc-row">
|
||||
<div className="tc-row-main"><div className="tc-row-name">{r.name}</div><div className="tc-row-meta">{r.n} order{r.n === 1 ? "" : "s"}</div></div>
|
||||
<div className="tc-row-fig">{money(r.amt)}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</Panel>
|
||||
<Panel title="Issued value" aside="Last 6 months">
|
||||
<div className="tc-panel-body">
|
||||
<div style={{ display: "flex", alignItems: "flex-end", gap: "var(--space-2)", height: 120 }}>
|
||||
{/* Each bar changes the month the whole page is reporting on, so it is a button —
|
||||
a clickable <div> put the only way of moving between months out of reach of the
|
||||
keyboard. The bar itself is decoration; the name says the month and the figure. */}
|
||||
{R.trend.map((b) => (
|
||||
<button type="button" key={b.m} aria-label={`Show ${monthLabel(b.m)} — ${money(b.amt)} issued`} aria-current={b.sel ? "true" : undefined}
|
||||
style={{ flex: 1, display: "flex", flexDirection: "column", justifyContent: "flex-end", height: "100%", gap: 4, cursor: "pointer", background: "none", border: 0, padding: 0, font: "inherit", color: "inherit" }} onClick={() => setMonth(b.m)}>
|
||||
<span style={{ display: "block", width: "100%", fontSize: 10, textAlign: "center", color: "var(--color-neutral-700)", whiteSpace: "nowrap", overflow: "hidden" }}>{b.amt ? money(b.amt) : ""}</span>
|
||||
<span aria-hidden="true" style={{ display: "block", width: "100%", height: b.h, background: b.sel ? "var(--color-accent)" : "var(--color-neutral-300)" }} />
|
||||
<span style={{ display: "block", width: "100%", fontSize: 10, textAlign: "center", letterSpacing: "0.06em", textTransform: "uppercase", color: "var(--color-neutral-700)" }}>{b.label}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</Panel>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{tab === "Journal" && (
|
||||
/* A staff member with no cost centre lands in UNALLOCATED, and finance cannot post that
|
||||
line — so the panel carries the rule and the mark rather than leaving the warning to a
|
||||
red sentence under a table nobody scrolls to. */
|
||||
<Panel title={`End-of-month journal — ${mLbl}`} aside={`GL ${R.glAcct}`} flag={R.jnUnallocated}
|
||||
right={<button className="btn btn-secondary" onClick={csvJournal}>Export journal CSV</button>}>
|
||||
<div className="tc-panel-body">
|
||||
<div className="table-wrap"><table className="table">
|
||||
<thead><tr>{th("Cost centre")}{th("Department")}{th("GL account")}{th("Description")}{th("Items", true)}{th("Debit", true)}</tr></thead>
|
||||
<tbody>
|
||||
{R.jnRows.map((r) => <tr key={r.cc + r.dept}><td style={{ fontWeight: 700 }}>{drillBtn(r.cc, r.dept, r.keys, r.items, r.debit)}</td><td>{r.dept}</td><td>{r.gl}</td><td>{r.desc}</td><td style={R2(400)}>{r.items}</td><td style={R2(700)}>{money(r.debit)}</td></tr>)}
|
||||
<tr><td style={{ fontWeight: 800 }}>TOTAL</td><td></td><td></td><td></td><td style={R2(800)}>{jnTotItems}</td><td style={R2(800)}>{money(jnTot)}</td></tr>
|
||||
</tbody>
|
||||
</table></div>
|
||||
</div>
|
||||
<div className="tc-panel-foot" style={{ fontSize: 12, color: "var(--color-neutral-700)" }}>Set the GL account and description under Settings → General.{R.jnUnallocated && <b style={{ color: "var(--color-accent-700)" }}> UNALLOCATED = staff with no cost centre — set their department or override on the Staff Register before posting.</b>}</div>
|
||||
</Panel>
|
||||
)}
|
||||
|
||||
{tab === "Top stock" && (
|
||||
<Panel title={`Top stock — ${mLbl}`} aside="Most issued items">
|
||||
<div className="tc-panel-body">
|
||||
<div className="table-wrap"><table className="table">
|
||||
<thead><tr>{th("#")}{th("Item")}{th("Supplier")}{th("Qty (month)", true)}{th("Value (month)", true)}{th("Share", true)}{th("Qty (FY)", true)}</tr></thead>
|
||||
<tbody>{R.topRows.map((r) => <tr key={r.n}><td style={{ color: "var(--color-neutral-600)" }}>{r.n}</td><td style={{ fontWeight: 600 }}>{r.item}</td><td>{r.supplier}</td><td style={R2(700)}>{r.qty}</td><td style={R2(400)}>{money(r.val)}</td><td style={{ textAlign: "right", color: "var(--color-neutral-700)" }}>{r.share}</td><td style={{ textAlign: "right", color: "var(--color-neutral-700)" }}>{r.fyQty}</td></tr>)}</tbody>
|
||||
</table></div>
|
||||
{R.topRows.length === 0 && <Empty pad={4}>Nothing issued this period.</Empty>}
|
||||
</div>
|
||||
</Panel>
|
||||
)}
|
||||
|
||||
{tab === "Valuation" && (
|
||||
<Panel title="Stock valuation — as at today" flag={R.negSizes > 0}
|
||||
aside={R.negSizes > 0 ? `${R.negSizes} size${R.negSizes === 1 ? "" : "s"} negative on hand` : "Priced at catalogue cost"}
|
||||
right={<button className="btn btn-secondary" onClick={csvValuation}>Export CSV</button>}>
|
||||
<div className="tc-panel-body">
|
||||
<div className="table-wrap"><table className="table">
|
||||
<thead><tr>{th("Item")}{th("SKU")}{th("Supplier")}{th("Units on hand", true)}{th("Unit cost", true)}{th("Value", true)}</tr></thead>
|
||||
<tbody>
|
||||
{R.valRows.map((r, i) => <tr key={i}><td style={{ fontWeight: 600 }}>{r.item}</td><td style={{ fontSize: 12 }}>{r.sku}</td><td>{r.supplier}</td><td style={R2(400)}>{r.units}</td><td style={R2(400)}>{money(r.cost)}</td><td style={R2(700)}>{money(r.val)}</td></tr>)}
|
||||
<tr><td style={{ fontWeight: 800 }}>TOTAL</td><td></td><td></td><td style={R2(800)}>{R.valTotUnits}</td><td></td><td style={R2(800)}>{money(R.valTot)}</td></tr>
|
||||
</tbody>
|
||||
</table></div>
|
||||
</div>
|
||||
{R.negSizes > 0 && <div className="tc-panel-foot" style={{ fontSize: 12, color: "var(--color-accent-700)", fontWeight: 600 }}>{R.negSizes} size{R.negSizes === 1 ? "" : "s"} are negative on hand and are counted as 0 in this valuation — run a stocktake or record the missing receipt.</div>}
|
||||
</Panel>
|
||||
)}
|
||||
|
||||
{tab === "Shrinkage" && (
|
||||
<>
|
||||
{/* Stock that has gone missing is money finance has to be told about, so the two figures
|
||||
that carry it take the rule and the mark when the net is down, not just a red number. */}
|
||||
<KpiStrip items={[
|
||||
{ val: R.shRows.length, label: "Stocktakes this FY", note: `To the end of ${mLbl}` },
|
||||
{ val: signedInt(R.shU), label: "Net variance (FY)", flag: R.shV < 0, note: "Units counted against units the system expected" },
|
||||
{ val: signedMoney(R.shV), label: "Net value (FY)", flag: R.shV < 0, note: R.shV < 0 ? "Stock short at catalogue cost" : "At catalogue cost" },
|
||||
]} />
|
||||
<Panel title={`Stocktake variance — FY to end of ${mLbl}`} aside={`${R.shRows.length} count${R.shRows.length === 1 ? "" : "s"} filed`}>
|
||||
<div className="tc-panel-body">
|
||||
<div className="table-wrap"><table className="table">
|
||||
<thead><tr>{th("Date")}{th("Counted by")}{th("Lines counted", true)}{th("Variances", true)}{th("Net units", true)}{th("Net value", true)}</tr></thead>
|
||||
<tbody>{R.shRows.map((r, i) => <tr key={i}><td style={{ fontWeight: 600 }}>{fmtDate(r.date)}</td><td>{r.by}</td><td style={R2(400)}>{r.counted}</td><td style={R2(400)}>{r.variances}</td><td style={R2(400)}>{signedInt(r.net)}</td><td style={R2(700)}>{signedMoney(r.netVal)}</td></tr>)}</tbody>
|
||||
</table></div>
|
||||
{R.shRows.length === 0 && <Empty pad={4}>No stocktakes filed in this financial year up to the end of this month.</Empty>}
|
||||
</div>
|
||||
</Panel>
|
||||
</>
|
||||
)}
|
||||
|
||||
{tab === "Exceptions" && (
|
||||
<Panel title={`Staff exceptions — ${mLbl}`} flag={R.excRows.length > 0}
|
||||
aside={R.excRows.length > 0 ? `${R.excRows.length} to look at` : "No overrides, nobody at the volume threshold"}>
|
||||
<div className="tc-panel-body">
|
||||
<div className="table-wrap"><table className="table">
|
||||
<thead><tr>{th("Staff")}{th("Group")}{th("Cost centre")}{th("Items (month)", true)}{th("Items (FY)", true)}{th("Flag")}</tr></thead>
|
||||
<tbody>{R.excRows.map((r, i) => <tr key={i}><td style={{ fontWeight: 600 }}>{r.who}</td><td>{r.group}</td><td>{r.cc}</td><td style={R2(400)}>{r.mQty}</td><td style={R2(400)}>{r.fyQty}</td><td><span style={{ display: "flex", flexWrap: "wrap", gap: 4 }}>{r.flags.map((f, j) => <span key={j} className="tag tag-flag">{f}</span>)}</span></td></tr>)}</tbody>
|
||||
</table></div>
|
||||
{R.excRows.length === 0 && <Empty pad={4}>No exceptions this period.</Empty>}
|
||||
</div>
|
||||
<div className="tc-panel-foot" style={{ fontSize: 12, color: "var(--color-neutral-700)" }}>Items (FY) is a running tally, not an allowance.</div>
|
||||
</Panel>
|
||||
)}
|
||||
|
||||
{tab === "Suppliers" && (
|
||||
<Panel title={`Supplier spend — ${mLbl}`} aside="Orders placed this period">
|
||||
<div className="tc-panel-body">
|
||||
<div className="table-wrap"><table className="table">
|
||||
<thead><tr>{th("Supplier")}{th("Orders", true)}{th("Value", true)}{th("Invoices")}</tr></thead>
|
||||
<tbody>{R.supRows.map((r) => <tr key={r.name}><td style={{ fontWeight: 600 }}>{r.name}</td><td style={R2(400)}>{r.n}</td><td style={R2(700)}>{money(r.amt)}</td><td style={{ fontSize: 12 }}>{r.invoices}</td></tr>)}</tbody>
|
||||
</table></div>
|
||||
{R.supRows.length === 0 && <Empty pad={4}>No supplier orders placed this period.</Empty>}
|
||||
</div>
|
||||
</Panel>
|
||||
)}
|
||||
|
||||
{tab === "Pre-loved" && (
|
||||
<>
|
||||
<Panel title={`Pre-loved issues — ${mLbl}`} aside={`Saved ${money(R.plSaved)}`}>
|
||||
<div className="tc-panel-body">
|
||||
{R.plIssueRows.length === 0 ? <Empty pad={3}>Nothing issued from the pool this period.</Empty> : (
|
||||
<div className="table-wrap"><table className="table">
|
||||
<thead><tr>{th("Date")}{th("Staff")}{th("Item")}{th("Size")}{th("Qty", true)}{th("Value saved", true)}</tr></thead>
|
||||
<tbody>{R.plIssueRows.map((r, i) => <tr key={i}><td style={{ fontSize: 12 }}>{fmtDate(r.date)}</td><td style={{ fontWeight: 600 }}>{r.who}</td><td>{r.item}</td><td>{r.size}</td><td style={R2(400)}>{r.qty}</td><td style={{ ...R2(400), color: "var(--color-neutral-700)" }}>{money(r.saved)}</td></tr>)}</tbody>
|
||||
</table></div>
|
||||
)}
|
||||
</div>
|
||||
</Panel>
|
||||
<Panel title={`Hand-ins — ${mLbl}`} aside={`${R.ragMonth} to rag disposal`}>
|
||||
<div className="tc-panel-body">
|
||||
{R.hiRows.length === 0 ? <Empty pad={3}>No hand-ins recorded this period.</Empty> : (
|
||||
<div className="table-wrap"><table className="table">
|
||||
<thead><tr>{th("Date")}{th("Staff")}{th("Received by")}{th("Good", true)}{th("Rag", true)}{th("Allowance")}</tr></thead>
|
||||
<tbody>{R.hiRows.map((r, i) => <tr key={i}><td style={{ fontSize: 12 }}>{fmtDate(r.date)}</td><td style={{ fontWeight: 600 }}>{r.who}</td><td>{r.by}</td><td style={R2(400)}>{r.good}</td><td style={R2(400)}>{r.rag}</td><td>{r.credit}</td></tr>)}</tbody>
|
||||
</table></div>
|
||||
)}
|
||||
</div>
|
||||
</Panel>
|
||||
<Panel title="Pool snapshot" aside={`${R.plPoolTotal} items at $0 book value`}>
|
||||
<div className="tc-panel-body">
|
||||
{R.plPoolRows.length === 0 ? <Empty pad={3}>The pool is empty — record a hand-in from Issue Stock or a staff profile.</Empty> : (
|
||||
<div className="table-wrap"><table className="table">
|
||||
<thead><tr>{th("Item")}{th("Sizes on hand")}{th("Total", true)}</tr></thead>
|
||||
<tbody>{R.plPoolRows.map((r, i) => <tr key={i}><td style={{ fontWeight: 600 }}>{r.item}</td><td>{r.sizes}</td><td style={R2(700)}>{r.total}</td></tr>)}</tbody>
|
||||
</table></div>
|
||||
)}
|
||||
</div>
|
||||
</Panel>
|
||||
</>
|
||||
)}
|
||||
{tab === "Approvals" && (
|
||||
<Panel title="Manager’s approvals — uncollected credit" flag={R.apprTot > 0}
|
||||
aside={R.apprTot > 0 ? `${R.apprTot} set${R.apprTot === 1 ? "" : "s"} outstanding` : "Everything approved has been collected"}>
|
||||
<div className="tc-panel-body">
|
||||
<div className="table-wrap"><table className="table">
|
||||
<thead><tr>{th("Staff")}{th("Ward")}{th("Approved by")}{th("Date")}{th("Sets approved", true)}{th("Collected", true)}{th("Remaining", true)}</tr></thead>
|
||||
<tbody>
|
||||
{R.apprRows.map((r, i) => <tr key={i}><td style={{ fontWeight: 600 }}>{r.who}</td><td>{r.dept}</td><td>{r.by}</td><td style={{ fontSize: 12 }}>{fmtDate(r.date)}</td><td style={R2(400)}>{r.sets}</td><td style={R2(400)}>{r.used}</td><td style={{ textAlign: "right", fontWeight: 700, color: "var(--color-accent-700)" }}>{r.rem}</td></tr>)}
|
||||
<tr><td style={{ fontWeight: 800 }}>TOTAL OUTSTANDING</td><td></td><td></td><td></td><td></td><td></td><td style={R2(800)}>{R.apprTot} sets</td></tr>
|
||||
</tbody>
|
||||
</table></div>
|
||||
{R.apprRows.length === 0 && <Empty pad={4}>No uncollected approvals.</Empty>}
|
||||
</div>
|
||||
</Panel>
|
||||
)}
|
||||
{drill && (
|
||||
<Dialog title={`Issues behind ${drill.cc} — ${mLbl}`} width={820} onClose={() => setDrill(null)}
|
||||
sub={`${drill.dept} · ${drillQty} item${drillQty === 1 ? "" : "s"} · ${money(drillAmt)}`}>
|
||||
{drillRows.length === 0 ? <Empty pad={3}>Nothing was issued against this cost centre in {mLbl}.</Empty> : (
|
||||
<div className="table-wrap"><table className="table" style={{ marginTop: "var(--space-3)" }}>
|
||||
<thead><tr>{th("Date")}{th("Staff")}{th("Item")}{th("Size")}{th("Qty", true)}{th("Unit cost", true)}{th("Value", true)}</tr></thead>
|
||||
<tbody>
|
||||
{drillRows.map((r, i) => <tr key={i}><td style={{ fontSize: 12 }}>{fmtDate(r.date)}</td><td style={{ fontWeight: 600 }}>{r.who}</td><td>{r.item}</td><td>{r.size}</td><td style={R2(400)}>{r.qty}</td><td style={{ ...R2(400), color: "var(--color-neutral-700)" }}>{money(r.unit)}</td><td style={R2(700)}>{money(r.amt)}</td></tr>)}
|
||||
<tr><td style={{ fontWeight: 800 }}>TOTAL</td><td></td><td></td><td></td><td style={R2(800)}>{drillQty}</td><td></td><td style={R2(800)}>{money(drillAmt)}</td></tr>
|
||||
</tbody>
|
||||
</table></div>
|
||||
)}
|
||||
<div style={{ display: "flex", gap: "var(--space-2)", justifyContent: "flex-end", marginTop: "var(--space-4)" }}>
|
||||
{drillRows.length > 0 && <button className="btn btn-secondary" style={{ marginRight: "auto" }} onClick={csvDrill}>Export CSV</button>}
|
||||
<button className="btn btn-ghost" onClick={() => setDrill(null)}>Close</button>
|
||||
</div>
|
||||
</Dialog>
|
||||
)}
|
||||
<div style={{ marginTop: "var(--space-3)", fontSize: 12, color: "var(--color-neutral-700)" }}>Print and Export CSV follow the selected tab — click a cost centre for the issues behind it.</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,862 @@
|
||||
"use client";
|
||||
/* Staff requests, from the linen room's side.
|
||||
*
|
||||
* The counter's queue. A request only appears here as something to act on once a ward manager has
|
||||
* approved it — anything still `awaiting` is shown, greyed, so the linen room can see what is
|
||||
* coming without being able to do anything about it. That asymmetry is the point of the whole
|
||||
* flow: approval is the ward's, fulfilment is the linen room's, and neither can do the other's job.
|
||||
*
|
||||
* A request covers as many garments as the person asked for, one line each, and the manager can
|
||||
* knock back individual lines — the tunic and the trousers yes, the fleece no. So every screen
|
||||
* here has to keep two ideas apart: `lines` is the record of what was asked, `bag` is what is
|
||||
* actually picked. Picking off `lines` would put a garment the ward refused into somebody's hands,
|
||||
* so the pick, the count, the slip and the collection code are all built from `bag`.
|
||||
*/
|
||||
import { useCallback, useEffect, useMemo, useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { useSnap } from "@/lib/client";
|
||||
import { openSlip } from "@/components/dialogs";
|
||||
import { PageHead, Empty, ErrorLine, Field } from "@/components/ui";
|
||||
import { csvEsc, csvOf, facilityDate, fmtDate, formatInZone, genderLabel, slipLive, type Snapshot } from "@/lib/compute";
|
||||
import { downloadCsv } from "@/lib/print";
|
||||
import type { ReqLine } from "@/lib/staffdata";
|
||||
import { NEEDS_STAFF, OPEN_REQUEST, WAITLIST_HOLD_HOURS, holdEndsAt, holdExpired, statusText } from "@/lib/staffreq";
|
||||
|
||||
type Msg = { id: string; fromStaff: boolean; authorName: string; body: string; at: string };
|
||||
type Ev = { id: string; label: string; meta: string; actorName: string; at: string };
|
||||
type Req = {
|
||||
id: string; code: string; status: string; staffId: string; staffName: string; staffNum: string; ward: string;
|
||||
/** Everything asked for, declines included — and separately the ones that are actually a pick. */
|
||||
lines: ReqLine[]; bag: ReqLine[];
|
||||
summary: string; garments: number; lineCount: number; decision: string | null;
|
||||
reason: string; note: string;
|
||||
managerName: string;
|
||||
/** Which person on the register the approver is — not just how their name is spelled. A manager
|
||||
* may approve a request raised for herself, and the only thing that can show that happened is
|
||||
* this id beside the wearer's: two spellings of one name tell nobody anything. Null while
|
||||
* nobody has been asked. */
|
||||
managerId: string | null;
|
||||
declineReason: string | null; route: string | null;
|
||||
collectCode: string | null; holdUntil: string; signerName: string | null; signerRole: string | null;
|
||||
signedAt: string | null; claimedAt: string | null;
|
||||
/** Who raised it, and which person on the register that is. The id is what the approver list is
|
||||
* built on: a ward register carries people who share a name, and telling them apart by spelling
|
||||
* is how the wrong one gets dropped out of a dropdown. Null when the wearer raised it herself,
|
||||
* and null when the linen room raised it at the counter — that one is stamped with the
|
||||
* coordinator's own account, which is not on the ward register at all. Neither is a name this
|
||||
* screen could have offered anyway. */
|
||||
raisedById: string | null; raisedByName: string;
|
||||
createdAt: string; decidedAt: string | null; messages: Msg[]; events: Ev[];
|
||||
};
|
||||
/** One name in the re-address dropdown: who they are, whether anything can actually reach them,
|
||||
* and the words the coordinator reads before picking them. */
|
||||
type ApproverChoice = { id: string; reachable: boolean; label: string };
|
||||
type Dispute = { id: string; body: string; staffName: string; staffNum: string; ward: string; at: string };
|
||||
type Cycle = { id: string; dueBy: string; openedBy: string; openedAt: string; answers: number };
|
||||
type Waiting = { id: string; staffName: string; staffNum: string; ward: string; item: string; size: string; since: string; offeredAt: string | null };
|
||||
type Damage = { id: string; kind: string; note: string; photoId: string | null; staffId: string; staffName: string; staffNum: string; ward: string; item: string; size: string; requestCode: string; at: string };
|
||||
type Shortfall = {
|
||||
id: string; staffId: string; staffName: string; staffNum: string; ward: string;
|
||||
item: string; size: string; onRecord: number; confirmed: number; short: number; at: string;
|
||||
};
|
||||
/* `requestLimit` and `moreRequests` are the endpoint saying how much of the queue this is. It reads
|
||||
one row past its own ceiling so that "there are older ones than these" is a fact rather than a
|
||||
guess off a full page — and nothing here read it, so the list just stopped at the newest 400 with
|
||||
no word to anybody. Every tab on this screen is a view of that same set, so a request from before
|
||||
the cut-off is on none of them and in nothing exported from them. */
|
||||
type Payload = { requests: Req[]; disputes: Dispute[]; cycle: Cycle | null; shortfalls: Shortfall[]; waiting: Waiting[]; damage: Damage[]; requestLimit: number; moreRequests: boolean };
|
||||
|
||||
const plural = (n: number, one: string, many: string) => `${n} ${n === 1 ? one : many}`;
|
||||
|
||||
/* What a tab is called once it has to be named away from its own button — over the queue it heads,
|
||||
and at the top of a file exported off it. One spelling in one place, so a spreadsheet that has
|
||||
left the building can never disagree with the screen about which view it came from. */
|
||||
const TAB_TITLE = {
|
||||
todo: "To do", noapprover: "Needs an approver", open: "Open", all: "All",
|
||||
queries: "Record queries", damage: "Damage", cycles: "Kit check & waitlist",
|
||||
} as const;
|
||||
|
||||
/** A request with nothing in its `managerName` never got an approver at all.
|
||||
*
|
||||
* That happens the moment a manager raises for one of their own reports: they would otherwise be
|
||||
* approving their own raise, so the staff app sends it up a level — and when there is nobody above
|
||||
* them, or the one above is themselves, it is created with no approver and waits here. Nobody on the ward can move it, so if this
|
||||
* screen did not say so out loud it would simply sit in the queue for ever. */
|
||||
const stranded = (r: Req) => r.status === "awaiting" && !r.managerName;
|
||||
|
||||
/** Is this bag going out on the ward round rather than waiting at the counter? Decides which of
|
||||
* the two slips is the one worth printing. */
|
||||
const onRound = (r: Req) => r.status === "round" || r.status === "delivered";
|
||||
|
||||
/* Who a waiting request can be handed to, and what has to be said about each name before it is
|
||||
* picked.
|
||||
*
|
||||
* The wearer is on the list like anybody else: anyone may approve for themselves (the owner's
|
||||
* decision), and it is marked Self-approved wherever it shows. The option says out loud that this
|
||||
* is a self-approval, because otherwise the coordinator is choosing between two spellings of the
|
||||
* same person and finds out what they did from the timeline months later.
|
||||
*
|
||||
* The person who raised it is off the list altogether, and that one has no way back in. A
|
||||
* manager asking for one of her own reports' garments is the whole reason the request escalated
|
||||
* and landed on this tab with nobody to approve it — and she is the obvious pick, because she IS
|
||||
* the wearer's manager on the register, with nothing on the row to say the ask came from her.
|
||||
* Handing it back to her would have one person do both halves of a decision the ward is told two
|
||||
* people made, so it is turned down the moment the button is pressed. Leaving her in the list
|
||||
* made the Needs an approver tab offer the one name on it certain to fail, on the tab that
|
||||
* exists to fix exactly that. It is her id that keeps her off the list and nothing else, which is
|
||||
* why the queue carries it: a ward can hold two people spelled the same way, only one of them
|
||||
* raised this, and the counter refuses on the id too.
|
||||
*
|
||||
* Reachability is the other half, and nothing refuses it: a manager with no staff-app account
|
||||
* cannot be asked at all. The approval e-mail has nowhere to go and they cannot sign in to
|
||||
* decide it, so re-addressing to one of them puts the request straight back in the dead end it
|
||||
* was being rescued from — except that it does not come back to this tab, because it now has a
|
||||
* name against it. Said on the option, before it is chosen. A printed code only counts as a way in
|
||||
* while the activation would still take it, which is slipLive's call and nobody else's: "a code is
|
||||
* outstanding" is all the register holds, and reading that as live had the dropdown calling a slip
|
||||
* worth chasing that the person would be turned away with, while the staff register, looking at
|
||||
* the same person, said they had no staff app at all.
|
||||
*
|
||||
* The raiser rule is the counter's rule said a second time, in a screen, and two copies of a rule
|
||||
* agree only until one of them is edited. The queue could settle it by arriving with the answer
|
||||
* already worked out — the ids this particular request can be sent to, decided where the refusal
|
||||
* itself lives — and then a name is on this list exactly when it would be accepted, and this
|
||||
* function is left with nothing to do but the words. */
|
||||
function approverChoices(s: Snapshot, r: Req): ApproverChoice[] {
|
||||
return s.staff
|
||||
.filter((x) => !x.inactive && x.first && x.id !== r.raisedById && (x.id !== r.staffId || x.managerId === x.id))
|
||||
.map((x) => ({
|
||||
id: x.id,
|
||||
reachable: !!x.selfEmail,
|
||||
label: `${`${x.first} ${x.last}`.trim()}${x.dept ? ` · ${x.dept}` : ""}`
|
||||
+ (x.id === r.staffId ? " · this request is theirs — self-approval" : "")
|
||||
+ (x.selfEmail ? "" : x.selfCode && slipLive(x.selfCodeAt, s.today, s.tz) ? " · code printed, not used yet" : " · no staff-app account"),
|
||||
}));
|
||||
}
|
||||
|
||||
/** The whole ask, line by line, with the manager's answer against each garment.
|
||||
*
|
||||
* The declines stay on the list rather than being dropped: the wearer will ask why they got two
|
||||
* things and not three, and the person at the counter needs the answer in front of them. They are
|
||||
* struck through so nobody picks one by mistake. */
|
||||
function LineList({ r }: { r: Req }) {
|
||||
const refused = r.lines.filter((l) => l.status === "declined").length;
|
||||
const note =
|
||||
r.status === "declined" ? "Nothing to pick — every line was declined."
|
||||
: r.status === "awaiting" ? `${plural(r.garments, "garment", "garments")} asked for. Nothing is picked until the ward has decided.`
|
||||
: refused > 0 ? `In the bag: ${plural(r.garments, "garment", "garments")} across ${plural(r.bag.length, "line", "lines")}. The ${refused === 1 ? "declined line is" : `${refused} declined lines are`} not picked.`
|
||||
: `In the bag: ${plural(r.garments, "garment", "garments")}.`;
|
||||
return (
|
||||
<div style={{ marginBottom: "var(--space-3)" }}>
|
||||
{r.lines.map((l) => {
|
||||
const off = l.status === "declined";
|
||||
return (
|
||||
<div key={l.id} style={{ display: "flex", gap: "var(--space-3)", alignItems: "baseline", padding: "var(--space-2) 0", borderBottom: "1px solid var(--color-divider)", fontSize: 13.5, flexWrap: "wrap" }}>
|
||||
<span style={{ flex: 1, minWidth: 180, fontWeight: off ? 400 : 600, textDecoration: off ? "line-through" : "none", color: off ? "var(--color-neutral-700)" : undefined }}>
|
||||
{l.qty} × {l.item}{l.gender && l.gender !== "Unisex" ? ` (${genderLabel(l.gender)})` : ""} — {l.size}
|
||||
</span>
|
||||
<span className={l.status === "approved" ? "tag tag-neutral" : off ? "tag tag-outline" : "tag tag-accent"}>{l.statusLabel}</span>
|
||||
{off && l.declineReason && <span style={{ fontSize: 12, color: "var(--color-neutral-700)" }}>{l.declineReason}</span>}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
<div style={{ fontSize: 12.5, color: "var(--color-neutral-700)", marginTop: "var(--space-2)" }}>{note}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function RequestsPage() {
|
||||
const { s, mutate } = useSnap();
|
||||
const [data, setData] = useState<Payload | null>(null);
|
||||
const [tab, setTab] = useState<"todo" | "noapprover" | "open" | "all" | "queries" | "damage" | "cycles">("todo");
|
||||
const [dueBy, setDueBy] = useState("");
|
||||
const [openId, setOpenId] = useState<string | null>(null);
|
||||
const [reply, setReply] = useState("");
|
||||
const [hold, setHold] = useState("");
|
||||
/** The replacement approver picked for a stranded `awaiting` request. */
|
||||
const [reassign, setReassign] = useState("");
|
||||
const [err, setErr] = useState("");
|
||||
|
||||
/* "Still loading" and "the queue never arrived" look identical from the outside, and this screen
|
||||
is the linen room's work list — reading it as empty when the fetch failed means a ward waits on
|
||||
a request nobody knows about. So the failure is said out loud and can be retried. */
|
||||
const [loadErr, setLoadErr] = useState("");
|
||||
const load = useCallback(async () => {
|
||||
setLoadErr("");
|
||||
try {
|
||||
const r = await fetch("/api/requests");
|
||||
if (!r.ok) { const j = await r.json().catch(() => ({})); setLoadErr(j.error || "Couldn’t load the request queue."); return; }
|
||||
setData(await r.json());
|
||||
} catch {
|
||||
setLoadErr("Couldn’t reach the server — the request queue isn’t loaded.");
|
||||
}
|
||||
}, []);
|
||||
useEffect(() => { void load(); }, [load]);
|
||||
|
||||
async function act(op: string, payload: unknown) {
|
||||
setErr("");
|
||||
const r = await mutate(op, payload);
|
||||
if (!r.ok) { setErr(r.error); return false; }
|
||||
await load();
|
||||
return true;
|
||||
}
|
||||
|
||||
/* What goes on the printed slip.
|
||||
*
|
||||
* The bag, never the whole ask: a slip that listed a garment the ward declined would have
|
||||
* somebody hunting the shelf for it, and the person signing would sign for three things and get
|
||||
* two. The request's own code goes in the order-number field and the collection code is printed
|
||||
* beside the name, because one code now covers several garments and it is the only thing that
|
||||
* ties this piece of paper to that bag. */
|
||||
const slipFor = (r: Req) => ({
|
||||
staffName: r.staffName, dept: r.ward, deliverTo: r.ward,
|
||||
sets: r.garments, po: r.code, code: r.collectCode || "",
|
||||
// The cut goes on the slip. Two garments can share a name and differ only by it — an
|
||||
// Ambassador Shirt comes men's and ladies, on different style codes and different shelves —
|
||||
// and a line reading "1 × Ambassador Shirt — M" gives whoever is picking no way to tell which,
|
||||
// which is a wrong garment in the bag and a return later. Omitted for unisex, where it is noise.
|
||||
lines: r.bag.map((l) => `${l.qty} × ${l.item}${l.gender && l.gender !== "Unisex" ? ` (${genderLabel(l.gender)})` : ""} — ${l.size}`).join("\n"),
|
||||
dateReceived: s.today, requestedBy: r.staffNum,
|
||||
deliveredBy: s.settings.coordinator, dateTime: s.today,
|
||||
});
|
||||
|
||||
/* The dropdown's list, worked out once and only for the row that is actually open.
|
||||
*
|
||||
* Every name on it is a walk of the whole register, and it used to be built for every waiting
|
||||
* request on screen although only the open one can show a dropdown — on a busy register, forty
|
||||
* walks to draw one list. The reply box further down shares this component's state, so that
|
||||
* whole pass ran again on every letter typed into a message to a ward. */
|
||||
const openReq = data?.requests.find((r) => r.id === openId) ?? null;
|
||||
const choices = useMemo<ApproverChoice[]>(
|
||||
() => (openReq && openReq.status === "awaiting" ? approverChoices(s, openReq) : []),
|
||||
[s, openReq],
|
||||
);
|
||||
|
||||
if (!data) return (
|
||||
<section>
|
||||
<PageHead eyebrow="Ward requests" title="Staff requests" />
|
||||
{loadErr ? (
|
||||
<>
|
||||
<ErrorLine msg={loadErr} />
|
||||
<div style={{ marginTop: "var(--space-3)" }}><button className="btn btn-secondary" onClick={() => void load()}>Try again</button></div>
|
||||
</>
|
||||
) : <Empty>Loading…</Empty>}
|
||||
</section>
|
||||
);
|
||||
|
||||
// "To do" is the linen room's actual work queue: approved and not yet handed over.
|
||||
const todo = data.requests.filter((r) => ["accepted", "picking", "ready", "round"].includes(r.status));
|
||||
const open = data.requests.filter((r) => OPEN_REQUEST.has(r.status as never));
|
||||
// Requests nobody was ever asked to approve. Their own tab because they are the only thing on
|
||||
// this screen that is stuck rather than merely waiting, and the fix — give it an approver — is
|
||||
// the linen room's to make and nobody else's.
|
||||
const noApprover = data.requests.filter(stranded);
|
||||
const rows = tab === "todo" ? todo : tab === "noapprover" ? noApprover : tab === "open" ? open : tab === "all" ? data.requests : [];
|
||||
/* The queue arrives newest first and stops at its ceiling, so what is missing is always the
|
||||
oldest — and old is exactly what a stranded request or a bag nobody collected becomes. Every
|
||||
request tab is a narrowing of that one set, so every one of them carries the mark, not just
|
||||
All: a coordinator who cleared Needs an approver to a bare 0 would take the ward's stuck
|
||||
requests to be dealt with while the longest-stuck of them sat past the cut-off, unseen. */
|
||||
const more = data.moreRequests ? "+" : "";
|
||||
const inLoaded = data.moreRequests ? ` among the most recent ${data.requestLimit} requests` : "";
|
||||
|
||||
/* Export — the tab on screen, and nothing else.
|
||||
|
||||
Every tab here is a view of the same queue narrowed a different way, so a coordinator who has
|
||||
narrowed to To do and hits Export means that work queue, not eighteen months of requests. There
|
||||
is no search box on this screen, so the tab is the only filter in force and honouring it is the
|
||||
whole job. The file is named after the tab as well: four exports all called
|
||||
threadcount-requests-2026-09-11.csv land in one Downloads folder as "(1)" and "(2)", and by
|
||||
Monday nobody can say which one the ward was sent.
|
||||
|
||||
The last three tabs are not narrowings of the request queue at all — a record query, a damage
|
||||
report and a kit-check answer share no columns with a request and no columns with each other —
|
||||
so each writes its own table rather than being forced into one shape with most cells empty.
|
||||
Kit check & waitlist is two registers on one screen, so it writes two tables into the one file,
|
||||
the way the pre-loved report does; folding them together would put a garment somebody is
|
||||
queueing for in the same column as a garment somebody has lost. */
|
||||
const shown = tab === "queries" ? data.disputes.length
|
||||
: tab === "damage" ? data.damage.length
|
||||
: tab === "cycles" ? data.shortfalls.length + data.waiting.length
|
||||
: rows.length;
|
||||
|
||||
function exportCsv() {
|
||||
// Hoisted, so the checker cannot see the early return above that already proved this is here —
|
||||
// and it is right not to: a function declaration can be called from anywhere in the body. The
|
||||
// button is only rendered once the data has loaded, so this never fires; it is here to make the
|
||||
// guarantee local to the function that relies on it.
|
||||
if (!data) return;
|
||||
/* Full date and 24-hour time, in the facility's zone, with the zone named at the top of the
|
||||
file. The screen prints "9 Sep" because you read it in order; a spreadsheet gets re-sorted the
|
||||
moment it lands, and "9 Sep, 14:32" sorts as text into nonsense and carries no year at all.
|
||||
Empty rather than an em dash where there is no instant — a dash in a spreadsheet cell is only
|
||||
noise to filter around. */
|
||||
const when = (iso: string | null) =>
|
||||
iso ? `${facilityDate(iso, s.tz)} ${formatInZone(iso, s.tz, { hour: "2-digit", minute: "2-digit", hour12: false, hourCycle: "h23" })}` : "";
|
||||
/* The header block above the column headings, so a file that has left the building still says
|
||||
which view it is, when it was taken and what zone its times are in. */
|
||||
const preamble = (facts: [string, string | number][]) =>
|
||||
facts.map(([k, v]) => `${csvEsc(k)},${typeof v === "number" ? v : csvEsc(v)}`).join("\n") + "\n\n";
|
||||
|
||||
if (tab === "queries") {
|
||||
downloadCsv(`threadcount-record-queries-${s.today}.csv`,
|
||||
preamble([["Record queries", "Raised against a staff record, not yet sorted"], ["Exported", s.today], ["Times shown in", s.tz], ["Queries in this file", data.disputes.length]])
|
||||
+ csvOf(["Raised", "Staff no.", "Staff member", "Ward", "What they say is wrong"],
|
||||
data.disputes.map((d) => [when(d.at), d.staffNum, d.staffName, d.ward, d.body])));
|
||||
return;
|
||||
}
|
||||
|
||||
if (tab === "damage") {
|
||||
downloadCsv(`threadcount-damage-${s.today}.csv`,
|
||||
preamble([["Damage reported", "Not yet handed in at the counter"], ["Exported", s.today], ["Times shown in", s.tz], ["Reports in this file", data.damage.length]])
|
||||
+ csvOf(["Reported", "Staff no.", "Staff member", "Ward", "Garment", "Size", "Damage", "What they said", "Replacement requested", "Photo"],
|
||||
// The issue a report was raised against can be deleted, and the screen says so in words
|
||||
// rather than showing a blank. A blank cell here would read as a gap in the export.
|
||||
data.damage.map((d) => [when(d.at), d.staffNum, d.staffName, d.ward, d.item || "Garment no longer on file", d.size, d.kind, d.note, d.requestCode, d.photoId ? "Yes" : "No"])));
|
||||
return;
|
||||
}
|
||||
|
||||
if (tab === "cycles") {
|
||||
const c = data.cycle;
|
||||
downloadCsv(`threadcount-kit-check-${s.today}.csv`,
|
||||
preamble([
|
||||
["Kit check and waitlist", c ? `Running — due by ${c.dueBy}` : "No kit check running"],
|
||||
["Opened by", c ? c.openedBy || "—" : ""],
|
||||
["Answers in", c ? c.answers : 0],
|
||||
["Exported", s.today],
|
||||
["Times shown in", s.tz],
|
||||
])
|
||||
// Nothing in this table has changed anybody's record, exactly as the screen says. It is the
|
||||
// working list for squaring the register one garment at a time, so it goes out with the
|
||||
// person and the size on every row rather than as a count of answers.
|
||||
+ "What people couldn't account for\n"
|
||||
+ csvOf(["Staff no.", "Staff member", "Ward", "Garment", "Size", "On record", "Confirmed", "Short", "Answered"],
|
||||
data.shortfalls.map((f) => [f.staffNum, f.staffName, f.ward, f.item, f.size, f.onRecord, f.confirmed, f.short, when(f.at)]))
|
||||
+ "\nWaiting for a size\n"
|
||||
+ csvOf(["Staff no.", "Staff member", "Ward", "Garment", "Size", "Waiting since", "Offered", "Held until", "Hold"],
|
||||
data.waiting.map((w) => {
|
||||
// The deadline is computed the one way the product computes it, so a file taken off
|
||||
// this screen can never disagree with the screen about whose garment it still is.
|
||||
const ends = holdEndsAt(w.offeredAt);
|
||||
return [w.staffNum, w.staffName, w.ward, w.item, w.size, when(w.since), when(w.offeredAt),
|
||||
ends ? when(ends.toISOString()) : "",
|
||||
!w.offeredAt ? "Not offered yet" : holdExpired(w.offeredAt) ? "Lapsed — offer to the next person" : "Held"];
|
||||
})));
|
||||
return;
|
||||
}
|
||||
|
||||
/* A row is a garment, not a request.
|
||||
|
||||
A request covers as many garments as the person asked for and the manager decides each one
|
||||
separately — the tunic and the trousers yes, the fleece no. One row per request could only
|
||||
carry the rollup, "2 of 3 approved", and the question this file is opened to answer is
|
||||
precisely the one that would then be missing: which garment was refused, and why. So the
|
||||
request's own facts repeat down its lines. That repetition is what makes the file worth
|
||||
having in a spreadsheet — every declined fleece in the hospital is one filter on Line
|
||||
decision — and the count in the preamble says how many requests those rows came from, so
|
||||
nobody reads nineteen rows as nineteen requests.
|
||||
|
||||
The two decisions keep their own words, because they are not the same decision and this file
|
||||
goes to a ward manager. A LINE is approved or declined, and Line decision is the word the
|
||||
line already carries from lineStatusLabel(). A REQUEST is accepted or declined, and Request
|
||||
status is statusText()'s label — the same words as the tag on the row. Decision summary is
|
||||
decisionSummary()'s rollup and nothing recomputed here. Request decline reason is the
|
||||
request-level one, which is as often the linen room withdrawing an unapprovable request as
|
||||
it is the ward refusing the whole ask.
|
||||
|
||||
A blank Approver is the Needs an approver tab's own definition — nobody was ever asked — so
|
||||
those requests stay identifiable after they have been filed away with the rest. Approver is
|
||||
the wearer says a manager was asked to sign for her own kit, which the product allows and
|
||||
the ward may reasonably want to see; two matching names in adjacent columns is not something
|
||||
anybody spots reading down a file, and on a ward where two people share a name it is not
|
||||
even true. It is a fact about who was asked, so it is filled in on a request still waiting
|
||||
as much as on one already decided.
|
||||
|
||||
Held until is left out: it is free text somebody typed at the counter ("Fri 6pm"), and a
|
||||
column of that sorts into nonsense beside four real dates. Ward is the wearer's ward, as the
|
||||
row on screen states it; a bag already out on a round was routed to the ward she was on when
|
||||
the trolley loaded, which after a transfer is a different one. */
|
||||
const title = TAB_TITLE[tab];
|
||||
downloadCsv(`threadcount-requests-${tab === "noapprover" ? "needs-an-approver" : tab}-${s.today}.csv`,
|
||||
preamble([
|
||||
["Ward requests", title],
|
||||
["Exported", s.today],
|
||||
["Times shown in", s.tz],
|
||||
["Requests in this file", rows.length],
|
||||
// A file that is short of the register says so in its own header, because the person who
|
||||
// opens it in three months has no screen beside it to work that out from.
|
||||
...(data.moreRequests
|
||||
? ([["Older requests not in this file", `The screen holds the most recent ${data.requestLimit} requests and there are older ones than those`]] as [string, string][])
|
||||
: []),
|
||||
["Rows", "One per line on the request — a request for a tunic and two pairs of trousers is two rows, and the pairs are a Qty of 2 on the second"],
|
||||
])
|
||||
+ csvOf(["Request", "Raised", "Staff no.", "Staff member", "Ward", "Raised by", "Reason", "Note", "Request status", "Approver", "Approver is the wearer", "Decision summary", "Decided", "Request decline reason", "Collection code", "Garment", "Cut", "Size", "Qty", "Line decision", "Line decline reason"],
|
||||
rows.flatMap((r) => {
|
||||
const req: (string | number)[] = [
|
||||
r.code, when(r.createdAt), r.staffNum, r.staffName, r.ward, r.raisedByName, r.reason, r.note,
|
||||
statusText(r).label, r.managerName, r.managerId && r.managerId === r.staffId ? "Yes" : "",
|
||||
r.decision ?? "", when(r.decidedAt), r.declineReason ?? "", r.collectCode ?? "",
|
||||
];
|
||||
/* A request with no lines on it still has to appear. It is only ever a half-written raise
|
||||
or one whose garment was deleted from the catalogue, but it is sitting in somebody's
|
||||
queue, and a file built by walking lines would drop it silently — which on the Needs an
|
||||
approver tab would hide the one kind of request nobody else can rescue. */
|
||||
const lines: (ReqLine | null)[] = r.lines.length ? r.lines : [null];
|
||||
return lines.map((l) => [...req,
|
||||
l ? l.item : "", l ? genderLabel(l.gender) : "", l ? l.size : "", l ? l.qty : "",
|
||||
l ? l.statusLabel : "", l ? l.declineReason ?? "" : ""]);
|
||||
})));
|
||||
}
|
||||
|
||||
/* The two optional names are for the actions that repeat down the queue. A button reading "Print
|
||||
order form" says nothing about which request it belongs to once you are hearing it rather than
|
||||
looking at it, and the counter shares a printer — so what a button is about to put on paper is
|
||||
worth knowing before it is pressed. */
|
||||
const Btn = ({ label, onClick, primary, ariaLabel, title }: { label: string; onClick: () => void; primary?: boolean; ariaLabel?: string; title?: string }) => (
|
||||
<button className={primary ? "btn btn-primary" : "btn btn-secondary"} style={{ minHeight: 34 }} onClick={onClick} aria-label={ariaLabel} title={title}>{label}</button>
|
||||
);
|
||||
|
||||
return (
|
||||
<section>
|
||||
<PageHead
|
||||
eyebrow="Ward requests"
|
||||
title="Staff requests"
|
||||
sub="Raised in the staff app, approved by the ward manager, fulfilled here."
|
||||
>
|
||||
{/* One button, and it writes the tab you are looking at. The count is said out loud wherever
|
||||
the tab is a narrowing, because that is the difference between a file of this morning's
|
||||
work and a file of the whole register, and the two are indistinguishable once they are
|
||||
attachments on an email. Not on Kit check & waitlist: that tab counts one of its two
|
||||
lists, and a number here that disagreed with the number on the tab would be read as a
|
||||
bug in the file rather than as two different things being counted. */}
|
||||
<button className="btn btn-ghost" onClick={exportCsv} disabled={shown === 0}
|
||||
title={tab === "cycles" ? "Downloads the kit check and the waitlist."
|
||||
: tab === "queries" ? "Downloads the record queries on screen."
|
||||
: tab === "damage" ? "Downloads the damage reports on screen."
|
||||
: "Downloads the tab on screen, one row per garment."}>
|
||||
{tab === "all" || tab === "cycles" ? "Export CSV" : `Export CSV (${shown} shown)`}
|
||||
</button>
|
||||
</PageHead>
|
||||
<ErrorLine msg={err} />
|
||||
<ErrorLine msg={loadErr} />
|
||||
|
||||
{/* A stranded request is the one thing here that nobody else can rescue. It never reaches the
|
||||
To do queue, it looks like any other greyed `awaiting` row in Open, and the ward is sitting
|
||||
waiting on an approval that was never asked for — so it is said before the tabs rather
|
||||
than found by opening one. */}
|
||||
{noApprover.length > 0 && tab !== "noapprover" && (
|
||||
/* A rule down the edge, a mark and a heavier figure rather than a red box. The primary
|
||||
button an inch away is the same red, so a red outline on its own is not a signal — and
|
||||
this is the one thing on the screen nobody but the linen room can rescue. */
|
||||
<div className="tc-flag" style={{ borderTop: "2px solid var(--color-text)", borderRight: "2px solid var(--color-text)", borderBottom: "2px solid var(--color-text)", padding: "var(--space-3)", marginTop: "var(--space-4)", display: "flex", gap: "var(--space-3)", alignItems: "baseline", flexWrap: "wrap" }}>
|
||||
<b style={{ flex: 1, minWidth: 260, fontSize: 13.5, lineHeight: 1.6 }}>
|
||||
<span className="tc-mark" aria-hidden="true" />
|
||||
<span className="tc-row-fig" style={{ color: "var(--color-accent-700)", marginRight: 6 }}>{noApprover.length}</span>
|
||||
{noApprover.length === 1 ? "request has" : "requests have"} nobody to approve {noApprover.length === 1 ? "it" : "them"} —
|
||||
the ward is waiting on a decision that was never asked for.
|
||||
</b>
|
||||
<button className="btn btn-primary" style={{ minHeight: 34 }} onClick={() => setTab("noapprover")}>Address {noApprover.length === 1 ? "it" : "them"}</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div style={{ display: "flex", gap: "var(--space-2)", marginTop: "var(--space-4)", flexWrap: "wrap" }}>
|
||||
{([["todo", `To do ${todo.length}${more}`], ["noapprover", `Needs an approver ${noApprover.length}${more}`], ["open", `Open ${open.length}${more}`], ["all", `All ${data.requests.length}${more}`], ["queries", `Record queries ${data.disputes.length}`], ["damage", `Damage ${data.damage.length}`], ["cycles", `Kit check & waitlist ${data.waiting.length}`]] as const).map(([k, lbl]) => (
|
||||
<button key={k} className={tab === k ? "btn btn-primary" : "btn btn-secondary"} style={{ minHeight: 34 }} onClick={() => setTab(k)}>{lbl}</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{tab === "cycles" ? (
|
||||
<>
|
||||
<div className="sec" style={{ marginTop: "var(--space-5)" }}>Kit check</div>
|
||||
{data.cycle ? (
|
||||
<div style={{ padding: "var(--space-3) 0", borderBottom: "1px solid var(--color-divider)" }}>
|
||||
<div style={{ display: "flex", gap: "var(--space-3)", alignItems: "baseline", flexWrap: "wrap" }}>
|
||||
<b style={{ flex: 1 }}>Running — due by {fmtDate(data.cycle.dueBy)}</b>
|
||||
<span style={{ fontSize: 12, color: "var(--color-neutral-700)" }}>
|
||||
{data.cycle.answers} answer{data.cycle.answers === 1 ? "" : "s"} in · opened by {data.cycle.openedBy || "—"}
|
||||
</span>
|
||||
<Btn label="Close the round" onClick={() => act("kitcheck.close", { id: data.cycle!.id })} />
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div style={{ padding: "var(--space-3) 0", borderBottom: "1px solid var(--color-divider)", display: "flex", gap: "var(--space-2)", alignItems: "flex-end", flexWrap: "wrap" }}>
|
||||
<Field label="Due by" style={{ width: 200 }}>{(c) => <input {...c} className="input" type="date" value={dueBy} onChange={(e) => setDueBy(e.target.value)} />}</Field>
|
||||
<Btn primary label="Start a kit check" onClick={async () => { if (await act("kitcheck.open", { dueBy })) setDueBy(""); }} />
|
||||
<span style={{ fontSize: 13, color: "var(--color-neutral-700)", flex: 1, minWidth: 240 }}>
|
||||
Asks everyone holding uniform to confirm what they have.
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* The answers themselves, which nothing in the product used to show.
|
||||
People answer a kit check garment by garment, and the shortfalls are the only reason
|
||||
to run one — a count of replies tells the linen room nothing it can act on. Written
|
||||
down here, per person and per size, they are the working list for correcting the
|
||||
register: open the record, hand in or write off the line, and the next cycle starts
|
||||
from a register that is true. */}
|
||||
<div className="sec" style={{ marginTop: "var(--space-6)" }}>What people couldn't account for</div>
|
||||
{!data.cycle ? (
|
||||
<Empty pad={3}>No kit check is running.</Empty>
|
||||
) : data.shortfalls.length === 0 ? (
|
||||
<Empty pad={3}>
|
||||
{data.cycle.answers === 0
|
||||
? "Nobody has answered yet."
|
||||
: `Every one of the ${data.cycle.answers} answer${data.cycle.answers === 1 ? "" : "s"} so far matched the record.`}
|
||||
</Empty>
|
||||
) : (
|
||||
<>
|
||||
<div className="table-wrap"><table className="table" style={{ marginTop: "var(--space-2)" }}>
|
||||
<thead><tr>
|
||||
<th style={{ textAlign: "left" }}>Who</th>
|
||||
<th style={{ textAlign: "left" }}>Garment</th>
|
||||
<th style={{ textAlign: "left" }}>Size</th>
|
||||
<th style={{ textAlign: "right" }}>On record</th>
|
||||
<th style={{ textAlign: "right" }}>Confirmed</th>
|
||||
<th style={{ textAlign: "right" }}>Short</th>
|
||||
<th style={{ textAlign: "left" }}>Answered</th>
|
||||
<th />
|
||||
</tr></thead>
|
||||
<tbody>
|
||||
{data.shortfalls.map((f) => (
|
||||
<tr key={f.id}>
|
||||
<td>{f.staffName}<span style={{ color: "var(--color-neutral-700)" }}> · {f.staffNum}{f.ward ? ` · ${f.ward}` : ""}</span></td>
|
||||
<td>{f.item}</td>
|
||||
<td>{f.size}</td>
|
||||
<td style={{ textAlign: "right", fontVariantNumeric: "tabular-nums" }}>{f.onRecord}</td>
|
||||
<td style={{ textAlign: "right", fontVariantNumeric: "tabular-nums" }}>{f.confirmed}</td>
|
||||
{/* The number this table exists for. Marked as well as coloured: every other
|
||||
figure in the row is a plain count, and what tells them apart across the
|
||||
counter is the mark, not another shade of the brand red. */}
|
||||
<td style={{ textAlign: "right", fontVariantNumeric: "tabular-nums", fontWeight: 800, color: "var(--color-accent-700)", whiteSpace: "nowrap" }}><span className="tc-mark" aria-hidden="true" />{f.short}</td>
|
||||
<td style={{ whiteSpace: "nowrap", color: "var(--color-neutral-700)" }}>{formatInZone(f.at, s.tz)}</td>
|
||||
<td style={{ textAlign: "right", whiteSpace: "nowrap" }}><Link href={`/app/staff/${f.staffId}`}>Open their record</Link></td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table></div>
|
||||
<p style={{ fontSize: 13, lineHeight: 1.6, color: "var(--color-neutral-700)", marginTop: "var(--space-3)", maxWidth: "70ch" }}>
|
||||
Nothing here changes a record — open it and return the missing garments as “Written off”.
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
|
||||
<div className="sec" style={{ marginTop: "var(--space-6)" }}>Waiting for a size</div>
|
||||
{data.waiting.length === 0 && <Empty pad={3}>Nobody is waiting on a size.</Empty>}
|
||||
{data.waiting.map((w) => {
|
||||
// The hold is a real deadline, not wording: lib/staffops refuses an accept once it has
|
||||
// run out, so the counter has to be able to see that the garment is theirs to give to
|
||||
// the next person rather than still being held for somebody who never came back.
|
||||
const ends = holdEndsAt(w.offeredAt);
|
||||
return (
|
||||
<div key={w.id} style={{ display: "flex", gap: "var(--space-3)", alignItems: "baseline", padding: "var(--space-2) 0", borderBottom: "1px solid var(--color-divider)", fontSize: 13.5, flexWrap: "wrap" }}>
|
||||
<b style={{ flex: 1, minWidth: 200 }}>{w.item} — {w.size}<span style={{ fontWeight: 400, color: "var(--color-neutral-700)" }}> · {w.staffName}{w.ward ? ` (${w.ward})` : ""}</span></b>
|
||||
<span style={{ fontSize: 12, color: "var(--color-neutral-700)" }}>since {formatInZone(w.since, s.tz)}</span>
|
||||
{!w.offeredAt
|
||||
? <Btn label="It’s in — offer it" onClick={() => act("waitlist.offer", { id: w.id })} />
|
||||
: holdExpired(w.offeredAt)
|
||||
? <span className="tag tag-neutral">Hold lapsed — offer to the next person</span>
|
||||
: <span className="tag tag-accent">Held until {ends ? formatInZone(ends, s.tz, { day: "numeric", month: "short", hour: "numeric", minute: "2-digit" }) : "—"}</span>}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
<p style={{ fontSize: 13, lineHeight: 1.6, color: "var(--color-neutral-700)", marginTop: "var(--space-4)", maxWidth: "70ch" }}>
|
||||
Offering tells them and holds the garment for {WAITLIST_HOLD_HOURS} hours.
|
||||
</p>
|
||||
</>
|
||||
) : tab === "damage" ? (
|
||||
data.damage.length === 0 ? (
|
||||
<Empty pad={4}>Nothing reported damaged that hasn't come back yet.</Empty>
|
||||
) : (
|
||||
<>
|
||||
<div className="tc-panel tc-panel-list" style={{ marginTop: "var(--space-4)" }}>
|
||||
<div className="tc-panel-head"><span>{TAB_TITLE.damage}</span><span className="tc-panel-aside">{plural(data.damage.length, "report", "reports")} still to come back</span></div>
|
||||
{data.damage.map((d, i) => (
|
||||
<div key={d.id} style={{ borderBottom: i === data.damage.length - 1 ? "none" : "1px solid var(--color-divider)", padding: "var(--space-3) var(--space-4)" }}>
|
||||
<div style={{ display: "flex", gap: "var(--space-3)", alignItems: "baseline", flexWrap: "wrap" }}>
|
||||
<b style={{ flex: 1, minWidth: 200 }}>
|
||||
{d.item ? `${d.item}${d.size ? ` — ${d.size}` : ""}` : "Garment no longer on file"}
|
||||
<span style={{ fontWeight: 400, color: "var(--color-neutral-700)" }}> · {d.staffName} ({d.staffNum}{d.ward ? ` · ${d.ward}` : ""})</span>
|
||||
</b>
|
||||
<span className="tag tag-accent">{d.kind}</span>
|
||||
<span style={{ fontSize: 12, color: "var(--color-neutral-700)" }}>{formatInZone(d.at, s.tz)}</span>
|
||||
<Btn label="Handed in at the counter" onClick={() => act("damage.handedIn", { id: d.id })} />
|
||||
</div>
|
||||
<div style={{ fontSize: 12.5, color: "var(--color-neutral-700)", marginTop: 4 }}>
|
||||
{d.requestCode ? `Replacement requested — ${d.requestCode}` : "No replacement asked for"}
|
||||
{d.photoId ? " · photo attached" : ""}
|
||||
{" · "}<Link href={`/app/staff/${d.staffId}`}>Open their record</Link>
|
||||
</div>
|
||||
{d.note && <p style={{ fontSize: 14, lineHeight: 1.6, margin: "var(--space-2) 0 0", maxWidth: "70ch" }}>“{d.note}”</p>}
|
||||
{d.photoId && (
|
||||
// eslint-disable-next-line @next/next/no-img-element
|
||||
<img src={`/api/photo/${d.photoId}`} alt="The damage as reported" style={{ maxWidth: 220, marginTop: "var(--space-2)", border: "2px solid var(--color-divider)" }} />
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<p style={{ fontSize: 13, lineHeight: 1.6, color: "var(--color-neutral-700)", marginTop: "var(--space-4)", maxWidth: "70ch" }}>
|
||||
Handed in only clears the report — return the garment on their staff record.
|
||||
</p>
|
||||
</>
|
||||
)
|
||||
) : tab === "queries" ? (
|
||||
data.disputes.length === 0 ? (
|
||||
<Empty pad={4}>Nobody has queried their record.</Empty>
|
||||
) : (
|
||||
<div className="tc-panel tc-panel-list" style={{ marginTop: "var(--space-4)" }}>
|
||||
<div className="tc-panel-head"><span>{TAB_TITLE.queries}</span><span className="tc-panel-aside">{plural(data.disputes.length, "record", "records")} somebody says is wrong</span></div>
|
||||
{data.disputes.map((d, i) => (
|
||||
<div key={d.id} style={{ borderBottom: i === data.disputes.length - 1 ? "none" : "1px solid var(--color-divider)", padding: "var(--space-3) var(--space-4)" }}>
|
||||
<div style={{ display: "flex", gap: "var(--space-3)", alignItems: "baseline", flexWrap: "wrap" }}>
|
||||
<b style={{ flex: 1 }}>{d.staffName} <span style={{ fontWeight: 400, color: "var(--color-neutral-700)" }}>({d.staffNum}{d.ward ? ` · ${d.ward}` : ""})</span></b>
|
||||
<span style={{ fontSize: 12, color: "var(--color-neutral-700)" }}>{formatInZone(d.at, s.tz)}</span>
|
||||
<Btn label="Mark sorted" onClick={() => act("dispute.resolve", { id: d.id })} />
|
||||
</div>
|
||||
<p style={{ fontSize: 14, lineHeight: 1.6, margin: "var(--space-2) 0 0", maxWidth: "70ch" }}>{d.body}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
) : (
|
||||
<>
|
||||
{rows.length === 0 ? (
|
||||
<Empty pad={4}>
|
||||
{tab === "todo" ? `Nothing approved and waiting${inLoaded}.`
|
||||
: tab === "noapprover" ? `Every request waiting${inLoaded} has somebody to approve it.`
|
||||
: data.moreRequests ? `Nothing here${inLoaded}.` : "Nothing here yet."}
|
||||
</Empty>
|
||||
) : (
|
||||
<div className="tc-panel tc-panel-list" style={{ marginTop: "var(--space-4)" }}>
|
||||
<div className="tc-panel-head">
|
||||
<span>{TAB_TITLE[tab]}</span>
|
||||
<span className="tc-panel-aside">{plural(rows.length, "request", "requests")}</span>
|
||||
</div>
|
||||
{rows.map((r, i) => {
|
||||
const st = statusText(r);
|
||||
const isOpen = openId === r.id;
|
||||
const awaiting = r.status === "awaiting";
|
||||
const orphan = stranded(r);
|
||||
/* The dropdown belongs to the open row alone, and so does `choices`, which is drawn up
|
||||
above for that row. Two requests waiting at the same moment can have different answers
|
||||
— each leaves out whoever raised it — so it is the open row's question that gets asked.
|
||||
`picked` is whoever is chosen in that dropdown; opening any row clears the choice. */
|
||||
const reachable = isOpen ? choices.filter((c) => c.reachable) : [];
|
||||
const unreachable = isOpen ? choices.filter((c) => !c.reachable) : [];
|
||||
const picked = isOpen && reassign ? s.staff.find((x) => x.id === reassign) ?? null : null;
|
||||
/* Who answered, and what they answered. A request that got as far as the linen room was
|
||||
approved, so the decision line carries the manager's name; a decline is left standing
|
||||
on its own, because a withdrawal at the counter also lands here and attributing that
|
||||
to the manager who was asked would be a lie on the face of the queue.
|
||||
The approver being the person the request is for is allowed — a manager signs for her
|
||||
own uniform the same as anybody's — and her record says so wherever it shows. This
|
||||
queue said only a name, and a name that happens to match the one three words to its
|
||||
left is not something anybody notices reading down a queue. Matched on the id, because
|
||||
a ward can carry two people spelled the same way. */
|
||||
const wearerApproves = !!r.managerId && r.managerId === r.staffId;
|
||||
const approval = awaiting
|
||||
? (r.managerName ? `with ${r.managerName}${wearerApproves ? " — their own request, theirs to approve" : ""}` : "nobody has been asked yet")
|
||||
: r.status === "declined"
|
||||
? (r.decision || "declined")
|
||||
: `${r.decision || "Approved"} by ${r.managerName}${wearerApproves ? " — their own request, self-approved" : ""}`;
|
||||
/* The ward's order form, with this request's garments already on it.
|
||||
*
|
||||
* Not the same piece of paper as the collection slip. The slip travels with the bag and is
|
||||
* what somebody signs at the handover; the order form is the record of the ask — the sheet
|
||||
* the ward used to fill in by hand and send down, and the one a signature goes on. Printing
|
||||
* it from the request is the only way the paper and the app can agree about the sizes,
|
||||
* because the alternative is somebody copying them out again. The office-use block comes
|
||||
* out blank: it is filled in at the counter and the app does not know any of it yet.
|
||||
*
|
||||
* It prints on an undecided request on purpose, and it is safe to: the form leaves off
|
||||
* every declined line, so once the ward has answered it is the bag, and while the ward is
|
||||
* still deciding there is nothing to leave off and it is the whole ask. What keeps the two
|
||||
* apart on paper is the manager's block — it prints blank, with an unsigned rule where the
|
||||
* delegate approves the sets, so an undecided request comes off the printer plainly
|
||||
* unapproved. That is the one state the form is actually for: the sheet is what the
|
||||
* request is short of, and it can be walked up to the ward and signed there.
|
||||
*
|
||||
* The code goes on the end of the spoken name, not in place of the visible words: somebody
|
||||
* driving the counter by voice — hands full of garments, which is most of the shift — says
|
||||
* what is written on the button, and a name that did not start with those words leaves them
|
||||
* pressing nothing and wondering why. */
|
||||
const orderForm = (
|
||||
<Btn label="Print order form"
|
||||
ariaLabel={`Print order form for ${r.code}`}
|
||||
title={awaiting
|
||||
? "Everything asked for, with the manager's block blank to sign."
|
||||
: "The approved lines only."}
|
||||
onClick={() => window.open(`/print/order-form?request=${encodeURIComponent(r.id)}`, "_blank", "noopener")} />
|
||||
);
|
||||
return (
|
||||
// A stranded request is not dimmed with the rest of the `awaiting` ones: it is the one
|
||||
// kind of waiting the linen room is meant to act on, so it also takes the rule down its
|
||||
// left edge that every other flagged thing in the app wears.
|
||||
<div key={r.id} className={orphan ? "tc-flag" : undefined} style={{ borderBottom: i === rows.length - 1 ? "none" : "1px solid var(--color-divider)", padding: "var(--space-3) var(--space-4)", paddingLeft: orphan ? "calc(var(--space-4) - 4px)" : "var(--space-4)", opacity: awaiting && !orphan ? 0.6 : 1 }}>
|
||||
<div style={{ display: "flex", gap: "var(--space-3)", alignItems: "baseline", flexWrap: "wrap" }}>
|
||||
<span style={{ fontSize: 12, color: "var(--color-neutral-700)", width: 74, flex: "none" }}>{r.code}</span>
|
||||
<b style={{ flex: 1, minWidth: 180 }}>
|
||||
{r.summary}
|
||||
<span style={{ fontWeight: 400, color: "var(--color-neutral-700)" }}> · {r.staffName}{r.ward ? ` (${r.ward})` : ""}</span>
|
||||
</b>
|
||||
{orphan && <span className="tag tag-flag">No approver</span>}
|
||||
<span className={NEEDS_STAFF.has(r.status as never) ? "tag tag-accent" : "tag tag-neutral"}>{st.label}</span>
|
||||
<button className="btn btn-ghost" style={{ minHeight: 30, padding: "2px 10px" }} onClick={() => { setOpenId(isOpen ? null : r.id); setReply(""); setHold(""); setReassign(""); }}>
|
||||
{isOpen ? "Close" : `Open${r.lineCount > 1 ? ` · ${r.lineCount} lines` : ""}`}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div style={{ fontSize: 12.5, color: "var(--color-neutral-700)", marginTop: 4 }}>
|
||||
{[r.reason, approval, r.raisedByName ? `raised by ${r.raisedByName}` : "", formatInZone(r.createdAt, s.tz)].filter(Boolean).join(" · ")}
|
||||
</div>
|
||||
|
||||
{isOpen && (
|
||||
<div style={{ marginTop: "var(--space-3)", paddingLeft: "var(--space-4)", borderLeft: "2px solid var(--color-text)" }}>
|
||||
<LineList r={r} />
|
||||
{r.note && <p style={{ fontSize: 13.5, lineHeight: 1.6, margin: "0 0 var(--space-3)", maxWidth: "70ch" }}>“{r.note}”</p>}
|
||||
|
||||
{awaiting ? (
|
||||
<>
|
||||
<p style={{ fontSize: 13.5, lineHeight: 1.6, color: "var(--color-neutral-700)", margin: 0, maxWidth: "70ch" }}>
|
||||
{orphan
|
||||
? <>Nobody has been asked to approve this one — choose somebody who can.</>
|
||||
: <>Waiting on {r.managerName}. If that answer is never coming, send it to somebody else or withdraw it.</>}
|
||||
</p>
|
||||
{/* Without these two, a request addressed to a manager who never claimed an
|
||||
account waits for ever: the wearer has no op that touches it and the manager
|
||||
cannot sign in to decide it. */}
|
||||
<div style={{ display: "flex", gap: "var(--space-2)", flexWrap: "wrap", alignItems: "center", marginTop: "var(--space-3)" }}>
|
||||
<select className="input" style={{ width: 260 }} aria-label={orphan ? `Choose who approves ${r.code}` : `Send ${r.code} to a different approver`} value={reassign} onChange={(e) => setReassign(e.target.value)}>
|
||||
<option value="">{orphan ? "Choose an approver…" : "Send it to somebody else…"}</option>
|
||||
{/* Split only when there is something to split off — two headings over one
|
||||
undivided list of people who can all decide it today is furniture. */}
|
||||
{unreachable.length === 0
|
||||
? reachable.map((c) => <option key={c.id} value={c.id}>{c.label}</option>)
|
||||
: (
|
||||
<>
|
||||
{reachable.length > 0 && (
|
||||
<optgroup label="Can decide it today">
|
||||
{reachable.map((c) => <option key={c.id} value={c.id}>{c.label}</option>)}
|
||||
</optgroup>
|
||||
)}
|
||||
<optgroup label="Can’t be asked — no staff-app account">
|
||||
{unreachable.map((c) => <option key={c.id} value={c.id}>{c.label}</option>)}
|
||||
</optgroup>
|
||||
</>
|
||||
)}
|
||||
</select>
|
||||
<Btn primary label={orphan ? "Ask them" : "Re-address"} onClick={async () => { if (reassign && await act("request.reassign", { id: r.id, managerId: reassign })) setReassign(""); }} />
|
||||
<Btn label="Withdraw it" onClick={() => { if (confirm(`Withdraw ${r.code}? ${r.staffName} is told it was declined by the linen room.`)) act("request.withdraw", { id: r.id, reason: "Withdrawn — no approver available" }); }} />
|
||||
{orderForm}
|
||||
</div>
|
||||
{/* A facility that has only just loaded its register has nobody on it who can
|
||||
approve anything, and an empty dropdown beside a primary button reads as
|
||||
a screen that is broken rather than as a register that is short. */}
|
||||
{choices.length === 0 && (
|
||||
<p style={{ fontSize: 13, lineHeight: 1.6, color: "var(--color-neutral-700)", margin: "var(--space-2) 0 0", maxWidth: "70ch" }}>
|
||||
Nobody on the register can approve this one — add the ward's managers on{" "}
|
||||
<Link href="/app/staff">the register</Link>, or withdraw it.
|
||||
</p>
|
||||
)}
|
||||
{/* Between choosing a name and pressing the button, which is the only moment
|
||||
either of these can still be acted on. Afterwards the self-approval is on
|
||||
the record, and the unreachable one is a request in Open under the name of
|
||||
somebody who cannot answer it, with nothing anywhere saying so. */}
|
||||
{picked && (picked.id === r.staffId || !picked.selfEmail) && (
|
||||
<p style={{ fontSize: 13, lineHeight: 1.6, color: "var(--color-neutral-700)", margin: "var(--space-2) 0 0", maxWidth: "70ch" }}>
|
||||
{picked.id === r.staffId && (
|
||||
<>This is {picked.first}'s own request — sending it to them is a self-approval.{" "}</>
|
||||
)}
|
||||
{!picked.selfEmail && (
|
||||
<>
|
||||
{picked.first} has no staff-app account, so can't be asked.{" "}
|
||||
{picked.selfCode && slipLive(picked.selfCodeAt, s.today, s.tz)
|
||||
? <>A code on <Link href={`/app/staff/${picked.id}`}>their record</Link> hasn't been used yet.</>
|
||||
: picked.selfCode
|
||||
? <>The code on <Link href={`/app/staff/${picked.id}`}>their record</Link> has expired — make a new one first.</>
|
||||
: <>Give {picked.first} a code on <Link href={`/app/staff/${picked.id}`}>their record</Link> first.</>}
|
||||
</>
|
||||
)}
|
||||
</p>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<div style={{ display: "flex", gap: "var(--space-2)", flexWrap: "wrap", alignItems: "center" }}>
|
||||
{r.status === "accepted" && <Btn primary label="Start picking" onClick={() => act("request.pick", { id: r.id })} />}
|
||||
{r.status === "picking" && (
|
||||
<>
|
||||
<input className="input" style={{ width: 200 }} aria-label={`How long ${r.code} is held at the counter`} placeholder="Held until — e.g. Fri 6pm" value={hold} onChange={(e) => setHold(e.target.value)} />
|
||||
<Btn primary label="Hold at the counter" onClick={async () => { if (await act("request.hold", { id: r.id, holdUntil: hold })) setHold(""); }} />
|
||||
<Btn label="Send on the ward round" onClick={() => act("request.round", { id: r.id })} />
|
||||
</>
|
||||
)}
|
||||
{r.status === "ready" && (
|
||||
<>
|
||||
{/* One code for the whole bag, so the number of garments it covers is said
|
||||
beside it — otherwise the person at the counter reads out a code, hands
|
||||
over one garment and both of them think that was the lot. */}
|
||||
<span style={{ fontSize: 13 }}>Code <b style={{ fontFamily: "monospace", fontSize: 15 }}>{r.collectCode}</b> · {plural(r.garments, "garment", "garments")}{r.holdUntil ? ` · until ${r.holdUntil}` : ""}</span>
|
||||
<Btn primary label="Collected" onClick={() => act("request.collected", { id: r.id })} />
|
||||
</>
|
||||
)}
|
||||
{r.status === "round" && <span style={{ fontSize: 13, color: "var(--color-neutral-700)" }}>On the round to {r.ward || "the ward"} — {plural(r.garments, "garment", "garments")}. The ward desk signs for it.</span>}
|
||||
{r.status === "delivered" && <span style={{ fontSize: 13, color: "var(--color-neutral-700)" }}>Signed by {r.signerName}{r.signerRole ? `, ${r.signerRole}` : ""}{r.claimedAt ? " · collected by the requester" : " · not yet collected from the ward"}</span>}
|
||||
{r.status === "collected" && <span style={{ fontSize: 13, color: "var(--color-neutral-700)" }}>Handed over at the counter.</span>}
|
||||
{r.status === "declined" && <span style={{ fontSize: 13, color: "var(--color-neutral-700)" }}>Declined — {r.declineReason || "no reason recorded"}.</span>}
|
||||
{/* The paper that travels with the bag. It lists the approved lines and the
|
||||
collection code, so what is signed for is what was picked. */}
|
||||
{r.status !== "declined" && (
|
||||
<>
|
||||
<Btn label={onRound(r) ? "Delivery slip" : "Collection slip"} onClick={() => openSlip(onRound(r) ? "delivery" : "collection", slipFor(r))} />
|
||||
{/* Nothing was ordered on a request every line of which was refused, so a
|
||||
declined one gets no form — the same rule as the slip beside it. */}
|
||||
{orderForm}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="sec" style={{ marginTop: "var(--space-4)" }}>Messages</div>
|
||||
{r.messages.length === 0 && <div style={{ fontSize: 13, color: "var(--color-neutral-700)", padding: "var(--space-2) 0" }}>Nothing asked about this one.</div>}
|
||||
{r.messages.map((m) => (
|
||||
<div key={m.id} style={{ padding: "var(--space-2) 0", borderBottom: "1px solid var(--color-divider)", fontSize: 13.5 }}>
|
||||
<b>{m.fromStaff ? m.authorName : `${m.authorName} (linen room)`}</b>
|
||||
<span style={{ color: "var(--color-neutral-700)", marginLeft: 8, fontSize: 12 }}>{formatInZone(m.at, s.tz)}</span>
|
||||
<div style={{ marginTop: 3, lineHeight: 1.6 }}>{m.body}</div>
|
||||
</div>
|
||||
))}
|
||||
<div style={{ display: "flex", gap: "var(--space-2)", marginTop: "var(--space-3)", flexWrap: "wrap" }}>
|
||||
<input className="input" style={{ flex: 1, minWidth: 220 }} aria-label={`Reply about ${r.code}`} placeholder="Reply to this order" value={reply} onChange={(e) => setReply(e.target.value)} />
|
||||
<Btn label="Send" onClick={async () => { if (reply.trim() && await act("request.reply", { id: r.id, body: reply })) setReply(""); }} />
|
||||
</div>
|
||||
|
||||
<div className="sec" style={{ marginTop: "var(--space-4)" }}>History</div>
|
||||
{r.events.map((e) => (
|
||||
<div key={e.id} style={{ display: "flex", gap: "var(--space-3)", padding: "var(--space-2) 0", borderBottom: "1px solid var(--color-divider)", fontSize: 13 }}>
|
||||
<span style={{ flex: 1 }}>{e.label}{e.meta ? ` — ${e.meta}` : ""}</span>
|
||||
<span style={{ fontSize: 12, color: "var(--color-neutral-700)" }}>{e.actorName} · {formatInZone(e.at, s.tz)}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
{/* The queue is the newest few hundred requests and no more. Unsaid, a tab that has reached
|
||||
the ceiling looks exactly like a tab that holds everything — the counts on the buttons
|
||||
included — and somebody hunting a request from last winter concludes it was never
|
||||
raised. The wearer's own record keeps its history separately, which is where a request
|
||||
older than this cut-off is actually found. */}
|
||||
{data.moreRequests && (
|
||||
<p style={{ fontSize: 13, lineHeight: 1.6, color: "var(--color-neutral-700)", marginTop: "var(--space-4)", maxWidth: "70ch" }}>
|
||||
Only the most recent {data.requestLimit} requests are loaded — older ones are on{" "}
|
||||
<Link href="/app/staff">the wearer's staff record</Link>.
|
||||
</p>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,73 @@
|
||||
"use client";
|
||||
import { useState } from "react";
|
||||
import { useDerived, useSnap } from "@/lib/client";
|
||||
import { PageHead, Empty, KpiStrip, LiveRegion } from "@/components/ui";
|
||||
import { DeliverDialog } from "@/components/dialogs";
|
||||
import { ccOf, daysBetween, label, staffName, telHref, type PickupRec } from "@/lib/compute";
|
||||
|
||||
// Delivery rounds: everything awaiting pickup grouped by ward, ticked off on the floor with an on-screen signature.
|
||||
|
||||
/* The Dashboard already counts pickups that have sat for a fortnight and puts the figure on the
|
||||
front page, so the round sheet marks the same ones. Two screens disagreeing about which handover
|
||||
is late is how a coordinator stops trusting either. */
|
||||
const STALE = 14;
|
||||
|
||||
export default function RoundsPage() {
|
||||
const { s } = useSnap();
|
||||
const { byId, staffById } = useDerived();
|
||||
const [deliver, setDeliver] = useState<PickupRec | null>(null);
|
||||
const [msg, setMsg] = useState("");
|
||||
const pending = s.pickups.filter((p) => !p.pickedUp);
|
||||
const wards: Record<string, PickupRec[]> = {};
|
||||
for (const p of pending) { const st = staffById[p.staffId]; const w = st?.dept || "Unknown"; (wards[w] = wards[w] || []).push(p); }
|
||||
const wardNames = Object.keys(wards).sort();
|
||||
const garments = pending.reduce((t, p) => t + p.lines.reduce((n, l) => n + l.qty, 0), 0);
|
||||
const stale = pending.filter((p) => daysBetween(p.received, s.today) >= STALE).length;
|
||||
return (
|
||||
<section>
|
||||
<PageHead eyebrow="On the floor" title="Delivery Rounds" sub="Everything awaiting pickup, grouped by ward. Tick each order off as you hand it over — the receiver signs on screen." />
|
||||
<LiveRegion msg={msg} style={{ marginTop: "var(--space-3)", fontSize: 13, fontWeight: 600 }} />
|
||||
{pending.length === 0 && <Empty>Nothing waiting for delivery.</Empty>}
|
||||
{/* Zero old pickups is not news, so the third tile only takes the flag when there is something
|
||||
to answer for. A rule and a mark that are always on the screen stop meaning anything. */}
|
||||
{pending.length > 0 && <KpiStrip items={[
|
||||
{ val: pending.length, label: "To deliver", note: `${wardNames.length} ward${wardNames.length === 1 ? "" : "s"} on the round` },
|
||||
{ val: garments, label: "Garments on the trolley", note: "Everything these orders add up to" },
|
||||
{ val: stale, label: `Waiting ${STALE}+ days`, flag: stale > 0, note: stale > 0 ? "Ring the ward if nobody is on shift to sign" : "Nothing has been sitting a fortnight" },
|
||||
]} />}
|
||||
{wardNames.map((w) => {
|
||||
const rows = wards[w]; const st0 = staffById[rows[0].staffId];
|
||||
return (
|
||||
<div key={w} className="tc-panel" style={{ marginTop: "var(--space-4)" }}>
|
||||
<div className="tc-panel-head">
|
||||
<span>{w}</span>
|
||||
<span className="tc-panel-aside">CC {st0 ? ccOf(s, st0) || "—" : "—"} · {rows.length} to deliver</span>
|
||||
</div>
|
||||
<div className="tc-panel-list">
|
||||
{rows.map((p) => {
|
||||
const st = staffById[p.staffId]; const tel = telHref(st?.phone);
|
||||
const days = daysBetween(p.received, s.today);
|
||||
const late = days >= STALE;
|
||||
return (
|
||||
/* The days figure is the same number the line underneath says in words, so it is
|
||||
read out once and not twice: the glance number is decoration, the sentence is
|
||||
the message. */
|
||||
<div key={p.id} className={"tc-row" + (late ? " tc-flag" : "")} style={{ flexWrap: "wrap" }}>
|
||||
<div className="tc-row-main" style={{ minWidth: 170 }}>
|
||||
<div className="tc-row-name">{staffName(st, "Staff")} {tel ? <a href={tel} style={{ fontWeight: 400, color: "var(--color-neutral-700)" }}>{st?.phone}</a> : <span style={{ fontWeight: 400, color: "var(--color-neutral-700)" }}>{st?.phone}</span>}</div>
|
||||
<div className="tc-row-meta">{p.lines.map((l) => `${label(byId[l.itemId])} ${l.size}${l.qty > 1 ? ` ×${l.qty}` : ""}`).join(", ")} · {p.orderCode}</div>
|
||||
<div className="tc-row-meta">{late && <span className="tc-mark" aria-hidden="true" />}Waiting {days} day{days === 1 ? "" : "s"}</div>
|
||||
</div>
|
||||
<div className="tc-row-fig" aria-hidden="true">{days}d</div>
|
||||
<button className="btn btn-primary" aria-label={`Sign for the delivery to ${staffName(st, "this staff member")}`} onClick={() => setDeliver(p)}>Delivered — sign</button>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
{deliver && <DeliverDialog pickup={deliver} onClose={() => setDeliver(null)} onDone={(m) => setMsg(m)} />}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,997 @@
|
||||
"use client";
|
||||
import { Suspense, useEffect, useMemo, useRef, useState } from "react";
|
||||
import TwoFactor from "@/components/TwoFactor";
|
||||
import SsoSettings from "@/components/SsoSettings";
|
||||
import PlanTab from "@/components/PlanTab";
|
||||
import { useRouter, useSearchParams } from "next/navigation";
|
||||
import { useSnap } from "@/lib/client";
|
||||
import { PageHead, Dialog, ErrorLine, Field, LiveRegion, Seg } from "@/components/ui";
|
||||
import { parseCsv, CSV_TEMPLATES } from "@/lib/csv";
|
||||
import { LOCATION_KINDS, SET_GARMENTS, allowance, allowanceRoute, csvOf, daysBetween, fmtDate, groupKey, isKitGroup, isNursingGroup, kitGroupsOf, locMap, locPath, locTree, nursingGroupsOf, setsOnStart, type AllowanceRoute, type DeptRec, type SupplierRec, type UserRec } from "@/lib/compute";
|
||||
import { downloadCsv } from "@/lib/print";
|
||||
|
||||
// Plan is last and appears only once plans are live, for admins — see PlanTab.
|
||||
const TABS = ["General", "Locations", "Departments", "Suppliers", "Account", "Sign-in", "Data", "Plan"] as const;
|
||||
type Tab = (typeof TABS)[number];
|
||||
// The supplier details edited on the card below, which is also the shape of the keys their
|
||||
// half-typed edits are filed under in `draft`.
|
||||
type SupKey = "contact" | "phone" | "account" | "lead";
|
||||
|
||||
// Only used by a browser too old to have Intl.supportedValuesOf: the zones an Australian facility
|
||||
// is actually in, so the picker is never empty on the one machine in the room that still runs it.
|
||||
const FALLBACK_ZONES = ["Australia/Brisbane", "Australia/Sydney", "Australia/Melbourne", "Australia/Hobart", "Australia/Adelaide", "Australia/Darwin", "Australia/Perth", "Australia/Broken_Hill", "Australia/Lord_Howe"];
|
||||
|
||||
/* The three ways a staff group gets up to the ceiling, in the order a coordinator reads them. The
|
||||
names are the ones the rest of the product uses for the routes, so a coordinator who reads
|
||||
"Starting kit" here reads the same words on the order form and at the counter. */
|
||||
const ROUTES: { id: AllowanceRoute; label: string; now: string }[] = [
|
||||
{ id: "fte", label: "FTE table", now: "on the FTE table" },
|
||||
{ id: "kit", label: "Starting kit", now: "on the starting kit" },
|
||||
{ id: "approval", label: "Manager approval", now: "on manager approval" },
|
||||
];
|
||||
|
||||
// Module-scope so React keeps the same element type across renders (defining it inside the page remounts the input on every keystroke).
|
||||
function TextField({ label, hint, ph, value, onChange, disabled }: { label: string; hint?: string; ph?: string; value: string; onChange: (v: string) => void; disabled: boolean }) {
|
||||
return <Field label={label} hint={hint}>{(c) => <input {...c} className="input" placeholder={ph} value={value} onChange={(e) => onChange(e.target.value)} disabled={disabled} />}</Field>;
|
||||
}
|
||||
|
||||
/* Also module-scope, and for a sharper reason than tidiness: this is a live region now, and a live
|
||||
region that is torn down and rebuilt announces its contents again. Defined inside the page it
|
||||
would be a fresh component type on every keystroke, so "Saved." would be read out over and over
|
||||
while somebody typed in an unrelated box. */
|
||||
function Msg({ text }: { text?: string }) {
|
||||
return <LiveRegion msg={text} style={{ fontSize: 12, color: "var(--color-accent-700)", fontWeight: 600, marginTop: "var(--space-2)", whiteSpace: "pre-wrap" }} />;
|
||||
}
|
||||
|
||||
// useSearchParams needs a Suspense boundary for static rendering.
|
||||
export default function SettingsPage() {
|
||||
return <Suspense fallback={null}><SettingsInner /></Suspense>;
|
||||
}
|
||||
|
||||
function SettingsInner() {
|
||||
const { s, isAdmin, busy, mutate } = useSnap();
|
||||
const router = useRouter();
|
||||
const [tab, setTab] = useState<Tab>("General");
|
||||
const sp = useSearchParams();
|
||||
const planShown = isAdmin && !!s.plan?.live && !s.demo;
|
||||
const tabs = planShown ? TABS : TABS.filter((t) => t !== "Plan");
|
||||
// Deep links: ?tab=account (sidebar name), ?tab=data (dashboard setup card), ?tab=plan (the
|
||||
// plan banner); #hash forms kept for old links.
|
||||
useEffect(() => {
|
||||
const want = (sp.get("tab") || window.location.hash.replace("#", "")).toLowerCase();
|
||||
const t = TABS.find((x) => x.toLowerCase() === want);
|
||||
if (t && (t !== "Plan" || planShown)) setTab(t);
|
||||
}, [sp, planShown]);
|
||||
const [nl, setNl] = useState({ name: "", kind: "Shelf", parentId: "" });
|
||||
const [msg, setMsg] = useState<Record<string, string>>({});
|
||||
const say = (k: string, v: string) => setMsg((m) => ({ ...m, [k]: v }));
|
||||
const [draft, setDraft] = useState<Record<string, string>>({});
|
||||
const timers = useRef<Record<string, ReturnType<typeof setTimeout>>>({});
|
||||
useEffect(() => { const t = timers.current; return () => Object.values(t).forEach(clearTimeout); }, []);
|
||||
/* `draft` as it stands now, rather than as it stood in the render that set a timer. A save that
|
||||
fires after a pause carries the other boxes on the row along with it, and by the time it fires
|
||||
the coordinator may have typed in one of them: a ward renamed and a cost centre typed straight
|
||||
after used to save the new cost centre, then put the old one back a moment later when the
|
||||
rename landed — and the ward's orders went on being costed to a number nobody meant any more. */
|
||||
const draftNow = useRef(draft);
|
||||
useEffect(() => { draftNow.current = draft; });
|
||||
/* Take a half-typed edit back out of `draft`, so the box goes back to showing what the register
|
||||
holds. Used where an edit is refused: a value nobody accepted must not be left on screen, where
|
||||
it reads as saved and can be picked up by whatever else on the row saves the row.
|
||||
`only` is the text that was refused, and the box is left alone if it no longer says that. A
|
||||
refusal from the server arrives a moment after the name went to it, and by then the coordinator
|
||||
may already be typing the correction — clearing the box then takes away letters nobody has so
|
||||
much as looked at, mid-word, which reads as a field that eats what you type. What is left
|
||||
behind is on its way to be checked in its own right, so nothing unchecked is left standing. */
|
||||
const forgetDraft = (k: string, only?: string) => setDraft((d) => { if (only !== undefined && d[k] !== only) return d; const next = { ...d }; delete next[k]; return next; });
|
||||
function debounced(k: string, v: string, op: string, payload: Record<string, unknown>, msgKey = "fields") {
|
||||
setDraft((d) => ({ ...d, [k]: v }));
|
||||
clearTimeout(timers.current[k]);
|
||||
timers.current[k] = setTimeout(async () => { const r = await mutate(op, payload); say(msgKey, r.ok ? "Saved." : r.error); }, 500);
|
||||
}
|
||||
const NUMERIC = ["defaultEntitlement", "initialSets", "defaultReorder", "exceptionHigh", "capSets", "varianceReason"];
|
||||
const setField = (k: string, v: string) => { if (NUMERIC.includes(k) && v === "") { setDraft((d) => ({ ...d, [k]: v })); return; } debounced(k, v, "settings.update", { [k]: v }); };
|
||||
const val = (k: keyof typeof s.settings) => (draft[k] !== undefined ? draft[k] : String(s.settings[k] ?? ""));
|
||||
|
||||
const [newGroup, setNewGroup] = useState("");
|
||||
const [nd, setNd] = useState({ name: "", cc: "" });
|
||||
const [ns, setNs] = useState("");
|
||||
const [userDlg, setUserDlg] = useState<UserRec | null | false>(false);
|
||||
const [pw, setPw] = useState({ current: "", next: "", again: "" });
|
||||
const [del, setDel] = useState({ open: false, password: "", confirm: "", busy: false, err: "" });
|
||||
const [me, setMe] = useState({ first: s.session.first, last: s.session.last, title: s.session.title });
|
||||
const meDirty = me.first !== s.session.first || me.last !== s.session.last || me.title !== s.session.title;
|
||||
const [impKind, setImpKind] = useState("catalog");
|
||||
const [impBusy, setImpBusy] = useState(false);
|
||||
const [wipe, setWipe] = useState("");
|
||||
const [reset, setReset] = useState("");
|
||||
/* The ward notice is written from here and read nowhere on this side of the product: the snapshot
|
||||
carries no notice, so this box starts empty even while one is up on every wearer's home screen.
|
||||
Said out loud under the field rather than left to be worked out, because an empty box meaning
|
||||
"this screen can't see the board" and an empty box meaning "the board is empty" are not the
|
||||
same thing to a coordinator deciding whether to post. */
|
||||
const [notice, setNotice] = useState({ body: "", endsAt: "" });
|
||||
const [noticeBusy, setNoticeBusy] = useState(false);
|
||||
// Optimistic: the snapshot refresh lags the click, and a checkbox that snaps back reads as a failure.
|
||||
const [lookupOn, setLookupOn] = useState<boolean | null>(null);
|
||||
const [tzPick, setTzPick] = useState<string | null>(null); // same reason as lookupOn
|
||||
/* And each group's route, for the same reason again. A route saves by sending both lists whole,
|
||||
and until the refreshed snapshot lands the row still reads the old ones, so the route pressed
|
||||
would spring back to the one before — read as a save that didn't take, and pressed again. Held
|
||||
only while the snapshot still carries the lists it was worked out from: once those change,
|
||||
whether from this save landing or from somebody else's, the snapshot is the truth again. Held
|
||||
any longer, a group renamed since would still be here under its old name, and the next route
|
||||
pressed would send that name back and take the renamed group off its route. */
|
||||
const [routePick, setRoutePick] = useState<{ base: string; nursing: string[]; kit: string[] } | null>(null);
|
||||
const [renaming, setRenaming] = useState<string | null>(null);
|
||||
const [tzErr, setTzErr] = useState("");
|
||||
const [bkBusy, setBkBusy] = useState(false);
|
||||
const [resetBusy, setResetBusy] = useState(false);
|
||||
const [logoV, setLogoV] = useState(0);
|
||||
/* The zone every date-only column in the product is written against — see facilityToday. A room
|
||||
left on the Brisbane default gets its evenings filed against tomorrow: a Perth issue at 22:30 on
|
||||
30 June counts against the next financial year's entitlement and drops out of June's exceptions
|
||||
report and cost-centre journal. The names come from this browser's zone table; settings.update
|
||||
checks a submitted name against the server's, and the two are not guaranteed to be the same list
|
||||
— an older Node, or a browser new enough to offer a zone the server's ICU data predates, and the
|
||||
server refuses something this select happily offered. Rare, and not something the client can
|
||||
check for, so the refusal is put under the select instead of being left to a message further
|
||||
down the page. The current zone is prepended if this browser has never heard of it, so a
|
||||
facility can always see what it is on. */
|
||||
const zones = useMemo(() => {
|
||||
// Optional call on purpose: TypeScript's lib says this exists, the browser in the linen room
|
||||
// may disagree.
|
||||
const all = Intl.supportedValuesOf?.("timeZone") || FALLBACK_ZONES;
|
||||
return all.includes(s.settings.timezone) ? all : [s.settings.timezone, ...all];
|
||||
}, [s.settings.timezone]);
|
||||
|
||||
/* The facility's own two lists and nothing else. An empty one means no group is on that route:
|
||||
there is no list of ours standing in for it, so nothing on this screen may behave as if there
|
||||
were. */
|
||||
const storedLists = { nursing: nursingGroupsOf(s), kit: kitGroupsOf(s) };
|
||||
const listSig = JSON.stringify([storedLists.nursing, storedLists.kit]);
|
||||
const lists = routePick && routePick.base === listSig ? routePick : storedLists;
|
||||
// The same answer the counter, the order form and the wearer's own app reach, including the FTE
|
||||
// table winning for a group somehow on both lists.
|
||||
const routeOf = (g: string) => allowanceRoute({ nursing: isNursingGroup(lists.nursing, g), kit: isKitGroup(lists.kit, g) });
|
||||
const routeNow = (r: AllowanceRoute) => ROUTES.find((x) => x.id === r)?.now ?? "";
|
||||
/* Everybody still working, counted by the group they are filed under and compared the way the app
|
||||
compares group names. It is what the remove button has to warn about, and what the list of
|
||||
groups nobody has added yet is built from. */
|
||||
const filedUnder: Record<string, number> = {};
|
||||
const spelt: Record<string, string> = {};
|
||||
for (const st of s.staff) {
|
||||
const k = groupKey(st.group);
|
||||
if (st.inactive || !k) continue;
|
||||
filedUnder[k] = (filedUnder[k] || 0) + 1;
|
||||
if (!spelt[k]) spelt[k] = st.group.trim();
|
||||
}
|
||||
const staffCount = (g: string) => filedUnder[groupKey(g)] || 0;
|
||||
/* The groups on the list, then any name still on a route that is no longer on the list — left
|
||||
there by a backup restored from an older file, or by the move to three routes. The people filed
|
||||
under it are still on that route, so it stays in sight to be kept or let go, rather than
|
||||
deciding somebody's kit from a list nobody can see. */
|
||||
const listedKeys = new Set(s.settings.staffGroups.map(groupKey));
|
||||
const offList: string[] = [];
|
||||
for (const g of [...lists.nursing, ...lists.kit]) {
|
||||
const k = groupKey(g);
|
||||
if (!listedKeys.has(k) && !offList.some((x) => groupKey(x) === k)) offList.push(g);
|
||||
}
|
||||
const groupRows = [...s.settings.staffGroups.map((g) => ({ g, listed: true })), ...offList.map((g) => ({ g, listed: false }))];
|
||||
/* Groups people are filed under that nobody has put on this list. A staff import files people
|
||||
under whatever the roster calls them and adds nothing here, so on a facility that has just
|
||||
loaded its register this is every group it has — and everybody in them is on manager approval
|
||||
until the group is added and given a route. Named with a button each, biggest first, rather
|
||||
than left for somebody to notice. */
|
||||
const rowKeys = new Set(groupRows.map((r) => groupKey(r.g)));
|
||||
const unlisted = Object.keys(filedUnder).filter((k) => !rowKeys.has(k)).map((k) => ({ g: spelt[k], n: filedUnder[k] })).sort((a, b) => b.n - a.n);
|
||||
|
||||
/* The figures the routes are described with, read off the boxes rather than the stored values, so
|
||||
the words describe what walking away from this screen now would leave in force. A box left empty
|
||||
saves nothing, so the stored figure stands for it. Put through allowance() — the sum the counter
|
||||
and the wearer's app do — so a starting kit typed above the ceiling is quoted at the ceiling,
|
||||
which is what the counter actually hands over. */
|
||||
const typedSets = (k: "initialSets" | "capSets") => { const t = val(k).trim(); return t === "" ? s.settings[k] : Number(t); };
|
||||
const shape = allowance({ held: 0, kit: true, startingSets: typedSets("initialSets"), capSets: typedSets("capSets") });
|
||||
const ceiling = shape.max, kitStart = shape.start ?? 0;
|
||||
const kitOverCeiling = setsOnStart(typedSets("initialSets")) > ceiling;
|
||||
/* Sets and garments together, because they are one kit counted two ways and the argument at the
|
||||
counter is always about garments. SET_GARMENTS rather than a bare 2: a set is a top and a bottom
|
||||
everywhere in the product, and this is not the place to re-decide it. */
|
||||
const sets = (n: number) => `${n} set${n === 1 ? "" : "s"} (${n * SET_GARMENTS} garments)`;
|
||||
const routeSays: Record<AllowanceRoute, string> = {
|
||||
fte: "First kit proposed from each person's hours; a manager can sign for more.",
|
||||
kit: `${sets(kitStart)} on the first day, then more as needed.`,
|
||||
approval: "Nothing on the first day; a manager approves each set.",
|
||||
};
|
||||
|
||||
async function signOut() { await fetch("/api/auth/logout", { method: "POST" }); router.push("/auth"); router.refresh(); }
|
||||
/* One change to the groups at a time. Each of these sends whole lists worked out from what is on
|
||||
screen, so a second one sent before the first is back in the snapshot is worked out from the
|
||||
lists as they were: an add straight after a rename would send the old name back, and the renamed
|
||||
group would come off its route with it. `busy` covers the save and the refresh behind it, which
|
||||
is well under a second. Refused out loud rather than by greying the buttons, because a button
|
||||
switched off under the finger drops keyboard focus on the floor. */
|
||||
const settled = () => { if (!busy) return true; say("groups", "Still saving the last change — try again in a moment."); return false; };
|
||||
// Editing the group list, a ward or a supplier used to fire and forget: a refusal (the last group,
|
||||
// a name already taken, a lost connection) left the chip sitting where it was with nothing said,
|
||||
// and the admin clicked again. `name` is for the buttons that add a group somebody is already
|
||||
// filed under; the box below the list sends nothing and is cleared once its group is in.
|
||||
async function addGroup(name?: string) {
|
||||
const g = (name ?? newGroup).trim();
|
||||
if (!g || !settled()) return;
|
||||
const route = routeOf(g);
|
||||
const r = await mutate("settings.update", { staffGroups: [...s.settings.staffGroups, g] });
|
||||
say("groups", r.ok ? `${g} added, ${routeNow(route)}${route === "approval" ? " until you choose another route" : ""}.` : r.error);
|
||||
if (r.ok && name === undefined) setNewGroup("");
|
||||
}
|
||||
async function removeGroup(g: string) {
|
||||
if (!settled()) return;
|
||||
const n = staffCount(g), route = routeOf(g);
|
||||
const who = `${n} staff member${n === 1 ? " is" : "s are"} filed under ${g}`;
|
||||
/* Asked before, not reported after. Taking a group off the list takes it off its route too, and
|
||||
everybody still filed under it goes onto manager approval — a coordinator tidying up a list is
|
||||
owed that before a team's first kit goes, not in a message once it has. */
|
||||
if (n && !confirm(route === "approval"
|
||||
? `${who}. They stay filed under it, still on manager approval, but nobody new can be put in ${g}. Take it off the list?`
|
||||
: `${who}, which is ${routeNow(route)}. Taking it off the list puts them on manager approval — move them to another group first to keep their route.\n\nTake ${g} off the list?`)) return;
|
||||
const r = await mutate("settings.update", { staffGroups: s.settings.staffGroups.filter((x) => x !== g) });
|
||||
say("groups", !r.ok ? r.error
|
||||
: n ? `${g} removed. The ${n} staff member${n === 1 ? " filed under it is" : "s filed under it are"} on manager approval, and ${g} is listed below to add back.`
|
||||
: `${g} removed.`);
|
||||
}
|
||||
// Both lists in one save, because moving a group is taking it off one route and putting it on
|
||||
// another, and the server refuses any save that would leave it on two.
|
||||
async function setRoute(g: string, to: AllowanceRoute) {
|
||||
const from = routeOf(g);
|
||||
if (from === to || !settled()) return;
|
||||
const k = groupKey(g);
|
||||
const nursing = lists.nursing.filter((x) => groupKey(x) !== k);
|
||||
/* A group caught on both lists is on the FTE table already — allowanceRoute() says so — so
|
||||
taking it off the kit list here changes nobody's route. What it does is let the save through:
|
||||
the server refuses any save that leaves a group on both, whichever group the click was about. */
|
||||
const kit = lists.kit.filter((x) => groupKey(x) !== k && !isNursingGroup(nursing, x));
|
||||
if (to === "fte") nursing.push(g);
|
||||
if (to === "kit") kit.push(g);
|
||||
setRoutePick({ base: listSig, nursing, kit });
|
||||
const r = await mutate("settings.update", { nursingGroups: nursing, kitGroups: kit });
|
||||
// Put the row back where the server still has it, or the screen would go on claiming a change
|
||||
// that was refused.
|
||||
if (!r.ok) { setRoutePick(null); say("groups", r.error); return; }
|
||||
say("groups", `${g} is ${routeNow(to)}. ${routeSays[to]}`);
|
||||
}
|
||||
/* The one message the linen room can put in front of everybody at once. It is not mail and it is
|
||||
not a request: it is the board on the wall, and the ward reads it on the home screen of their
|
||||
own app. An empty message takes the board down — the linen room's way of saying that's over. */
|
||||
async function postNotice() {
|
||||
const body = notice.body.trim(), endsAt = notice.endsAt.trim();
|
||||
/* A day already gone is a notice nobody will ever see: the staff app only shows one whose end
|
||||
date is today or later. Caught here, because the server takes the date happily and the first
|
||||
anyone would know of it is that the ward never mentioned the thing they were told. */
|
||||
if (body && endsAt && endsAt < s.today) { say("notice", `${fmtDate(endsAt)} has already gone, so nobody would see this. Pick today or later, or leave the date blank.`); return; }
|
||||
setNoticeBusy(true);
|
||||
const r = await mutate<{ cleared: boolean }>("notice.set", { body, endsAt });
|
||||
setNoticeBusy(false);
|
||||
if (!r.ok) { say("notice", r.error); return; }
|
||||
say("notice", r.result.cleared
|
||||
? "The board is clear. Nothing shows on anybody's home screen now."
|
||||
: `Posted. Every staff member who has set up the app sees this on their home screen${endsAt ? `, up to and including ${fmtDate(endsAt)}` : ", until it is taken down"}.`);
|
||||
}
|
||||
/* Renaming a ward is safe to offer because dept.save carries the old name forward in the same
|
||||
transaction: every staff record filed under it and every order costed to it moves with it, so
|
||||
nothing is left pointing at a name that has gone.
|
||||
|
||||
A rename that is not going to happen has to leave the row showing the ward the register still
|
||||
has. It used to leave the rejected text sitting in the box, which is worse than not checking at
|
||||
all: the coordinator walks away reading a ward name that exists nowhere, and the cost centre box
|
||||
beside it saves the whole row — so the next cost centre typed on that row was the thing that
|
||||
finally saved the name nobody accepted. Every ending here either saves or puts the name back,
|
||||
and says which — and either way it says so, because a name that was refused was refused whether
|
||||
or not a better one is already being typed over it. */
|
||||
function renameDept(d: DeptRec, v: string) {
|
||||
const k = "deptname:" + d.id;
|
||||
setDraft((x) => ({ ...x, [k]: v }));
|
||||
clearTimeout(timers.current[k]);
|
||||
/* Checked when the typing stops rather than on every keystroke, because half a ward's name on
|
||||
the way to a whole one is not a refusal — clearing the box under somebody mid-word would make
|
||||
the field unusable. The pause is the same one that commits the save. */
|
||||
timers.current[k] = setTimeout(async () => {
|
||||
const name = v.trim();
|
||||
const no = deptNameRefusal(d, name);
|
||||
if (no) { forgetDraft(k, v); say("depts", no); return; }
|
||||
const r = await mutate("dept.save", { id: d.id, name, cc: deptCc(d, draftNow.current).trim() });
|
||||
if (!r.ok) { forgetDraft(k, v); say("depts", r.error); return; }
|
||||
say("depts", `Renamed to ${name}. Everyone filed under ${d.name}, and every order costed to it, moved with it.`);
|
||||
}, 600);
|
||||
}
|
||||
/* The catch is the whole point of parseCsv refusing a malformed file. It throws to stop a
|
||||
half-import, and without somewhere to land that refusal was an unhandled rejection: the admin
|
||||
saw "Importing…" sit there forever and went looking for the staff it never loaded. Whatever
|
||||
parseCsv says — which line, which quote — is what the admin needs on screen to fix the file. */
|
||||
async function importFile(file: File) {
|
||||
setImpBusy(true); say("import", "Importing…");
|
||||
try {
|
||||
const rows = parseCsv(await file.text());
|
||||
if (!rows.length) { say("import", "No rows found — check the header row."); return; }
|
||||
const r = await mutate<{ created: number; updated: number; skipped: number; styles?: number; errors: string[] }>("import.rows", { kind: impKind, rows });
|
||||
if (!r.ok) { say("import", r.error); return; }
|
||||
const x = r.result;
|
||||
say("import", `${CSV_TEMPLATES[impKind].name}: ${x.created} created, ${x.updated} updated, ${x.skipped} skipped.${x.styles ? ` ${x.styles} uniform ${x.styles === 1 ? "style" : "styles"} set.` : ""}` + (x.errors.length ? "\n" + x.errors.join("\n") : ""));
|
||||
}
|
||||
catch (e) { say("import", (e as Error)?.message || "That file couldn’t be read as a CSV. Nothing was imported."); }
|
||||
finally { setImpBusy(false); }
|
||||
}
|
||||
async function restore(file: File) {
|
||||
if (!confirm("Restore this backup? It replaces ALL data in this facility (catalogue, staff, orders, issues, stock, approvals). Users are kept.")) return;
|
||||
say("backup", "Restoring…");
|
||||
try {
|
||||
const data = JSON.parse(await file.text());
|
||||
const r = await mutate<{ photosSkipped: number }>("backup.restore", data);
|
||||
if (!r.ok) { say("backup", r.error); return; }
|
||||
// A restore takes back a capped number of photos and drops the rest rather than refusing the
|
||||
// whole file. Said out loud, because the alternative is a room believing every signature and
|
||||
// damage photo is back on the record when some of them only exist in the file.
|
||||
const skipped = r.result?.photosSkipped || 0;
|
||||
say("backup", skipped ? `Backup restored — every record came back, but ${skipped} photo${skipped === 1 ? "" : "s"} in the file did not. Keep the backup file: those images are only in it now.` : "Backup restored.");
|
||||
}
|
||||
catch (e) { say("backup", "Import failed — " + (e as Error).message); }
|
||||
}
|
||||
/* Fetched rather than a plain <a href="/api/backup">, because a browser downloading a file never
|
||||
shows the page its contents: the export trims the oldest photos to keep the file inside what a
|
||||
restore will take back, counts them in `photosOmitted`, and until this ran through fetch nobody
|
||||
was ever told. A room finds out otherwise only on the day it restores. */
|
||||
async function exportBackup() {
|
||||
setBkBusy(true); say("backup", "Preparing the backup…");
|
||||
try {
|
||||
const res = await fetch("/api/backup");
|
||||
/* Every other write on this page goes through mutate, which sends a dead session back to the
|
||||
sign-in door; this one fetch was outside that and would have handed the admin a signed-out
|
||||
error page saved as threadcount-backup.json — a file that looks like a backup and restores
|
||||
nothing. Same destination as mutate's, carrying where they were so they land back here. */
|
||||
if (res.status === 401) { window.location.assign(`/auth?next=${encodeURIComponent(location.pathname + location.search)}`); return; }
|
||||
if (!res.ok) { say("backup", ((await res.json().catch(() => ({}))) as { error?: string }).error || "Export failed — nothing was downloaded."); return; }
|
||||
const text = await res.text();
|
||||
// Read out of the text rather than JSON.parse: the file carries every photo that travelled and
|
||||
// can run to tens of megabytes, and parsing it a second time on a linen-room PC to learn one
|
||||
// number is not worth the memory.
|
||||
const omitted = Number(/"photosOmitted":\s*(\d+)/.exec(text)?.[1] || 0);
|
||||
const name = /filename="([^"]+)"/.exec(res.headers.get("content-disposition") || "")?.[1] || "threadcount-backup.json";
|
||||
const url = URL.createObjectURL(new Blob([text], { type: "application/json" }));
|
||||
const a = document.createElement("a"); a.href = url; a.download = name; a.click();
|
||||
setTimeout(() => URL.revokeObjectURL(url), 60_000);
|
||||
say("backup", omitted
|
||||
? `${name} downloaded. ${omitted} older photo${omitted === 1 ? " was" : "s were"} left out so the file stays small enough to restore — every record is in it, and the images stay on the server.`
|
||||
: `${name} downloaded.`);
|
||||
router.refresh();
|
||||
} catch (e) { say("backup", "Export failed — " + (e as Error).message); }
|
||||
finally { setBkBusy(false); }
|
||||
}
|
||||
function template(kind: string) {
|
||||
const t = CSV_TEMPLATES[kind];
|
||||
const a = document.createElement("a"); a.href = "data:text/csv;charset=utf-8," + encodeURIComponent(t.headers + "\n" + t.example + "\n"); a.download = `threadcount-${kind}-template.csv`; a.click();
|
||||
}
|
||||
function uploadLogo(file: File) {
|
||||
if (file.size > 400 * 1024) { say("logo", "Logo must be under 400 KB."); return; }
|
||||
const r = new FileReader();
|
||||
r.onload = async () => { const res = await mutate("settings.update", { logoData: String(r.result) }); setLogoV((v) => v + 1); say("logo", res.ok ? "Logo saved — it prints top-right on slips." : res.error); };
|
||||
r.readAsDataURL(file);
|
||||
}
|
||||
// How many sizes sit on each location, so an empty shelf is obvious before it is deleted.
|
||||
const locCounts: Record<string, number> = {};
|
||||
for (const k in s.placed) locCounts[s.placed[k]] = (locCounts[s.placed[k]] || 0) + 1;
|
||||
const H = ({ children, top = 6 }: { children: React.ReactNode; top?: number }) => <div className="sec" style={{ marginTop: `var(--space-${top})` }}>{children}</div>;
|
||||
const Note = ({ children }: { children: React.ReactNode }) => <div style={{ fontSize: 12, color: "var(--color-neutral-700)", marginTop: "var(--space-2)", lineHeight: 1.6 }}>{children}</div>;
|
||||
/* Not a component defined in here. React compares element types by identity, so a helper declared
|
||||
inside the render is a brand-new type on every keystroke: the whole field is torn down and
|
||||
rebuilt, and the caret goes with it. TextField sits at module scope and is handed everything it
|
||||
needs, which is why F is a plain function returning an element rather than <F />. */
|
||||
const F = (k: keyof typeof s.settings, label: string, opts: { ph?: string; hint?: string; numeric?: boolean; demoFixed?: boolean } = {}) =>
|
||||
<TextField label={label} hint={opts.hint} ph={opts.ph} value={val(k)} disabled={!isAdmin || (!!opts.demoFixed && !!s.demo)} onChange={(v) => setField(k, opts.numeric ? v.replace(/[^0-9]/g, "") : v)} />;
|
||||
const grid: React.CSSProperties = { display: "grid", gridTemplateColumns: "1fr 1fr", gap: "var(--space-4)", marginTop: "var(--space-3)" };
|
||||
const deptStaff: Record<string, number> = {}; for (const st of s.staff) deptStaff[st.dept] = (deptStaff[st.dept] || 0) + 1;
|
||||
|
||||
/* One reading of a field, used both by the input that edits it and by the export that writes it,
|
||||
so the two cannot drift apart. debounced() holds a keystroke in `draft` for half a second before
|
||||
it reaches the server, and `draft` is what the coordinator can see in the box — so `draft` is
|
||||
what the file has to say. Overlaying it here rather than flushing the pending saves first is
|
||||
deliberate: pressing Export must not write to the register (a half-typed cost centre would be
|
||||
committed early), it must not wait on the network to hand over a file, and a save the server
|
||||
refuses leaves the typed value on screen anyway — only the overlay still matches it. The ward's
|
||||
own name is the exception, and exportDepts says why. A save that goes out after a pause passes
|
||||
draftNow instead, for the reason given where that is kept. */
|
||||
const deptCc = (d: DeptRec, from = draft) => from["dept:" + d.id] ?? d.cc;
|
||||
/* The same overlay for the ward's own name, and for a second reason on top of the export's: the
|
||||
cost centre box beside it saves the whole row, name included, so without this a cost centre
|
||||
typed while a rename was still settling would quietly put the old name back. */
|
||||
const deptName = (d: DeptRec) => draft["deptname:" + d.id] ?? d.name;
|
||||
/* What is wrong with a ward name, in the words the coordinator needs, or nothing if it is fine.
|
||||
One reading of it, because two boxes on the row both save the row — the name and the cost centre
|
||||
— and if they disagreed about what counts as a name, the cost centre box would be the way a
|
||||
rejected name got saved anyway. The register itself refuses both of these; asked here as well so
|
||||
the answer arrives while the coordinator is still looking at the row they typed it on. */
|
||||
function deptNameRefusal(d: DeptRec, name: string) {
|
||||
if (!name) return `A ward needs a name — ${d.name} hasn’t been changed.`;
|
||||
const clash = s.depts.find((o) => o.id !== d.id && o.name.trim().toLowerCase() === name.toLowerCase());
|
||||
return clash ? `${clash.name} is already on the list, and two wards with one name can’t be told apart on a staff record or a journal line.` : "";
|
||||
}
|
||||
/* The name this row would be saved under: what has been typed, unless it is a name the register
|
||||
would refuse, in which case the ward keeps the one it has. Typing a cost centre must never be
|
||||
the thing that commits a rename. It is for the save alone — what the file hands to finance is
|
||||
the name the register actually holds, see exportDepts. */
|
||||
const deptSaveName = (d: DeptRec) => { const n = deptName(d).trim(); return deptNameRefusal(d, n) ? d.name : n; };
|
||||
const supField = (sup: SupplierRec, k: SupKey) => draft[`sup:${sup.id}:${k}`] ?? (sup[k] === null ? "" : String(sup[k]));
|
||||
|
||||
/* The three registers on this page are the ones a coordinator is most often asked to hand over —
|
||||
the shelf map before a stocktake, the ward list for finance, the supplier list for procurement —
|
||||
and until now the only way out of any of them was to retype what was on the screen. Each tab
|
||||
exports its own register and nothing else: somebody on Suppliers pressing Export means suppliers. */
|
||||
function exportLocations() {
|
||||
/* Nothing to overlay here, unlike the two below: the only editable thing on this tab is the
|
||||
Inside select, and that is saved the moment it changes rather than held in `draft`. */
|
||||
const byId = locMap(s);
|
||||
/* A tree flattened into rows loses the thing that made it a tree, and "Bay B3" on its own is no
|
||||
use to anybody walking the room — there is a B3 on every shelf. So each row carries its full
|
||||
path as well as its own name, built with the helper the rest of the app renders a location
|
||||
with, and a spreadsheet sorted any which way still reads Linen Room · Shelf B · Bay B3. */
|
||||
const rows = locTree(s, true).map(({ loc }) => [loc.name, loc.kind, loc.parentId ? byId[loc.parentId]?.name ?? "" : "", locPath(byId, loc.id).map((l) => l.name).join(" · "), locCounts[loc.id] || 0]);
|
||||
downloadCsv(`threadcount-locations-${s.today}.csv`, csvOf(["Location", "Kind", "Inside", "Full path", "Sizes"], rows));
|
||||
}
|
||||
/* dept and cc are the import template's own headers, not prettier ones that happen to normalise
|
||||
onto them, so what comes out of here is exactly what the importer expects back: a coordinator
|
||||
can export the wards, fix twenty cost centres in a spreadsheet and import the same file under
|
||||
Data without touching the header row. The staff count is ours to be useful — the importer has
|
||||
no alias for it, so it is ignored on the way back in and cannot create a ward of its own. */
|
||||
function exportDepts() {
|
||||
/* The ward's name as the register holds it, not as the box reads it. A rename is half a second
|
||||
behind the typing and the server can still turn it down after that, so a name in the box is
|
||||
not yet a ward. This file goes to finance and comes back in through Data, where a name that
|
||||
never landed arrives as a ward of its own: the staff stay on the old one, the new cost centre
|
||||
goes on the new one, and the ward is in two halves. The cost centre beside it is the typed
|
||||
one on purpose — a code is typed into a ward that already exists, so the worst an unsaved one
|
||||
does is carry a correction to finance a moment early.
|
||||
Trimmed the way dept.save trims, so a code typed with a stray trailing space — invisible in
|
||||
the box — reaches finance in the form the register will actually hold. */
|
||||
downloadCsv(`threadcount-departments-${s.today}.csv`, csvOf(["dept", "cc", "staff"], s.depts.map((d) => [d.name, deptCc(d).trim(), deptStaff[d.name] || 0])));
|
||||
}
|
||||
// Everything procurement rings a supplier about: who to ask for, on which account, and how long
|
||||
// they take — lead time being what dates the delivery on a new order. The product and order counts
|
||||
// are the screen's own, and they say which of these names anybody is actually buying from.
|
||||
function exportSuppliers() {
|
||||
const rows = s.supplierDir.map((sup) => [sup.name, supField(sup, "contact"), supField(sup, "phone"), supField(sup, "account"), supField(sup, "lead"), s.catalog.filter((it) => it.supplier === sup.name).length, s.orders.filter((o) => o.supplier === sup.name).length]);
|
||||
downloadCsv(`threadcount-suppliers-${s.today}.csv`, csvOf(["Supplier", "Contact", "Phone", "Account no.", "Lead time (days)", "Products", "Orders"], rows));
|
||||
}
|
||||
const lastBk = s.settings.lastBackup; const bkDays = lastBk ? daysBetween(lastBk, s.today) : null;
|
||||
/* A week is the line. Past it the facility is one failed disk away from retyping its register by
|
||||
hand, which is the only thing on this page worth interrupting somebody over. */
|
||||
const bkStale = !lastBk || (bkDays ?? 0) > 7;
|
||||
|
||||
return (
|
||||
/* The ink band runs the full width of the content column, so the reading measure is set on the
|
||||
form underneath it rather than on the section. Set here, the head would bleed out to the left
|
||||
gutter and stop dead at 760px on the right. */
|
||||
<section>
|
||||
<PageHead eyebrow="Admin" title="Settings" />
|
||||
<div style={{ maxWidth: 760 }}>
|
||||
{/* Seg rather than a hand-rolled strip, for what Seg carries: aria-pressed. Which tab you are
|
||||
on used to be a fill colour and nothing else, so a coordinator on a screen reader heard six
|
||||
identical buttons, and tapping one announced no change at all. */}
|
||||
<span role="group" aria-label="Settings sections"><Seg opts={tabs} value={tab} onChange={setTab} style={{ flexWrap: "wrap", marginTop: "var(--space-4)" }} /></span>
|
||||
|
||||
{tab === "General" && (
|
||||
<>
|
||||
<H>Facility</H>
|
||||
<div className="tc-grid" style={grid}>
|
||||
{F("facility", "Facility")}{F("location", "Stock location")}{F("coordinator", "Coordinator name")}
|
||||
{/* Fixed in the demo for the same reason the coordinator's name is, with more riding on
|
||||
it: everyone shares that one facility, so an address or number typed here prints in
|
||||
the foot of the order form in front of every other visitor — and it would be a real
|
||||
person's address and a real phone. */}
|
||||
{F("coordinatorEmail", "Coordinator e-mail", { ph: "e.g. uniforms@yourhospital.org.au", demoFixed: true })}
|
||||
{F("coordinatorPhone", "Coordinator phone", { ph: "e.g. 07 3xxx xxxx", demoFixed: true })}
|
||||
{/* Off in the demo for the same reason settings.update refuses the facility name and the
|
||||
slip footers there: everyone shares that one facility, so a visitor setting it to
|
||||
Honolulu re-dates the dashboard, the exceptions report and the journal for every
|
||||
other visitor — the director of nursing and the Play reviewer included. */}
|
||||
<Field label="Time zone" hint="Where the linen room actually is." error={tzErr || undefined}>{(c) => (
|
||||
<select {...c} className="input" value={tzPick ?? s.settings.timezone} disabled={!isAdmin || !!s.demo}
|
||||
onChange={async (e) => {
|
||||
const z = e.target.value; setTzPick(z); setTzErr("");
|
||||
const r = await mutate("settings.update", { timezone: z });
|
||||
// The refusal belongs here, next to the select that snaps back, not in the shared
|
||||
// message line under Staff groups two screens further down where it reads as
|
||||
// nothing having happened at all.
|
||||
if (!r.ok) { setTzPick(null); setTzErr(r.error); return; }
|
||||
say("fields", `Dates now follow ${z} time.`);
|
||||
}}>
|
||||
{zones.map((z) => <option key={z} value={z}>{z}</option>)}
|
||||
</select>
|
||||
)}</Field>
|
||||
</div>
|
||||
<Note>These print on slips, purchase orders, reports and the uniform order form.</Note>
|
||||
<H>Issuing & stock</H>
|
||||
<div className="tc-grid" style={grid}>{F("capSets", "Ceiling, every group (sets)", { numeric: true, ph: "e.g. 6", hint: "Held at any time — not a yearly allowance." })}{F("initialSets", "Starting kit (sets)", { numeric: true, ph: "e.g. 3", hint: "First day, Starting kit route only." })}{F("defaultEntitlement", "Yearly figure for reports (garments)", { numeric: true })}{F("defaultReorder", "Default reorder level", { numeric: true, hint: "For sizes without their own." })}{F("exceptionHigh", "Exception threshold (items/month)", { numeric: true })}</div>
|
||||
{kitOverCeiling && <Note>Nobody is handed more than the ceiling, so the starting kit stops at {sets(kitStart)}.</Note>}
|
||||
{/* Set on the counter phone and nowhere else until now, which meant the one number the
|
||||
desktop stock take enforces could only be changed by somebody holding the phone —
|
||||
and on a facility whose phones are all issued out, not at all. */}
|
||||
<H>Stock takes</H>
|
||||
<div className="tc-grid" style={grid}>{F("varianceReason", "Reason required at (garments)", { numeric: true, ph: "e.g. 5", hint: "Over or short, here and on the counter phone." })}</div>
|
||||
<H>Finance & journal</H>
|
||||
<div className="tc-grid" style={grid}>{F("glAccount", "GL account", { ph: "e.g. 631020" })}{F("journalDesc", "Journal description prefix", { ph: "e.g. Uniform issues" })}</div>
|
||||
<Note>Used by the Reports journal export and month-end pack.</Note>
|
||||
<H>Slips & logo</H>
|
||||
<div className="tc-grid" style={grid}>
|
||||
{F("slipOrg", "Organisation name on slips", { ph: "Printed when there is no logo" })}
|
||||
{/* Not a Field: this cell holds a preview, a file picker and a remove button, and a single
|
||||
<label> cannot name three controls. A named group is the honest markup. */}
|
||||
<div className="field" role="group" aria-label="Logo (top-right on slips)">
|
||||
<span aria-hidden="true" style={{ fontSize: 11, fontWeight: 600, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--color-neutral-700)" }}>Logo (top-right on slips)</span>
|
||||
<div style={{ display: "flex", gap: "var(--space-2)", alignItems: "center", flexWrap: "wrap" }}>
|
||||
{s.settings.hasLogo && <img src={`/api/logo?v=${logoV}`} alt="The logo currently printed on slips" style={{ height: 34, maxWidth: 140, objectFit: "contain", border: "1px solid var(--color-divider)", background: "#fff", padding: 2 }} />}
|
||||
{isAdmin && <label className="btn btn-secondary" style={{ cursor: "pointer" }}>{s.settings.hasLogo ? "Replace" : "Upload"}<input type="file" accept="image/png,image/jpeg,image/webp,image/gif" aria-label={s.settings.hasLogo ? "Replace the slip logo" : "Upload a slip logo"} style={{ display: "none" }} onChange={(e) => { const f = e.target.files?.[0]; if (f) uploadLogo(f); e.target.value = ""; }} /></label>}
|
||||
{isAdmin && s.settings.hasLogo && <button className="btn btn-ghost" aria-label="Remove the slip logo" onClick={async () => { const r = await mutate("settings.update", { logoData: "" }); say("logo", r.ok ? "Logo removed." : r.error); }}>Remove</button>}
|
||||
</div>
|
||||
</div>
|
||||
<Field label="Collection slip footer" style={{ gridColumn: "1 / -1" }}>{(c) => <input {...c} className="input" value={val("slipCollectionFooter")} onChange={(e) => setField("slipCollectionFooter", e.target.value)} disabled={!isAdmin} />}</Field>
|
||||
<Field label="Delivery slip footer" style={{ gridColumn: "1 / -1" }}>{(c) => <input {...c} className="input" value={val("slipDeliveryFooter")} onChange={(e) => setField("slipDeliveryFooter", e.target.value)} disabled={!isAdmin} />}</Field>
|
||||
</div>
|
||||
<Msg text={msg.logo} />
|
||||
<H>Staff groups</H>
|
||||
<Note>Each group takes one route; every route stops at the ceiling of {sets(ceiling)} held.</Note>
|
||||
{/* One sentence per route, read once here rather than repeated down every row, and written
|
||||
with this facility's own figures — the ones the counter and the wearer's app quote. */}
|
||||
<div style={{ fontSize: 12, color: "var(--color-neutral-700)", marginTop: "var(--space-2)", lineHeight: 1.6 }}>
|
||||
{ROUTES.map((r) => <div key={r.id}><b style={{ color: "var(--color-text)" }}>{r.label}.</b> {routeSays[r.id]}</div>)}
|
||||
</div>
|
||||
{/* Where every new facility starts: it names its own groups, and there is no list of ours to
|
||||
stand in for them. Until it does, the only route anybody is on is manager approval, and
|
||||
that is said here rather than left as an empty space to be puzzled over. */}
|
||||
{!groupRows.length && (
|
||||
<div className="tc-flag" style={{ fontSize: 13, marginTop: "var(--space-4)", paddingLeft: "var(--space-3)", lineHeight: 1.6 }}>
|
||||
<span className="tc-mark" aria-hidden="true" />
|
||||
<b>No staff groups yet</b>, so everybody is on manager approval{isAdmin ? " — add your groups below." : "."}
|
||||
</div>
|
||||
)}
|
||||
{!!groupRows.length && (
|
||||
<div style={{ marginTop: "var(--space-3)", borderTop: "1px solid var(--color-divider)" }}>
|
||||
{groupRows.map(({ g, listed }) => {
|
||||
const route = routeOf(g), n = staffCount(g);
|
||||
return (
|
||||
<div key={g} style={{ display: "flex", flexWrap: "wrap", alignItems: "center", gap: "var(--space-2) var(--space-3)", padding: "var(--space-2) 0", borderBottom: "1px solid var(--color-divider)", fontSize: 13 }}>
|
||||
<div style={{ flex: "1 1 160px", minWidth: 0 }}>
|
||||
<b>{g}</b>
|
||||
<div style={{ fontSize: 12, color: "var(--color-neutral-700)" }}>{n ? `${n} staff member${n === 1 ? "" : "s"}` : "Nobody filed under it"}{listed ? "" : " · not on the list"}</div>
|
||||
</div>
|
||||
{/* Seg's markup rather than Seg itself, because Seg's buttons can't be switched off
|
||||
for an issuer, who may read the routes but not change them. One pressed button
|
||||
out of three is also what makes a group on two routes impossible to ask for. */}
|
||||
<div className="seg" role="group" aria-label={`Route for ${g}`}>
|
||||
{ROUTES.map((r) => <button key={r.id} className={"seg-opt" + (route === r.id ? " btn-primary" : "")} aria-pressed={route === r.id} disabled={!isAdmin} onClick={() => setRoute(g, r.id)}>{r.label}</button>)}
|
||||
</div>
|
||||
{isAdmin && (
|
||||
<div style={{ display: "flex", gap: "var(--space-1)", alignItems: "center" }}>
|
||||
{listed
|
||||
? <button className="btn btn-ghost" aria-label={`Rename the ${g} staff group`} onClick={() => { if (settled()) setRenaming(g); }}>Rename</button>
|
||||
: <button className="btn btn-ghost" aria-label={`Add to list — ${g}`} onClick={() => addGroup(g)}>Add to list</button>}
|
||||
{/* A bare "×" announces as "times, button" and names nothing, so a screen-reader
|
||||
user had no way to tell which group they were about to delete. */}
|
||||
{listed && <button className="btn btn-ghost btn-icon" style={{ fontSize: 13 }} aria-label={`Remove the ${g} staff group`} onClick={() => removeGroup(g)}>×</button>}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
{isAdmin && <div style={{ display: "flex", gap: "var(--space-2)", flexWrap: "wrap", marginTop: "var(--space-3)" }}><input className="input" style={{ minHeight: 30, padding: "2px 8px", width: 200 }} aria-label="New staff group" placeholder="New staff group" value={newGroup} onChange={(e) => setNewGroup(e.target.value)} onKeyDown={(e) => { if (e.key === "Enter" && newGroup.trim()) addGroup(); }} /><button className="btn btn-secondary" style={{ minHeight: 30 }} disabled={!newGroup.trim()} onClick={() => addGroup()}>Add</button></div>}
|
||||
{!!offList.length && <Note>Groups not on the list keep their route but take nobody new — add one back to keep it.</Note>}
|
||||
{!!unlisted.length && (
|
||||
<div style={{ marginTop: "var(--space-4)" }}>
|
||||
<Note>{unlisted.length === 1 ? "This group is" : "These groups are"} on the staff register but not on this list, so {unlisted.length === 1 ? "its" : "their"} staff are on manager approval until added{isAdmin ? "" : " by an admin"}.</Note>
|
||||
<div style={{ display: "flex", gap: "var(--space-2)", flexWrap: "wrap", marginTop: "var(--space-2)" }}>
|
||||
{unlisted.map(({ g, n }) => isAdmin
|
||||
? <button key={g} className="btn btn-secondary" style={{ minHeight: 30 }} aria-label={`Add ${g} — ${n} staff member${n === 1 ? " is" : "s are"} filed under it`} onClick={() => addGroup(g)}>Add {g} · {n}</button>
|
||||
: <span key={g} className="tag tag-outline" style={{ fontSize: 12, textTransform: "none", letterSpacing: 0 }}>{g} · {n}</span>)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<Msg text={msg.groups} />
|
||||
<Msg text={msg.fields} />
|
||||
{isAdmin && (
|
||||
<>
|
||||
<H>Ward notice</H>
|
||||
<Note>Shown on the home screen of the staff app.</Note>
|
||||
<Field label="Message" hint="Replaces the current notice, which this box doesn’t show." style={{ marginTop: "var(--space-3)" }}>{(c) => <textarea {...c} className="input" rows={3} maxLength={400} style={{ width: "100%" }} placeholder="e.g. The linen room is closed this Friday — collections move to Thursday." value={notice.body} onChange={(e) => setNotice({ ...notice, body: e.target.value })} />}</Field>
|
||||
<div className="tc-grid" style={grid}>
|
||||
<Field label="Last day shown" hint="Optional — left blank, it stays up until taken down.">{(c) => <input {...c} className="input" type="date" min={s.today} value={notice.endsAt} onChange={(e) => setNotice({ ...notice, endsAt: e.target.value })} />}</Field>
|
||||
</div>
|
||||
{/* The label is what pressing it does, rather than one word that means two opposite
|
||||
things depending on whether the box above happens to be empty. */}
|
||||
<div style={{ display: "flex", gap: "var(--space-2)", marginTop: "var(--space-3)", flexWrap: "wrap" }}>
|
||||
<button className="btn btn-secondary" disabled={noticeBusy} onClick={postNotice}>{noticeBusy ? "Saving…" : notice.body.trim() ? "Post this notice" : "Take the notice down"}</button>
|
||||
</div>
|
||||
<Msg text={msg.notice} />
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
{tab === "Locations" && (
|
||||
<>
|
||||
<H>Where garments live</H>
|
||||
<Note>Rooms hold shelves, shelves hold bays. Put a size on a shelf from Inventory.</Note>
|
||||
<div style={{ display: "flex", justifyContent: "flex-end", marginTop: "var(--space-3)" }}>
|
||||
<button className="btn btn-ghost" onClick={exportLocations} disabled={s.locations.length === 0}>Export CSV</button>
|
||||
</div>
|
||||
<div style={{ display: "grid", gridTemplateColumns: "1fr 130px 1fr 90px 32px", gap: "var(--space-2)", padding: "var(--space-3) 0 var(--space-1)", fontSize: 11, letterSpacing: "0.06em", textTransform: "uppercase", color: "var(--color-neutral-600)", fontWeight: 600 }}><div>Location</div><div>Kind</div><div>Inside</div><div style={{ textAlign: "right" }}>Sizes</div><div></div></div>
|
||||
{locTree(s, true).map(({ loc, depth }) => (
|
||||
<div key={loc.id} style={{ display: "grid", gridTemplateColumns: "1fr 130px 1fr 90px 32px", gap: "var(--space-2)", alignItems: "center", padding: "var(--space-1) 0", borderBottom: "1px solid var(--color-divider)", fontSize: 13 }}>
|
||||
<div style={{ fontWeight: 600, paddingLeft: depth * 16 }}>{loc.name}</div>
|
||||
<div style={{ color: "var(--color-neutral-700)" }}>{loc.kind}</div>
|
||||
<select className="input" style={{ minHeight: 28, padding: "2px 6px" }} aria-label={`What ${loc.name} sits inside`} value={loc.parentId || ""} disabled={!isAdmin}
|
||||
onChange={async (e) => { const r = await mutate("location.save", { id: loc.id, name: loc.name, kind: loc.kind, parentId: e.target.value }); say("locs", r.ok ? "Moved." : r.error); }}>
|
||||
<option value="">— top level —</option>
|
||||
{locTree(s, true).filter(({ loc: o }) => o.id !== loc.id).map(({ loc: o, depth: d }) => <option key={o.id} value={o.id}>{"\u00a0".repeat(d * 2)}{o.name}</option>)}
|
||||
</select>
|
||||
<div style={{ textAlign: "right", color: "var(--color-neutral-700)" }}>{locCounts[loc.id] || 0}</div>
|
||||
{isAdmin ? <button className="btn btn-ghost btn-icon" title="Remove — anything on it becomes unplaced" aria-label={`Remove ${loc.name} — anything on it becomes unplaced`} onClick={async () => { const r = await mutate("location.delete", { id: loc.id }); say("locs", r.ok ? "Removed." : r.error); }}>×</button> : <span />}
|
||||
</div>
|
||||
))}
|
||||
{s.locations.length === 0 && <Note>No locations yet. Add the first shelf below.</Note>}
|
||||
{isAdmin && (
|
||||
<div style={{ display: "flex", gap: "var(--space-2)", marginTop: "var(--space-3)", flexWrap: "wrap", alignItems: "flex-end" }}>
|
||||
<Field label="New location" style={{ flex: 1, minWidth: 160 }}>{(c) => <input {...c} className="input" value={nl.name} onChange={(e) => setNl({ ...nl, name: e.target.value })} placeholder="e.g. Shelf B" />}</Field>
|
||||
<Field label="Kind" style={{ width: 130 }}>{(c) => <select {...c} className="input" value={nl.kind} onChange={(e) => setNl({ ...nl, kind: e.target.value })}>{LOCATION_KINDS.map((k) => <option key={k}>{k}</option>)}</select>}</Field>
|
||||
<Field label="Inside" style={{ width: 200 }}>{(c) => <select {...c} className="input" value={nl.parentId} onChange={(e) => setNl({ ...nl, parentId: e.target.value })}><option value="">— top level —</option>{locTree(s, true).map(({ loc: o, depth: d }) => <option key={o.id} value={o.id}>{"\u00a0".repeat(d * 2)}{o.name}</option>)}</select>}</Field>
|
||||
<button className="btn btn-secondary" disabled={!nl.name.trim()} onClick={async () => { const r = await mutate("location.save", nl); say("locs", r.ok ? "Added." : r.error); if (r.ok) setNl({ name: "", kind: nl.kind, parentId: nl.parentId }); }}>Add</button>
|
||||
</div>
|
||||
)}
|
||||
<Msg text={msg.locs} />
|
||||
</>
|
||||
)}
|
||||
|
||||
{tab === "Departments" && (
|
||||
<>
|
||||
<H>Departments & cost centres</H>
|
||||
<div style={{ display: "flex", justifyContent: "flex-end", marginTop: "var(--space-3)" }}>
|
||||
<button className="btn btn-ghost" onClick={exportDepts} disabled={s.depts.length === 0}>Export CSV</button>
|
||||
</div>
|
||||
<div style={{ display: "grid", gridTemplateColumns: "1fr 130px 90px 32px", gap: "var(--space-2)", padding: "var(--space-2) 0 var(--space-1)", fontSize: 11, letterSpacing: "0.06em", textTransform: "uppercase", color: "var(--color-neutral-600)", fontWeight: 600 }}><div>Department / ward</div><div>Cost centre</div><div style={{ textAlign: "right" }}>Staff</div><div></div></div>
|
||||
{s.depts.map((d) => (
|
||||
<div key={d.id} style={{ display: "grid", gridTemplateColumns: "1fr 130px 90px 32px", gap: "var(--space-2)", alignItems: "center", padding: "var(--space-1) 0", borderBottom: "1px solid var(--color-divider)", fontSize: 13 }}>
|
||||
<input className="input" style={{ minHeight: 28, padding: "2px 8px", fontWeight: 600 }} aria-label={`Name of ${d.name}`} value={deptName(d)} onChange={(e) => renameDept(d, e.target.value)} disabled={!isAdmin} />
|
||||
{/* Sends the name that is on screen, not the one the server still holds: this save
|
||||
writes the whole row, so during the second a rename is settling it would otherwise
|
||||
undo it. */}
|
||||
<input className="input" style={{ minHeight: 28, padding: "2px 8px" }} aria-label={`Cost centre for ${d.name}`} value={deptCc(d)} onChange={(e) => debounced("dept:" + d.id, e.target.value, "dept.save", { id: d.id, name: deptSaveName(d), cc: e.target.value.trim() }, "depts")} disabled={!isAdmin} />
|
||||
<div style={{ textAlign: "right", color: "var(--color-neutral-700)" }}>{deptStaff[d.name] || 0}</div>
|
||||
{isAdmin && !(deptStaff[d.name] || 0) ? <button className="btn btn-ghost btn-icon" title="Remove — no staff assigned" aria-label={`Remove ${d.name} — no staff assigned`} onClick={async () => { const r = await mutate("dept.delete", { id: d.id }); say("depts", r.ok ? `${d.name} removed.` : r.error); }}>×</button> : <span />}
|
||||
</div>
|
||||
))}
|
||||
{s.depts.length === 0 && <Note>No departments yet. Add wards below or import them in Data.</Note>}
|
||||
{isAdmin && (
|
||||
<div style={{ display: "flex", gap: "var(--space-2)", marginTop: "var(--space-3)", flexWrap: "wrap", alignItems: "flex-end" }}>
|
||||
<Field label="New department / ward" style={{ flex: 1, minWidth: 160 }}>{(c) => <input {...c} className="input" value={nd.name} onChange={(e) => setNd({ ...nd, name: e.target.value })} placeholder="e.g. Ward 5C" />}</Field>
|
||||
<Field label="Cost centre" style={{ width: 130 }}>{(c) => <input {...c} className="input" value={nd.cc} onChange={(e) => setNd({ ...nd, cc: e.target.value })} placeholder="e.g. RGH-5090" />}</Field>
|
||||
<button className="btn btn-secondary" disabled={!nd.name.trim() || !nd.cc.trim()} onClick={async () => { const r = await mutate("dept.save", nd); say("depts", r.ok ? "Added." : r.error); if (r.ok) setNd({ name: "", cc: "" }); }}>Add</button>
|
||||
</div>
|
||||
)}
|
||||
<Note>Wards with staff on them can't be removed.</Note>
|
||||
<Msg text={msg.depts} />
|
||||
</>
|
||||
)}
|
||||
|
||||
{tab === "Suppliers" && (
|
||||
<>
|
||||
<H>Suppliers</H>
|
||||
<div style={{ display: "flex", justifyContent: "flex-end", marginTop: "var(--space-3)" }}>
|
||||
<button className="btn btn-ghost" onClick={exportSuppliers} disabled={s.supplierDir.length === 0}>Export CSV</button>
|
||||
</div>
|
||||
{s.supplierDir.map((sp) => {
|
||||
const nItems = s.catalog.filter((it) => it.supplier === sp.name).length, nOrds = s.orders.filter((o) => o.supplier === sp.name).length;
|
||||
return (
|
||||
/* One supplier, one panel — the same bordered block with a named head that the rest
|
||||
of the app puts a list in, rather than this screen's own thinner version of it. The
|
||||
name keeps its own case: it is somebody's trading name, and the head's small caps
|
||||
would shout it back at them. */
|
||||
<div key={sp.id} className="tc-panel" style={{ marginTop: "var(--space-3)" }}>
|
||||
<div className="tc-panel-head">
|
||||
<span style={{ textTransform: "none", letterSpacing: 0, fontFamily: "var(--font-heading)", fontSize: 15, fontWeight: 800 }}>{sp.name}</span>
|
||||
<span className="tc-panel-aside" style={{ display: "flex", alignItems: "center", gap: "var(--space-2)", flex: "none" }}>
|
||||
{nItems} product{nItems === 1 ? "" : "s"} · {nOrds} order{nOrds === 1 ? "" : "s"}
|
||||
{isAdmin && nItems + nOrds === 0 && <button className="btn btn-ghost btn-icon" title="Remove — no products or orders use this supplier" aria-label={`Remove ${sp.name} — no products or orders use this supplier`} onClick={async () => { const r = await mutate("supplier.remove", { id: sp.id }); say("sup", r.ok ? `${sp.name} removed.` : r.error); }}>×</button>}
|
||||
</span>
|
||||
</div>
|
||||
<div className="tc-grid tc-panel-body" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "var(--space-3)" }}>
|
||||
{([["contact", "Contact person", "e.g. Dana R."], ["phone", "Phone", "e.g. 07 3xxx xxxx"], ["account", "Account no.", "e.g. ACC-2201"], ["lead", "Lead time (days)", "e.g. 14"]] as const).map(([k, lbl, ph]) => (
|
||||
<Field key={k} label={`${sp.name} — ${lbl}`}>{(c) => <input {...c} className="input" placeholder={ph} value={supField(sp, k)} onChange={(e) => { const v = k === "lead" ? e.target.value.replace(/[^0-9]/g, "") : e.target.value; debounced(`sup:${sp.id}:${k}`, v, "supplier.update", { id: sp.id, [k]: v }, "sup"); }} disabled={!isAdmin} />}</Field>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
{isAdmin && (
|
||||
<div style={{ display: "flex", gap: "var(--space-2)", marginTop: "var(--space-3)", alignItems: "flex-end", flexWrap: "wrap" }}>
|
||||
<Field label="New supplier" style={{ flex: 1, minWidth: 200 }}>{(c) => <input {...c} className="input" value={ns} onChange={(e) => setNs(e.target.value)} placeholder="e.g. Scrubs Direct" />}</Field>
|
||||
<button className="btn btn-secondary" disabled={!ns.trim()} onClick={async () => { const r = await mutate("supplier.add", { name: ns }); say("sup", r.ok ? "Added." : r.error); if (r.ok) setNs(""); }}>Add supplier</button>
|
||||
</div>
|
||||
)}
|
||||
<Note>Lead time auto-fills the expected delivery date on new orders; contact and account number print on purchase orders. Suppliers with products or orders can't be removed.</Note>
|
||||
<Msg text={msg.sup} />
|
||||
</>
|
||||
)}
|
||||
|
||||
{tab === "Sign-in" && (
|
||||
<>
|
||||
<H>Single sign-on</H>
|
||||
<SsoSettings isAdmin={isAdmin} demo={!!s.demo} sso={s.settings.sso} users={s.users} onChanged={() => router.refresh()} mutate={mutate} />
|
||||
</>
|
||||
)}
|
||||
|
||||
{tab === "Plan" && planShown && <PlanTab />}
|
||||
|
||||
{tab === "Account" && (
|
||||
<>
|
||||
<H>Account</H>
|
||||
<div style={{ fontSize: 13, marginTop: "var(--space-3)", lineHeight: 1.7 }}>Signed in as <b>{s.session.name}</b> ({s.session.role}, {s.session.email}).</div>
|
||||
|
||||
{/* Sits at the top of Account because it is the one setting on this page that protects
|
||||
every other one. */}
|
||||
<TwoFactor isAdmin={isAdmin} />
|
||||
<Note>Your name and title stamp every issue, stocktake and slip you record.</Note>
|
||||
<div className="tc-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: "var(--space-3)", marginTop: "var(--space-3)", maxWidth: 640 }}>
|
||||
<Field label="First name">{(c) => <input {...c} className="input" value={me.first} onChange={(e) => setMe({ ...me, first: e.target.value })} disabled={!!s.demo} />}</Field>
|
||||
<Field label="Last name">{(c) => <input {...c} className="input" value={me.last} onChange={(e) => setMe({ ...me, last: e.target.value })} disabled={!!s.demo} />}</Field>
|
||||
<Field label="Title">{(c) => <input {...c} className="input" value={me.title} onChange={(e) => setMe({ ...me, title: e.target.value })} placeholder="e.g. Uniform Coordinator" disabled={!!s.demo} />}</Field>
|
||||
</div>
|
||||
<div style={{ display: "flex", gap: "var(--space-2)", marginTop: "var(--space-3)", alignItems: "center", flexWrap: "wrap" }}>
|
||||
<button className="btn btn-secondary" disabled={!meDirty || !me.first.trim() || !me.last.trim()} onClick={async () => { const r = await mutate("me.profile", me); say("me", r.ok ? "Saved." : r.error); }}>Save my details</button>
|
||||
</div>
|
||||
<Msg text={msg.me} />
|
||||
<H>Password</H>
|
||||
<div className="tc-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: "var(--space-3)", marginTop: "var(--space-3)", maxWidth: 640 }}>
|
||||
<Field label="Current password">{(c) => <input {...c} className="input" type="password" autoComplete="current-password" value={pw.current} onChange={(e) => setPw({ ...pw, current: e.target.value })} />}</Field>
|
||||
<Field label="New password" hint="At least 8 characters.">{(c) => <input {...c} className="input" type="password" autoComplete="new-password" value={pw.next} onChange={(e) => setPw({ ...pw, next: e.target.value })} />}</Field>
|
||||
<Field label="Confirm" error={pw.again && pw.next !== pw.again ? "The two new passwords don\u2019t match." : undefined}>{(c) => <input {...c} className="input" type="password" autoComplete="new-password" value={pw.again} onChange={(e) => setPw({ ...pw, again: e.target.value })} />}</Field>
|
||||
</div>
|
||||
<div style={{ display: "flex", gap: "var(--space-2)", marginTop: "var(--space-3)", alignItems: "center", flexWrap: "wrap" }}>
|
||||
<button className="btn btn-secondary" disabled={!pw.current || pw.next.length < 8 || pw.next !== pw.again} onClick={async () => { const r = await mutate("me.password", { current: pw.current, next: pw.next }); say("pw", r.ok ? "Password changed." : r.error); if (r.ok) setPw({ current: "", next: "", again: "" }); }}>Change password</button>
|
||||
<button className="btn btn-ghost" onClick={signOut}>Sign out</button>
|
||||
</div>
|
||||
<Msg text={msg.pw} />
|
||||
{isAdmin && (
|
||||
<>
|
||||
<H>Users</H>
|
||||
<Note>People who can sign in to {s.settings.facility}. Passwords set here aren't emailed — hand them over yourself.</Note>
|
||||
{s.users.filter((u) => !u.inactive).map((u) => (
|
||||
<div key={u.id} style={{ display: "flex", alignItems: "center", gap: "var(--space-3)", padding: "var(--space-2) 0", borderBottom: "1px solid var(--color-divider)", fontSize: 13, flexWrap: "wrap" }}>
|
||||
<div style={{ flex: 1, minWidth: 200 }}><b>{u.first} {u.last}</b> <span style={{ color: "var(--color-neutral-700)" }}>{u.title}</span><div style={{ fontSize: 12, color: "var(--color-neutral-700)" }}>{u.email}</div></div>
|
||||
<span className={u.role === "ADMIN" ? "tag tag-accent" : "tag tag-neutral"}>{u.role === "ADMIN" ? "Admin" : "Issuer"}</span>
|
||||
<button className="btn btn-ghost" aria-label={`Edit ${u.first} ${u.last}`} onClick={() => setUserDlg(u)}>Edit</button>
|
||||
</div>
|
||||
))}
|
||||
<button className="btn btn-secondary" style={{ marginTop: "var(--space-3)" }} onClick={() => setUserDlg(null)}>Add user</button>
|
||||
{s.users.some((u) => u.inactive) && (
|
||||
<>
|
||||
<H>Deactivated users</H>
|
||||
<Note>Reactivate to let them sign in again.</Note>
|
||||
{s.users.filter((u) => u.inactive).map((u) => (
|
||||
<div key={u.id} style={{ display: "flex", alignItems: "center", gap: "var(--space-3)", padding: "var(--space-2) 0", borderBottom: "1px solid var(--color-divider)", fontSize: 13, flexWrap: "wrap", color: "var(--color-neutral-700)" }}>
|
||||
<div style={{ flex: 1, minWidth: 200 }}><b>{u.first} {u.last}</b> {u.title}<div style={{ fontSize: 12 }}>{u.email}</div></div>
|
||||
<span className="tag tag-outline">{u.role === "ADMIN" ? "Admin" : "Issuer"}</span>
|
||||
<button className="btn btn-ghost" aria-label={`Let ${u.first} ${u.last} sign in again`} onClick={async () => { const r = await mutate("users.update", { id: u.id, inactive: false }); say("users", r.ok ? `${u.first} reactivated.` : r.error); }}>Reactivate</button>
|
||||
</div>
|
||||
))}
|
||||
<Msg text={msg.users} />
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
<H>Delete my account</H>
|
||||
{(() => {
|
||||
// Whether this account leaving takes the facility with it decides what the warning has to say.
|
||||
// The user list is only in the snapshot for admins, and there is always at least one active
|
||||
// admin, so a non-admin is never the last person standing — say so rather than guess from an
|
||||
// empty list.
|
||||
const othersLeft = s.users.filter((u) => !u.inactive && u.id !== s.session.userId).length;
|
||||
const last = isAdmin && othersLeft === 0;
|
||||
return (
|
||||
<>
|
||||
<Note>
|
||||
{last
|
||||
? <>You are the only person who can sign in to <b>{s.settings.facility}</b>, so this deletes the facility and everything in it. It can't be undone.</>
|
||||
: <>This removes your login from <b>{s.settings.facility}</b>. The facility and its records stay.</>}
|
||||
</Note>
|
||||
{/* The same fetch as the Data tab's export rather than a plain link, for the same
|
||||
reason and with more riding on it: this is the last copy this facility will ever
|
||||
have, and whether some photos were left out of it is not something to find out
|
||||
after the delete. */}
|
||||
{last && <><Note><button disabled={bkBusy} onClick={exportBackup} style={{ background: "none", border: 0, padding: 0, font: "inherit", fontWeight: 700, color: "var(--color-accent-700)", textDecoration: "underline", textUnderlineOffset: 3, cursor: "pointer" }}>Download a backup first</button> — it can be restored into a new facility later.</Note><Msg text={msg.backup} /></>}
|
||||
{!del.open ? (
|
||||
<button className="btn btn-secondary" style={{ marginTop: "var(--space-3)", borderColor: "var(--color-accent)", color: "var(--color-accent-700)" }} onClick={() => setDel({ open: true, password: "", confirm: "", busy: false, err: "" })} disabled={!!s.demo}>
|
||||
Delete my account{last ? " and this facility" : ""}
|
||||
</button>
|
||||
) : (
|
||||
<div className="tc-flag" style={{ borderTop: "2px solid var(--color-text)", borderRight: "2px solid var(--color-text)", borderBottom: "2px solid var(--color-text)", padding: "var(--space-4)", marginTop: "var(--space-3)", maxWidth: 520 }}>
|
||||
<div style={{ fontWeight: 800, fontSize: 14, color: "var(--color-accent-700)" }}><span className="tc-mark" aria-hidden="true" />{last ? `Delete ${s.settings.facility} and everything in it?` : "Delete your login?"}</div>
|
||||
<Field label="Your password" style={{ marginTop: "var(--space-3)" }} error={del.err || undefined}>{(c) => <input {...c} className="input" type="password" autoComplete="current-password" value={del.password} onChange={(e) => setDel({ ...del, password: e.target.value, err: "" })} />}</Field>
|
||||
{last && <Field label="Type the facility name to confirm" style={{ marginTop: "var(--space-2)" }}>{(c) => <input {...c} className="input" value={del.confirm} placeholder={s.settings.facility} onChange={(e) => setDel({ ...del, confirm: e.target.value, err: "" })} />}</Field>}
|
||||
<div style={{ display: "flex", gap: "var(--space-2)", marginTop: "var(--space-3)" }}>
|
||||
<button className="btn btn-ghost" onClick={() => setDel({ open: false, password: "", confirm: "", busy: false, err: "" })}>Cancel</button>
|
||||
<button className="btn btn-primary" disabled={del.busy || !del.password || (last && del.confirm.trim() !== s.settings.facility)}
|
||||
onClick={async () => {
|
||||
setDel((d) => ({ ...d, busy: true, err: "" }));
|
||||
const r = await mutate("me.deleteAccount", { password: del.password, confirm: del.confirm });
|
||||
if (!r.ok) { setDel((d) => ({ ...d, busy: false, err: r.error })); return; }
|
||||
// The session now points at a row that is gone; drop the cookie rather than leave it.
|
||||
await fetch("/api/auth/logout", { method: "POST" });
|
||||
window.location.assign("/?deleted=1");
|
||||
}}>
|
||||
{del.busy ? "Deleting…" : last ? "Delete everything" : "Delete my login"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
})()}
|
||||
</>
|
||||
)}
|
||||
|
||||
{tab === "Data" && (
|
||||
<>
|
||||
<H>Data & backup</H>
|
||||
{/* What a backup would actually be carrying, in the same tiles the rest of the app counts
|
||||
things in — rather than a line of numbers run together, which is what this was. */}
|
||||
<div className="tc-tiles" style={{ marginTop: "var(--space-3)" }}>
|
||||
{[[s.staff.filter((x) => !x.inactive).length, "active staff"], [s.catalog.filter((x) => !x.archived).length, "catalogue items"], [s.issues.length, "issues"], [s.orders.length, "orders"], [s.stocktakes.length, "recent stocktakes"], [s.approvals.length, "manager's approvals"]].map(([n, l]) => (
|
||||
<div key={String(l)} className="tc-tile">
|
||||
<span className="tc-figure">{n}</span>
|
||||
<span className="tc-tile-label">{l}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{/* Overdue is marked, not merely reddened: the Export backup button a few lines down is
|
||||
the same red, and the whole point of this line is to be noticed before somebody scrolls
|
||||
past it. */}
|
||||
<div className={bkStale ? "tc-flag" : undefined} style={{ fontSize: 13, marginTop: "var(--space-4)", fontWeight: bkStale ? 700 : 600, paddingLeft: bkStale ? "var(--space-3)" : 0, color: bkStale ? "var(--color-accent-700)" : "var(--color-text)" }}>
|
||||
{bkStale && <span className="tc-mark" aria-hidden="true" />}
|
||||
{lastBk ? `Last backup: ${fmtDate(lastBk)}${bkDays ? ` (${bkDays} day${bkDays === 1 ? "" : "s"} ago)` : " (today)"}` : "No backup taken yet."}
|
||||
</div>
|
||||
<Note>Export saves everything in this facility to one file; importing a backup replaces this facility's data.</Note>
|
||||
{isAdmin && (
|
||||
<div style={{ display: "flex", gap: "var(--space-2)", alignItems: "center", marginTop: "var(--space-3)", flexWrap: "wrap" }}>
|
||||
<button className="btn btn-secondary" disabled={bkBusy} onClick={exportBackup}>{bkBusy ? "Preparing…" : "Export backup"}</button>
|
||||
<label className="btn btn-ghost" style={{ cursor: "pointer" }}>Import backup<input type="file" accept="application/json,.json" aria-label="Choose a ThreadCount backup file to restore" style={{ display: "none" }} onChange={(e) => { const f = e.target.files?.[0]; if (f) restore(f); e.target.value = ""; }} /></label>
|
||||
</div>
|
||||
)}
|
||||
<Msg text={msg.backup} />
|
||||
{isAdmin && (
|
||||
<>
|
||||
<H>Barcode product lookup</H>
|
||||
<Note>Only the barcode number is sent, and most uniform barcodes aren't publicly listed.</Note>
|
||||
<label style={{ display: "flex", gap: "var(--space-2)", alignItems: "center", marginTop: "var(--space-3)", fontSize: 13, cursor: "pointer" }}>
|
||||
<input type="checkbox" style={{ width: 16, height: 16, accentColor: "var(--color-accent)" }} checked={lookupOn ?? s.settings.barcodeLookup}
|
||||
onChange={async (e) => { const v = e.target.checked; setLookupOn(v); const r = await mutate("settings.update", { barcodeLookup: v }); if (!r.ok) setLookupOn(!v); say("lookup", r.ok ? (v ? "Lookup on — unknown barcodes are checked against the public databases." : "Lookup off — nothing leaves the server.") : r.error); }} />
|
||||
Look up unknown barcodes in public databases
|
||||
</label>
|
||||
<Msg text={msg.lookup} />
|
||||
<H>Import from CSV</H>
|
||||
<Note>Download a template, fill it in, save it as CSV and import it; re-importing updates matching rows.</Note>
|
||||
<div style={{ display: "flex", gap: "var(--space-2)", alignItems: "center", marginTop: "var(--space-3)", flexWrap: "wrap" }}>
|
||||
<select className="input" aria-label="What kind of CSV to import" value={impKind} onChange={(e) => setImpKind(e.target.value)}>{Object.entries(CSV_TEMPLATES).map(([k, t]) => <option key={k} value={k}>{t.name}</option>)}</select>
|
||||
<button className="btn btn-ghost" onClick={() => template(impKind)}>Download template</button>
|
||||
<label className="btn btn-primary" style={{ cursor: impBusy ? "wait" : "pointer" }}>Import CSV<input type="file" accept=".csv,text/csv" aria-label="Choose a CSV file to import" style={{ display: "none" }} disabled={impBusy} onChange={(e) => { const f = e.target.files?.[0]; if (f) void importFile(f); e.target.value = ""; }} /></label>
|
||||
</div>
|
||||
<Msg text={msg.import} />
|
||||
<div style={{ marginTop: "var(--space-8)", border: "2px solid var(--color-divider)", padding: "var(--space-4)" }}>
|
||||
<div style={{ fontWeight: 700, fontSize: 13 }}>Wipe recorded activity</div>
|
||||
<div style={{ fontSize: 12, color: "var(--color-neutral-700)", margin: "var(--space-2) 0" }}>Removes all recorded activity, staff-app requests and the ward notice included; keeps the catalogue, staff, departments, suppliers, barcodes and opening balances. Type WIPE to confirm.</div>
|
||||
<div style={{ display: "flex", gap: "var(--space-2)", alignItems: "center" }}>
|
||||
<input className="input" style={{ width: 120 }} aria-label="Type WIPE to confirm wiping recorded activity" value={wipe} onChange={(e) => setWipe(e.target.value)} placeholder="WIPE" />
|
||||
<button className="btn btn-secondary" disabled={wipe !== "WIPE"} onClick={async () => { const r = await mutate("data.wipeActivity", { confirm: wipe }); say("wipe", r.ok ? "Activity wiped." : r.error); setWipe(""); }}>Wipe activity</button>
|
||||
</div>
|
||||
<Msg text={msg.wipe} />
|
||||
</div>
|
||||
{/* The one irreversible thing on this page. A red outline is not enough on its own —
|
||||
the Import CSV button above it is the same red — so it takes the left rule and the
|
||||
mark as well. */}
|
||||
<div className="tc-flag" style={{ marginTop: "var(--space-4)", borderTop: "2px solid var(--color-text)", borderRight: "2px solid var(--color-text)", borderBottom: "2px solid var(--color-text)", padding: "var(--space-4)" }}>
|
||||
<div style={{ fontWeight: 800, fontSize: 13, color: "var(--color-accent-700)" }}><span className="tc-mark" aria-hidden="true" />Start fresh</div>
|
||||
<div style={{ fontSize: 12, color: "var(--color-neutral-700)", margin: "var(--space-2) 0" }}>Empties this facility completely; your logins, facility name and settings stay. <b>Export a backup first</b> — this can't be undone. Type RESET to confirm.</div>
|
||||
<div style={{ display: "flex", gap: "var(--space-2)", alignItems: "center", flexWrap: "wrap" }}>
|
||||
<input className="input" style={{ width: 120 }} aria-label="Type RESET to confirm emptying this facility" value={reset} onChange={(e) => setReset(e.target.value)} placeholder="RESET" />
|
||||
<button className="btn btn-primary" disabled={reset !== "RESET" || resetBusy} onClick={async () => {
|
||||
if (!confirm("Delete everything in this facility and start fresh? Logins stay; all data goes.")) return;
|
||||
setResetBusy(true);
|
||||
const r = await mutate("data.reset", { confirm: reset });
|
||||
setResetBusy(false);
|
||||
say("reset", r.ok ? "Facility emptied — you’re starting fresh." : r.error);
|
||||
setReset("");
|
||||
}}>{resetBusy ? "Emptying…" : "Empty this facility"}</button>
|
||||
</div>
|
||||
<Msg text={msg.reset} />
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
{userDlg !== false && <UserDialog user={userDlg} onClose={() => setUserDlg(false)} />}
|
||||
{renaming !== null && <RenameGroupDialog from={renaming} onClose={() => setRenaming(null)} onDone={(m) => { setRenaming(null); say("groups", m); }} />}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
/* A staff group renamed everywhere its name is held — the list, its route, and every staff record
|
||||
filed under it — in one go, by settings.renameGroup. Its own step rather than typing over the name
|
||||
in the row, because the routes are lists of names: a name edited and saved as one group removed and
|
||||
another added would take the group off its route, and a team's first kit would change because a
|
||||
label was tidied up. Being a dialog also means nothing else on the page can be pressed while the
|
||||
rename is on its way, and be worked out from lists that still carry the old name. */
|
||||
function RenameGroupDialog({ from, onClose, onDone }: { from: string; onClose: () => void; onDone: (msg: string) => void }) {
|
||||
const { mutate } = useSnap();
|
||||
const [to, setTo] = useState(from);
|
||||
const [err, setErr] = useState("");
|
||||
const [saving, setSaving] = useState(false);
|
||||
const name = to.trim();
|
||||
const unchanged = name === from;
|
||||
async function save() {
|
||||
if (!name || unchanged || saving) return;
|
||||
setSaving(true);
|
||||
const r = await mutate<{ staff: number }>("settings.renameGroup", { from, to: name });
|
||||
setSaving(false);
|
||||
// A name already in use is the server's to refuse — it also knows the names only staff records
|
||||
// carry — so its words go under the box rather than being second-guessed here.
|
||||
if (!r.ok) { setErr(r.error); return; }
|
||||
const n = r.result.staff;
|
||||
onDone(`${from} is now ${name}, on the same route as before.${n ? ` ${n} staff record${n === 1 ? "" : "s"} moved with it.` : ""}`);
|
||||
}
|
||||
return (
|
||||
<Dialog title={`Rename ${from}`} width={460} onClose={onClose}>
|
||||
<div style={{ fontSize: 13, lineHeight: 1.6, marginTop: "var(--space-3)" }}>Everybody filed under {from} moves to the new name and keeps the same route.</div>
|
||||
<Field label="New name" style={{ marginTop: "var(--space-3)" }}>{(c) => <input {...c} className="input" autoFocus maxLength={80} value={to} onChange={(e) => { setTo(e.target.value); setErr(""); }} onKeyDown={(e) => { if (e.key === "Enter") void save(); }} />}</Field>
|
||||
<ErrorLine msg={err} />
|
||||
<div style={{ display: "flex", justifyContent: "flex-end", gap: "var(--space-2)", marginTop: "var(--space-4)" }}>
|
||||
<button className="btn btn-ghost" onClick={onClose}>Cancel</button>
|
||||
<button className="btn btn-primary" onClick={() => void save()} disabled={!name || unchanged || saving}>{saving ? "Renaming…" : "Rename"}</button>
|
||||
</div>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
function UserDialog({ user, onClose }: { user: UserRec | null; onClose: () => void }) {
|
||||
const { s, mutate } = useSnap();
|
||||
const [f, setF] = useState({ first: user?.first || "", last: user?.last || "", title: user?.title || "", email: user?.email || "", role: user?.role || "ISSUER", password: "" });
|
||||
const [err, setErr] = useState("");
|
||||
const invalid = !f.first.trim() || !f.last.trim() || (!user && (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(f.email) || f.password.length < 8)) || (!!user && f.password !== "" && f.password.length < 8);
|
||||
async function save() {
|
||||
if (invalid) return;
|
||||
const r = user ? await mutate("users.update", { id: user.id, first: f.first, last: f.last, title: f.title, role: f.role, password: f.password }) : await mutate("users.add", f);
|
||||
if (!r.ok) { setErr(r.error); return; }
|
||||
onClose();
|
||||
}
|
||||
async function remove() {
|
||||
if (!user || !confirm(`Deactivate ${user.first} ${user.last}'s login? They can be reactivated later.`)) return;
|
||||
const r = await mutate("users.remove", { id: user.id });
|
||||
if (!r.ok) { setErr(r.error); return; }
|
||||
onClose();
|
||||
}
|
||||
return (
|
||||
<Dialog title={user ? "Edit user" : "Add user"} width={520} onClose={onClose}>
|
||||
<div className="tc-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "var(--space-3)", marginTop: "var(--space-4)" }}>
|
||||
<Field label="First name">{(c) => <input {...c} className="input" value={f.first} onChange={(e) => setF({ ...f, first: e.target.value })} />}</Field>
|
||||
<Field label="Last name">{(c) => <input {...c} className="input" value={f.last} onChange={(e) => setF({ ...f, last: e.target.value })} />}</Field>
|
||||
<Field label="Title">{(c) => <input {...c} className="input" value={f.title} onChange={(e) => setF({ ...f, title: e.target.value })} placeholder="e.g. Linen Room Assistant" />}</Field>
|
||||
<Field label="Role">{(c) => <select {...c} className="input" value={f.role} onChange={(e) => setF({ ...f, role: e.target.value as "ADMIN" | "ISSUER" })}><option value="ISSUER">Issuer</option><option value="ADMIN">Admin</option></select>}</Field>
|
||||
<Field label="Work email" style={{ gridColumn: "1 / -1" }} hint={user ? "Can\u2019t be changed." : undefined}>{(c) => <input {...c} className="input" type="email" value={f.email} onChange={(e) => setF({ ...f, email: e.target.value })} disabled={!!user} />}</Field>
|
||||
<Field label={user ? "New password (leave blank to keep)" : "Password"} style={{ gridColumn: "1 / -1" }} hint="At least 8 characters.">{(c) => <input {...c} className="input" type="password" autoComplete="new-password" value={f.password} onChange={(e) => setF({ ...f, password: e.target.value })} />}</Field>
|
||||
</div>
|
||||
<ErrorLine msg={err} />
|
||||
<div style={{ display: "flex", justifyContent: "space-between", gap: "var(--space-2)", marginTop: "var(--space-4)" }}>
|
||||
<div>{user && user.id !== s.session.userId && <button className="btn btn-ghost" onClick={remove}>Remove</button>}</div>
|
||||
<div style={{ display: "flex", gap: "var(--space-2)" }}><button className="btn btn-ghost" onClick={onClose}>Cancel</button><button className="btn btn-primary" onClick={save} disabled={invalid}>Save</button></div>
|
||||
</div>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,417 @@
|
||||
"use client";
|
||||
import Link from "next/link";
|
||||
import { useCallback, useMemo, useState } from "react";
|
||||
import { useSnap } from "@/lib/client";
|
||||
import { PageHead, Empty, th } from "@/components/ui";
|
||||
import { StaffDialog } from "@/components/dialogs";
|
||||
import { capState, ccFor, ccOf, csvOf, heldByStaff, isNursing, setsCap, slipLive, staffName, type CapState, type GarmentCounts, type Snapshot, type StaffRec } from "@/lib/compute";
|
||||
import { downloadCsv } from "@/lib/print";
|
||||
|
||||
/* The register as this screen reads it: the snapshot, and the same staff indexed by id.
|
||||
*
|
||||
* The index is the point. Every gap is asked of every row, and the approver gap used to search the
|
||||
* register from the top for each one — every row against every staff member, redone on each
|
||||
* keystroke in the search box. Registers arrive here twenty thousand rows deep off the importer,
|
||||
* and at that size the search box stops taking typing. */
|
||||
type Reg = { s: Snapshot; byId: Record<string, StaffRec> };
|
||||
|
||||
/** Who the register currently holds as their approver. Undefined when the field was never set, and
|
||||
* undefined again when it points at somebody who has since been taken off the register altogether. */
|
||||
const approverOf = (r: Reg, st: StaffRec) => (st.managerId ? r.byId[st.managerId] : undefined);
|
||||
|
||||
/** Somebody with nothing out. heldByStaff only lists people holding something, and a blank row and a
|
||||
* row of noughts have to read the same way. */
|
||||
const NOTHING: GarmentCounts = { tops: 0, pants: 0, other: 0, sets: 0 };
|
||||
|
||||
/** What somebody is holding, in the halves the ceiling is counted in. Six tops and two pairs is two
|
||||
* sets by any count and still no room for a seventh top, so the halves are what a coordinator has
|
||||
* to be able to see. Anything that is no part of a set — a fleece, maternity wear — is left to the
|
||||
* caller to name as what it is, because it has a ceiling of its own, and a row past that one has
|
||||
* to be able to say so without the tops and pairs taking the blame. */
|
||||
const halves = (c: CapState) =>
|
||||
`${c.tops} ${c.tops === 1 ? "top" : "tops"} · ${c.pants} ${c.pants === 1 ? "pair" : "pairs"}`;
|
||||
|
||||
/** Where this person stands against the ceiling, in the word the tag shows.
|
||||
*
|
||||
* AT LIMIT is a full half rather than a full six sets: somebody holding six tops and two pairs
|
||||
* takes no more tops, and reading their four spare pairs as room would have a coordinator promise
|
||||
* a top the counter then turns down. OVER is the counter's own answer — they hold more than one
|
||||
* person holds, which happens on an override or on a record that predates the ceiling. */
|
||||
const holdState = (c: CapState): "OVER" | "AT LIMIT" | "OK" =>
|
||||
c.over ? "OVER" : c.tops >= c.cap || c.pants >= c.cap || c.other >= c.otherCap ? "AT LIMIT" : "OK";
|
||||
|
||||
/** The sentence behind the tag. Inside the ceiling it is capState's own — the same words the counter
|
||||
* uses, so the two screens cannot drift into quoting different figures at the same person. Past it,
|
||||
* capState writes for a hand-over that is about to happen, and nothing is about to happen on a
|
||||
* register row, so the row says what is true of the locker instead.
|
||||
*
|
||||
* It names the ceiling they are actually past. There are two — six sets, and six garments that are
|
||||
* no part of a set — and somebody holding seven fleeces and no uniform at all was told they were
|
||||
* past the six sets, which a coordinator checking the locker would find plainly untrue. Both are
|
||||
* named when both are breached, because handing in a top fixes only one of them. */
|
||||
const holdWhy = (c: CapState) => {
|
||||
if (!c.over) return c.note;
|
||||
const past = [
|
||||
...(c.overTops || c.overPants ? [`${c.tops} ${c.tops === 1 ? "top" : "tops"} and ${c.pants} ${c.pants === 1 ? "pair" : "pairs"}, past the ${c.cap}-set ceiling`] : []),
|
||||
...(c.overOther ? [`${c.other} ${c.other === 1 ? "garment" : "garments"} outside a set, past the ${c.otherCap} allowed`] : []),
|
||||
];
|
||||
return `Holding ${past.join("; and ")}.`;
|
||||
};
|
||||
|
||||
/** A code is outstanding and would still be accepted at activation. The age test is slipLive(), the
|
||||
* one the activation route itself asks, so a slip this register counts as done is never one the
|
||||
* nurse is then turned away with. */
|
||||
const liveSlip = (s: Snapshot, st: StaffRec) => !!st.selfCode && slipLive(st.selfCodeAt, s.today, s.tz);
|
||||
|
||||
/* What a record is still missing before the product can do its job for the person on it.
|
||||
*
|
||||
* Each of these is something that is broken until somebody sets it, not a field that merely happens
|
||||
* to be blank — and none of them showed anywhere on a list before, so the only way to find the
|
||||
* forty people with no approver on a register of a couple of hundred was to open all of them. That
|
||||
* is why they are counted, filtered and exported rather than just marked: a coordinator works
|
||||
* through one of these lists until it is empty, and a badge on a row nobody can filter to is no
|
||||
* help at all.
|
||||
*
|
||||
* `required` says whether somebody has to set it at all. An approver, a nursing FTE and a pair of
|
||||
* sizes do: without them nobody can raise a request, the table proposes no kit, and nothing can be
|
||||
* picked before the person is standing at the counter. A staff-app account does not — it is
|
||||
* something a coordinator offers somebody, and plenty of the register will never want one. Counting
|
||||
* the offer alongside the three made a single queue that could never reach nought, and a queue that
|
||||
* never empties is a queue nobody works.
|
||||
*
|
||||
* Inactive staff have no gaps. They are off the register, nobody is going to issue to them or hand
|
||||
* them a code, and putting them in the queue would mean a list that never empties.
|
||||
*
|
||||
* `done` is what an empty list of one of the offered things says. The required three share one
|
||||
* sentence — the job is finished — but an offer is finished in its own words, and "everyone has it
|
||||
* or has been offered it" is a sentence about a staff-app account that says nothing true about a
|
||||
* cut of uniform. */
|
||||
type GapKey = "manager" | "fte" | "sizes" | "app" | "style";
|
||||
const GAPS: { key: GapKey; short: string; filter: string; noun: string; why: string; required: boolean; done?: string; missing: (r: Reg, st: StaffRec) => boolean }[] = [
|
||||
// A manager who has left the register is the same thing as no manager at all: a request addressed
|
||||
// to one is refused outright, because somebody off the register cannot sign in to approve
|
||||
// anything. Reading the field alone let a ward whose nurse unit manager had gone read as finished
|
||||
// while not one of them could raise a thing.
|
||||
{ key: "manager", short: "Approver", filter: "No approver", noun: "no approver", required: true, why: "No approver on the register, so they can't raise a request.", missing: (r, st) => { const mgr = approverOf(r, st); return !mgr || mgr.inactive; } },
|
||||
// Nursing only: the FTE table decides a nurse's initial kit and nothing else in the product reads
|
||||
// the figure, so flagging two hundred operational staff for a blank one would bury the nurses who
|
||||
// genuinely cannot be issued anything.
|
||||
{ key: "fte", short: "FTE", filter: "No FTE", noun: "no FTE", required: true, why: "No FTE, so no initial kit is proposed.", missing: (r, st) => isNursing(r.s, st) && !st.fte.trim() },
|
||||
{ key: "sizes", short: "Sizes", filter: "No sizes", noun: "no sizes", required: true, why: "No top or pants size recorded.", missing: (r, st) => !st.top.trim() || !st.pants.trim() },
|
||||
// A code that still works is work already done — the slip is printed and waiting to be used —
|
||||
// so it is not a gap. One printed two months ago is: it will be turned away, leaving the person
|
||||
// exactly where they started, and reading it as finished drops them off the only list that would
|
||||
// have found them.
|
||||
{ key: "app", short: "Staff app", filter: "No staff app", noun: "no staff app", required: false, why: "Optional — no account, and no code that still works.", done: "Nobody is waiting on that — everyone on the register has an account or has been offered one.", missing: (r, st) => !st.selfEmail && !liveSlip(r.s, st) },
|
||||
// Blank is not a broken record: it is what every record on the register reads as today, and it
|
||||
// offers every cut exactly as Either does. So it is listed among the things that are offered
|
||||
// rather than owed — nothing is stopped while it stays blank, and a coordinator who never sets
|
||||
// one has finished their work. It is here at all because blank and Either are kept apart in
|
||||
// storage for exactly this: to be able to ask who nobody has said anything about yet.
|
||||
{ key: "style", short: "Uniform style", filter: "No uniform style", noun: "no uniform style", required: false, why: "Optional — nobody has set a cut, so they are offered every style.", done: "Nobody is waiting on that — every record has a uniform style set.", missing: (r, st) => !st.uniformStyle.trim() },
|
||||
];
|
||||
const REQUIRED = GAPS.filter((g) => g.required);
|
||||
const OPTIONAL = GAPS.filter((g) => !g.required);
|
||||
|
||||
export default function StaffPage() {
|
||||
const { s, isAdmin } = useSnap();
|
||||
const [add, setAdd] = useState(false);
|
||||
const [q, setQ] = useState("");
|
||||
const [group, setGroup] = useState("All");
|
||||
const [showInactive, setShowInactive] = useState(false);
|
||||
const [gap, setGap] = useState<"All" | "any" | GapKey>("All");
|
||||
/* Built once a snapshot, and everything that asks a gap asks it through this — the counts, the
|
||||
filter, the rows and the file. See Reg. */
|
||||
const reg = useMemo<Reg>(() => { const byId: Record<string, StaffRec> = {}; for (const st of s.staff) byId[st.id] = st; return { s, byId }; }, [s]);
|
||||
/** What this person is still missing, in the order the register lists it. Empty for anybody
|
||||
* inactive — see GAPS. */
|
||||
const gapsOf = useCallback((st: StaffRec) => (st.inactive ? [] : GAPS.filter((g) => g.missing(reg, st))), [reg]);
|
||||
const rows = useMemo(() => {
|
||||
const ql = q.trim().toLowerCase();
|
||||
const wanted = (st: StaffRec) => gap === "All" || (gap === "any" ? !st.inactive && REQUIRED.some((g) => g.missing(reg, st)) : !st.inactive && GAPS.find((g) => g.key === gap)!.missing(reg, st));
|
||||
return reg.s.staff.filter((st) => (showInactive || !st.inactive) && (group === "All" || st.group === group) && wanted(st) && (!ql || `${st.first} ${st.last}`.toLowerCase().includes(ql) || st.num.toLowerCase().includes(ql) || st.dept.toLowerCase().includes(ql)));
|
||||
}, [reg, q, group, showInactive, gap]);
|
||||
const groups = ["All", ...new Set(s.staff.map((st) => st.group).filter(Boolean))];
|
||||
const nInactive = s.staff.filter((st) => st.inactive).length;
|
||||
const nActive = s.staff.length - nInactive;
|
||||
const nDesk = s.staff.filter((st) => !st.inactive && st.wardDesk).length;
|
||||
const narrowed = q.trim() !== "" || group !== "All" || gap !== "All";
|
||||
const shownInactive = rows.filter((st) => st.inactive).length;
|
||||
/* The one gap the filter is pointed at, or nothing when it is pointed at everybody or at the whole
|
||||
required queue. What is said to somebody who has worked a list down to nothing depends on
|
||||
whether the list was work or an offer. */
|
||||
const gapSel = gap === "All" || gap === "any" ? null : GAPS.find((g) => g.key === gap)!;
|
||||
/* Counted over the whole active register, like the ceiling figure below and for the same reason:
|
||||
these are queues of work for the coordinator, and narrowing to one ward must not make the
|
||||
hospital's forty missing approvers read as three. The panel head says how many rows are on
|
||||
screen, so the two numbers never claim to be the same thing. */
|
||||
const gapCount = useMemo(() => {
|
||||
// `any` counts only what somebody has to set. A person who has simply never been offered the
|
||||
// staff app is not a record anybody has to finish, and counting them kept the queue full.
|
||||
const counts = { any: 0 } as Record<GapKey | "any", number>;
|
||||
for (const g of GAPS) counts[g.key] = 0;
|
||||
for (const st of reg.s.staff) {
|
||||
if (st.inactive) continue;
|
||||
let some = false;
|
||||
for (const g of GAPS) if (g.missing(reg, st)) { counts[g.key]++; if (g.required) some = true; }
|
||||
if (some) counts.any++;
|
||||
}
|
||||
return counts;
|
||||
}, [reg]);
|
||||
const gapBreakdown = REQUIRED.filter((g) => gapCount[g.key] > 0).map((g) => `${gapCount[g.key]} with ${g.noun}`).join(" · ");
|
||||
const optionalBreakdown = OPTIONAL.filter((g) => gapCount[g.key] > 0).map((g) => `${gapCount[g.key]} with ${g.noun}`).join(" · ");
|
||||
/* What everybody holds, worked out once for the whole register — what they have out, and what is
|
||||
on order for them or waiting at the counter, which the counter counts as theirs too. This is what
|
||||
the screen is now about: the ceiling is on what a person is holding — six sets, at any time, every
|
||||
group — so a row is read against their locker rather than against anything they drew in
|
||||
July. One walk of the issues instead of one per person, because asked a row at a time it is the
|
||||
facility's whole issue history re-read for every name on the register. */
|
||||
const held = useMemo(() => heldByStaff(s), [s]);
|
||||
const capSets = setsCap(s.settings.capSets);
|
||||
/* Where somebody stands against that ceiling, asked of the same function the counter asks and with
|
||||
nothing in their hands: no hand-over is happening on a register row, so the answer is about what
|
||||
is in the locker. Anybody past the ceiling got there on a coordinator's override, and they are
|
||||
the rows this screen exists to surface. */
|
||||
const holdingOf = useCallback((st: StaffRec) => capState({ held: held[st.id] || NOTHING, capSets: s.settings.capSets }), [held, s.settings.capSets]);
|
||||
/* Counted over the whole active register, not over the rows on screen. It is the figure somebody
|
||||
opens this page to check, and narrowing the search to one ward must not make the hospital's
|
||||
count read as nought. */
|
||||
const nOver = useMemo(() => s.staff.filter((st) => !st.inactive && holdingOf(st).over).length, [s, holdingOf]);
|
||||
/* The file is the rows on screen, search and filter and all — somebody who has narrowed to one
|
||||
ward and hits Export means that ward, not the whole hospital. It is also written to go back in:
|
||||
the headers are the staff import template's, so a register can be sent to a ward manager, come
|
||||
back with the sizes corrected, and be imported in Settings → Data without anyone retyping it.
|
||||
That is why there is no title line above the headers the way the stocktake and order exports
|
||||
have one — the importer reads row one as the header row, and a preamble would make every file
|
||||
this button produces unreadable to it.
|
||||
|
||||
Cost centre goes out as two columns where the screen shows one. The screen shows the code an
|
||||
issue is charged to: the person's override if they have one, else their ward's. The template's
|
||||
cc column means something narrower — it is the code a ward is created with — so folding one
|
||||
person's override into it would stamp their whole ward with it on the next import, and every
|
||||
issue on that ward would report against the wrong cost centre from then on.
|
||||
|
||||
Notes and start dates are left out. Notes carry remarks about a person — light duties, a
|
||||
grievance — and this file is the one thing on the register that gets emailed to a ward; neither
|
||||
is on this screen, and the screen is the limit of what Export hands over. Dropping a column is
|
||||
safe for the round trip: the importer only writes the columns a row actually provides, so an
|
||||
edited register coming back leaves notes and start dates exactly as they were.
|
||||
|
||||
The approver does go out now, as the manager's staff number under the header the importer
|
||||
reads. Nobody is going to set two hundred of them one dropdown at a time — the way it gets done
|
||||
is to send a ward its own people, have the manager fill that column in a spreadsheet and import
|
||||
it back, and the Missing column beside it says who still needs one. Their name goes out too,
|
||||
under a header the importer has no alias for, because a payroll number on its own tells a ward
|
||||
manager nothing about whether it is the right person. A blank manager cell coming back changes
|
||||
nothing, so a file edited by somebody who ignored the column is harmless.
|
||||
|
||||
Those two columns say in their own headers which is which, because filling a ward's approvers
|
||||
in is now the whole reason the file gets sent anywhere, and a name typed into the column that
|
||||
wants a staff number is the mistake to expect rather than an unlikely slip. "Manager number"
|
||||
asks for the number and is the one the importer reads; "Approver name (reference only)" is
|
||||
there to check the number against and is ignored coming back. Neither header is free text —
|
||||
the importer matches on the letters and digits alone, so "Manager number" has to stay one of
|
||||
the spellings it knows and the other has to stay clear of all of them. */
|
||||
function exportCsv() {
|
||||
// Two of these carry a different fact from the column of the same name on the screen, so they
|
||||
// are named apart rather than left to collide. "Department cost centre" is the ward's own code,
|
||||
// which is what the import template means by cc; "Cost centre in use" is what the screen shows
|
||||
// and what an issue is actually charged to. "Register status" is on or off the register;
|
||||
// "Holding status" is the ceiling tag the screen calls Status. The export-only columns,
|
||||
// "Approver name (reference only)" among them, normalise to keys the importer has no alias for,
|
||||
// so they are ignored coming back.
|
||||
// FTE is in the file because the register is loaded and corrected through it: the importer has
|
||||
// always read the column, and a round trip that dropped it was quietly answering "no initial
|
||||
// kit" for every nurse whose figure a ward manager had just written in.
|
||||
// "Entitlement" is that person's own yearly figure and nothing more — the reports measure a
|
||||
// year's drawing against it, and a blank one means the facility's. It keeps its bare header
|
||||
// because that is the one the importer reads, so a figure corrected in a spreadsheet comes
|
||||
// back. What the counter will and won't hand over is the five columns after it: sets, tops,
|
||||
// pairs and garments outside a set held now, against the ceiling one person holds. Outside a set
|
||||
// is there because it has a ceiling of its own: without it, somebody past that one went out as
|
||||
// nought sets, nought tops, nought pairs and OVER, which no ward manager can make sense of. The year's running tally is a reports
|
||||
// question and is printed there — this file's job is who holds what and whose record needs
|
||||
// work.
|
||||
// The cut of uniform goes out beside the FTE, under a header the importer reads — it strips
|
||||
// everything but the letters and digits, so "Uniform style" reaches it as one of the column
|
||||
// names it knows. A whole register's worth of these is set the same way the approvers are:
|
||||
// send the ward its own people, have the column filled in a spreadsheet and import it back.
|
||||
// Blank goes out blank, which is the one answer that stays safe on the round trip: a blank
|
||||
// cell keeps whatever is on the record, so a file edited by somebody who ignored the column
|
||||
// sets nobody's style to anything.
|
||||
const cols = ["Staff no.", "First name", "Last name", "Phone", "Group", "Department", "Department cost centre", "Cost centre override", "Cost centre in use", "Top", "Pants", "FTE", "Uniform style", "Manager number", "Approver name (reference only)", "Ward desk", "Entitlement", "Sets held", "Tops held", "Pairs held", "Outside a set held", "Ceiling (sets)", "Holding status", "Register status", "Missing"];
|
||||
downloadCsv(`threadcount-staff-${s.today}.csv`, csvOf(cols, rows.map((st) => {
|
||||
const c = holdingOf(st);
|
||||
// A recorded approver who has left says so beside their name. The number still goes out, so
|
||||
// the round trip keeps it, but the Missing column flags the row — and without a word here a
|
||||
// ward manager reads a name in the file, sees nothing wrong, and sends it back untouched.
|
||||
const mgr = approverOf(reg, st);
|
||||
// Only what has to be set goes in the Missing column. This file is sent to a ward manager to
|
||||
// fill the approver column in, and a staff-app account is linen-room business — there is no
|
||||
// column here for it, nothing a manager can do about it, and the importer has never heard of
|
||||
// the idea. Listed beside the sizes it had wards ringing about work that was never theirs. It
|
||||
// is still on the screen, and still has its own filter.
|
||||
return [st.num, st.first, st.last, st.phone, st.group, st.dept, ccFor(s, st.dept), st.ccOverride, ccOf(s, st), st.top, st.pants, st.fte, st.uniformStyle, mgr?.num ?? "", mgr?.inactive ? `${staffName(mgr)} — no longer on the register` : staffName(mgr), st.wardDesk ? "Yes" : "No", st.ent ?? "", c.sets, c.tops, c.pants, c.other, c.cap, st.inactive ? "Inactive" : holdState(c), gapsOf(st).filter((g) => g.required).map((g) => g.short).join(", ")];
|
||||
})));
|
||||
}
|
||||
return (
|
||||
<section>
|
||||
<PageHead eyebrow="People" title="Staff Register">
|
||||
<input className="input" style={{ width: 220 }} aria-label="Search the register by name, number or ward" placeholder="Search name, number, ward" value={q} onChange={(e) => setQ(e.target.value)} />
|
||||
<select className="input" aria-label="Staff group" value={group} onChange={(e) => setGroup(e.target.value)}>{groups.map((g) => <option key={g}>{g}</option>)}</select>
|
||||
{/* The queue, picked by what is missing rather than by who. The counts stay in the list
|
||||
when they reach nought instead of the option disappearing, because a coordinator working
|
||||
through one of these needs to see it empty — that is the moment the job is finished, and
|
||||
an option that vanishes at the end looks like the filter broke.
|
||||
|
||||
Grouped, because the two halves are different jobs: the top of the list is work that has
|
||||
to be done before those people can use the product at all, and the bottom is an offer
|
||||
that is nobody's fault for being outstanding. Loose in one list, the staff-app figure
|
||||
read as a backlog. */}
|
||||
<select className="input" aria-label="Show only records that are missing something" value={gap} onChange={(e) => setGap(e.target.value as typeof gap)}>
|
||||
<option value="All">Everyone</option>
|
||||
<optgroup label="Has to be set">
|
||||
<option value="any">Missing something ({gapCount.any})</option>
|
||||
{REQUIRED.map((g) => <option key={g.key} value={g.key}>{g.filter} ({gapCount[g.key]})</option>)}
|
||||
</optgroup>
|
||||
{OPTIONAL.length > 0 && (
|
||||
<optgroup label="Optional">
|
||||
{OPTIONAL.map((g) => <option key={g.key} value={g.key}>{g.filter} ({gapCount[g.key]})</option>)}
|
||||
</optgroup>
|
||||
)}
|
||||
</select>
|
||||
{nInactive > 0 && <label style={{ fontSize: 12, display: "flex", gap: 4, alignItems: "center", cursor: "pointer" }}><input type="checkbox" checked={showInactive} onChange={(e) => setShowInactive(e.target.checked)} />Show inactive ({nInactive})</label>}
|
||||
<button className="btn btn-ghost" onClick={exportCsv} disabled={rows.length === 0} title="Downloads the rows shown, search and filter applied.">{narrowed ? `Export CSV (${rows.length} shown)` : "Export CSV"}</button>
|
||||
{isAdmin && <button className="btn btn-primary" onClick={() => setAdd(true)}>Add staff member</button>}
|
||||
</PageHead>
|
||||
{/* The four facts the register is opened for, before anybody reads a row: how many people are
|
||||
on it, who can sign for a ward bag at the other end of the round, who is holding more than
|
||||
one person holds, and how much of the register is still half-filled-in. Only the ceiling
|
||||
figure is marked as well as coloured — the accent is already the brand, and a
|
||||
second red a metre away across the room is a guess rather than a signal. The incomplete
|
||||
figure is work too, but it is work with a queue behind it, so it points at the filter
|
||||
rather than shouting. */}
|
||||
<div className="tc-tiles">
|
||||
<div className="tc-tile">
|
||||
<span className="tc-figure">{nActive}</span>
|
||||
<span className="tc-tile-label">On the register</span>
|
||||
<span className="tc-tile-note">{nInactive ? `${nInactive} inactive, kept for their history` : "Nobody inactive"}</span>
|
||||
</div>
|
||||
<div className="tc-tile">
|
||||
<span className="tc-figure">{nDesk}</span>
|
||||
<span className="tc-tile-label">On a ward desk</span>
|
||||
<span className="tc-tile-note">{nDesk ? "They sign for the bags the round drops" : "Nobody signs for a ward bag"}</span>
|
||||
</div>
|
||||
<div className={"tc-tile" + (nOver > 0 ? " tc-flag" : "")}>
|
||||
<span className="tc-figure">{nOver}</span>
|
||||
<span className="tc-tile-label">Over the ceiling</span>
|
||||
<span className="tc-tile-note">
|
||||
{nOver > 0 ? <><span className="tc-mark" aria-hidden="true" />Nothing more goes out to them until something comes back in</> : `Everybody is inside the ${capSets} sets one person holds`}
|
||||
</span>
|
||||
</div>
|
||||
<div className="tc-tile">
|
||||
<span className="tc-figure">{gapCount.any}</span>
|
||||
<span className="tc-tile-label">Records to finish</span>
|
||||
{/* Only the work that has to be done is counted here. The staff app is named underneath
|
||||
once the required list is clear, so the offer is still visible without a coordinator
|
||||
reading it as a job they have not finished. */}
|
||||
<span className="tc-tile-note">{gapCount.any
|
||||
? `${gapBreakdown} — pick one above and work it down`
|
||||
: optionalBreakdown
|
||||
? `Every record is finished — ${optionalBreakdown}, which is optional`
|
||||
: "Every record is finished"}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="tc-panel" style={{ marginTop: "var(--space-4)" }}>
|
||||
<div className="tc-panel-head">
|
||||
<span>{narrowed ? "Matching staff" : "The register"}</span>
|
||||
{/* Counted off the rows themselves rather than off the tick. Every one of the missing
|
||||
filters leaves inactive staff out — nobody is going to issue to them or hand them a
|
||||
code — so with one of those on, a ticked Show inactive puts not one of them on screen
|
||||
while the head went on saying they were in the list. */}
|
||||
<span className="tc-panel-aside">{rows.length} {rows.length === 1 ? "row" : "rows"}{shownInactive ? `, ${shownInactive} inactive` : ""}</span>
|
||||
</div>
|
||||
<div className="table-wrap">
|
||||
<table className="table">
|
||||
{/* Ward desk is set one record at a time and nothing else in the product ever lists who
|
||||
holds it — so the only way to answer "who signs for the round on 4B?" was to open
|
||||
every record in turn. It is a column here for the same reason the department is: it
|
||||
is a fact about the person you scan the register for. */}
|
||||
<thead><tr>{th("Staff no.")}{th("Name")}{th("Group")}{th("Department")}{th("Ward desk")}{th("Cost centre")}{th("Sizes")}{th("Sets held", true)}{th("Status")}{th("Missing")}<th></th></tr></thead>
|
||||
<tbody>
|
||||
{rows.map((st) => {
|
||||
const c = holdingOf(st), state = holdState(c);
|
||||
const over = !st.inactive && c.over;
|
||||
const overSets = over && (c.overTops > 0 || c.overPants > 0), overOther = over && c.overOther > 0;
|
||||
const missing = gapsOf(st);
|
||||
return (
|
||||
<tr key={st.id} style={{ opacity: st.inactive ? 0.45 : 1 }}>
|
||||
<td style={{ fontSize: 12 }}>{st.num}</td>
|
||||
<td style={{ fontWeight: 600 }}><Link href={`/app/staff/${st.id}`} className="link-name">{st.first} {st.last}</Link>{st.phone && <div style={{ fontSize: 11, fontWeight: 400, color: "var(--color-neutral-700)" }}>{st.phone}</div>}</td>
|
||||
<td>{st.group}</td>
|
||||
<td>{st.dept}</td>
|
||||
<td>{st.wardDesk ? <span className="tag tag-outline">On the desk</span> : <span style={{ color: "var(--color-neutral-600)" }}>—</span>}</td>
|
||||
<td>{ccOf(s, st) || "—"}</td>
|
||||
<td style={{ fontSize: 12, color: "var(--color-neutral-700)" }}>top {st.top || "—"} · pants {st.pants || "—"}</td>
|
||||
{/* Past the ceiling is the one status on this screen somebody has to do something
|
||||
about, so the figure carries the weight and the tag carries the mark. Every
|
||||
other tag on the row is red too — the accent is the brand — and a row scanned
|
||||
from a metre away needs more than another red rectangle.
|
||||
|
||||
Sets on the top line, the halves under it: the ceiling bites on each half, so
|
||||
the set count on its own shows somebody holding six tops and one pair as
|
||||
"1 / 6" — five sets of room where there is room for no more tops at all.
|
||||
|
||||
The weight goes on whichever figure is past its ceiling. Somebody holding
|
||||
seven fleeces and no uniform is "0 / 6", and a red nought reads as the sets
|
||||
being the trouble; the garments outside a set carry the mark instead. */}
|
||||
<td style={{ textAlign: "right", fontWeight: overSets ? 800 : 400, color: overSets ? "var(--color-accent-700)" : undefined }}>{c.sets} / {c.cap}
|
||||
{c.tops || c.pants || c.other ? <div style={{ fontSize: 11, fontWeight: 400, color: "var(--color-neutral-700)" }}>{halves(c)}{c.other ? <> · <span style={overOther ? { fontWeight: 800, color: "var(--color-accent-700)" } : undefined}>{c.other} outside a set{overOther ? `, past the ${c.otherCap}` : ""}</span></> : null}</div> : null}
|
||||
</td>
|
||||
<td><span className={st.inactive ? "tag tag-outline" : over ? "tag tag-flag" : state === "AT LIMIT" ? "tag tag-outline" : "tag tag-neutral"} title={st.inactive ? undefined : holdWhy(c)}>{st.inactive ? "Inactive" : state}</span></td>
|
||||
{/* Outline, not the flag: four of these on a row of red rectangles would drown
|
||||
the one status on this screen that is somebody's immediate problem. Each tag
|
||||
carries the consequence in its tooltip, because "FTE" on its own says which
|
||||
box is empty and not what is broken while it stays that way.
|
||||
|
||||
The offer is not a tag at all. Boxed like the rest, "Sizes, Staff app" put two
|
||||
jobs of equal weight on a row where only one of them stops the person being
|
||||
issued anything — and this column is the part of the row that actually gets
|
||||
scanned. Named in quiet grey beside them, it still says the offer is
|
||||
outstanding without joining the queue. */}
|
||||
<td>{missing.length
|
||||
? <span style={{ display: "flex", flexWrap: "wrap", gap: 4, alignItems: "center" }}>{missing.map((g) => g.required
|
||||
? <span key={g.key} className="tag tag-outline" title={g.why}>{g.short}</span>
|
||||
: <span key={g.key} style={{ fontSize: 11, color: "var(--color-neutral-600)" }} title={g.why}>{g.short}</span>)}</span>
|
||||
: <span style={{ color: "var(--color-neutral-600)" }}>—</span>}</td>
|
||||
<td style={{ textAlign: "right" }}><Link href={`/app/staff/${st.id}`} className="btn btn-ghost" aria-label={`View ${st.first} ${st.last}`}>View</Link></td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{/* An empty queue is the answer to the question, not a dead end: somebody who has filtered
|
||||
to "No approver" and got nothing back has finished that job, and saying "no staff match"
|
||||
reads as though the filter is broken.
|
||||
|
||||
The staff app is the exception, and it is the one this used to get wrong. It was taken
|
||||
out of the queue on purpose — an account is offered, not owed — so "that list is done"
|
||||
and "every record is finished" put it straight back in, and a coordinator reads a job
|
||||
they were told they did not have. An offer that nobody is waiting on is worth saying in
|
||||
those words instead. */}
|
||||
{rows.length === 0 && <div style={{ padding: "0 var(--space-4)" }}><Empty>{s.staff.length === 0
|
||||
? "No staff on the register yet. Add a staff member, or import a CSV in Settings → Data."
|
||||
: gap === "All" ? "No staff match."
|
||||
: gapCount[gap] === 0
|
||||
? gap === "any" ? "Nothing that has to be set is missing anywhere on the register — every record is finished."
|
||||
: gapSel && !gapSel.required ? gapSel.done ?? "Nobody is waiting on that."
|
||||
: "Nobody on the register is missing that. That list is done."
|
||||
: gapSel && !gapSel.required ? "Nobody in this search is waiting on that — clear the search or the group to see the rest of the list."
|
||||
: "Nobody in this search is missing that — clear the search or the group to see the rest of the list."}</Empty></div>}
|
||||
</div>
|
||||
<div style={{ marginTop: "var(--space-3)", fontSize: 12, color: "var(--color-neutral-700)" }}>{s.staff.length - nInactive} active on register{nDesk > 0 ? `, ${nDesk} on a ward desk` : ", nobody on a ward desk"}. Click a name for the full profile.</div>
|
||||
{add && <StaffDialog staff={null} onClose={() => setAdd(false)} />}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,326 @@
|
||||
"use client";
|
||||
import Link from "next/link";
|
||||
import { useParams } from "next/navigation";
|
||||
import { Fragment, useEffect, useMemo, useState } from "react";
|
||||
import { useDerived, useSnap } from "@/lib/client";
|
||||
import { PageHead, Empty, ErrorLine, Field, Notice } from "@/components/ui";
|
||||
import { AdjustDialog, DuplicateItemDialog, GROUPS_HINT, GroupsPicker, ScanVariantsDialog } from "@/components/dialogs";
|
||||
import { bcBound, countsAsIssued, fmtDate, fyStart, garmentGroups, genderLabel, issueCost, key, money, onOrderMap, onhand, reorderAt, staffName, touched } from "@/lib/compute";
|
||||
|
||||
export default function ProductPage() {
|
||||
const { id } = useParams<{ id: string }>();
|
||||
const { s, isAdmin, mutate } = useSnap();
|
||||
const { L, byId, staffById } = useDerived();
|
||||
const it = s.catalog.find((x) => x.id === id);
|
||||
const [edit, setEdit] = useState(false);
|
||||
const [f, setF] = useState({ item: "", sku: "", supplier: "", cost: "", gender: "Unisex", groups: [] as string[], notes: "" });
|
||||
const [newSize, setNewSize] = useState("");
|
||||
const [err, setErr] = useState("");
|
||||
const [msg, setMsg] = useState("");
|
||||
const [adjust, setAdjust] = useState<{ itemId: string; si: number } | null>(null);
|
||||
const [scanSizes, setScanSizes] = useState(false);
|
||||
const [dup, setDup] = useState(false);
|
||||
// What is typed into each size's barcode box, until it is saved. A code printed on a garment label
|
||||
// is as often read out and typed as it is scanned, and a code bound to the wrong garment can only
|
||||
// be corrected from the garment it belongs to — so every size takes one by hand.
|
||||
const [codes, setCodes] = useState<Record<number, string>>({});
|
||||
const [rowErr, setRowErr] = useState<{ si: number; msg: string } | null>(null);
|
||||
// Arriving from "Create and scan sizes" — open the scanner straight away.
|
||||
useEffect(() => { if (new URLSearchParams(window.location.search).get("scan") === "1") { setScanSizes(true); window.history.replaceState(null, "", window.location.pathname); } }, []);
|
||||
|
||||
const d = useMemo(() => {
|
||||
if (!it) return null;
|
||||
const sizes = it.sizes.map((sz, si) => { const k = key(it.id, si); return { si, size: String(sz), key: k, oh: onhand(s, L, k), ro: reorderAt(s, k), touched: touched(s, L, k), barcode: bcBound(s, it, si) }; });
|
||||
const tot = sizes.reduce((t, v) => t + v.oh, 0);
|
||||
const value = sizes.reduce((t, v) => t + Math.max(0, v.oh), 0) * it.cost;
|
||||
const fy = fyStart(s.today);
|
||||
const fyList = s.issues.filter((i) => i.itemId === it.id && i.date >= fy && countsAsIssued(i));
|
||||
const fyIssued = fyList.reduce((t, i) => t + i.qty, 0);
|
||||
const fySpend = fyList.reduce((t, i) => t + i.qty * issueCost(i, byId), 0);
|
||||
const oo = onOrderMap(s, byId).byKey; let onOrder = 0; it.sizes.forEach((_sz, si) => { onOrder += oo[key(it.id, si)] || 0; });
|
||||
const hist: { date: string; kind: string; cls: string; desc: string }[] = [];
|
||||
for (const i of s.issues) if (i.itemId === it.id) {
|
||||
hist.push({ date: i.date, kind: i.direct ? "Collected" : "Issued", cls: "tag tag-neutral", desc: `${it.sizes[i.si]} ×${i.qty} — ${staffName(staffById[i.staffId], "—")}` });
|
||||
if (i.returned) hist.push({ date: i.returned.date, kind: i.returned.cond.replace("Returned - ", "Returned – "), cls: "tag tag-outline", desc: `${it.sizes[i.si]} ×${i.qty} — ${staffName(staffById[i.staffId], "—")}` });
|
||||
}
|
||||
for (const o of s.orders) for (const rc of o.receipts) for (const l of rc.lines) if (l.itemId === it.id) hist.push({ date: rc.date, kind: "Received", cls: "tag tag-accent", desc: `${l.size} ×${l.qty} — ${o.code}${l.dest === "shelf" ? " → shelf" : " → staff pickup"}` });
|
||||
// A counted correction isn't a write-off — it's the shelf disagreeing with the ledger, in either direction.
|
||||
for (const m of s.moves) if (m.itemId === it.id) hist.push({ date: m.date, kind: m.reason === "Counted correction" ? "Counted" : m.qty < 0 ? "Write-off" : "Added", cls: "tag tag-outline", desc: `${it.sizes[m.si] ?? ""} ${m.reason === "Counted correction" ? (m.qty < 0 ? "−" : "+") + Math.abs(m.qty) : "×" + Math.abs(m.qty)}${m.reason ? " — " + m.reason : ""}` });
|
||||
hist.sort((a, b) => (a.date < b.date ? 1 : a.date > b.date ? -1 : 0));
|
||||
return { sizes, tot, value, fyIssued, fySpend, onOrder, hist: hist.slice(0, 25) };
|
||||
}, [it, s, L, byId, staffById]);
|
||||
|
||||
if (!it || !d) return <section><PageHead eyebrow="Inventory" title="Item not found" /><Empty><Link href="/app/stock">← Stock on Hand</Link></Empty></section>;
|
||||
|
||||
const tagged = garmentGroups(it.groups);
|
||||
const startEdit = () => { setF({ item: it.item, sku: it.sku, supplier: it.supplier, cost: String(it.cost), gender: it.gender, groups: tagged, notes: it.notes }); setErr(""); setEdit(true); };
|
||||
const invalid = !f.item.trim() || !(parseFloat(f.cost) >= 0) || f.cost === "";
|
||||
async function save() {
|
||||
if (invalid) return;
|
||||
const r = await mutate("catalog.update", { id: it!.id, item: f.item, sku: f.sku, supplier: f.supplier, cost: parseFloat(f.cost), gender: f.gender, groups: f.groups, notes: f.notes });
|
||||
if (!r.ok) { setErr(r.error); return; }
|
||||
setEdit(false);
|
||||
}
|
||||
// Discontinuing a product and nudging a par level are both refusable, and both used to be fired
|
||||
// and forgotten — the row simply didn't change and nothing said why.
|
||||
async function act(op: string, payload: unknown) { setErr(""); setRowErr(null); setMsg(""); const r = await mutate(op, payload); if (!r.ok) setErr(r.error); }
|
||||
const sizeInvalid = !newSize.trim() || it.sizes.map(String).includes(newSize.trim());
|
||||
// Adding a size does NOT mint a barcode, and the note under this field must not say it does: a
|
||||
// 6XL taken as handled is a rack of garments no scanner can see and no stocktake can count. The
|
||||
// code stays a decision, because most sizes arrive carrying the supplier's own number and
|
||||
// stamping ours over it would cut the tie to their delivery notes.
|
||||
async function addSize() {
|
||||
if (sizeInvalid) return;
|
||||
const r = await mutate("catalog.update", { id: it!.id, addSize: newSize.trim() });
|
||||
if (!r.ok) { setErr(r.error); return; }
|
||||
setNewSize("");
|
||||
}
|
||||
// A size row's own refusal belongs on that row: catalog.removeSize names exactly what is recorded
|
||||
// against that size, which is no use read six rows away at the top of the page.
|
||||
function rowFail(si: number, msg: string) { setErr(""); setRowErr({ si, msg }); }
|
||||
async function saveCode(si: number, size: string, bound: string, force = false) {
|
||||
const code = (codes[si] ?? bound).trim();
|
||||
if (code === bound) { setCodes((c) => ({ ...c, [si]: bound })); return; }
|
||||
// Clearing the box is how a wrong code comes off, so an empty field unbinds rather than complains.
|
||||
if (!code) { if (confirm(`Unbind ${bound} from size ${size}?`)) await unbindCode(si, bound); return; }
|
||||
setErr(""); setRowErr(null);
|
||||
const r = await mutate("barcode.bind", { code, itemId: it!.id, si, force });
|
||||
if (!r.ok) {
|
||||
// "Already on another garment" is the one refusal force can clear, and moving the code across
|
||||
// is usually the whole point of typing it here. The generated-code refusal stands however hard
|
||||
// you push, so it must never be offered as something to push through.
|
||||
if (!force && r.error.includes("re-bind to move it") && confirm(`${r.error}\n\nMove ${code} onto ${it!.item} · size ${size}?`)) { await saveCode(si, size, bound, true); return; }
|
||||
rowFail(si, r.error); return;
|
||||
}
|
||||
// Hold what was saved rather than dropping back to the snapshot, which refreshes a beat later.
|
||||
setCodes((c) => ({ ...c, [si]: code }));
|
||||
}
|
||||
async function unbindCode(si: number, code: string) {
|
||||
setErr(""); setRowErr(null);
|
||||
const r = await mutate("barcode.unbind", { code });
|
||||
if (!r.ok) { rowFail(si, r.error); return; }
|
||||
setCodes((c) => ({ ...c, [si]: "" }));
|
||||
}
|
||||
/* A barcode for garments that arrived without one.
|
||||
*
|
||||
* Whole ranges turn up unlabelled — the cafe shirts came with nothing on any of fifteen sizes —
|
||||
* and a garment nobody can scan is invisible to a count and cannot be issued by scanning. This
|
||||
* mints ThreadCount's own number for the sizes that have none. It is not destructive and it only
|
||||
* ever fills gaps, but it does put a number on every garment on that rack, so the count goes into
|
||||
* the question first.
|
||||
*
|
||||
* The button stays live even when this page can see no gaps left: the codes it is reading came
|
||||
* from a snapshot and the server is the thing that actually knows, so its refusal is the honest
|
||||
* answer to show. */
|
||||
async function generateAll() {
|
||||
const missing = d!.sizes.filter((v) => !v.barcode).length;
|
||||
if (missing && !confirm(`Generate a barcode for the ${missing} size${missing === 1 ? "" : "s"} on ${it!.item} with none? Sizes with a supplier’s code keep it.`)) return;
|
||||
setErr(""); setRowErr(null); setMsg("");
|
||||
const r = await mutate<{ made: { si: number; size: string; code: string }[]; count: number }>("barcode.generate", { itemId: it!.id });
|
||||
if (!r.ok) { setErr(r.error); return; }
|
||||
// Drafts go for the same reason they go when the scanner closes: a box still holding what was
|
||||
// typed earlier would sit over the code just minted for that size.
|
||||
setCodes({});
|
||||
setMsg(`Generated ${r.result.count} barcode${r.result.count === 1 ? "" : "s"} — size${r.result.count === 1 ? "" : "s"} ${r.result.made.map((m) => m.size).join(", ")}. Print labels to get them onto the garments.`);
|
||||
}
|
||||
async function generateOne(si: number, size: string) {
|
||||
setErr(""); setRowErr(null); setMsg("");
|
||||
const r = await mutate<{ made: { si: number; size: string; code: string }[]; count: number }>("barcode.generate", { itemId: it!.id, si });
|
||||
if (!r.ok) { rowFail(si, r.error); return; }
|
||||
setCodes((c) => { const n = { ...c }; delete n[si]; return n; });
|
||||
setMsg(`Size ${size} now carries ${r.result.made.map((m) => m.code).join(", ")}. Print labels to get it onto the garments.`);
|
||||
}
|
||||
async function removeSize(si: number, size: string) {
|
||||
if (!confirm(`Remove size ${size} from ${it!.item}? Its reorder level and barcode go with it.`)) return;
|
||||
setErr(""); setRowErr(null);
|
||||
const r = await mutate("catalog.removeSize", { id: it!.id, si });
|
||||
if (!r.ok) { rowFail(si, r.error); return; }
|
||||
// Every size above the removed one shifts down a place, so drafts kept against the old positions
|
||||
// would now sit on the wrong sizes.
|
||||
setCodes({});
|
||||
}
|
||||
/* How much paper Print labels is about to produce. The sheet prints one label per garment ON HAND
|
||||
across the sizes that carry a code — six size-14s in the cupboard means six size-14 labels,
|
||||
because each of those six shirts is getting one stuck on it — and it opens with the print
|
||||
dialog already up. On a shared printer that is the wrong moment to learn the number, so it goes
|
||||
on the button and into the question. */
|
||||
const labelled = d.sizes.filter((v) => v.barcode).length;
|
||||
const labels = d.sizes.reduce((t, v) => t + (v.barcode ? Math.max(0, v.oh) : 0), 0);
|
||||
function printLabels() {
|
||||
if (labels && !confirm(`Print ${labels} label${labels === 1 ? "" : "s"} for ${it!.item}? One for every garment on hand, across the ${labelled} size${labelled === 1 ? "" : "s"} carrying a barcode.`)) return;
|
||||
// A new tab: this screen is the rack somebody is working down. With nothing to print the sheet
|
||||
// says which of the two reasons it is, which is more use than a refusal from here.
|
||||
window.open(`/print/labels?item=${encodeURIComponent(it!.id)}`, "_blank", "noopener");
|
||||
}
|
||||
|
||||
// An editable code needs room the read-only text didn't; an issuer still sees the plain list.
|
||||
const sizeCols = isAdmin ? "64px minmax(190px, 1fr) 96px 74px 112px 168px" : "70px 110px 1fr 90px 130px 110px";
|
||||
const sizeMin = isAdmin ? 760 : 560;
|
||||
|
||||
return (
|
||||
<section>
|
||||
{/* The band is the screen's own head, so the way back out lives inside it — a link stranded
|
||||
above the ink would leave a white shelf across the top of the page. */}
|
||||
<header className="tc-pagehead">
|
||||
<div>
|
||||
<Link href="/app/stock" className="btn btn-ghost" style={{ padding: "0 0 var(--space-1)", minHeight: 0 }}>← Stock on Hand</Link>
|
||||
<div className="eyebrow">Inventory · {it.sku || "No SKU"}</div>
|
||||
<h1 className="h1">{it.item}</h1>
|
||||
<div style={{ display: "flex", gap: "var(--space-2)", marginTop: "var(--space-2)", flexWrap: "wrap" }}>
|
||||
{tagged.length ? tagged.map((g) => <span key={g} className="tag tag-outline">{g}</span>) : <span className="tag tag-outline">All groups</span>}
|
||||
{it.gender !== "Unisex" && <span className="tag tag-outline">{genderLabel(it.gender)}</span>}
|
||||
<span className="tag tag-neutral">{it.supplier || "No supplier"}</span>
|
||||
{it.archived && <span className="tag tag-accent">Discontinued</span>}
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ display: "flex", gap: "var(--space-4)", alignItems: "flex-end", flexWrap: "wrap" }}>
|
||||
<div style={{ fontSize: 13, color: "var(--color-neutral-700)", textAlign: "right" }}>
|
||||
<div className="tc-figure">{d.tot}</div>
|
||||
<div className="tc-meta">on hand · {money(d.value)} at {money(it.cost)} each</div>
|
||||
</div>
|
||||
{isAdmin && (
|
||||
<div style={{ display: "flex", gap: "var(--space-2)", flexWrap: "wrap" }}>
|
||||
{!edit ? (
|
||||
<>
|
||||
{!it.archived ? <button className="btn btn-ghost" onClick={() => act("catalog.update", { id: it.id, archived: true })}>Discontinue</button> : <button className="btn btn-secondary" onClick={() => act("catalog.update", { id: it.id, archived: false })}>Reinstate</button>}
|
||||
<button className="btn btn-ghost" onClick={() => setDup(true)}>Duplicate</button>
|
||||
<button className="btn btn-ghost" title="Give each size with no barcode one of our own" onClick={generateAll}>Generate barcodes</button>
|
||||
<button className="btn btn-ghost" title="One label per garment on hand, across the sizes that carry a barcode." onClick={printLabels}>Print labels{labels ? ` (${labels})` : ""}</button>
|
||||
<button className="btn btn-secondary" onClick={() => setScanSizes(true)}>Scan sizes</button>
|
||||
<button className="btn btn-primary" onClick={startEdit}>Edit product</button>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<button className="btn btn-ghost" onClick={() => setEdit(false)}>Cancel</button>
|
||||
<button className="btn btn-primary" onClick={save} disabled={invalid}>Save changes</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</header>
|
||||
<ErrorLine msg={err} />
|
||||
<Notice msg={msg} />
|
||||
<div className="tc-grid" style={{ display: "grid", gridTemplateColumns: "7fr 5fr", gap: "var(--space-8)", marginTop: "var(--space-6)" }}>
|
||||
<div>
|
||||
{edit && (
|
||||
<div className="tc-panel" style={{ marginBottom: "var(--space-6)" }}>
|
||||
<div className="tc-panel-head">Edit details</div>
|
||||
<div className="tc-panel-body tc-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "var(--space-3)" }}>
|
||||
<Field label="Item name" style={{ gridColumn: "1 / -1" }} error={!f.item.trim() ? "Needed — the product has to have a name." : undefined}>{(c) => <input {...c} className="input" value={f.item} onChange={(e) => setF({ ...f, item: e.target.value })} />}</Field>
|
||||
<Field label="SKU / style code">{(c) => <input {...c} className="input" value={f.sku} onChange={(e) => setF({ ...f, sku: e.target.value })} />}</Field>
|
||||
<Field label="Unit cost ($)" error={f.cost !== "" && !(parseFloat(f.cost) >= 0) ? "Give a number, or 0." : undefined}>{(c) => <input {...c} className="input" inputMode="decimal" value={f.cost} onChange={(e) => setF({ ...f, cost: e.target.value.replace(/[^0-9.]/g, "") })} />}</Field>
|
||||
<Field label="Supplier">{(c) => <><input {...c} className="input" list="tc-suppliers" value={f.supplier} onChange={(e) => setF({ ...f, supplier: e.target.value })} /><datalist id="tc-suppliers">{s.settings.suppliers.map((x) => <option key={x} value={x} />)}</datalist></>}</Field>
|
||||
<Field label="Gender">{(c) => <select {...c} className="input" value={f.gender} onChange={(e) => setF({ ...f, gender: e.target.value })}><option value="Unisex">Unisex</option><option value="Male">Men's</option><option value="Female">Women's</option></select>}</Field>
|
||||
<GroupsPicker style={{ gridColumn: "1 / -1" }} value={f.groups} onChange={(groups) => setF({ ...f, groups })} groups={s.settings.staffGroups} hint={GROUPS_HINT} />
|
||||
<Field label="Notes" style={{ gridColumn: "1 / -1" }}>{(c) => <textarea {...c} className="input" rows={2} value={f.notes} onChange={(e) => setF({ ...f, notes: e.target.value })} placeholder="Fit notes, replacement style, supplier quirks…" />}</Field>
|
||||
</div>
|
||||
<div className="tc-panel-body" style={{ paddingTop: 0, display: "flex", gap: "var(--space-2)", alignItems: "flex-end", flexWrap: "wrap" }}>
|
||||
<Field label="Add a size" style={{ flex: 1, minWidth: 160 }} error={newSize.trim() && it.sizes.map(String).includes(newSize.trim()) ? "That size is already on this product." : undefined}>{(c) => <input {...c} className="input" value={newSize} onChange={(e) => setNewSize(e.target.value)} placeholder="e.g. 6XL or 127" onKeyDown={(e) => { if (e.key === "Enter") addSize(); }} />}</Field>
|
||||
<button className="btn btn-secondary" onClick={addSize} disabled={sizeInvalid}>Add size</button>
|
||||
</div>
|
||||
<div className="tc-panel-foot" style={{ fontSize: 12, color: "var(--color-neutral-700)" }}>A new size starts with no barcode — scan, type or generate one on its row below.</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="tc-panel">
|
||||
<div className="tc-panel-head">
|
||||
<div>Sizes</div>
|
||||
<div className="tc-panel-aside">{labelled} of {it.sizes.length} carry a barcode</div>
|
||||
</div>
|
||||
<div className="table-wrap">
|
||||
<div style={{ display: "grid", gridTemplateColumns: sizeCols, gap: "var(--space-2)", fontSize: 11, letterSpacing: "0.06em", textTransform: "uppercase", color: "var(--color-neutral-600)", borderBottom: "2px solid var(--color-text)", padding: "var(--space-3) var(--space-4) var(--space-1)", minWidth: sizeMin }}>
|
||||
<div>Size</div><div>Barcode</div><div></div><div style={{ textAlign: "right" }}>On hand</div><div style={{ textAlign: "right" }}>Reorder at</div><div></div>
|
||||
</div>
|
||||
{d.sizes.map((v) => {
|
||||
const status = v.oh <= 0 ? (v.touched ? "OUT" : "—") : v.oh <= v.ro ? "REORDER" : "OK";
|
||||
// Whatever is in the box, falling back to the bound code. Nothing reformats what was
|
||||
// typed: Code 128 labels carry letters as well as digits.
|
||||
const draft = codes[v.si] ?? v.barcode;
|
||||
const dirty = draft.trim() !== v.barcode;
|
||||
return (
|
||||
<Fragment key={v.si}>
|
||||
<div style={{ display: "grid", gridTemplateColumns: sizeCols, gap: "var(--space-2)", alignItems: "center", padding: "var(--space-1) var(--space-4)", borderBottom: "1px solid var(--color-divider)", fontSize: 13, minWidth: sizeMin }}>
|
||||
<div style={{ fontWeight: 600 }}>{v.size}</div>
|
||||
{isAdmin ? (
|
||||
<div style={{ display: "flex", alignItems: "center", gap: 4 }}>
|
||||
<input className="input" style={{ flex: 1, minWidth: 0, minHeight: 28, padding: "2px 6px", fontSize: 12 }} value={draft} maxLength={64} inputMode="numeric" placeholder="Not bound"
|
||||
aria-label={`Barcode for size ${v.size}`} title="The code printed on the label — type it or scan it. Clear the box to unbind."
|
||||
onChange={(e) => setCodes({ ...codes, [v.si]: e.target.value })}
|
||||
onKeyDown={(e) => { if (e.key === "Enter") saveCode(v.si, v.size, v.barcode); }} />
|
||||
{dirty
|
||||
? <button className="btn btn-secondary" style={{ minHeight: 26, padding: "2px 8px", fontSize: 12 }} aria-label={`Save the barcode for size ${v.size}`} onClick={() => saveCode(v.si, v.size, v.barcode)}>Save</button>
|
||||
: v.barcode
|
||||
? <button className="btn btn-ghost btn-icon" style={{ fontSize: 12 }} title="Unbind this barcode (falls back to the generated code)" aria-label={`Unbind barcode ${v.barcode} from size ${v.size}`} onClick={() => { if (confirm(`Unbind ${v.barcode} from size ${v.size}?`)) unbindCode(v.si, v.barcode); }}>×</button>
|
||||
: <button className="btn btn-ghost" style={{ minHeight: 26, padding: "2px 8px", fontSize: 12 }} title="Give this size a barcode of our own" aria-label={`Generate a barcode for size ${v.size}`} onClick={() => generateOne(v.si, v.size)}>Generate</button>}
|
||||
</div>
|
||||
) : (
|
||||
/* 600, not 400: 400 is the muted colour for the dark rail and reads at under
|
||||
2:1 on paper, which left "Not bound" all but invisible on the one screen
|
||||
where an unbound size is the thing to notice. */
|
||||
<div style={{ fontSize: 12, color: "var(--color-neutral-600)" }} title={v.barcode ? "Supplier barcode scanned in against this size" : "No supplier barcode bound yet"}>{v.barcode || "Not bound"}</div>
|
||||
)}
|
||||
<div><span className={status === "OK" ? "tag tag-neutral" : status === "—" ? "tag tag-outline" : "tag tag-flag"}>{status}</span></div>
|
||||
<div style={{ textAlign: "right", fontWeight: 700, color: status === "OK" || status === "—" ? "var(--color-text)" : "var(--color-accent-700)" }}>{v.oh}</div>
|
||||
<div style={{ textAlign: "right" }}>
|
||||
<span style={{ display: "inline-flex", alignItems: "center", gap: "var(--space-1)" }}>
|
||||
{isAdmin && <button className="btn btn-ghost" style={{ padding: "0 6px", minHeight: 22 }} aria-label={`Lower the reorder level for size ${v.size}`} onClick={() => act("stock.reorder", { itemId: it.id, si: v.si, reorder: Math.max(0, v.ro - 1) })}>−</button>}
|
||||
<span style={{ width: 20, textAlign: "center" }}>{v.ro}</span>
|
||||
{isAdmin && <button className="btn btn-ghost" style={{ padding: "0 6px", minHeight: 22 }} aria-label={`Raise the reorder level for size ${v.size}`} onClick={() => act("stock.reorder", { itemId: it.id, si: v.si, reorder: v.ro + 1 })}>+</button>}
|
||||
</span>
|
||||
</div>
|
||||
<div style={{ display: "flex", gap: "var(--space-1)", justifyContent: "flex-end" }}>
|
||||
<button className="btn btn-ghost" style={{ minHeight: 26, padding: "2px 8px" }} aria-label={`Adjust the quantity of size ${v.size}`} onClick={() => setAdjust({ itemId: it.id, si: v.si })}>Adjust</button>
|
||||
{isAdmin && <button className="btn btn-ghost" style={{ minHeight: 26, padding: "2px 8px" }} aria-label={`Remove size ${v.size} from this product`} onClick={() => removeSize(v.si, v.size)}>Remove</button>}
|
||||
</div>
|
||||
</div>
|
||||
{rowErr?.si === v.si && <div style={{ padding: "0 var(--space-4) var(--space-2)", borderBottom: "1px solid var(--color-divider)", minWidth: sizeMin }}><ErrorLine msg={rowErr.msg} /></div>}
|
||||
</Fragment>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
{it.notes && !edit && (
|
||||
<div className="tc-panel" style={{ marginTop: "var(--space-6)" }}>
|
||||
<div className="tc-panel-head">Notes</div>
|
||||
<div className="tc-panel-body" style={{ fontSize: 13, lineHeight: 1.6, color: "var(--color-neutral-800)", whiteSpace: "pre-wrap" }}>{it.notes}</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<div className="tc-panel">
|
||||
<div className="tc-panel-head">This financial year</div>
|
||||
<div className="tc-panel-list">
|
||||
{[["Issued this FY", `${d.fyIssued} items`], ["FY spend (at issue price)", money(d.fySpend)], ["On open orders", `${d.onOrder} items`], ["Sizes carried", String(it.sizes.length)]].map(([k, v]) => (
|
||||
<div key={k} className="tc-row">
|
||||
<div className="tc-row-main"><div className="tc-row-name" style={{ fontWeight: 500 }}>{k}</div></div>
|
||||
<div className="tc-row-fig">{v}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="tc-panel" style={{ marginTop: "var(--space-6)" }}>
|
||||
<div className="tc-panel-head">
|
||||
<div>Recent movement</div>
|
||||
{d.hist.length > 0 && <div className="tc-panel-aside">newest first</div>}
|
||||
</div>
|
||||
{d.hist.length === 0 && <div className="tc-panel-body"><Empty pad={3}>No movement recorded yet.</Empty></div>}
|
||||
<div className="tc-panel-list">
|
||||
{d.hist.map((h, i) => (
|
||||
<div key={i} className="tc-row" style={{ fontSize: 13 }}>
|
||||
<span className="tc-row-meta" style={{ flex: "none", width: 84 }}>{fmtDate(h.date)}</span>
|
||||
<span className={h.cls} style={{ flex: "none" }}>{h.kind}</span>
|
||||
<span className="tc-row-main" style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{h.desc}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{adjust && <AdjustDialog init={adjust} onClose={() => setAdjust(null)} />}
|
||||
{/* Drafts go when the scanner closes: it binds codes to these same sizes, and a box still
|
||||
holding what was typed earlier would sit over the code that was just scanned in. */}
|
||||
{scanSizes && <ScanVariantsDialog item={it} onClose={() => { setScanSizes(false); setCodes({}); }} />}
|
||||
{dup && <DuplicateItemDialog item={it} onClose={() => setDup(false)} />}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,284 @@
|
||||
"use client";
|
||||
import Link from "next/link";
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { useDerived, useSnap } from "@/lib/client";
|
||||
import { PageHead, Empty, InvTabs, KpiStrip, Seg, Notice } from "@/components/ui";
|
||||
import { AdjustDialog, ItemDialog, BindDialog, ScanAddDialog } from "@/components/dialogs";
|
||||
import Camera from "@/components/Camera";
|
||||
import { ALL_GROUPS, bcBound, bcFor, bcParse, csvOf, fmtDate, genderLabel, groupKey, inBucket, key, lastCountMap, locTree, money, onOrderMap, onhand, reorderAt, touched, type Item, plOf } from "@/lib/compute";
|
||||
import { downloadCsv } from "@/lib/print";
|
||||
|
||||
type SortKey = "" | "name" | "value" | "onorder" | "onhand";
|
||||
const FILTERS = ["All", "In stock", "Flagged", "Out", "No barcode"] as const;
|
||||
|
||||
export default function StockPage() {
|
||||
const { s, isAdmin, mutate } = useSnap();
|
||||
const { L, byId, variants } = useDerived();
|
||||
const [q, setQ] = useState("");
|
||||
const [group, setGroup] = useState("All groups");
|
||||
const [supplier, setSupplier] = useState("All suppliers");
|
||||
const [filter, setFilter] = useState<(typeof FILTERS)[number]>("All");
|
||||
const [sortKey, setSortKey] = useState<SortKey>("");
|
||||
const [sortDir, setSortDir] = useState(1);
|
||||
const [expand, setExpand] = useState<string | null>(null);
|
||||
const [adjust, setAdjust] = useState<{ itemId: string; si: number } | null | false>(false);
|
||||
const [newItem, setNewItem] = useState(false);
|
||||
const [scanAdd, setScanAdd] = useState(false);
|
||||
const [cam, setCam] = useState(false);
|
||||
// SCAN button from the mobile bar lands here as ?scan=1 (garment lookup).
|
||||
useEffect(() => { if (new URLSearchParams(window.location.search).get("scan") === "1") { setCam(true); window.history.replaceState(null, "", "/app/stock"); } const h = () => setCam(true); window.addEventListener("tc-scan", h); return () => window.removeEventListener("tc-scan", h); }, []);
|
||||
const [bind, setBind] = useState("");
|
||||
const [limit, setLimit] = useState(40);
|
||||
const [msg, setMsg] = useState("");
|
||||
const [busy, setBusy] = useState(false);
|
||||
const [sel, setSel] = useState<Record<string, boolean>>({});
|
||||
const [bulkRo, setBulkRo] = useState("");
|
||||
const [bulkPrice, setBulkPrice] = useState("");
|
||||
|
||||
const onOrder = useMemo(() => onOrderMap(s, byId), [s, byId]);
|
||||
const lastCount = useMemo(() => lastCountMap(s), [s]);
|
||||
const supplierOpts = ["All suppliers", ...new Set(s.catalog.map((it) => it.supplier).filter(Boolean))];
|
||||
|
||||
const kpi = useMemo(() => {
|
||||
// Out and below-reorder stay on the live catalogue: nobody reorders a garment that has been
|
||||
// retired, and flagging one would push it into Order flagged.
|
||||
let out = 0, below = 0;
|
||||
for (const v of variants) { if (!touched(s, L, v.key)) continue; const oh = onhand(s, L, v.key); if (oh <= 0) out++; if (oh <= reorderAt(s, v.key)) below++; }
|
||||
// Value walks the whole catalogue, discontinued lines included, because they are still garments
|
||||
// on a shelf. Deleting a product with stock on hand discontinues it instead (records stay
|
||||
// intact), so counting only live items made 40 retired tunics — $1,200 — vanish from this figure
|
||||
// the moment somebody pressed Delete, while the CSV below and Reports → Valuation both kept
|
||||
// counting them. Three surfaces, one shelf: they have to agree.
|
||||
let value = 0;
|
||||
for (const it of s.catalog) it.sizes.forEach((_sz, si) => { const oh = onhand(s, L, key(it.id, si)); if (oh > 0) value += oh * it.cost; });
|
||||
return { out, below, value };
|
||||
}, [s, L, variants]);
|
||||
|
||||
const items = useMemo(() => {
|
||||
const ql = q.trim().toLowerCase();
|
||||
const out: { it: Item; sizes: { si: number; size: string; key: string; oh: number; ro: number; touched: boolean; barcode: string; bound: string; onOrd: number; pl: number }[]; tot: number; flagged: number; val: number; onOrd: number }[] = [];
|
||||
for (const it of s.catalog) {
|
||||
if (it.archived && filter !== "All") continue;
|
||||
if (!inBucket(it, group)) continue;
|
||||
if (supplier !== "All suppliers" && it.supplier !== supplier) continue;
|
||||
const sizes = it.sizes.map((sz, si) => { const k = key(it.id, si); return { si, size: String(sz), key: k, oh: onhand(s, L, k), ro: reorderAt(s, k), touched: touched(s, L, k), barcode: bcFor(s, it, si), bound: bcBound(s, it, si), onOrd: onOrder.byKey[k] || 0, pl: plOf(s, k) }; });
|
||||
if (ql && !(it.item.toLowerCase().includes(ql) || it.sku.toLowerCase().includes(ql) || sizes.some((v) => v.barcode.includes(ql) || v.size.toLowerCase() === ql))) continue;
|
||||
const tot = sizes.reduce((t, v) => t + v.oh, 0);
|
||||
const flagged = sizes.filter((v) => v.touched && v.oh <= v.ro).length;
|
||||
if (filter === "In stock" && tot <= 0) continue;
|
||||
if (filter === "Flagged" && flagged === 0) continue;
|
||||
if (filter === "Out" && !sizes.some((v) => v.touched && v.oh <= 0)) continue;
|
||||
// Sizes still waiting on a supplier barcode — the work list for Scan sizes.
|
||||
if (filter === "No barcode" && !sizes.some((v) => !v.bound)) continue;
|
||||
out.push({ it, sizes, tot, flagged, val: sizes.reduce((t, v) => t + Math.max(0, v.oh) * it.cost, 0), onOrd: sizes.reduce((t, v) => t + v.onOrd, 0) });
|
||||
}
|
||||
if (sortKey) out.sort((a, b) => (sortKey === "name" ? a.it.item.localeCompare(b.it.item) : sortKey === "onhand" ? a.tot - b.tot : sortKey === "value" ? a.val - b.val : a.onOrd - b.onOrd) * sortDir);
|
||||
return out;
|
||||
}, [s, L, q, group, supplier, filter, sortKey, sortDir, onOrder]);
|
||||
|
||||
/* A real button, so the list can be sorted from the keyboard. The arrow glyph is decorative — the
|
||||
direction is said in the accessible name instead, because "▲" reads as nothing useful. This is a
|
||||
CSS grid rather than a <table>, so there is no columnheader for aria-sort to sit on. */
|
||||
const head = (k: SortKey, t: string, right = false) => {
|
||||
const on = sortKey === k;
|
||||
return (
|
||||
<button type="button"
|
||||
aria-label={on ? `${t} — sorted ${sortDir > 0 ? "ascending" : "descending"}, sort the other way` : `Sort by ${t}`}
|
||||
onClick={() => { if (on) setSortDir(-sortDir); else { setSortKey(k); setSortDir(1); } }}
|
||||
style={{ font: "inherit", color: "inherit", background: "none", border: 0, padding: 0, cursor: "pointer", textAlign: right ? "right" : "left", letterSpacing: "inherit", textTransform: "inherit", fontWeight: "inherit" }}>
|
||||
{t} <span aria-hidden="true">{on ? (sortDir > 0 ? "▲" : "▼") : ""}</span>
|
||||
</button>
|
||||
);
|
||||
};
|
||||
function camHit(raw: string) {
|
||||
const p = bcParse(s, raw);
|
||||
if (!p) { setCam(false); setBind(raw); return; }
|
||||
setCam(false); setQ(""); setGroup("All groups"); setSupplier("All suppliers"); setFilter("All"); setExpand(p.itemId);
|
||||
setTimeout(() => document.getElementById("item-" + p.itemId)?.scrollIntoView({ block: "center" }), 50);
|
||||
}
|
||||
/* Placing a size on a shelf and nudging a par level used to fire and forget. A refusal left the
|
||||
<select> showing the shelf the coordinator picked until the next snapshot quietly snapped it
|
||||
back, with nothing said — the worst of both, because the screen agreed with them for a while. */
|
||||
async function act(op: string, payload: unknown) { const r = await mutate(op, payload); setMsg(r.ok ? "" : r.error); }
|
||||
async function orderFlagged() {
|
||||
setBusy(true);
|
||||
const r = await mutate<{ added: number }>("stock.orderFlagged", {});
|
||||
setBusy(false);
|
||||
setMsg(!r.ok ? r.error : r.result.added ? `${r.result.added} line${r.result.added === 1 ? "" : "s"} added to draft supplier order(s) — review them under Ordering.` : "Everything flagged already has enough on order — nothing to add.");
|
||||
}
|
||||
function exportCsv() {
|
||||
const rows: (string | number)[][] = [];
|
||||
for (const it of s.catalog) it.sizes.forEach((sz, si) => { const k = key(it.id, si); const oh = onhand(s, L, k); rows.push([it.item, genderLabel(it.gender), it.sku, it.supplier, String(sz), bcBound(s, it, si), oh, reorderAt(s, k), onOrder.byKey[k] || 0, lastCount[k] || "", it.cost, (Math.max(0, oh) * it.cost).toFixed(2)]); });
|
||||
downloadCsv(`threadcount-stock-${s.today}.csv`, csvOf(["Item", "Gender", "SKU", "Supplier", "Size", "Barcode", "On hand", "Reorder at", "On order", "Last counted", "Unit cost", "Value"], rows));
|
||||
}
|
||||
const cols = (isAdmin ? "18px " : "") + "16px minmax(0,1fr) 110px 90px 140px 80px";
|
||||
const locOpts = locTree(s).map(({ loc, depth }) => ({ id: loc.id, name: "\u00a0".repeat(depth * 2) + loc.name }));
|
||||
const sizeCols = "70px 110px 1fr 80px 76px 80px 110px 130px 120px 100px";
|
||||
|
||||
const selIds = Object.keys(sel).filter((id) => sel[id] && byId[id]);
|
||||
const shownIds = items.slice(0, limit).map((x) => x.it.id);
|
||||
const allSel = shownIds.length > 0 && shownIds.every((id) => sel[id]);
|
||||
const selectAll = () => setSel((m) => { const n = { ...m }; for (const id of shownIds) n[id] = !allSel; return n; });
|
||||
// The facility's own staff groups, not whatever garments happen to be tagged with: a group nothing
|
||||
// is tagged for yet is exactly the one somebody is about to move garments into.
|
||||
const groupOpts = [ALL_GROUPS, ...s.settings.staffGroups.filter((g) => groupKey(g) !== "all" && groupKey(g) !== groupKey(ALL_GROUPS))];
|
||||
const bp = bulkPrice.trim();
|
||||
const priceOk = /^[+-]\d+(\.\d+)?%$/.test(bp) || /^\$?\d+(\.\d+)?$/.test(bp);
|
||||
const sm: React.CSSProperties = { minHeight: 28, padding: "2px 10px" };
|
||||
const vr: React.CSSProperties = { width: 1, height: 22, background: "var(--color-divider)" };
|
||||
const cb: React.CSSProperties = { width: 14, height: 14, accentColor: "var(--color-accent)", cursor: "pointer", margin: 0 };
|
||||
async function bulk(action: string, value?: string, extra?: Record<string, unknown>) {
|
||||
setBusy(true);
|
||||
try {
|
||||
const r = await mutate<{ message: string }>("catalog.bulk", { ids: selIds, action, value, ...extra });
|
||||
setMsg(r.ok ? r.result.message : r.error);
|
||||
if (r.ok) { setSel({}); setBulkRo(""); setBulkPrice(""); }
|
||||
} finally { setBusy(false); }
|
||||
}
|
||||
|
||||
return (
|
||||
<section>
|
||||
<PageHead eyebrow="Inventory" title="Stock on Hand" below={<InvTabs active="stock" />}>
|
||||
<div style={{ fontSize: 13, color: "var(--color-neutral-700)", textAlign: "right" }}>
|
||||
<div>{variants.length} variants · {s.catalog.filter((i) => !i.archived).length} items</div>
|
||||
</div>
|
||||
<button className="btn btn-secondary" onClick={() => setAdjust(null)}>Adjust quantity</button>
|
||||
{isAdmin && <button className="btn btn-secondary" onClick={() => setScanAdd(true)}>Scan to add</button>}
|
||||
{isAdmin && <button className="btn btn-primary" onClick={() => setNewItem(true)}>Add item</button>}
|
||||
</PageHead>
|
||||
{/* An empty size and a size at its reorder level are the two figures that send somebody to the
|
||||
Ordering screen, so they are the two that can be flagged. The value and the units on order
|
||||
are facts, and a fact never wears the rule. */}
|
||||
<KpiStrip items={[
|
||||
{ val: money(kpi.value), label: "On-hand value", note: "every garment on the shelf, at cost" },
|
||||
{ val: kpi.out, label: "Sizes out of stock", flag: kpi.out > 0, note: kpi.out > 0 ? "nothing to hand over the counter" : "every size has something on the shelf" },
|
||||
{ val: kpi.below, label: "At or below reorder", flag: kpi.below > 0, note: kpi.below > 0 ? "Order flagged drafts the order" : "nothing to reorder" },
|
||||
{ val: onOrder.total, label: "Units on open orders", note: "placed and not yet received" },
|
||||
]} />
|
||||
<div style={{ display: "flex", gap: "var(--space-3)", alignItems: "center", margin: "var(--space-4) 0", flexWrap: "wrap" }}>
|
||||
<input className="input" style={{ width: 240 }} aria-label="Search the catalogue by item, SKU or barcode" placeholder="Search item, SKU or barcode" value={q} onChange={(e) => setQ(e.target.value)} />
|
||||
<select className="input" style={{ width: 160 }} aria-label="Staff group" value={group} onChange={(e) => setGroup(e.target.value)}>{[ALL_GROUPS, ...s.settings.staffGroups].map((g) => <option key={g}>{g}</option>)}</select>
|
||||
<select className="input" style={{ width: 180 }} aria-label="Supplier" value={supplier} onChange={(e) => setSupplier(e.target.value)}>{supplierOpts.map((g) => <option key={g}>{g}</option>)}</select>
|
||||
<span role="group" aria-label="Which lines to show"><Seg opts={FILTERS} value={filter} onChange={(f) => { setFilter(f); setMsg(""); }} /></span>
|
||||
<button className="btn btn-ghost" onClick={() => setCam(true)}>Camera lookup</button>
|
||||
<div style={{ marginLeft: "auto", display: "flex", gap: "var(--space-2)", alignItems: "center" }}>
|
||||
{kpi.below > 0 && <button className="btn btn-secondary" onClick={orderFlagged} disabled={busy}>Order flagged ({kpi.below})</button>}
|
||||
<button className="btn btn-ghost" onClick={exportCsv}>Export CSV</button>
|
||||
</div>
|
||||
</div>
|
||||
{isAdmin && selIds.length > 0 && (
|
||||
<div style={{ display: "flex", gap: "var(--space-2)", alignItems: "center", border: "2px solid var(--color-text)", background: "var(--color-surface)", padding: "var(--space-2) var(--space-3)", marginBottom: "var(--space-3)", flexWrap: "wrap" }}>
|
||||
<b style={{ fontSize: 13, flex: "none" }}>{selIds.length} selected</b>
|
||||
<button className="btn btn-ghost" style={sm} onClick={() => setSel({})}>Clear</button>
|
||||
<span style={vr} />
|
||||
<button className="btn btn-ghost" style={sm} disabled={busy} onClick={() => bulk("discontinue")}>Discontinue</button>
|
||||
<button className="btn btn-ghost" style={sm} disabled={busy} onClick={() => bulk("reinstate")}>Reinstate</button>
|
||||
<button className="btn btn-ghost" style={sm} disabled={busy} onClick={() => { if (confirm(`Delete ${selIds.length} product${selIds.length === 1 ? "" : "s"}? Anything with history or stock on hand is discontinued instead.`)) bulk("delete"); }}>Delete</button>
|
||||
<span style={vr} />
|
||||
<select className="input" style={{ ...sm, width: 160, fontSize: 12 }} aria-label="Change the supplier on the selected products" value="" disabled={busy} onChange={(e) => { if (e.target.value) bulk("supplier", e.target.value); }}>
|
||||
<option value="">Change supplier…</option>{s.settings.suppliers.map((o) => <option key={o} value={o}>{o}</option>)}
|
||||
</select>
|
||||
<select className="input" style={{ ...sm, width: 160, fontSize: 12 }} aria-label="Change the staff group on the selected products" value="" disabled={busy} onChange={(e) => { const v = e.target.value; if (v) bulk("group", undefined, { groups: v === ALL_GROUPS ? [] : [v] }); }}>
|
||||
<option value="">Change group…</option>{groupOpts.map((o) => <option key={o} value={o}>{o}</option>)}
|
||||
</select>
|
||||
<span style={{ display: "flex", gap: 4, alignItems: "center" }}>
|
||||
<input className="input" style={{ ...sm, width: 64, fontSize: 12 }} aria-label="Reorder level to set on the selected products" placeholder="Level" inputMode="numeric" value={bulkRo} onChange={(e) => setBulkRo(e.target.value.replace(/[^0-9]/g, ""))} />
|
||||
<button className="btn btn-ghost" style={sm} disabled={busy || bulkRo === ""} onClick={() => bulk("reorder", bulkRo)}>Set reorder</button>
|
||||
</span>
|
||||
<span style={{ display: "flex", gap: 4, alignItems: "center" }}>
|
||||
<input className="input" style={{ ...sm, width: 84, fontSize: 12 }} aria-label="New price, or a percentage change, for the selected products" placeholder="$ or +5%" value={bulkPrice} onChange={(e) => setBulkPrice(e.target.value)} />
|
||||
<button className="btn btn-ghost" style={sm} disabled={busy || !priceOk} onClick={() => bulk("price", bulkPrice.trim())}>Apply price</button>
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
<Notice msg={msg} />
|
||||
<div className="table-wrap">
|
||||
<div style={{ display: "grid", gridTemplateColumns: cols, gap: "var(--space-3)", padding: "0 var(--space-2) var(--space-1)", fontSize: 11, letterSpacing: "0.06em", textTransform: "uppercase", color: "var(--color-neutral-600)", fontWeight: 600, minWidth: 640 }}>
|
||||
{isAdmin && <input type="checkbox" checked={allSel} onChange={selectAll} title="Select all shown" aria-label="Select every item shown" style={cb} />}
|
||||
<div></div>{head("name", "Item")}{head("value", "Value", true)}{head("onorder", "On order", true)}<div style={{ textAlign: "right" }}>Status</div>{head("onhand", "On hand", true)}
|
||||
</div>
|
||||
<div style={{ borderTop: "2px solid var(--color-text)", minWidth: 640 }}>
|
||||
{items.length === 0 && <Empty>{s.catalog.length === 0 ? "The catalogue is empty — add an item, or import it in Settings → Data." : "No items match."}</Empty>}
|
||||
{items.slice(0, limit).map((x) => {
|
||||
const open = expand === x.it.id;
|
||||
const inStock = x.sizes.filter((v) => v.oh > 0).length;
|
||||
return (
|
||||
<div key={x.it.id} id={"item-" + x.it.id} style={{ borderBottom: "1px solid var(--color-divider)", opacity: x.it.archived ? 0.55 : 1 }}>
|
||||
{/* The row can't become one button: it already carries a select-all checkbox and a
|
||||
link to the product page, and nesting those inside a button makes both unreachable.
|
||||
The caret is promoted to a real disclosure control instead, so the sizes can be
|
||||
opened from the keyboard; clicking the row stays a mouse convenience. */}
|
||||
<div className="row-hover" onClick={() => setExpand(open ? null : x.it.id)} style={{ display: "grid", gridTemplateColumns: cols, gap: "var(--space-3)", alignItems: "center", padding: "var(--space-3) var(--space-2)", cursor: "pointer" }}>
|
||||
{isAdmin && <input type="checkbox" checked={!!sel[x.it.id]} aria-label={`Select ${x.it.item}`} onClick={(e) => e.stopPropagation()} onChange={() => setSel((m) => ({ ...m, [x.it.id]: !m[x.it.id] }))} style={cb} />}
|
||||
<button type="button" aria-expanded={open} aria-label={`${open ? "Hide" : "Show"} the sizes of ${x.it.item}`} onClick={(e) => { e.stopPropagation(); setExpand(open ? null : x.it.id); }} style={{ font: "inherit", fontSize: 11, color: "var(--color-neutral-600)", background: "none", border: 0, padding: 0, cursor: "pointer", lineHeight: 1 }}>{open ? "▾" : "▸"}</button>
|
||||
<div style={{ minWidth: 0 }}>
|
||||
<div style={{ fontSize: 14, fontWeight: 600, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
|
||||
<Link href={`/app/stock/${x.it.id}`} className="link-name" onClick={(e) => e.stopPropagation()}>{x.it.item}</Link>
|
||||
{x.it.archived && <span className="tag tag-outline" style={{ marginLeft: 8 }}>Discontinued</span>}
|
||||
</div>
|
||||
<div style={{ fontSize: 12, color: "var(--color-neutral-700)" }}>{genderLabel(x.it.gender)} · {x.it.sku || "—"} · {x.it.supplier || "—"} · {money(x.it.cost)} each · {inStock} of {x.sizes.length} sizes in stock{x.sizes.reduce((t, v) => t + v.pl, 0) > 0 ? ` · ${x.sizes.reduce((t, v) => t + v.pl, 0)} pre-loved` : ""}</div>
|
||||
</div>
|
||||
<div style={{ textAlign: "right", fontSize: 13, fontWeight: 600 }}>{money(x.val)}</div>
|
||||
<div style={{ textAlign: "right", fontSize: 13, color: x.onOrd > 0 ? "var(--color-text)" : "var(--color-neutral-600)" }}>{x.onOrd > 0 ? "+" + x.onOrd : "—"}</div>
|
||||
{/* tag-flag carries the mark the plain accent tag does not: on a list this long the
|
||||
colour alone is a row you have to go looking for. */}
|
||||
<div style={{ textAlign: "right" }}>{x.flagged > 0 && <span className="tag tag-flag">{x.flagged} to reorder</span>}</div>
|
||||
<div className="tc-row-fig" style={{ textAlign: "right", color: x.tot > 0 ? "var(--color-text)" : "var(--color-neutral-600)" }}>{x.tot}</div>
|
||||
</div>
|
||||
{open && (
|
||||
<div style={{ padding: "0 var(--space-2) var(--space-3) calc(16px + var(--space-3) + var(--space-2))" }}>
|
||||
<div style={{ display: "grid", gridTemplateColumns: sizeCols, gap: "var(--space-2)", fontSize: 11, letterSpacing: "0.06em", textTransform: "uppercase", color: "var(--color-neutral-600)", borderBottom: "2px solid var(--color-text)", paddingBottom: "var(--space-1)" }}>
|
||||
<div>Size</div><div>Barcode</div><div></div><div style={{ textAlign: "right" }}>On hand</div><div style={{ textAlign: "right" }}>Pre-loved</div><div style={{ textAlign: "right" }}>On order</div><div style={{ textAlign: "right" }}>Last counted</div><div>Location</div><div style={{ textAlign: "right" }}>Reorder at</div><div></div>
|
||||
</div>
|
||||
{x.sizes.map((v) => {
|
||||
const status = v.oh <= 0 ? (v.touched ? "OUT" : "—") : v.oh <= v.ro ? "REORDER" : "OK";
|
||||
return (
|
||||
<div key={v.si} style={{ display: "grid", gridTemplateColumns: sizeCols, gap: "var(--space-2)", alignItems: "center", padding: "var(--space-1) 0", borderBottom: "1px solid var(--color-divider)", fontSize: 13 }}>
|
||||
<div style={{ fontWeight: 600 }}>{v.size}</div>
|
||||
{/* Everything muted on this screen is 600, not 400: 400 is the meta colour
|
||||
for the dark rail and reads at under 2:1 on paper, which turned a
|
||||
"Not bound" and every dash for nothing-on-order into a ghost. */}
|
||||
<div style={{ fontSize: 12, color: "var(--color-neutral-600)" }}>{v.bound || "Not bound"}</div>
|
||||
<div><span className={status === "OK" ? "tag tag-neutral" : status === "—" ? "tag tag-outline" : "tag tag-flag"}>{status}</span></div>
|
||||
<div style={{ textAlign: "right", fontWeight: 700, color: status === "OK" || status === "—" ? "var(--color-text)" : "var(--color-accent-700)" }}>{v.oh}</div>
|
||||
<div style={{ textAlign: "right", color: v.pl > 0 ? "var(--color-text)" : "var(--color-neutral-600)" }}>{v.pl > 0 ? v.pl : "—"}</div>
|
||||
<div style={{ textAlign: "right", color: v.onOrd > 0 ? "var(--color-text)" : "var(--color-neutral-600)" }}>{v.onOrd > 0 ? "+" + v.onOrd : "—"}</div>
|
||||
<div style={{ textAlign: "right", fontSize: 12, color: "var(--color-neutral-600)" }}>{lastCount[v.key] ? fmtDate(lastCount[v.key]) : "never"}</div>
|
||||
<div>
|
||||
{/* Where this size lives. Counting a location on the phone walks its bays too. */}
|
||||
<select className="input" style={{ minHeight: 26, padding: "1px 4px", fontSize: 12 }} value={s.placed[v.key] || ""}
|
||||
aria-label={`Where ${x.it.item} size ${v.size} lives`}
|
||||
onChange={(e) => act("location.place", { itemId: x.it.id, si: v.si, locationId: e.target.value })}
|
||||
disabled={s.locations.length === 0} title={s.locations.length === 0 ? "Add locations in Settings first" : "Where this size lives"}>
|
||||
<option value="">{s.locations.length === 0 ? "—" : "Unplaced"}</option>
|
||||
{locOpts.map((o) => <option key={o.id} value={o.id}>{o.name}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
<div style={{ textAlign: "right" }}>
|
||||
<span style={{ display: "inline-flex", alignItems: "center", gap: "var(--space-1)" }}>
|
||||
{isAdmin && <button className="btn btn-ghost" style={{ padding: "0 6px", minHeight: 22 }} aria-label={`Lower the reorder level for ${x.it.item} size ${v.size}`} onClick={() => act("stock.reorder", { itemId: x.it.id, si: v.si, reorder: Math.max(0, v.ro - 1) })}>−</button>}
|
||||
<span style={{ width: 20, textAlign: "center" }}>{v.ro}</span>
|
||||
{isAdmin && <button className="btn btn-ghost" style={{ padding: "0 6px", minHeight: 22 }} aria-label={`Raise the reorder level for ${x.it.item} size ${v.size}`} onClick={() => act("stock.reorder", { itemId: x.it.id, si: v.si, reorder: v.ro + 1 })}>+</button>}
|
||||
</span>
|
||||
</div>
|
||||
<div style={{ textAlign: "right" }}><button className="btn btn-ghost" style={{ minHeight: 26, padding: "2px 8px" }} aria-label={`Adjust the quantity of ${x.it.item} size ${v.size}`} onClick={() => setAdjust({ itemId: x.it.id, si: v.si })}>Adjust</button></div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
{items.length > limit && <button className="btn btn-secondary" style={{ marginTop: "var(--space-3)" }} onClick={() => setLimit(100000)}>Show all {items.length} items</button>}
|
||||
<div style={{ marginTop: "var(--space-3)", fontSize: 12, color: "var(--color-neutral-700)" }}>Showing {Math.min(limit, items.length)} of {items.length} matching items — click a row for its sizes, click the name for the product page. Order flagged drafts a supplier order for everything at or below its reorder level, netting off what's already on order.</div>
|
||||
{adjust !== false && <AdjustDialog init={adjust} onClose={() => setAdjust(false)} />}
|
||||
{newItem && <ItemDialog onClose={() => setNewItem(false)} onSaved={(id) => { setQ(""); setGroup("All groups"); setFilter("All"); setExpand(id); }} />}
|
||||
{scanAdd && <ScanAddDialog onClose={() => setScanAdd(false)} />}
|
||||
{cam && <Camera onHit={camHit} message="" onClose={() => setCam(false)} />}
|
||||
{bind && <BindDialog code={bind} onClose={() => setBind("")} onBound={(itemId) => setExpand(itemId)} />}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,268 @@
|
||||
"use client";
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { useDerived, useSnap } from "@/lib/client";
|
||||
import { PageHead, Empty, InvTabs, KpiStrip, Notice, Seg } from "@/components/ui";
|
||||
import { BindDialog } from "@/components/dialogs";
|
||||
import Camera from "@/components/Camera";
|
||||
import { ALL_GROUPS, bcBound, bcFor, bcParse, csvOf, fmtDate, formatInZone, inBucket, key, label, money, onhand, signedInt, signedMoney, plOf, csvEsc } from "@/lib/compute";
|
||||
import { downloadCsv, esc, openPrintWindow } from "@/lib/print";
|
||||
|
||||
/* An in-progress count belongs to the person doing it, not to the browser. On a shared linen-room
|
||||
desktop the old fixed key handed whoever signed in next a half-finished tally with nothing to say
|
||||
whose it was, and they committed it under their own name. Scoping the key to the user id keeps
|
||||
two counters on one machine apart; the saved-at stamp lets the screen say how old a restored
|
||||
tally is, because a count from last Tuesday is not one to carry on with. */
|
||||
const countsKey = (userId: string) => `threadcount-counts:${userId}`;
|
||||
type Saved = { counts: Record<string, string>; savedAt: string };
|
||||
const VIEWS = ["All", "Uncounted"] as const;
|
||||
const MODES = ["Normal", "Blind"] as const;
|
||||
const POOLS = ["Shelf", "Pre-loved"] as const;
|
||||
/* The same four the phone offers on the variance screen (app/m/(app)/count/[id]/variance). They are
|
||||
deliberately the same words: a variance filed at the counter and one filed on the floor end up in
|
||||
the same shrinkage report, and a fifth wording here would fragment it. */
|
||||
const REASONS = ["At laundry", "Condemned", "Missing", "Other"];
|
||||
|
||||
export default function StocktakePage() {
|
||||
const { s, mutate } = useSnap();
|
||||
const { L, byId, variants } = useDerived();
|
||||
const [counts, setCountsRaw] = useState<Record<string, string>>({});
|
||||
const [reason, setReason] = useState<Record<string, string>>({});
|
||||
const [savedAt, setSavedAt] = useState("");
|
||||
const [loaded, setLoaded] = useState(false);
|
||||
const [scan, setScan] = useState("");
|
||||
const [msg, setMsg] = useState("");
|
||||
const [q, setQ] = useState("");
|
||||
const [group, setGroup] = useState("All groups");
|
||||
const [view, setView] = useState<(typeof VIEWS)[number]>("All");
|
||||
const [mode, setMode] = useState<(typeof MODES)[number]>("Normal");
|
||||
const [cam, setCam] = useState(false);
|
||||
useEffect(() => { const h = () => { setCamMsg(""); setCam(true); }; window.addEventListener("tc-scan", h); return () => window.removeEventListener("tc-scan", h); }, []);
|
||||
const [camMsg, setCamMsg] = useState("");
|
||||
const [bind, setBind] = useState("");
|
||||
const [expand, setExpand] = useState<string | null>(null);
|
||||
const [limit, setLimit] = useState(60);
|
||||
const [busy, setBusy] = useState(false);
|
||||
const [pool, setPool] = useState<(typeof POOLS)[number]>("Shelf");
|
||||
const blind = mode === "Blind";
|
||||
const plMode = pool === "Pre-loved";
|
||||
// Pre-loved counts live under a "pl:" prefix so a shelf take and a pool take can be in progress together.
|
||||
const kOf = (k: string) => (plMode ? "pl:" + k : k);
|
||||
const sysOf = (k: string) => (plMode ? plOf(s, k) : onhand(s, L, k));
|
||||
|
||||
// Counts persist across reloads until applied or cleared.
|
||||
const KEY = countsKey(s.session.userId);
|
||||
useEffect(() => {
|
||||
try {
|
||||
const raw = JSON.parse(localStorage.getItem(KEY) || "{}") as Partial<Saved>;
|
||||
if (raw && typeof raw.counts === "object" && raw.counts) { setCountsRaw(raw.counts); setSavedAt(typeof raw.savedAt === "string" ? raw.savedAt : ""); }
|
||||
} catch { /* ignore */ }
|
||||
setLoaded(true);
|
||||
}, [KEY]);
|
||||
const setCounts = (c: Record<string, string>) => {
|
||||
setCountsRaw(c);
|
||||
const at = new Date().toISOString();
|
||||
setSavedAt(at);
|
||||
try { localStorage.setItem(KEY, JSON.stringify({ counts: c, savedAt: at } satisfies Saved)); } catch { /* ignore */ }
|
||||
};
|
||||
|
||||
const has = (k: string) => counts[k] !== undefined && counts[k] !== "";
|
||||
function countPlus(itemId: string, si: number) {
|
||||
const k = kOf(key(itemId, si));
|
||||
const n = (parseInt(counts[k] || "0", 10) || 0) + 1;
|
||||
setCounts({ ...counts, [k]: String(n) });
|
||||
const it = byId[itemId];
|
||||
return `${label(it)} ${it?.sizes[si]} → ${n}`;
|
||||
}
|
||||
function handleScan(raw: string) {
|
||||
const p = bcParse(s, raw);
|
||||
if (!p) { setScan(""); setBind(raw.trim()); return; }
|
||||
setMsg(countPlus(p.itemId, p.si)); setScan("");
|
||||
}
|
||||
function camHit(raw: string) {
|
||||
const p = bcParse(s, raw);
|
||||
if (!p) { setCam(false); setBind(raw.trim()); return; }
|
||||
setCamMsg("Counted " + countPlus(p.itemId, p.si));
|
||||
}
|
||||
|
||||
const tq = q.trim().toLowerCase();
|
||||
const scopeAll = useMemo(() => variants.filter((v) => inBucket(v.item, group)), [variants, group]);
|
||||
const match = useMemo(() => scopeAll.filter((v) => (view !== "Uncounted" || !has(kOf(v.key))) && (!tq || v.item.item.toLowerCase().includes(tq) || v.item.sku.toLowerCase().includes(tq) || v.size.toLowerCase() === tq || bcFor(s, v.item, v.si).includes(tq))),
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
[scopeAll, view, tq, counts, s, plMode]);
|
||||
// A gap this big or bigger has to say why. The server refuses the whole count otherwise
|
||||
// (lib/ops.ts, stocktake.apply), so without a chooser on this screen a desktop count with a real
|
||||
// discrepancy could never be filed at all — the only ways out were to abandon it or type a
|
||||
// figure nobody had counted.
|
||||
const gate = Math.max(1, s.settings.varianceReason);
|
||||
let counted = 0, variances = 0, netVal = 0;
|
||||
const bigGaps: string[] = [];
|
||||
for (const v of variants) if (has(kOf(v.key))) { counted++; const diff = (parseInt(counts[kOf(v.key)], 10) || 0) - sysOf(v.key); if (diff !== 0) { variances++; netVal += diff * (plMode ? 0 : v.item.cost); if (Math.abs(diff) >= gate) bigGaps.push(kOf(v.key)); } }
|
||||
const needsReason = bigGaps.filter((k) => !reason[k]);
|
||||
const scopeCounted = scopeAll.filter((v) => has(kOf(v.key))).length;
|
||||
const pct = Math.round((scopeCounted / Math.max(scopeAll.length, 1)) * 100);
|
||||
// A line that still owes a reason has to be reachable whatever the filter says. "Uncounted" hides
|
||||
// every counted line, and the row limit hides the tail, so without this Apply could be blocked by
|
||||
// a gap the screen was refusing to show. Those rows are forced to the top instead.
|
||||
const needSet = new Set(needsReason);
|
||||
const forced = needSet.size ? variants.filter((v) => needSet.has(kOf(v.key)) && !match.includes(v)) : [];
|
||||
const rows = [...forced, ...[...match].sort((a, b) => (has(kOf(b.key)) ? 1 : 0) - (has(kOf(a.key)) ? 1 : 0))];
|
||||
|
||||
async function apply() {
|
||||
if (counted === 0 || busy) return;
|
||||
if (needsReason.length) { setMsg(`A gap of ${gate} or more needs a reason — ${needsReason.length} line${needsReason.length === 1 ? "" : "s"} still to go.`); return; }
|
||||
setBusy(true);
|
||||
const lines = variants.filter((v) => has(kOf(v.key))).map((v) => ({ itemId: v.itemId, si: v.si, counted: parseInt(counts[kOf(v.key)], 10) || 0, reason: reason[kOf(v.key)] || "" }));
|
||||
const r = await mutate("stocktake.apply", { lines, mode: plMode ? "preloved" : "shelf" });
|
||||
setBusy(false);
|
||||
if (!r.ok) { setMsg(r.error); return; }
|
||||
const kept: Record<string, string> = {}; for (const k in counts) if (plMode ? !k.startsWith("pl:") : k.startsWith("pl:")) kept[k] = counts[k];
|
||||
const keptReasons: Record<string, string> = {}; for (const k in reason) if (kept[k]) keptReasons[k] = reason[k];
|
||||
setCounts(kept); setReason(keptReasons);
|
||||
setMsg(variances ? (plMode ? "Pre-loved pool updated and filed in stocktake history." : "Adjustments applied and filed in stocktake history.") : "Count filed in stocktake history — everything matched.");
|
||||
}
|
||||
function zeroFill() {
|
||||
const c = { ...counts }; let n = 0;
|
||||
for (const v of match) if (!has(kOf(v.key))) { c[kOf(v.key)] = "0"; n++; }
|
||||
setCounts(c); setMsg(n ? `${n} uncounted line${n === 1 ? "" : "s"} in scope set to zero — review before applying.` : "Everything in scope is already counted.");
|
||||
}
|
||||
function printCountSheet() {
|
||||
const byItem: Record<string, typeof match> = {};
|
||||
for (const v of match) (byItem[v.itemId] = byItem[v.itemId] || []).push(v);
|
||||
let rowsHtml = "";
|
||||
for (const itemId in byItem) {
|
||||
const it = byId[itemId];
|
||||
rowsHtml += `<tr class="ih"><td colspan="4">${esc(label(it))}${it?.sku ? " · " + esc(it.sku) : ""}</td></tr>`;
|
||||
// Only the real supplier code goes on paper — a generated id isn't on the garment, so printing
|
||||
// it would put an unscannable number in front of whoever is counting.
|
||||
for (const v of byItem[itemId]) rowsHtml += `<tr><td>${esc(v.size)}</td><td>${esc(bcBound(s, v.item, v.si))}</td><td class="r">${blind ? "" : sysOf(v.key)}</td><td class="box"></td></tr>`;
|
||||
}
|
||||
openPrintWindow("Count sheet", `<h1>ThreadCount — ${plMode ? "Pre-loved pool" : "Stocktake"} count sheet</h1><div class="meta">${esc(s.settings.facility)} · Scope: ${esc(group)}${tq ? " · filter “" + esc(q) + "”" : ""} · ${match.length} lines · Printed ${esc(fmtDate(s.today))} · Counted by ____________ ${blind ? "· BLIND COUNT" : ""}</div><table><tr><th>Size</th><th>Barcode</th><th class="r">${blind ? "" : "System"}</th><th>Counted</th></tr>${rowsHtml}</table>`, { width: 780, height: 920 });
|
||||
}
|
||||
function historyCsv(h: (typeof s.stocktakes)[number]) {
|
||||
downloadCsv(`threadcount-stocktake-${h.date}.csv`, `Stocktake ${h.date} by ${csvEsc(h.by)}${h.mode === "preloved" ? " · pre-loved pool" : ""}\n` + csvOf(["Item", "Size", "System", "Counted", "Variance", "Unit cost", "Variance value"], h.lines.filter((l) => l.counted !== l.sys).map((l) => { const it = byId[l.itemId]; const diff = l.counted - l.sys; return [label(it), it ? String(it.sizes[l.si]) : "?", l.sys, l.counted, diff, it ? it.cost : "", it ? (diff * it.cost).toFixed(2) : ""]; })));
|
||||
}
|
||||
|
||||
return (
|
||||
<section>
|
||||
<PageHead eyebrow="Inventory" title="Stock Take" below={<InvTabs active="take" />}>
|
||||
<button className="btn btn-ghost" onClick={printCountSheet}>Print count sheet</button>
|
||||
<button className="btn btn-ghost" onClick={() => { setCounts({}); setReason({}); setMsg(""); }}>Clear counts</button>
|
||||
<button className="btn btn-primary" onClick={apply} disabled={counted === 0 || busy || !loaded || needsReason.length > 0} title={needsReason.length ? `${needsReason.length} large gap${needsReason.length === 1 ? "" : "s"} still need a reason` : undefined}>{variances === 0 ? "File count" : "Apply adjustments"}</button>
|
||||
</PageHead>
|
||||
{/* Where the count is up to, at a size that reads from the shelf you are standing at rather
|
||||
than from a line of small print beside the buttons. A blind count drops two of these on
|
||||
purpose: showing a variance would tell the counter the answer. */}
|
||||
<KpiStrip items={[
|
||||
{ val: counted, label: "Lines counted", note: `${scopeCounted} of ${scopeAll.length} in the scope you are filtered to` },
|
||||
...(blind ? [] : [
|
||||
{ val: variances, label: "Variances", flag: variances > 0, note: variances > 0 ? "the shelf disagrees with the ledger" : "every counted line matched" },
|
||||
{ val: signedMoney(netVal), label: "Net value", flag: netVal !== 0, note: plMode ? "the pre-loved pool is carried at nil" : "what applying this count would move" },
|
||||
]),
|
||||
{ val: needsReason.length, label: "Gaps needing a reason", flag: needsReason.length > 0, note: needsReason.length > 0 ? "the count cannot be filed until each has one" : `a gap of ${gate} or more has to say why` },
|
||||
]} />
|
||||
<div style={{ display: "flex", gap: "var(--space-3)", alignItems: "center", margin: "var(--space-4) 0 var(--space-2)", flexWrap: "wrap" }}>
|
||||
<input className="input" style={{ width: 280 }} aria-label="Scan a barcode to add one to its count" placeholder="Scan barcode to count +1, then Enter" value={scan} onChange={(e) => setScan(e.target.value)} onKeyDown={(e) => { if (e.key === "Enter" && scan.trim()) handleScan(scan); }} autoFocus />
|
||||
<button className="btn btn-ghost" onClick={() => { setCamMsg(""); setCam(true); }}>Camera</button>
|
||||
<input className="input" style={{ width: 180 }} aria-label="Filter the lines to count" placeholder="Filter items…" value={q} onChange={(e) => setQ(e.target.value)} />
|
||||
<select className="input" style={{ width: 160 }} aria-label="Staff group to count" value={group} onChange={(e) => setGroup(e.target.value)}>{[ALL_GROUPS, ...s.settings.staffGroups].map((g) => <option key={g}>{g}</option>)}</select>
|
||||
{/* Three segmented controls in a row: without a name on each group a screen reader reads six
|
||||
bare words ("Shelf, Pre-loved, All, Uncounted…") with nothing to say what they switch. */}
|
||||
<span role="group" aria-label="Which pool to count"><Seg opts={POOLS} value={pool} onChange={setPool} /></span>
|
||||
<span role="group" aria-label="Which lines to show"><Seg opts={VIEWS} value={view} onChange={setView} /></span>
|
||||
<span role="group" aria-label="Counting mode"><Seg opts={MODES} value={mode} onChange={setMode} /></span>
|
||||
<button className="btn btn-ghost" onClick={zeroFill}>Zero uncounted in scope</button>
|
||||
</div>
|
||||
<div style={{ display: "flex", alignItems: "center", gap: "var(--space-3)", marginBottom: "var(--space-3)" }}>
|
||||
<div className="bar-track" style={{ flex: 1 }}><div className="bar-fill" style={{ width: pct + "%" }} /></div>
|
||||
{/* The tile above already gives the two numbers; the bar is here to be glanced at, so it
|
||||
says the one thing the numbers do not — how far along this is. */}
|
||||
<span style={{ fontSize: 12, color: "var(--color-neutral-700)", flex: "none" }}>{pct}% of this scope counted</span>
|
||||
</div>
|
||||
{/* Whose tally this is is settled by the key it was saved under; when it was entered is not,
|
||||
and a count picked up three days later is a different thing from one left ten minutes ago. */}
|
||||
{loaded && counted > 0 && savedAt && <div style={{ fontSize: 12, color: "var(--color-neutral-700)", marginBottom: "var(--space-2)" }}>Carrying on your saved tally — last entry {formatInZone(savedAt, s.tz, { day: "numeric", month: "short", hour: "numeric", minute: "2-digit" })}. Clear counts to start again.</div>}
|
||||
<Notice msg={msg} />
|
||||
<div className="tc-panel">
|
||||
<div className="tc-panel-head">
|
||||
<div>{plMode ? "Pre-loved pool" : "Shelf"} — lines to count</div>
|
||||
<div className="tc-panel-aside">{Math.min(limit, rows.length)} of {match.length} in scope{blind ? " · blind" : ""}</div>
|
||||
</div>
|
||||
<div className="table-wrap">
|
||||
<table className="table">
|
||||
<thead><tr><th style={{ textAlign: "left" }}>Item</th><th style={{ textAlign: "left" }}>Size</th><th style={{ textAlign: "right" }}>{blind ? "" : "System"}</th><th style={{ textAlign: "right", width: 110 }}>Counted</th><th style={{ textAlign: "right" }}>{blind ? "" : "Variance"}</th><th style={{ textAlign: "left", width: 170 }}>Reason</th></tr></thead>
|
||||
<tbody>
|
||||
{rows.slice(0, limit).map((v) => {
|
||||
const ck = kOf(v.key); const sys = sysOf(v.key); const h = has(ck); const varr = h ? (parseInt(counts[ck], 10) || 0) - sys : 0;
|
||||
const big = h && Math.abs(varr) >= gate;
|
||||
const name = `${label(v.item)} size ${v.size}`;
|
||||
return (
|
||||
<tr key={v.key}>
|
||||
<td style={{ fontWeight: 600 }}>{label(v.item)}</td>
|
||||
<td>{v.size}</td>
|
||||
<td style={{ textAlign: "right" }}>{blind ? "" : sys}</td>
|
||||
<td style={{ textAlign: "right" }}><input className="input" style={{ width: 70, textAlign: "right", minHeight: 28, padding: "2px 8px" }} inputMode="numeric" aria-label={`Counted — ${name}`} value={h ? counts[ck] : ""} onChange={(e) => setCounts({ ...counts, [ck]: e.target.value.replace(/[^0-9]/g, "") })} /></td>
|
||||
<td style={{ textAlign: "right", fontWeight: 700, color: !blind && h && varr !== 0 ? "var(--color-accent-700)" : "var(--color-neutral-700)" }}>{blind ? (h ? "✓" : "") : h ? signedInt(varr) : "—"}</td>
|
||||
{/* Only the lines that need one. A blind count still shows the chooser — the system
|
||||
figure stays hidden, but a line that cannot be filed without an explanation has
|
||||
to say so while the counter is still standing at the shelf. */}
|
||||
<td>{big && (<>
|
||||
{/* The red border alone would be one more red on a screen that already has the
|
||||
accent everywhere, so an unanswered row also carries the mark and says
|
||||
"Needs a reason" in the box itself. */}
|
||||
{!reason[ck] && <span className="tc-mark" aria-hidden="true" />}
|
||||
<select className="input" style={{ minHeight: 28, padding: "2px 6px", fontSize: 12, borderColor: reason[ck] ? undefined : "var(--color-accent-600)" }} aria-label={`Reason for the gap on ${name}`} value={reason[ck] || ""} onChange={(e) => setReason({ ...reason, [ck]: e.target.value })}>
|
||||
<option value="">Needs a reason…</option>
|
||||
{REASONS.map((r) => <option key={r} value={r}>{r}</option>)}
|
||||
</select>
|
||||
</>)}</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{variants.length === 0 && <div className="tc-panel-body"><Empty>No catalogue items to count yet.</Empty></div>}
|
||||
{rows.length > limit && <div className="tc-panel-foot"><button className="btn btn-secondary" onClick={() => setLimit(100000)}>Show all {match.length} variants</button></div>}
|
||||
<div className="tc-panel-foot" style={{ fontSize: 12, color: "var(--color-neutral-700)" }}>Blind hides the system figure while you count.</div>
|
||||
</div>
|
||||
<div className="tc-panel" style={{ marginTop: "var(--space-8)" }}>
|
||||
<div className="tc-panel-head">
|
||||
<div>Stocktake history</div>
|
||||
{s.stocktakes.length > 0 && <div className="tc-panel-aside">{s.stocktakes.length} filed</div>}
|
||||
</div>
|
||||
{s.stocktakes.length === 0 && <div className="tc-panel-body"><Empty pad={4}>No stocktakes filed yet.</Empty></div>}
|
||||
{s.stocktakes.map((h) => {
|
||||
const net = h.lines.reduce((t, l) => t + (l.counted - l.sys), 0);
|
||||
const nv = h.mode === "preloved" ? 0 : h.lines.reduce((t, l) => t + (l.counted - l.sys) * (byId[l.itemId]?.cost || 0), 0);
|
||||
const open = expand === h.id;
|
||||
return (
|
||||
<div key={h.id} style={{ borderBottom: "1px solid var(--color-divider)" }}>
|
||||
{/* The row can't be one big button — it carries a CSV button of its own, and a button
|
||||
inside a button is neither valid nor operable. The disclosure is its own control, so
|
||||
the keyboard can open a count without reaching for a mouse. */}
|
||||
<div className="tc-row row-hover" onClick={() => setExpand(open ? null : h.id)} style={{ cursor: "pointer", flexWrap: "wrap", borderBottom: "none" }}>
|
||||
<div className="tc-row-name" style={{ minWidth: 100 }}>{fmtDate(h.date)}</div>
|
||||
<div className="tc-row-main" style={{ fontSize: 13, color: "var(--color-neutral-800)" }}>Counted by {h.by}{h.mode === "preloved" ? " · pre-loved pool" : ""} · {h.counted} lines counted · <b>{h.variances}</b> variance(s) · net {signedInt(net)} ({signedMoney(nv)})</div>
|
||||
<button className="btn btn-ghost" style={{ minHeight: 26, padding: "2px 8px" }} aria-label={`Download the ${fmtDate(h.date)} count as CSV`} onClick={(e) => { e.stopPropagation(); historyCsv(h); }}>CSV</button>
|
||||
<button type="button" className="btn btn-ghost btn-icon" aria-expanded={open} aria-label={`${open ? "Hide" : "Show"} the variances from the ${fmtDate(h.date)} count`} style={{ fontSize: 12, color: "var(--color-neutral-600)" }} onClick={(e) => { e.stopPropagation(); setExpand(open ? null : h.id); }}>{open ? "▾" : "▸"}</button>
|
||||
</div>
|
||||
{open && (
|
||||
<div style={{ padding: "0 var(--space-4) var(--space-3)" }}>
|
||||
{h.variances === 0 && <Empty pad={2}>No variances — every counted line matched.</Empty>}
|
||||
{h.lines.filter((l) => l.counted !== l.sys).map((l, i) => { const diff = l.counted - l.sys; return (
|
||||
<div key={i} style={{ display: "flex", justifyContent: "space-between", gap: "var(--space-3)", padding: "var(--space-1) 0", fontSize: 13, borderBottom: "1px solid var(--color-neutral-200)" }}>
|
||||
<div>{label(byId[l.itemId])} · size {byId[l.itemId]?.sizes[l.si] ?? "?"}</div>
|
||||
<div>system {l.sys} → counted {l.counted} · <b style={{ color: "var(--color-accent-700)" }}>{signedInt(diff)}</b> ({money(Math.abs(diff) * (byId[l.itemId]?.cost || 0))})</div>
|
||||
</div>
|
||||
); })}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
{cam && <Camera onHit={camHit} message={camMsg} onClose={() => setCam(false)} />}
|
||||
{bind && <BindDialog code={bind} onClose={() => setBind("")} onBound={(itemId, si) => setMsg(countPlus(itemId, si))} />}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
import type { Metadata } from "next";
|
||||
import { Suspense } from "react";
|
||||
import { redirect } from "next/navigation";
|
||||
import { currentUser } from "@/lib/session";
|
||||
import { switches } from "@/lib/switches";
|
||||
import AuthForm from "@/components/AuthForm";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
/* Its own identity, and out of the index.
|
||||
*
|
||||
* Without this the page inherited the root layout's title and its canonical, so the sign-in screen
|
||||
* announced itself as the marketing homepage in the browser tab, in a bookmark and in a shared
|
||||
* link — and told search engines it *was* the homepage, which is the one thing a canonical must
|
||||
* never say about a different page. Nothing here is any use in a search result either: it is a door
|
||||
* for people who already have an account. */
|
||||
export const metadata: Metadata = {
|
||||
title: "Log in",
|
||||
alternates: { canonical: "/auth" },
|
||||
robots: { index: false, follow: false },
|
||||
};
|
||||
|
||||
export default async function AuthPage({ searchParams }: { searchParams: Promise<{ mode?: string; next?: string; error?: string }> }) {
|
||||
const sp = await searchParams;
|
||||
const user = await currentUser();
|
||||
// Only ever redirect within the app (never to an absolute or protocol-relative URL).
|
||||
// The phone app lives under /m; anything else off-site is refused so ?next= can't be an open redirect.
|
||||
const next = sp.next && (sp.next.startsWith("/app") || sp.next === "/m" || sp.next.startsWith("/m/")) && !sp.next.startsWith("//") ? sp.next : "/app";
|
||||
if (user) redirect(next);
|
||||
const { signupsOpen, plansLive } = await switches();
|
||||
return (
|
||||
// The whole page is the sign-in form, so it is the main landmark. There is nothing in front of
|
||||
// it to bypass, which is why there is no skip link here.
|
||||
<main>
|
||||
<Suspense>
|
||||
<AuthForm initialMode={sp.mode === "signup" && signupsOpen ? "signup" : "login"} next={next} signupsOpen={signupsOpen} plansLive={plansLive} ssoError={typeof sp.error === "string" && sp.error.startsWith("sso_") ? sp.error : ""} />
|
||||
</Suspense>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
"use client";
|
||||
/* The route-level error boundary. Something threw while rendering a page; the shell survives, so
|
||||
this keeps the site's own chrome and offers the two things that actually help — try again, and
|
||||
a way to tell someone.
|
||||
The error's message is deliberately not printed: it is written by the server, can carry internal
|
||||
detail, and means nothing to a linen services manager. The digest is shown because it is the one
|
||||
string that lets a report be matched to a log line. */
|
||||
import Link from "next/link";
|
||||
import { useEffect } from "react";
|
||||
import { reportError } from "@/lib/errors";
|
||||
|
||||
export default function Error({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
|
||||
useEffect(() => { reportError(error, "route"); }, [error]);
|
||||
|
||||
return (
|
||||
<div style={{ fontFamily: "var(--font-body)", color: "var(--color-text)", background: "var(--color-bg)", minHeight: "100vh", display: "flex", alignItems: "center" }}>
|
||||
<div style={{ maxWidth: 640, margin: "0 auto", padding: "clamp(32px,6vw,64px) clamp(20px,5vw,40px)" }}>
|
||||
<div style={{ fontSize: 12, letterSpacing: "0.15em", textTransform: "uppercase", fontWeight: 800, color: "var(--color-accent-700)" }}>
|
||||
Something went wrong
|
||||
</div>
|
||||
<h1 style={{ fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: "clamp(30px,5vw,52px)", lineHeight: 1.0, letterSpacing: "-0.03em", margin: "16px 0 0" }}>
|
||||
This page didn’t load.
|
||||
</h1>
|
||||
<div style={{ width: 60, height: 4, background: "var(--color-accent)", margin: "22px 0 0" }} />
|
||||
<p style={{ fontSize: 16.5, lineHeight: 1.7, color: "var(--color-neutral-800)", margin: "22px 0 0" }}>
|
||||
The fault is ours, not yours, and nothing you were doing has been lost — ThreadCount only
|
||||
changes a record when you commit it. Try again, and if it keeps happening, tell us and
|
||||
we’ll go and look.
|
||||
</p>
|
||||
<div style={{ display: "flex", gap: 12, flexWrap: "wrap", marginTop: 28 }}>
|
||||
<button onClick={reset} className="btn btn-primary" style={{ cursor: "pointer", font: "inherit" }}>Try again</button>
|
||||
<Link href="/" className="btn">Back to the start</Link>
|
||||
<Link href="/support" className="btn">Tell us</Link>
|
||||
</div>
|
||||
{error.digest ? (
|
||||
<p style={{ fontSize: 12.5, color: "var(--color-neutral-700)", marginTop: 26, fontFamily: "monospace" }}>
|
||||
Reference {error.digest} — quote this and we can find it in the log.
|
||||
</p>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
@@ -0,0 +1,70 @@
|
||||
"use client";
|
||||
/* The last resort: the root layout itself failed, so this replaces <html> entirely. Nothing from
|
||||
the app is available here — not the font, not globals.css, not the site components — so every
|
||||
style is inline and the type falls back to a system stack rather than Archivo. Keeping it
|
||||
self-contained is the point: this page has to render when everything else has not. */
|
||||
import { useEffect } from "react";
|
||||
import { safeLocation } from "@/lib/errors";
|
||||
import { report } from "@/lib/glitchtip";
|
||||
|
||||
const INK = "#201e1d";
|
||||
const PAPER = "#f3f2f2";
|
||||
const ACCENT = "#ec3013";
|
||||
const SANS = "system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif";
|
||||
|
||||
export default function GlobalError({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
|
||||
/* Reported straight to the reporter, not through lib/errors' window seam.
|
||||
*
|
||||
* That seam is published by components/ErrorReporting, which is mounted inside the root layout —
|
||||
* the very layout that has just failed. When this boundary renders, that effect has by definition
|
||||
* not run, so window.__tcReporter is undefined and reportError falls through to a no-op in
|
||||
* production: the one boundary that means "everything is broken" was the only one sending
|
||||
* nothing. Importing the reporter directly costs a couple of kilobytes in the bundle that renders
|
||||
* this page and removes the dependency on a component that cannot have mounted. */
|
||||
useEffect(() => { report({ error, where: "global", url: safeLocation() }); }, [error]);
|
||||
|
||||
return (
|
||||
<html lang="en">
|
||||
<body style={{ margin: 0, background: PAPER, color: INK, fontFamily: SANS }}>
|
||||
<div style={{ minHeight: "100vh", display: "flex", alignItems: "center" }}>
|
||||
<div style={{ maxWidth: 620, margin: "0 auto", padding: "48px 24px" }}>
|
||||
<div style={{ display: "inline-flex", alignItems: "center", gap: 10, marginBottom: 30 }}>
|
||||
<span style={{ width: 15, height: 15, background: ACCENT, display: "inline-block" }} />
|
||||
<span style={{ fontWeight: 800, fontSize: 19, letterSpacing: "-0.01em" }}>ThreadCount</span>
|
||||
</div>
|
||||
<div style={{ fontSize: 12, letterSpacing: "0.15em", textTransform: "uppercase", fontWeight: 800, color: ACCENT }}>
|
||||
Service error
|
||||
</div>
|
||||
<h1 style={{ fontWeight: 800, fontSize: "clamp(28px,5vw,46px)", lineHeight: 1.05, letterSpacing: "-0.03em", margin: "14px 0 0" }}>
|
||||
ThreadCount is having a moment.
|
||||
</h1>
|
||||
<div style={{ width: 60, height: 4, background: ACCENT, margin: "22px 0 0" }} />
|
||||
<p style={{ fontSize: 16.5, lineHeight: 1.7, margin: "22px 0 0" }}>
|
||||
Something failed before the page could be built. Your records are untouched — this is
|
||||
the website falling over, not the linen room. Try again in a moment.
|
||||
</p>
|
||||
<div style={{ marginTop: 28, display: "flex", gap: 12, flexWrap: "wrap" }}>
|
||||
<button
|
||||
onClick={reset}
|
||||
style={{ font: "inherit", fontWeight: 800, letterSpacing: "0.02em", textTransform: "uppercase", fontSize: 13, background: ACCENT, color: "#fff", border: 0, padding: "14px 22px", cursor: "pointer" }}
|
||||
>
|
||||
Try again
|
||||
</button>
|
||||
<a
|
||||
href="/"
|
||||
style={{ font: "inherit", fontWeight: 800, letterSpacing: "0.02em", textTransform: "uppercase", fontSize: 13, background: "transparent", color: INK, border: `2px solid ${INK}`, padding: "12px 20px", textDecoration: "none" }}
|
||||
>
|
||||
Back to the start
|
||||
</a>
|
||||
</div>
|
||||
{error.digest ? (
|
||||
<p style={{ fontSize: 12.5, color: "#6b6764", marginTop: 26, fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace" }}>
|
||||
Reference {error.digest}
|
||||
</p>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
+501
@@ -0,0 +1,501 @@
|
||||
/* ThreadCount — Modernist design system tokens (authored from the handoff spec) */
|
||||
:root {
|
||||
--color-bg: #f3f2f2;
|
||||
--color-surface: #eae9e9;
|
||||
--color-text: #201e1d;
|
||||
--color-accent: #ec3013;
|
||||
--color-accent-300: #ffc4b8;
|
||||
/* The brand red carries white type on every primary button, accent tag and error bar, and at
|
||||
#ec3013 that pairing is 4.20:1 — under the 4.5:1 a label at body size needs. 600 is the same
|
||||
red one step down: white on it is 5.07:1, and it is 4.54:1 as text on the paper ground, so it
|
||||
is the shade to fill anything that has words on it. #ec3013 stays the brand mark and belongs on
|
||||
the rules, the progress bar and the 4px edge marks, which carry no text and need only 3:1. */
|
||||
--color-accent-600: #d42a12;
|
||||
--color-accent-700: #b8240e;
|
||||
--color-divider: #cfcccb;
|
||||
--color-neutral-200: #e4e2e1;
|
||||
--color-neutral-300: #d6d3d2;
|
||||
/* 400 is only legible on ink — it is the muted meta colour inside the dark panels and top bars
|
||||
(7.8:1 there). On the paper ground it is 1.9:1, so anything that has to be read on the light
|
||||
side wants 600 or 700 instead. */
|
||||
--color-neutral-400: #b5b1af;
|
||||
--color-neutral-500: #928d8a;
|
||||
--color-neutral-900: #2d2b2b;
|
||||
/* Was #7a7573, which is 4.07:1 on the paper ground and 3.75:1 on the surface tone — under the
|
||||
minimum for the sub-lines, table headers and tab labels this colour carries. */
|
||||
--color-neutral-600: #6c6764;
|
||||
--color-neutral-700: #57534f;
|
||||
--color-neutral-800: #3a3735;
|
||||
--color-slip-teal: #9acbd8;
|
||||
/* The desktop app's chrome, and only the desktop app's. #201e1d, #f3f2f2, #ec3013 and #b8240e
|
||||
are the four the Android shell already ships, so nothing here is a new colour in the product;
|
||||
#2b2827 is one step up from the ink so the rail reads as lifted off the page header rather
|
||||
than welded to it, and #37332f is the lightest hairline that still shows on ink. These are
|
||||
literal values on purpose: the desktop scopes below remap some --color-* tokens on the ink
|
||||
bands, and a --tc-* token defined as var(--color-…) would be remapped along with them. */
|
||||
--tc-ink: #201e1d;
|
||||
--tc-rail: #2b2827;
|
||||
--tc-hair: #37332f;
|
||||
--tc-on-ink: #f3f2f2;
|
||||
--tc-ink-idle: #d6d3d2;
|
||||
--tc-ink-muted: #b5b1af;
|
||||
--tc-on-ink-accent: #ffc4b8;
|
||||
--space-1: 4px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-8: 32px;
|
||||
--font-heading: var(--font-archivo), "Archivo", system-ui, sans-serif;
|
||||
--font-body: var(--font-archivo), "Archivo", system-ui, sans-serif;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
html, body { margin: 0; padding: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: 14px; line-height: 1.4; -webkit-font-smoothing: antialiased; }
|
||||
/* Chrome's text autosizing "boosts" font sizes in the Android WebView — a 15px top-bar title came
|
||||
out at 24px on a real phone, which is why the app's chrome looked oversized against the design.
|
||||
The sizes here are deliberate, so opt out of the boosting; the OS accessibility font scale still
|
||||
applies on top of them. */
|
||||
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
|
||||
a { color: var(--color-accent-700); }
|
||||
a:hover { color: var(--color-accent-600); }
|
||||
h1, h2, h3 { font-family: var(--font-heading); margin: 0; }
|
||||
b, strong { font-weight: 700; }
|
||||
button, input, select, textarea { font-family: var(--font-body); font-size: 14px; color: var(--color-text); border-radius: 0; }
|
||||
input[type="checkbox"] { accent-color: var(--color-text); }
|
||||
|
||||
/* Buttons — flush-left labels, zero radius */
|
||||
.btn {
|
||||
display: inline-flex; align-items: center; justify-content: flex-start; gap: 6px;
|
||||
min-height: 36px; padding: 6px 14px; font-weight: 600; font-size: 13px; line-height: 1.2;
|
||||
border: 2px solid transparent; background: transparent; color: var(--color-text); cursor: pointer;
|
||||
text-align: left; white-space: nowrap; text-decoration: none;
|
||||
}
|
||||
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
|
||||
.btn-primary { background: var(--color-accent-600); border-color: var(--color-accent-600); color: #fff; }
|
||||
.btn-primary:not(:disabled):hover { background: var(--color-accent-700); border-color: var(--color-accent-700); }
|
||||
.btn-secondary { background: transparent; border-color: var(--color-text); color: var(--color-text); }
|
||||
.btn-secondary:not(:disabled):hover { background: var(--color-neutral-200); }
|
||||
.btn-ghost { background: transparent; border-color: transparent; color: var(--color-text); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
|
||||
.btn-ghost:not(:disabled):hover { background: var(--color-neutral-200); }
|
||||
.btn-block { width: 100%; }
|
||||
|
||||
/* Tags */
|
||||
.tag {
|
||||
display: inline-flex; align-items: center; padding: 2px 7px; font-size: 10px; font-weight: 700;
|
||||
letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.5; border: 1.5px solid transparent; white-space: nowrap;
|
||||
}
|
||||
.tag-accent { background: var(--color-accent-600); border-color: var(--color-accent-600); color: #fff; }
|
||||
.tag-neutral { background: var(--color-neutral-200); border-color: var(--color-neutral-200); color: var(--color-text); }
|
||||
.tag-outline { background: transparent; border-color: var(--color-text); color: var(--color-text); }
|
||||
|
||||
/* Segmented control */
|
||||
.seg { display: inline-flex; border: 2px solid var(--color-text); background: var(--color-bg); }
|
||||
.seg-opt {
|
||||
padding: 5px 12px; min-height: 30px; font-size: 12px; font-weight: 600; background: transparent;
|
||||
border: none; border-right: 2px solid var(--color-text); color: var(--color-text); cursor: pointer; white-space: nowrap;
|
||||
}
|
||||
.seg-opt:last-child { border-right: none; }
|
||||
.seg-opt.btn-primary { background: var(--color-accent-600); color: #fff; }
|
||||
|
||||
/* Inputs */
|
||||
.input {
|
||||
min-height: 36px; padding: 6px 10px; font-size: 14px; border: 2px solid var(--color-text); background: #fff; color: var(--color-text);
|
||||
outline: none; width: auto; max-width: 100%;
|
||||
}
|
||||
.input:focus { border-color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); }
|
||||
.input:disabled { background: var(--color-surface); color: var(--color-neutral-700); }
|
||||
select.input { appearance: none; -webkit-appearance: none; padding-right: 28px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23201e1d' stroke-width='2'/></svg>"); background-repeat: no-repeat; background-position: right 10px center; }
|
||||
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
|
||||
.field label { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-neutral-700); }
|
||||
.field .input { width: 100%; }
|
||||
|
||||
/* Tables */
|
||||
.table { border-collapse: collapse; width: 100%; font-size: 13px; }
|
||||
.table th { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-neutral-600); border-bottom: 2px solid var(--color-text); padding: 8px 8px 6px; }
|
||||
.table td { padding: 8px; border-bottom: 1px solid var(--color-divider); vertical-align: middle; }
|
||||
.table tr:last-child td { border-bottom: 1px solid var(--color-divider); }
|
||||
|
||||
/* Section heads */
|
||||
.sec { border-bottom: 2px solid var(--color-text); padding-bottom: var(--space-2); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
|
||||
.eyebrow { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent-700); }
|
||||
.h1 { font-family: var(--font-heading); font-weight: 800; font-size: 30px; margin: var(--space-1) 0 0; letter-spacing: -0.02em; }
|
||||
.page-head { padding: var(--space-6) 0 var(--space-4); border-bottom: 2px solid var(--color-text); display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
|
||||
.row-hover:hover { background: var(--color-neutral-200); }
|
||||
.muted { color: var(--color-neutral-700); }
|
||||
.num { font-family: var(--font-heading); font-weight: 800; }
|
||||
|
||||
/* Dialogs */
|
||||
.overlay { position: fixed; inset: 0; background: color-mix(in srgb, #201e1d 45%, transparent); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 16px; }
|
||||
.dialog { background: var(--color-bg); border: 2px solid var(--color-text); padding: var(--space-6); max-height: 88vh; overflow: auto; width: 100%; }
|
||||
.dialog-title { font-family: var(--font-heading); font-weight: 800; font-size: 20px; }
|
||||
|
||||
/* App shell */
|
||||
/* Skip link: out of the way until it takes focus, then a solid ink chip in the top-left corner.
|
||||
Fixed rather than in flow so it cannot disturb the shell's flex row while it is hidden. */
|
||||
.skip-link { position: fixed; top: 8px; left: -9999px; z-index: 100; background: var(--color-text); color: var(--color-bg); border: 2px solid var(--color-text); padding: 10px 14px; font-size: 13px; font-weight: 700; text-decoration: none; }
|
||||
.skip-link:focus { left: 8px; }
|
||||
/* The content landmark only holds focus so the skip link can hand it over; a ring around the whole
|
||||
page would be noise, and nothing else can focus it. */
|
||||
main.tc-main:focus { outline: none; }
|
||||
/* --tc-gutter is the page's side margin. The page head bleeds out to it with a negative margin,
|
||||
so the two have to be one number or the ink band stops short of the edge. */
|
||||
.tc-shell { display: flex; min-height: 100vh; align-items: stretch; --tc-gutter: var(--space-8); }
|
||||
#tc-side {
|
||||
--tc-rail-w: 232px;
|
||||
width: var(--tc-rail-w); flex: 0 0 var(--tc-rail-w);
|
||||
background: var(--tc-rail); color: var(--tc-ink-idle);
|
||||
border-right: 2px solid var(--tc-ink);
|
||||
display: flex; flex-direction: column;
|
||||
position: sticky; top: 0; align-self: flex-start; height: 100vh;
|
||||
/* Eleven items, a footer and a short window: the rail scrolls rather than losing Sign out off
|
||||
the bottom. Collapsed it must not, because the hover labels are drawn outside its width and
|
||||
overflow-y clips the other axis with it. */
|
||||
overflow-y: auto; overflow-x: hidden;
|
||||
transition: width 140ms ease, flex-basis 140ms ease;
|
||||
}
|
||||
#tc-side.tc-rail-narrow { --tc-rail-w: 62px; overflow: visible; }
|
||||
@media (prefers-reduced-motion: reduce) { #tc-side { transition: none; } }
|
||||
#tc-mobilebar { display: none; }
|
||||
main.tc-main { flex: 1; min-width: 0; padding: 0 var(--tc-gutter) var(--space-8); }
|
||||
|
||||
#tc-scanfab { display: none; }
|
||||
@media screen and (max-width: 780px) {
|
||||
/* main's padding drops to space-3 below; the page head bleeds by the same number or it hangs
|
||||
over the edge of a narrow window. */
|
||||
.tc-shell { --tc-gutter: var(--space-3); }
|
||||
#tc-side { display: none !important; }
|
||||
#tc-mobilebar { display: grid !important; }
|
||||
#tc-scanfab { display: flex !important; }
|
||||
/* The fab sits above the dialog overlay; hide it while a dialog is open so it can't be tapped
|
||||
through (the scan dialogs have their own Camera button). */
|
||||
body:has(.overlay) #tc-scanfab { display: none !important; }
|
||||
main.tc-main { padding: 0 var(--space-3) 110px !important; }
|
||||
.tc-grid { grid-template-columns: 1fr !important; }
|
||||
/* A grid track defaults to a min-content floor, so a wide table (the size list on a product
|
||||
page) stretches its column instead of scrolling inside .table-wrap and drags the whole page
|
||||
sideways. Let the tracks shrink and the wrapper does its job. */
|
||||
.tc-grid > * { min-width: 0; }
|
||||
.dialog { max-width: 94vw !important; }
|
||||
/* Touch targets: 44px controls, 16px inputs (stops iOS zoom), 40px segmented options, scrollable tables. */
|
||||
.btn { min-height: 44px; }
|
||||
.input, select.input { min-height: 44px; font-size: 16px; }
|
||||
.seg .seg-opt { min-height: 40px; }
|
||||
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
|
||||
table.table { display: block; overflow-x: auto; }
|
||||
/* Scoped to the desktop app's content area. As a bare `h1 !important` this reached every
|
||||
heading on every phone-width screen — the counter app's 15px top-bar titles came out at 24px,
|
||||
which is why the app's chrome looked oversized on a real device, and the marketing hero and
|
||||
the onboarding headings were flattened to 24px too. Every other rule in this block is scoped
|
||||
to the desktop shell; this one wasn't. */
|
||||
main.tc-main h1, main.tc-main .h1 { font-size: 24px !important; }
|
||||
.page-head .btn { min-height: 44px; padding: 6px 12px; }
|
||||
}
|
||||
.table-wrap { overflow-x: auto; }
|
||||
@media screen and (max-width: 820px) {
|
||||
.tc-auth { grid-template-columns: 1fr !important; min-height: 100dvh !important; }
|
||||
.tc-brandpane { display: none !important; }
|
||||
/* Phone: brand strip on top, form starts high (keyboard-friendly), links home/demo underneath. */
|
||||
.tc-authpane { align-items: flex-start !important; padding: 20px 20px calc(28px + env(safe-area-inset-bottom)) !important; }
|
||||
.tc-brandmobile, .tc-authfoot { display: flex !important; }
|
||||
.tc-auth .seg .seg-opt { min-height: 44px; }
|
||||
.tc-auth .btn-primary { min-height: 48px; font-size: 15px; }
|
||||
.mk-grid2, .mk-grid3, .mk-grid4, .mk-hero, .mk-rep { grid-template-columns: 1fr !important; }
|
||||
.mk-h1 { font-size: 38px !important; }
|
||||
.tcl-grid { grid-template-columns: 1fr !important; }
|
||||
.tcl-side { position: static !important; border-right: none !important; border-bottom: 2px solid var(--color-text); display: flex; flex-wrap: wrap; gap: 4px; padding: 12px 16px !important; }
|
||||
.tcl-side .btn { width: auto !important; }
|
||||
}
|
||||
/* The marketing nav is sticky, so an anchor jump lands the heading underneath it. */
|
||||
#loop, #product, #features, #reporting, #price { scroll-margin-top: 96px; }
|
||||
@media screen and (max-width: 900px) {
|
||||
.tcm-hero, .tcm-loop, .tcm-rep, .tcm-price { grid-template-columns: 1fr !important; }
|
||||
.tcm-feat { grid-template-columns: 1fr 1fr !important; }
|
||||
.tcm-stats { grid-template-columns: 1fr 1fr !important; }
|
||||
.tcm-foot { grid-template-columns: 1fr 1fr !important; }
|
||||
.tcm-rail { display: none !important; }
|
||||
.tcm-navlinks { gap: 16px !important; font-size: 12.5px !important; }
|
||||
.tcm-hero > div:first-child { border-right: none !important; border-bottom: 2px solid var(--color-text); }
|
||||
#reporting > div:first-child { border-right: none !important; border-bottom: 2px solid var(--color-text); }
|
||||
.tcm-price > div:first-child { border-right: none !important; border-bottom: 1px solid var(--color-divider); }
|
||||
}
|
||||
@media screen and (max-width: 820px) {
|
||||
.tcm-foot { grid-template-columns: 1fr 1fr !important; }
|
||||
}
|
||||
@media screen and (max-width: 780px) {
|
||||
/* Handoff hides the desktop link row here. It leaves a second scrollable row in its place so the
|
||||
pages stay reachable — the handoff flags "no mobile menu was designed" as an open question. */
|
||||
.tcm-navlinks, .tcm-navlogin { display: none !important; }
|
||||
.tcm-navmobile { display: block !important; }
|
||||
}
|
||||
@media screen and (max-width: 900px) {
|
||||
.tcm-headsplit, .tcm-split, .tcm-3col, .tcm-2col { grid-template-columns: 1fr !important; }
|
||||
/* The left cell of a .tcm-split carries no left padding of its own — on a wide screen it sits on
|
||||
the page gutter, which the wrap has already paid for. Collapsed to one column that zero becomes
|
||||
copy printed against the edge of the phone, so the gutter goes back here. */
|
||||
.tcm-splitpad { padding-left: 40px; }
|
||||
/* A grid track floors at min-content, so a fixed-width mock inside a collapsed split stretches
|
||||
its column and drags the whole page sideways instead of scrolling inside its own .table-wrap. */
|
||||
.tcm-split > * { min-width: 0; }
|
||||
.tcm-rowgrid { grid-template-columns: 1fr !important; gap: 6px !important; }
|
||||
.tcm-pullup { margin-top: 0 !important; }
|
||||
.tcm-stagger > * { padding-top: 0 !important; }
|
||||
}
|
||||
@media screen and (max-width: 560px) {
|
||||
.tcm-pillars { grid-template-columns: 1fr !important; }
|
||||
}
|
||||
@media screen and (max-width: 640px) {
|
||||
/* Phones: drop the in-page links so the sticky bar stays one row and keeps the CTAs above the fold. */
|
||||
.tcm-navlinks { display: none !important; }
|
||||
.tcm-nav { padding: 12px 16px !important; gap: 12px !important; }
|
||||
#loop, #product, #features, #reporting, #price { scroll-margin-top: 72px; }
|
||||
/* The hero's second and third mock cards are illustration. On a phone they added ~490px
|
||||
of scrolling before the first real section, so show one and get on with it. */
|
||||
.tcm-mock-extra { display: none !important; }
|
||||
.tcm-mock-first { margin-bottom: 20px !important; }
|
||||
}
|
||||
@media screen and (max-width: 560px) {
|
||||
.tcm-feat, .tcm-foot { grid-template-columns: 1fr !important; }
|
||||
.tcm-feat-lead { grid-column: auto !important; }
|
||||
}
|
||||
@media print {
|
||||
#tc-side, #tc-mobilebar, #tc-scanfab, .skip-link, .no-print { display: none !important; }
|
||||
main.tc-main { padding: 0 !important; }
|
||||
body { background: #fff; }
|
||||
}
|
||||
|
||||
/* Update wave additions */
|
||||
.btn-icon { padding: 0 8px; min-height: 26px; text-decoration: none; font-size: 16px; line-height: 1; }
|
||||
.kpi-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; background: var(--color-divider); border: 2px solid var(--color-text); margin-top: var(--space-4); }
|
||||
.kpi-strip > div { background: var(--color-bg); padding: var(--space-3); }
|
||||
.kpi-strip .kv { font-family: var(--font-heading); font-weight: 800; font-size: 24px; }
|
||||
.kpi-strip .kl { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-neutral-700); font-weight: 600; margin-top: 2px; }
|
||||
.link-name { cursor: pointer; border-bottom: 2px solid var(--color-accent); color: inherit; text-decoration: none; }
|
||||
.link-name:hover { color: var(--color-accent-700); }
|
||||
.notice { border-left: 4px solid var(--color-accent); padding: var(--space-2) var(--space-3); font-size: 13px; font-weight: 600; margin-bottom: var(--space-3); }
|
||||
.bar-track { height: 10px; border: 2px solid var(--color-text); }
|
||||
.bar-fill { height: 100%; background: var(--color-text); }
|
||||
textarea.input { font-family: var(--font-body); resize: vertical; }
|
||||
@media screen and (max-width: 780px) { .kpi-strip { grid-template-columns: 1fr 1fr; } }
|
||||
|
||||
/* Marketing photography: every image is greyscale, never tinted or restored on hover. */
|
||||
.grayscale { filter: grayscale(1) contrast(1.08); }
|
||||
|
||||
/* ---------- the phone app (/m): a fixed-height column, only the body scrolls */
|
||||
/* The page returns a fragment, so its top bar, rule, body and nav are this column's own children. */
|
||||
.tcx-app { position: fixed; inset: 0; display: flex; flex-direction: column; background: var(--color-bg); overflow: hidden; }
|
||||
/* Android 15 draws apps edge to edge whether they ask or not, so the ink top bar would otherwise
|
||||
sit under the status bar with the screen title behind the clock. The inset is padding on the bar
|
||||
itself, so the ink still runs to the top of the screen — the colour bleeds, the words don't. */
|
||||
.tcx-topbar { padding-top: env(safe-area-inset-top, 0px); height: calc(56px + env(safe-area-inset-top, 0px)) !important; flex-basis: calc(56px + env(safe-area-inset-top, 0px)) !important; }
|
||||
.tcx-bar:not(:disabled):active { filter: brightness(0.86); }
|
||||
@keyframes tcx-sweep { 0%, 100% { top: 6px; } 50% { top: calc(100% - 9px); } }
|
||||
.tcx-laser { animation: tcx-sweep 1.6s ease-in-out infinite; top: 6px; }
|
||||
@media (prefers-reduced-motion: reduce) { .tcx-laser { animation: none; top: 50%; } }
|
||||
/* Bars on the counting screen carry the chart in "variance over time" */
|
||||
.tcx-chart { display: flex; align-items: flex-end; gap: 5px; height: 56px; border-bottom: 1px solid var(--color-divider); }
|
||||
.tcx-chart > i { flex: 1; min-width: 6px; display: block; }
|
||||
|
||||
/* Native scanning: MLKit draws the camera preview behind the WebView, so the page has to get
|
||||
out of the way while it runs. Only ever set inside the Android shell. */
|
||||
html.tcx-native-scan, html.tcx-native-scan body, html.tcx-native-scan .tcx-app { background: transparent !important; }
|
||||
/* Everything the shelf screen drew goes; the scan overlay stays. `.tcx-scanui` is the class the
|
||||
camera overlay's own root carries (components/MScan.tsx) — if nothing on the page carries it,
|
||||
this hides the scan UI as well, and a coordinator mid-count is left with a bare camera picture:
|
||||
no LIVE/PAUSED header, no running counted/expected figure and no "Stop scanning" bar to press,
|
||||
only the hardware back button, which walks out of the count altogether. */
|
||||
html.tcx-native-scan .tcx-app > *:not(.tcx-scanui) { visibility: hidden; }
|
||||
/* The overlay is drawn for the browser scanner, where the picture comes from its own <video>.
|
||||
Under MLKit the picture is behind the WebView, so the overlay's ground and its camera window —
|
||||
the last <div> in it, the one wrapping the video — have to let it through, or the spared UI
|
||||
covers the preview with flat ink and the garment can't be aimed at. The header, the last-scans
|
||||
panel and the bottom bar keep their own backgrounds so they stay readable over the picture. */
|
||||
html.tcx-native-scan .tcx-scanui,
|
||||
html.tcx-native-scan .tcx-scanui .tcx-camwin { background: transparent !important; }
|
||||
/* The browser scanner's <video> is still in the camera window under MLKit, with no stream to
|
||||
show. Android's WebView paints a source-less video as an opaque grey box with a play glyph in
|
||||
the middle — which is exactly what a coordinator in hands-free mode saw on a Pixel 8 Pro on
|
||||
2026-09-12 instead of the shelf: the native preview was behind it the whole time. */
|
||||
html.tcx-native-scan .tcx-scanui video { display: none !important; }
|
||||
|
||||
/* On a tablet the app keeps a phone-shaped column rather than stretching a list row to 1200px —
|
||||
a row that wide puts the garment name and its count at opposite ends of the screen. */
|
||||
@media (min-width: 620px) {
|
||||
.tcx-app { align-items: center; }
|
||||
.tcx-app > * { width: 100%; max-width: 560px; }
|
||||
.tcx-app { background: var(--color-surface); }
|
||||
}
|
||||
|
||||
/* ---------- the desktop app (/app): dark chrome, paper content
|
||||
*
|
||||
* Everything that changes how an existing thing looks, from here down, is scoped to .tc-shell —
|
||||
* the wrapper components/Shell.tsx draws and nothing else in the product draws. The counter app
|
||||
* (/m) and the staff app (/my) build their screens out of the --color-* tokens at the top of this
|
||||
* file and the .tcx-* classes above, and neither ever renders a .tc-shell, so none of those
|
||||
* selectors can reach a phone. The unscoped rules below add new class names only — nothing the
|
||||
* marketing site or the two phone apps already wears.
|
||||
*
|
||||
* The chrome went dark and the content did not. A shelf count is read across a linen room under
|
||||
* ward lighting, and paper holds its contrast there in a way an ink panel does not. */
|
||||
.tc-rail-brand {
|
||||
display: flex; align-items: center; gap: var(--space-2);
|
||||
padding: var(--space-5) var(--space-4) var(--space-3);
|
||||
}
|
||||
.tc-rail-mark { width: 14px; height: 14px; flex: 0 0 14px; background: var(--color-accent); }
|
||||
.tc-rail-word { font-family: var(--font-heading); font-weight: 800; font-size: 18px; letter-spacing: -0.02em; color: var(--tc-on-ink); flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; }
|
||||
.tc-rail-facility {
|
||||
padding: 0 var(--space-4) var(--space-3);
|
||||
font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tc-ink-muted);
|
||||
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
||||
border-bottom: 1px solid var(--tc-hair);
|
||||
}
|
||||
.tc-rail-toggle {
|
||||
flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
|
||||
width: 30px; height: 30px; padding: 0; border: 1px solid var(--tc-hair);
|
||||
background: transparent; color: var(--tc-ink-idle); cursor: pointer;
|
||||
}
|
||||
.tc-rail-toggle:hover { background: var(--tc-hair); color: var(--tc-on-ink); }
|
||||
.tc-rail-nav { flex: 1; display: flex; flex-direction: column; }
|
||||
/* An item is a fixed-height icon row, so collapsed the rail is a column of even squares. */
|
||||
.tc-rail-item {
|
||||
position: relative; display: flex; align-items: center; gap: var(--space-3);
|
||||
padding: 0 var(--space-4); min-height: 42px;
|
||||
border: none; border-bottom: 1px solid var(--tc-hair); border-left: 4px solid transparent;
|
||||
background: transparent; color: var(--tc-ink-idle);
|
||||
font-family: var(--font-body); font-size: 14px; font-weight: 500; text-align: left;
|
||||
text-decoration: none; cursor: pointer; width: 100%;
|
||||
}
|
||||
.tc-rail-item:hover { background: var(--tc-hair); color: var(--tc-on-ink); }
|
||||
.tc-rail-item:disabled { opacity: 0.45; cursor: not-allowed; }
|
||||
/* The accent marks the screen you are on as a rule down its edge, not as the label's colour: the
|
||||
vermilion is 3.5:1 against the rail, which is enough for a 4px bar and not enough for a 14px
|
||||
word. The word turns paper-white and heavy instead, so the item is marked twice over. */
|
||||
.tc-rail-item.active { border-left-color: var(--color-accent); background: var(--tc-ink); color: var(--tc-on-ink); font-weight: 800; }
|
||||
.tc-rail-icon { flex: 0 0 18px; display: inline-flex; align-items: center; justify-content: center; color: var(--tc-ink-muted); }
|
||||
.tc-rail-item:hover .tc-rail-icon, .tc-rail-item.active .tc-rail-icon { color: var(--color-accent-300); }
|
||||
.tc-rail-label { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
|
||||
.tc-rail-meta { padding: var(--space-3) var(--space-4); font-size: 11px; line-height: 1.7; color: var(--tc-ink-muted); letter-spacing: 0.08em; text-transform: uppercase; }
|
||||
.tc-rail-foot { border-top: 1px solid var(--tc-hair); }
|
||||
.tc-rail-foot .tc-rail-item:last-child { border-bottom: none; }
|
||||
.tc-rail-role { display: inline-flex; margin-left: 6px; padding: 1px 6px; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; background: var(--tc-hair); color: var(--tc-ink-idle); }
|
||||
.tc-rail-live { padding: 0 var(--space-4) var(--space-3); font-size: 11px; font-weight: 600; color: var(--color-accent-300); }
|
||||
.tc-rail-item:focus-visible, .tc-rail-toggle:focus-visible { outline: 2px solid var(--color-accent-300); outline-offset: -3px; }
|
||||
|
||||
/* Collapsed: an icon rail. The label stays in the DOM and stays in the accessibility tree —
|
||||
opacity, not display or visibility — so a screen reader still reads "Delivery Rounds" off an
|
||||
item a sighted coordinator has to hover to name. */
|
||||
/* The facility name carries the hairline under the brand when the rail is open; collapsed it is
|
||||
hidden, so the brand block takes the rule over or the mark runs straight into the first icon. */
|
||||
.tc-rail-narrow .tc-rail-brand { justify-content: center; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-4) 0 var(--space-3); border-bottom: 1px solid var(--tc-hair); }
|
||||
.tc-rail-narrow .tc-rail-word, .tc-rail-narrow .tc-rail-facility, .tc-rail-narrow .tc-rail-meta, .tc-rail-narrow .tc-rail-role { display: none; }
|
||||
.tc-rail-narrow .tc-rail-item { justify-content: center; padding: 0; min-height: 44px; border-left-width: 3px; }
|
||||
.tc-rail-narrow .tc-rail-label {
|
||||
position: absolute; left: 100%; top: 50%; transform: translateY(-50%); margin-left: 2px;
|
||||
padding: 7px 10px; background: var(--tc-ink); color: var(--tc-on-ink);
|
||||
border: 2px solid var(--tc-hair); font-weight: 600; font-size: 13px;
|
||||
opacity: 0; pointer-events: none; z-index: 40; transition: opacity 90ms linear;
|
||||
}
|
||||
.tc-rail-narrow .tc-rail-item:hover .tc-rail-label,
|
||||
.tc-rail-narrow .tc-rail-item:focus-visible .tc-rail-label { opacity: 1; }
|
||||
@media (prefers-reduced-motion: reduce) { .tc-rail-narrow .tc-rail-label { transition: none; } }
|
||||
|
||||
/* The page head carries the ink the full width of the content column, so it bleeds back out
|
||||
* through main's gutter.
|
||||
*
|
||||
* Screens put whatever they like in this band — a counted total, a supplier filter, a "net −$412"
|
||||
* in accent-700 — and most of it names its colour inline as var(--color-text) or
|
||||
* var(--color-neutral-700), which on ink is either invisible or close to it. Rather than make
|
||||
* fourteen screens special-case the band, the band remaps those tokens for everything inside it:
|
||||
* an inline var(--color-text) resolves to paper in here and to ink everywhere else. This is the
|
||||
* only place in the product where a --color-* token takes a different value, it happens on a
|
||||
* descendant of .tc-shell, and no phone screen has one of those. */
|
||||
.tc-shell .page-head, .tc-shell .tc-pagehead {
|
||||
--color-text: #f3f2f2;
|
||||
--color-bg: #201e1d;
|
||||
--color-surface: #37332f;
|
||||
--color-divider: #37332f;
|
||||
--color-neutral-200: #37332f;
|
||||
--color-neutral-300: #57534f;
|
||||
--color-neutral-600: #b5b1af;
|
||||
--color-neutral-700: #b5b1af;
|
||||
--color-neutral-800: #d6d3d2;
|
||||
--color-accent-700: #ffc4b8;
|
||||
background: var(--tc-ink); color: var(--tc-on-ink);
|
||||
margin: 0 calc(var(--tc-gutter) * -1) var(--space-6);
|
||||
padding: var(--space-6) var(--tc-gutter) var(--space-5);
|
||||
border-bottom: 4px solid var(--color-accent);
|
||||
display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap;
|
||||
}
|
||||
/* A field keeps its white ground, so inside one the ink has to come back or what someone types is
|
||||
white on white — the reporting month select and the register's search box both live up here. */
|
||||
.tc-shell .page-head .input, .tc-shell .tc-pagehead .input { --color-text: #201e1d; }
|
||||
.tc-shell .page-head .h1, .tc-shell .tc-pagehead .h1 { color: var(--tc-on-ink); }
|
||||
|
||||
/* The figure a screen is actually about: a count, a value, a number of gaps. */
|
||||
.tc-figure { font-family: var(--font-heading); font-weight: 800; font-size: 28px; line-height: 1.05; letter-spacing: -0.02em; }
|
||||
.tc-meta { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-neutral-700); }
|
||||
|
||||
/* Tiles: the figures that sit under a page head. auto-fit rather than a fixed count, because the
|
||||
same strip carries three tiles on Ordering and five on Reports. */
|
||||
.tc-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 2px; background: var(--color-text); border: 2px solid var(--color-text); }
|
||||
.tc-tile { background: var(--color-bg); padding: var(--space-4); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
|
||||
.tc-tile-label { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-neutral-700); }
|
||||
.tc-tile-note { font-size: 12px; color: var(--color-neutral-700); }
|
||||
|
||||
/* Panels: a bordered block with a named head. */
|
||||
.tc-panel { border: 2px solid var(--color-text); background: var(--color-bg); min-width: 0; }
|
||||
.tc-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 2px solid var(--color-text); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
|
||||
.tc-panel-aside { font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--color-neutral-700); }
|
||||
.tc-panel-body { padding: var(--space-4); }
|
||||
.tc-panel-foot { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--color-divider); }
|
||||
/* A list of rows fills its panel edge to edge — no body padding, the rows carry their own. */
|
||||
.tc-panel-list > .tc-row:last-child { border-bottom: none; }
|
||||
|
||||
/* Rows: one garment, one order, one request. */
|
||||
.tc-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-divider); min-width: 0; }
|
||||
.tc-row-main { flex: 1; min-width: 0; }
|
||||
.tc-row-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
|
||||
.tc-row-meta { font-size: 12px; color: var(--color-neutral-700); }
|
||||
.tc-row-fig { font-family: var(--font-heading); font-weight: 800; font-size: 18px; white-space: nowrap; }
|
||||
a.tc-row, button.tc-row { width: 100%; background: var(--color-bg); border-left: none; border-right: none; border-top: none; color: inherit; text-decoration: none; text-align: left; font-size: 14px; cursor: pointer; }
|
||||
a.tc-row:hover, button.tc-row:hover { background: var(--color-neutral-200); color: inherit; }
|
||||
|
||||
/* Anything that wants attention.
|
||||
*
|
||||
* The accent is already the brand — it is the primary button and it is the current nav item — so
|
||||
* a second red a metre away across the room is a guess, not a signal. A flagged tile or row is
|
||||
* marked three ways instead: a rule down its left edge, its figure heavier and in the darker red
|
||||
* that stays legible on paper, and .tc-mark next to a word saying what is wrong. The mark is
|
||||
* decoration and belongs behind aria-hidden; the word is the message, so screens keep the word. */
|
||||
.tc-flag { border-left: 4px solid var(--color-accent); }
|
||||
.tc-tile.tc-flag, .tc-row.tc-flag { padding-left: calc(var(--space-4) - 4px); }
|
||||
.tc-flag .tc-figure, .tc-flag .tc-row-fig { font-weight: 800; color: var(--color-accent-700); }
|
||||
.tc-flag .tc-tile-label { color: var(--color-accent-700); }
|
||||
.tc-mark { display: inline-block; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 9px solid var(--color-accent); vertical-align: -1px; margin-right: 6px; }
|
||||
.tag-flag { background: var(--color-accent-600); border-color: var(--color-accent-600); color: #fff; gap: 5px; }
|
||||
.tag-flag::before { content: ""; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 7px solid currentColor; }
|
||||
|
||||
/* On paper the ink band is a trap: browsers drop background colours out of a print by default, and
|
||||
what is left is paper-white type on white paper — a screen title that prints as nothing. So the
|
||||
head goes back to the light treatment for the printer, and the gutter it bleeds through goes to
|
||||
zero along with main's padding. */
|
||||
@media print {
|
||||
.tc-shell { --tc-gutter: 0px; }
|
||||
.tc-shell .page-head, .tc-shell .tc-pagehead {
|
||||
--color-text: #201e1d;
|
||||
--color-bg: #f3f2f2;
|
||||
--color-surface: #eae9e9;
|
||||
--color-divider: #cfcccb;
|
||||
--color-neutral-200: #e4e2e1;
|
||||
--color-neutral-300: #d6d3d2;
|
||||
--color-neutral-600: #6c6764;
|
||||
--color-neutral-700: #57534f;
|
||||
--color-neutral-800: #3a3735;
|
||||
--color-accent-700: #b8240e;
|
||||
background: none; color: var(--color-text);
|
||||
margin: 0 0 var(--space-4); padding: 0 0 var(--space-2);
|
||||
border-bottom: 2px solid var(--color-text);
|
||||
}
|
||||
.tc-shell .page-head .h1, .tc-shell .tc-pagehead .h1 { color: var(--color-text); }
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
import type { Metadata } from "next";
|
||||
import { Archivo } from "next/font/google";
|
||||
import "./globals.css";
|
||||
import ErrorReporting from "@/components/ErrorReporting";
|
||||
|
||||
const archivo = Archivo({
|
||||
variable: "--font-archivo",
|
||||
subsets: ["latin"],
|
||||
weight: ["400", "600", "700", "800"],
|
||||
display: "swap",
|
||||
});
|
||||
|
||||
export const viewport = { width: "device-width", initialScale: 1, viewportFit: "cover" as const };
|
||||
|
||||
const SITE = process.env.NEXT_PUBLIC_SITE_URL || "https://threadcount.tech";
|
||||
const DESC = "Uniform stock management for hospitals, aged care, clinics and community care. What's on the shelf, who took it and what it cost the ward or clinic — orders and stocktakes in one place.";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
metadataBase: new URL(SITE),
|
||||
title: { default: "ThreadCount — Uniform management for hospitals, aged care and clinics", template: "%s — ThreadCount" },
|
||||
description: DESC,
|
||||
applicationName: "ThreadCount",
|
||||
alternates: { canonical: "/" },
|
||||
// Without these a link pasted into Slack, Teams or an email renders as a bare URL.
|
||||
openGraph: {
|
||||
type: "website", siteName: "ThreadCount", url: SITE, locale: "en_AU",
|
||||
title: "ThreadCount — Uniform management for hospitals, aged care and clinics",
|
||||
description: DESC,
|
||||
images: [{ url: "/og.png", width: 1200, height: 630, alt: "ThreadCount — every garment out the door, accounted for." }],
|
||||
},
|
||||
twitter: { card: "summary_large_image", title: "ThreadCount — Uniform management for hospitals, aged care and clinics", description: DESC, images: ["/og.png"] },
|
||||
robots: { index: true, follow: true },
|
||||
formatDetection: { telephone: false },
|
||||
};
|
||||
|
||||
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<html lang="en" className={archivo.variable}>
|
||||
<body>
|
||||
{children}
|
||||
{/* Global handlers for the client crashes that never reach a React boundary. */}
|
||||
<ErrorReporting />
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
import { redirect } from "next/navigation";
|
||||
|
||||
// The legal documents used to live here as tabs on one page. They are now four routes under
|
||||
// (site). Anything still pointing at /legal (or /legal#privacy, whose hash never reaches the
|
||||
// server) lands on the Privacy Policy, which carries links to the other three.
|
||||
export default function LegalRedirect() {
|
||||
redirect("/privacy");
|
||||
}
|
||||
@@ -0,0 +1,513 @@
|
||||
"use client";
|
||||
/* The product card, on the phone.
|
||||
*
|
||||
* Two halves, because they are two different jobs. The top is the garment's description, which is
|
||||
* typed once and rarely changed. The bottom is per size — par level, barcode, what's on hand —
|
||||
* which is what someone standing at a shelf actually came here to adjust.
|
||||
*
|
||||
* The size index — a position in that list — is what every issue, order line and barcode points at,
|
||||
* so the order of the list is never offered for editing: shuffling it would silently repoint years
|
||||
* of records. One size can be taken off, though, and the server does the deciding: it shifts every
|
||||
* later size down across the ten tables that store a position, in one transaction, and refuses
|
||||
* outright when the size being removed has anything recorded against it. So this screen offers the
|
||||
* removal on every size and shows whatever comes back. */
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { useParams, useRouter } from "next/navigation";
|
||||
import { useDerived, useSnap } from "@/lib/client";
|
||||
import { bcBound, formatInZone, key as vkey, label, onhand, reorderAt, splitKey, type CostRec, type Item } from "@/lib/compute";
|
||||
import { isNative } from "@/lib/nativescan";
|
||||
import MScan from "@/components/MScan";
|
||||
import {
|
||||
ACCENT, GROUND, INK, ON_DARK, MBar, MBody, MError, MField, MNote, MRule, MSection, MTop, inputStyle,
|
||||
} from "@/components/m";
|
||||
|
||||
/* The two ways to get a code onto a size, side by side. Scanning stays the primary act, ink-filled:
|
||||
it is the fastest when the camera cooperates. Typing sits beside it rather than behind it — a
|
||||
label in your hand beats a camera that won't focus, and it is the only way to reach a code the
|
||||
scanner keeps putting on the wrong garment. */
|
||||
const codeBtn: React.CSSProperties = {
|
||||
flex: 1, minHeight: 48, font: "inherit", fontFamily: "var(--font-heading)", fontWeight: 800,
|
||||
fontSize: 13, letterSpacing: "0.06em", textTransform: "uppercase", cursor: "pointer",
|
||||
};
|
||||
/* Undoing rather than doing: the quieter kind of action on a size row. No border, so it reads as a
|
||||
link; 44px tall, so it is still a target you can hit with gloves on. */
|
||||
const quietAction: React.CSSProperties = {
|
||||
display: "flex", alignItems: "center", width: "100%", minHeight: 44, background: "none", border: 0,
|
||||
padding: 0, font: "inherit", fontSize: 12.5, fontWeight: 700, color: "var(--color-neutral-700)",
|
||||
textAlign: "left", cursor: "pointer",
|
||||
};
|
||||
|
||||
/* What a freshly minted number is, and what it still isn't.
|
||||
*
|
||||
* The code exists in ThreadCount the moment it is made, but the garment on the rack carries nothing
|
||||
* until somebody prints it and sticks it on — so the confirmation carries the print with it rather
|
||||
* than leaving it to be found at the foot of a fifteen-size screen. */
|
||||
function MMade({ made, inApp, labels, inset, onPrint }: {
|
||||
made: { size: string; code: string }[]; inApp: boolean; labels: number; inset?: boolean; onPrint: () => void;
|
||||
}) {
|
||||
if (!made.length) return null;
|
||||
return (
|
||||
<div style={{ margin: inset ? "10px 0 0" : 16, padding: 16, background: INK, color: GROUND, fontSize: 13.5, lineHeight: 1.6 }}>
|
||||
<div style={{ fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: 16, letterSpacing: "-0.01em" }}>
|
||||
{made.length === 1 ? `Size ${made[0].size} has a barcode now` : `${made.length} sizes have a barcode now`}
|
||||
</div>
|
||||
<div style={{ marginTop: 8, color: ON_DARK, fontSize: 12.5, fontVariantNumeric: "tabular-nums" }}>
|
||||
{made.map((m) => <div key={m.code}>{m.size} · {m.code}</div>)}
|
||||
</div>
|
||||
<div style={{ marginTop: 10 }}>
|
||||
{inApp
|
||||
? "Nothing is on the garments yet. Printing is a desktop job — the app can’t open a label sheet — so open ThreadCount at threadcount.tech and print this garment’s labels from there."
|
||||
: labels
|
||||
? "Nothing is on the garments yet. Print the labels and stick one on each."
|
||||
: "Nothing is on the garments yet, and nothing in a labelled size is on the shelf to stick one on. Count some in and the labels will print, one for each garment."}
|
||||
</div>
|
||||
{!inApp && labels > 0 && (
|
||||
<button onClick={onPrint}
|
||||
style={{ width: "100%", minHeight: 48, marginTop: 12, border: "2px solid " + GROUND, background: GROUND, color: INK, font: "inherit", fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: 13, letterSpacing: "0.06em", textTransform: "uppercase", cursor: "pointer" }}>
|
||||
Print labels
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function MProductCard() {
|
||||
const { id } = useParams<{ id: string }>();
|
||||
const { s, isAdmin, mutate, busy } = useSnap();
|
||||
const { L, byId } = useDerived();
|
||||
const router = useRouter();
|
||||
|
||||
const it = s.catalog.find((x: Item) => x.id === id);
|
||||
|
||||
const [err, setErr] = useState("");
|
||||
const [editing, setEditing] = useState(false);
|
||||
const [f, setF] = useState(() => ({
|
||||
item: it?.item ?? "", type: it?.type ?? "", group: it?.group ?? "All",
|
||||
supplier: it?.supplier ?? "", sku: it?.sku ?? "", cost: it ? String(it.cost) : "", notes: it?.notes ?? "",
|
||||
}));
|
||||
const [newSize, setNewSize] = useState("");
|
||||
const [scanFor, setScanFor] = useState<number | null>(null);
|
||||
const [typeFor, setTypeFor] = useState<number | null>(null);
|
||||
const [typed, setTyped] = useState("");
|
||||
/* Which run is in flight, so only the button that was pressed says so: `busy` is true for every
|
||||
mutation on the screen, and fifteen rows all reading "Generating…" because somebody nudged a
|
||||
par level is a lie. -1 is the whole-garment run. */
|
||||
const [genFor, setGenFor] = useState<number | null>(null);
|
||||
const [made, setMade] = useState<{ si: number; size: string; code: string }[]>([]);
|
||||
/* The Android shell cannot print: its WebView opens no second window, so the label sheet would
|
||||
replace the app, and window.print() doesn't exist there. Same reading as the reprint screen,
|
||||
taken after mount — the server render doesn't know which shell it is being sent to. */
|
||||
const [inApp, setInApp] = useState(false);
|
||||
useEffect(() => { setInApp(isNative()); }, []);
|
||||
|
||||
const groups = useMemo(() => {
|
||||
const set = new Set<string>(["All"]);
|
||||
for (const st of s.staff) if (st.group) set.add(st.group);
|
||||
for (const i of s.catalog) if (i.group) set.add(i.group);
|
||||
return [...set].sort();
|
||||
}, [s.staff, s.catalog]);
|
||||
|
||||
if (!it) {
|
||||
return (
|
||||
<>
|
||||
<MTop title="Garment" back />
|
||||
<MRule />
|
||||
<MBody><MNote tone="warn">That garment isn’t in the catalogue any more.</MNote></MBody>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
const name = label(byId[it.id] ?? it);
|
||||
// Newest first; the snapshot already caps how many it carries.
|
||||
const costs: CostRec[] = s.costs.filter((c) => c.itemId === it.id);
|
||||
const readOnly = !isAdmin;
|
||||
// How many sizes a whole-garment run would cover, and how much paper a print run would produce —
|
||||
// one label per garment on the shelf. Both read through the same bcBound and onhand the rows
|
||||
// below use, so the two numbers on this screen can never disagree with each other.
|
||||
const unlabelled = it.sizes.filter((_: string, si: number) => !bcBound(s, it, si)).length;
|
||||
const labels = it.sizes.reduce((n: number, _: string, si: number) =>
|
||||
n + (bcBound(s, it, si) ? Math.max(0, onhand(s, L, vkey(it.id, si))) : 0), 0);
|
||||
|
||||
/* Fill the boxes from the garment as it stands right now, not as it stood when the screen was
|
||||
* opened. The card refreshes underneath without remounting, so a coordinator can be looking at a
|
||||
* unit cost somebody else raised on the desktop minutes ago while this form still holds the old
|
||||
* one — and saving would quietly put the old price back and file a "Down from $24.00" cost change
|
||||
* in the wrong person's name. Every issue costed after that would use the stale figure. */
|
||||
function startEdit() {
|
||||
setErr("");
|
||||
setF({
|
||||
item: it!.item, type: it!.type, group: it!.group,
|
||||
supplier: it!.supplier, sku: it!.sku, cost: String(it!.cost), notes: it!.notes,
|
||||
});
|
||||
setEditing(true);
|
||||
}
|
||||
|
||||
async function saveDetails() {
|
||||
setErr("");
|
||||
if (!f.item.trim()) { setErr("The garment needs a name."); return; }
|
||||
const c = f.cost.trim() ? Number(f.cost) : 0;
|
||||
if (!(c >= 0) || Number.isNaN(c)) { setErr("Cost has to be a number."); return; }
|
||||
const r = await mutate("catalog.update", {
|
||||
id: it!.id, item: f.item.trim(), type: f.type.trim(), group: f.group,
|
||||
supplier: f.supplier.trim(), sku: f.sku.trim(), cost: c, notes: f.notes,
|
||||
});
|
||||
if (!r.ok) { setErr(r.error); return; }
|
||||
setEditing(false);
|
||||
}
|
||||
|
||||
async function addSize() {
|
||||
const sz = newSize.trim();
|
||||
if (!sz) return;
|
||||
setErr("");
|
||||
const r = await mutate("catalog.update", { id: it!.id, addSize: sz });
|
||||
if (!r.ok) { setErr(r.error); return; }
|
||||
setNewSize("");
|
||||
}
|
||||
|
||||
async function setPar(si: number, next: number) {
|
||||
const r = await mutate("stock.reorder", { itemId: it!.id, si, reorder: Math.max(0, next) });
|
||||
if (!r.ok) setErr(r.error);
|
||||
}
|
||||
|
||||
/** Where a code already sits, named the way a person would name it, or "" if this snapshot has
|
||||
* never seen it. */
|
||||
function boundElsewhere(code: string): string {
|
||||
const at = s.barcodes[code];
|
||||
if (!at) return "";
|
||||
const { itemId, si } = splitKey(at);
|
||||
const other = byId[itemId];
|
||||
return other ? `${label(other)} · size ${other.sizes[si] ?? si}` : "";
|
||||
}
|
||||
|
||||
/* Binding, including the refusal that used to be a dead end.
|
||||
*
|
||||
* A code scanned onto the wrong garment can only be put right by moving it, and barcode.bind
|
||||
* won't move one unless it is told to — so when that is why it refused, offer the move rather
|
||||
* than printing the message and stopping there. The snapshot is asked where the code sits so the
|
||||
* question can name the garment it would come off; the server's own sentence, which names it too,
|
||||
* is the fallback for a code somebody else bound since this page loaded. The other refusal — a
|
||||
* generated 93XXXXXXX code, which stands for a garment rather than sitting on a label — is
|
||||
* refused with or without force, matches neither test, and is shown as it came. */
|
||||
async function bind(si: number, raw: string) {
|
||||
const code = raw.trim();
|
||||
if (!code) return;
|
||||
setErr(""); setMade([]);
|
||||
const r = await mutate("barcode.bind", { code, itemId: it!.id, si });
|
||||
if (r.ok) { setTypeFor(null); setTyped(""); return; }
|
||||
const at = boundElsewhere(code);
|
||||
if (!at && !/is already on/.test(r.error)) { setErr(r.error); return; }
|
||||
const ask = at
|
||||
? `${code} is on ${at}. Take it off there and put it on ${name} · size ${it!.sizes[si]}?`
|
||||
: `${r.error}\n\nMove it onto ${name} · size ${it!.sizes[si]}?`;
|
||||
if (!confirm(ask)) { setErr(r.error); return; }
|
||||
const moved = await mutate("barcode.bind", { code, itemId: it!.id, si, force: true });
|
||||
if (!moved.ok) { setErr(moved.error); return; }
|
||||
setTypeFor(null); setTyped("");
|
||||
}
|
||||
|
||||
async function unbind(si: number, code: string) {
|
||||
if (!confirm(`Unbind ${code} from ${name} · size ${it!.sizes[si]}? Scanning that label won't find this size any more.`)) return;
|
||||
setErr(""); setMade([]);
|
||||
const r = await mutate("barcode.unbind", { code });
|
||||
if (!r.ok) setErr(r.error);
|
||||
}
|
||||
|
||||
/* The server decides whether a size can go — it is the one that can count what has been recorded
|
||||
* against this exact position — so the offer is made on every size and the refusal is shown when
|
||||
* one comes back. Removing shifts the sizes after it down a place, so anything this screen is
|
||||
* holding open against a position has to let go of it. */
|
||||
async function removeSize(si: number) {
|
||||
if (!confirm(`Remove size ${it!.sizes[si]} from ${name}? Its par level and any barcode on it go with it.`)) return;
|
||||
setErr("");
|
||||
const r = await mutate("catalog.removeSize", { id: it!.id, si });
|
||||
if (!r.ok) { setErr(r.error); return; }
|
||||
setScanFor(null); setTypeFor(null); setTyped(""); setMade([]);
|
||||
}
|
||||
|
||||
/* Printing our own barcode for stock that arrived without one — the cafe shirts came with nothing
|
||||
* printed on any of fifteen sizes, and a garment nobody can scan is invisible to a count and
|
||||
* cannot be issued by scanning. The number is a real EAN-13 from the range GS1 keeps for exactly
|
||||
* this, so every scanner in the building already reads it.
|
||||
*
|
||||
* The server decides what is missing: it fills only the gaps, leaves a size carrying a supplier's
|
||||
* code alone, and refuses outright when there is nothing to do. So the offer is made and whatever
|
||||
* comes back is shown, rather than the button being hidden on this screen's guess about a
|
||||
* snapshot that may be a few seconds old. */
|
||||
async function generate(si?: number) {
|
||||
setErr(""); setMade([]);
|
||||
setGenFor(si ?? -1);
|
||||
const r = await mutate<{ made: { si: number; size: string; code: string }[]; count: number }>(
|
||||
"barcode.generate", si === undefined ? { itemId: it!.id } : { itemId: it!.id, si },
|
||||
);
|
||||
setGenFor(null);
|
||||
if (!r.ok) { setErr(r.error); return; }
|
||||
setMade(r.result.made);
|
||||
}
|
||||
|
||||
/* Not destructive, but it does put numbers on garments — and on a rack of fifteen sizes it is a
|
||||
good deal more than the person pressing it can see at once. So it says how many first. */
|
||||
async function generateAll() {
|
||||
const ask = `Generate a barcode for ${unlabelled} size${unlabelled === 1 ? "" : "s"} on ${name}? Sizes that already carry a supplier's code keep theirs, and nothing is on a garment until the labels are printed.`;
|
||||
if (unlabelled > 0 && !confirm(ask)) return;
|
||||
await generate();
|
||||
}
|
||||
|
||||
/* A whole garment's labels: one per garment on hand, every size that carries a code. A second
|
||||
window rather than this one, because leaving the screen would lose the size list somebody is
|
||||
halfway through labelling — and inside the app there is no second window to open, which is why
|
||||
every path to here is closed off when `inApp`. */
|
||||
function printLabels() {
|
||||
window.open(`/print/labels?item=${encodeURIComponent(it!.id)}`, "_blank", "noopener");
|
||||
}
|
||||
|
||||
async function archive() {
|
||||
const r = await mutate("catalog.update", { id: it!.id, archived: !it!.archived });
|
||||
if (!r.ok) { setErr(r.error); return; }
|
||||
if (!it!.archived) router.replace("/m/catalogue");
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<MTop title={it.archived ? "Archived" : "Garment"} right={`${it.sizes.length} size${it.sizes.length === 1 ? "" : "s"}`} back />
|
||||
<MRule />
|
||||
<MBody>
|
||||
<MError msg={err} onDismiss={() => setErr("")} />
|
||||
|
||||
{it.archived && <MNote tone="warn">This garment is archived. It stays on old records but can’t be issued.</MNote>}
|
||||
|
||||
{/* ---- the description ---- */}
|
||||
{!editing ? (
|
||||
<>
|
||||
<div style={{ padding: "18px 16px", borderBottom: "1px solid var(--color-divider)" }}>
|
||||
<div style={{ fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: 24, letterSpacing: "-0.02em", lineHeight: 1.1 }}>{name}</div>
|
||||
<div style={{ fontSize: 13.5, color: "var(--color-neutral-700)", marginTop: 8, lineHeight: 1.6 }}>
|
||||
{[it.type, it.group === "All" ? "Anyone" : it.group, it.supplier, it.sku].filter(Boolean).join(" · ") || "No details yet"}
|
||||
<br />
|
||||
{it.cost ? `$${it.cost.toFixed(2)} each` : "No unit cost set"}
|
||||
</div>
|
||||
{it.notes && <div style={{ fontSize: 13, color: "var(--color-neutral-800)", marginTop: 10, lineHeight: 1.6 }}>{it.notes}</div>}
|
||||
</div>
|
||||
{!readOnly && (
|
||||
<div style={{ padding: 16, borderBottom: "2px solid " + INK }}>
|
||||
<button onClick={startEdit}
|
||||
style={{ width: "100%", minHeight: 52, border: "2px solid " + INK, background: "transparent", color: INK, font: "inherit", fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: 14, letterSpacing: "0.08em", textTransform: "uppercase", cursor: "pointer" }}>
|
||||
Edit details
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<MField label="Garment">
|
||||
<input value={f.item} onChange={(e) => setF({ ...f, item: e.target.value })} autoCapitalize="words" style={inputStyle} />
|
||||
</MField>
|
||||
<MField label="Type">
|
||||
<input value={f.type} onChange={(e) => setF({ ...f, type: e.target.value })} style={inputStyle} />
|
||||
</MField>
|
||||
<MField label="Who wears it">
|
||||
<select value={f.group} onChange={(e) => setF({ ...f, group: e.target.value })} style={{ ...inputStyle, appearance: "none" }}>
|
||||
{groups.map((g) => <option key={g} value={g}>{g === "All" ? "Anyone" : g}</option>)}
|
||||
</select>
|
||||
</MField>
|
||||
<MField label="Supplier">
|
||||
<input value={f.supplier} onChange={(e) => setF({ ...f, supplier: e.target.value })} style={inputStyle} />
|
||||
</MField>
|
||||
<MField label="Supplier code">
|
||||
<input value={f.sku} onChange={(e) => setF({ ...f, sku: e.target.value })} autoCapitalize="characters" autoCorrect="off" spellCheck={false} style={inputStyle} />
|
||||
</MField>
|
||||
<MField label="Unit cost">
|
||||
<input value={f.cost} onChange={(e) => setF({ ...f, cost: e.target.value })} inputMode="decimal" style={inputStyle} />
|
||||
</MField>
|
||||
<MField label="Notes">
|
||||
<input value={f.notes} onChange={(e) => setF({ ...f, notes: e.target.value })} placeholder="Optional" style={inputStyle} />
|
||||
</MField>
|
||||
<div style={{ padding: 16, display: "grid", gap: 10, borderBottom: "2px solid " + INK }}>
|
||||
<button onClick={saveDetails} disabled={busy}
|
||||
style={{ width: "100%", minHeight: 52, border: "2px solid " + ACCENT, background: ACCENT, color: "#fff", font: "inherit", fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: 14, letterSpacing: "0.08em", textTransform: "uppercase", cursor: "pointer" }}>
|
||||
{busy ? "Saving…" : "Save details"}
|
||||
</button>
|
||||
<button onClick={() => { setEditing(false); setErr(""); setF({ item: it.item, type: it.type, group: it.group, supplier: it.supplier, sku: it.sku, cost: String(it.cost), notes: it.notes }); }}
|
||||
style={{ width: "100%", minHeight: 48, border: 0, background: "none", color: "var(--color-neutral-700)", font: "inherit", fontSize: 13.5, fontWeight: 700, cursor: "pointer" }}>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* ---- per size ---- */}
|
||||
<MSection label="Sizes" right="On hand · par" />
|
||||
{it.sizes.map((sz: string, si: number) => {
|
||||
const k = vkey(it.id, si);
|
||||
const oh = onhand(s, L, k);
|
||||
const par = reorderAt(s, k);
|
||||
// The bound supplier code only. bcFor()'s generated 93XXXXXXX fallback is printed on no
|
||||
// garment, so showing it made every size look labelled and hid the ones that need one.
|
||||
const code = bcBound(s, it, si);
|
||||
return (
|
||||
<div key={si} style={{ padding: "14px 16px", borderBottom: "1px solid var(--color-divider)" }}>
|
||||
<div style={{ display: "flex", alignItems: "center", gap: 12 }}>
|
||||
<div style={{ fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: 19, minWidth: 54 }}>{sz}</div>
|
||||
<div style={{ flex: 1, minWidth: 0 }}>
|
||||
<div style={{ fontSize: 13, color: "var(--color-neutral-700)" }}>
|
||||
<b style={{ color: oh <= par ? "var(--color-accent-700)" : INK, fontSize: 15 }}>{oh}</b> on hand
|
||||
</div>
|
||||
<div style={{ fontSize: 12, color: code ? "var(--color-neutral-700)" : "var(--color-neutral-600)", marginTop: 2, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
|
||||
{code || "No barcode bound"}
|
||||
</div>
|
||||
</div>
|
||||
{!readOnly && (
|
||||
<div style={{ display: "flex", alignItems: "center", gap: 0 }}>
|
||||
<button onClick={() => setPar(si, par - 1)} aria-label={`Lower par for ${sz}`}
|
||||
style={{ width: 44, height: 44, border: "2px solid " + INK, background: "transparent", color: INK, fontSize: 20, fontWeight: 800, cursor: "pointer" }}>−</button>
|
||||
<div style={{ minWidth: 44, height: 44, border: "2px solid " + INK, borderLeft: 0, borderRight: 0, display: "flex", alignItems: "center", justifyContent: "center", fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: 16 }}>{par}</div>
|
||||
<button onClick={() => setPar(si, par + 1)} aria-label={`Raise par for ${sz}`}
|
||||
style={{ width: 44, height: 44, border: "2px solid " + INK, background: "transparent", color: INK, fontSize: 20, fontWeight: 800, cursor: "pointer" }}>+</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{!readOnly && (
|
||||
<div style={{ marginTop: 10 }}>
|
||||
{typeFor === si ? (
|
||||
<div style={{ display: "grid", gap: 8 }}>
|
||||
{/* A numeric keypad, because a supplier code is thirteen digits and that is
|
||||
the keyboard you can hit accurately while holding the garment. It is only
|
||||
a hint to the keyboard: whatever arrives is taken as typed, so the
|
||||
alphanumeric codes some labels carry go through on a keyboard that offers
|
||||
letters, and pasting is unaffected either way. */}
|
||||
<input value={typed} onChange={(e) => setTyped(e.target.value)}
|
||||
onKeyDown={(e) => { if (e.key === "Enter") bind(si, typed); }}
|
||||
placeholder="Barcode on the label" inputMode="numeric" autoFocus
|
||||
autoCapitalize="characters" autoCorrect="off" spellCheck={false}
|
||||
aria-label={`Barcode for size ${sz}`} style={inputStyle} />
|
||||
<div style={{ display: "flex", gap: 8 }}>
|
||||
<button onClick={() => bind(si, typed)} disabled={busy || !typed.trim()}
|
||||
style={{ ...codeBtn, border: "2px solid " + ACCENT, background: ACCENT, color: "#fff", opacity: typed.trim() ? 1 : 0.4 }}>
|
||||
{busy ? "Binding…" : "Bind"}
|
||||
</button>
|
||||
<button onClick={() => { setTypeFor(null); setTyped(""); }}
|
||||
style={{ ...codeBtn, border: "2px solid var(--color-neutral-400)", background: "transparent", color: "var(--color-neutral-700)" }}>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div style={{ display: "flex", gap: 8 }}>
|
||||
<button onClick={() => setScanFor(si)} aria-label={`Scan a barcode for size ${sz}`}
|
||||
style={{ ...codeBtn, border: "2px solid " + INK, background: INK, color: GROUND }}>
|
||||
{code ? "Scan a new one" : "Scan"}
|
||||
</button>
|
||||
<button onClick={() => { setErr(""); setTyped(""); setTypeFor(si); }} aria-label={`Type a barcode for size ${sz}`}
|
||||
style={{ ...codeBtn, border: "2px solid " + INK, background: "transparent", color: INK }}>
|
||||
Type it in
|
||||
</button>
|
||||
</div>
|
||||
{/* Stock that turned up with nothing printed on it has no label to scan and no
|
||||
number to type, so the third way is to make one. Offered only where nothing
|
||||
is bound: wherever the supplier printed a code, that code is the one the
|
||||
delivery note will use next time and it stays. */}
|
||||
{!code && (
|
||||
<button onClick={() => generate(si)} disabled={busy} aria-label={`Generate a barcode for size ${sz}`}
|
||||
style={{ ...codeBtn, width: "100%", marginTop: 8, border: "2px solid " + INK, background: "transparent", color: INK, opacity: busy ? 0.5 : 1 }}>
|
||||
{genFor === si ? "Generating…" : "Generate a barcode"}
|
||||
</button>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
{code && <button onClick={() => unbind(si, code)} style={quietAction}>Unbind {code}</button>}
|
||||
<button onClick={() => removeSize(si)} style={quietAction}>Remove size {sz}</button>
|
||||
{made.length === 1 && made[0].si === si && <MMade made={made} inApp={inApp} labels={labels} inset onPrint={printLabels} />}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
||||
{!readOnly && (
|
||||
<div style={{ padding: 16, borderBottom: "2px solid " + INK, display: "flex", gap: 10 }}>
|
||||
<input value={newSize} onChange={(e) => setNewSize(e.target.value)} placeholder="Add a size"
|
||||
autoCapitalize="characters" autoCorrect="off" spellCheck={false}
|
||||
style={{ ...inputStyle, flex: 1 }} />
|
||||
<button onClick={addSize} disabled={busy || !newSize.trim()}
|
||||
style={{ minWidth: 96, border: "2px solid " + INK, background: INK, color: GROUND, font: "inherit", fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: 13, letterSpacing: "0.06em", textTransform: "uppercase", cursor: "pointer", opacity: newSize.trim() ? 1 : 0.4 }}>
|
||||
Add
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!readOnly && (
|
||||
<>
|
||||
<MSection label="Barcodes" right={unlabelled ? `${unlabelled} without` : "All labelled"} />
|
||||
{made.length > 1 && <MMade made={made} inApp={inApp} labels={labels} onPrint={printLabels} />}
|
||||
<div style={{ padding: 16, display: "grid", gap: 10, borderBottom: "2px solid " + INK }}>
|
||||
<button onClick={generateAll} disabled={busy}
|
||||
style={{ width: "100%", minHeight: 52, border: "2px solid " + INK, background: "transparent", color: INK, font: "inherit", fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: 14, letterSpacing: "0.08em", textTransform: "uppercase", cursor: "pointer", opacity: busy ? 0.5 : 1 }}>
|
||||
{genFor === -1 ? "Generating…" : "Generate for every unlabelled size"}
|
||||
</button>
|
||||
<button onClick={printLabels} disabled={inApp || labels === 0}
|
||||
style={{ width: "100%", minHeight: 52, border: "2px solid " + ACCENT, background: ACCENT, color: "#fff", font: "inherit", fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: 14, letterSpacing: "0.08em", textTransform: "uppercase", cursor: inApp || labels === 0 ? "not-allowed" : "pointer", opacity: inApp || labels === 0 ? 0.5 : 1 }}>
|
||||
{inApp ? "Print on the desktop" : "Print labels"}
|
||||
</button>
|
||||
<div style={{ fontSize: 12.5, color: "var(--color-neutral-700)", lineHeight: 1.6 }}>
|
||||
{inApp
|
||||
? "Printing is a desktop job — the app can’t open a label sheet. Open ThreadCount at threadcount.tech and print this garment’s labels from there."
|
||||
: labels
|
||||
? `One label for every garment on hand in a size that carries a code — ${labels} at the moment, six to an A4 sheet.`
|
||||
: "Nothing on the shelf carries a code yet, so there is nothing to print."}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{!readOnly && (
|
||||
<div style={{ padding: 16 }}>
|
||||
<button onClick={archive}
|
||||
style={{ background: "none", border: 0, padding: 0, font: "inherit", fontSize: 13, fontWeight: 700, color: it.archived ? "var(--color-accent-700)" : "var(--color-neutral-700)", cursor: "pointer" }}>
|
||||
{it.archived ? "Put this garment back in the catalogue" : "Archive this garment"}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* What we used to pay. CatalogItem.cost is a single field, so without this a price rise
|
||||
silently erased the old figure — and "what did these cost last year" is a question
|
||||
finance asks every year. */}
|
||||
{costs.length > 0 && (
|
||||
<>
|
||||
<MSection label="What it has cost" right="Changed by" />
|
||||
{costs.map((c) => (
|
||||
<div key={c.id} style={{ display: "flex", alignItems: "baseline", gap: 12, padding: "12px 16px", borderBottom: "1px solid var(--color-divider)" }}>
|
||||
<div style={{ fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: 17, minWidth: 78, fontVariantNumeric: "tabular-nums" }}>
|
||||
${c.cost.toFixed(2)}
|
||||
</div>
|
||||
<div style={{ flex: 1, minWidth: 0, fontSize: 12.5, color: "var(--color-neutral-700)" }}>
|
||||
{c.previous === null
|
||||
? "Opening price"
|
||||
: `${c.previous > c.cost ? "Down" : "Up"} from $${c.previous.toFixed(2)}`}
|
||||
{" · "}
|
||||
{/* The facility's zone, not the device's. A price change stamped at 09:00 in
|
||||
Perth is a different calendar day on a phone left set to Sydney, and this
|
||||
page is server-rendered first: with no zone pinned the server and the browser
|
||||
formatted the same instant differently and React threw the markup away. */}
|
||||
{formatInZone(c.at, s.tz)}
|
||||
</div>
|
||||
<div style={{ fontSize: 12, color: "var(--color-neutral-600)", whiteSpace: "nowrap" }}>{c.byName}</div>
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
|
||||
{readOnly && <MNote>Only an admin can change the catalogue.</MNote>}
|
||||
</MBody>
|
||||
|
||||
{!readOnly && !it.archived && <MBar label="Done" glyph="check" tone="ink" onClick={() => router.push("/m/catalogue")} />}
|
||||
|
||||
{scanFor !== null && (
|
||||
<MScan
|
||||
title={`Barcode for ${it.sizes[scanFor]}`}
|
||||
onClose={() => setScanFor(null)}
|
||||
onHit={(raw) => { const si = scanFor; setScanFor(null); if (si !== null) bind(si, raw); }}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,155 @@
|
||||
"use client";
|
||||
/* Create a garment from the counter.
|
||||
*
|
||||
* The desktop form asks for everything at once, which is right when you are importing a range.
|
||||
* Here the only genuinely required things are a name and at least one size — the server enforces
|
||||
* exactly that — so everything else can be filled in later from the product card. A coordinator
|
||||
* with a new garment in one hand and a phone in the other should be able to make it exist in about
|
||||
* twenty seconds and scan it in.
|
||||
*
|
||||
* Sizes are entered as a run rather than one at a time, because that is how they arrive: a garment
|
||||
* comes in S-M-L-XL, not as four separate decisions. */
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useMemo, useState } from "react";
|
||||
import { useSnap } from "@/lib/client";
|
||||
import type { Item } from "@/lib/compute";
|
||||
import { INK, MBar, MBody, MError, MField, MNote, MRule, MTop, inputStyle } from "@/components/m";
|
||||
|
||||
const COMMON_RUNS: [string, string][] = [
|
||||
["XS S M L XL", "XS · S · M · L · XL"],
|
||||
["S M L XL 2XL", "S · M · L · XL · 2XL"],
|
||||
["8 10 12 14 16 18", "8 – 18"],
|
||||
["77R 82R 87R 92R", "77R – 92R"],
|
||||
];
|
||||
|
||||
export default function MCatalogueNew() {
|
||||
const { s, isAdmin, mutate, busy } = useSnap();
|
||||
const router = useRouter();
|
||||
|
||||
const [item, setItem] = useState("");
|
||||
const [type, setType] = useState("");
|
||||
const [group, setGroup] = useState("All");
|
||||
const [supplier, setSupplier] = useState("");
|
||||
const [sku, setSku] = useState("");
|
||||
const [cost, setCost] = useState("");
|
||||
const [sizeText, setSizeText] = useState("");
|
||||
const [err, setErr] = useState("");
|
||||
|
||||
// Split on commas, slashes or whitespace so a run can be typed however it comes to hand.
|
||||
const sizes = useMemo(
|
||||
() => sizeText.split(/[,/\s]+/).map((x) => x.trim()).filter(Boolean),
|
||||
[sizeText],
|
||||
);
|
||||
const dupSize = useMemo(() => sizes.length !== new Set(sizes).size, [sizes]);
|
||||
|
||||
/* The facility's configured groups are the vocabulary; the register and the catalogue only ever
|
||||
* add to it.
|
||||
*
|
||||
* This used to be built from the groups already in USE, which made it impossible to put a garment
|
||||
* on a role nothing had used yet — the first Kitchen shirt could never be added from the counter,
|
||||
* because "Kitchen" only appeared in the list once a Kitchen garment existed. On a facility whose
|
||||
* register has not been imported yet it collapsed to "Anyone" and whatever one or two groups the
|
||||
* first few items happened to carry. The desktop dialog has always read settings.staffGroups;
|
||||
* this is the same field and now has the same source. The in-use ones are still folded in so a
|
||||
* group that predates the configured list, or arrived on a CSV import, does not vanish. */
|
||||
const groups = useMemo(() => {
|
||||
const set = new Set<string>(["All", ...s.settings.staffGroups]);
|
||||
for (const st of s.staff) if (st.group) set.add(st.group);
|
||||
for (const i of s.catalog) if (i.group) set.add(i.group);
|
||||
return [...set].sort();
|
||||
}, [s.staff, s.catalog, s.settings.staffGroups]);
|
||||
|
||||
const types = useMemo(() => [...new Set(s.catalog.map((i: Item) => i.type).filter(Boolean))].sort(), [s.catalog]);
|
||||
const suppliers = useMemo(() => s.supplierDir.map((x) => x.name).sort(), [s.supplierDir]);
|
||||
|
||||
if (!isAdmin) {
|
||||
return (
|
||||
<>
|
||||
<MTop title="New garment" back />
|
||||
<MRule />
|
||||
<MBody><MNote tone="warn">Only an admin can add to the catalogue.</MNote></MBody>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
async function save() {
|
||||
setErr("");
|
||||
if (!item.trim()) { setErr("Give the garment a name."); return; }
|
||||
if (!sizes.length) { setErr("Add at least one size."); return; }
|
||||
if (dupSize) { setErr("The same size is listed twice."); return; }
|
||||
const c = cost.trim() ? Number(cost) : 0;
|
||||
if (!(c >= 0) || Number.isNaN(c)) { setErr("Cost has to be a number, or left blank."); return; }
|
||||
|
||||
const r = await mutate<{ id: string }>("catalog.add", {
|
||||
item: item.trim(), type: type.trim(), group, supplier: supplier.trim(),
|
||||
sku: sku.trim(), cost: c, sizes,
|
||||
});
|
||||
if (!r.ok) { setErr(r.error); return; }
|
||||
// Straight to the product card: the next thing anyone does is bind a barcode or set par.
|
||||
router.replace(`/m/catalogue/${r.result.id}`);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<MTop title="New garment" back />
|
||||
<MRule />
|
||||
<MBody>
|
||||
<MError msg={err} onDismiss={() => setErr("")} />
|
||||
|
||||
<MField label="Garment">
|
||||
<input value={item} onChange={(e) => { setItem(e.target.value); setErr(""); }}
|
||||
placeholder="Scrub top" autoCapitalize="words" enterKeyHint="next" style={inputStyle} />
|
||||
</MField>
|
||||
|
||||
<MField label="Sizes">
|
||||
<input value={sizeText} onChange={(e) => { setSizeText(e.target.value); setErr(""); }}
|
||||
placeholder="S M L XL" autoCapitalize="characters" autoCorrect="off" spellCheck={false} style={inputStyle} />
|
||||
</MField>
|
||||
<div style={{ padding: "0 16px 14px", display: "flex", flexWrap: "wrap", gap: 8 }}>
|
||||
{COMMON_RUNS.map(([run, pretty]) => (
|
||||
<button key={run} onClick={() => { setSizeText(run); setErr(""); }}
|
||||
style={{ border: "2px solid " + INK, background: "transparent", color: INK, padding: "8px 12px", fontSize: 12.5, fontWeight: 700, cursor: "pointer" }}>
|
||||
{pretty}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
{sizes.length > 0 && (
|
||||
<div style={{ padding: "0 16px 14px", fontSize: 13, color: dupSize ? "var(--color-accent-700)" : "var(--color-neutral-700)", fontWeight: dupSize ? 700 : 400 }}>
|
||||
{dupSize ? "The same size is listed twice." : `${sizes.length} size${sizes.length === 1 ? "" : "s"}: ${sizes.join(" · ")}`}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<MField label="Type">
|
||||
<input list="tc-types" value={type} onChange={(e) => setType(e.target.value)} placeholder="Scrub top" style={inputStyle} />
|
||||
<datalist id="tc-types">{types.map((t) => <option key={t} value={t} />)}</datalist>
|
||||
</MField>
|
||||
|
||||
<MField label="Who wears it">
|
||||
<select value={group} onChange={(e) => setGroup(e.target.value)} style={{ ...inputStyle, appearance: "none" }}>
|
||||
{groups.map((g) => <option key={g} value={g}>{g === "All" ? "Anyone" : g}</option>)}
|
||||
</select>
|
||||
</MField>
|
||||
|
||||
<MField label="Supplier">
|
||||
<input list="tc-suppliers" value={supplier} onChange={(e) => setSupplier(e.target.value)} placeholder="Optional" style={inputStyle} />
|
||||
<datalist id="tc-suppliers">{suppliers.map((x) => <option key={x} value={x} />)}</datalist>
|
||||
</MField>
|
||||
|
||||
<MField label="Supplier code">
|
||||
<input value={sku} onChange={(e) => setSku(e.target.value)} placeholder="Optional" autoCapitalize="characters" autoCorrect="off" spellCheck={false} style={inputStyle} />
|
||||
</MField>
|
||||
|
||||
<MField label="Unit cost">
|
||||
<input value={cost} onChange={(e) => { setCost(e.target.value); setErr(""); }}
|
||||
inputMode="decimal" placeholder="0.00" style={inputStyle} />
|
||||
</MField>
|
||||
|
||||
<MNote>
|
||||
Barcodes, par levels and opening stock are set on the product card once this exists — it
|
||||
is quicker to scan a garment in than to type its code.
|
||||
</MNote>
|
||||
</MBody>
|
||||
<MBar label={busy ? "Saving…" : "Create garment"} onClick={save} disabled={busy} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,91 @@
|
||||
"use client";
|
||||
/* The catalogue on the phone.
|
||||
*
|
||||
* This used to be one of the rows under "On the desktop" — listed, greyed out, untappable, with
|
||||
* the note that adding garments is a sit-down job. It genuinely is, for a bulk import of two
|
||||
* hundred lines. It is not for the thing that actually happens in a linen room: a new garment
|
||||
* turns up at the counter and needs to exist before it can be scanned in.
|
||||
*
|
||||
* So this is the whole catalogue, not just what's on the shelf — /m/stock deliberately shows only
|
||||
* variants with history, which means a garment created five minutes ago wouldn't appear there. */
|
||||
import Link from "next/link";
|
||||
import { useMemo, useState } from "react";
|
||||
import { useDerived, useSnap } from "@/lib/client";
|
||||
import { label, type Item } from "@/lib/compute";
|
||||
import { INK, IconPlus, MBody, MEmpty, MNav, MNote, MRow, MRule, MSection, MTop, inputStyle } from "@/components/m";
|
||||
|
||||
export default function MCatalogue() {
|
||||
const { s, isAdmin } = useSnap();
|
||||
const { byId } = useDerived();
|
||||
const [q, setQ] = useState("");
|
||||
const [showArchived, setShowArchived] = useState(false);
|
||||
|
||||
const rows = useMemo(() => {
|
||||
const needle = q.trim().toLowerCase();
|
||||
return s.catalog
|
||||
.filter((i: Item) => (showArchived ? i.archived : !i.archived))
|
||||
.map((i: Item) => ({
|
||||
...i,
|
||||
name: label(byId[i.id] ?? i),
|
||||
sub: [i.sizes.length ? `${i.sizes.length} size${i.sizes.length === 1 ? "" : "s"}` : "No sizes yet", i.supplier || "No supplier", i.sku].filter(Boolean).join(" · "),
|
||||
}))
|
||||
.filter((i) => !needle || `${i.name} ${i.sku} ${i.supplier} ${i.type} ${i.group}`.toLowerCase().includes(needle))
|
||||
.sort((a, b) => a.name.localeCompare(b.name));
|
||||
}, [s.catalog, byId, q, showArchived]);
|
||||
|
||||
const archivedCount = s.catalog.filter((i: Item) => i.archived).length;
|
||||
const addLink: React.CSSProperties = {
|
||||
display: "flex", alignItems: "center", gap: 12, minHeight: 64, padding: "0 20px",
|
||||
border: "2px solid " + INK, color: INK, textDecoration: "none",
|
||||
fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: 14, letterSpacing: "0.08em", textTransform: "uppercase",
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<MTop title="Catalogue" right={`${rows.length} item${rows.length === 1 ? "" : "s"}`} back />
|
||||
<MRule />
|
||||
<MBody>
|
||||
<div style={{ padding: 16, borderBottom: "2px solid " + INK }}>
|
||||
<input value={q} onChange={(e) => setQ(e.target.value)} placeholder="Garment, code, supplier" aria-label="Filter the catalogue" style={inputStyle} />
|
||||
</div>
|
||||
|
||||
{isAdmin && (
|
||||
<div style={{ padding: 16, borderBottom: "1px solid var(--color-divider)" }}>
|
||||
<Link href="/m/catalogue/new" style={addLink}>
|
||||
<IconPlus /><span style={{ flex: 1 }}>New garment</span>
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<MSection label={showArchived ? "Archived" : "Garments"} right={isAdmin ? "Tap to edit" : undefined} />
|
||||
{rows.length === 0
|
||||
? <MEmpty
|
||||
title={q ? "Nothing matches" : showArchived ? "Nothing archived" : "No garments yet"}
|
||||
sub={q ? "Try a shorter search." : isAdmin ? "Add the first one and it can be scanned in straight away." : "An admin sets the catalogue up."} />
|
||||
: rows.slice(0, 300).map((i) => (
|
||||
<MRow
|
||||
key={i.id}
|
||||
href={isAdmin ? `/m/catalogue/${i.id}` : undefined}
|
||||
mark={i.archived ? "mute" : "ink"}
|
||||
title={i.name}
|
||||
sub={i.sub}
|
||||
right={<span style={{ fontSize: 12, color: "var(--color-neutral-600)" }}>{i.cost ? `$${i.cost.toFixed(2)}` : ""}</span>}
|
||||
/>
|
||||
))}
|
||||
|
||||
{archivedCount > 0 && (
|
||||
<div style={{ padding: 16 }}>
|
||||
<button
|
||||
onClick={() => setShowArchived(!showArchived)}
|
||||
style={{ background: "none", border: 0, padding: 0, font: "inherit", fontSize: 13, fontWeight: 700, color: "var(--color-accent-700)", cursor: "pointer" }}>
|
||||
{showArchived ? "Back to the current catalogue" : `Show ${archivedCount} archived`}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!isAdmin && <MNote>Only an admin can change the catalogue. You can still see what exists.</MNote>}
|
||||
</MBody>
|
||||
<MNav />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,220 @@
|
||||
"use client";
|
||||
/* Counting — the screen the app exists for. Scan a garment, the active line goes up by one.
|
||||
Expected quantities stay visible throughout: this is a sighted count, not a blind one.
|
||||
The tally lives in localStorage, so backgrounding the app mid-shelf loses nothing. */
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||
import { useParams, useRouter } from "next/navigation";
|
||||
import { useDerived, useSnap } from "@/lib/client";
|
||||
import { bcBound, locMap, locSubtree, locUnder, onhand, touched, UNPLACED, variantName } from "@/lib/compute";
|
||||
import MScan from "@/components/MScan";
|
||||
import { scanReject } from "@/lib/feedback";
|
||||
import { track } from "@/lib/analytics";
|
||||
import { useKeepAwake } from "@/lib/wakelock";
|
||||
import { INK, MAction, MBody, MEmpty, MError, MFigures, MInkLink, MPanel, MRow, MRule, MSection, MSplit, MTop, ON_DARK, inputStyle } from "@/components/m";
|
||||
import { readCount, writeCount } from "@/lib/opencount";
|
||||
|
||||
export default function MCounting() {
|
||||
const { s } = useSnap();
|
||||
const { L, byId, variants } = useDerived();
|
||||
const router = useRouter();
|
||||
const locationId = String(useParams().id || "");
|
||||
const locs = useMemo(() => locMap(s), [s]);
|
||||
const loc = locs[locationId];
|
||||
const locName = locationId === UNPLACED ? "Not on a shelf" : loc?.name || "Location";
|
||||
|
||||
// The lines on this shelf, in catalogue order.
|
||||
//
|
||||
// Being placed on the shelf is enough to be countable: a size placed from the desktop but never
|
||||
// stocked has no history at all, and filtering it out meant the six of them you have just found
|
||||
// on the shelf could not be counted in from the count that found them. The unplaced bucket still
|
||||
// needs the history test, or it would be the whole catalogue.
|
||||
//
|
||||
// The variance screen repeats this test verbatim, and the two have to keep listing the same
|
||||
// lines: anything countable here but missing there is counted on the phone and then dropped at
|
||||
// commit, with the tally cleared behind it and nothing said.
|
||||
const lines = useMemo(() => {
|
||||
const sub = locationId === UNPLACED ? null : locSubtree(s, locationId);
|
||||
return variants
|
||||
// A bound barcode counts as much as stock history does. Somebody stood at the counter with
|
||||
// the garment in one hand and scanned its label onto that size — that is a stronger statement
|
||||
// that the size physically exists than a stock figure, which on a room being set up is
|
||||
// precisely what nobody has yet. Without this the first count after building a catalogue can
|
||||
// reach nothing at all: every size is unplaced and untouched, so the list is empty and every
|
||||
// scan is refused as belonging somewhere else.
|
||||
.filter((v) => (sub ? sub.has(s.placed[v.key] || "") : !s.placed[v.key] && (touched(s, L, v.key) || !!bcBound(s, v.item, v.si))))
|
||||
.map((v) => ({ ...v, expected: onhand(s, L, v.key), code: bcBound(s, v.item, v.si), where: locUnder(locs, s.placed[v.key], locationId) }));
|
||||
}, [s, L, variants, locationId, locs]);
|
||||
|
||||
const [counted, setCounted] = useState<Record<string, number>>({});
|
||||
// The line being counted is held by its variant key, never by its position in `lines`. The list
|
||||
// is rebuilt on every live refresh, and a size sorting earlier in the catalogue being inserted
|
||||
// ahead of it would leave an index pointing at the neighbouring garment: the next Undo would then
|
||||
// take one off a line that was counted correctly and leave the double-scan where it was.
|
||||
const [activeKey, setActiveKey] = useState("");
|
||||
const [scan, setScan] = useState<null | "single" | "live">(null);
|
||||
const [live, setLive] = useState(false);
|
||||
const [log, setLog] = useState<string[]>([]);
|
||||
const [manual, setManual] = useState(false);
|
||||
const [err, setErr] = useState("");
|
||||
const [loaded, setLoaded] = useState(false);
|
||||
const listRef = useRef<HTMLDivElement | null>(null);
|
||||
|
||||
// Restore this person's open count of this shelf. The tally is keyed on the signed-in user as
|
||||
// well as the location: the phone is shared, and resuming somebody else's abandoned count under
|
||||
// your own name is worse than starting again.
|
||||
//
|
||||
// It reads once per shelf and deliberately does not re-run on `lines`. The list is rebuilt on
|
||||
// every live refresh, and rebuilding the tally from it dropped any key that had just left this
|
||||
// shelf — the coordinator placing a size from the desktop while the trolley is being counted —
|
||||
// which the write below then made permanent. The garments the counter had already found went
|
||||
// with it, silently. Counts are held by key whether or not the key is still listed here.
|
||||
const me = s.session.userId;
|
||||
useEffect(() => {
|
||||
setCounted(readCount(me, locationId)?.n ?? {});
|
||||
setLoaded(true);
|
||||
}, [me, locationId]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!loaded) return;
|
||||
writeCount(me, locationId, counted);
|
||||
}, [counted, me, locationId, loaded]);
|
||||
|
||||
useKeepAwake(true);
|
||||
|
||||
const total = lines.reduce((t, l) => t + (counted[l.key] ?? 0), 0);
|
||||
const expectedAll = lines.reduce((t, l) => t + l.expected, 0);
|
||||
const cur = lines.find((l) => l.key === activeKey) || lines[0];
|
||||
|
||||
const bump = useCallback((k: string, by: number) => {
|
||||
setCounted((c) => ({ ...c, [k]: Math.max(0, (c[k] ?? 0) + by) }));
|
||||
}, []);
|
||||
|
||||
/** A scanned code lands on its own line, whichever line was active — the barcode is the truth. */
|
||||
const onCode = useCallback((raw: string) => {
|
||||
const code = raw.trim();
|
||||
const hit = s.barcodes[code];
|
||||
const ix = hit ? lines.findIndex((l) => l.key === hit) : lines.findIndex((l) => l.code === code);
|
||||
if (ix < 0) {
|
||||
scanReject();
|
||||
const known = Object.prototype.hasOwnProperty.call(s.barcodes, code);
|
||||
// Never the barcode itself — only whether ThreadCount knew it. "unknown" in volume means
|
||||
// labels are being printed outside the catalogue.
|
||||
track("scan_miss", { kind: known ? "wrong_shelf" : "unknown" });
|
||||
/* "Somewhere else" is only true when it IS somewhere. A code bound to a size that has never
|
||||
been placed and never been stocked is on no shelf at all, and telling somebody to go and
|
||||
look for it elsewhere sends them hunting for a garment nothing has ever recorded. Say which
|
||||
of the two it is, and name the shelf when there is one to name. */
|
||||
const placedAt = hit ? locs[s.placed[hit] || ""]?.name : "";
|
||||
setErr(!known ? `${code} isn’t a garment ThreadCount knows. Bind it to a size first — you can type it in on the garment’s page.`
|
||||
: placedAt ? `${code} is on ${placedAt}, not this shelf.`
|
||||
: `${code} isn’t in this count. It hasn’t been placed on a shelf, so it sits under “Not on a shelf”.`);
|
||||
setLog((g) => [`${code} — not on this shelf`, ...g]);
|
||||
return;
|
||||
}
|
||||
setActiveKey(lines[ix].key);
|
||||
bump(lines[ix].key, 1);
|
||||
setErr("");
|
||||
setLog((g) => [`${variantName(byId[lines[ix].itemId], lines[ix].size)}`, ...g].slice(0, 8));
|
||||
}, [s.barcodes, lines, bump, byId]);
|
||||
|
||||
if (loaded && !lines.length) {
|
||||
return (
|
||||
<>
|
||||
<MTop title={locName} back />
|
||||
<MRule />
|
||||
<MBody><MEmpty title="Nothing on this shelf" sub="No garment has been placed here yet. Place sizes against a location from Inventory on the desktop, then come back." /></MBody>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<MTop title={locName} right={`${total} / ${expectedAll}`} back />
|
||||
<MRule n={total} of={expectedAll} />
|
||||
<MError msg={err} onDismiss={() => setErr("")} />
|
||||
|
||||
{cur && (
|
||||
<MPanel kicker="Now counting" kickerRight={<MInkLink label="Hands-free" onClick={() => { setScan("live"); setLive(true); }} />}>
|
||||
<div style={{ fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: 26, letterSpacing: "-0.02em", lineHeight: 1.1 }}>
|
||||
{variantName(byId[cur.itemId], cur.size)}
|
||||
</div>
|
||||
<div style={{ fontSize: 13, color: ON_DARK, marginTop: 6 }}>
|
||||
{[cur.code || (cur.item.sku ? `SKU ${cur.item.sku}` : "No barcode bound"), cur.where].filter(Boolean).join(" · ")}
|
||||
</div>
|
||||
<MFigures counted={counted[cur.key] ?? 0} expected={cur.expected} />
|
||||
</MPanel>
|
||||
)}
|
||||
|
||||
<MSplit>
|
||||
<MAction label="Scan" flex={2} glyph="scan" onClick={() => setScan("single")} />
|
||||
<MAction label="Undo" flex={1} tone="grey" onClick={() => cur && bump(cur.key, -1)} disabled={!cur || (counted[cur.key] ?? 0) <= 0} />
|
||||
</MSplit>
|
||||
|
||||
<MBody>
|
||||
<div ref={listRef}>
|
||||
<MSection label="Lines" right="Counted / expected" />
|
||||
{lines.map((l) => {
|
||||
const n = counted[l.key] ?? 0;
|
||||
const on = !!cur && l.key === cur.key;
|
||||
return (
|
||||
<MRow key={l.key} onClick={() => setActiveKey(l.key)} attention={on}
|
||||
mark={on ? "accent" : n === l.expected ? "ink" : "mute"}
|
||||
title={`${variantName(byId[l.itemId], l.size)}`}
|
||||
sub={[l.code || (l.item.sku ? `SKU ${l.item.sku}` : "No barcode bound"), l.where].filter(Boolean).join(" · ")}
|
||||
right={
|
||||
<span style={{ fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: 19, fontVariantNumeric: "tabular-nums" }}>
|
||||
{/* The expected figure is the whole point of the row, so it is readable ink,
|
||||
not the near-invisible neutral-400 it used to be drawn in. */}
|
||||
{n}<span style={{ color: "var(--color-neutral-700)" }}>/{l.expected}</span>
|
||||
</span>
|
||||
} />
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div style={{ padding: 16 }}>
|
||||
{manual && cur ? (
|
||||
<div style={{ border: "2px solid " + INK, background: "#fff", padding: 16 }}>
|
||||
<div style={{ fontSize: 11, fontWeight: 600, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--color-neutral-600)" }}>Counted for {variantName(byId[cur.itemId], cur.size)}</div>
|
||||
{/* Keyed on the line so the box is rebuilt when the counter taps a different one. An
|
||||
uncontrolled input keeps its first value, so it went on showing the figure typed
|
||||
for the previous line under the new line's heading — read as "counted at 7", the
|
||||
new line was then committed at 0 and the gap blamed on the shelf. */}
|
||||
<input key={cur.key} type="number" inputMode="numeric" min={0} defaultValue={counted[cur.key] ?? 0} autoFocus style={{ ...inputStyle, marginTop: 8 }}
|
||||
onChange={(e) => setCounted((c) => ({ ...c, [cur.key]: Math.max(0, parseInt(e.target.value || "0", 10) || 0) }))} />
|
||||
<button onClick={() => setManual(false)} style={{ marginTop: 12, minHeight: 44, width: "100%", border: "2px solid " + INK, background: "transparent", fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: 13, letterSpacing: "0.08em", textTransform: "uppercase", cursor: "pointer" }}>Done</button>
|
||||
</div>
|
||||
) : (
|
||||
<button onClick={() => setManual(true)} style={{ background: "none", border: 0, padding: "8px 0", color: "var(--color-accent-700)", fontSize: 14, fontWeight: 600, textDecoration: "underline", textUnderlineOffset: 3, cursor: "pointer" }}>
|
||||
Type a count instead — for a label that won’t scan
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</MBody>
|
||||
|
||||
<MAction label="Finish count" glyph="none" onClick={() => router.push(`/m/count/${locationId}/variance`)} />
|
||||
|
||||
{scan && (
|
||||
<MScan
|
||||
title="Scan a garment"
|
||||
live={scan === "live"}
|
||||
running={live}
|
||||
onToggle={() => setLive((v) => !v)}
|
||||
log={log}
|
||||
onHit={(raw) => { onCode(raw); if (scan === "single") setScan(null); }}
|
||||
onClose={() => { setScan(null); setLive(false); }}
|
||||
figure={scan === "live" && cur ? (
|
||||
<MPanel pad={14}>
|
||||
<div style={{ fontSize: 13, color: ON_DARK }}>{variantName(byId[cur.itemId], cur.size)}</div>
|
||||
<div style={{ display: "flex", alignItems: "baseline", gap: 14, marginTop: 4 }}>
|
||||
<span style={{ fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: 40, lineHeight: 1, fontVariantNumeric: "tabular-nums" }}>{counted[cur.key] ?? 0}</span>
|
||||
<span style={{ fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: 22, color: "var(--color-neutral-300)", fontVariantNumeric: "tabular-nums" }}>{cur.expected}</span>
|
||||
<span style={{ marginLeft: "auto", fontSize: 12, color: ON_DARK }}>{total} / {expectedAll} on this shelf</span>
|
||||
</div>
|
||||
</MPanel>
|
||||
) : undefined}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,171 @@
|
||||
"use client";
|
||||
/* Variance — only the lines that don't match, what happens when the count commits, and the commit.
|
||||
A gap at or over the facility's threshold has to carry a reason before anything is filed. */
|
||||
import { useCallback, useEffect, useMemo, useState } from "react";
|
||||
import { useParams, useRouter } from "next/navigation";
|
||||
import { useDerived, useSnap } from "@/lib/client";
|
||||
import { UNPLACED, bcBound, formatInZone, locMap, locSubtree, locUnder, onhand, reorderAt, touched, variantName } from "@/lib/compute";
|
||||
import { INK, MBar, MBody, MEmpty, MError, MRule, MTop, MPanel, MInkLink } from "@/components/m";
|
||||
import { clearCount, readCount } from "@/lib/opencount";
|
||||
|
||||
const REASONS = ["At laundry", "Condemned", "Missing", "Other"];
|
||||
|
||||
export default function MVariance() {
|
||||
const { s, mutate, busy } = useSnap();
|
||||
const { L, byId, variants } = useDerived();
|
||||
const router = useRouter();
|
||||
const locationId = String(useParams().id || "");
|
||||
const locs = useMemo(() => locMap(s), [s]);
|
||||
const locName = locationId === UNPLACED ? "Not on a shelf" : locs[locationId]?.name || "Location";
|
||||
|
||||
const lines = useMemo(() => {
|
||||
const sub = locationId === UNPLACED ? null : locSubtree(s, locationId);
|
||||
// Exactly the set the counting screen lists, and it has to stay the same test. A placed size
|
||||
// counts even with no history, and so does an unplaced size with a barcode bound to it —
|
||||
// somebody stood at the counter and scanned that label onto that size, which is why the
|
||||
// counting screen lets you count it. Leave that arm off here and a size counted on the phone
|
||||
// has no row on this screen and no line in the payload: committing files a stocktake without
|
||||
// it, the garments found on the trolley are never counted in, and clearCount() then wipes the
|
||||
// tally that was the only record they had been found.
|
||||
return variants
|
||||
.filter((v) => (sub ? sub.has(s.placed[v.key] || "") : !s.placed[v.key] && (touched(s, L, v.key) || !!bcBound(s, v.item, v.si))))
|
||||
.map((v) => ({ ...v, expected: onhand(s, L, v.key), code: bcBound(s, v.item, v.si), where: locUnder(locs, s.placed[v.key], locationId) }));
|
||||
}, [s, L, variants, locationId, locs]);
|
||||
|
||||
const [counted, setCounted] = useState<Record<string, number> | null>(null);
|
||||
const [savedAt, setSavedAt] = useState("");
|
||||
const [reason, setReason] = useState<Record<string, string>>({});
|
||||
const [accepted, setAccepted] = useState<Record<string, boolean>>({});
|
||||
const [err, setErr] = useState("");
|
||||
|
||||
// The tally belongs to the person who took it, so it is read back under their own key — the
|
||||
// counting screen writes it under theirs. When it was taken matters as much as what it says:
|
||||
// a count resumed the next morning has had a night of issuing against it, and the screen should
|
||||
// say when it was last touched rather than present a stale tally as if it were fresh.
|
||||
const me = s.session.userId;
|
||||
useEffect(() => {
|
||||
const open = readCount(me, locationId);
|
||||
setCounted(open?.n ?? {});
|
||||
setSavedAt(open?.savedAt ?? "");
|
||||
}, [me, locationId]);
|
||||
|
||||
const gate = Math.max(1, s.settings.varianceReason);
|
||||
const off = useMemo(() => (counted ? lines.filter((l) => (counted[l.key] ?? 0) !== l.expected) : []), [counted, lines]);
|
||||
const totalCounted = counted ? lines.reduce((t, l) => t + (counted[l.key] ?? 0), 0) : 0;
|
||||
const totalExpected = lines.reduce((t, l) => t + l.expected, 0);
|
||||
const needsReason = off.filter((l) => Math.abs((counted?.[l.key] ?? 0) - l.expected) >= gate && !reason[l.key]);
|
||||
|
||||
// What the shelf will look like once this commits — not what the commit does. Committing a count
|
||||
// writes stock adjustments and the stocktake itself and nothing else; the reorder draft is a
|
||||
// separate, deliberate step on Reorder, which is where the quantities can still be changed
|
||||
// before anything goes to a supplier.
|
||||
const willReorder = useMemo(() => {
|
||||
if (!counted) return { lines: 0, units: 0 };
|
||||
let n = 0, units = 0;
|
||||
for (const l of lines) {
|
||||
const after = counted[l.key] ?? 0;
|
||||
const par = reorderAt(s, l.key);
|
||||
if (after <= par && l.expected > par) { n++; units += Math.max(0, par * 2 - after); }
|
||||
}
|
||||
return { lines: n, units };
|
||||
}, [counted, lines, s]);
|
||||
|
||||
const commit = useCallback(async () => {
|
||||
if (!counted) return;
|
||||
if (needsReason.length) { setErr(`A gap of ${gate} or more needs a reason — ${needsReason.length} line${needsReason.length === 1 ? "" : "s"} still to go.`); return; }
|
||||
const payload = lines.map((l) => ({ itemId: l.itemId, si: l.si, counted: counted[l.key] ?? 0, reason: reason[l.key] || "" }));
|
||||
const r = await mutate("stocktake.apply", { lines: payload, mode: "shelf", locationId: locationId === UNPLACED ? "" : locationId });
|
||||
if (!r.ok) { setErr(r.error); return; }
|
||||
clearCount(me, locationId);
|
||||
// A count that leaves lines below par hands straight over to Reorder. Nothing is drafted by
|
||||
// the commit itself, and a count that ends on the home screen is a count whose shortfall
|
||||
// nobody ever goes back for.
|
||||
router.push(willReorder.lines > 0 ? "/m/reorder" : "/m?counted=1");
|
||||
}, [counted, lines, reason, needsReason.length, gate, mutate, me, locationId, router, willReorder.lines]);
|
||||
|
||||
if (!counted) return (<><MTop title="Variance" back /><MRule /><MBody /></>);
|
||||
|
||||
return (
|
||||
<>
|
||||
<MTop title="Variance" back />
|
||||
<MRule />
|
||||
<MError msg={err} onDismiss={() => setErr("")} />
|
||||
<MBody>
|
||||
<div style={{ padding: "20px 16px 22px", borderBottom: "2px solid " + INK }}>
|
||||
<h2 style={{ fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: 30, letterSpacing: "-0.03em", lineHeight: 1.05 }}>
|
||||
{off.length === 0 ? "Everything matches" : `${off.length} line${off.length === 1 ? "" : "s"} don’t match`}
|
||||
</h2>
|
||||
<p style={{ fontSize: 14, color: "var(--color-neutral-700)", marginTop: 8 }}>{locName} · counted {totalCounted} of {totalExpected} expected</p>
|
||||
{savedAt && (
|
||||
<p style={{ fontSize: 13, color: "var(--color-neutral-700)", marginTop: 4 }}>
|
||||
Tallied {formatInZone(savedAt, s.tz, { day: "numeric", month: "short", hour: "numeric", minute: "2-digit" })}.
|
||||
{" "}Anything issued since then is already off the expected figure.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{off.length === 0 ? (
|
||||
<MEmpty title="No gaps to explain" sub="Every line came out at what the system expected. Commit the count to file it against this shelf." />
|
||||
) : off.map((l) => {
|
||||
const n = counted[l.key] ?? 0;
|
||||
const d = n - l.expected;
|
||||
const big = Math.abs(d) >= gate;
|
||||
return (
|
||||
<div key={l.key} style={{ padding: 16, background: "#fff", borderBottom: "1px solid var(--color-divider)" }}>
|
||||
<div style={{ display: "flex", alignItems: "flex-start", gap: 12 }}>
|
||||
<div style={{ flex: 1, minWidth: 0 }}>
|
||||
<div style={{ fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: 19, letterSpacing: "-0.02em" }}>{variantName(byId[l.itemId], l.size)}</div>
|
||||
<div style={{ fontSize: 13, color: "var(--color-neutral-600)", marginTop: 4 }}>{[l.code || (l.item.sku ? `SKU ${l.item.sku}` : "No barcode bound"), l.where].filter(Boolean).join(" · ")}</div>
|
||||
</div>
|
||||
<div style={{ textAlign: "right" }}>
|
||||
<div style={{ fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: 24, letterSpacing: "-0.02em", color: "var(--color-accent-700)", fontVariantNumeric: "tabular-nums" }}>{d > 0 ? `+${d}` : `−${-d}`}</div>
|
||||
<div style={{ fontSize: 13, color: "var(--color-neutral-600)", marginTop: 2 }}>{n} of {l.expected}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ display: "flex", gap: 8, marginTop: 14 }}>
|
||||
<button onClick={() => router.push(`/m/count/${locationId}`)}
|
||||
style={{ flex: 1, minHeight: 44, border: "2px solid " + INK, background: "transparent", fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: 13, letterSpacing: "0.08em", textTransform: "uppercase", cursor: "pointer" }}>Recount</button>
|
||||
<button onClick={() => setAccepted((a) => ({ ...a, [l.key]: !a[l.key] }))} aria-pressed={!!accepted[l.key]}
|
||||
style={{ flex: 1, minHeight: 44, border: "2px solid " + INK, background: accepted[l.key] ? INK : "transparent", color: accepted[l.key] ? "var(--color-bg)" : INK, fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: 13, letterSpacing: "0.08em", textTransform: "uppercase", cursor: "pointer" }}>
|
||||
{accepted[l.key] ? "Accepted" : "Accept"}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{big && (
|
||||
<div style={{ marginTop: 14, padding: 14, background: "var(--color-bg)" }}>
|
||||
<div style={{ fontSize: 11, fontWeight: 700, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--color-accent-700)" }}>
|
||||
A gap of {gate} or more needs a reason
|
||||
</div>
|
||||
<div style={{ display: "flex", flexWrap: "wrap", gap: 8, marginTop: 10 }}>
|
||||
{REASONS.map((r) => {
|
||||
const on = reason[l.key] === r;
|
||||
return (
|
||||
<button key={r} onClick={() => setReason((x) => ({ ...x, [l.key]: on ? "" : r }))} aria-pressed={on}
|
||||
style={{ minHeight: 44, padding: "0 14px", border: "2px solid " + INK, background: on ? INK : "transparent", color: on ? "var(--color-bg)" : INK, fontSize: 13, fontWeight: 700, cursor: "pointer" }}>{r}</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
||||
<div style={{ padding: 16 }}>
|
||||
<MPanel kicker="After this count">
|
||||
<p style={{ fontSize: 14, lineHeight: 1.6, margin: 0 }}>
|
||||
{willReorder.lines === 0
|
||||
? "Nothing falls below par when this commits, so there is nothing to reorder."
|
||||
: `${willReorder.lines} line${willReorder.lines === 1 ? "" : "s"} will be below par once this count commits — about ${willReorder.units} item${willReorder.units === 1 ? "" : "s"} to order. Committing orders nothing on its own: it takes you to Reorder, where you raise the draft.`}
|
||||
</p>
|
||||
<p style={{ fontSize: 13, lineHeight: 1.6, marginTop: 10, color: "var(--color-neutral-400)" }}>Nothing is sent to a supplier without approval.</p>
|
||||
{willReorder.lines > 0 && <div style={{ marginTop: 14 }}><MInkLink label="Reorder" href="/m/reorder" /></div>}
|
||||
</MPanel>
|
||||
</div>
|
||||
</MBody>
|
||||
<MBar label={busy ? "Committing…" : "Commit count"} glyph="check" onClick={commit} disabled={busy || needsReason.length > 0}
|
||||
sub={needsReason.length ? `${needsReason.length} gap${needsReason.length === 1 ? " still needs" : "s still need"} a reason` : undefined} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,78 @@
|
||||
"use client";
|
||||
/* Stocktake — choose what you're counting. One row per location that actually holds garments,
|
||||
plus everything not yet placed, so nothing on the shelf is uncountable. */
|
||||
import { useMemo } from "react";
|
||||
import { useDerived, useSnap } from "@/lib/client";
|
||||
import { UNPLACED, bcBound, daysBetween, locSubtree, locTree, onhand, touched } from "@/lib/compute";
|
||||
import { INK, MBody, MEmpty, MNav, MNote, MRow, MRule, MSection, MTop } from "@/components/m";
|
||||
|
||||
/* "Last counted 0 days ago" and "1 days ago" are how a shelf counted this morning used to read. */
|
||||
function lastCounted(last: string | undefined, today: string): string {
|
||||
if (!last) return "Never counted";
|
||||
const n = daysBetween(last, today);
|
||||
if (n <= 0) return "Counted today";
|
||||
if (n === 1) return "Counted yesterday";
|
||||
return `Last counted ${n} days ago`;
|
||||
}
|
||||
|
||||
export default function MCountStart() {
|
||||
const { s } = useSnap();
|
||||
const { L, variants } = useDerived();
|
||||
|
||||
const rows = useMemo(() => {
|
||||
const lastAt: Record<string, string> = {};
|
||||
for (const t of s.stocktakes) if (t.mode !== "preloved" && t.locationId && !lastAt[t.locationId]) lastAt[t.locationId] = t.date;
|
||||
const out = locTree(s).map(({ loc, depth }) => {
|
||||
const sub = locSubtree(s, loc.id);
|
||||
// Placed on the shelf is enough to make a shelf countable. A location holding only sizes
|
||||
// that have never been stocked is exactly the shelf someone needs to count in.
|
||||
const mine = variants.filter((v) => sub.has(s.placed[v.key] || ""));
|
||||
return { id: loc.id, name: loc.name, kind: loc.kind, depth, lines: mine.length, units: mine.reduce((t, v) => t + onhand(s, L, v.key), 0), last: lastAt[loc.id] as string | undefined };
|
||||
}).filter((r) => r.lines > 0);
|
||||
// Only the unplaced bucket needs a test at all — without one it would list the whole
|
||||
// catalogue. A bound barcode counts as much as stock history does: somebody stood at the
|
||||
// counter with the garment in hand and scanned its label onto that size, which says the size
|
||||
// physically exists even when no stock figure does. The counting and variance screens filter
|
||||
// the unplaced bucket with exactly this expression and all three have to agree — a room whose
|
||||
// unplaced sizes are all barcode-bound and never yet stocked otherwise gets no "Not on a shelf
|
||||
// yet" row here, and the one screen that could count them in is unreachable from the menu.
|
||||
const loose = variants.filter((v) => !s.placed[v.key] && (touched(s, L, v.key) || !!bcBound(s, v.item, v.si)));
|
||||
if (loose.length) out.push({ id: UNPLACED, name: "Not on a shelf yet", kind: "", depth: 0, lines: loose.length, units: loose.reduce((t, v) => t + onhand(s, L, v.key), 0), last: undefined });
|
||||
return out;
|
||||
}, [s, L, variants]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<MTop title="Stocktake" right={`${rows.length} location${rows.length === 1 ? "" : "s"}`} />
|
||||
<MRule />
|
||||
<MBody>
|
||||
<div style={{ padding: "20px 16px 22px", borderBottom: "2px solid " + INK }}>
|
||||
<h2 style={{ fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: 30, letterSpacing: "-0.03em", lineHeight: 1.05 }}>Where are you counting?</h2>
|
||||
<p style={{ fontSize: 14, color: "var(--color-neutral-700)", marginTop: 10, lineHeight: 1.6 }}>
|
||||
Scan every garment on the shelf. Each scan adds one to that line, and the expected figure stays on screen the whole way.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{rows.length === 0 ? (
|
||||
<MEmpty
|
||||
title="Nothing to count yet"
|
||||
sub="A location shows up here once garments are placed on it. Set your shelves up in Settings on the desktop, then place each size against one."
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
<MSection label="Locations" right="Lines · units" />
|
||||
{rows.map((r) => (
|
||||
<MRow key={r.id} href={`/m/count/${r.id}`} mark={r.id === UNPLACED ? "mute" : "ink"}
|
||||
title={<span style={{ paddingLeft: r.depth * 14 }}>{r.name}</span>}
|
||||
sub={<span style={{ paddingLeft: r.depth * 14 }}>{lastCounted(r.last, s.today)}</span>}
|
||||
right={<span style={{ fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: 15, fontVariantNumeric: "tabular-nums" }}>{r.lines} · {r.units}</span>} />
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
|
||||
<MNote>A count stays open until you commit it, so you can put the phone down halfway along a shelf and pick it up again.</MNote>
|
||||
</MBody>
|
||||
<MNav />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,220 @@
|
||||
"use client";
|
||||
/* Issue — 1B, person first. Their sizes are already known, so the list is what they'd normally take;
|
||||
scanning adds anything else. What they may hold and the manager’s approval are both checked before
|
||||
the bag is handed over, not after. */
|
||||
import { useCallback, useMemo, useState } from "react";
|
||||
import { useParams, useRouter } from "next/navigation";
|
||||
import { useDerived, useSnap } from "@/lib/client";
|
||||
import { approvalRemaining, capCheck, garmentForGroup, garmentForStyle, genderLabel, groupBucket, groupsLabel, inBucket, initialRemaining, isNursing, isPantItem, isTopItem, label, money, onhand, sizeIndexOf, splitKey, variantName } from "@/lib/compute";
|
||||
import MScan from "@/components/MScan";
|
||||
import { INK, MBar, MBody, MEmpty, MError, MRow, MRule, MSection, MTop, MStepper } from "@/components/m";
|
||||
import { MEntitlement, MPersonHead, useHeld } from "@/components/MPerson";
|
||||
|
||||
type Line = { key: string; itemId: string; si: number; size: string; name: string; qty: number; cost: number; onHand: number };
|
||||
|
||||
export default function MIssue() {
|
||||
const { s, mutate, busy } = useSnap();
|
||||
const { L, byId } = useDerived();
|
||||
const router = useRouter();
|
||||
const id = String(useParams().staffId || "");
|
||||
const st = s.staff.find((x) => x.id === id);
|
||||
const held = useHeld(s, id);
|
||||
|
||||
const [cart, setCart] = useState<Line[]>([]);
|
||||
const [scan, setScan] = useState(false);
|
||||
const [err, setErr] = useState("");
|
||||
const [override, setOverride] = useState(false);
|
||||
const [done, setDone] = useState<string | null>(null);
|
||||
|
||||
/* What this person would normally be handed: their group’s garments, in the cut they are offered,
|
||||
in their recorded size. Both questions are the server's own — a rule written again here would
|
||||
suggest a garment the counter then refuses. Blank and Either are offered every cut. */
|
||||
const suggested = useMemo(() => {
|
||||
if (!st) return [];
|
||||
const bucket = groupBucket(st.group);
|
||||
const out: Line[] = [];
|
||||
for (const it of s.catalog) {
|
||||
if (it.archived) continue;
|
||||
if (bucket && !inBucket(it, bucket)) continue;
|
||||
if (!garmentForStyle(it, st.uniformStyle)) continue;
|
||||
const want = isTopItem(it) ? st.top : isPantItem(it) ? st.pants : "";
|
||||
const si = want ? sizeIndexOf(it, want) : -1;
|
||||
if (si < 0) continue;
|
||||
const k = `${it.id}:${si}`;
|
||||
out.push({ key: k, itemId: it.id, si, size: String(it.sizes[si]), name: `${variantName(it, it.sizes[si])}`, qty: 1, cost: it.cost, onHand: onhand(s, L, k) });
|
||||
}
|
||||
return out;
|
||||
}, [s, st, L]);
|
||||
|
||||
const inCart = useCallback((k: string) => cart.find((c) => c.key === k), [cart]);
|
||||
const add = useCallback((l: Line) => {
|
||||
setErr("");
|
||||
setCart((c) => {
|
||||
const at = c.findIndex((x) => x.key === l.key);
|
||||
if (at < 0) return [...c, { ...l, qty: 1 }];
|
||||
const next = [...c]; next[at] = { ...next[at], qty: next[at].qty + 1 }; return next;
|
||||
});
|
||||
}, []);
|
||||
const setQty = useCallback((k: string, n: number) => setCart((c) => (n <= 0 ? c.filter((x) => x.key !== k) : c.map((x) => (x.key === k ? { ...x, qty: n } : x)))), []);
|
||||
|
||||
const onCode = useCallback((raw: string) => {
|
||||
const k = s.barcodes[raw.trim()];
|
||||
if (!k) { setErr(`${raw.trim()} isn’t a garment ThreadCount knows.`); return; }
|
||||
const { itemId, si } = splitKey(k);
|
||||
const it = byId[itemId];
|
||||
if (!it || it.archived) { setErr("That garment is discontinued."); return; }
|
||||
add({ key: k, itemId, si, size: String(it.sizes[si]), name: `${variantName(it, it.sizes[si])}`, qty: 1, cost: it.cost, onHand: onhand(s, L, k) });
|
||||
}, [s, byId, L, add]);
|
||||
|
||||
if (!st) return (<><MTop title="Issue" back /><MRule /><MBody><MEmpty title="No such staff member" /></MBody></>);
|
||||
|
||||
const cartQty = cart.reduce((t, c) => t + c.qty, 0);
|
||||
const heldQty = held.reduce((t, h) => t + h.qty, 0);
|
||||
const total = cart.reduce((t, c) => t + c.qty * c.cost, 0);
|
||||
const nursing = isNursing(s, st);
|
||||
/* The one question this screen asks: after this bag, is this person still inside the six sets one
|
||||
person holds? Six at any time, every group, nursing included — so the sum is what they have out
|
||||
now plus what is on the counter, and nothing in it starts again in July. It is the server's own
|
||||
function, so the warning here and the refusal there cannot drift apart; the last time this screen
|
||||
kept a private copy of the sum it demanded a tick the server never wanted. */
|
||||
const cap = capCheck(s, st, cart);
|
||||
const over = cap.over;
|
||||
/* Garments in the cart that are not for this person's staff group, and garments that are not the
|
||||
cut they are offered. The server refuses either without the coordinator override, and records
|
||||
them as outside the group or outside the style rather than as over the ceiling, so the same tick
|
||||
is offered for any of the three reasons. garmentForGroup() and garmentForStyle() are the
|
||||
server's own questions, asked here so the screen and the refusal cannot drift apart. */
|
||||
const cartItems = [...new Set(cart.map((c) => c.itemId))].map((iid) => byId[iid])
|
||||
.filter((it): it is NonNullable<typeof it> => !!it);
|
||||
const offGroup = cartItems.filter((it) => !garmentForGroup(it, st.group));
|
||||
const offStyle = cartItems.filter((it) => !garmentForStyle(it, st.uniformStyle));
|
||||
/* One refusal naming every reason that applies, composed as the server composes it: a clause per
|
||||
reason, the ceiling among them, and the sentence about the tick once at the end, because one
|
||||
tick answers all of them. A message that named the first and stopped would have the coordinator
|
||||
tick for that and wave the rest through without anybody having been told about them. The count
|
||||
is of distinct garments across both lists — one garment wrong on both counts is still "it". */
|
||||
const wrongCount = new Set([...offGroup, ...offStyle].map((it) => it.id)).size;
|
||||
const wrongNote = wrongCount
|
||||
? `${[
|
||||
offGroup.length ? `${offGroup.map((it) => `${it.item} is for ${groupsLabel(it.groups)}`).join("; ")} — ${(st.group || "").trim() ? `${st.first} ${st.last} is in ${st.group.trim()}` : `${st.first} ${st.last} has no staff group recorded`}` : "",
|
||||
offStyle.length ? `${offStyle.map((it) => `${it.item} is the ${genderLabel(it.gender)} cut`).join("; ")} — ${st.first} ${st.last} is set to ${st.uniformStyle}` : "",
|
||||
over ? `It would also take them past what one person holds: ${cap.note}` : "",
|
||||
].filter(Boolean).join(". ")}. Tick the coordinator override to issue ${wrongCount === 1 ? "it" : "them"} anyway.`
|
||||
: "";
|
||||
const overrideWhy = [offGroup.length ? "outside their staff group" : "", offStyle.length ? "outside their uniform style" : "", over ? "above what one person holds" : ""]
|
||||
.filter(Boolean).reduce((a, b, i, all) => (i === 0 ? b : i === all.length - 1 ? `${a} and ${b}` : `${a}, ${b}`), "");
|
||||
/* Garments of the starting kit this record still owes. What they are owed on starting, said on the
|
||||
shelf list below — never a term in whether this collection is allowed. A new starter holds
|
||||
nothing and takes three sets, and three is inside six, so the kit that used to need a coordinator
|
||||
override to hand over now goes through as the ordinary first issue it always was. */
|
||||
const kitLeft = initialRemaining(s, st) ?? 0;
|
||||
const sets = approvalRemaining(s, st.id);
|
||||
/* A manager’s approval is counted in SETS — one top and one pair of trousers — so a set is spent per top
|
||||
or per pair of trousers, whichever side of the pair is bigger, and never by anything else. A
|
||||
jacket, a vest or maternity wear is neither half of a set and costs the ward nothing off the
|
||||
approval. This must stay identical to the desktop Issue screen: counting garments instead of
|
||||
sets here quietly spent a whole approved set on a single fleece, and spent only half of what
|
||||
the manager signed for when someone took four tops. It is a separate control from the six sets
|
||||
anybody may hold: the approval is what pays for the garments, the ceiling is how much uniform one
|
||||
person walks around with, and a nurse has to satisfy both. */
|
||||
const cartTops = cart.reduce((t, c) => t + (isTopItem(byId[c.itemId]) ? c.qty : 0), 0);
|
||||
const cartPants = cart.reduce((t, c) => t + (isPantItem(byId[c.itemId]) ? c.qty : 0), 0);
|
||||
const short = cart.find((c) => c.qty > c.onHand);
|
||||
/* What they hold against the ceiling, said in the section headers that are already on the screen.
|
||||
Without it the counter can’t tell a new starter collecting the kit they’re owed from somebody
|
||||
drawing a seventh set. */
|
||||
const holdsRight = `${cap.sets}/${cap.cap} sets · ${heldQty} item${heldQty === 1 ? "" : "s"}`;
|
||||
const notYetLabel = kitLeft > 0 ? `Starting kit — ${kitLeft} still to issue`
|
||||
: "Their size, not yet issued";
|
||||
|
||||
const commit = async () => {
|
||||
if (!cart.length) return;
|
||||
if (short) { setErr(`Only ${short.onHand} of ${short.name} on the shelf.`); return; }
|
||||
// The reason comes from the same function the server refuses with, so nobody is told one thing
|
||||
// here and another when they press the button.
|
||||
if (wrongCount && !override) { setErr(wrongNote); return; }
|
||||
if (over && !override) { setErr(cap.note); return; }
|
||||
const r = await mutate<{ stock: number; apDeducted: number; apRemaining: number }>("issue.create", {
|
||||
// The tick and nothing else. An override is a record that somebody knowingly bent a rule, so
|
||||
// only somebody may set it: a new starter collecting the kit they are owed has bent nothing,
|
||||
// and it now goes through on its own merits.
|
||||
staffId: st.id, override, apDeduct: nursing ? Math.min(sets, Math.max(cartTops, cartPants)) : 0,
|
||||
lines: cart.map((c) => ({ itemId: c.itemId, si: c.si, qty: c.qty, src: "stock" })),
|
||||
});
|
||||
if (!r.ok) { setErr(r.error); return; }
|
||||
setDone(`${cartQty} item${cartQty === 1 ? "" : "s"} issued to ${st.first} ${st.last}.`);
|
||||
setCart([]);
|
||||
};
|
||||
|
||||
if (done) {
|
||||
return (
|
||||
<>
|
||||
<MTop title="Issued" />
|
||||
<MRule />
|
||||
<MBody>
|
||||
<MEmpty title={done} sub="A replenishment draft has been topped up on Ordering. Nothing is sent to a supplier without approval." />
|
||||
</MBody>
|
||||
<MBar label="Back to the person" href={`/m/person/${st.id}`} glyph="arrow" />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<MTop title="Issue" back right={cartQty ? `${cartQty} to issue` : undefined} />
|
||||
<MRule />
|
||||
<MError msg={err} onDismiss={() => setErr("")} />
|
||||
<MBody>
|
||||
<MPersonHead s={s} st={st} sub={<MEntitlement s={s} st={st} cart={cart} />} />
|
||||
|
||||
{cart.length > 0 && (
|
||||
<>
|
||||
<MSection label="Issuing now" right={money(total)} />
|
||||
{cart.map((c) => (
|
||||
<MRow key={c.key} mark="accent" attention title={c.name} sub={`${money(c.cost)} · ${c.onHand} on the shelf`}
|
||||
right={<MStepper n={c.qty} onChange={(n) => setQty(c.key, n)} max={Math.max(1, c.onHand)} />} />
|
||||
))}
|
||||
{(over || wrongCount > 0) && (
|
||||
<label style={{ display: "flex", alignItems: "center", gap: 10, padding: "14px 16px", background: "#fff", borderBottom: "1px solid var(--color-divider)", fontSize: 14 }}>
|
||||
<input type="checkbox" checked={override} onChange={(e) => setOverride(e.target.checked)} style={{ width: 22, height: 22 }} />
|
||||
<span>Coordinator override — record this {overrideWhy}</span>
|
||||
</label>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
<MSection label="Currently holds" right={holdsRight} />
|
||||
{held.length === 0 && <div style={{ padding: "18px 16px", fontSize: 14, color: "var(--color-neutral-600)" }}>Nothing out at the moment.</div>}
|
||||
{held.map((h) => {
|
||||
const it = byId[h.itemId];
|
||||
const k = h.key;
|
||||
return (
|
||||
<MRow key={k} title={h.name} sub={`${h.qty} held`}
|
||||
right={<button onClick={() => add({ key: k, itemId: h.itemId, si: h.si, size: h.size, name: h.name, qty: 1, cost: it?.cost ?? 0, onHand: onhand(s, L, k) })}
|
||||
style={{ width: 56, height: 44, border: "2px solid " + INK, background: inCart(k) ? INK : "transparent", color: inCart(k) ? "var(--color-bg)" : INK, fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: 14, cursor: "pointer" }}>+ 1</button>} />
|
||||
);
|
||||
})}
|
||||
|
||||
{suggested.filter((l) => !held.some((h) => h.key === l.key)).length > 0 && (
|
||||
<>
|
||||
<MSection label={notYetLabel} />
|
||||
{suggested.filter((l) => !held.some((h) => h.key === l.key)).map((l) => (
|
||||
<MRow key={l.key} attention mark="accent" title={l.name}
|
||||
sub={<span style={{ color: l.onHand > 0 ? "var(--color-accent-700)" : "var(--color-neutral-600)" }}>{l.onHand > 0 ? "Not yet issued" : "None on the shelf"}</span>}
|
||||
right={<button onClick={() => add(l)} disabled={l.onHand <= 0}
|
||||
style={{ width: 56, height: 44, border: "2px solid " + INK, background: inCart(l.key) ? INK : "transparent", color: inCart(l.key) ? "var(--color-bg)" : INK, fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: 14, cursor: l.onHand > 0 ? "pointer" : "not-allowed", opacity: l.onHand > 0 ? 1 : 0.4 }}>+ 1</button>} />
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
|
||||
<div style={{ padding: "18px 16px 24px", fontSize: 14, color: "var(--color-neutral-700)" }}>Scan to add anything not on this list.</div>
|
||||
</MBody>
|
||||
|
||||
{cart.length === 0
|
||||
? <MBar label="Scan to add" glyph="scan" onClick={() => setScan(true)} />
|
||||
: <MBar label={busy ? "Recording…" : `Issue ${cartQty} item${cartQty === 1 ? "" : "s"}`} glyph="check" onClick={commit} disabled={busy} sub={money(total)} />}
|
||||
|
||||
{scan && <MScan title="Scan a garment" onHit={(r) => { onCode(r); setScan(false); }} onClose={() => setScan(false)} />}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
"use client";
|
||||
/* Issue starts with the person: their sizes, allowance and approvals all hang off the record,
|
||||
so choosing them first is what lets the app check an issue before the garments leave the shelf. */
|
||||
import { useMemo, useState } from "react";
|
||||
import { useSnap } from "@/lib/client";
|
||||
import { ccOf, staffName } from "@/lib/compute";
|
||||
import { INK, MBody, MEmpty, MRow, MRule, MSection, MTop, inputStyle } from "@/components/m";
|
||||
|
||||
export default function MIssuePick() {
|
||||
const { s } = useSnap();
|
||||
const [q, setQ] = useState("");
|
||||
|
||||
const list = useMemo(() => {
|
||||
const needle = q.trim().toLowerCase();
|
||||
const active = s.staff.filter((x) => !x.inactive);
|
||||
if (!needle) {
|
||||
// No query: whoever was served most recently, so the usual faces are one tap away.
|
||||
const seen: Record<string, string> = {};
|
||||
for (const i of s.issues) seen[i.staffId] = i.date > (seen[i.staffId] || "") ? i.date : seen[i.staffId];
|
||||
return [...active].sort((a, b) => (seen[b.id] || "").localeCompare(seen[a.id] || "")).slice(0, 12);
|
||||
}
|
||||
return active.filter((x) => `${x.first} ${x.last} ${x.num} ${x.dept}`.toLowerCase().includes(needle)).slice(0, 40);
|
||||
}, [s, q]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<MTop title="Issue" back right={`${s.staff.filter((x) => !x.inactive).length} on the register`} />
|
||||
<MRule />
|
||||
<MBody>
|
||||
<div style={{ padding: 16, borderBottom: "2px solid " + INK }}>
|
||||
<input value={q} onChange={(e) => setQ(e.target.value)} placeholder="Name or staff number" autoFocus
|
||||
aria-label="Search the staff register" style={inputStyle} />
|
||||
</div>
|
||||
<MSection label={q.trim() ? "Matches" : "Recently served"} />
|
||||
{list.length === 0
|
||||
? <MEmpty title="Nobody matches that" sub="Try a surname or a staff number. New starters are added on the desktop." />
|
||||
: list.map((st) => (
|
||||
<MRow key={st.id} href={`/m/issue/${st.id}`} mark="accent"
|
||||
title={staffName(st)}
|
||||
sub={[st.num, st.dept || st.group, ccOf(s, st) && `CC ${ccOf(s, st)}`].filter(Boolean).join(" · ")} />
|
||||
))}
|
||||
</MBody>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,124 @@
|
||||
"use client";
|
||||
/* Reprint a label. Short by design: it exists because a garment nobody can scan silently vanishes
|
||||
from every count. Only sizes with a real supplier barcode can be reprinted — ThreadCount's
|
||||
internal fallback code appears nowhere on a garment, so printing it would help nobody. */
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { useDerived, useSnap } from "@/lib/client";
|
||||
import { bcBound, label, variantName } from "@/lib/compute";
|
||||
import { isNative } from "@/lib/nativescan";
|
||||
import MScan from "@/components/MScan";
|
||||
import { INK, IconScan, MBar, MBody, MEmpty, MError, MNote, MRow, MRule, MSection, MStepper, MTop, inputStyle } from "@/components/m";
|
||||
|
||||
const REASONS = ["Worn off in the laundry", "Torn", "Never labelled", "Other"];
|
||||
|
||||
export default function MLabel() {
|
||||
const { s } = useSnap();
|
||||
const { byId, variants } = useDerived();
|
||||
const [q, setQ] = useState("");
|
||||
const [pick, setPick] = useState<string | null>(null);
|
||||
const [reason, setReason] = useState("");
|
||||
const [copies, setCopies] = useState(6);
|
||||
const [scan, setScan] = useState(false);
|
||||
const [err, setErr] = useState("");
|
||||
/* The Android shell cannot print. Its WebView opens no second window, so the label sheet would
|
||||
replace the app, and window.print() doesn't exist there — the button looked like it worked and
|
||||
stranded the person on a page with nothing to do. Read after mount: the server render doesn't
|
||||
know which shell it is being sent to. */
|
||||
const [inApp, setInApp] = useState(false);
|
||||
useEffect(() => { setInApp(isNative()); }, []);
|
||||
|
||||
const rows = useMemo(() => {
|
||||
const needle = q.trim().toLowerCase();
|
||||
return variants
|
||||
.map((v) => ({ ...v, code: bcBound(s, v.item, v.si), name: `${variantName(byId[v.itemId], v.size)}` }))
|
||||
.filter((r) => r.code)
|
||||
.filter((r) => !needle || `${r.name} ${r.code} ${r.item.sku}`.toLowerCase().includes(needle));
|
||||
}, [s, variants, byId, q]);
|
||||
|
||||
const chosen = rows.find((r) => r.key === pick);
|
||||
const printable = chosen && chosen.code;
|
||||
|
||||
return (
|
||||
<>
|
||||
<MTop title="Reprint label" back right={chosen ? undefined : `${rows.length} labelled size${rows.length === 1 ? "" : "s"}`} />
|
||||
<MRule />
|
||||
<MError msg={err} onDismiss={() => setErr("")} />
|
||||
<MBody>
|
||||
{!chosen ? (
|
||||
<>
|
||||
<div style={{ padding: "20px 16px 22px", borderBottom: "2px solid " + INK }}>
|
||||
<h2 style={{ fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: 28, letterSpacing: "-0.03em", lineHeight: 1.05 }}>Barcode gone</h2>
|
||||
<p style={{ fontSize: 14, color: "var(--color-neutral-700)", marginTop: 10, lineHeight: 1.6 }}>
|
||||
A garment nobody can scan drops out of every count. Find it by code or description and print a fresh label.
|
||||
</p>
|
||||
</div>
|
||||
<div style={{ padding: 16, borderBottom: "2px solid " + INK, display: "flex", gap: 8 }}>
|
||||
<input value={q} onChange={(e) => setQ(e.target.value)} placeholder="Code or description" autoFocus
|
||||
aria-label="Find a garment" style={{ ...inputStyle, flex: 1 }} />
|
||||
<button onClick={() => setScan(true)} aria-label="Scan a working label"
|
||||
style={{ width: 56, minHeight: 48, border: "2px solid " + INK, background: "var(--color-accent)", color: "#fff", display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer" }}>
|
||||
<IconScan />
|
||||
</button>
|
||||
</div>
|
||||
<MSection label="Sizes with a supplier barcode" />
|
||||
{rows.length === 0
|
||||
? <MEmpty title="Nothing matches" sub="Only sizes with a supplier barcode bound to them can be reprinted. Bind one by scanning the size on the desktop." />
|
||||
: rows.slice(0, 40).map((r) => (
|
||||
<MRow key={r.key} onClick={() => setPick(r.key)} mark="ink" title={r.name} sub={`${r.code}${r.item.sku ? ` · ${r.item.sku}` : ""}`} />
|
||||
))}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<div style={{ padding: "20px 16px", background: "#fff", borderBottom: "2px solid " + INK }}>
|
||||
<div style={{ fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: 24, letterSpacing: "-0.02em" }}>{chosen.name}</div>
|
||||
<div style={{ fontSize: 14, color: "var(--color-neutral-600)", marginTop: 6 }}>{chosen.code}</div>
|
||||
<button onClick={() => { setPick(null); setReason(""); }} style={{ marginTop: 12, background: "none", border: 0, padding: 0, color: "var(--color-accent-700)", fontSize: 14, fontWeight: 600, textDecoration: "underline", textUnderlineOffset: 3, cursor: "pointer" }}>Choose a different garment</button>
|
||||
</div>
|
||||
|
||||
<MSection label="Why is it being reprinted?" />
|
||||
<div style={{ padding: 16, display: "flex", flexWrap: "wrap", gap: 8 }}>
|
||||
{REASONS.map((r) => {
|
||||
const on = reason === r;
|
||||
return (
|
||||
<button key={r} onClick={() => setReason(on ? "" : r)} aria-pressed={on}
|
||||
style={{ minHeight: 48, padding: "0 14px", border: "2px solid " + INK, background: on ? INK : "transparent", color: on ? "var(--color-bg)" : INK, fontSize: 14, fontWeight: 700, cursor: "pointer" }}>{r}</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<MSection label="Copies" />
|
||||
<div style={{ padding: 16, display: "flex", alignItems: "center", gap: 16 }}>
|
||||
<span style={{ flex: 1, fontSize: 14, color: "var(--color-neutral-700)" }}>Six to an A4 sheet.</span>
|
||||
<MStepper n={copies} onChange={setCopies} min={1} max={24} />
|
||||
</div>
|
||||
|
||||
<MNote>The label carries the same barcode the supplier printed, so it scans identically to the ones still on the shelf.</MNote>
|
||||
{inApp && (
|
||||
<MNote tone="warn">
|
||||
Printing is a desktop job — the app can’t open a label sheet. Open ThreadCount
|
||||
at threadcount.tech, find <b>{chosen.name}</b> under {chosen.code}, and print it
|
||||
from there.
|
||||
</MNote>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</MBody>
|
||||
|
||||
{chosen && (
|
||||
<MBar label={inApp ? "Print it on the desktop" : `Print ${copies} label${copies === 1 ? "" : "s"}`} glyph="printer"
|
||||
disabled={inApp}
|
||||
onClick={() => {
|
||||
if (!printable) { setErr("That size has no supplier barcode bound to it."); return; }
|
||||
const url = `/print/labels?code=${encodeURIComponent(chosen.code)}&copies=${copies}&reason=${encodeURIComponent(reason)}`;
|
||||
window.open(url, "_blank", "noopener");
|
||||
}} />
|
||||
)}
|
||||
|
||||
{scan && <MScan title="Scan a working label" onHit={(raw) => {
|
||||
const k = s.barcodes[raw.trim()];
|
||||
if (k) { setPick(k); setQ(""); } else setErr(`${raw.trim()} isn’t a garment ThreadCount knows.`);
|
||||
setScan(false);
|
||||
}} onClose={() => setScan(false)} />}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
import { redirect } from "next/navigation";
|
||||
import { currentUser } from "@/lib/session";
|
||||
import { buildSnapshot } from "@/lib/snapshot";
|
||||
import { SnapshotProvider } from "@/lib/client";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
/* Everything that needs a signed-in coordinator. Sending them to /m/login rather than /auth keeps
|
||||
them in the app's own world: /auth is the website's two-pane sign-in, which is a jarring thing
|
||||
to meet on a phone halfway through opening an app. */
|
||||
export default async function MobileAppLayout({ children }: { children: React.ReactNode }) {
|
||||
const user = await currentUser();
|
||||
if (!user) redirect("/m/login");
|
||||
const snap = await buildSnapshot(user);
|
||||
return <SnapshotProvider snap={snap}>{children}</SnapshotProvider>;
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
/* What a tap looks like before the server answers, for the counter app.
|
||||
*
|
||||
* The twin of app/my/(app)/loading.tsx, and here for the same reason: every screen under /m is
|
||||
* rendered from its own server query, App Router keeps the previous screen fully painted until that
|
||||
* query comes back, and on linen-room wifi that is seconds in which nothing acknowledges the tap.
|
||||
* People tap again — and on this app the second tap can land on a different row.
|
||||
*
|
||||
* It draws the app's own chrome (the 56px ink bar and the 4px accent rule, the shape MTop and MRule
|
||||
* make) so the change reads as "loading" rather than "gone", and deliberately not the tab bar: the
|
||||
* nav belongs to the four screens that draw it, and painting one here would flash it into existence
|
||||
* on the way to a detail screen that has none. The bar carries no screen title for the same reason
|
||||
* — this one fallback covers every route in the group, so any title would be wrong somewhere.
|
||||
*/
|
||||
const INK = "#201e1d";
|
||||
const GROUND = "#f3f2f2";
|
||||
|
||||
/** A grey block standing in for a line of text. Sized in the same 2px system as everything else. */
|
||||
function Bar({ w, h = 16 }: { w: string; h?: number }) {
|
||||
return <div style={{ width: w, height: h, background: "var(--color-neutral-200)" }} />;
|
||||
}
|
||||
|
||||
export default function CounterLoading() {
|
||||
return (
|
||||
<>
|
||||
<header className="tcx-topbar" style={{
|
||||
height: 56, flex: "0 0 56px", background: INK, color: GROUND, display: "flex", alignItems: "center",
|
||||
paddingLeft: 16, paddingRight: 16,
|
||||
backgroundImage: "linear-gradient(to bottom, rgba(243,242,242,0.16) 0 1px, transparent 1px)",
|
||||
backgroundPosition: "0 env(safe-area-inset-top, 0px)", backgroundRepeat: "no-repeat", backgroundSize: "100% 1px",
|
||||
}}>
|
||||
<span style={{ fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: 15, letterSpacing: "0.06em", textTransform: "uppercase" }}>
|
||||
One moment
|
||||
</span>
|
||||
</header>
|
||||
<div style={{ height: 4, flex: "0 0 4px", background: "var(--color-accent)" }} />
|
||||
<div style={{ flex: 1, overflow: "hidden", background: GROUND }} aria-busy="true">
|
||||
{/* Announced once, quietly. The blocks below are decoration and say nothing. */}
|
||||
<div role="status" style={{ padding: "20px 16px 0", fontSize: 13, color: "var(--color-neutral-600)" }}>Loading…</div>
|
||||
<div style={{ padding: "16px 16px 0", display: "grid", gap: 10 }} aria-hidden="true">
|
||||
<Bar w="60%" h={22} />
|
||||
<Bar w="40%" />
|
||||
</div>
|
||||
<div style={{ marginTop: 24, display: "grid", gap: 2 }} aria-hidden="true">
|
||||
{[0, 1, 2, 3].map((i) => (
|
||||
<div key={i} style={{ background: "#fff", padding: "18px 16px", display: "grid", gap: 8 }}>
|
||||
<Bar w="55%" h={18} />
|
||||
<Bar w="35%" h={12} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
"use client";
|
||||
/* Everything else the app does.
|
||||
*
|
||||
* There used to be an "On the desktop" section here listing five things the phone couldn't do —
|
||||
* greyed out, untappable, and so just a list of disappointments in the middle of a menu. A menu
|
||||
* should be things you can do. The catalogue moved onto the phone rather than staying on that
|
||||
* list; the rest are simply not advertised here any more. */
|
||||
import { useMemo } from "react";
|
||||
import { useSnap } from "@/lib/client";
|
||||
import { OPEN_STATUSES } from "@/lib/compute";
|
||||
import { MBody, MNav, MRow, MRule, MSection, MTop } from "@/components/m";
|
||||
|
||||
export default function MMore() {
|
||||
const { s } = useSnap();
|
||||
|
||||
const activeItems = useMemo(() => s.catalog.filter((i) => !i.archived).length, [s.catalog]);
|
||||
|
||||
const counts = useMemo(() => {
|
||||
const waiting = s.pickups.filter((p) => !p.pickedUp).length;
|
||||
const incoming = s.orders.filter((o) => OPEN_STATUSES.includes(o.status) && o.status !== "Draft").length;
|
||||
const rounds = s.pickups.filter((p) => !p.pickedUp && p.deliveredTo).length;
|
||||
return { waiting, incoming, rounds };
|
||||
}, [s]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<MTop title="More" />
|
||||
<MRule />
|
||||
<MBody>
|
||||
<MSection label="Everything else" />
|
||||
<MRow href="/m/receive" mark="ink" title="Receive a delivery" sub={counts.incoming ? `${counts.incoming} order${counts.incoming === 1 ? "" : "s"} on their way` : "Nothing on order"} />
|
||||
<MRow href="/m/pickups" mark={counts.waiting ? "accent" : "ink"} attention={counts.waiting > 0} title="Pickup call list" sub={counts.waiting ? `${counts.waiting} waiting to be collected` : "Nobody waiting"} />
|
||||
<MRow href="/m/rounds" mark="ink" title="Delivery round" sub={counts.rounds ? `${counts.rounds} to drop off` : "Nothing loaded"} />
|
||||
<MRow href="/m/label" mark="ink" title="Reprint a label" sub="For a barcode that has worn off" />
|
||||
<MRow href="/m/variance" mark="ink" title="Variance over time" sub="What keeps going missing" />
|
||||
<MRow href="/m/catalogue" mark="ink" title="Catalogue" sub={`${activeItems} garment${activeItems === 1 ? "" : "s"}, sizes and pricing`} />
|
||||
<MRow href="/m/settings" mark="ink" title="Settings" sub={s.session.name} />
|
||||
|
||||
</MBody>
|
||||
<MNav />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,104 @@
|
||||
"use client";
|
||||
/* Home — today. Four figures, what’s just happened, and a way into a count. */
|
||||
import Link from "next/link";
|
||||
import { useMemo } from "react";
|
||||
import { useDerived, useSnap } from "@/lib/client";
|
||||
import { countsAsIssued, daysBetween, label, longLabel, onhand, touched, reorderAt, staffName, variantName } from "@/lib/compute";
|
||||
import { INK, IconRight, MBody, MNav, MRow, MRule, MSection, MTopBrand } from "@/components/m";
|
||||
|
||||
function Stat({ n, l, hot }: { n: string; l: string; hot?: boolean }) {
|
||||
return (
|
||||
<div style={{ padding: "18px 16px 16px", borderRight: "1px solid var(--color-divider)", borderBottom: "1px solid var(--color-divider)" }}>
|
||||
<div style={{ fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: 44, lineHeight: 1, letterSpacing: "-0.03em", fontVariantNumeric: "tabular-nums", color: hot ? "var(--color-accent-700)" : INK }}>{n}</div>
|
||||
<div style={{ fontSize: 11, fontWeight: 600, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--color-neutral-600)", marginTop: 8 }}>{l}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function MHome() {
|
||||
const { s } = useSnap();
|
||||
const { L, byId, staffById, variants } = useDerived();
|
||||
|
||||
const d = useMemo(() => {
|
||||
const today = s.today;
|
||||
let issued = 0, returned = 0;
|
||||
for (const i of s.issues) {
|
||||
if (i.date === today) issued += i.qty;
|
||||
if (i.returned?.date === today) returned += i.qty;
|
||||
}
|
||||
const low = variants.filter((v) => touched(s, L, v.key) && onhand(s, L, v.key) <= reorderAt(s, v.key));
|
||||
const lastCount = s.stocktakes.find((t) => t.mode !== "preloved");
|
||||
const since = lastCount ? daysBetween(lastCount.date, today) : null;
|
||||
// Recent activity, newest first. One line per person per day per kind — four garments handed
|
||||
// to the same nurse in one go is one thing that happened, not four.
|
||||
const grouped: Record<string, { staffId: string; kind: "Issued" | "Returned"; at: string; qty: number }> = {};
|
||||
for (const i of s.issues.slice(-120)) {
|
||||
const add = (kind: "Issued" | "Returned", at: string) => {
|
||||
const k = `${i.staffId}|${kind}|${at}`;
|
||||
(grouped[k] ||= { staffId: i.staffId, kind, at, qty: 0 }).qty += i.qty;
|
||||
};
|
||||
add("Issued", i.date);
|
||||
if (i.returned) add("Returned", i.returned.date);
|
||||
}
|
||||
const recent = Object.values(grouped)
|
||||
.sort((a, b) => (a.at < b.at ? 1 : a.at > b.at ? -1 : 0))
|
||||
.slice(0, 3)
|
||||
.map((g) => ({
|
||||
title: `${staffName(staffById[g.staffId], "Staff")} — ${g.qty} item${g.qty === 1 ? "" : "s"}`,
|
||||
sub: `${g.kind} · ${g.at === today ? "today" : g.at}`,
|
||||
mark: "ink" as const, href: `/m/person/${g.staffId}`, at: g.at,
|
||||
})) as { title: string; sub: string; mark: "ink" | "accent"; href?: string; at: string }[];
|
||||
// A line AT its reorder level is in `low` on purpose (reorder now, not once it's short), but
|
||||
// "Below par · 3 of 3" reads as a contradiction on the phone, so name the two states apart.
|
||||
for (const v of low.slice(0, 2)) {
|
||||
const oh = onhand(s, L, v.key), par = reorderAt(s, v.key);
|
||||
recent.push({ title: `${variantName(byId[v.itemId], v.size)}`, sub: `${oh < par ? "Below par" : "At par"} · ${oh} of ${par}`, mark: "accent", href: `/m/stock`, at: "" });
|
||||
}
|
||||
return { issued, returned, low: low.length, since, recent };
|
||||
}, [s, L, byId, staffById, variants]);
|
||||
|
||||
const fac = [s.settings.facility, s.settings.location].filter(Boolean).join(" · ");
|
||||
const dateLine = new Date(+s.today.slice(0, 4), +s.today.slice(5, 7) - 1, +s.today.slice(8, 10))
|
||||
.toLocaleDateString("en-AU", { weekday: "long", day: "numeric", month: "long" });
|
||||
|
||||
return (
|
||||
<>
|
||||
<MTopBrand facility={fac} />
|
||||
<MRule />
|
||||
<MBody>
|
||||
<div style={{ padding: "20px 16px 24px", borderBottom: "2px solid " + INK }}>
|
||||
<div style={{ fontSize: 12, fontWeight: 600, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--color-neutral-600)" }}>{dateLine}</div>
|
||||
<h2 style={{ fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: 44, letterSpacing: "-0.03em", lineHeight: 1, marginTop: 10 }}>Today</h2>
|
||||
</div>
|
||||
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr" }}>
|
||||
<Stat n={String(d.issued)} l="Issued" />
|
||||
<Stat n={String(d.returned)} l="Returned" />
|
||||
<Stat n={String(d.low)} l="Below par" hot={d.low > 0} />
|
||||
<Stat n={d.since === null ? "—" : `${d.since}d`} l="Since count" hot={d.since !== null && d.since > 30} />
|
||||
</div>
|
||||
|
||||
<MSection label="Recent" />
|
||||
{d.recent.length === 0
|
||||
? <div style={{ padding: "28px 16px", fontSize: 14, color: "var(--color-neutral-600)" }}>Nothing has moved yet today.</div>
|
||||
: d.recent.map((r, i) => (
|
||||
<MRow key={i} mark={r.mark} attention={r.mark === "accent"} href={r.href}
|
||||
title={r.title}
|
||||
sub={<span style={{ color: r.mark === "accent" ? "var(--color-accent-700)" : undefined }}>{r.sub}</span>} />
|
||||
))}
|
||||
|
||||
<div style={{ padding: 16, display: "grid", gap: 12 }}>
|
||||
<Link href="/m/count" style={{ display: "flex", alignItems: "center", gap: 12, minHeight: 64, padding: "0 20px", border: "2px solid " + INK, color: INK, textDecoration: "none", fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: 14, letterSpacing: "0.08em", textTransform: "uppercase" }}>
|
||||
<span style={{ flex: 1 }}>Start a count</span><IconRight />
|
||||
</Link>
|
||||
<Link href="/m/issue" style={{ display: "flex", alignItems: "center", gap: 12, minHeight: 64, padding: "0 20px", border: "2px solid " + INK, color: INK, textDecoration: "none", fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: 14, letterSpacing: "0.08em", textTransform: "uppercase" }}>
|
||||
<span style={{ flex: 1 }}>Issue to someone</span><IconRight />
|
||||
</Link>
|
||||
<Link href="/m/more" style={{ display: "flex", alignItems: "center", gap: 12, minHeight: 52, padding: "0 20px", color: "var(--color-neutral-700)", textDecoration: "none", fontSize: 13, fontWeight: 600, letterSpacing: "0.06em", textTransform: "uppercase" }}>
|
||||
<span style={{ flex: 1 }}>Deliveries, pickups, rounds and more</span><IconRight size={18} />
|
||||
</Link>
|
||||
</div>
|
||||
</MBody>
|
||||
<MNav />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,101 @@
|
||||
"use client";
|
||||
/* Size exchange — one movement, not a return followed by an issue. What comes back, what goes out,
|
||||
and the staff record updated so nobody hands them the wrong size again next month. */
|
||||
import { useCallback, useMemo, useState } from "react";
|
||||
import { useParams, useRouter } from "next/navigation";
|
||||
import { useDerived, useSnap } from "@/lib/client";
|
||||
import { isPantItem, isTopItem, key, label, onhand, staffName } from "@/lib/compute";
|
||||
import MScan from "@/components/MScan";
|
||||
import { GROUND, INK, MBar, MBody, MChips, MEmpty, MError, MRow, MRule, MSection, MTop } from "@/components/m";
|
||||
import { useHeld, type Held } from "@/components/MPerson";
|
||||
|
||||
export default function MExchange() {
|
||||
const { s, mutate, busy } = useSnap();
|
||||
const { L, byId } = useDerived();
|
||||
const router = useRouter();
|
||||
const id = String(useParams().id || "");
|
||||
const st = s.staff.find((x) => x.id === id);
|
||||
const held = useHeld(s, id);
|
||||
|
||||
const [pick, setPick] = useState<Held | null>(null);
|
||||
const [si, setSi] = useState(-1);
|
||||
const [scan, setScan] = useState(false);
|
||||
const [err, setErr] = useState("");
|
||||
|
||||
const it = pick ? byId[pick.itemId] : undefined;
|
||||
const stock = useMemo(() => {
|
||||
if (!it) return [] as number[];
|
||||
return it.sizes.map((_, i) => onhand(s, L, key(it.id, i)));
|
||||
}, [it, s, L]);
|
||||
|
||||
const onCode = useCallback((raw: string) => {
|
||||
const k = s.barcodes[raw.trim()];
|
||||
const hit = held.find((h) => h.key === k);
|
||||
if (!hit) { setErr(`${raw.trim()} isn’t something ${st?.first ?? "they"} is holding.`); return; }
|
||||
setPick(hit); setSi(-1); setErr("");
|
||||
}, [s.barcodes, held, st]);
|
||||
|
||||
if (!st) return (<><MTop title="Exchange" back /><MRule /><MBody><MEmpty title="No such staff member" /></MBody></>);
|
||||
|
||||
const commit = async () => {
|
||||
if (!pick || si < 0) return;
|
||||
const r = await mutate<{ size: string }>("issue.exchange", { id: pick.issues[0].id, si, qty: 1 });
|
||||
if (!r.ok) { setErr(r.error); return; }
|
||||
router.push(`/m/person/${st.id}`);
|
||||
};
|
||||
|
||||
const willUpdate = it && (isTopItem(it) || isPantItem(it));
|
||||
|
||||
return (
|
||||
<>
|
||||
<MTop title="Exchange" back right={staffName(st)} />
|
||||
<MRule />
|
||||
<MError msg={err} onDismiss={() => setErr("")} />
|
||||
<MBody>
|
||||
{!pick ? (
|
||||
<>
|
||||
<MSection label="What doesn’t fit?" right={`${held.reduce((t, h) => t + h.qty, 0)} out`} />
|
||||
{held.length === 0
|
||||
? <MEmpty title="Nothing to exchange" sub={`${staffName(st)} has no garments out at the moment.`} />
|
||||
: held.map((h) => <MRow key={h.key} onClick={() => { setPick(h); setSi(-1); }} mark="ink" title={h.name} sub={`${h.qty} held`} />)}
|
||||
{/* Same rule as the return screen: the scan bar is off when nothing is out, so the line
|
||||
offering a scan goes with it. */}
|
||||
{held.length > 0 && <div style={{ padding: "18px 16px", fontSize: 14, color: "var(--color-neutral-700)" }}>Or scan the garment they’ve brought back.</div>}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<section style={{ background: INK, color: GROUND, padding: 16 }}>
|
||||
<div style={{ fontSize: 11, fontWeight: 600, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--color-accent-300)" }}>Taking back</div>
|
||||
<div style={{ display: "flex", alignItems: "center", gap: 12, marginTop: 8 }}>
|
||||
<span aria-hidden="true" style={{ width: 4, height: 34, background: "#fff" }} />
|
||||
<span style={{ fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: 20, letterSpacing: "-0.02em" }}>{pick.name}</span>
|
||||
</div>
|
||||
<button onClick={() => setPick(null)} style={{ marginTop: 12, background: "none", border: 0, padding: 0, color: "#fff", fontSize: 13, fontWeight: 700, textDecoration: "underline", textUnderlineOffset: 3, cursor: "pointer" }}>Choose a different garment</button>
|
||||
</section>
|
||||
|
||||
<MSection label="Giving out" right={it ? label(it) : ""} />
|
||||
<div style={{ padding: 16 }}>
|
||||
<div style={{ display: "flex", alignItems: "center", gap: 12 }}>
|
||||
<span aria-hidden="true" style={{ width: 4, height: 34, background: "var(--color-accent)" }} />
|
||||
<span style={{ fontSize: 14, color: "var(--color-neutral-700)" }}>Pick the size that fits. Greyed sizes are the one coming back, or have none on the shelf.</span>
|
||||
</div>
|
||||
{it && <MChips sizes={it.sizes.map(String)} value={si} onPick={(i) => setSi(i)} disabled={(i) => i === pick.si || stock[i] <= 0} />}
|
||||
{si >= 0 && it && (
|
||||
<p style={{ fontSize: 13.5, color: "var(--color-neutral-700)", marginTop: 14, lineHeight: 1.6 }}>
|
||||
{stock[si]} on the shelf in size {it.sizes[si]}. The old garment goes back to stock in the same movement
|
||||
{willUpdate ? `, and ${st.first}’s recorded size becomes ${it.sizes[si]}.` : "."}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</MBody>
|
||||
|
||||
{pick
|
||||
? <MBar label={busy ? "Recording…" : si >= 0 && it ? `Exchange for size ${it.sizes[si]}` : "Pick a size"} glyph="check" onClick={commit} disabled={busy || si < 0} />
|
||||
: <MBar label="Scan the garment" glyph="scan" onClick={() => setScan(true)} disabled={held.length === 0} />}
|
||||
|
||||
{scan && <MScan title="Scan the garment" onHit={(r) => { onCode(r); setScan(false); }} onClose={() => setScan(false)} />}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,117 @@
|
||||
"use client";
|
||||
/* Person record — who they are, what they're holding, what has happened, and the three things
|
||||
you can do about it. Issuing starts here: 1B, person first. */
|
||||
import Link from "next/link";
|
||||
import { useMemo, useState } from "react";
|
||||
import { useParams } from "next/navigation";
|
||||
import { useSnap } from "@/lib/client";
|
||||
import { fmtDate, itemMap, staffName, variantName } from "@/lib/compute";
|
||||
import { GROUND, INK, MBar, MBody, MEmpty, MError, MRow, MRule, MSection, MTop } from "@/components/m";
|
||||
import { MPersonHead, useHeld } from "@/components/MPerson";
|
||||
|
||||
export default function MPersonPage() {
|
||||
const { s, isAdmin, mutate } = useSnap();
|
||||
const id = String(useParams().id || "");
|
||||
const st = s.staff.find((x) => x.id === id);
|
||||
const held = useHeld(s, id);
|
||||
const byId = useMemo(() => itemMap(s), [s]);
|
||||
// Shown once, then gone: the code is a credential and is never in the snapshot.
|
||||
const [code, setCode] = useState<string | null>(null);
|
||||
const [busy, setBusy] = useState(false);
|
||||
const [err, setErr] = useState("");
|
||||
const origin = typeof window === "undefined" ? "threadcount.tech" : window.location.host;
|
||||
|
||||
const history = useMemo(() => {
|
||||
if (!st) return [];
|
||||
const out: { text: string; date: string }[] = [];
|
||||
for (const i of s.issues) {
|
||||
if (i.staffId !== id) continue;
|
||||
const it = byId[i.itemId];
|
||||
const size = String(it?.sizes[i.si] ?? i.si);
|
||||
out.push({ text: `Issued ${i.qty} × ${variantName(it, size)}`, date: i.date });
|
||||
if (i.returned) out.push({ text: `${i.returned.cond} — ${variantName(it, size)}`, date: i.returned.date });
|
||||
if (i.handedIn) out.push({ text: `Handed in — ${variantName(it, size)}`, date: i.handedIn });
|
||||
}
|
||||
return out.sort((a, b) => (a.date < b.date ? 1 : a.date > b.date ? -1 : 0)).slice(0, 25);
|
||||
}, [s, id, st, byId]);
|
||||
|
||||
if (!st) return (<><MTop title="Person" back /><MRule /><MBody><MEmpty title="No such staff member" sub="They may have been removed from the register." /></MBody></>);
|
||||
|
||||
const total = held.reduce((t, h) => t + h.qty, 0);
|
||||
/* Issue, Exchange and Return are docked at the foot of the window with nothing underneath them,
|
||||
so Android draws the gesture handle across their bottom edge. The inset goes inside the bar the
|
||||
way the shared MBar and MAction take it — same custom property, so an ancestor that zeroes it
|
||||
for a bar sitting mid-screen would zero this one too — and the accent still runs to the bottom
|
||||
of the glass while the words stay above the handle. Without it the lower third of "Issue" is
|
||||
untappable, and this is the row a counter hand hits all day. */
|
||||
const SAFE_BOTTOM = "var(--tcx-safe-bottom, env(safe-area-inset-bottom, 0px))";
|
||||
const foot: React.CSSProperties = { flex: 1, minHeight: `calc(64px + ${SAFE_BOTTOM})`, display: "flex", alignItems: "center", padding: `0 16px ${SAFE_BOTTOM}`, fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: 13, letterSpacing: "0.08em", textTransform: "uppercase", textDecoration: "none" };
|
||||
|
||||
return (
|
||||
<>
|
||||
<MTop title="Person" back />
|
||||
<MRule />
|
||||
<MBody>
|
||||
<MPersonHead s={s} st={st} />
|
||||
<MSection label="Holding now" right={`${total} item${total === 1 ? "" : "s"}`} />
|
||||
{held.length === 0
|
||||
? <div style={{ padding: "22px 16px", fontSize: 14, color: "var(--color-neutral-600)" }}>Nothing out at the moment.</div>
|
||||
: held.map((h) => <MRow key={h.key} title={h.name} right={<span style={{ fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: 19, fontVariantNumeric: "tabular-nums" }}>{h.qty}</span>} />)}
|
||||
|
||||
<MSection label="Their own record" />
|
||||
{code ? (
|
||||
<>
|
||||
<div style={{ padding: "16px" }}>
|
||||
<div style={{ fontFamily: "ui-monospace, Menlo, Consolas, monospace", fontSize: 26, fontWeight: 800, letterSpacing: "0.06em" }}>{code}</div>
|
||||
<p style={{ fontSize: 13.5, lineHeight: 1.55, color: "var(--color-neutral-700)", margin: "8px 0 0" }}>
|
||||
Read this out or write it down now — it can't be shown again. They go to{" "}
|
||||
<b>{origin}/my</b>, choose “I have a code”, and set an email and password.
|
||||
</p>
|
||||
</div>
|
||||
<MBar label="Done" tone="ink" glyph="none" onClick={() => setCode(null)} />
|
||||
</>
|
||||
) : st.selfEmail ? (
|
||||
<div style={{ padding: "16px", fontSize: 14, lineHeight: 1.55, color: "var(--color-neutral-600)" }}>
|
||||
Signed up as {st.selfEmail} — they can look up their own record instead of coming to the counter.
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div style={{ padding: "16px" }}>
|
||||
<p style={{ fontSize: 14, lineHeight: 1.55, color: "var(--color-neutral-600)", margin: 0 }}>
|
||||
{st.selfCode
|
||||
? "A code is out but hasn’t been used. Make a new one if they’ve lost it — the old one stops working."
|
||||
: "Give them a code and they can check what they hold on their own phone. Read-only."}
|
||||
</p>
|
||||
</div>
|
||||
<MError msg={err} onDismiss={() => setErr("")} />
|
||||
{isAdmin && (
|
||||
<MBar label={busy ? "Generating…" : st.selfCode ? "New code" : "Generate a code"} tone="ink" glyph="none" disabled={busy}
|
||||
onClick={async () => {
|
||||
setBusy(true); setErr("");
|
||||
const r = await mutate<{ code: string }>("staff.selfCode", { id: st.id });
|
||||
setBusy(false);
|
||||
if (!r.ok) { setErr(r.error); return; }
|
||||
setCode(r.result.code);
|
||||
}} />
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
<MSection label="History" />
|
||||
{history.length === 0
|
||||
? <div style={{ padding: "22px 16px", fontSize: 14, color: "var(--color-neutral-600)" }}>Nothing recorded for {staffName(st)} yet.</div>
|
||||
: history.map((h, i) => (
|
||||
<div key={i} style={{ display: "flex", gap: 12, padding: "14px 16px", borderBottom: "1px solid var(--color-divider)" }}>
|
||||
<span style={{ flex: 1, fontSize: 14.5 }}>{h.text}</span>
|
||||
<span style={{ fontSize: 13, color: "var(--color-neutral-600)", whiteSpace: "nowrap" }}>{fmtDate(h.date)}</span>
|
||||
</div>
|
||||
))}
|
||||
</MBody>
|
||||
<div style={{ display: "flex", flex: `0 0 calc(64px + ${SAFE_BOTTOM})`, borderTop: "2px solid " + INK }}>
|
||||
<Link href={`/m/issue/${st.id}`} style={{ ...foot, background: "var(--color-accent)", color: "#fff" }}>Issue</Link>
|
||||
<Link href={`/m/person/${st.id}/exchange`} style={{ ...foot, background: "var(--color-neutral-200)", color: INK, borderLeft: "1px solid " + GROUND }}>Exchange</Link>
|
||||
<Link href={`/m/person/${st.id}/return`} style={{ ...foot, background: "var(--color-neutral-200)", color: INK, borderLeft: "1px solid " + GROUND }}>Return</Link>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user