feat(inventory): display all warehouse items on selection and track withdrawal recipient

- Show all available inventory items immediately when selecting a warehouse in withdrawal form - Add vertical scrolling container with max height to prevent layout overflow for large item lists - Add Material column to the inventory rows table for clear item identification - Add required 'delivered_to' recipient field in withdrawal form with frontend validation - Track delivered_to in database, models, schemas, and API - Display recipient badge on withdrawal cards in daily control page - Group daily control withdrawals by inventory ID and recipient
2026-09-28 22:54:02 +03:30
parent 253c922280
commit d85ede7d11
10 changed files with 140 additions and 50 deletions
@@ -1678,7 +1678,7 @@ export const apiV26 = {
      transaction_type: TransactionType; warehouse_id: string; dest_warehouse_id?: string | null;
      material_id: string; brand_id?: string | null; quantity?: number | null;
      physical_qty?: number | null; unit_id?: number | null; specs?: Record<string, string> | null;
-      note?: string | null; transaction_date?: string | null;
+      note?: string | null; delivered_to?: string | null; transaction_date?: string | null;
    }): Promise<InventoryTransaction[]> => {
      return postData<InventoryTransaction[]>(`/inventory/transactions${projectQuery()}`, body);
    },
@@ -163,6 +163,7 @@ export interface InventoryTransaction {
  physical_qty?: number | null;
  transfer_pair_id?: string | null;
  performed_by?: string | null;
+  delivered_to?: string | null;
  transaction_date: string;
  note?: string | null;
  material?: { id: string; name: string } | null;
@@ -62,6 +62,7 @@ export function ChangeInventoryPage() {
  const [dateInput, setDateInput] = useState<string>(() => new Date().toISOString());
  const [specsChips, setSpecsChips] = useState<string[]>([]);
  const [note, setNote] = useState("");
+  const [deliveredTo, setDeliveredTo] = useState("");
  const [rows, setRows] = useState<RowDraft[]>([]);
  const [busy, setBusy] = useState(false);

@@ -86,10 +87,20 @@ export function ChangeInventoryPage() {
  );

  const formRecords = useMemo(() => {
-    const txt = matTxt.trim();
+    const txt = matTxt.trim().toLowerCase();
    const wid = type === "TRANSFER" ? fromId : whId;
    return data.inventory.filter((r) => {
      if (r.warehouse?.id !== wid) return false;
+      if (type === "WITHDRAWAL") {
+        if (r.quantity_number <= 0) return false;
+        if (txt) {
+          const mMatch = r.material.name.toLowerCase().includes(txt);
+          const bMatch = r.brand?.name?.toLowerCase().includes(txt) ?? false;
+          const sMatch = Object.values(r.specs || {}).some((v) => String(v).toLowerCase().includes(txt));
+          if (!mMatch && !bMatch && !sMatch) return false;
+        }
+        return true;
+      }
      if (txt && !r.material.name.includes(txt)) return false;
      return true;
    });
@@ -186,6 +197,7 @@ export function ChangeInventoryPage() {
      setQty("");
      setSpecsChips([]);
      setNote("");
+      setDeliveredTo("");
      await data.refresh();
    } catch (err) {
      toast.error(err instanceof Error ? err.message : "خطا در ثبت");
@@ -235,6 +247,9 @@ export function ChangeInventoryPage() {
  };

  const submitList = async (t: TransactionType) => {
+    if (t === "WITHDRAWAL" && !deliveredTo.trim()) {
+      return toast.error("نام تحویل‌گیرنده اقلام الزامی است");
+    }
    const ops: Record<string, unknown>[] = rows
      .map((r, i): Record<string, unknown> | null => {
        const n = parseNum(r.qty);
@@ -244,7 +259,18 @@ export function ChangeInventoryPage() {
        if (t === "STOCK_COUNT") {
          return { transaction_type: "STOCK_COUNT", warehouse_id: whId, material_id: rec.material.id, brand_id: rec.brand?.id || null, physical_qty: n, note: r.note, transaction_date: toServerIso() };
        }
-        return { transaction_type: t, warehouse_id: whId, material_id: rec.material.id, brand_id: rec.brand?.id || null, quantity: n, unit_id: rec.unit?.id ?? null, specs: rec.specs || {}, note: r.note, transaction_date: toServerIso() };
+        return {
+          transaction_type: t,
+          warehouse_id: whId,
+          material_id: rec.material.id,
+          brand_id: rec.brand?.id || null,
+          quantity: n,
+          unit_id: rec.unit?.id ?? null,
+          specs: rec.specs || {},
+          note: r.note,
+          delivered_to: t === "WITHDRAWAL" ? deliveredTo.trim() : undefined,
+          transaction_date: toServerIso(),
+        };
      })
      .filter((x): x is Record<string, unknown> => x !== null);
    if (!ops.length) return toast.error("هیچ ردیفی پر نشده است");
@@ -370,6 +396,9 @@ export function ChangeInventoryPage() {
    if (type === "PURCHASE") {
      return !!(whId && matTxt.trim() && brandTxt.trim() && unitTxt.trim() && parseNum(qty) > 0 && specsComplete);
    }
+    if (type === "WITHDRAWAL") {
+      return !!(whId && deliveredTo.trim() && rows.some((r) => parseNum(r.qty) > 0));
+    }
    if (type === "TRANSFER") return !!(fromId && toId && matTxt.trim() && rows.some((r) => parseNum(r.qty) > 0));
    if (type === "RETURN") return !!(whId && matTxt.trim() && rows.some((r) => parseNum(r.qty) > 0));
    if (type === "FOUND") {
@@ -486,7 +515,36 @@ export function ChangeInventoryPage() {
                </div>
              </div>

-              {(type === "WITHDRAWAL" || type === "DAMAGE" || type === "WASTE" || type === "LOSS" || type === "STOCK_COUNT" || type === "RETURN" || type === "FOUND") && (
+              {type === "WITHDRAWAL" && (
+                <div className="grid gap-3 sm:grid-cols-2">
+                  <div className="field">
+                    <label className="text-xs font-semibold text-muted">جستجو در متریال‌ها (اختیاری)</label>
+                    <input
+                      list="dl-mat"
+                      className="h-9 w-full rounded-lg border border-line bg-panel px-3 text-xs sm:text-sm"
+                      placeholder="فیلتر بر اساس نام متریال، برند یا مشخصه (خالی = نمایش همه)…"
+                      value={matTxt}
+                      onChange={(e) => { setMatTxt(e.target.value); setRows([]); }}
+                    />
+                    <datalist id="dl-mat">
+                      {data.lookup.materials.map((m) => <option key={m.id} value={m.name} />)}
+                    </datalist>
+                  </div>
+                  <div className="field">
+                    <label className="text-xs font-semibold text-muted">
+                      تحویل به (تحویل‌گیرنده) <span className="text-rose-500 font-bold">*</span>
+                    </label>
+                    <input
+                      className="h-9 w-full rounded-lg border border-line bg-panel px-3 text-xs sm:text-sm"
+                      placeholder="نام فرد، اکیپ یا پیمانکار تحویل‌گیرنده اقلام…"
+                      value={deliveredTo}
+                      onChange={(e) => setDeliveredTo(e.target.value)}
+                    />
+                  </div>
+                </div>
+              )}
+
+              {(type === "DAMAGE" || type === "WASTE" || type === "LOSS" || type === "STOCK_COUNT" || type === "RETURN" || type === "FOUND") && (
                <div className="field">
                  <label className="text-xs font-semibold text-muted">{type === "FOUND" ? "متریال (خالی = همه مفقودی‌ها)" : "متریال *"}</label>
                  <input
@@ -653,10 +711,11 @@ export function ChangeInventoryPage() {
              setRows={setRows}
              records={formRecords}
              unitNameFn={(id) => unitName(data.lookup.units, id)}
+              showMaterial={type === "WITHDRAWAL" || !matTxt.trim()}
              emptyMsg={
                !whId ? "برای نمایش رکوردها، ابتدا انبار را انتخاب کنید."
-                  : !matTxt.trim() ? "نام متریال را تایپ کنید تا همه مدل‌های آن (با برند و مشخصه متفاوت) نمایش داده شود."
-                  : !formRecords.length ? "برای این نام متریال در انبار انتخابی رکوردی وجود ندارد. ابتدا «موجودی اولیه» ثبت کنید."
+                  : (type !== "WITHDRAWAL" && !matTxt.trim()) ? "نام متریال را تایپ کنید تا همه مدل‌های آن (با برند و مشخصه متفاوت) نمایش داده شود."
+                  : !formRecords.length ? (matTxt.trim() ? "برای این عبارت در انبار انتخابی رکوردی یافت نشد." : "هیچ کالای دارای موجودی در این انبار یافت نشد.")
                  : ""
              }
            />
@@ -673,6 +732,7 @@ export function ChangeInventoryPage() {
              setRows={setRows}
              records={formRecords}
              unitNameFn={(id) => unitName(data.lookup.units, id)}
+              showMaterial={!matTxt.trim()}
              emptyMsg={
                !fromId || !toId ? "برای نمایش موجودی‌ها، انبار مبدأ، مقصد و نام متریال را وارد کنید."
                  : !matTxt.trim() ? "نام متریال را تایپ کنید…"
@@ -778,57 +838,69 @@ export function ChangeInventoryPage() {
  );
 }

-function RowTable({ isCount, rows, setRows, records, unitNameFn, emptyMsg }: {
+function RowTable({ isCount, rows, setRows, records, unitNameFn, emptyMsg, showMaterial = true }: {
  isCount: boolean;
  rows: RowDraft[];
  setRows: (r: RowDraft[]) => void;
-  records: { id: string; brand: { id: string; name: string } | null; unit: { id: number; code: string; name_fa: string | null } | null; quantity_number: number; specs: Record<string, string> }[];
+  records: { id: string; material?: { id: string; name: string }; brand: { id: string; name: string } | null; unit: { id: number; code: string; name_fa: string | null } | null; quantity_number: number; specs: Record<string, string> }[];
  unitNameFn: (id: number | null | undefined) => string;
  emptyMsg: string;
+  showMaterial?: boolean;
 }) {
  if (emptyMsg) return <div className="rounded-lg border border-dashed border-line p-4 text-[12.5px] text-muted">{emptyMsg}</div>;
  return (
-    <div className="overflow-x-auto">
-      <table className="w-full text-[12.5px] min-w-[500px]">
-        <thead>
-          <tr className="border-b border-line text-right text-muted">
-            <th className="py-2 pe-3">مشخصه‌ها</th>
-            <th className="py-2 pe-3">برند</th>
-            <th className="py-2 pe-3">واحد</th>
-            <th className="py-2 pe-3">موجودی فعلی</th>
-            <th className="py-2 pe-3">{isCount ? "شمارش‌شده" : "تعداد"}</th>
-            <th className="py-2">یادداشت</th>
-          </tr>
-        </thead>
-        <tbody>
-          {records.map((r, i) => (
-            <tr key={r.id} className="border-b border-line/50">
-              <td className="py-2 pe-3 text-muted">{Object.entries(r.specs || {}).map(([k, v]) => `${k}: ${v}`).join(" · ") || "—"}</td>
-              <td className="py-2 pe-3">{r.brand?.name || "—"}</td>
-              <td className="py-2 pe-3">{unitNameFn(r.unit?.id)}</td>
-              <td className="py-2 pe-3 font-bold">{faNum(r.quantity_number)}</td>
-              <td className="py-2 pe-3">
-                <input
-                  inputMode="decimal"
-                  className="h-8 w-24 rounded-lg border border-line bg-panel px-2 text-sm ltr"
-                  placeholder={isCount ? "شمارش‌شده" : "۰"}
-                  value={isCount && rows[i]?.qty === "" ? String(r.quantity_number) : (rows[i]?.qty || "")}
-                  onChange={(e) => setRows(rows.map((x, xi) => (xi === i ? { ...x, qty: e.target.value } : x)))}
-                />
-              </td>
-              <td className="py-2">
-                <input
-                  className="h-8 w-32 rounded-lg border border-line bg-panel px-2 text-sm"
-                  placeholder="توضیح (اختیاری)"
-                  value={rows[i]?.note || ""}
-                  onChange={(e) => setRows(rows.map((x, xi) => (xi === i ? { ...x, note: e.target.value } : x)))}
-                />
-              </td>
+    <div>
+      <div className="overflow-x-auto max-h-[420px] overflow-y-auto border border-line rounded-lg">
+        <table className="w-full text-[12.5px] min-w-[560px]">
+          <thead className="sticky top-0 bg-panel z-10 shadow-2xs border-b border-line">
+            <tr className="text-right text-muted">
+              {showMaterial && <th className="py-2.5 px-3">متریال</th>}
+              <th className="py-2.5 px-3">مشخصه‌ها</th>
+              <th className="py-2.5 px-3">برند</th>
+              <th className="py-2.5 px-3">واحد</th>
+              <th className="py-2.5 px-3">موجودی فعلی</th>
+              <th className="py-2.5 px-3">{isCount ? "شمارش‌شده" : "تعداد"}</th>
+              <th className="py-2.5 px-3">یادداشت</th>
            </tr>
-          ))}
-        </tbody>
-      </table>
-      <div className="mt-2 text-[11px] text-muted">ستون «موجودی فعلی» مقدار موجود هر رکورد است. برای هر ردیف تعداد و یادداشت وارد کنید.</div>
+          </thead>
+          <tbody className="divide-y divide-line/40">
+            {records.map((r, i) => (
+              <tr key={r.id} className="hover:bg-bg/40 transition-colors">
+                {showMaterial && (
+                  <td className="py-2 px-3 font-bold text-ink">
+                    {r.material?.name || "—"}
+                  </td>
+                )}
+                <td className="py-2 px-3 text-muted">{Object.entries(r.specs || {}).map(([k, v]) => `${k}: ${v}`).join(" · ") || "—"}</td>
+                <td className="py-2 px-3">{r.brand?.name || "—"}</td>
+                <td className="py-2 px-3">{unitNameFn(r.unit?.id)}</td>
+                <td className="py-2 px-3 font-bold text-ink">{faNum(r.quantity_number)}</td>
+                <td className="py-2 px-3">
+                  <input
+                    inputMode="decimal"
+                    className="h-8 w-24 rounded-lg border border-line bg-panel px-2 text-sm ltr focus:border-accent"
+                    placeholder={isCount ? "شمارش‌شده" : "۰"}
+                    value={isCount && rows[i]?.qty === "" ? String(r.quantity_number) : (rows[i]?.qty || "")}
+                    onChange={(e) => setRows(rows.map((x, xi) => (xi === i ? { ...x, qty: e.target.value } : x)))}
+                  />
+                </td>
+                <td className="py-2 px-3">
+                  <input
+                    className="h-8 w-32 rounded-lg border border-line bg-panel px-2 text-sm focus:border-accent"
+                    placeholder="توضیح (اختیاری)"
+                    value={rows[i]?.note || ""}
+                    onChange={(e) => setRows(rows.map((x, xi) => (xi === i ? { ...x, note: e.target.value } : x)))}
+                  />
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+      <div className="mt-2 flex items-center justify-between text-[11px] text-muted">
+        <span>ستون «موجودی فعلی» مقدار موجود هر رکورد است. برای هر ردیف تعداد و یادداشت وارد کنید.</span>
+        <span>{faNum(records.length)} قلم کالا</span>
+      </div>
    </div>
  );
 }
@@ -129,9 +129,10 @@ export function DailyControlPage() {
  const wGroups = useMemo(() => {
    const gmap = new Map<string, { recId: string; q: number; last: string; tx: InventoryTransaction }>();
    withdrawals.forEach((t) => {
-      const g = gmap.get(t.inventory_id);
+      const gKey = `${t.inventory_id}__${t.delivered_to || ""}`;
+      const g = gmap.get(gKey);
      if (!g) {
-        gmap.set(t.inventory_id, { recId: t.inventory_id, q: Math.abs(t.quantity_number || 0), last: t.transaction_date, tx: t });
+        gmap.set(gKey, { recId: gKey, q: Math.abs(t.quantity_number || 0), last: t.transaction_date, tx: t });
      } else {
        g.q += Math.abs(t.quantity_number || 0);
        if (t.transaction_date > g.last) g.last = t.transaction_date;
@@ -324,6 +325,12 @@ export function DailyControlPage() {
                            whName(data.warehouses, g.tx.warehouse_id)
                          ].filter(Boolean).join(" · ")}
                        </span>
+                        {g.tx.delivered_to && (
+                          <span className="inline-flex items-center gap-1 mt-1.5 text-[11px] font-semibold text-blue-700 bg-blue-50/80 border border-blue-200/60 rounded px-1.5 py-0.5 w-fit">
+                            <span className="text-slate-500 font-normal">تحویل به:</span>
+                            <span>{g.tx.delivered_to}</span>
+                          </span>
+                        )}
                      </span>
                      <span className="text-xs font-bold text-rose-600 tabular-nums">
                        {faNum(g.q)} {unitName(data.lookup.units, g.tx.unit?.id)}