From 581239cc732959905fd8d0356e8d153f9a582d91 Mon Sep 17 00:00:00 2001
From: root <root@cgvcpusuzr.local>
Date: Tue, 30 Jun 2026 11:43:15 +0000
Subject: [PATCH] =?UTF-8?q?fix:=20unify=20table=20styles=20=E2=80=94=20no?=
 =?UTF-8?q?=20rounded=20rows,=20wider=20type=20col,=20horizontal=20scroll,?=
 =?UTF-8?q?=20pagination=20by=20filtered=20groups?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../logistics/LogisticsReadinessBoard.jsx     | 133 +++++++++---------
 src/components/orders/OrdersTable.jsx         |   9 +-
 2 files changed, 70 insertions(+), 72 deletions(-)

diff --git a/src/components/logistics/LogisticsReadinessBoard.jsx b/src/components/logistics/LogisticsReadinessBoard.jsx
index 8883a4d..3d5eef2 100644
--- a/src/components/logistics/LogisticsReadinessBoard.jsx
+++ b/src/components/logistics/LogisticsReadinessBoard.jsx
@@ -7,7 +7,6 @@ import {
   ORDER_GROUP_DISPLAY_STATUS_OPTIONS,
 } from "../../services/orderGroupViews";
 import { Badge } from "../UI/Badge";
-import { Button } from "../UI/Button";
 import { Panel } from "../UI/Panel";
 import { SkeletonPage } from "../UI/Loading";
 import { Pagination } from "../UI/Pagination";
