feat: improve line items layout, number inputs and supplier click-to-call
This commit is contained in:
Behrad
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user