feat(procurement): sync status pipeline cards, add supplier lead time badges, and enhance badge contrast

frontend/src/components/StatsBar.tsx

@@ -1,13 +1,13 @@
-import { ClipboardList, Inbox, CheckCircle2, Timer, type LucideIcon } from "lucide-react";
+import { ClipboardList, Inbox, CheckCircle2, PackageCheck, type LucideIcon } from "lucide-react";
 import { fmtNum } from "../lib/formatters";
 
-export type StatusFilter = "all" | "offered" | "accepted";
+export type StatusFilter = "all" | "offered" | "accepted" | "arrived";
 
 export interface StatsBarProps {
   total: number;
   offered: number;
   accepted: number;
-  avgLeadTime: number | null; // روز
+  arrived: number;
   activeFilter?: StatusFilter;
   onFilterChange?: (filter: StatusFilter) => void;
 }
@@ -16,12 +16,12 @@ export function StatsBar({
   total,
   offered,
   accepted,
-  avgLeadTime,
+  arrived,
   activeFilter = "all",
   onFilterChange,
 }: StatsBarProps) {
   const stats: {
-    key?: StatusFilter;
+    key: StatusFilter;
     label: string;
     shortLabel: string;
     value: string;
@@ -54,21 +54,20 @@ export function StatsBar({
       icon: CheckCircle2,
     },
     {
-      label: "میانگین زمان تحویل",
-      shortLabel: "میانگین تحویل",
-      value: avgLeadTime == null ? "—" : fmtNum(avgLeadTime),
-      unit: avgLeadTime != null ? "روز" : undefined,
+      key: "arrived",
+      label: "تحویل‌شده به کارگاه",
+      shortLabel: "تحویل",
+      value: fmtNum(arrived),
       color: "text-green",
-      icon: Timer,
+      icon: PackageCheck,
     },
   ];
 
-  const handleClick = (key?: StatusFilter) => {
-    if (!key || !onFilterChange) return;
+  const handleClick = (key: StatusFilter) => {
+    if (!onFilterChange) return;
     if (key === "all") {
       onFilterChange("all");
     } else {
-      // در صورت کلیک مجدد روی همان کارت، فیلتر ریست شده و به کل برمی‌گردد
       onFilterChange(activeFilter === key ? "all" : key);
     }
   };
@@ -76,8 +75,8 @@ export function StatsBar({
   return (
     <section className="grid grid-cols-4 gap-1.5 sm:gap-3">
       {stats.map((s) => {
-        const isClickable = Boolean(s.key && onFilterChange);
-        const isActive = s.key && activeFilter === s.key;
+        const isClickable = Boolean(onFilterChange);
+        const isActive = activeFilter === s.key;
 
         return (
           <div
@@ -104,7 +103,7 @@ export function StatsBar({
               </span>
             </div>
 
-            {/* مقدار عددی به همراه واحد روز */}
+            {/* مقدار عددی */}
             <div
               className={`mt-0.5 flex items-baseline justify-center sm:justify-start gap-1 text-base font-extrabold leading-5 tabular-nums sm:mt-1 sm:text-[22px] sm:leading-8 ${s.color}`}
             >