chore: restore MVP dashboard components from backup

2026-10-08 11:16:15 +03:30
parent d38cf38bd9
commit b0776da061
13 changed files with 1628 additions and 0 deletions
@@ -0,0 +1,125 @@
+// ============================================================
+// ویجت ۶ — شبکه‌ی وضعیت سفارش‌های در راه
+// جدول کمی سفارش‌های باز: متریال و تأمین‌کننده | سفارش‌شده | رسیده
+// | وضعیت (در راه / تحویل جزئی / تحویل کامل) + نوار پیشرفت.
+// داده از /pm/on-the-way (با برچسب برند و مشخصات و فیلتر سراسری).
+// ============================================================
+
+import { Truck } from "lucide-react";
+import { useInTransit } from "../../hooks/useDashboardData";
+import type { InTransitRow } from "../../lib/types";
+import { faNum } from "../../lib/formatters";
+import { cn } from "../../lib/utils";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "../ui/table";
+import { Badge } from "../ui/badge";
+import { ChartCard, ChartEmpty, ChartLoading } from "./chartShared";
+
+const STATE_META: Record<
+  InTransitRow["state"],
+  { label: string; cls: string; bar: string }
+> = {
+  on_the_way: { label: "در راه", cls: "bg-amber-bg text-amber", bar: "bg-amber" },
+  partially_received: { label: "تحویل جزئی", cls: "bg-blue-bg text-[#1d4ed8]", bar: "bg-[#2563eb]" },
+  arrived: { label: "تحویل کامل", cls: "bg-green-bg text-green", bar: "bg-green" },
+};
+
+function specLabel(specs: Record<string, string>): string {
+  const parts = Object.entries(specs || {});
+  return parts.length ? parts.map(([k, v]) => `${k}: ${v}`).join("، ") : "";
+}
+
+function num(v: string): number {
+  const n = Number(v);
+  return Number.isFinite(n) ? n : 0;
+}
+
+export function InTransitGrid() {
+  const query = useInTransit();
+  const rows = query.data ?? [];
+
+  return (
+    <ChartCard
+      title={
+        <span className="inline-flex items-center gap-1.5">
+          <Truck className="h-4 w-4 text-muted" />
+          سفارش‌های در راه — وضعیت تحویل
+        </span>
+      }
+      sub="اقلام پذیرفته‌شده‌ی خرید تا رسیدن کامل به انبار"
+    >
+      {query.isLoading ? (
+        <ChartLoading />
+      ) : rows.length === 0 ? (
+        <ChartEmpty message="سفارش بازی در جریان نیست" />
+      ) : (
+        <Table>
+          <TableHeader>
+            <TableRow className="hover:bg-transparent">
+              <TableHead>متریال / تأمین‌کننده</TableHead>
+              <TableHead className="text-end">سفارش‌شده</TableHead>
+              <TableHead className="text-end">رسیده تاکنون</TableHead>
+              <TableHead className="min-w-[140px]">پیشرفت</TableHead>
+              <TableHead>وضعیت</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {rows.map((r) => {
+              const ordered = num(r.ordered_qty);
+              const received = num(r.received_qty);
+              const pct = ordered > 0 ? Math.min(100, Math.round((received / ordered) * 100)) : 0;
+              const meta = STATE_META[r.state] ?? STATE_META.on_the_way;
+              const specs = specLabel(r.specs);
+              return (
+                <TableRow key={r.item_decision_id}>
+                  <TableCell>
+                    <div className="text-[13px] font-bold">{r.material.name}</div>
+                    <div className="text-[11px] text-muted">
+                      {r.supplier.name}
+                      {r.brand ? ` · ${r.brand.name}` : ""}
+                    </div>
+                    {specs && <div className="text-[10.5px] text-muted">{specs}</div>}
+                    {r.project && (
+                      <div className="mt-0.5 text-[10.5px] text-accent">{r.project.name}</div>
+                    )}
+                  </TableCell>
+                  <TableCell className="text-end font-bold tabular-nums">
+                    {faNum(ordered.toLocaleString("en-US"))}
+                    <div className="text-[10px] font-normal text-muted">
+                      {r.unit?.name_fa || r.unit?.code}
+                    </div>
+                  </TableCell>
+                  <TableCell className="text-end font-bold tabular-nums">
+                    {faNum(received.toLocaleString("en-US"))}
+                  </TableCell>
+                  <TableCell>
+                    <div className="flex items-center gap-2">
+                      <div className="h-1.5 w-full overflow-hidden rounded-full bg-slate-bg">
+                        <div
+                          className={cn("h-full rounded-full", meta.bar)}
+                          style={{ width: `${pct}%` }}
+                        />
+                      </div>
+                      <span className="shrink-0 text-[10.5px] tabular-nums text-muted">
+                        {faNum(pct)}٪
+                      </span>
+                    </div>
+                  </TableCell>
+                  <TableCell>
+                    <Badge className={cn("px-2 py-0.5 text-[10.5px]", meta.cls)}>{meta.label}</Badge>
+                  </TableCell>
+                </TableRow>
+              );
+            })}
+          </TableBody>
+        </Table>
+      )}
+    </ChartCard>
+  );
+}