feat: logistics board as grouped tables with column headers
This commit is contained in:
root
parent
f8c6c538b7
commit
a764213a77
|
|
@ -9,16 +9,7 @@ import {
|
|||
import { Badge } from "../UI/Badge";
|
||||
import { Panel } from "../UI/Panel";
|
||||
import { OrderFilters } from "../orders/OrderFilters";
|
||||
|
||||
const renderOrderNumbersCompact = (group) => {
|
||||
if (!Array.isArray(group.orderNumbers) || !group.orderNumbers.length) {
|
||||
return null;
|
||||
}
|
||||
const text = group.orderNumbers.length <= 3
|
||||
? group.orderNumbers.join(", ")
|
||||
: group.orderNumbers.slice(0, 3).join(", ") + ` +${group.orderNumbers.length - 3}`;
|
||||
return <span className="text-xs text-[var(--color-text-muted)]">{text}</span>;
|
||||
};
|
||||
import { formatDateTime } from "../../utils/formatters";
|
||||
|
||||
export const LogisticsReadinessBoard = ({ orderGroups = [], onSelectSet, statusOptions = ORDER_GROUP_DISPLAY_STATUS_OPTIONS }) => {
|
||||
const [filters, setFilters] = React.useState({ query: "", displayStatus: "all" });
|
||||
|
|
@ -60,6 +51,19 @@ export const LogisticsReadinessBoard = ({ orderGroups = [], onSelectSet, statusO
|
|||
|
||||
const totalGroups = filteredGroups.length;
|
||||
|
||||
const TableHeader = () => (
|
||||
<thead className="bg-[var(--color-surface-strong)] text-left text-xs uppercase tracking-[0.14em] text-[var(--color-text-muted)]">
|
||||
<tr>
|
||||
<th className="px-4 py-3 font-medium">Клиент</th>
|
||||
<th className="px-4 py-3 font-medium hidden sm:table-cell">Телефон</th>
|
||||
<th className="px-4 py-3 font-medium hidden md:table-cell">Дата доставки</th>
|
||||
<th className="px-4 py-3 font-medium hidden lg:table-cell">Заказы</th>
|
||||
<th className="px-4 py-3 font-medium">Статус</th>
|
||||
<th className="px-4 py-3 font-medium hidden md:table-cell">Обновлён</th>
|
||||
</tr>
|
||||
</thead>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<Panel className="space-y-4 p-5">
|
||||
|
|
@ -82,7 +86,7 @@ export const LogisticsReadinessBoard = ({ orderGroups = [], onSelectSet, statusO
|
|||
По этому поиску ничего не найдено.
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid gap-6">
|
||||
<div className="grid gap-4">
|
||||
{Array.from(statusGroups.entries()).sort(([a], [b]) => {
|
||||
const idxA = FUNNEL_ORDER.indexOf(a);
|
||||
const idxB = FUNNEL_ORDER.indexOf(b);
|
||||
|
|
@ -94,10 +98,10 @@ export const LogisticsReadinessBoard = ({ orderGroups = [], onSelectSet, statusO
|
|||
const isCollapsed = collapsedSections.has(statusValue);
|
||||
|
||||
return (
|
||||
<div key={statusValue} className="space-y-2">
|
||||
<Panel key={statusValue} className="overflow-hidden p-0">
|
||||
<button
|
||||
type="button"
|
||||
className="flex w-full items-center justify-between text-left"
|
||||
className="flex w-full items-center justify-between px-5 py-3 text-left transition hover:bg-[var(--color-accent-soft)]"
|
||||
onClick={() => {
|
||||
setCollapsedSections((prev) => {
|
||||
const next = new Set(prev);
|
||||
|
|
@ -126,47 +130,47 @@ export const LogisticsReadinessBoard = ({ orderGroups = [], onSelectSet, statusO
|
|||
</svg>
|
||||
</button>
|
||||
|
||||
{!isCollapsed && groups.map((group) => (
|
||||
<button
|
||||
{!isCollapsed && (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="min-w-full border-collapse border-t border-[var(--color-border)]">
|
||||
<TableHeader />
|
||||
<tbody>
|
||||
{groups.map((group) => (
|
||||
<tr
|
||||
key={group.id}
|
||||
className="w-full rounded-[16px] border border-[var(--color-border)] bg-[var(--color-surface-strong)] px-4 py-2 !text-left !text-[var(--color-text)] transition hover:bg-[var(--color-accent-soft)]"
|
||||
onClick={() => {
|
||||
if (onSelectSet) {
|
||||
onSelectSet(group.id);
|
||||
}
|
||||
}}
|
||||
type="button"
|
||||
className="cursor-pointer border-t border-[var(--color-border)] transition hover:bg-[var(--color-accent-soft)]"
|
||||
onClick={() => { if (onSelectSet) onSelectSet(group.id); }}
|
||||
>
|
||||
{/* Desktop: single-line compact row */}
|
||||
<div className="hidden md:flex md:items-center md:gap-3 md:text-sm">
|
||||
<span className="min-w-0 truncate font-semibold">{group.displayTitle || group.customerName || group.groupKey}</span>
|
||||
<span className="shrink-0 text-[var(--color-text-muted)]">{group.customerDate || "—"}</span>
|
||||
<span className="shrink-0 text-[var(--color-text-muted)]">{group.customerPhone || "—"}</span>
|
||||
<span className="shrink-0">{group.ordersCount || 0} {group.ordersCount === 1 ? "заказ" : group.ordersCount < 5 ? "заказа" : "заказов"}</span>
|
||||
{renderOrderNumbersCompact(group)}
|
||||
{group.assignedDriverName && <span className="text-[var(--color-accent)]">{group.assignedDriverName}</span>}
|
||||
<span className="ml-auto shrink-0"><Badge tone={getOrderGroupStatusTone(group)}>{getOrderGroupDisplayStatusLabel(group)}</Badge></span>
|
||||
</div>
|
||||
{/* Mobile: stacked */}
|
||||
<div className="space-y-1 md:hidden">
|
||||
<div className="grid grid-cols-[minmax(0,1fr)_auto] items-start gap-2">
|
||||
<div className="break-words font-semibold leading-tight !text-[var(--color-text)]">
|
||||
{group.displayTitle || group.customerName || group.groupKey}
|
||||
</div>
|
||||
<Badge className="self-start" tone={getOrderGroupStatusTone(group)}>
|
||||
{getOrderGroupDisplayStatusLabel(group)}
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="text-sm leading-5 text-[var(--color-text-muted)]">
|
||||
{group.customerDate || "—"} · {group.customerPhone || "—"} · {group.ordersCount || 0}{" "}
|
||||
{group.ordersCount === 1 ? "заказ" : group.ordersCount < 5 ? "заказа" : "заказов"}
|
||||
{group.assignedDriverName ? ` · ${group.assignedDriverName}` : ""}
|
||||
</div>
|
||||
{renderOrderNumbersCompact(group)}
|
||||
</div>
|
||||
</button>
|
||||
<td className="px-4 py-2.5">
|
||||
<div className="font-medium">{group.displayTitle || group.customerName || group.groupKey}</div>
|
||||
<div className="text-xs text-[var(--color-text-muted)] sm:hidden">{group.customerPhone || "—"}</div>
|
||||
<div className="text-xs text-[var(--color-text-muted)] md:hidden">{group.deliveryDate || "—"}</div>
|
||||
</td>
|
||||
<td className="px-4 py-2.5 text-sm hidden sm:table-cell">
|
||||
{group.customerPhone || "—"}
|
||||
</td>
|
||||
<td className="px-4 py-2.5 text-sm hidden md:table-cell">
|
||||
{group.deliveryDate
|
||||
? <span>{group.deliveryDate}{group.deliveryTime ? <span className="text-[var(--color-text-muted)]"> · {group.deliveryTime}</span> : ""}</span>
|
||||
: <span className="text-[var(--color-text-muted)]">—</span>
|
||||
}
|
||||
</td>
|
||||
<td className="px-4 py-2.5 text-sm hidden lg:table-cell">
|
||||
{group.ordersCount || 0} {group.ordersCount === 1 ? "заказ" : group.ordersCount < 5 ? "заказа" : "заказов"}
|
||||
</td>
|
||||
<td className="px-4 py-2.5">
|
||||
<Badge tone={getOrderGroupStatusTone(group)}>{getOrderGroupDisplayStatusLabel(group)}</Badge>
|
||||
</td>
|
||||
<td className="px-4 py-2.5 text-sm text-[var(--color-text-muted)] hidden md:table-cell">
|
||||
{formatDateTime(group.updatedAt)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</Panel>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue