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

frontend/src/pages/Dashboard/EditModal.tsx

@@ -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>

frontend/src/pages/Suppliers/SupplierDetailPage.tsx

@@ -1,11 +1,12 @@
 import { useEffect, useMemo, useState } from "react";
 import { Link, useParams } from "react-router-dom";
-import { MapPin, Phone, User, Plus, Package, X } from "lucide-react";
+import { MapPin, Phone, User, Plus, Package, X, Clock } from "lucide-react";
 import { toast } from "sonner";
 import { useMaterials, useQuotes, useStoreData, useSuppliers } from "../../hooks";
 import { topicByName } from "../../lib/topics";
 import { useAppStore } from "../../store";
 import { api } from "../../lib/api";
+import { daysBetween } from "../../lib/formatters";
 import { Header, PageLayout } from "../../components/layout/Header";
 import { EmptyState } from "../../components/EmptyState";
 import { Badge } from "../../components/ui/badge";
@@ -29,6 +30,19 @@ export function SupplierDetailPage() {
   const [linked, setLinked] = useState<string[]>([]);
   const [busy, setBusy] = useState(false);
 
+  // محاسبه میانگین زمان تحویل این تأمین‌کننده بر اساس خریدهای تحویل‌شده
+  const avgLeadTime = useMemo(() => {
+    if (!s?.id) return null;
+    const supQuotes = quotes.filter(
+      (q) => q.supplier_id === s.id && q.status === "arrived" && q.accepted_date && q.arrived_date
+    );
+    const times = supQuotes
+      .map((q) => daysBetween(q.arrived_date, q.accepted_date))
+      .filter((x): x is number => x != null);
+
+    return times.length ? Math.round(times.reduce((a, b) => a + b, 0) / times.length) : null;
+  }, [quotes, s?.id]);
+
   useEffect(() => {
     if (!id) return;
     let alive = true;
@@ -116,10 +130,19 @@ export function SupplierDetailPage() {
       <Header title="اطلاعات تماس تأمین‌کننده" sub={breadcrumb} backTo="/suppliers" backLabel="تأمین‌کننده‌ها" />
       <PageLayout>
         <div className="max-w-xl rounded-xl border border-line bg-panel p-5 shadow-sm">
-          <div className="flex items-center gap-3">
-            <div className="text-xl font-extrabold">{s.name}</div>
-            <Badge variant="outline">{topicName}</Badge>
+          <div className="flex items-center justify-between gap-3">
+            <div className="flex items-center gap-3">
+              <div className="text-xl font-extrabold">{s.name}</div>
+              <Badge variant="outline">{topicName}</Badge>
+            </div>
+            {avgLeadTime != null && (
+              <span className="inline-flex items-center gap-1.5 rounded-md border border-emerald-800/60 bg-emerald-950 px-2.5 py-1 text-xs font-semibold text-emerald-400">
+                <Clock className="h-3.5 w-3.5 text-emerald-400" />
+                <span>{avgLeadTime} روز</span>
+              </span>
+            )}
           </div>
+
           <div className="mt-3 flex flex-col gap-1.5 text-[13.5px]">
             <span>
               <MapPin className="me-1.5 inline h-4 w-4 text-muted" /> <b>موقعیت:</b> {s.location || "—"}
@@ -130,7 +153,12 @@ export function SupplierDetailPage() {
             <span>
               <User className="me-1.5 inline h-4 w-4 text-muted" /> <b>شخص رابط:</b> {s.contact || "—"}
             </span>
+            <span>
+              <Clock className="me-1.5 inline h-4 w-4 text-muted" /> <b>میانگین زمان تحویل:</b>{" "}
+              {avgLeadTime != null ? `${avgLeadTime} روز` : "—"}
+            </span>
           </div>
+
           <div className="mt-4 flex items-center gap-2">
             <Link
               to={`/wizard?topic=${encodeURIComponent(topicName)}&supplier=${encodeURIComponent(s.id)}`}
@@ -208,4 +236,4 @@ export function SupplierDetailPage() {
       </PageLayout>
     </div>
   );
-}
+}

frontend/src/pages/Suppliers/supplierUtils.tsx

@@ -29,7 +29,11 @@ export function SupplierCard({
   return (
     <div className="sup-card">
       <div className="sc-head flex items-start justify-between gap-2">
-        <Link to={`/suppliers/${s.id}`} className="sc-name-link min-w-0 flex-1 leading-snug">
+        {/* فقط متن نام تأمین‌کننده لینک است و به کل کارت گسترش پیدا نمی‌کند */}
+        <Link
+          to={`/suppliers/${s.id}`}
+          className="min-w-0 flex-1 text-sm font-bold text-primary hover:text-accent hover:underline active:opacity-70 leading-snug py-0.5"
+        >
           {s.name}
         </Link>
         <div className="flex items-center gap-1.5 shrink-0">