feat(frontend): add React UI — procurement office, wizard, suppliers, inventory panel (dash port), role-based login

2026-08-25 19:08:15 +03:30
parent 170aed66ea
commit 4e105c5cd5
103 changed files with 16352 additions and 0 deletions
@@ -0,0 +1,38 @@
+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; value: string; color: string; icon: LucideIcon }[] = [
+    { label: "کل پیشنهادها", value: fmtNum(total), color: "text-ink", icon: ClipboardList },
+    // پیشنهاد باز = نارنجی، پذیرفته‌شده = آبی، رسیده = سبز
+    { label: "پیشنهاد باز", value: fmtNum(offered), color: "text-amber", icon: Inbox },
+    { label: "پذیرفته‌شده", value: fmtNum(accepted), color: "text-[#1d4ed8]", icon: CheckCircle2 },
+    { label: "میانگین lead time (روز)", value: avgLeadTime == null ? "—" : fmtNum(avgLeadTime), color: "text-green", icon: Timer },
+  ];
+  return (
+    <section className="grid grid-cols-2 gap-3 sm:grid-cols-4">
+      {stats.map((s) => (
+        <div
+          key={s.label}
+          className="rounded-lg border border-line bg-panel p-3.5 transition-colors hover:border-accent/40"
+        >
+          <div className="flex items-center justify-between">
+            <div className="text-[11px] font-medium text-muted">{s.label}</div>
+            <span className="flex h-6 w-6 items-center justify-center rounded-md bg-slate-bg text-muted">
+              <s.icon className="h-3.5 w-3.5" strokeWidth={2} />
+            </span>
+          </div>
+          <div className={`mt-1 text-[22px] font-extrabold leading-8 tabular-nums ${s.color}`}>{s.value}</div>
+        </div>
+      ))}
+    </section>
+  );
+}