From a764213a77d03b40c5adb63d0b25d15daa2eca45 Mon Sep 17 00:00:00 2001
From: root <root@cgvcpusuzr.local>
Date: Wed, 27 May 2026 14:16:00 +0000
Subject: [PATCH] feat: logistics board as grouped tables with column headers

---
 .../logistics/LogisticsReadinessBoard.jsx     | 112 +++++++++---------
 1 file changed, 58 insertions(+), 54 deletions(-)

diff --git a/src/components/logistics/LogisticsReadinessBoard.jsx b/src/components/logistics/LogisticsReadinessBoard.jsx
index 4c0b4de..ca5301b 100644
--- a/src/components/logistics/LogisticsReadinessBoard.jsx
+++ b/src/components/logistics/LogisticsReadinessBoard.jsx
@@ -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
-                    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"
-                  >
-                    {/* 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>
-                ))}
-              </div>
+                {!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="cursor-pointer border-t border-[var(--color-border)] transition hover:bg-[var(--color-accent-soft)]"
+                            onClick={() => { if (onSelectSet) onSelectSet(group.id); }}
+                          >
+                            <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>