Chaim
b51163b67c
All checks were successful
Build & Deploy / build-and-deploy (push) Successful in 35s
Reduce vertical padding, number font size, and inter-element gaps so the four counters take less vertical real estate. Width unchanged. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
66 lines
2.4 KiB
TypeScript
66 lines
2.4 KiB
TypeScript
import { Card, CardContent } from "@/components/ui/card";
|
||
import type { Case } from "@/lib/api/cases";
|
||
|
||
type Bucket = {
|
||
label: string;
|
||
caption: string;
|
||
value: number;
|
||
tone: "navy" | "gold" | "warn" | "success";
|
||
};
|
||
|
||
const TONE_STYLES: Record<Bucket["tone"], string> = {
|
||
navy: "before:bg-navy text-navy",
|
||
gold: "before:bg-gold text-gold-deep",
|
||
warn: "before:bg-warn text-warn",
|
||
success: "before:bg-success text-success",
|
||
};
|
||
|
||
function bucketize(cases: Case[] | undefined): Bucket[] {
|
||
const c = cases ?? [];
|
||
const inProgress = c.filter((x) =>
|
||
["processing", "documents_ready", "analyst_verified", "research_complete", "outcome_set", "brainstorming", "direction_approved", "analysis_enriched", "ready_for_writing"].includes(x.status),
|
||
).length;
|
||
const drafting = c.filter((x) =>
|
||
["drafting", "qa_review", "drafted"].includes(x.status),
|
||
).length;
|
||
const done = c.filter((x) =>
|
||
["exported", "reviewed", "final"].includes(x.status),
|
||
).length;
|
||
|
||
return [
|
||
{ label: "סה״כ תיקי ערר", caption: "בכל הסטטוסים", value: c.length, tone: "navy" },
|
||
{ label: "בהכנה", caption: "מסמכים וניתוח", value: inProgress, tone: "gold" },
|
||
{ label: "בכתיבה", caption: "טיוטות ו-QA", value: drafting, tone: "warn" },
|
||
{ label: "מוכנים", caption: "יוצאו או סופיים", value: done, tone: "success" },
|
||
];
|
||
}
|
||
|
||
export function KPICards({ cases, loading }: { cases?: Case[]; loading?: boolean }) {
|
||
const buckets = bucketize(cases);
|
||
|
||
return (
|
||
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
|
||
{buckets.map((b) => (
|
||
<Card
|
||
key={b.label}
|
||
className={`
|
||
relative overflow-hidden bg-surface shadow-sm border-rule
|
||
before:content-[''] before:absolute before:top-0 before:right-0 before:h-full before:w-[3px]
|
||
${TONE_STYLES[b.tone]}
|
||
`}
|
||
>
|
||
<CardContent className="px-5 py-3 flex flex-col gap-0.5">
|
||
<span className="text-[0.72rem] uppercase tracking-[0.08em] text-ink-muted">
|
||
{b.label}
|
||
</span>
|
||
<span className="font-display text-[1.7rem] font-black leading-none">
|
||
{loading ? "—" : b.value}
|
||
</span>
|
||
<span className="text-[0.74rem] text-ink-muted">{b.caption}</span>
|
||
</CardContent>
|
||
</Card>
|
||
))}
|
||
</div>
|
||
);
|
||
}
|