lorentz
bfe9549d02
- KpiCardMobile: phone-sized KPI card with label/value/caption; tone='attention' adds destructive left border - NeedsAttentionStrip: horizontal-scroll strip of compact attention cards; renders null when items=[] - WorkerStatusRow: 3-cell status row with emerald/amber/destructive status dots, each linking to desktop admin - All three are pure presentational client components; no fetch, no recharts, no new state libraries
51 lines
1.7 KiB
TypeScript
51 lines
1.7 KiB
TypeScript
'use client';
|
|
|
|
/* NeedsAttentionStrip — phase 03 (DASH-02).
|
|
*
|
|
* Horizontal-scroll strip of compact attention cards. Each card shows a
|
|
* count + label and is a next/link to the destination view. The strip
|
|
* uses native horizontal overflow with snap-x for momentum scroll on
|
|
* iOS/Android. Renders nothing when items=[]. */
|
|
|
|
import Link from 'next/link';
|
|
import { AlertTriangle, ChevronRight } from 'lucide-react';
|
|
|
|
export interface NeedsAttentionItem {
|
|
id: string;
|
|
label: string;
|
|
count: number;
|
|
href: string;
|
|
}
|
|
|
|
interface NeedsAttentionStripProps {
|
|
items: NeedsAttentionItem[];
|
|
}
|
|
|
|
export function NeedsAttentionStrip({ items }: NeedsAttentionStripProps) {
|
|
if (items.length === 0) return null;
|
|
return (
|
|
<div>
|
|
<p className="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-2">
|
|
Needs attention
|
|
</p>
|
|
<div className="-mx-4 px-4 flex gap-3 overflow-x-auto snap-x snap-mandatory pb-1">
|
|
{items.map(item => (
|
|
<Link
|
|
key={item.id}
|
|
href={item.href}
|
|
className="snap-start shrink-0 w-44 rounded-2xl border bg-card p-3 hover:bg-accent transition-colors"
|
|
>
|
|
<div className="flex items-start justify-between">
|
|
<AlertTriangle className={`w-4 h-4 ${item.count > 0 ? 'text-destructive' : 'text-muted-foreground'}`} />
|
|
<ChevronRight className="w-4 h-4 text-muted-foreground" />
|
|
</div>
|
|
<p className={`mt-2 text-2xl font-bold tabular-nums ${item.count > 0 ? 'text-destructive' : ''}`}>
|
|
{item.count}
|
|
</p>
|
|
<p className="text-xs text-muted-foreground mt-0.5">{item.label}</p>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|