siesa-ui-kit 1.0.3 → 1.0.5

package/src/views/TableLayoutView/TableLayoutView.tsx

@@ -0,0 +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>
+  );
+};

package/src/views/TableLayoutView/TableLayoutView.types.ts

@@ -0,0 +1,209 @@
+import type { ConventionStatus } from '../../components/POSConvention/POSConvention.types';
+
+/**
+ * Estado de una ubicación/salón
+ */
+export interface Location {
+  /**
+   * ID único de la ubicación
+   */
+  id: string;
+
+  /**
+   * Nombre de la ubicación (ej: "Antejardín", "Terraza", "Bar")
+   */
+  name: string;
+
+  /**
+   * Estado general de la ubicación
+   */
+  status: ConventionStatus;
+
+  /**
+   * Capacidad actual (mesas ocupadas/total)
+   */
+  capacity: {
+    current: number;
+    total: number;
+  };
+}
+
+/**
+ * Estado de mesa compatible con POSTable
+ * Nota: 'busy' se usa en lugar de 'occupied' para mantener compatibilidad con POSTable
+ */
+export type TableStatus = 'available' | 'busy' | 'reserved';
+
+/**
+ * Mesa en el layout
+ */
+export interface TableItem {
+  /**
+   * Número de la mesa (ej: "01", "02")
+   */
+  tableNumber: string;
+
+  /**
+   * Estado actual de la mesa
+   * Nota: usa 'busy' en lugar de 'occupied' para POSTable
+   */
+  status: TableStatus;
+
+  /**
+   * Forma de la mesa
+   */
+  shape: 'square' | 'circle' | 'rectangle' | 'oval';
+
+  /**
+   * Cantidad de sillas (2, 4, 6, 8)
+   */
+  chairs: 2 | 4 | 6 | 8;
+
+  /**
+   * Si la mesa está actualmente seleccionada
+   */
+  isActive?: boolean;
+
+  /**
+   * Posición en el grid (opcional, para layout libre)
+   */
+  position?: {
+    x: number;
+    y: number;
+  };
+}
+
+/**
+ * Props del componente TableLayoutView
+ */
+export interface TableLayoutViewProps {
+  /**
+   * Lista de ubicaciones/salones disponibles
+   */
+  locations?: Location[];
+
+  /**
+   * ID de la ubicación actualmente seleccionada
+   */
+  activeLocationId?: string;
+
+  /**
+   * Lista de mesas en el layout actual
+   */
+  tables?: TableItem[];
+
+  /**
+   * Título del área de mesas (ej: "Mesas de Antejardín")
+   */
+  tablesTitle?: string;
+
+  /**
+   * Si se está mostrando el panel de selección de personas
+   */
+  showPeopleCountPanel?: boolean;
+
+  /**
+   * Información de la mesa seleccionada para el panel
+   */
+  selectedTable?: {
+    locationName: string;
+    tableName: string;
+  };
+
+  /**
+   * Cantidad de personas seleccionada
+   */
+  peopleCount?: number;
+
+  // ===== CALLBACKS =====
+
+  /**
+   * Callback cuando se selecciona una ubicación/salón
+   */
+  onLocationSelect?: (locationId: string) => void;
+
+  /**
+   * Callback cuando se selecciona una mesa
+   */
+  onTableSelect?: (tableNumber: string) => void;
+
+  /**
+   * Callback cuando se hace clic en "Crear Mesas"
+   */
+  onCreateTables?: () => void;
+
+  /**
+   * Callback cuando se hace clic en "Unir Mesas"
+   */
+  onMergeTables?: () => void;
+
+  /**
+   * Callback cuando se hace clic en "Separar Mesas"
+   */
+  onSplitTables?: () => void;
+
+  /**
+   * Callback cuando se selecciona un número de personas
+   */
+  onPeopleCountSelect?: (count: number) => void;
+
+  /**
+   * Callback cuando se hace clic en "Asignar"
+   */
+  onAssignTable?: () => void;
+
+  /**
+   * Callback cuando se hace clic en "Transferir"
+   */
+  onTransferTable?: () => void;
+
+  /**
+   * Callback cuando se hace clic en "Cubiertos"
+   */
+  onSetCutlery?: () => void;
+
+  /**
+   * Callback cuando se cierra el panel de personas
+   */
+  onClosePeoplePanel?: () => void;
+
+  /**
+   * Callback cuando cambia el switch de la mesa
+   */
+  onTableSwitchChange?: (checked: boolean) => void;
+
+  // ===== ESTADOS DE CARGA =====
+
+  /**
+   * Si se está cargando información
+   */
+  isLoading?: boolean;
+
+  /**
+   * Mensaje de error (si existe)
+   */
+  errorMessage?: string;
+
+  // ===== CUSTOMIZACIÓN =====
+
+  /**
+   * Tipo de layout para las mesas:
+   * - 'grid': Grid automático con separación uniforme (por defecto)
+   * - 'free': Posicionamiento libre usando position.x/y de cada mesa
+   */
+  tableLayout?: 'grid' | 'free';
+
+  /**
+   * Clases CSS adicionales para el contenedor
+   */
+  className?: string;
+
+  /**
+   * Información del usuario para el navbar
+   */
+  userInfo?: {
+    avatar: string;
+    name: string;
+    role: string;
+  };
+}