79 lines
2.4 KiB
TypeScript
79 lines
2.4 KiB
TypeScript
import { ClipboardList, Inbox, CheckCircle2, Timer, type LucideIcon } from "lucide-react";
|
|
import { fmtNum } from "../lib/formatters";
|
|
|
|
export interface StatsBarProps {
|
|
total: number;
|
|
offered: number;
|
|
accepted: number;
|
|
avgLeadTime: number | null; // روز
|
|
}
|
|
|
|
export function StatsBar({ total, offered, accepted, avgLeadTime }: StatsBarProps) {
|
|
const stats: {
|
|
label: string;
|
|
shortLabel: string;
|
|
value: string;
|
|
color: string;
|
|
icon: LucideIcon;
|
|
}[] = [
|
|
{
|
|
label: "کل پیشنهادها",
|
|
shortLabel: "کل",
|
|
value: fmtNum(total),
|
|
color: "text-ink",
|
|
icon: ClipboardList,
|
|
},
|
|
{
|
|
label: "پیشنهاد باز",
|
|
shortLabel: "باز",
|
|
value: fmtNum(offered),
|
|
color: "text-amber",
|
|
icon: Inbox,
|
|
},
|
|
{
|
|
label: "پذیرفتهشده",
|
|
shortLabel: "پذیرفته",
|
|
value: fmtNum(accepted),
|
|
color: "text-[#1d4ed8]",
|
|
icon: CheckCircle2,
|
|
},
|
|
{
|
|
label: "میانگین lead time (روز)",
|
|
shortLabel: "زمان تحویل",
|
|
value: avgLeadTime == null ? "—" : fmtNum(avgLeadTime),
|
|
color: "text-green",
|
|
icon: Timer,
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section className="grid grid-cols-4 gap-1.5 sm:gap-3">
|
|
{stats.map((s) => (
|
|
<div
|
|
key={s.label}
|
|
className="rounded-xl border border-line bg-panel p-2 text-center transition-colors hover:border-accent/40 sm:rounded-lg sm:p-3.5 sm:text-right"
|
|
>
|
|
{/* عنوان کارت */}
|
|
<div className="flex items-center justify-center sm:justify-between">
|
|
<span className="truncate text-[10px] font-medium text-muted sm:text-[11px]">
|
|
<span className="sm:hidden">{s.shortLabel}</span>
|
|
<span className="hidden sm:inline">{s.label}</span>
|
|
</span>
|
|
|
|
{/* آیکون در موبایل حذف شده تا فضا برای متن باز بماند */}
|
|
<span className="hidden h-6 w-6 shrink-0 items-center justify-center rounded-md bg-slate-bg text-muted sm:flex">
|
|
<s.icon className="h-3.5 w-3.5" strokeWidth={2} />
|
|
</span>
|
|
</div>
|
|
|
|
{/* مقدار عددی */}
|
|
<div
|
|
className={`mt-0.5 text-base font-extrabold leading-5 tabular-nums sm:mt-1 sm:text-[22px] sm:leading-8 ${s.color}`}
|
|
>
|
|
{s.value}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</section>
|
|
);
|
|
} |