Merge prod_v2 (AcceptModal/MilestoneRow layout) into integration

Conflicts resolved keeping the hardened/current side: - docker-compose.yml: kept new-one's db-backup service, hardened env (ENVIRONMENT/DEV_LOGIN/CORS/issuer var) and build args; prod_v2's 8083/8085 dev port remaps dropped as they conflict with the hardened Casdoor issuer expectation. - AcceptModal.tsx: kept the per-item target_project model (43ff048) over prod_v2's older projUnion candidate-project logic, kept the authenticated file upload/download blocks, and adopted prod_v2's sticky footer.
2026-09-19 18:36:08 +03:30
parent ca55192311 b5dc3e585a
commit 08ec341c52
2 changed files with 234 additions and 161 deletions
@@ -12,15 +12,19 @@ export interface MilestoneRowProps {
 // یک ردیف مرحله‌ی پرداخت: تاریخ + مبلغ + دکمه‌ی حذف
 export function MilestoneRow({ milestone, onChange, onRemove, disabled = false }: MilestoneRowProps) {
  return (
-    <div className="milestone-row">
-      <JalaliDatePicker
-        value={milestone.when_iso}
-        onChange={(iso) => onChange({ ...milestone, when_iso: iso })}
-        placeholder="تاریخ"
-        className="w-36 shrink-0"
-        disabled={disabled}
-      />
-      <div className="ms-amount-wrap">
+    <div className="flex items-start gap-3 w-full my-2">
+      {/* کادر انتخاب تاریخ */}
+      <div className="w-36 shrink-0">
+        <JalaliDatePicker
+          value={milestone.when_iso}
+          onChange={(iso) => onChange({ ...milestone, when_iso: iso })}
+          placeholder="تاریخ"
+          disabled={disabled}
+        />
+      </div>
+
+      {/* کادر ورود مبلغ و حروف زیر آن */}
+      <div className="flex-1 min-w-0">
        <NumberInput
          value={milestone.amount}
          onChange={(amount) => onChange({ ...milestone, amount })}
@@ -29,11 +33,18 @@ export function MilestoneRow({ milestone, onChange, onRemove, disabled = false }
          disabled={disabled}
        />
      </div>
+
+      {/* دکمه حذف */}
      {!disabled && (
-        <button type="button" className="ms-x" title="حذف" onClick={onRemove}>
+        <button
+          type="button"
+          className="mt-2 text-red-500 hover:text-red-700 text-lg font-bold shrink-0 px-1 transition-colors"
+          title="حذف"
+          onClick={onRemove}
+        >
          ×
        </button>
      )}
    </div>
  );
-}
+}
@@ -36,7 +36,6 @@ export interface AcceptModalProps {
  onClose: () => void;
 }

-// مودال پذیرش: انتخاب/ویرایش شرایط پرداخت + تخصیص قلم‌ها + فاکتورها
 export function AcceptModal({ quoteId, onClose }: AcceptModalProps) {
  const quotes = useQuotes();
  const suppliers = useSuppliers();
@@ -51,13 +50,10 @@ export function AcceptModal({ quoteId, onClose }: AcceptModalProps) {
  const [proformas, setProformas] = useState<Attachment[]>([]);
  const [removedItems, setRemovedItems] = useState<Set<string>>(new Set());
  const [assignments, setAssignments] = useState<Record<string, string>>({});
-  // تخصیص هر قلم به پروژه‌ها (نام‌ها)
  const [itemProjectsSel, setItemProjectsSel] = useState<Record<string, string>>({});
-  // تاریخ و زمان پذیرش — پیش‌فرض الان
  const [acceptDate, setAcceptDate] = useState<string | null>(() => new Date().toISOString());
  const [ready, setReady] = useState(false);

-  // وقتی quote باز شد، state اولیه را بساز
  useMemo(() => {
    if (!q) return;
    const offered = q.termsheets.filter((t) => t.status === "offered");
@@ -70,7 +66,6 @@ export function AcceptModal({ quoteId, onClose }: AcceptModalProps) {
    });
    setRemovedItems(rem);
    setAssignments({});
-    // پروژه‌ی هر قلم — تخصیصِ تکی: از تخصیص قبلی قلم، وگرنه اولین پروژه‌ی پیشنهاد
    const projSel: Record<string, string> = {};
    q.line_items.forEach((li) => {
      const names = (li.projects || []).map((p) => p.name).filter(Boolean);
@@ -86,7 +81,6 @@ export function AcceptModal({ quoteId, onClose }: AcceptModalProps) {
    setReady(true);
  }, [q]);

-  // پیوست‌ها مستقیماً از سرور (MinIO) خوانده می‌شوند — نه از state محلی
  useEffect(() => {
    if (!quoteId) return;
    let alive = true;
@@ -109,7 +103,6 @@ export function AcceptModal({ quoteId, onClose }: AcceptModalProps) {
  const allItems = q.line_items || [];
  const active = activeItems(q);

-  // گزینه‌های پروژه — پروژه‌های ثبت‌شده + پروژه‌های این پیشنهاد + تخصیص‌های قبلی قلم‌ها
  const projectOptions = (() => {
    const set = new Set<string>();
    projects.forEach((p) => p.name && set.add(p.name));
@@ -147,10 +140,8 @@ export function AcceptModal({ quoteId, onClose }: AcceptModalProps) {
  const confirm = () => {
    if (!q) return;

-    // پچ نهایی — همه‌ی تغییرات روی همین کلون اعمال می‌شود (نه روی آبجکت store)
    const next: Quote = JSON.parse(JSON.stringify(q));

-    // فقط کارت‌هایی با حداقل یک مرحله‌ی پرداخت
    const cardMeta = new Map<string, { milestones: Milestone[]; label: string; existing: Quote["termsheets"][number] | undefined }>();
    cards.forEach((c, idx) => {
      const milestones = c.milestones.filter((m) => m.when_iso || m.amount != null);
@@ -164,11 +155,10 @@ export function AcceptModal({ quoteId, onClose }: AcceptModalProps) {
    });

    if (!cardMeta.size) {
-      toast.error("حداقل یک conditions با حداقل یک مرحله پرداخت لازم است.");
+      toast.error("حداقل یک شرایط پرداخت با حداقل یک مرحله پرداخت لازم است.");
      return;
    }

-    // رد کردن قلم‌ها — در داده می‌مانند تا با بازگشت وضعیت برگردند
    next.line_items.forEach((li) => {
      if (removedItems.has(li.id)) li.rejected = true;
    });
@@ -178,7 +168,6 @@ export function AcceptModal({ quoteId, onClose }: AcceptModalProps) {
      return;
    }

-    // فقط termsheetهایی که حداقل یک قلم انتخاب کرده پذیرفته می‌شوند
    const fallbackDom = [...cardMeta.keys()][0];
    const chosenDomIds = new Set<string>();
    active.forEach((li) => {
@@ -200,7 +189,6 @@ export function AcceptModal({ quoteId, onClose }: AcceptModalProps) {
      }
    });

-    // قلم‌ها: اتصال‌های offered حفظ می‌شوند + جفت پذیرفته‌شده ثبت می‌شود
    active.forEach((li) => {
      const dom = assignments[li.id] || fallbackDom;
      const finalId = domToFinal[dom];
@@ -210,7 +198,6 @@ export function AcceptModal({ quoteId, onClose }: AcceptModalProps) {
      li.accepted_ts_id = finalId || null;
    });

-    // termsheet پذیرفته‌شده‌ای که هیچ قلمی انتخابش نکرده → برمی‌گردد به offered
    const usedIds = new Set<string>();
    active.forEach((li) => {
      if (li.accepted_ts_id) usedIds.add(li.accepted_ts_id);
@@ -242,147 +229,215 @@ export function AcceptModal({ quoteId, onClose }: AcceptModalProps) {

  return (
    <Dialog open={!!quoteId} onOpenChange={(o) => !o && onClose()}>
-      <DialogContent className="max-w-2xl">
-        <DialogHeader>
-          <DialogTitle>پذیرش پیشنهاد — {sup.name}</DialogTitle>
-        </DialogHeader>
+      <DialogContent className="max-w-3xl p-0 gap-0 overflow-hidden bg-slate-50 border-none shadow-2xl rounded-xl">
+        <div className="flex flex-col max-h-[85vh] w-full">
+          
+          {/* هدر ثابت و هم‌تراز */}
+          <div className="px-6 py-4 bg-white border-b border-line shrink-0 z-10 text-right">
+            <DialogHeader className="p-0 text-right">
+              <DialogTitle className="text-right text-lg font-bold text-slate-800">
+                پذیرش پیشنهاد — {sup.name}
+              </DialogTitle>
+            </DialogHeader>
+            <p className="text-[13px] text-muted mt-1 text-right">
+              شرایط پرداخت را ویرایش کنید. سپس هر قلم را به بخش و پروژه دلخواه تخصیص دهید.
+            </p>
+          </div>

-        <div className="text-[12px] text-muted">
-          شرایط پرداخت را انتخاب یا ویرایش کنید. سپس هر قلم را به conditions دلخواه تخصیص دهید.
-        </div>
-
-        {/* کارت‌های termsheet */}
-        <div className="flex flex-col gap-2">
-          {cards.map((c, idx) => (
-            <div key={c.domId} className="modal-variant">
-              <div className="modal-variant-head">
-                <span className="variant-num">{cardLabel(c, idx)}</span>
-                <button type="button" className="variant-x" title="حذف" onClick={() => removeCard(c.domId)}>
-                  ×
-                </button>
-              </div>
-              <div className="flex flex-col gap-1.5">
-                {c.milestones.map((m, i) => (
-                  <MilestoneRow
-                    key={i}
-                    milestone={m}
-                    onChange={(nextM) => {
-                      const ms = [...c.milestones];
-                      ms[i] = nextM;
-                      updateCard(c.domId, { milestones: ms });
-                    }}
-                    onRemove={() => updateCard(c.domId, { milestones: c.milestones.filter((_, j) => j !== i) })}
-                  />
+          {/* بدنه اسکرول‌پذیر */}
+          <div className="flex-1 overflow-y-auto p-4 md:p-6 space-y-5">
+            
+            {/* بخش ۱: تنظیم شرایط پرداخت */}
+            <section className="bg-white rounded-xl shadow-sm border border-line p-4 md:p-5">
+              <h3 className="mb-4 text-[14px] font-bold text-slate-800">۱. تنظیم شرایط پرداخت</h3>
+              <div className="flex flex-col gap-4">
+                {cards.map((c, idx) => (
+                  <div key={c.domId} className="modal-variant bg-slate-50/50 rounded-lg border border-line p-3">
+                    <div className="modal-variant-head mb-2 flex items-center justify-between">
+                      <span className="variant-num font-semibold text-primary">{cardLabel(c, idx)}</span>
+                      <button type="button" className="text-red-500 hover:text-red-700 hover:bg-red-50 rounded-full w-6 h-6 flex items-center justify-center transition-colors" title="حذف" onClick={() => removeCard(c.domId)}>
+                        ×
+                      </button>
+                    </div>
+                    <div className="flex flex-col gap-2">
+                      {c.milestones.map((m, i) => (
+                        <MilestoneRow
+                          key={i}
+                          milestone={m}
+                          onChange={(nextM) => {
+                            const ms = [...c.milestones];
+                            ms[i] = nextM;
+                            updateCard(c.domId, { milestones: ms });
+                          }}
+                          onRemove={() => updateCard(c.domId, { milestones: c.milestones.filter((_, j) => j !== i) })}
+                        />
+                      ))}
+                    </div>
+                    <Button variant="ghost" size="sm" className="mt-3 text-xs text-primary bg-primary/5 hover:bg-primary/10" onClick={() => updateCard(c.domId, { milestones: [...c.milestones, { when_iso: null, amount: null }] })}>
+                      ＋ مرحله پرداخت جدید
+                    </Button>
+                  </div>
                ))}
              </div>
-              <Button variant="line" size="sm" className="mt-1.5" onClick={() => updateCard(c.domId, { milestones: [...c.milestones, { when_iso: null, amount: null }] })}>
-                ＋ مرحله پرداخت
+              <Button variant="line" size="sm" className="mt-4 border-dashed border-primary/50 text-primary hover:bg-primary/5" onClick={addNewCard}>
+                ＋ افزودن شرایط پرداخت جدید
              </Button>
-            </div>
-          ))}
-        </div>
-        <Button variant="line" size="sm" className="self-start" onClick={addNewCard}>
-          ＋ نوشتن conditions جدید
-        </Button>
+            </section>

-        {/* تخصیص قلم‌ها */}
-        <div className="border-t border-line pt-3">
-          <div className="mb-1 text-[13px] font-bold">تخصیص قلم‌ها به conditions:</div>
-          <div className="mb-2 text-[11.5px] text-muted">
-            قلمی که می‌خرید را تیک بزنید؛ قلمی که نمی‌خرید را بدون تیک رها کنید تا از معامله حذف شود.
-          </div>
-          <div>
-            {allItems.map((li) => {
-              const removed = removedItems.has(li.id);
-              const m = materialById(materials, li.material_id);
-              return (
-                <div key={li.id} className={`accept-item-assign-row ${removed ? "rejected" : ""}`}>
-                  <input
-                    type="checkbox"
-                    className="accent-accent"
-                    checked={!removed}
-                    title="تیک = در معامله می‌ماند"
-                    onChange={(e) => {
-                      const next = new Set(removedItems);
-                      if (e.target.checked) next.delete(li.id);
-                      else next.add(li.id);
-                      setRemovedItems(next);
-                    }}
-                  />
-                  <span className="flex-1 text-[13px]">
-                    {formatMaterialTitle(m)}
-                  </span>
-                  <span className="text-[12px] text-muted">
-                    {fmtNum(li.quantity)} {li.unit} × {groupCommas(li.unit_price, true)}
-                  </span>
-                  <select
-                    className="min-w-[140px] rounded-md border border-line bg-panel px-2 py-1.5 font-inherit text-[12px]"
-                    value={assignments[li.id] || cards[0]?.domId || ""}
-                    onChange={(e) => assign(li.id, e.target.value)}
-                  >
-                    {cards.map((c, idx) => (
-                      <option key={c.domId} value={c.domId}>
-                        {cardLabel(c, idx)}
-                      </option>
-                    ))}
-                  </select>
-                </div>
-              );
-            })}
-            {active.length === 0 && (
-              <div className="mb-1 text-[12px] text-red">همه‌ی قلم‌ها رد شده‌اند — حداقل یک قلم را تیک بزنید.</div>
-            )}
-          </div>
-        </div>
-
-        {/* تخصیص قلم‌ها به پروژه */}
-        <div className="border-t border-line pt-3">
-          <div className="mb-1 text-[13px] font-bold">پروژه‌ی هر قلم:</div>
-          <div className="mb-2 text-[11.5px] text-muted">
-            برای هر متریال فقط یک پروژه انتخاب می‌شود — مثل شرایط پرداخت.
-          </div>
-          <div className="flex flex-col gap-2">
-            {allItems
-              .filter((li) => !removedItems.has(li.id))
-              .map((li) => {
-                const m = materialById(materials, li.material_id);
-                return (
-                  <div key={li.id} className="rounded-lg border border-line p-2.5">
-                    <div className="mb-1.5 text-[12.5px]">
-                      <span className="font-semibold">
-                        {formatMaterialTitle(m)}
-                      </span>
-                      <span className="ms-2 text-[11px] text-muted">
-                        {fmtNum(li.quantity)} {li.unit}
-                      </span>
-                    </div>
-                    {projectOptions.length ? (
+            {/* بخش ۲: تخصیص اقلام */}
+            <section className="bg-white rounded-xl shadow-sm border border-line p-4 md:p-5">
+              <h3 className="mb-1 text-[14px] font-bold text-slate-800">۲. تخصیص اقلام به شرایط پرداخت</h3>
+              <div className="mb-4 text-[12px] text-muted">
+                قلمی که می‌خرید را تیک بزنید؛ قلمی که نمی‌خرید را بدون تیک رها کنید تا از معامله حذف شود.
+              </div>
+              <div className="flex flex-col gap-2">
+                {allItems.map((li) => {
+                  const removed = removedItems.has(li.id);
+                  const m = materialById(materials, li.material_id);
+                  return (
+                    <div 
+                      key={li.id} 
+                      className={`accept-item-assign-row flex flex-wrap sm:flex-nowrap items-center gap-3 p-3 rounded-lg border border-line transition-all ${removed ? "bg-slate-50 opacity-60 grayscale" : "bg-white hover:border-primary/30"}`}
+                    >
+                      <input
+                        type="checkbox"
+                        className="accent-primary w-4 h-4 rounded cursor-pointer shrink-0"
+                        checked={!removed}
+                        title="تیک = در معامله می‌ماند"
+                        onChange={(e) => {
+                          const next = new Set(removedItems);
+                          if (e.target.checked) next.delete(li.id);
+                          else next.add(li.id);
+                          setRemovedItems(next);
+                        }}
+                      />
+                      <div className="flex-1 min-w-[120px]">
+                        <div className="text-[13.5px] font-medium text-slate-800">
+                          {formatMaterialTitle(m)}
+                        </div>
+                        <div className="text-[12px] text-muted mt-0.5">
+                          {fmtNum(li.quantity)} {li.unit} × {groupCommas(li.unit_price, true)}
+                        </div>
+                      </div>
+                      
                      <select
-                        className="min-w-[180px] rounded-md border border-line bg-panel px-2 py-1.5 font-inherit text-[12px]"
-                        value={itemProjectsSel[li.id] ?? ""}
-                        onChange={(e) =>
-                          setItemProjectsSel((s) => ({ ...s, [li.id]: e.target.value }))
-                        }
+                        className={`min-w-[160px] h-9 rounded-md border border-line bg-panel px-2.5 py-1.5 font-inherit text-[12px] outline-none transition-all ${!removed ? 'focus:border-primary focus:ring-1 focus:ring-primary' : 'cursor-not-allowed'}`}
+                        value={assignments[li.id] || cards[0]?.domId || ""}
+                        onChange={(e) => assign(li.id, e.target.value)}
+                        disabled={removed}
                      >
-                        {(itemProjectsSel[li.id] ? [] : [{ name: "" }]).map((_, i) => (
-                          <option key={i} value="">
-                            انتخاب پروژه...
-                          </option>
-                        ))}
-                        {projectOptions.map((n) => (
-                          <option key={n} value={n}>
-                            {n}
+                        {cards.map((c, idx) => (
+                          <option key={c.domId} value={c.domId}>
+                            {cardLabel(c, idx)}
                          </option>
                        ))}
                      </select>
-                    ) : (
-                      <div className="text-[12px] text-muted">پروژه‌ای ثبت نشده است.</div>
-                    )}
+                    </div>
+                  );
+                })}
+                {active.length === 0 && (
+                  <div className="mt-2 p-3 bg-red-50 text-red-600 rounded-md text-[13px] font-medium flex items-center gap-2">
+                    <span>⚠️</span> همه‌ی قلم‌ها رد شده‌اند — حداقل یک قلم را تیک بزنید.
                  </div>
-                );
-              })}
+                )}
+              </div>
+            </section>
+
+            {/* بخش ۳: تخصیص اقلام به پروژه */}
+            <section className="bg-white rounded-xl shadow-sm border border-line p-4 md:p-5">
+              <h3 className="mb-1 text-[14px] font-bold text-slate-800">۳. تخصیص اقلام به پروژه‌ها</h3>
+              <div className="mb-4 text-[12px] text-muted">
+                برای هر متریال خریداری شده، می‌توانید پروژه مربوط به آن را مشخص کنید.
+              </div>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+                {allItems
+                  .filter((li) => !removedItems.has(li.id))
+                  .map((li) => {
+                    const m = materialById(materials, li.material_id);
+                    return (
+                      <div key={li.id} className="rounded-lg border border-line p-3 flex flex-col justify-between hover:border-primary/30 transition-colors">
+                        <div className="mb-3 flex items-center justify-between">
+                          <span className="text-[13px] font-semibold text-slate-800 truncate">
+                            {formatMaterialTitle(m)}
+                          </span>
+                          <span className="ms-2 text-[11px] text-muted bg-slate-100 px-2 py-0.5 rounded-full whitespace-nowrap">
+                            {fmtNum(li.quantity)} {li.unit}
+                          </span>
+                        </div>
+                        {projectOptions.length ? (
+                          <select
+                            className="w-full h-9 rounded-md border border-line bg-panel px-2.5 py-1.5 font-inherit text-[12px] outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all"
+                            value={itemProjectsSel[li.id] ?? ""}
+                            onChange={(e) =>
+                              setItemProjectsSel((s) => ({ ...s, [li.id]: e.target.value }))
+                            }
+                          >
+                            {(itemProjectsSel[li.id] ? [] : [{ name: "" }]).map((_, i) => (
+                              <option key={i} value="">
+                                انتخاب پروژه...
+                              </option>
+                            ))}
+                            {projectOptions.map((n) => (
+                              <option key={n} value={n}>
+                                {n}
+                              </option>
+                            ))}
+                          </select>
+                        ) : (
+                          <div className="text-[12px] text-muted bg-slate-50 p-2 rounded-md text-center">پروژه‌ای در سیستم ثبت نشده است.</div>
+                        )}
+                      </div>
+                    );
+                  })}
+              </div>
+            </section>
+
+            {/* بخش ۴: فاکتورها، پیش‌فاکتورها و تاریخ */}
+            <section className="bg-white rounded-xl shadow-sm border border-line p-4 md:p-5 space-y-6">
+              <div>
+                <h3 className="mb-2 text-[14px] font-bold text-slate-800">فاکتورهای اصلی</h3>
+                <FileList
+                  files={invoices}
+                  onChange={setInvoices}
+                  upload={(f) => api.files.upload(q.id, "invoice", f)}
+                  onDelete={(a) =>
+                    a.id &&
+                    void api.files.remove(q.id, "invoice", a.id).catch((err) =>
+                      toast.error(err instanceof Error ? err.message : "حذف فاکتور ناموفق بود"),
+                    )
+                  }
+                  urlOf={(a) => (a.id ? api.files.downloadUrl(q.id, "invoice", a.id) : null)}
+                />
+              </div>
+
+              <div className="h-px bg-line w-full"></div>
+
+              <div>
+                <h3 className="mb-2 text-[14px] font-bold text-slate-800">پیش‌فاکتورها</h3>
+                <FileList
+                  files={proformas}
+                  onChange={setProformas}
+                  upload={(f) => api.files.upload(q.id, "proforma", f)}
+                  onDelete={(a) =>
+                    a.id &&
+                    void api.files.remove(q.id, "proforma", a.id).catch((err) =>
+                      toast.error(err instanceof Error ? err.message : "حذف پیش‌فاکتور ناموفق بود"),
+                    )
+                  }
+                  urlOf={(a) => (a.id ? api.files.downloadUrl(q.id, "proforma", a.id) : null)}
+                  label="افزودن پیش‌فاکتور"
+                />
+              </div>
+
+              <div className="h-px bg-line w-full"></div>
+
+              <div className="max-w-xs">
+                <label className="block mb-2 text-[13px] font-bold text-slate-800">تاریخ و زمان پذیرش</label>
+                <JalaliDatePicker value={acceptDate} onChange={setAcceptDate} placeholder="تاریخ و ساعت" withTime />
+              </div>
+            </section>
+
          </div>
-        </div>

        {/* فاکتورهای اصلی */}
        <div className="border-t border-line pt-3">
@@ -427,13 +482,20 @@ export function AcceptModal({ quoteId, onClose }: AcceptModalProps) {
          </div>
        </div>

-        <DialogFooter>
-          <Button variant="slate" onClick={onClose}>
-            انصراف
-          </Button>
-          <Button onClick={confirm}>ثبت معامله بسته‌شده</Button>
-        </DialogFooter>
+        {/* فوتر ثابت */}
+        <div className="px-6 py-4 bg-white border-t border-line shrink-0 z-10">
+          <DialogFooter className="flex w-full gap-3 sm:justify-end">
+            <Button variant="slate" onClick={onClose} className="w-full sm:w-auto">
+              انصراف
+            </Button>
+            <Button onClick={confirm} className="w-full sm:w-auto">
+              ثبت معامله بسته‌شده
+            </Button>
+          </DialogFooter>
+        </div>
+
+        </div>
      </DialogContent>
    </Dialog>
  );
-}
+}