feat: show material suppliers

2026-10-01 11:16:46 +03:30
parent 253c922280
commit 8c5f4ab770
6 changed files with 474 additions and 244 deletions
@@ -458,6 +458,39 @@ function adaptBrandLink(raw: RawBrandLink): BrandLinkRow {
  return { id: raw.id, brand_id: raw.brand_id, brand_name: raw.brand?.name || "" };
 }

+// تأمین‌کنندگان متصل به یک متریال — پاسخ GET /materials/{id}/suppliers
+// Raw shape mirrors the backend dict exactly: clean supplier objects produced
+// by an atomic JOIN (select(Supplier).join(SupplierMaterial)…) — the name
+// always comes from the suppliers table, never from the material row.
+interface RawMaterialSupplier {
+  id: string;
+  name: string;
+  phone: string | null;
+  contact_person: string | null;
+  location: string | null;
+}
+
+/** Clean UI-facing type for one supplier linked to a material. */
+export interface MaterialSupplier {
+  id: string;
+  name: string;
+  phone: string | null;
+  contact_person: string | null;
+  location: string | null;
+}
+
+function adaptMaterialSupplier(raw: RawMaterialSupplier): MaterialSupplier {
+  return {
+    id: raw.id,
+    // Bound straight from the supplier object in the API response — there is
+    // no fallback, so a supplier row can never render the material's name.
+    name: raw.name,
+    phone: raw.phone,
+    contact_person: raw.contact_person,
+    location: raw.location,
+  };
+}
+
 // فایل پیوست — پاسخ بک‌اند (metadata؛ بایت‌ها از endpoint دانلود می‌آیند)
 interface RawAttachment {
  id: string;
@@ -1126,6 +1159,16 @@ export const api = {
    updateCanonicalUnit: async (id: string, canonical_unit_id: number): Promise<void> => {
      await patchData(`/materials/${id}`, { canonical_unit_id });
    },
+    // فهرست تأمین‌کننده‌های متصل به یک متریال (GET /materials/{id}/suppliers)
+    listSuppliers: async (materialId: string): Promise<MaterialSupplier[]> => {
+      // The backend returns { data: [...clean supplier objects] } from an
+      // atomic JOIN; getData<T> unwraps the envelope. No fallback data —
+      // an empty array means the material genuinely has no suppliers.
+      const raw = await getData<RawMaterialSupplier[]>(
+        `/materials/${materialId}/suppliers`,
+      );
+      return raw.map(adaptMaterialSupplier);
+    },
  },

  projects: {
@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { toast } from "sonner";
 import {
+  Building2,
  ChevronDown,
  Link2,
  Pencil,
@@ -12,7 +13,7 @@ import {
  TriangleAlert,
 } from "lucide-react";
 import type { StandardConversion } from "../../lib/types";
-import { api, apiV26, nextId, type BrandLinkRow, type MaterialUnitRow } from "../../lib/api";
+import { api, apiV26, nextId, type BrandLinkRow, type MaterialSupplier, type MaterialUnitRow } from "../../lib/api";
 import {
  refreshProcurementStore,
  useDeleteStandardConversion,
@@ -102,6 +103,11 @@ export function UnitsPage() {
  const [rowsLoading, setRowsLoading] = useState(false);
  const [brandLinks, setBrandLinks] = useState<BrandLinkRow[]>([]);

+  // تأمین‌کننده‌های متریال انتخاب‌شده — type imported from api.ts
+  const [materialSuppliers, setMaterialSuppliers] = useState<MaterialSupplier[]>([]);
+  const [suppliersLoading, setSuppliersLoading] = useState(false);
+  const [suppliersLoadedId, setSuppliersLoadedId] = useState<string | null>(null);
+
  // واحدها و برندهای سراسری (فهرست دیتابیس)
  const [units, setUnits] = useState<UnitLite[]>([]);
  const [allBrands, setAllBrands] = useState<string[]>([]);
@@ -253,6 +259,7 @@ export function UnitsPage() {
    if (!materialId) {
      setRows([]);
      setBrandLinks([]);
+      setMaterialSuppliers([]);
      return;
    }
    void loadRows(materialId);
@@ -263,6 +270,35 @@ export function UnitsPage() {
    setFormBrand("");
  }, [materialId, loadRows]);

+  // واکشی تأمین‌کننده‌های متصل به متریال انتخاب‌شده
+  useEffect(() => {
+    if (!materialId) {
+      setMaterialSuppliers([]);
+      setSuppliersLoadedId(null);
+      return;
+    }
+    let alive = true;
+    setSuppliersLoading(true);
+    api.materials
+      .listSuppliers(materialId)
+      .then((list) => { 
+        if (alive) {
+          setMaterialSuppliers(list);
+          setSuppliersLoadedId(materialId);
+        }
+      })
+      .catch((err: unknown) => {
+        if (!alive) return;
+        setMaterialSuppliers([]);
+        setSuppliersLoadedId(materialId);
+        // Surface the real error so backend issues are not silently hidden
+        const msg = err instanceof Error ? err.message : "خواندن تأمین‌کننده‌های متریال ناموفق بود";
+        toast.error(msg);
+      })
+      .finally(() => { if (alive) setSuppliersLoading(false); });
+    return () => { alive = false; };
+  }, [materialId]);
+
  const brandNameFor = (row: MaterialUnitRow): string => {
    if (!row.brand_material_id) return "";
    return brandLinks.find((b) => b.id === row.brand_material_id)?.brand_name || "";
@@ -546,6 +582,48 @@ export function UnitsPage() {
              </div>
            ) : (
              <>
+                {/* تامین‌کنندگان متریال — پاسخ GET /materials/{id}/suppliers */}
+                <div className="mb-6 flex flex-col overflow-hidden rounded-xl border border-line bg-panel shadow-sm">
+                  <div className="shrink-0 border-b border-line bg-panel px-4 py-3">
+                    <h4 className="flex items-center gap-2 text-[14px] font-bold text-accent">
+                      <Building2 className="h-4 w-4" /> تامین‌کنندگان متریال
+                    </h4>
+                  </div>
+                  <div className="flex w-full flex-1 flex-col p-4 transition-opacity duration-300 ease-in-out opacity-100 min-h-[80px] md:min-h-[100px]">
+                    {suppliersLoading || materialId !== suppliersLoadedId ? (
+                      <div className="flex flex-1 flex-col items-center justify-center text-center text-sm text-muted">
+                        <div className="h-5 w-5 animate-spin rounded-full border-2 border-muted border-t-transparent"></div>
+                      </div>
+                    ) : materialSuppliers.length === 0 ? (
+                      <div className="flex flex-1 flex-col items-center justify-center text-center text-sm text-gray-400 md:text-base">
+                        تامین‌کننده‌ای برای این متریال ثبت نشده است
+                      </div>
+                    ) : (
+                      <div className="flex flex-col gap-2 max-h-[200px] overflow-y-auto custom-scrollbar pr-1">
+                        {materialSuppliers.map((s) => (
+                          <div
+                            key={s.id}
+                            className="rounded-lg border border-line bg-slate-bg px-3 py-2.5 text-sm shrink-0"
+                          >
+                            {/* نام تأمین‌کننده — مستقیم از پاسخ API، بدون fallback */}
+                            <div className="flex items-center gap-1.5 text-[13px] font-semibold">
+                              <Building2 className="h-3.5 w-3.5 shrink-0 text-accent" />
+                              {s.name}
+                            </div>
+                            {(s.location || s.phone || s.contact_person) && (
+                              <div className="mt-0.5 flex flex-wrap items-center gap-x-3 gap-y-0.5 text-[11.5px] text-muted">
+                                {s.location && <span>{s.location}</span>}
+                                {s.phone && <span dir="ltr">{s.phone}</span>}
+                                {s.contact_person && <span>{s.contact_person}</span>}
+                              </div>
+                            )}
+                          </div>
+                        ))}
+                      </div>
+                    )}
+                  </div>
+                </div>
+
                {/* واحد مرجع متریال */}
                <div className="ref-unit-box">
                  <div className="ref-title">
@@ -587,119 +665,6 @@ export function UnitsPage() {
                  </div>
                </div>

-                {/* ضرایب متریال */}
-                <h4 className="sec-title">
-                  <Repeat className="me-1 inline h-4 w-4 text-accent" /> ضریب‌های تبدیل
-                </h4>
-                {rowsLoading ? (
-                  <div className="conv-empty">در حال بارگذاری…</div>
-                ) : !rows.length ? (
-                  <div className="conv-empty">هنوز ضریبی برای این متریال ثبت نشده است.</div>
-                ) : (
-                  rows.map((r) => (
-                    <div key={r.id}>
-                      <div className="cg-head">
-                        {unitDisplay(r.unit) || `واحد #${r.unit_id}`} ← {ref}
-                      </div>
-                      <div className="conv-row">
-                        <span className="cv-brand">{brandNameFor(r) || "همه برندها"}</span>
-                        <span className="cv-factor">{faNum(r.conversion_factor)}</span>
-                        <span className="cv-arrow">×</span>
-                        <span className="cv-unit">{ref}</span>
-                        <span className="conv-actions">
-                          <button type="button" title="ویرایش" onClick={() => startEdit(r)}>
-                            <Pencil className="h-3.5 w-3.5" />
-                          </button>
-                          <button type="button" title="حذف" onClick={() => void deleteMu(r)}>
-                            <Trash2 className="h-3.5 w-3.5" />
-                          </button>
-                        </span>
-                      </div>
-                    </div>
-                  ))
-                )}
-
-                {/* فرم افزودن ضریب */}
-                <div className="add-conv">
-                  <h4 className="mb-2 text-[13.5px] font-bold">
-                    {editingId ? (
-                      <>
-                        <Pencil className="me-1 inline h-3.5 w-3.5" /> ویرایش ضریب تبدیل
-                      </>
-                    ) : (
-                      <>
-                        <Plus className="me-1 inline h-3.5 w-3.5" /> افزودن ضریب تبدیل
-                      </>
-                    )}
-                  </h4>
-                  <div className="grid grid-cols-1 gap-2 sm:grid-cols-[1.2fr_0.6fr_1fr_0.8fr_auto] sm:items-end">
-                    <div className="field">
-                      <label>واحد پیشنهادشده</label>
-                      <Combobox
-                        value={formUnit}
-                        onChange={(it) => setFormUnit(it.label)}
-                        items={units.map((u) => unitDisplay(u)).filter(Boolean)}
-                        allowAdd
-                        addSuffix="به عنوان واحد جدید"
-                        placeholder="مثلاً حلقه"
-                        onInputChange={setFormUnit}
-                      />
-                    </div>
-                    <div className="field">
-                      <label>ضریب</label>
-                      <NumberInput
-                        value={factorNum()}
-                        onChange={(n) => setFormFactor(n != null ? String(n) : "")}
-                        placeholder="مثلاً 0.98"
-                        inputMode="decimal"
-                      />
-                    </div>
-                    <div className="field">
-                      <label>برند (خالی = همه برندها)</label>
-                      <Combobox
-                        value={formBrand}
-                        onChange={(it) => setFormBrand(it.label)}
-                        items={allBrands}
-                        allowAdd
-                        disabled={!!editingId}
-                        addSuffix="به عنوان برند جدید"
-                        placeholder="مثلاً راجین"
-                        onInputChange={setFormBrand}
-                      />
-                    </div>
-                    <div className="field">
-                      <label>به واحد (مرجع)</label>
-                      <input
-                        type="text"
-                        className="h-9 w-full rounded-lg border border-line bg-slate-bg px-3 text-sm text-muted"
-                        value={ref || "مرجع"}
-                        placeholder="مرجع"
-                        readOnly
-                      />
-                    </div>
-                    <div className="flex items-center gap-1.5">
-                      <Button size="sm" onClick={() => void saveConv()}>
-                        {editingId ? "ذخیره تغییرات" : "افزودن"}
-                      </Button>
-                      {editingId && (
-                        <Button
-                          size="sm"
-                          variant="slate"
-                          onClick={() => {
-                            setEditingId(null);
-                            setFormUnit("");
-                            setFormFactor("");
-                            setFormBrand("");
-                          }}
-                        >
-                          انصراف
-                        </Button>
-                      )}
-                    </div>
-                  </div>
-                  <div className="conv-live">{convLive}</div>
-                </div>
-
                {/* واحدهای ناشناخته */}
                {unknownUnits.length > 0 && (
                  <>
@@ -829,6 +794,121 @@ export function UnitsPage() {
                    تبدیل ثابت برای همه‌ی متریال‌ها اعمال می‌شود؛ ضریب یعنی: ۱ از واحد = ضریب × به واحد
                  </div>
                </div>
+
+
+                {/* ضرایب متریال */}
+                <h4 className="sec-title">
+                  <Repeat className="me-1 inline h-4 w-4 text-accent" /> ضریب‌های تبدیل
+                </h4>
+                {rowsLoading ? (
+                  <div className="conv-empty">در حال بارگذاری…</div>
+                ) : !rows.length ? (
+                  <div className="conv-empty">هنوز ضریبی برای این متریال ثبت نشده است.</div>
+                ) : (
+                  rows.map((r) => (
+                    <div key={r.id}>
+                      <div className="cg-head">
+                        {unitDisplay(r.unit) || `واحد #${r.unit_id}`} ← {ref}
+                      </div>
+                      <div className="conv-row">
+                        <span className="cv-brand">{brandNameFor(r) || "همه برندها"}</span>
+                        <span className="cv-factor">{faNum(r.conversion_factor)}</span>
+                        <span className="cv-arrow">×</span>
+                        <span className="cv-unit">{ref}</span>
+                        <span className="conv-actions">
+                          <button type="button" title="ویرایش" onClick={() => startEdit(r)}>
+                            <Pencil className="h-3.5 w-3.5" />
+                          </button>
+                          <button type="button" title="حذف" onClick={() => void deleteMu(r)}>
+                            <Trash2 className="h-3.5 w-3.5" />
+                          </button>
+                        </span>
+                      </div>
+                    </div>
+                  ))
+                )}
+
+                {/* فرم افزودن ضریب */}
+                <div className="add-conv">
+                  <h4 className="mb-2 text-[13.5px] font-bold">
+                    {editingId ? (
+                      <>
+                        <Pencil className="me-1 inline h-3.5 w-3.5" /> ویرایش ضریب تبدیل
+                      </>
+                    ) : (
+                      <>
+                        <Plus className="me-1 inline h-3.5 w-3.5" /> افزودن ضریب تبدیل
+                      </>
+                    )}
+                  </h4>
+                  <div className="grid grid-cols-1 gap-2 sm:grid-cols-[1.2fr_0.6fr_1fr_0.8fr_auto] sm:items-end">
+                    <div className="field">
+                      <label>واحد پیشنهادشده</label>
+                      <Combobox
+                        value={formUnit}
+                        onChange={(it) => setFormUnit(it.label)}
+                        items={units.map((u) => unitDisplay(u)).filter(Boolean)}
+                        allowAdd
+                        addSuffix="به عنوان واحد جدید"
+                        placeholder="مثلاً حلقه"
+                        onInputChange={setFormUnit}
+                      />
+                    </div>
+                    <div className="field">
+                      <label>ضریب</label>
+                      <NumberInput
+                        value={factorNum()}
+                        onChange={(n) => setFormFactor(n != null ? String(n) : "")}
+                        placeholder="مثلاً 0.98"
+                        inputMode="decimal"
+                      />
+                    </div>
+                    <div className="field">
+                      <label>برند (خالی = همه برندها)</label>
+                      <Combobox
+                        value={formBrand}
+                        onChange={(it) => setFormBrand(it.label)}
+                        items={allBrands}
+                        allowAdd
+                        disabled={!!editingId}
+                        addSuffix="به عنوان برند جدید"
+                        placeholder="مثلاً راجین"
+                        onInputChange={setFormBrand}
+                      />
+                    </div>
+                    <div className="field">
+                      <label>به واحد (مرجع)</label>
+                      <input
+                        type="text"
+                        className="h-9 w-full rounded-lg border border-line bg-slate-bg px-3 text-sm text-muted"
+                        value={ref || "مرجع"}
+                        placeholder="مرجع"
+                        readOnly
+                      />
+                    </div>
+                    <div className="flex items-center gap-1.5">
+                      <Button size="sm" onClick={() => void saveConv()}>
+                        {editingId ? "ذخیره تغییرات" : "افزودن"}
+                      </Button>
+                      {editingId && (
+                        <Button
+                          size="sm"
+                          variant="slate"
+                          onClick={() => {
+                            setEditingId(null);
+                            setFormUnit("");
+                            setFormFactor("");
+                            setFormBrand("");
+                          }}
+                        >
+                          انصراف
+                        </Button>
+                      )}
+                    </div>
+                  </div>
+                  <div className="conv-live">{convLive}</div>
+                </div>
+
              </>
            )}
          </section>