From 112147cb0a2f441a5c90803989b7e4822e7625da Mon Sep 17 00:00:00 2001
From: root <root@whpoejrmfc.local>
Date: Fri, 10 Jul 2026 15:15:16 +0000
Subject: [PATCH] =?UTF-8?q?fix:=20driver=20delivery=20list=20=E2=80=94=20t?=
 =?UTF-8?q?able=20layout=20with=20columns:=20=E2=84=96=20|=20Client=20|=20?=
 =?UTF-8?q?Phone=20|=20City=20|=20Half-day?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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
---
 .../driver/DriverDeliveryPlanner.jsx          | 100 +++++++++---------
 1 file changed, 48 insertions(+), 52 deletions(-)

diff --git a/src/components/driver/DriverDeliveryPlanner.jsx b/src/components/driver/DriverDeliveryPlanner.jsx
index 3435289..a8b0963 100644
--- a/src/components/driver/DriverDeliveryPlanner.jsx
+++ b/src/components/driver/DriverDeliveryPlanner.jsx
@@ -505,65 +505,61 @@ export const DriverDeliveryPlanner = ({ orderGroups = [], onOpenOrder, currentUs
                         <Badge tone={tone}>{label}</Badge>
                         <span className="text-xs text-[var(--color-text-muted)]">{items.length} {pluralGroups(items.length)}</span>
                       </div>
-                      <div className="grid gap-3">
-                        {items.map((item) => {
+                      {/* Table layout — № | Фамилия | Телефон | Город | Часть дня */}
+                      <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 phoneTel = normalizePhoneForTel(item.customerPhone);
                           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 (
-                          <Button
-                            key={item.id}
-                            variant="secondary"
-                            className="rounded-[24px] p-4 text-left"
-                            onClick={() => onOpenOrder?.(item.id)}
-                          >
-                            <div className="flex flex-wrap items-start justify-between gap-3">
-                              <div className="min-w-0 flex-1">
-                                <div className="flex items-center gap-2">
-                                  <span className="font-medium text-[var(--color-text)]">
-                                    {item.displayTitle || item.customerName || item.groupKey}
-                                  </span>
-                                  {hasProblem && (
-                                    <Badge tone="danger">⚠ Частично</Badge>
-                                  )}
-                                </div>
-                                <div className="mt-1 flex flex-wrap items-center gap-x-2 gap-y-1 text-sm text-[var(--color-text-muted)]">
-                                  {item.customerDate && <span>{item.customerDate}</span>}
-                                  {item.customerDate && (halfDayLabel || item.customerPhone) && <span>·</span>}
-                                  {halfDayLabel && <span>{halfDayLabel}</span>}
-                                  {halfDayLabel && item.customerPhone && <span>·</span>}
-                                  {item.customerPhone && phoneTel && (
-                                    <a
-                                      href={`tel:${phoneTel}`}
-                                      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>
+                            <button
+                              key={item.id}
+                              type="button"
+                              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)}
+                            >
+                              <div className="px-3 py-2 text-xs">
+                                <span className="font-semibold text-[var(--color-accent)]">{orderNum}</span>
+                                {hasProblem && <span className="ml-1 text-[10px] font-bold text-[var(--color-danger)]">⚠</span>}
+                              </div>
+                              <div className="px-3 py-2 text-xs font-medium text-[var(--color-text)]">
+                                {item.customerName || item.displayTitle || item.groupKey}
+                              </div>
+                              <div className="px-3 py-2 text-xs">
+                                {item.customerPhone && phoneTel ? (
+                                  <a
+                                    href={`tel:${phoneTel}`}
+                                    onClick={(e) => e.stopPropagation()}
+                                    className="text-[var(--color-accent)] hover:underline"
+                                  >
+                                    {item.customerPhone}
+                                  </a>
+                                ) : (
+                                  <span className="text-[var(--color-text-muted)]">{item.customerPhone || "—"}</span>
                                 )}
                               </div>
-                            </div>
-
-                            <div className="mt-3 text-sm text-[var(--color-text-muted)]">
-                              {item.deliveryAddress || item.delivery_address || "Адрес не указан"}
-                            </div>
-                          </Button>
+                              <div className="px-3 py-2 text-xs text-[var(--color-text-muted)]">
+                                {city}
+                              </div>
+                              <div className="px-3 py-2 text-xs text-[var(--color-text-muted)]">
+                                {halfDayLabel || "—"}
+                              </div>
+                            </button>
                           );
-                        })}
+                          })}
+                        </div>
                       </div>
                     </div>
                   ))}