fix: driver delivery list — table layout with columns: № | Client | Phone | City | Half-day
Replaced card-style delivery items with proper table: - № счёта (order numbers, accent color) - Клиент (customer name) - Телефон (tel: link, clickable) - Город (extracted from address) - Часть дня (delivery half-day) Problem rows highlighted with red tint + ⚠ icon
This commit is contained in:
root
parent
ced5958eac
commit
112147cb0a
|
|
@ -505,65 +505,61 @@ export const DriverDeliveryPlanner = ({ orderGroups = [], onOpenOrder, currentUs
|
||||||
<Badge tone={tone}>{label}</Badge>
|
<Badge tone={tone}>{label}</Badge>
|
||||||
<span className="text-xs text-[var(--color-text-muted)]">{items.length} {pluralGroups(items.length)}</span>
|
<span className="text-xs text-[var(--color-text-muted)]">{items.length} {pluralGroups(items.length)}</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="grid gap-3">
|
{/* Table layout — № | Фамилия | Телефон | Город | Часть дня */}
|
||||||
{items.map((item) => {
|
<div className="overflow-x-auto">
|
||||||
|
<div className="min-w-[640px]">
|
||||||
|
<div className="grid grid-cols-[minmax(90px,1fr)_minmax(120px,1.5fr)_minmax(130px,1.2fr)_minmax(100px,1fr)_minmax(120px,1fr)] gap-0 border-b border-[var(--color-border)] bg-[var(--color-surface-strong)] text-xs uppercase tracking-[0.1em] text-[var(--color-text-muted)]">
|
||||||
|
<div className="px-3 py-1.5 font-medium">№ счёта</div>
|
||||||
|
<div className="px-3 py-1.5 font-medium">Клиент</div>
|
||||||
|
<div className="px-3 py-1.5 font-medium">Телефон</div>
|
||||||
|
<div className="px-3 py-1.5 font-medium">Город</div>
|
||||||
|
<div className="px-3 py-1.5 font-medium">Часть дня</div>
|
||||||
|
</div>
|
||||||
|
{items.map((item) => {
|
||||||
const hasProblem = item.hasDeliveryProblem || item.has_delivery_problem;
|
const hasProblem = item.hasDeliveryProblem || item.has_delivery_problem;
|
||||||
const phoneTel = normalizePhoneForTel(item.customerPhone);
|
const phoneTel = normalizePhoneForTel(item.customerPhone);
|
||||||
const halfDayLabel = getOrderGroupDeliveryHalfDay(item);
|
const halfDayLabel = getOrderGroupDeliveryHalfDay(item);
|
||||||
|
const city = normalizeCity(item.deliveryAddress || item.delivery_address);
|
||||||
|
const orderNum = (Array.isArray(item.orderNumbers) && item.orderNumbers.length > 0)
|
||||||
|
? item.orderNumbers.join(", ")
|
||||||
|
: (item.groupKey || "—");
|
||||||
return (
|
return (
|
||||||
<Button
|
<button
|
||||||
key={item.id}
|
key={item.id}
|
||||||
variant="secondary"
|
type="button"
|
||||||
className="rounded-[24px] p-4 text-left"
|
className={`grid grid-cols-[minmax(90px,1fr)_minmax(120px,1.5fr)_minmax(130px,1.2fr)_minmax(100px,1fr)_minmax(120px,1fr)] gap-0 w-full border-t border-[var(--color-border)] text-left transition hover:bg-[var(--color-accent-soft)] ${hasProblem ? "bg-[rgba(239,68,68,0.04)]" : ""}`}
|
||||||
onClick={() => onOpenOrder?.(item.id)}
|
onClick={() => onOpenOrder?.(item.id)}
|
||||||
>
|
>
|
||||||
<div className="flex flex-wrap items-start justify-between gap-3">
|
<div className="px-3 py-2 text-xs">
|
||||||
<div className="min-w-0 flex-1">
|
<span className="font-semibold text-[var(--color-accent)]">{orderNum}</span>
|
||||||
<div className="flex items-center gap-2">
|
{hasProblem && <span className="ml-1 text-[10px] font-bold text-[var(--color-danger)]">⚠</span>}
|
||||||
<span className="font-medium text-[var(--color-text)]">
|
</div>
|
||||||
{item.displayTitle || item.customerName || item.groupKey}
|
<div className="px-3 py-2 text-xs font-medium text-[var(--color-text)]">
|
||||||
</span>
|
{item.customerName || item.displayTitle || item.groupKey}
|
||||||
{hasProblem && (
|
</div>
|
||||||
<Badge tone="danger">⚠ Частично</Badge>
|
<div className="px-3 py-2 text-xs">
|
||||||
)}
|
{item.customerPhone && phoneTel ? (
|
||||||
</div>
|
<a
|
||||||
<div className="mt-1 flex flex-wrap items-center gap-x-2 gap-y-1 text-sm text-[var(--color-text-muted)]">
|
href={`tel:${phoneTel}`}
|
||||||
{item.customerDate && <span>{item.customerDate}</span>}
|
onClick={(e) => e.stopPropagation()}
|
||||||
{item.customerDate && (halfDayLabel || item.customerPhone) && <span>·</span>}
|
className="text-[var(--color-accent)] hover:underline"
|
||||||
{halfDayLabel && <span>{halfDayLabel}</span>}
|
>
|
||||||
{halfDayLabel && item.customerPhone && <span>·</span>}
|
{item.customerPhone}
|
||||||
{item.customerPhone && phoneTel && (
|
</a>
|
||||||
<a
|
) : (
|
||||||
href={`tel:${phoneTel}`}
|
<span className="text-[var(--color-text-muted)]">{item.customerPhone || "—"}</span>
|
||||||
onClick={(e) => e.stopPropagation()}
|
|
||||||
className="text-[var(--color-accent)] hover:underline"
|
|
||||||
>
|
|
||||||
{item.customerPhone}
|
|
||||||
</a>
|
|
||||||
)}
|
|
||||||
{item.customerPhone && !phoneTel && <span>{item.customerPhone}</span>}
|
|
||||||
</div>
|
|
||||||
{Array.isArray(item.orderNumbers) && item.orderNumbers.length > 0 && (
|
|
||||||
<div className="mt-1 flex flex-wrap gap-1">
|
|
||||||
{item.orderNumbers.map((num, idx) => (
|
|
||||||
<span
|
|
||||||
key={idx}
|
|
||||||
className="rounded-full bg-[var(--color-accent-soft)] px-1.5 py-0.5 text-[10px] font-semibold text-[var(--color-accent)]"
|
|
||||||
>
|
|
||||||
{num}
|
|
||||||
</span>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div className="px-3 py-2 text-xs text-[var(--color-text-muted)]">
|
||||||
|
{city}
|
||||||
<div className="mt-3 text-sm text-[var(--color-text-muted)]">
|
</div>
|
||||||
{item.deliveryAddress || item.delivery_address || "Адрес не указан"}
|
<div className="px-3 py-2 text-xs text-[var(--color-text-muted)]">
|
||||||
</div>
|
{halfDayLabel || "—"}
|
||||||
</Button>
|
</div>
|
||||||
|
</button>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue