feat: improve line items layout, number inputs and supplier click-to-call

2026-09-22 23:06:17 +03:30
parent 972b1b49cb
commit 49dd159fb1
7 changed files with 300 additions and 197 deletions
@@ -194,7 +194,6 @@ export function EditModal({ quoteId, onClose }: EditModalProps) {
    };
  }, [quoteId]);

-  // لیست اقلام برای ارسال به TermsheetCard (دقیقاً مشابه ویزارد)
  const itemOptions = useMemo(() => {
    return itemRows
      .filter((r) => !r.rejected || r.restore)
@@ -204,7 +203,6 @@ export function EditModal({ quoteId, onClose }: EditModalProps) {
      }));
  }, [itemRows]);

-  // محاسبه اقلام تحت پوشش هر کارت شرایط پرداخت
  const getCoveredIds = (card: EditTsCard) => {
    const cardId = card.domId || card.key;
    const explicit = itemRows
@@ -217,7 +215,6 @@ export function EditModal({ quoteId, onClose }: EditModalProps) {
    return explicit;
  };

-  // تغییر اقلام تحت پوشش یک کارت شرایط پرداخت
  const handleCoverageChange = (cardKey: string, newCoveredKeys: string[]) => {
    const card = tsCards.find((c) => c.key === cardKey);
    const cardId = card?.domId || cardKey;
@@ -586,7 +583,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>
@@ -623,23 +620,24 @@ export function EditModal({ quoteId, onClose }: EditModalProps) {
                      </div>

                      <div className="space-y-3">
-                        <div className="grid grid-cols-1 sm:grid-cols-2 gap-2.5">
-                          <div className="flex flex-col gap-1">
-                            <label className="text-[11px] font-semibold text-gray-600">متریال</label>
+                        {/* ردیف ۱: متریال و برند */}
+                        <div className="grid grid-cols-2 gap-2.5">
+                          <div className="flex flex-col gap-1 min-w-0">
+                            <label className="text-[11px] font-semibold text-gray-600 text-right">متریال</label>
                            <input
                              disabled={hasReceipts}
-                              className="h-9 w-full rounded-md border border-gray-200 bg-white px-2.5 text-xs text-gray-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/30 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:opacity-60"
+                              className="h-9 w-full rounded-md border border-gray-200 bg-white px-2.5 text-xs text-gray-800 text-right focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/30 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:opacity-60"
                              placeholder="نام متریال"
                              value={row.cat}
                              onChange={(e) => patchItem(row.key, { cat: e.target.value })}
                            />
                          </div>

-                          <div className="flex flex-col gap-1">
-                            <label className="text-[11px] font-semibold text-gray-600">برند</label>
+                          <div className="flex flex-col gap-1 min-w-0">
+                            <label className="text-[11px] font-semibold text-gray-600 text-right">برند</label>
                            <input
                              disabled={hasReceipts}
-                              className="h-9 w-full rounded-md border border-gray-200 bg-white px-2.5 text-xs text-gray-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/30 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:opacity-60"
+                              className="h-9 w-full rounded-md border border-gray-200 bg-white px-2.5 text-xs text-gray-800 text-right focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/30 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:opacity-60"
                              placeholder="برند"
                              value={row.brand}
                              onChange={(e) => patchItem(row.key, { brand: e.target.value })}
@@ -647,64 +645,75 @@ export function EditModal({ quoteId, onClose }: EditModalProps) {
                          </div>
                        </div>

-                        <div className="grid grid-cols-2 gap-2.5">
-                          <div className="flex flex-col gap-1">
-                            <label className="text-[11px] font-semibold text-gray-600">مشخصه</label>
-                            <MultiSelectCombobox
-                              disabled={hasReceipts}
-                              values={row.specs}
-                              onChange={(specs) => patchItem(row.key, { specs })}
-                              options={specOptions}
-                              placeholder="مشخصه"
-                            />
-                          </div>
-
-                          <div className="flex flex-col gap-1">
-                            <label className="text-[11px] font-semibold text-gray-600">واحد</label>
-                            <input
-                              disabled={hasReceipts}
-                              className="h-9 w-full rounded-md border border-gray-200 bg-white px-2.5 text-xs text-gray-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/30 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:opacity-60"
-                              placeholder="واحد سنجش"
-                              value={row.unit}
-                              onChange={(e) => patchItem(row.key, { unit: e.target.value })}
-                            />
-                          </div>
+                        {/* ردیف ۲: مشخصه فنی (تمام‌عرض با فضای کافی برای تگ‌ها) */}
+                        <div className="flex flex-col gap-1 min-w-0">
+                          <label className="text-[11px] font-semibold text-gray-600 text-right">مشخصه فنی / ابعاد</label>
+                          <MultiSelectCombobox
+                            disabled={hasReceipts}
+                            values={row.specs}
+                            onChange={(specs) => patchItem(row.key, { specs })}
+                            options={specOptions}
+                            placeholder="انتخاب مشخصات..."
+                            className="min-w-0"
+                          />
                        </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>
-                            <NumberInput
-                              disabled={hasReceipts}
-                              value={row.qty}
-                              onChange={(qty) => {
-                                patchItem(row.key, {
-                                  qty,
-                                  total: qty != null && row.price != null ? Math.round(qty * row.price * 100) / 100 : row.total,
-                                });
-                              }}
-                              placeholder="تعداد"
-                            />
+                        {/* بخش مقادیر و محاسبات مالی */}
+                        <div className="rounded-lg bg-gray-50/70 p-2.5 border border-gray-200 space-y-3">
+                          {/* ردیف ۳: تعداد + واحد سنجش */}
+                          <div className="grid grid-cols-[100px_1fr] sm:grid-cols-[120px_1fr] gap-2.5">
+                            <div className="flex flex-col gap-1 min-w-0">
+                              <label className="text-[10.5px] font-semibold text-gray-600 text-right">تعداد</label>
+                              <NumberInput
+                                disabled={hasReceipts}
+                                value={row.qty}
+                                onChange={(qty) => {
+                                  patchItem(row.key, {
+                                    qty,
+                                    total: qty != null && row.price != null ? Math.round(qty * row.price) : row.total,
+                                  });
+                                }}
+                                placeholder="مقدار"
+                                className="!text-right text-right"
+                              />
+                            </div>
+
+                            <div className="flex flex-col gap-1 min-w-0">
+                              <label className="text-[10.5px] font-semibold text-gray-600 text-right">واحد سنجش</label>
+                              <input
+                                disabled={hasReceipts}
+                                className="h-9 w-full rounded-md border border-gray-200 bg-white px-2.5 text-xs text-gray-800 text-right focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/30 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:opacity-60"
+                                placeholder="واحد (شاخه، متر، کیلو...)"
+                                value={row.unit}
+                                onChange={(e) => patchItem(row.key, { unit: e.target.value })}
+                              />
+                            </div>
                          </div>

-                          <div className="flex flex-col gap-1">
-                            <label className="text-[10.5px] font-semibold text-gray-600">قیمت واحد</label>
+                          {/* ردیف ۴: قیمت هر واحد (تمام‌عرض با نمایش حروف) */}
+                          <div className="flex flex-col gap-1 min-w-0 border-t border-gray-200/80 pt-2.5">
+                            <label className="text-[10.5px] font-semibold text-gray-600 text-right">
+                              {row.unit ? `قیمت هر ${row.unit} (تومان)` : "قیمت هر واحد (تومان)"}
+                            </label>
                            <NumberInput
                              disabled={hasReceipts}
                              value={row.price}
                              onChange={(price) => {
                                patchItem(row.key, {
                                  price,
-                                  total: row.qty != null && price != null ? Math.round(row.qty * price * 100) / 100 : row.total,
+                                  total: row.qty != null && price != null ? Math.round(row.qty * price) : row.total,
                                });
                              }}
-                              placeholder="واحد"
+                              placeholder="قیمت هر واحد"
+                              showWords
                              maxDecimals={2}
+                              className="!text-right text-right"
                            />
                          </div>

-                          <div className="flex flex-col gap-1">
-                            <label className="text-[10.5px] font-semibold text-gray-600">قیمت کل</label>
+                          {/* ردیف ۵: قیمت کل این قلم (تمام‌عرض با نمایش حروف) */}
+                          <div className="flex flex-col gap-1 min-w-0 border-t border-gray-200/80 pt-2.5">
+                            <label className="text-[10.5px] font-semibold text-gray-600 text-right">قیمت کل این قلم (تومان)</label>
                            <NumberInput
                              disabled={hasReceipts}
                              value={row.total}
@@ -715,7 +724,9 @@ export function EditModal({ quoteId, onClose }: EditModalProps) {
                                    t != null && row.qty != null && row.qty > 0 ? Math.round((t / row.qty) * 100) / 100 : row.price,
                                });
                              }}
-                              placeholder="جمع"
+                              placeholder="قیمت کل قلم"
+                              showWords
+                              className="!text-right text-right"
                            />
                          </div>
                        </div>
@@ -35,7 +35,6 @@ function InfoCell({ label, children, className }: { label: string; children: Rea
  );
 }

-// کارت پیشنهاد خرید — بهینه‌شده برای کاربری سرپا با موبایل
 export function QuoteCard({ store, q, expanded, onToggleExpand, onAccept, onEdit }: QuoteCardProps) {
  const sup = supplierById(store.suppliers, q.supplier_id);
  const expired = isExpired(q);
@@ -49,7 +48,10 @@ export function QuoteCard({ store, q, expanded, onToggleExpand, onAccept, onEdit
  if (q.status === "offered") {
    acceptedCell = (
      <button
-        onClick={onAccept}
+        onClick={(e) => {
+          e.stopPropagation();
+          onAccept();
+        }}
        className="inline-flex h-7 items-center justify-center gap-1 rounded-md bg-emerald-600 px-2.5 text-xs font-bold text-white shadow-xs active:scale-95 transition-transform"
      >
        <Check className="h-3.5 w-3.5" />
@@ -134,34 +136,47 @@ export function QuoteCard({ store, q, expanded, onToggleExpand, onAccept, onEdit
        expanded && "border-accent/60 ring-1 ring-accent/20",
      )}
    >
-      {/* سربرگ کارت */}
-      <div className="flex items-center gap-2.5 border-b border-line bg-bg/40 px-3 py-2 sm:gap-3 sm:px-4 sm:py-2.5">
+      {/* سربرگ کارت — با کلیک روی فضای خالی اکسپند می‌شود */}
+      <div
+        onClick={onToggleExpand}
+        className="flex cursor-pointer items-center gap-2.5 border-b border-line bg-bg/40 px-3 py-2 sm:gap-3 sm:px-4 sm:py-2.5 select-none"
+      >
        <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-accent-bg text-xs font-bold text-accent-dark sm:h-9 sm:w-9 sm:text-sm">
          {sup.name.slice(0, 1)}
        </span>
+
        <div className="min-w-0 flex-1">
-          <div className="flex min-w-0 items-center gap-1.5">
+          {/* خط ۱: فقط خود اسم تأمین‌کننده لینک است */}
+          <div className="flex items-center">
            <Link
              to={`/suppliers/${q.supplier_id}`}
-              className="min-w-0 flex-1 truncate text-xs font-bold text-ink no-underline hover:text-accent sm:text-[13.5px]"
+              onClick={(e) => e.stopPropagation()}
+              className="inline-block max-w-full truncate text-xs font-bold text-ink no-underline hover:text-accent hover:underline sm:text-[13.5px]"
            >
              {sup.name}
            </Link>
-            {/* فاکتور رسمی / غیررسمی */}
-            <span
-              className={cn(
-                "shrink-0 rounded px-1.5 py-px text-[9.5px] font-bold leading-4",
-                q.is_official
-                  ? "bg-green-bg text-green"
-                  : "bg-slate-bg text-muted",
-              )}
-              title={q.is_official ? "فاکتور رسمی" : "فاکتور غیررسمی"}
-            >
-              {q.is_official ? "رسمی" : "غیررسمی"}
-            </span>
          </div>
-          {sup.location && <div className="truncate text-[10px] text-muted sm:text-[11px]">{sup.location}</div>}
+
+          {/* خط ۲: موقعیت مکانی و برچسب هشدار فاکتور رسمی */}
+          <div className="mt-0.5 flex min-w-0 items-center gap-1.5">
+            {sup.location && (
+              <span className="truncate text-[10px] text-muted sm:text-[11px]">
+                {sup.location}
+              </span>
+            )}
+
+            {q.is_official && (
+              <span
+                className="inline-flex shrink-0 items-center gap-1 rounded bg-rose-500/10 px-1.5 py-0.5 text-[9.5px] font-bold text-rose-600 dark:text-rose-400 border border-rose-500/25 select-none"
+                title="فاکتور رسمی (مشمول ارزش افزوده و مالیات)"
+              >
+                <TriangleAlert className="h-2.5 w-2.5 shrink-0 stroke-[2.2] text-rose-500 dark:text-rose-400" />
+                <span>فاکتور رسمی</span>
+              </span>
+            )}
+          </div>
        </div>
+
        <div className="ms-auto flex shrink-0 items-center gap-1.5">
          {fulfillmentBadge ?? (
            <Badge variant={q.status as "offered" | "accepted" | "arrived"} className="text-[10px] sm:text-xs">
@@ -173,7 +188,10 @@ export function QuoteCard({ store, q, expanded, onToggleExpand, onAccept, onEdit
          <button
            type="button"
            className="inline-flex h-7 items-center justify-center gap-1 rounded-md border border-line bg-panel px-2 text-xs font-medium text-ink hover:bg-slate-50 dark:hover:bg-zinc-800 transition-colors sm:h-8 sm:px-2.5"
-            onClick={onEdit}
+            onClick={(e) => {
+              e.stopPropagation();
+              onEdit();
+            }}
            title="ویرایش پیشنهاد"
            aria-label="ویرایش"
          >
@@ -181,14 +199,17 @@ export function QuoteCard({ store, q, expanded, onToggleExpand, onAccept, onEdit
            <span className="hidden sm:inline">ویرایش</span>
          </button>

-          {/* دکمه فلش اکسپند در هدر (همیشه در موبایل و دسکتاپ قابل رویت است) */}
+          {/* دکمه فلش اکسپند در هدر */}
          <button
            type="button"
            className={cn(
              "inline-flex h-7 w-7 items-center justify-center rounded-md border border-line bg-panel text-ink transition-colors hover:bg-slate-50 dark:hover:bg-zinc-800 sm:h-8 sm:w-8",
              expanded && "bg-accent-bg text-accent-dark border-accent/40",
            )}
-            onClick={onToggleExpand}
+            onClick={(e) => {
+              e.stopPropagation();
+              onToggleExpand();
+            }}
            title={expanded ? "جمع کردن توضیحات" : "نمایش توضیحات و جزئیات"}
            aria-expanded={expanded}
          >
@@ -197,9 +218,12 @@ export function QuoteCard({ store, q, expanded, onToggleExpand, onAccept, onEdit
        </div>
      </div>

-      {/* اطلاعات کلیدی — چیدمان بهینه‌شده موبایل */}
-      <div className="grid grid-cols-2 gap-x-3 gap-y-3 p-3 sm:gap-x-5 sm:gap-y-3.5 sm:p-4 md:grid-cols-4">
-        {/* ۱. پروژه — تمام‌عرض در موبایل */}
+      {/* اطلاعات کلیدی — لمس این بخش هم کارت را اکسپند می‌کند */}
+      <div
+        onClick={onToggleExpand}
+        className="cursor-pointer grid grid-cols-2 gap-x-3 gap-y-3 p-3 select-none sm:gap-x-5 sm:gap-y-3.5 sm:p-4 md:grid-cols-4"
+      >
+        {/* ۱. پروژه */}
        <InfoCell label="پروژه" className="col-span-2 md:col-span-1">
          <div className="flex items-center gap-1.5 text-xs font-semibold text-ink sm:text-[13px]">
            <Building2 className="h-3.5 w-3.5 shrink-0 text-muted" />
@@ -209,7 +233,7 @@ export function QuoteCard({ store, q, expanded, onToggleExpand, onAccept, onEdit
          </div>
        </InfoCell>

-        {/* ۲. اقلام — نمایش عمودی چندخطی */}
+        {/* ۲. اقلام */}
        <InfoCell label="اقلام" className="col-span-2 md:col-span-1">
          <div className="flex flex-col gap-1 text-xs font-medium leading-5 text-ink sm:text-[13px]">
            {activeItems.length > 0 ? (
@@ -230,6 +254,7 @@ export function QuoteCard({ store, q, expanded, onToggleExpand, onAccept, onEdit
            <Link
              key={w.unit}
              to={`/units?cat=${encodeURIComponent(w.cat)}&unit=${encodeURIComponent(w.unit)}`}
+              onClick={(e) => e.stopPropagation()}
              className="unit-warn mt-1 inline-flex items-center gap-1 text-[10px]"
              title={`ضریب تبدیل «${esc(w.unit)}» را در داشبورد واحدها ثبت کنید`}
            >
@@ -296,7 +321,7 @@ export function QuoteCard({ store, q, expanded, onToggleExpand, onAccept, onEdit
        </span>
      </div>

-      {/* دکمه واضح و تمام‌عرض «توضیحات بیشتر» در پایین کارت */}
+      {/* دکمه تمام‌عرض توضیحات بیشتر */}
      <button
        type="button"
        onClick={onToggleExpand}
@@ -306,8 +331,12 @@ export function QuoteCard({ store, q, expanded, onToggleExpand, onAccept, onEdit
        <ChevronDown className={cn("h-3.5 w-3.5 transition-transform duration-200", expanded && "rotate-180 text-accent")} />
      </button>

-      {/* جزئیات تکمیلی بازشونده */}
-      {expanded && <QuoteDetail store={store} q={q} />}
+      {/* جزئیات تکمیلی بازشونده — کلیک داخل آن مانع بسته شدن ناخواسته می‌شود */}
+      {expanded && (
+        <div onClick={(e) => e.stopPropagation()}>
+          <QuoteDetail store={store} q={q} />
+        </div>
+      )}
    </div>
  );
 }