@@ -33,12 +32,11 @@ export const LogisticsReadinessBoard = ({ orderGroups = [], onSelectSet, statusO
     [filters, orderGroups],
   );
 
-  // Paginate
+  const totalPages = Math.ceil(filteredGroups.length / PAGE_SIZE);
   const paginatedGroups = React.useMemo(() => {
     const start = (page - 1) * PAGE_SIZE;
     return filteredGroups.slice(start, start + PAGE_SIZE);
   }, [filteredGroups, page]);
-  const totalPages = Math.ceil(filteredGroups.length / PAGE_SIZE);
 
   const statusGroups = React.useMemo(() => {
     const map = new Map();
@@ -71,17 +69,18 @@ export const LogisticsReadinessBoard = ({ orderGroups = [], onSelectSet, statusO
 
   const totalGroups = filteredGroups.length;
 
-  const COLS = "grid-cols-[minmax(140px,2fr)_minmax(80px,1fr)_minmax(70px,0.7fr)_minmax(100px,1.2fr)_minmax(80px,1fr)_minmax(100px,1fr)_minmax(120px,1fr)]";
+  // Same column layout as OrdersTable + Тип
+  const COLS = "grid-cols-[minmax(130px,2fr)_minmax(80px,1fr)_minmax(100px,0.8fr)_minmax(100px,1fr)_minmax(100px,1fr)_minmax(90px,0.8fr)_minmax(110px,1fr)]";
 
   const TableHeader = () => (
-    <div className={`grid ${COLS} gap-0 border-b border-[var(--color-border)] bg-[var(--color-surface-strong)] text-xs uppercase tracking-[0.14em] text-[var(--color-text-muted)]`}>
-      <div className="px-4 py-3 font-medium">Клиент</div>
-      <div className="px-4 py-3 font-medium">Город</div>
-      <div className="px-4 py-3 font-medium">Тип</div>
-      <div className="px-4 py-3 font-medium">Дата доставки</div>
-      <div className="px-4 py-3 font-medium">Водитель</div>
-      <div className="px-4 py-3 font-medium">Статус</div>
-      <div className="px-4 py-3 font-medium">Обновлён</div>
+    <div className={`grid ${COLS} gap-0 border-b border-[var(--color-border)] bg-[var(--color-surface-strong)] text-[10px] font-semibold uppercase tracking-wider text-[var(--color-text-muted)]`}>
+      <div className="px-3 py-2.5">Клиент</div>
+      <div className="px-3 py-2.5">Город</div>
+      <div className="px-3 py-2.5">Тип</div>
+      <div className="px-3 py-2.5">Дата доставки</div>
+      <div className="px-3 py-2.5">Водитель</div>
+      <div className="px-3 py-2.5">Статус</div>
+      <div className="px-3 py-2.5">Обновлён</div>
     </div>
   );
 
@@ -112,7 +111,7 @@ export const LogisticsReadinessBoard = ({ orderGroups = [], onSelectSet, statusO
           По этому поиску ничего не найдено.
         </div>
       ) : (
-        <div className="grid gap-4">
+        <div className="grid gap-0">
           {Array.from(statusGroups.entries()).sort(([a], [b]) => {
             const idxA = FUNNEL_ORDER.indexOf(a);
             const idxB = FUNNEL_ORDER.indexOf(b);
@@ -124,10 +123,10 @@ export const LogisticsReadinessBoard = ({ orderGroups = [], onSelectSet, statusO
             const isCollapsed = collapsedSections.has(statusValue);
 
             return (
-              <Panel key={statusValue} className="overflow-hidden p-0">
-                <Button
-                  variant="ghost"
-                  className="flex w-full items-center justify-between px-5 py-3 text-left"
+              <div key={statusValue} className="border-b border-[var(--color-border)] last:border-b-0">
+                {/* Section header — same style as OrdersTable */}
+                <button
+                  type="button"
                   onClick={() => {
                     setCollapsedSections((prev) => {
                       const next = new Set(prev);
@@ -139,65 +138,65 @@ export const LogisticsReadinessBoard = ({ orderGroups = [], onSelectSet, statusO
                       return next;
                     });
                   }}
+                  className="flex w-full items-center gap-3 px-4 py-2.5 text-left transition hover:bg-[var(--color-accent-soft)]"
                 >
-                  <div className="flex items-center gap-2">
-                    <h3 className="font-semibold">{label}</h3>
-                    <Badge tone={groups.length > 0 ? "neutral" : "muted"}>{groups.length}</Badge>
-                  </div>
                   <svg
-                    className="h-4 w-4 text-[var(--color-text-muted)] transition-transform"
-                    style={{ transform: isCollapsed ? "rotate(-90deg)" : "rotate(0deg)" }}
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="currentColor"
-                    strokeWidth={2}
+                    className="h-4 w-4 shrink-0 text-[var(--color-text-muted)] transition-transform"
+                    style={{ transform: isCollapsed ? "rotate(0deg)" : "rotate(90deg)" }}
+                    fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}
                   >
-                    <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
                   </svg>
-                </Button>
+                  <Badge tone={groups.length > 0 ? "neutral" : "muted"}>{label}</Badge>
+                  <span className="text-xs text-[var(--color-text-muted)]">{groups.length}</span>
+                </button>
 
                 {!isCollapsed && (
                   <div className="overflow-x-auto">
-                    <TableHeader />
-                    {groups.map((group) => (
-                      <Button
-                        key={group.id}
-                        variant="ghost"
-                        className={`grid ${COLS} gap-0 w-full border-t border-[var(--color-border)] text-left`}
-                        onClick={() => { if (onSelectSet) onSelectSet(group.id); }}
-                      >
-                        <div 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)]">{group.customerPhone || "—"}</div>
-                        </div>
-                        <div className="px-4 py-2.5 text-sm">
-                          {group.city || group.customerAddress || "—"}
-                        </div>
-                        <div className="px-4 py-2.5">
-                          <span className={`inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-semibold ${group.deliveryType === "pickup" ? "bg-[var(--color-accent-soft)] text-[var(--color-accent)]" : "bg-[var(--color-surface-strong)] text-[var(--color-text-muted)]"}`}>
-                            {group.deliveryType === "pickup" ? "🏪 Самовывоз" : "🚚 Доставка"}
-                          </span>
-                        </div>
-                        <div className="px-4 py-2.5 text-sm">
-                          {group.deliveryDate
-                            ? <span>{formatDate(group.deliveryDate)}{group.deliveryTime ? <span className="text-[var(--color-text-muted)]"> · {group.deliveryTime}</span> : ""}</span>
-                            : <span className="text-[var(--color-text-muted)]">—</span>
-                          }
-                        </div>
-                        <div className="px-4 py-2.5 text-sm">
-                          {group.assignedDriverName || <span className="text-[var(--color-text-muted)]">—</span>}
-                        </div>
-                        <div className="px-4 py-2.5">
-                          <Badge tone={getOrderGroupStatusTone(group)}>{getOrderGroupDisplayStatusLabel(group)}</Badge>
-                        </div>
-                        <div className="px-4 py-2.5 text-sm text-[var(--color-text-muted)]">
-                          {formatDateTime(group.updatedAt)}
-                        </div>
-                      </Button>
-                    ))}
+                    {/* Horizontal scroll wrapper — min-w so columns don't squish */}
+                    <div className="min-w-[960px]">
+                      <TableHeader />
+                      {groups.map((group) => (
+                        <button
+                          key={group.id}
+                          type="button"
+                          className={`grid ${COLS} gap-0 w-full border-t border-[var(--color-border)] text-left transition hover:bg-[var(--color-accent-soft)]`}
+                          onClick={() => { if (onSelectSet) onSelectSet(group.id); }}
+                        >
+                          <div className="min-w-0 px-3 py-1.5">
+                            <div className="text-xs font-medium leading-snug break-words" style={{display:"-webkit-box",WebkitLineClamp:2,WebkitBoxOrient:"vertical",overflow:"hidden"}}>{group.displayTitle || group.customerName || group.groupKey}</div>
+                            <div className="mt-0.5 text-[11px] text-[var(--color-text-muted)]">{group.customerPhone || "—"}</div>
+                          </div>
+                          <div className="px-3 py-1.5 text-xs text-[var(--color-text-muted)]">
+                            {group.city || "—"}
+                          </div>
+                          <div className="px-3 py-1.5 text-xs">
+                            <span className="inline-flex items-center gap-1">
+                              {group.deliveryType === "pickup" ? "🏪" : "🚚"}
+                              <span className="text-[var(--color-text-muted)]">{group.deliveryType === "pickup" ? "Самовывоз" : "Доставка"}</span>
+                            </span>
+                          </div>
+                          <div className="px-3 py-1.5 text-xs">
+                            {group.deliveryDate
+                              ? <span>{formatDate(group.deliveryDate)}{group.deliveryTime ? <span className="text-[var(--color-text-muted)]"> · {group.deliveryTime}</span> : ""}</span>
+                              : <span className="text-[var(--color-text-muted)]">—</span>
+                            }
+                          </div>
+                          <div className="px-3 py-1.5 text-xs">
+                            {group.assignedDriverName || <span className="text-[var(--color-text-muted)]">—</span>}
+                          </div>
+                          <div className="px-3 py-1.5 flex items-center">
+                            <Badge tone={getOrderGroupStatusTone(group)}>{getOrderGroupDisplayStatusLabel(group)}</Badge>
+                          </div>
+                          <div className="px-3 py-1.5 text-xs text-[var(--color-text-muted)]">
+                            {formatDateTime(group.updatedAt)}
+                          </div>
+                        </button>
+                      ))}
+                    </div>
                   </div>
                 )}
-              </Panel>
+              </div>
             );
           })}
         </div>
diff --git a/src/components/orders/OrdersTable.jsx b/src/components/orders/OrdersTable.jsx
index 637e3cc..2004077 100644
--- a/src/components/orders/OrdersTable.jsx
+++ b/src/components/orders/OrdersTable.jsx
@@ -92,7 +92,7 @@ const StatusSection = ({ statusKey, groups, isOpen, onToggle, selectedOrderGroup
           {groups.map((group) => {
             const hasProblem = group.hasDeliveryProblem;
             const isAgreedRow = isAgreedDelivery(group);
-            const rowClassName = `grid grid-cols-[minmax(130px,2fr)_minmax(90px,1fr)_minmax(80px,0.8fr)_minmax(80px,1fr)_minmax(100px,1fr)_minmax(70px,0.7fr)_minmax(80px,0.8fr)] gap-0 w-full border-t text-left transition ${
+            const rowClassName = `grid grid-cols-[minmax(130px,2fr)_minmax(90px,1fr)_minmax(80px,0.8fr)_minmax(80px,1fr)_minmax(100px,1fr)_minmax(100px,0.8fr)_minmax(80px,0.8fr)] gap-0 w-full border-t text-left transition ${
               isAgreedRow
                 ? "border-[rgba(18,128,92,0.25)] bg-[rgba(18,128,92,0.07)] hover:bg-[rgba(18,128,92,0.12)]"
                 : hasProblem
@@ -265,14 +265,13 @@ export const OrdersTable = ({
   const [page, setPage] = useState(1);
   const PAGE_SIZE = 30;
 
-  // Paginate groups before grouping
+  // Paginate filtered groups (after filter, before grouping)
+  const totalPages = Math.ceil(orderGroups.length / PAGE_SIZE);
   const paginatedGroups = useMemo(() => {
     const start = (page - 1) * PAGE_SIZE;
     return orderGroups.slice(start, start + PAGE_SIZE);
   }, [orderGroups, page]);
 
-  const totalPages = Math.ceil(orderGroups.length / PAGE_SIZE);
-
   // Group by status
   const grouped = useMemo(() => {
     const map = {};
@@ -354,7 +353,7 @@ export const OrdersTable = ({
           </div>
         ) : (
           <div className="overflow-x-auto">
-            <div className="min-w-[920px]">
+            <div className="min-w-[1000px]">
               {grouped.map(({ key, groups }) => (
                 <StatusSection
                   key={key}