Files
legal-ai/web-ui/src/components/cases/kpi-cards.tsx
Chaim ce61b88438
All checks were successful
Build & Deploy / build-and-deploy (push) Successful in 3m26s
Add missing pipeline statuses to UI with Hebrew labels
Added analyst_verified, research_complete, analysis_enriched, and
ready_for_writing statuses across all UI components: status-badge,
workflow-timeline, status-donut, status-changer, status-guide, and
kpi-cards. Also changed qa_review label from "QA" to "בדיקת איכות".

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-14 03:38:17 +00:00

66 lines
2.4 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
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-4 flex flex-col gap-1">
<span className="text-[0.72rem] uppercase tracking-[0.08em] text-ink-muted">
{b.label}
</span>
<span className="font-display text-[2.3rem] font-black leading-none">
{loading ? "—" : b.value}
</span>
<span className="text-[0.78rem] text-ink-muted mt-0.5">{b.caption}</span>
</CardContent>
</Card>
))}
</div>
);
}