79 lines
2.6 KiB
TypeScript
79 lines
2.6 KiB
TypeScript
|
/**
|
||
|
|
* Stage colours for the repair Documents flow.
|
||
|
|
*
|
||
|
|
* Visual contract:
|
||
|
|
* - "pending" : red — operator hasn't produced this artefact yet
|
||
|
|
* - "in_progress" : amber — produced / received, awaiting next step
|
||
|
|
* - "done" : emerald — final stage of this flow, complete
|
||
|
|
* - "skipped" : muted — superseded / replaced (e.g. a re-quoted
|
||
|
|
* customer quote); still rendered but de-emphasised
|
||
|
|
*
|
||
|
|
* Each stage has:
|
||
|
|
* - label — short human label rendered in the row badge
|
||
|
|
* - tone — tailwind semantic colour bucket used to derive classes
|
||
|
|
* - stripe — left-edge stripe colour (the row's "stage colour")
|
||
|
|
* - dot — small filled circle colour (used inside the badge)
|
||
|
|
* - badge — badge background + text colour pair
|
||
|
|
* - dim — row background tint (very subtle; lets the stripe
|
||
|
|
* do most of the visual lifting)
|
||
|
|
*
|
||
|
|
* The class strings are kept as constants so we never have to
|
||
|
|
* dynamically build Tailwind class names (Tailwind's JIT needs the
|
||
|
|
* full string in source for it to be in the generated CSS).
|
||
|
|
*/
|
||
|
|
|
||
|
|
export type DocumentStageTone =
|
||
|
|
| "pending"
|
||
|
|
| "in_progress"
|
||
|
|
| "done"
|
||
|
|
| "skipped";
|
||
|
|
|
||
|
|
export interface DocumentStageStyle {
|
||
|
|
label: string;
|
||
|
|
/** Tone bucket — drives the other fields. */
|
||
|
|
tone: DocumentStageTone;
|
||
|
|
/** Tailwind class for the left-edge stripe. */
|
||
|
|
stripeClass: string;
|
||
|
|
/** Tailwind class for the small filled circle inside the badge. */
|
||
|
|
dotClass: string;
|
||
|
|
/** Tailwind classes for the badge background + text. */
|
||
|
|
badgeClass: string;
|
||
|
|
/** Tailwind class for the very-subtle row background tint. */
|
||
|
|
tintClass: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
const STYLE: Record<DocumentStageTone, Omit<DocumentStageStyle, "tone">> = {
|
||
|
|
pending: {
|
||
|
|
label: "Not started",
|
||
|
|
stripeClass: "bg-red-500",
|
||
|
|
dotClass: "bg-red-500",
|
||
|
|
badgeClass: "bg-red-100 text-red-700 ring-red-600/20",
|
||
|
|
tintClass: "bg-red-50/40",
|
||
|
|
},
|
||
|
|
in_progress: {
|
||
|
|
label: "In progress",
|
||
|
|
stripeClass: "bg-amber-500",
|
||
|
|
dotClass: "bg-amber-500",
|
||
|
|
badgeClass: "bg-amber-100 text-amber-800 ring-amber-600/20",
|
||
|
|
tintClass: "bg-amber-50/40",
|
||
|
|
},
|
||
|
|
done: {
|
||
|
|
label: "Done",
|
||
|
|
stripeClass: "bg-emerald-500",
|
||
|
|
dotClass: "bg-emerald-500",
|
||
|
|
badgeClass: "bg-emerald-100 text-emerald-800 ring-emerald-600/20",
|
||
|
|
tintClass: "bg-emerald-50/40",
|
||
|
|
},
|
||
|
|
skipped: {
|
||
|
|
label: "Replaced",
|
||
|
|
stripeClass: "bg-zinc-300",
|
||
|
|
dotClass: "bg-zinc-400",
|
||
|
|
badgeClass: "bg-zinc-100 text-zinc-600 ring-zinc-500/20",
|
||
|
|
tintClass: "bg-zinc-50/40",
|
||
|
|
},
|
||
|
|
};
|
||
|
|
|
||
|
|
export function documentStageStyle(tone: DocumentStageTone): DocumentStageStyle {
|
||
|
|
return { tone, ...STYLE[tone] };
|
||
|
|
}
|