347 lines
14 KiB
TypeScript
347 lines
14 KiB
TypeScript
import { Link } from "react-router-dom";
|
||
import { AlarmClock, ChevronDown, Pencil, TriangleAlert, Building2, Package, CreditCard, Check } from "lucide-react";
|
||
import type { Quote, Store } from "../../lib/types";
|
||
import {
|
||
isExpired,
|
||
materialById,
|
||
materialLabel,
|
||
projectCell,
|
||
quoteTotal,
|
||
supplierById,
|
||
termsheetSummary,
|
||
unitWarning,
|
||
} from "../../lib/quoteUtils";
|
||
import { STATUS_LABEL } from "../../lib/constants";
|
||
import { esc, fmtDate, fmtDateTime, fmtNum, priceCell } from "../../lib/formatters";
|
||
import { Badge } from "../../components/ui/badge";
|
||
import { cn } from "../../lib/utils";
|
||
import { QuoteDetail } from "./QuoteDetail";
|
||
|
||
export interface QuoteCardProps {
|
||
store: Store;
|
||
q: Quote;
|
||
expanded: boolean;
|
||
onToggleExpand: () => void;
|
||
onAccept: () => void;
|
||
onEdit: () => void;
|
||
canWrite?: boolean;
|
||
}
|
||
|
||
function InfoCell({ label, children, className }: { label: string; children: React.ReactNode; className?: string }) {
|
||
return (
|
||
<div className={cn("min-w-0", className)}>
|
||
<div className="mb-0.5 text-[10px] font-semibold text-muted sm:text-[10.5px]">{label}</div>
|
||
<div className="min-w-0 text-xs leading-5 text-ink sm:text-[13px] sm:leading-6">{children}</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export function QuoteCard({ store, q, expanded, onToggleExpand, onAccept, onEdit, canWrite = true }: QuoteCardProps) {
|
||
const sup = supplierById(store.suppliers, q.supplier_id);
|
||
const expired = isExpired(q);
|
||
const total = quoteTotal(q);
|
||
const pc = priceCell(total);
|
||
const ts = termsheetSummary(store, q);
|
||
const unitWarns = unitWarning(store, q);
|
||
|
||
// ستون / دکمه پذیرش
|
||
let acceptedCell: React.ReactNode;
|
||
if (q.status === "offered") {
|
||
acceptedCell = canWrite ? (
|
||
<button
|
||
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" />
|
||
<span>پذیرش</span>
|
||
</button>
|
||
) : (
|
||
<span className="text-muted text-xs font-medium">در انتظار پذیرش</span>
|
||
);
|
||
} else if (q.accepted_date) {
|
||
acceptedCell = <span className="tabular-nums font-medium">{fmtDateTime(q.accepted_date)}</span>;
|
||
} else {
|
||
acceptedCell = <span className="text-muted">—</span>;
|
||
}
|
||
|
||
// وضعیت رسید کالا
|
||
const activeItems = (q.line_items || []).filter((li) => !li.rejected);
|
||
const receivedSum = activeItems.reduce((s, li) => s + (li.received_qty || 0), 0);
|
||
const orderedSum = activeItems.reduce((s, li) => s + (li.quantity || 0), 0);
|
||
const fulfilledItems = activeItems.filter(
|
||
(li) => li.quantity != null && li.quantity > 0 && (li.received_qty || 0) >= li.quantity,
|
||
).length;
|
||
const anyReceived = receivedSum > 0;
|
||
const fullyDelivered = activeItems.length > 0 && fulfilledItems === activeItems.length && anyReceived;
|
||
|
||
// نشان پیشرفت تکمیل
|
||
let fulfillmentBadge: React.ReactNode = null;
|
||
if (q.status === "accepted" || q.status === "arrived") {
|
||
if (fullyDelivered || q.status === "arrived") {
|
||
fulfillmentBadge = (
|
||
<span className="inline-flex items-center gap-1 rounded-full border border-emerald-200 bg-emerald-50 px-2 py-0.5 text-[10.5px] font-bold text-emerald-700 sm:text-[11px]">
|
||
✓ تکمیل
|
||
</span>
|
||
);
|
||
} else if (anyReceived) {
|
||
fulfillmentBadge = (
|
||
<span className="inline-flex items-center gap-1 rounded-full border border-amber-200 bg-amber-50 px-2 py-0.5 text-[10.5px] font-bold text-amber-700 sm:text-[11px]">
|
||
رسید: {fmtNum(fulfilledItems)}/{fmtNum(activeItems.length)}
|
||
</span>
|
||
);
|
||
} else {
|
||
fulfillmentBadge = (
|
||
<span className="inline-flex items-center gap-1 rounded-full border border-blue-200 bg-blue-50 px-2 py-0.5 text-[10.5px] font-bold text-blue-700 sm:text-[11px]">
|
||
⏳ در راه
|
||
</span>
|
||
);
|
||
}
|
||
}
|
||
|
||
let arrivedCell: React.ReactNode;
|
||
const lastReceiptAt = activeItems.reduce<Date | null>((acc, li) => {
|
||
if (!li.arrived_date) return acc;
|
||
const t = new Date(li.arrived_date).getTime();
|
||
if (Number.isNaN(t)) return acc;
|
||
return !acc || t > acc.getTime() ? new Date(li.arrived_date) : acc;
|
||
}, null);
|
||
|
||
if (q.status === "accepted") {
|
||
if (q.arrived_date) {
|
||
arrivedCell = <span className="tabular-nums">{fmtDateTime(q.arrived_date)}</span>;
|
||
} else if (receivedSum > 0) {
|
||
arrivedCell = (
|
||
<span className="tabular-nums">
|
||
{fmtNum(receivedSum)} از {fmtNum(orderedSum)}
|
||
</span>
|
||
);
|
||
} else {
|
||
arrivedCell = <span className="text-muted">در انتظار انبار</span>;
|
||
}
|
||
} else if (q.status === "arrived") {
|
||
arrivedCell = (
|
||
<span className="tabular-nums">
|
||
{fmtDateTime(q.arrived_date || (lastReceiptAt ? lastReceiptAt.toISOString() : ""))}
|
||
</span>
|
||
);
|
||
} else {
|
||
arrivedCell = <span className="text-muted">—</span>;
|
||
}
|
||
|
||
return (
|
||
<div
|
||
className={cn(
|
||
"overflow-hidden rounded-xl border bg-panel transition-colors shadow-2xs sm:rounded-lg",
|
||
expired ? "border-amber/40" : "border-line hover:border-accent/40",
|
||
expanded && "border-accent/60 ring-1 ring-accent/20",
|
||
)}
|
||
>
|
||
{/* سربرگ کارت — با کلیک روی فضای خالی اکسپند میشود */}
|
||
<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 items-center">
|
||
<Link
|
||
to={`/suppliers/${q.supplier_id}`}
|
||
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>
|
||
</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">
|
||
{STATUS_LABEL[q.status]}
|
||
</Badge>
|
||
)}
|
||
|
||
{/* دکمه ویرایش */}
|
||
{canWrite && (
|
||
<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={(e) => {
|
||
e.stopPropagation();
|
||
onEdit();
|
||
}}
|
||
title="ویرایش پیشنهاد"
|
||
aria-label="ویرایش"
|
||
>
|
||
<Pencil className="h-3 w-3 text-muted" />
|
||
<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={(e) => {
|
||
e.stopPropagation();
|
||
onToggleExpand();
|
||
}}
|
||
title={expanded ? "جمع کردن توضیحات" : "نمایش توضیحات و جزئیات"}
|
||
aria-expanded={expanded}
|
||
>
|
||
<ChevronDown className={cn("h-4 w-4 transition-transform duration-200", expanded && "rotate-180")} />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* اطلاعات کلیدی — لمس این بخش هم کارت را اکسپند میکند */}
|
||
<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" />
|
||
<span className="truncate">
|
||
{q.projects && q.projects.length > 0 ? q.projects.join("، ") : projectCell(q)}
|
||
</span>
|
||
</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 ? (
|
||
activeItems.map((li) => {
|
||
const m = materialById(store.materials, li.material_id);
|
||
return (
|
||
<span key={li.id} className="break-words">
|
||
{materialLabel(m)}
|
||
</span>
|
||
);
|
||
})
|
||
) : (
|
||
<span>—</span>
|
||
)}
|
||
</div>
|
||
|
||
{unitWarns.map((w) => (
|
||
<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)}» را در داشبورد واحدها ثبت کنید`}
|
||
>
|
||
<TriangleAlert className="h-2.5 w-2.5 shrink-0" />
|
||
واحد جدید: {w.unit}
|
||
</Link>
|
||
))}
|
||
</InfoCell>
|
||
|
||
{/* ۳. مجموع مبلغ */}
|
||
<InfoCell label="مجموع مبلغ" className="col-span-1">
|
||
{pc ? (
|
||
<div>
|
||
<div className="text-sm font-extrabold tabular-nums text-ink sm:text-base">
|
||
{pc.num} <span className="text-[10px] font-normal text-muted sm:text-xs">تومان</span>
|
||
</div>
|
||
<div className="hidden text-[11px] text-muted sm:block">({pc.words})</div>
|
||
</div>
|
||
) : (
|
||
"—"
|
||
)}
|
||
</InfoCell>
|
||
|
||
{/* ۴. شرایط معامله */}
|
||
<InfoCell label="شرایط معامله" className="col-span-1">
|
||
{ts.title !== "—" ? (
|
||
<div>
|
||
<div className="text-xs font-semibold sm:text-[13px]" style={ts.color ? { color: ts.color } : undefined}>
|
||
{ts.title}
|
||
</div>
|
||
{ts.sub && <div className="truncate text-[10px] text-muted sm:text-[11px]">{ts.sub}</div>}
|
||
</div>
|
||
) : (
|
||
<span className="text-muted">—</span>
|
||
)}
|
||
</InfoCell>
|
||
</div>
|
||
|
||
{/* تاریخها و اکشنها */}
|
||
<div className="grid grid-cols-2 gap-2 border-t border-line bg-bg/40 p-2.5 text-[11px] text-muted sm:flex sm:flex-wrap sm:items-center sm:gap-x-5 sm:gap-y-2 sm:px-4 sm:py-2 sm:text-[11.5px]">
|
||
<span className="inline-flex items-center gap-1.5 truncate">
|
||
<Package className="h-3 w-3 shrink-0" />
|
||
<span>تاریخ:</span>
|
||
<b className="tabular-nums text-ink">{fmtDate(q.quote_date)}</b>
|
||
</span>
|
||
|
||
<span className="inline-flex items-center gap-1.5 truncate">
|
||
<CreditCard className="h-3 w-3 shrink-0" />
|
||
<span>اعتبار:</span>
|
||
<b className={cn("tabular-nums", expired ? "text-amber" : "text-ink")}>
|
||
{fmtDate(q.expiry_date)}
|
||
</b>
|
||
{expired && <AlarmClock className="h-3 w-3 shrink-0 text-amber" aria-label="منقضی" />}
|
||
</span>
|
||
|
||
<span className="inline-flex items-center gap-1.5">
|
||
<span>پذیرش:</span>
|
||
{acceptedCell}
|
||
</span>
|
||
|
||
<span className="inline-flex items-center gap-1.5 truncate">
|
||
<span>رسید:</span>
|
||
{arrivedCell}
|
||
</span>
|
||
</div>
|
||
|
||
{/* دکمه تمامعرض توضیحات بیشتر */}
|
||
<button
|
||
type="button"
|
||
onClick={onToggleExpand}
|
||
className="flex w-full items-center justify-center gap-1.5 border-t border-line bg-bg/20 py-2 text-xs font-semibold text-muted hover:text-accent hover:bg-bg/50 transition-colors select-none"
|
||
>
|
||
<span>{expanded ? "بستن توضیحات و جزئیات" : "توضیحات بیشتر و جزئیات پیشنهاد"}</span>
|
||
<ChevronDown className={cn("h-3.5 w-3.5 transition-transform duration-200", expanded && "rotate-180 text-accent")} />
|
||
</button>
|
||
|
||
{/* جزئیات تکمیلی بازشونده — کلیک داخل آن مانع بسته شدن ناخواسته میشود */}
|
||
{expanded && (
|
||
<div onClick={(e) => e.stopPropagation()}>
|
||
<QuoteDetail store={store} q={q} />
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
} |