siesa-ui-kit 1.0.2 → 1.0.4

package/src/views/TableLayoutView/TableLayoutView.tsx

@@ -1,461 +1,461 @@
-import React from 'react';
-import type { TableLayoutViewProps } from './TableLayoutView.types';
-import { Navbar } from '../../components/Navbar/Navbar';
-import { POSLocationButton } from '../../components/POSLocationButton/POSLocationButton';
-import { POSTable } from '../../components/POSTable/POSTable';
-import { POSConvention } from '../../components/POSConvention/POSConvention';
-import { POSNumberButton } from '../../components/POSNumberButton/POSNumberButton';
-import { Switch } from '../../components/Switch/Switch';
-import { Button } from '../../components/Button/Button';
-import {
-  PlusIcon,
-  ArrowsPointingInIcon,
-  ArrowsPointingOutIcon,
-  ArrowRightEndOnRectangleIcon,
-  ArrowsRightLeftIcon,
-  RectangleGroupIcon,
-  XMarkIcon,
-} from './icons';
-
-/**
- * TableLayoutView - Vista de layout de mesas para restaurante (POS)
- *
- * Vista completa pixel-perfect según especificaciones de Figma que incluye:
- * - Navbar superior con usuario y acciones
- * - Sidebar izquierdo con lista de salones/ubicaciones
- * - Área central con grid de mesas y controles
- * - Sidebar derecho con selector de cantidad de personas
- * - Leyenda de convenciones al pie del área central
- *
- * **Layout responsive:**
- * - Mobile: Columnas apiladas verticalmente
- * - Desktop: 3 columnas (sidebar izq 245px + centro flex + sidebar der 304px)
- *
- * **Mejores prácticas implementadas:**
- * - Orden de modificadores: {responsive}:{dark}:{state}:{utility}
- * - Dark mode con estrategia 'class' (darkMode: 'class')
- * - Tokens de color consistentes con la documentación
- * - Type safety con TypeScript estricto
- * - Accesibilidad con ARIA labels
- * - Mobile-first responsive design
- *
- * @see docs/colors.md - Sistema de colores
- * @see docs/typography.md - Sistema tipográfico
- * @see docs/spacing.md - Sistema de espaciado
- * @see docs/shadows.md - Sistema de sombras
- *
- * @example
- * ```tsx
- * <TableLayoutView
- *   locations={[
- *     { id: '1', name: 'Antejardín', status: 'available', capacity: { current: 1, total: 8 } },
- *     { id: '2', name: 'Terraza', status: 'occupied', capacity: { current: 8, total: 8 } },
- *   ]}
- *   tables={[
- *     { tableNumber: '01', status: 'available', shape: 'square', chairs: 8, isActive: true },
- *     { tableNumber: '02', status: 'available', shape: 'circle', chairs: 2 },
- *   ]}
- *   onTableSelect={(tableNum) => console.log('Mesa seleccionada:', tableNum)}
- * />
- * ```
- */
-export const TableLayoutView: React.FC<TableLayoutViewProps> = ({
-  locations = [],
-  activeLocationId,
-  tables = [],
-  tablesTitle = 'Mesas de Antejardín',
-  showPeopleCountPanel = false,
-  selectedTable,
-  onLocationSelect,
-  onTableSelect,
-  onCreateTables,
-  onMergeTables,
-  onSplitTables,
-  onPeopleCountSelect,
-  onAssignTable,
-  onTransferTable,
-  onSetCutlery,
-  onClosePeoplePanel,
-  onTableSwitchChange,
-  isLoading = false,
-  errorMessage,
-  tableLayout = 'grid',
-  className = '',
-  userInfo,
-}) => {
-  // ===== RENDER NAVBAR =====
-  const renderNavbar = () => (
-    <div className="w-full shrink-0">
-      <Navbar
-        variant="desktop"
-        productName=""
-        userDropdown={
-          userInfo
-            ? {
-              avatar: userInfo.avatar,
-              name: userInfo.name,
-              email: userInfo.role,
-              onMenuClick: () => { },
-            }
-            : undefined
-        }
-      />
-    </div>
-  );
-
-  // ===== RENDER SIDEBAR IZQUIERDO (SALONES) =====
-  const renderLocationsSidebar = () => (
-    <div
-      className={[
-        'w-full',
-        'md:w-[245px]',
-        'h-auto',
-        'md:h-full',
-        'shrink-0',
-        'flex',
-        'flex-col',
-        'gap-2.5',
-        'p-4',
-        'overflow-auto',
-      ].join(' ')}
-    >
-      {/* Título */}
-      <div className="w-full">
-        <h2
-          className={[
-            'text-xl',
-            'leading-7',
-            'font-bold',
-            'tracking-[-0.5px]',
-            'text-content-primary',
-            'dark:text-dark-content-primary',
-          ].join(' ')}
-        >
-          Salones
-        </h2>
-      </div>
-
-      {/* Lista de ubicaciones */}
-      <div className="flex flex-col gap-2 w-full">
-        {isLoading ? (
-          <div className="text-content-secondary dark:text-content-secondary text-sm">
-            Cargando salones...
-          </div>
-        ) : locations.length === 0 ? (
-          <div className="text-content-secondary dark:text-content-secondary text-sm">
-            No hay salones disponibles
-          </div>
-        ) : (
-          locations.map((location) => (
-            <POSLocationButton
-              key={location.id}
-              locationName={location.name}
-              status={location.status}
-              state={location.id === activeLocationId ? 'actived' : 'enabled'}
-              capacity={location.capacity}
-              onClick={() => onLocationSelect?.(location.id)}
-            />
-          ))
-        )}
-      </div>
-    </div>
-  );
-
-  // ===== RENDER ÁREA CENTRAL (MESAS) =====
-  const renderTablesArea = () => (
-    <div
-      className={[
-        'flex-1',
-        'min-w-0',
-        'flex',
-        'flex-col',
-        'gap-4',
-        'p-4',
-        'bg-white',
-        'dark:bg-dark-bg-primary',
-        'rounded-tl-3xl',
-        'rounded-tr-3xl',
-        'overflow-auto',
-      ].join(' ')}
-    >
-      {/* Header con título y botones */}
-      <div className="flex flex-col md:flex-row gap-4 items-start md:items-center justify-between w-full">
-        {/* Título */}
-        <h2
-          className={[
-            'text-xl',
-            'leading-7',
-            'font-bold',
-            'tracking-[-0.5px]',
-            'text-content-primary',
-            'dark:text-dark-content-primary',
-            'flex-1',
-          ].join(' ')}
-        >
-          {tablesTitle}
-        </h2>
-
-        {/* Botones de acción */}
-        <div className="flex gap-2 flex-wrap">
-          <Button
-            type="default"
-            size="sm"
-            leftIcon={<PlusIcon />}
-            onClick={onCreateTables}
-          >
-            Crear Mesas
-          </Button>
-          <Button
-            type="default"
-            size="sm"
-            leftIcon={<ArrowsPointingInIcon />}
-            onClick={onMergeTables}
-          >
-            Unir Mesas
-          </Button>
-          <Button
-            type="default"
-            size="sm"
-            leftIcon={<ArrowsPointingOutIcon />}
-            onClick={onSplitTables}
-          >
-            Separar Mesas
-          </Button>
-        </div>
-      </div>
-
-      {/* Área de mesas */}
-      <div
-        className={[
-          'flex-1',
-          'bg-background-secondary',
-          'dark:bg-dark-bg-secondary',
-          'rounded-xl',
-          'p-4',
-          'overflow-auto',
-          'min-h-[400px]',
-        ].join(' ')}
-      >
-        {isLoading ? (
-          <div className="flex items-center justify-center h-full text-content-secondary dark:text-content-secondary">
-            Cargando mesas...
-          </div>
-        ) : errorMessage ? (
-          <div className="flex items-center justify-center h-full text-error-content dark:text-error-content">
-            {errorMessage}
-          </div>
-        ) : tables.length === 0 ? (
-          <div className="flex items-center justify-center h-full text-content-secondary dark:text-content-secondary">
-            No hay mesas en esta ubicación
-          </div>
-        ) : tableLayout === 'grid' ? (
-          /* Layout Flexbox centrado con ancho máximo restringido para 4 columnas (160px * 4 + 8px * 3 = 664px) */
-          <div className="flex flex-col items-center justify-center min-h-full w-full p-4">
-            <div className="flex flex-wrap gap-2 justify-center max-w-[664px]">
-              {tables.map((table) => (
-                <POSTable
-                  key={table.tableNumber}
-                  tableNumber={table.tableNumber}
-                  status={table.status}
-                  shape={table.shape}
-                  chairs={table.chairs}
-                  isActive={table.isActive}
-                  onClick={() => onTableSelect?.(table.tableNumber)}
-                />
-              ))}
-            </div>
-          </div>
-        ) : (
-          /* Layout libre con posicionamiento absoluto */
-          <div className="relative w-full h-full min-h-[400px]">
-            {tables.map((table) => (
-              <div
-                key={table.tableNumber}
-                className="absolute"
-                style={
-                  table.position
-                    ? {
-                      left: `${table.position.x}%`,
-                      top: `${table.position.y}%`,
-                      transform: 'translate(-50%, -50%)',
-                    }
-                    : undefined
-                }
-              >
-                <POSTable
-                  tableNumber={table.tableNumber}
-                  status={table.status}
-                  shape={table.shape}
-                  chairs={table.chairs}
-                  isActive={table.isActive}
-                  onClick={() => onTableSelect?.(table.tableNumber)}
-                />
-              </div>
-            ))}
-          </div>
-        )}
-      </div>
-
-      {/* Leyenda de convenciones */}
-      <div className="flex flex-wrap gap-4 items-center w-full">
-        <POSConvention status="available" />
-        <POSConvention status="occupied" />
-        <POSConvention status="reserved" />
-        <POSConvention status="outOfService" />
-      </div>
-    </div>
-  );
-
-  // ===== RENDER SIDEBAR DERECHO (SELECTOR DE PERSONAS) =====
-  const renderPeopleCountSidebar = () => {
-    if (!showPeopleCountPanel) return null;
-
-    return (
-      <div
-        className={[
-          'w-full',
-          'md:w-[304px]',
-          'shrink-0',
-          'flex',
-          'flex-col',
-          'p-4',
-          'overflow-hidden',
-        ].join(' ')}
-      >
-        {/* Header con switch y botón cerrar */}
-        <div className="flex items-center justify-between w-full pb-4 border-b border-border-primary dark:border-dark-border-primary shrink-0">
-          <Switch
-            label={selectedTable?.locationName || 'Ubicación'}
-            description={selectedTable?.tableName || 'Mesa'}
-            labelPosition="trailing"
-            checked={false}
-            onChange={(e) => onTableSwitchChange?.(e.target.checked)}
-          />
-          <button
-            className={[
-              'p-2',
-              'rounded-md',
-              'border',
-              'border-primary-custom-300',
-              'text-primary-custom-600',
-              'hover:bg-background-secondary',
-              'dark:border-dark-border-custom',
-              'dark:hover:bg-dark-bg-primary',
-              'transition-colors',
-            ].join(' ')}
-            onClick={onClosePeoplePanel}
-            aria-label="Cerrar panel"
-          >
-            <XMarkIcon className="w-4 h-4" />
-          </button>
-        </div>
-
-        {/* Body - Título, descripción y teclado numérico */}
-        <div className="flex flex-col gap-2 w-full flex-1 overflow-auto pt-4">
-          {/* Título y descripción */}
-          <div className="flex flex-col gap-1 w-full">
-            <h3
-              className={[
-                'text-xl',
-                'leading-7',
-                'font-bold',
-                'tracking-[-0.5px]',
-                'text-content-primary',
-                'dark:text-dark-content-primary',
-              ].join(' ')}
-            >
-              Tomar pedido
-            </h3>
-            <p
-              className={[
-                'text-sm',
-                'leading-5',
-                'text-content-primary',
-                'dark:text-dark-content-primary',
-              ].join(' ')}
-            >
-              Selecciona la cantidad de personas
-            </p>
-          </div>
-
-          {/* Teclado numérico 3x3 */}
-          <div className="grid grid-cols-3 gap-2 w-full mt-2">
-            {[1, 2, 3, 4, 5, 6, 7, 8].map((num) => (
-              <POSNumberButton
-                key={num}
-                size="l"
-                border
-                onClick={() => onPeopleCountSelect?.(num)}
-              >
-                {num}
-              </POSNumberButton>
-            ))}
-          </div>
-        </div>
-
-        {/* Footer - Botones de acción FIJADOS AL BOTTOM con border-top */}
-        <div className="flex flex-col gap-4 w-full pt-4 mt-auto shrink-0 grow-0 basis-auto border-t border-border-primary dark:border-dark-border-primary">
-          <Button
-            type="default"
-            size="sm"
-            fullWidth
-            leftIcon={<ArrowRightEndOnRectangleIcon />}
-            onClick={onAssignTable}
-          >
-            Asignar
-          </Button>
-          <div className="flex gap-2 w-full">
-            <Button
-              type="outline"
-              size="sm"
-              fullWidth
-              leftIcon={<ArrowsRightLeftIcon />}
-              onClick={onTransferTable}
-            >
-              Transferir
-            </Button>
-            <Button
-              type="outline"
-              size="sm"
-              fullWidth
-              leftIcon={<RectangleGroupIcon />}
-              onClick={onSetCutlery}
-            >
-              Cubiertos
-            </Button>
-          </div>
-        </div>
-      </div>
-    );
-  };
-
-  // ===== RENDER PRINCIPAL =====
-  return (
-    <div
-      className={[
-        'flex',
-        'flex-col',
-        'w-full',
-        'min-h-screen',
-        'bg-background-secondary',
-        'dark:bg-dark-bg-primary',
-        className,
-      ].join(' ')}
-    >
-      {/* Navbar */}
-      {renderNavbar()}
-
-      {/* Contenedor principal con sidebars y área central */}
-      <div className="flex flex-1 w-full overflow-hidden">
-        {/* Sidebar izquierdo - Salones */}
-        {renderLocationsSidebar()}
-
-        {/* Área central - Mesas */}
-        {renderTablesArea()}
-
-        {/* Sidebar derecho - Selector de personas (condicional) */}
-        {renderPeopleCountSidebar()}
-      </div>
-    </div>
-  );
-};
+import React from 'react';
+import type { TableLayoutViewProps } from './TableLayoutView.types';
+import { Navbar } from '../../components/Navbar/Navbar';
+import { POSLocationButton } from '../../components/POSLocationButton/POSLocationButton';
+import { POSTable } from '../../components/POSTable/POSTable';
+import { POSConvention } from '../../components/POSConvention/POSConvention';
+import { POSNumberButton } from '../../components/POSNumberButton/POSNumberButton';
+import { Switch } from '../../components/Switch/Switch';
+import { Button } from '../../components/Button/Button';
+import {
+  PlusIcon,
+  ArrowsPointingInIcon,
+  ArrowsPointingOutIcon,
+  ArrowRightEndOnRectangleIcon,
+  ArrowsRightLeftIcon,
+  RectangleGroupIcon,
+  XMarkIcon,
+} from './icons';
+
+/**
+ * TableLayoutView - Vista de layout de mesas para restaurante (POS)
+ *
+ * Vista completa pixel-perfect según especificaciones de Figma que incluye:
+ * - Navbar superior con usuario y acciones
+ * - Sidebar izquierdo con lista de salones/ubicaciones
+ * - Área central con grid de mesas y controles
+ * - Sidebar derecho con selector de cantidad de personas
+ * - Leyenda de convenciones al pie del área central
+ *
+ * **Layout responsive:**
+ * - Mobile: Columnas apiladas verticalmente
+ * - Desktop: 3 columnas (sidebar izq 245px + centro flex + sidebar der 304px)
+ *
+ * **Mejores prácticas implementadas:**
+ * - Orden de modificadores: {responsive}:{dark}:{state}:{utility}
+ * - Dark mode con estrategia 'class' (darkMode: 'class')
+ * - Tokens de color consistentes con la documentación
+ * - Type safety con TypeScript estricto
+ * - Accesibilidad con ARIA labels
+ * - Mobile-first responsive design
+ *
+ * @see docs/colors.md - Sistema de colores
+ * @see docs/typography.md - Sistema tipográfico
+ * @see docs/spacing.md - Sistema de espaciado
+ * @see docs/shadows.md - Sistema de sombras
+ *
+ * @example
+ * ```tsx
+ * <TableLayoutView
+ *   locations={[
+ *     { id: '1', name: 'Antejardín', status: 'available', capacity: { current: 1, total: 8 } },
+ *     { id: '2', name: 'Terraza', status: 'occupied', capacity: { current: 8, total: 8 } },
+ *   ]}
+ *   tables={[
+ *     { tableNumber: '01', status: 'available', shape: 'square', chairs: 8, isActive: true },
+ *     { tableNumber: '02', status: 'available', shape: 'circle', chairs: 2 },
+ *   ]}
+ *   onTableSelect={(tableNum) => console.log('Mesa seleccionada:', tableNum)}
+ * />
+ * ```
+ */
+export const TableLayoutView: React.FC<TableLayoutViewProps> = ({
+  locations = [],
+  activeLocationId,
+  tables = [],
+  tablesTitle = 'Mesas de Antejardín',
+  showPeopleCountPanel = false,
+  selectedTable,
+  onLocationSelect,
+  onTableSelect,
+  onCreateTables,
+  onMergeTables,
+  onSplitTables,
+  onPeopleCountSelect,
+  onAssignTable,
+  onTransferTable,
+  onSetCutlery,
+  onClosePeoplePanel,
+  onTableSwitchChange,
+  isLoading = false,
+  errorMessage,
+  tableLayout = 'grid',
+  className = '',
+  userInfo,
+}) => {
+  // ===== RENDER NAVBAR =====
+  const renderNavbar = () => (
+    <div className="w-full shrink-0">
+      <Navbar
+        variant="desktop"
+        productName=""
+        userDropdown={
+          userInfo
+            ? {
+              avatar: userInfo.avatar,
+              name: userInfo.name,
+              email: userInfo.role,
+              onMenuClick: () => { },
+            }
+            : undefined
+        }
+      />
+    </div>
+  );
+
+  // ===== RENDER SIDEBAR IZQUIERDO (SALONES) =====
+  const renderLocationsSidebar = () => (
+    <div
+      className={[
+        'w-full',
+        'md:w-[245px]',
+        'h-auto',
+        'md:h-full',
+        'shrink-0',
+        'flex',
+        'flex-col',
+        'gap-2.5',
+        'p-4',
+        'overflow-auto',
+      ].join(' ')}
+    >
+      {/* Título */}
+      <div className="w-full">
+        <h2
+          className={[
+            'text-xl',
+            'leading-7',
+            'font-bold',
+            'tracking-[-0.5px]',
+            'text-content-primary',
+            'dark:text-dark-content-primary',
+          ].join(' ')}
+        >
+          Salones
+        </h2>
+      </div>
+
+      {/* Lista de ubicaciones */}
+      <div className="flex flex-col gap-2 w-full">
+        {isLoading ? (
+          <div className="text-content-secondary dark:text-content-secondary text-sm">
+            Cargando salones...
+          </div>
+        ) : locations.length === 0 ? (
+          <div className="text-content-secondary dark:text-content-secondary text-sm">
+            No hay salones disponibles
+          </div>
+        ) : (
+          locations.map((location) => (
+            <POSLocationButton
+              key={location.id}
+              locationName={location.name}
+              status={location.status}
+              state={location.id === activeLocationId ? 'actived' : 'enabled'}
+              capacity={location.capacity}
+              onClick={() => onLocationSelect?.(location.id)}
+            />
+          ))
+        )}
+      </div>
+    </div>
+  );
+
+  // ===== RENDER ÁREA CENTRAL (MESAS) =====
+  const renderTablesArea = () => (
+    <div
+      className={[
+        'flex-1',
+        'min-w-0',
+        'flex',
+        'flex-col',
+        'gap-4',
+        'p-4',
+        'bg-white',
+        'dark:bg-dark-bg-primary',
+        'rounded-tl-3xl',
+        'rounded-tr-3xl',
+        'overflow-auto',
+      ].join(' ')}
+    >
+      {/* Header con título y botones */}
+      <div className="flex flex-col md:flex-row gap-4 items-start md:items-center justify-between w-full">
+        {/* Título */}
+        <h2
+          className={[
+            'text-xl',
+            'leading-7',
+            'font-bold',
+            'tracking-[-0.5px]',
+            'text-content-primary',
+            'dark:text-dark-content-primary',
+            'flex-1',
+          ].join(' ')}
+        >
+          {tablesTitle}
+        </h2>
+
+        {/* Botones de acción */}
+        <div className="flex gap-2 flex-wrap">
+          <Button
+            type="default"
+            size="sm"
+            leftIcon={<PlusIcon />}
+            onClick={onCreateTables}
+          >
+            Crear Mesas
+          </Button>
+          <Button
+            type="default"
+            size="sm"
+            leftIcon={<ArrowsPointingInIcon />}
+            onClick={onMergeTables}
+          >
+            Unir Mesas
+          </Button>
+          <Button
+            type="default"
+            size="sm"
+            leftIcon={<ArrowsPointingOutIcon />}
+            onClick={onSplitTables}
+          >
+            Separar Mesas
+          </Button>
+        </div>
+      </div>
+
+      {/* Área de mesas */}
+      <div
+        className={[
+          'flex-1',
+          'bg-background-secondary',
+          'dark:bg-dark-bg-secondary',
+          'rounded-xl',
+          'p-4',
+          'overflow-auto',
+          'min-h-[400px]',
+        ].join(' ')}
+      >
+        {isLoading ? (
+          <div className="flex items-center justify-center h-full text-content-secondary dark:text-content-secondary">
+            Cargando mesas...
+          </div>
+        ) : errorMessage ? (
+          <div className="flex items-center justify-center h-full text-error-content dark:text-error-content">
+            {errorMessage}
+          </div>
+        ) : tables.length === 0 ? (
+          <div className="flex items-center justify-center h-full text-content-secondary dark:text-content-secondary">
+            No hay mesas en esta ubicación
+          </div>
+        ) : tableLayout === 'grid' ? (
+          /* Layout Flexbox centrado con ancho máximo restringido para 4 columnas (160px * 4 + 8px * 3 = 664px) */
+          <div className="flex flex-col items-center justify-center min-h-full w-full p-4">
+            <div className="flex flex-wrap gap-2 justify-center max-w-[664px]">
+              {tables.map((table) => (
+                <POSTable
+                  key={table.tableNumber}
+                  tableNumber={table.tableNumber}
+                  status={table.status}
+                  shape={table.shape}
+                  chairs={table.chairs}
+                  isActive={table.isActive}
+                  onClick={() => onTableSelect?.(table.tableNumber)}
+                />
+              ))}
+            </div>
+          </div>
+        ) : (
+          /* Layout libre con posicionamiento absoluto */
+          <div className="relative w-full h-full min-h-[400px]">
+            {tables.map((table) => (
+              <div
+                key={table.tableNumber}
+                className="absolute"
+                style={
+                  table.position
+                    ? {
+                      left: `${table.position.x}%`,
+                      top: `${table.position.y}%`,
+                      transform: 'translate(-50%, -50%)',
+                    }
+                    : undefined
+                }
+              >
+                <POSTable
+                  tableNumber={table.tableNumber}
+                  status={table.status}
+                  shape={table.shape}
+                  chairs={table.chairs}
+                  isActive={table.isActive}
+                  onClick={() => onTableSelect?.(table.tableNumber)}
+                />
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* Leyenda de convenciones */}
+      <div className="flex flex-wrap gap-4 items-center w-full">
+        <POSConvention status="available" />
+        <POSConvention status="occupied" />
+        <POSConvention status="reserved" />
+        <POSConvention status="outOfService" />
+      </div>
+    </div>
+  );
+
+  // ===== RENDER SIDEBAR DERECHO (SELECTOR DE PERSONAS) =====
+  const renderPeopleCountSidebar = () => {
+    if (!showPeopleCountPanel) return null;
+
+    return (
+      <div
+        className={[
+          'w-full',
+          'md:w-[304px]',
+          'shrink-0',
+          'flex',
+          'flex-col',
+          'p-4',
+          'overflow-hidden',
+        ].join(' ')}
+      >
+        {/* Header con switch y botón cerrar */}
+        <div className="flex items-center justify-between w-full pb-4 border-b border-border-primary dark:border-dark-border-primary shrink-0">
+          <Switch
+            label={selectedTable?.locationName || 'Ubicación'}
+            description={selectedTable?.tableName || 'Mesa'}
+            labelPosition="trailing"
+            checked={false}
+            onChange={(e) => onTableSwitchChange?.(e.target.checked)}
+          />
+          <button
+            className={[
+              'p-2',
+              'rounded-md',
+              'border',
+              'border-primary-custom-300',
+              'text-primary-custom-600',
+              'hover:bg-background-secondary',
+              'dark:border-dark-border-custom',
+              'dark:hover:bg-dark-bg-primary',
+              'transition-colors',
+            ].join(' ')}
+            onClick={onClosePeoplePanel}
+            aria-label="Cerrar panel"
+          >
+            <XMarkIcon className="w-4 h-4" />
+          </button>
+        </div>
+
+        {/* Body - Título, descripción y teclado numérico */}
+        <div className="flex flex-col gap-2 w-full flex-1 overflow-auto pt-4">
+          {/* Título y descripción */}
+          <div className="flex flex-col gap-1 w-full">
+            <h3
+              className={[
+                'text-xl',
+                'leading-7',
+                'font-bold',
+                'tracking-[-0.5px]',
+                'text-content-primary',
+                'dark:text-dark-content-primary',
+              ].join(' ')}
+            >
+              Tomar pedido
+            </h3>
+            <p
+              className={[
+                'text-sm',
+                'leading-5',
+                'text-content-primary',
+                'dark:text-dark-content-primary',
+              ].join(' ')}
+            >
+              Selecciona la cantidad de personas
+            </p>
+          </div>
+
+          {/* Teclado numérico 3x3 */}
+          <div className="grid grid-cols-3 gap-2 w-full mt-2">
+            {[1, 2, 3, 4, 5, 6, 7, 8].map((num) => (
+              <POSNumberButton
+                key={num}
+                size="l"
+                border
+                onClick={() => onPeopleCountSelect?.(num)}
+              >
+                {num}
+              </POSNumberButton>
+            ))}
+          </div>
+        </div>
+
+        {/* Footer - Botones de acción FIJADOS AL BOTTOM con border-top */}
+        <div className="flex flex-col gap-4 w-full pt-4 mt-auto shrink-0 grow-0 basis-auto border-t border-border-primary dark:border-dark-border-primary">
+          <Button
+            type="default"
+            size="sm"
+            fullWidth
+            leftIcon={<ArrowRightEndOnRectangleIcon />}
+            onClick={onAssignTable}
+          >
+            Asignar
+          </Button>
+          <div className="flex gap-2 w-full">
+            <Button
+              type="outline"
+              size="sm"
+              fullWidth
+              leftIcon={<ArrowsRightLeftIcon />}
+              onClick={onTransferTable}
+            >
+              Transferir
+            </Button>
+            <Button
+              type="outline"
+              size="sm"
+              fullWidth
+              leftIcon={<RectangleGroupIcon />}
+              onClick={onSetCutlery}
+            >
+              Cubiertos
+            </Button>
+          </div>
+        </div>
+      </div>
+    );
+  };
+
+  // ===== RENDER PRINCIPAL =====
+  return (
+    <div
+      className={[
+        'flex',
+        'flex-col',
+        'w-full',
+        'min-h-screen',
+        'bg-background-secondary',
+        'dark:bg-dark-bg-primary',
+        className,
+      ].join(' ')}
+    >
+      {/* Navbar */}
+      {renderNavbar()}
+
+      {/* Contenedor principal con sidebars y área central */}
+      <div className="flex flex-1 w-full overflow-hidden">
+        {/* Sidebar izquierdo - Salones */}
+        {renderLocationsSidebar()}
+
+        {/* Área central - Mesas */}
+        {renderTablesArea()}
+
+        {/* Sidebar derecho - Selector de personas (condicional) */}
+        {renderPeopleCountSidebar()}
+      </div>
+    </div>
+  );
+};