feat: add lead time badge, refine mobile supplier click, and integrate termsheet cards in edit modal

2026-09-21 19:26:52 +03:30
parent d69ec7f7a9
commit 9386d4846f
3 changed files with 129 additions and 134 deletions
@@ -23,7 +23,7 @@ import { JalaliDatePicker } from "../../components/JalaliDatePicker";
 import { NumberInput } from "../../components/NumberInput";
 import { MultiSelectCombobox } from "../../components/MultiSelectCombobox";
 import { FileList } from "../../components/FileList";
-import { MilestoneRow } from "../../components/MilestoneRow";
+import { TermsheetCard } from "../../components/TermsheetCard";
 import { Button } from "../../components/ui/button";
 import {
  Dialog,
@@ -153,8 +153,6 @@ export function EditModal({ quoteId, onClose }: EditModalProps) {
        return {
          key: li.id,
          origLi: li,
-          // «متریال» این ردیف = نامِ خودِ متریال (v2.7: متریال دسته ندارد؛
-          // دسته روی تأمین‌کننده است و دیگر برچسبِ این فیلد نیست)
          cat: m.name || "",
          brand: m.brand || "",
          specs: materialSpecs(m),
@@ -196,22 +194,59 @@ export function EditModal({ quoteId, onClose }: EditModalProps) {
    };
  }, [quoteId]);

-  if (!q || !ready) return null;
+  // لیست اقلام برای ارسال به TermsheetCard (دقیقاً مشابه ویزارد)
+  const itemOptions = useMemo(() => {
+    return itemRows
+      .filter((r) => !r.rejected || r.restore)
+      .map((r, idx) => ({
+        tempId: r.key,
+        label: `${faNum(idx + 1)}. ${r.cat || "قلم جدید"}${r.brand ? ` • ${r.brand}` : ""}`,
+      }));
+  }, [itemRows]);

-  const tsLabel = (card: EditTsCard, idx: number) => {
-    const orig = q.termsheets.find((t) => t.id === card.domId);
-    return orig?.label || `گزینه ${faNum(idx + 1)}`;
+  // محاسبه اقلام تحت پوشش هر کارت شرایط پرداخت
+  const getCoveredIds = (card: EditTsCard) => {
+    const cardId = card.domId || card.key;
+    const explicit = itemRows
+      .filter((r) => (!r.rejected || r.restore) && r.tsDomIds.includes(cardId))
+      .map((r) => r.key);
+
+    if (!explicit.length && tsCards[0]?.key === card.key) {
+      return itemRows.filter((r) => !r.rejected || r.restore).map((r) => r.key);
+    }
+    return explicit;
  };

+  // تغییر اقلام تحت پوشش یک کارت شرایط پرداخت
+  const handleCoverageChange = (cardKey: string, newCoveredKeys: string[]) => {
+    const card = tsCards.find((c) => c.key === cardKey);
+    const cardId = card?.domId || cardKey;
+    setItemRows((rows) =>
+      rows.map((row) => {
+        const shouldHave = newCoveredKeys.includes(row.key);
+        const exists = row.tsDomIds.includes(cardId);
+        if (shouldHave === exists) return row;
+        const nextTsDomIds = shouldHave
+          ? [...row.tsDomIds, cardId]
+          : row.tsDomIds.filter((id) => id !== cardId);
+        return { ...row, tsDomIds: nextTsDomIds };
+      }),
+    );
+  };
+
+  if (!q || !ready) return null;
+
  const patchItem = (key: string, patch: Partial<EditItemRow>) => {
    setItemRows((rows) => rows.map((r) => (r.key === key ? { ...r, ...patch } : r)));
  };

  const addItemRow = () => {
+    const newKey = "new-" + Math.random().toString(36).slice(2, 9);
+    const defaultTsId = tsCards[0] ? tsCards[0].domId || tsCards[0].key : "";
    setItemRows((rows) => [
      ...rows,
      {
-        key: "new-" + Math.random().toString(36).slice(2, 9),
+        key: newKey,
        cat: "",
        brand: "",
        specs: [],
@@ -219,7 +254,7 @@ export function EditModal({ quoteId, onClose }: EditModalProps) {
        unit: "",
        price: null,
        total: null,
-        tsDomIds: tsCards[0] ? [tsCards[0].domId || tsCards[0].key] : [],
+        tsDomIds: defaultTsId ? [defaultTsId] : [],
        acceptedTsId: null,
        rejected: false,
        restore: true,
@@ -234,12 +269,28 @@ export function EditModal({ quoteId, onClose }: EditModalProps) {
  const addTsCard = () => {
    setTsCards((cards) => [
      ...cards,
-      { key: "new-" + Math.random().toString(36).slice(2, 9), domId: "", milestones: [{ when_iso: null, amount: null }] },
+      {
+        key: "new-ts-" + Date.now() + Math.random().toString(36).slice(2, 6),
+        domId: "",
+        milestones: [{ when_iso: null, amount: null }],
+      },
    ]);
  };

  const removeTsCard = (key: string) => {
+    if (tsCards.length <= 1) {
+      toast.error("حداقل یک روش شرایط پرداخت باید وجود داشته باشد.");
+      return;
+    }
    setTsCards((cards) => cards.filter((c) => c.key !== key));
+    const card = tsCards.find((c) => c.key === key);
+    const cardId = card?.domId || key;
+    setItemRows((rows) =>
+      rows.map((r) => ({
+        ...r,
+        tsDomIds: r.tsDomIds.filter((id) => id !== cardId && id !== key),
+      })),
+    );
  };

  const confirm = async () => {
@@ -276,6 +327,7 @@ export function EditModal({ quoteId, onClose }: EditModalProps) {
          ? domId
          : nextDashedId("ts", newTermsheets.length ? newTermsheets : next.termsheets);
      tsIdMap[domId] = realId;
+      tsIdMap[card.key] = realId;
      const orig = next.termsheets.find((t) => t.id === realId);
      const label = orig?.label || `گزینه ${faNum(i + 1)}`;
      const st = orig?.status || "offered";
@@ -295,7 +347,6 @@ export function EditModal({ quoteId, onClose }: EditModalProps) {
      const total = row.total;
      if (!cat && !brand && qty == null && price == null) continue;

-      // هویت متریال = نام + برند + مشخصه (دیگر دسته‌ای برای تطبیق وجود ندارد)
      let material = matchMaterial(materialsCopy, cat, brand, specs);
      let materialId: string;
      if (material) {
@@ -322,7 +373,7 @@ export function EditModal({ quoteId, onClose }: EditModalProps) {
      if (!rejected) {
        row.tsDomIds.forEach((domId) => {
          const realId = tsIdMap[domId] || domId;
-          if (realId) termsheet_ids.push(realId);
+          if (realId && !termsheet_ids.includes(realId)) termsheet_ids.push(realId);
        });
        if (!termsheet_ids.length && next.termsheets.length) {
          termsheet_ids.push(next.termsheets[0].id);
@@ -359,7 +410,7 @@ export function EditModal({ quoteId, onClose }: EditModalProps) {

    const referencedTs = new Set<string>();
    next.line_items.forEach((li) => (li.termsheet_ids || []).forEach((tid) => referencedTs.add(tid)));
-    next.termsheets = next.termsheets.filter((t) => referencedTs.has(t.id));
+    next.termsheets = next.termsheets.filter((t, idx) => referencedTs.has(t.id) || idx === 0);
    next.line_items.forEach((li) => {
      if (li.accepted_ts_id && !next.termsheets.some((t) => t.id === li.accepted_ts_id)) {
        li.accepted_ts_id = null;
@@ -406,7 +457,7 @@ export function EditModal({ quoteId, onClose }: EditModalProps) {
    <>
      <Dialog open={!!quoteId} onOpenChange={(o) => !o && onClose()}>
        <DialogContent className="flex h-[88vh] max-h-[850px] w-[95vw] max-w-3xl flex-col p-0 overflow-hidden rounded-2xl border border-gray-200 bg-white text-gray-900 shadow-2xl">
-          {/* هدر سفید و تمیز */}
+          {/* هدر */}
          <DialogHeader className="border-b border-gray-100 bg-white px-4 py-3 sm:px-6 sm:py-4 shrink-0 text-right">
            <DialogTitle className="text-base font-bold text-gray-900 sm:text-lg">ویرایش پیشنهاد خرید</DialogTitle>
            <div className="text-[12px] text-gray-500 truncate mt-0.5">
@@ -421,7 +472,7 @@ export function EditModal({ quoteId, onClose }: EditModalProps) {
            </div>
          )}

-          {/* تب‌بار سفید و استاندارد */}
+          {/* تب‌بار */}
          <div className="flex items-center border-b border-gray-100 bg-gray-50/70 px-3 py-2 sm:px-6 gap-2 shrink-0">
            <button
              type="button"
@@ -492,12 +543,11 @@ export function EditModal({ quoteId, onClose }: EditModalProps) {
            </button>
          </div>

-          {/* محتوای مودال — پس‌زمینه کاملاً سفید */}
+          {/* محتوا */}
          <div className="flex-1 overflow-y-auto p-3.5 sm:p-5 space-y-4 bg-white text-gray-800">
-            {/* تب ۱: اقلام و مشخصات */}
+            {/* تب ۱: اقلام */}
            {activeTab === "items" && (
              <div className="space-y-4">
-                {/* کارت تأمین‌کننده و پروژه */}
                <div className="rounded-xl border border-gray-200 bg-gray-50/50 p-3.5 sm:p-4 space-y-3">
                  <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
                    <div className="flex min-w-0 flex-col gap-1">
@@ -536,7 +586,7 @@ export function EditModal({ quoteId, onClose }: EditModalProps) {
                  </div>
                </div>

-                {/* لیست اقلام */}
+                {/* لیست اقلام — بدون چک‌باکس‌های شلوغ شرایط پرداخت */}
                <div className="space-y-3">
                  <div className="flex items-center justify-between">
                    <span className="text-xs font-bold text-gray-800">اقلام سفارش ({faNum(itemRows.length)})</span>
@@ -621,7 +671,6 @@ export function EditModal({ quoteId, onClose }: EditModalProps) {
                          </div>
                        </div>

-                        {/* جعبه ۳ عددی مقادیر */}
                        <div className="grid grid-cols-3 gap-2 rounded-lg bg-gray-50 p-2.5 border border-gray-200">
                          <div className="flex flex-col gap-1">
                            <label className="text-[10.5px] font-semibold text-gray-600">تعداد</label>
@@ -671,9 +720,8 @@ export function EditModal({ quoteId, onClose }: EditModalProps) {
                          </div>
                        </div>

-                        {/* شرایط پرداخت برای این قلم */}
-                        <div className="pt-2 border-t border-gray-100">
-                          {row.rejected ? (
+                        {row.rejected && (
+                          <div className="pt-2 border-t border-gray-100">
                            <label className="inline-flex items-center gap-1.5 text-xs font-semibold text-blue-600 cursor-pointer">
                              <input
                                type="checkbox"
@@ -683,44 +731,8 @@ export function EditModal({ quoteId, onClose }: EditModalProps) {
                              />
                              بازگرداندن این قلم به معامله
                            </label>
-                          ) : (
-                            <div className="flex flex-col gap-1.5">
-                              <span className="text-[10.5px] font-semibold text-gray-500">شرایط پرداخت مرتبط:</span>
-                              <div className="flex flex-wrap gap-1.5">
-                                {tsCards.map((card, cIdx) => {
-                                  const isSelected = row.tsDomIds.includes(card.domId || card.key);
-                                  return (
-                                    <label
-                                      key={card.key}
-                                      className={cn(
-                                        "inline-flex items-center gap-1 rounded-md border px-2 py-0.5 text-xs cursor-pointer select-none transition-colors",
-                                        isSelected
-                                          ? "border-blue-500 bg-blue-50 font-semibold text-blue-700"
-                                          : "border-gray-200 bg-white text-gray-600 hover:text-gray-900",
-                                        hasReceipts && "cursor-not-allowed opacity-60",
-                                      )}
-                                    >
-                                      <input
-                                        type="checkbox"
-                                        disabled={hasReceipts}
-                                        className="accent-blue-600 h-3.5 w-3.5 rounded"
-                                        checked={isSelected}
-                                        onChange={(e) => {
-                                          const next = new Set(row.tsDomIds);
-                                          const domId = card.domId || card.key;
-                                          if (e.target.checked) next.add(domId);
-                                          else next.delete(domId);
-                                          patchItem(row.key, { tsDomIds: [...next] });
-                                        }}
-                                      />
-                                      <span>{tsLabel(card, cIdx)}</span>
-                                    </label>
-                                  );
-                                })}
-                              </div>
-                            </div>
-                          )}
-                        </div>
+                          </div>
+                        )}
                      </div>
                    </div>
                  ))}
@@ -741,11 +753,16 @@ export function EditModal({ quoteId, onClose }: EditModalProps) {
              </div>
            )}

-            {/* تب ۲: شرایط پرداخت */}
+            {/* تب ۲: شرایط پرداخت با قالب TermsheetCard ویزارد */}
            {activeTab === "terms" && (
              <div className="space-y-3.5">
                <div className="flex items-center justify-between">
-                  <div className="text-xs font-bold text-gray-800">گزینه‌های شرایط پرداخت</div>
+                  <div>
+                    <div className="text-xs font-bold text-gray-800">گزینه‌های شرایط پرداخت</div>
+                    <div className="text-[11.5px] text-gray-500 mt-0.5">
+                      روش‌های پرداخت و اقلام تحت پوشش هر کدام را در کارت خودش مشخص کنید.
+                    </div>
+                  </div>
                  {!hasReceipts && (
                    <Button
                      type="button"
@@ -762,70 +779,16 @@ export function EditModal({ quoteId, onClose }: EditModalProps) {

                <div className="flex flex-col gap-3">
                  {tsCards.map((card, idx) => (
-                    <div
+                    <TermsheetCard
                      key={card.key}
-                      className="rounded-xl border border-gray-200 bg-white p-3.5 sm:p-4 shadow-xs"
-                    >
-                      <div className="flex items-center justify-between border-b border-gray-100 pb-2 mb-2.5">
-                        <div className="flex items-center gap-1.5">
-                          <span className="flex h-5 w-5 items-center justify-center rounded-full bg-blue-50 text-[11px] font-bold text-blue-600">
-                            {faNum(idx + 1)}
-                          </span>
-                          <span className="text-xs font-bold text-gray-900">{tsLabel(card, idx)}</span>
-                          <span className="text-[11px] text-gray-500 font-medium">
-                            ({faNum(card.milestones.length)} مرحله)
-                          </span>
-                        </div>
-                        {!hasReceipts && tsCards.length > 1 && (
-                          <button
-                            type="button"
-                            className="inline-flex items-center gap-1 rounded-md px-2 py-0.5 text-xs text-red-600 hover:bg-red-50 transition-colors"
-                            title="حذف گزینه"
-                            onClick={() => removeTsCard(card.key)}
-                          >
-                            <Trash2 className="h-3.5 w-3.5" />
-                            <span className="text-[11px]">حذف</span>
-                          </button>
-                        )}
-                      </div>
-
-                      <div className="flex flex-col gap-2 mb-3">
-                        {card.milestones.map((ms, i) => (
-                          <MilestoneRow
-                            key={i}
-                            milestone={ms}
-                            disabled={hasReceipts}
-                            onChange={(nextMs) =>
-                              updateTs(card.key, {
-                                milestones: card.milestones.map((x, j) => (j === i ? nextMs : x)),
-                              })
-                            }
-                            onRemove={() =>
-                              updateTs(card.key, {
-                                milestones: card.milestones.filter((_, j) => j !== i),
-                              })
-                            }
-                          />
-                        ))}
-                      </div>
-
-                      {!hasReceipts && (
-                        <Button
-                          type="button"
-                          variant="line"
-                          size="sm"
-                          className="w-full sm:w-auto text-xs text-gray-700"
-                          onClick={() =>
-                            updateTs(card.key, {
-                              milestones: [...card.milestones, { when_iso: null, amount: null }],
-                            })
-                          }
-                        >
-                          <Plus className="h-3.5 w-3.5 me-1" />
-                          افزودن مرحله پرداخت
-                        </Button>
-                      )}
-                    </div>
+                      index={idx + 1}
+                      milestones={card.milestones}
+                      onMilestonesChange={(ms) => updateTs(card.key, { milestones: ms })}
+                      items={itemOptions}
+                      coveredIds={getCoveredIds(card)}
+                      onCoverageChange={(ids) => handleCoverageChange(card.key, ids)}
+                      onRemove={() => removeTsCard(card.key)}
+                    />
                  ))}
                </div>
              </div>
@@ -895,7 +858,7 @@ export function EditModal({ quoteId, onClose }: EditModalProps) {
            )}
          </div>

-          {/* فوتر سفید، محکم و چسبان */}
+          {/* فوتر */}
          <DialogFooter className="border-t border-gray-200 bg-white px-4 py-2.5 sm:px-6 sm:py-3 shrink-0 flex flex-row items-center justify-between gap-2">
            {q.status === "offered" ? (
              <Button
@@ -924,7 +887,7 @@ export function EditModal({ quoteId, onClose }: EditModalProps) {
        </DialogContent>
      </Dialog>

-      {/* مودال تایید حذف سفید */}
+      {/* مودال تایید حذف */}
      <Dialog open={showDeleteConfirm} onOpenChange={(open) => !deleting && setShowDeleteConfirm(open)}>
        <DialogContent className="z-[60] max-w-md p-4 sm:p-6 bg-white border border-gray-200 text-gray-900">
          <DialogHeader>