siesa-ui-kit 1.0.2 → 1.0.4

package/src/views/TableLayoutView/README.md

@@ -1,268 +1,268 @@
-# TableLayoutView
-
-Vista completa de administración de layout de mesas para restaurantes (sistema POS).
-
-## Descripción
-
-TableLayoutView es una vista pixel-perfect según especificaciones de Figma que proporciona una interfaz completa para gestionar el layout de mesas de un restaurante. Incluye:
-
-- **Navbar superior**: Con información de usuario y acciones
-- **Sidebar izquierdo (245px)**: Lista de salones/ubicaciones con sus estados
-- **Área central (flex)**: Grid de mesas con controles de gestión y leyenda
-- **Sidebar derecho (304px)**: Panel de selección de cantidad de personas (condicional)
-
-## Características
-
-- ✅ Layout responsive (mobile-first)
-- ✅ Dark mode completo
-- ✅ Múltiples estados visuales para mesas (disponible, ocupada, reservada, fuera de servicio)
-- ✅ Posicionamiento libre de mesas con coordenadas
-- ✅ Panel de teclado numérico para selección de personas
-- ✅ Callbacks para todas las acciones principales
-- ✅ Estados de carga y error
-- ✅ TypeScript strict
-- ✅ Accesibilidad (ARIA labels)
-
-## Uso Básico
-
-```tsx
-import { TableLayoutView } from './views/TableLayoutView';
-
-function App() {
-  const [activeLocation, setActiveLocation] = useState('1');
-  const [selectedTable, setSelectedTable] = useState<string | null>(null);
-
-  const locations = [
-    { id: '1', name: 'Antejardín', status: 'available', capacity: { current: 1, total: 8 } },
-    { id: '2', name: 'Terraza', status: 'occupied', capacity: { current: 8, total: 8 } },
-  ];
-
-  const tables = [
-    {
-      tableNumber: '01',
-      status: 'available',
-      shape: 'square',
-      chairs: 8,
-      position: { x: 25, y: 30 },
-    },
-    {
-      tableNumber: '02',
-      status: 'occupied',
-      shape: 'circle',
-      chairs: 4,
-      position: { x: 50, y: 30 },
-    },
-  ];
-
-  return (
-    <TableLayoutView
-      locations={locations}
-      activeLocationId={activeLocation}
-      tables={tables}
-      tablesTitle="Mesas de Antejardín"
-      showPeopleCountPanel={!!selectedTable}
-      userInfo={{
-        avatar: '/path/to/avatar.jpg',
-        name: 'Juan Pérez',
-        role: 'Administrador',
-      }}
-      onLocationSelect={setActiveLocation}
-      onTableSelect={setSelectedTable}
-      onCreateTables={() => console.log('Crear mesas')}
-      onAssignTable={() => console.log('Asignar mesa')}
-    />
-  );
-}
-```
-
-## Props
-
-### Datos de Ubicaciones
-
-- **locations** (`Location[]`): Lista de salones/ubicaciones
-- **activeLocationId** (`string`): ID de la ubicación actualmente seleccionada
-- **tables** (`TableItem[]`): Lista de mesas en el layout actual
-- **tablesTitle** (`string`): Título del área de mesas (default: "Mesas de Antejardín")
-
-### Panel de Personas
-
-- **showPeopleCountPanel** (`boolean`): Si se muestra el panel de selección de personas
-- **selectedTable** (`{ locationName: string; tableName: string }`): Info de la mesa seleccionada
-- **peopleCount** (`number`): Cantidad de personas seleccionada
-
-### Callbacks de Acciones
-
-- **onLocationSelect** (`(locationId: string) => void`): Al seleccionar una ubicación
-- **onTableSelect** (`(tableNumber: string) => void`): Al seleccionar una mesa
-- **onCreateTables** (`() => void`): Al hacer clic en "Crear Mesas"
-- **onMergeTables** (`() => void`): Al hacer clic en "Unir Mesas"
-- **onSplitTables** (`() => void`): Al hacer clic en "Separar Mesas"
-- **onPeopleCountSelect** (`(count: number) => void`): Al seleccionar cantidad de personas
-- **onAssignTable** (`() => void`): Al hacer clic en "Asignar"
-- **onTransferTable** (`() => void`): Al hacer clic en "Transferir"
-- **onSetCutlery** (`() => void`): Al hacer clic en "Cubiertos"
-- **onClosePeoplePanel** (`() => void`): Al cerrar el panel de personas
-- **onTableSwitchChange** (`(checked: boolean) => void`): Al cambiar el switch de mesa
-
-### Estados
-
-- **isLoading** (`boolean`): Si se está cargando información
-- **errorMessage** (`string`): Mensaje de error (si existe)
-
-### Customización
-
-- **className** (`string`): Clases CSS adicionales
-- **userInfo** (`{ avatar: string; name: string; role: string }`): Información del usuario para navbar
-
-## Tipos de Datos
-
-### Location
-
-```typescript
-interface Location {
-  id: string;
-  name: string;
-  status: 'available' | 'occupied' | 'reserved' | 'outOfService';
-  capacity: {
-    current: number;
-    total: number;
-  };
-}
-```
-
-### TableItem
-
-```typescript
-interface TableItem {
-  tableNumber: string;
-  status: 'available' | 'occupied' | 'reserved' | 'outOfService';
-  shape: 'square' | 'circle' | 'rectangle' | 'oval';
-  chairs: 2 | 4 | 6 | 8;
-  isActive?: boolean;
-  position?: {
-    x: number; // Porcentaje 0-100
-    y: number; // Porcentaje 0-100
-  };
-}
-```
-
-## Ejemplos de Uso
-
-### Vista Completa (con panel de personas)
-
-```tsx
-<TableLayoutView
-  locations={locations}
-  activeLocationId="1"
-  tables={tables}
-  tablesTitle="Mesas de Antejardín"
-  showPeopleCountPanel={true}
-  selectedTable={{
-    locationName: 'Antejardín',
-    tableName: 'Mesa 1',
-  }}
-  userInfo={userInfo}
-  onPeopleCountSelect={(count) => console.log('Personas:', count)}
-  onAssignTable={() => console.log('Asignar')}
-/>
-```
-
-### Vista sin Panel de Personas
-
-```tsx
-<TableLayoutView
-  locations={locations}
-  activeLocationId="1"
-  tables={tables}
-  showPeopleCountPanel={false}
-  userInfo={userInfo}
-/>
-```
-
-### Estado de Carga
-
-```tsx
-<TableLayoutView
-  locations={[]}
-  tables={[]}
-  isLoading={true}
-  userInfo={userInfo}
-/>
-```
-
-### Estado de Error
-
-```tsx
-<TableLayoutView
-  locations={locations}
-  activeLocationId="1"
-  tables={[]}
-  errorMessage="Error al cargar las mesas"
-  userInfo={userInfo}
-/>
-```
-
-## Posicionamiento de Mesas
-
-Las mesas usan un sistema de coordenadas porcentuales (0-100) para posicionamiento libre:
-
-```typescript
-const tables: TableItem[] = [
-  {
-    tableNumber: '01',
-    status: 'available',
-    shape: 'square',
-    chairs: 8,
-    position: { x: 25, y: 30 }, // 25% desde izquierda, 30% desde arriba
-  },
-  {
-    tableNumber: '02',
-    status: 'occupied',
-    shape: 'circle',
-    chairs: 4,
-    position: { x: 75, y: 70 }, // 75% desde izquierda, 70% desde arriba
-  },
-];
-```
-
-## Estados Visuales de Mesas
-
-- **available** (Disponible): Verde/Lime
-- **occupied** (Ocupada): Naranja/Yellow
-- **reserved** (Reservada): Morado/Purple
-- **outOfService** (Fuera de servicio): Gris/Zinc
-
-## Responsive Design
-
-La vista es completamente responsive:
-
-- **Mobile**: Las tres columnas se apilan verticalmente
-- **Desktop**: Layout de 3 columnas (245px + flex + 304px)
-
-## Dark Mode
-
-Todos los elementos tienen soporte completo para dark mode con tokens del sistema.
-
-## Accesibilidad
-
-- ARIA labels en botones y acciones
-- Navegación por teclado en todos los elementos interactivos
-- Estados de focus visibles
-- Contraste de colores según WCAG
-
-## Componentes Relacionados
-
-- `POSLocationButton`: Botones de salones en sidebar izquierdo
-- `POSTable`: Visualización de mesas con sillas
-- `POSNumberButton`: Teclado numérico para cantidad de personas
-- `POSConvention`: Leyendas de convención de colores
-- `Switch`: Selector de mesa en panel de personas
-- `Button`: Botones de acción
-- `Navbar`: Barra de navegación superior
-
-## Notas Técnicas
-
-- Diseño pixel-perfect según especificaciones de Figma
-- Usa tokens del sistema para colores, espaciados y tipografía
-- TypeScript strict para type safety
-- Componentes reutilizables del sistema de diseño
+# TableLayoutView
+
+Vista completa de administración de layout de mesas para restaurantes (sistema POS).
+
+## Descripción
+
+TableLayoutView es una vista pixel-perfect según especificaciones de Figma que proporciona una interfaz completa para gestionar el layout de mesas de un restaurante. Incluye:
+
+- **Navbar superior**: Con información de usuario y acciones
+- **Sidebar izquierdo (245px)**: Lista de salones/ubicaciones con sus estados
+- **Área central (flex)**: Grid de mesas con controles de gestión y leyenda
+- **Sidebar derecho (304px)**: Panel de selección de cantidad de personas (condicional)
+
+## Características
+
+- ✅ Layout responsive (mobile-first)
+- ✅ Dark mode completo
+- ✅ Múltiples estados visuales para mesas (disponible, ocupada, reservada, fuera de servicio)
+- ✅ Posicionamiento libre de mesas con coordenadas
+- ✅ Panel de teclado numérico para selección de personas
+- ✅ Callbacks para todas las acciones principales
+- ✅ Estados de carga y error
+- ✅ TypeScript strict
+- ✅ Accesibilidad (ARIA labels)
+
+## Uso Básico
+
+```tsx
+import { TableLayoutView } from './views/TableLayoutView';
+
+function App() {
+  const [activeLocation, setActiveLocation] = useState('1');
+  const [selectedTable, setSelectedTable] = useState<string | null>(null);
+
+  const locations = [
+    { id: '1', name: 'Antejardín', status: 'available', capacity: { current: 1, total: 8 } },
+    { id: '2', name: 'Terraza', status: 'occupied', capacity: { current: 8, total: 8 } },
+  ];
+
+  const tables = [
+    {
+      tableNumber: '01',
+      status: 'available',
+      shape: 'square',
+      chairs: 8,
+      position: { x: 25, y: 30 },
+    },
+    {
+      tableNumber: '02',
+      status: 'occupied',
+      shape: 'circle',
+      chairs: 4,
+      position: { x: 50, y: 30 },
+    },
+  ];
+
+  return (
+    <TableLayoutView
+      locations={locations}
+      activeLocationId={activeLocation}
+      tables={tables}
+      tablesTitle="Mesas de Antejardín"
+      showPeopleCountPanel={!!selectedTable}
+      userInfo={{
+        avatar: '/path/to/avatar.jpg',
+        name: 'Juan Pérez',
+        role: 'Administrador',
+      }}
+      onLocationSelect={setActiveLocation}
+      onTableSelect={setSelectedTable}
+      onCreateTables={() => console.log('Crear mesas')}
+      onAssignTable={() => console.log('Asignar mesa')}
+    />
+  );
+}
+```
+
+## Props
+
+### Datos de Ubicaciones
+
+- **locations** (`Location[]`): Lista de salones/ubicaciones
+- **activeLocationId** (`string`): ID de la ubicación actualmente seleccionada
+- **tables** (`TableItem[]`): Lista de mesas en el layout actual
+- **tablesTitle** (`string`): Título del área de mesas (default: "Mesas de Antejardín")
+
+### Panel de Personas
+
+- **showPeopleCountPanel** (`boolean`): Si se muestra el panel de selección de personas
+- **selectedTable** (`{ locationName: string; tableName: string }`): Info de la mesa seleccionada
+- **peopleCount** (`number`): Cantidad de personas seleccionada
+
+### Callbacks de Acciones
+
+- **onLocationSelect** (`(locationId: string) => void`): Al seleccionar una ubicación
+- **onTableSelect** (`(tableNumber: string) => void`): Al seleccionar una mesa
+- **onCreateTables** (`() => void`): Al hacer clic en "Crear Mesas"
+- **onMergeTables** (`() => void`): Al hacer clic en "Unir Mesas"
+- **onSplitTables** (`() => void`): Al hacer clic en "Separar Mesas"
+- **onPeopleCountSelect** (`(count: number) => void`): Al seleccionar cantidad de personas
+- **onAssignTable** (`() => void`): Al hacer clic en "Asignar"
+- **onTransferTable** (`() => void`): Al hacer clic en "Transferir"
+- **onSetCutlery** (`() => void`): Al hacer clic en "Cubiertos"
+- **onClosePeoplePanel** (`() => void`): Al cerrar el panel de personas
+- **onTableSwitchChange** (`(checked: boolean) => void`): Al cambiar el switch de mesa
+
+### Estados
+
+- **isLoading** (`boolean`): Si se está cargando información
+- **errorMessage** (`string`): Mensaje de error (si existe)
+
+### Customización
+
+- **className** (`string`): Clases CSS adicionales
+- **userInfo** (`{ avatar: string; name: string; role: string }`): Información del usuario para navbar
+
+## Tipos de Datos
+
+### Location
+
+```typescript
+interface Location {
+  id: string;
+  name: string;
+  status: 'available' | 'occupied' | 'reserved' | 'outOfService';
+  capacity: {
+    current: number;
+    total: number;
+  };
+}
+```
+
+### TableItem
+
+```typescript
+interface TableItem {
+  tableNumber: string;
+  status: 'available' | 'occupied' | 'reserved' | 'outOfService';
+  shape: 'square' | 'circle' | 'rectangle' | 'oval';
+  chairs: 2 | 4 | 6 | 8;
+  isActive?: boolean;
+  position?: {
+    x: number; // Porcentaje 0-100
+    y: number; // Porcentaje 0-100
+  };
+}
+```
+
+## Ejemplos de Uso
+
+### Vista Completa (con panel de personas)
+
+```tsx
+<TableLayoutView
+  locations={locations}
+  activeLocationId="1"
+  tables={tables}
+  tablesTitle="Mesas de Antejardín"
+  showPeopleCountPanel={true}
+  selectedTable={{
+    locationName: 'Antejardín',
+    tableName: 'Mesa 1',
+  }}
+  userInfo={userInfo}
+  onPeopleCountSelect={(count) => console.log('Personas:', count)}
+  onAssignTable={() => console.log('Asignar')}
+/>
+```
+
+### Vista sin Panel de Personas
+
+```tsx
+<TableLayoutView
+  locations={locations}
+  activeLocationId="1"
+  tables={tables}
+  showPeopleCountPanel={false}
+  userInfo={userInfo}
+/>
+```
+
+### Estado de Carga
+
+```tsx
+<TableLayoutView
+  locations={[]}
+  tables={[]}
+  isLoading={true}
+  userInfo={userInfo}
+/>
+```
+
+### Estado de Error
+
+```tsx
+<TableLayoutView
+  locations={locations}
+  activeLocationId="1"
+  tables={[]}
+  errorMessage="Error al cargar las mesas"
+  userInfo={userInfo}
+/>
+```
+
+## Posicionamiento de Mesas
+
+Las mesas usan un sistema de coordenadas porcentuales (0-100) para posicionamiento libre:
+
+```typescript
+const tables: TableItem[] = [
+  {
+    tableNumber: '01',
+    status: 'available',
+    shape: 'square',
+    chairs: 8,
+    position: { x: 25, y: 30 }, // 25% desde izquierda, 30% desde arriba
+  },
+  {
+    tableNumber: '02',
+    status: 'occupied',
+    shape: 'circle',
+    chairs: 4,
+    position: { x: 75, y: 70 }, // 75% desde izquierda, 70% desde arriba
+  },
+];
+```
+
+## Estados Visuales de Mesas
+
+- **available** (Disponible): Verde/Lime
+- **occupied** (Ocupada): Naranja/Yellow
+- **reserved** (Reservada): Morado/Purple
+- **outOfService** (Fuera de servicio): Gris/Zinc
+
+## Responsive Design
+
+La vista es completamente responsive:
+
+- **Mobile**: Las tres columnas se apilan verticalmente
+- **Desktop**: Layout de 3 columnas (245px + flex + 304px)
+
+## Dark Mode
+
+Todos los elementos tienen soporte completo para dark mode con tokens del sistema.
+
+## Accesibilidad
+
+- ARIA labels en botones y acciones
+- Navegación por teclado en todos los elementos interactivos
+- Estados de focus visibles
+- Contraste de colores según WCAG
+
+## Componentes Relacionados
+
+- `POSLocationButton`: Botones de salones en sidebar izquierdo
+- `POSTable`: Visualización de mesas con sillas
+- `POSNumberButton`: Teclado numérico para cantidad de personas
+- `POSConvention`: Leyendas de convención de colores
+- `Switch`: Selector de mesa en panel de personas
+- `Button`: Botones de acción
+- `Navbar`: Barra de navegación superior
+
+## Notas Técnicas
+
+- Diseño pixel-perfect según especificaciones de Figma
+- Usa tokens del sistema para colores, espaciados y tipografía
+- TypeScript strict para type safety
+- Componentes reutilizables del sistema de diseño