siesa-ui-kit 1.0.4 → 1.0.5

package/src/views/ProductsView/ProductsView.tsx

@@ -1,480 +1,480 @@
-import React from 'react';
-import type { ProductsViewProps } from './ProductsView.types';
-import { Button } from '../../components/Button';
-import { POSProductButton } from '../../components/POSProductButton';
-import { POSProductCard } from '../../components/POSProductCard';
-import { POSProductSidebarItems } from '../../components/POSProductSidebarItems';
-import { Divider } from '../../components/Divider/Divider';
-import { Navbar } from '../../components/Navbar';
-import {
-  ArrowLeftIcon,
-  CheckIcon,
-} from './icons';
-
-/**
- * ProductsView - Vista de selección de productos para sistema POS
- *
- * Vista completa para sistemas POS que permite:
- * - Seleccionar categorías de productos
- * - Ver y agregar productos al pedido
- * - Gestionar items del pedido (cantidad, eliminar)
- * - Ver resumen con subtotal, impuestos y total
- * - Confirmar pedido
- *
- * **Composición:**
- * - Navbar superior con navegación y usuario
- * - Área de contenido con 3 columnas:
- *   - Columna 1: Sidebar de categorías (POSProductButton)
- *   - Columna 2: Grid de productos (POSProductCard)
- *   - Columna 3: Sidebar de pedido (POSProductSidebarItems)
- *
- * **Responsive:**
- * - Mobile (< 768px): Layout vertical adaptativo
- * - Desktop (≥ 768px): Layout de 3 columnas según Figma
- *
- * **Dark Mode:**
- * - Soporte completo con tokens del sistema
- * - Fondos, textos y bordes adaptativos
- *
- * 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
- * - Responsive design con breakpoints
- * - Composición con componentes del sistema
- *
- * @see docs/colors.md - Sistema de colores
- * @see docs/typography.md - Sistema tipográfico
- * @see docs/spacing.md - Sistema de espaciado
- * @see src/components/POSProductButton - Botón de categoría
- * @see src/components/POSProductCard - Card de producto
- * @see src/components/POSProductSidebarItems - Item de pedido
- *
- * @example
- * ```tsx
- * <ProductsView
- *   tableTitle="Mesa 1"
- *   categories={categories}
- *   products={products}
- *   orderItems={orderItems}
- *   onAddProduct={(id) => console.log('Agregar', id)}
- *   onConfirmOrder={() => console.log('Confirmar')}
- * />
- * ```
- */
-export const ProductsView: React.FC<ProductsViewProps> = ({
-  tableTitle = 'Mesa 1',
-  changeTableLabel = 'Cambiar Mesa',
-  menusTitle = 'Menús',
-  menus = [
-    { id: '1', label: 'Corral' },
-    { id: '2', label: 'Burguer One' },
-    { id: '3', label: 'Andrés Carne de Res' },
-    { id: '4', label: 'Aceites' },
-    { id: '5', label: 'Kiosco Mac' },
-    { id: '6', label: 'Kiosco Qbano' },
-    { id: '7', label: 'Premier Dinning' },
-  ],
-  selectedMenuId = '1',
-  onMenuSelect,
-  onChangeTable,
-  categoryTitle = 'Categoría',
-  categories = [],
-  selectedCategoryId,
-  onCategorySelect,
-  productsTitle = 'Productos',
-  products = [],
-  onAddProduct,
-  activeTab = 'products',
-  onTabChange,
-  orderItems = [],
-  onOrderItemQuantityChange,
-  onOrderItemDelete,
-  subtotal = '40,000.00',
-  taxes = '40,000.00',
-  total = '40,000.00',
-  confirmLabel = 'Confirmar Pedido',
-  onConfirmOrder,
-  isLoading = false,
-  errorMessage,
-  userAvatar,
-  userName = 'Jhonnatan Diaz',
-  userRole = 'Administrador',
-  businessLogo,
-  siesaLogo,
-  className = '',
-}) => {
-  return (
-    <div
-      className={`
-        min-h-screen
-        w-full
-        bg-background-secondary
-        dark:bg-dark-bg-primary
-        flex
-        flex-col
-        ${className}
-      `.trim().replace(/\s+/g, ' ')}
-    >
-      {/* ===== NAVBAR ===== */}
-      <Navbar
-        logo={
-          businessLogo && (
-            <div className="h-[30px] w-[168px] overflow-hidden">
-              {typeof businessLogo === 'string' ? (
-                <img src={businessLogo} alt="Business Logo" className="h-full w-full object-contain" />
-              ) : (
-                businessLogo
-              )}
-            </div>
-          )
-        }
-        productName=""
-        userDropdown={
-          userAvatar
-            ? {
-              avatar: userAvatar,
-              name: userName,
-              role: userRole,
-            }
-            : undefined
-        }
-        hideActionButtons
-        siesaLogo={
-          siesaLogo && (
-            <div className="h-[30px] w-[120px] overflow-hidden">
-              {typeof siesaLogo === 'string' ? (
-                <img src={siesaLogo} alt="Siesa Logo" className="h-full w-full object-contain" />
-              ) : (
-                siesaLogo
-              )}
-            </div>
-          )
-        }
-        variant="desktop"
-        className="bg-background-secondary dark:bg-dark-bg-primary"
-      />
-
-      {/* ===== CONTAINER ===== */}
-      <div className="flex flex-1 w-full overflow-hidden">
-        {/* ===== ROW PRINCIPAL ===== */}
-        <div className="flex flex-1 w-full overflow-hidden">
-          {/* ===== COLUMNA 1: ÁREA DE CONTENIDO (Menu + Body) ===== */}
-          <div
-            className="
-              flex-1
-              flex
-              flex-col
-              gap-4
-              p-4
-              bg-white
-              dark:bg-dark-bg-primary
-              rounded-tl-3xl
-              rounded-tr-3xl
-              overflow-hidden
-            "
-          >
-            {/* Menu de navegación */}
-            <div className="flex items-center gap-4 w-full">
-              {/* Cambiar Mesa Button */}
-              <div className="shrink-0">
-                <Button
-                  type="default"
-                  leftIcon={<ArrowLeftIcon className="w-4 h-4" />}
-                  onClick={onChangeTable}
-                  ariaLabel={changeTableLabel}
-                >
-                  {changeTableLabel}
-                </Button>
-              </div>
-
-              {/* Divider */}
-              <div className="h-8 w-px bg-border-primary dark:bg-dark-border-primary shrink-0" />
-
-              {/* Título Menús */}
-              <div className="shrink-0">
-                <h2 className="text-xl font-bold leading-7 tracking-tight text-content-primary dark:text-dark-content-primary">
-                  {menusTitle}
-                </h2>
-              </div>
-
-              {/* Botones de menús con scroll horizontal */}
-              <div className="flex-1 flex gap-2 overflow-x-auto overflow-y-hidden">
-                {menus.map((menu) => (
-                  <Button
-                    key={menu.id}
-                    type={selectedMenuId === menu.id ? 'default' : 'outline'}
-                    onClick={() => onMenuSelect?.(menu.id)}
-                  >
-                    {menu.label}
-                  </Button>
-                ))}
-              </div>
-            </div>
-
-            {/* Body: Categorías + Productos */}
-            <div
-              className="
-                flex-1
-                flex
-                gap-0
-                bg-background-secondary
-                dark:bg-dark-bg-primary/50
-                rounded-xl
-                overflow-hidden
-              "
-            >
-              {/* ===== SIDEBAR IZQUIERDO: CATEGORÍAS ===== */}
-              <div className="w-[213px] p-4 border-b border-border-primary dark:border-dark-border-primary">
-                <div className="flex flex-col gap-4 h-full">
-                  {/* Título */}
-                  <div className="flex items-center justify-center w-full">
-                    <h3 className="text-xl font-bold leading-6 text-content-primary dark:text-dark-content-primary">
-                      {categoryTitle}
-                    </h3>
-                  </div>
-
-                  {/* Lista de categorías con scroll */}
-                  <div className="flex-1 flex flex-col gap-2 overflow-x-hidden overflow-y-auto">
-                    {categories.map((category) => (
-                      <POSProductButton
-                        key={category.id}
-                        image={category.image}
-                        label={category.label}
-                        active={selectedCategoryId === category.id}
-                        onClick={() => onCategorySelect?.(category.id)}
-                      />
-                    ))}
-                  </div>
-                </div>
-              </div>
-
-              {/* ===== CONTENIDO PRINCIPAL: PRODUCTOS ===== */}
-              <div className="flex-1 p-4 border-l border-b border-border-primary dark:border-dark-border-primary">
-                <div className="flex flex-col gap-4 h-full">
-                  {/* Título */}
-                  <div className="flex items-center justify-center w-full">
-                    <h3 className="text-xl font-bold leading-6 text-content-primary dark:text-dark-content-primary">
-                      {productsTitle}
-                    </h3>
-                  </div>
-
-                  {/* Grid de productos con scroll - Flexbox centrado con max-width para 4 columnas (170px * 4 + 8px * 3 = 704px) */}
-                  <div className="flex-1 overflow-x-hidden overflow-y-auto">
-                    <div className="flex flex-col items-center justify-start min-h-full w-full">
-                      <div className="flex flex-wrap gap-2 justify-center max-w-[704px]">
-                        {products.map((product) => (
-                          <POSProductCard
-                            key={product.id}
-                            image={product.image}
-                            productName={product.name}
-                            price={product.price}
-                            onAddClick={() => onAddProduct?.(product.id)}
-                          />
-                        ))}
-                      </div>
-                    </div>
-
-                    {/* Estado vacío */}
-                    {products.length === 0 && (
-                      <div className="flex items-center justify-center h-full">
-                        <p className="text-content-secondary dark:text-content-secondary">
-                          No hay productos disponibles
-                        </p>
-                      </div>
-                    )}
-
-                    {/* Estado de carga */}
-                    {isLoading && (
-                      <div className="flex items-center justify-center h-full">
-                        <p className="text-content-secondary dark:text-content-secondary">
-                          Cargando productos...
-                        </p>
-                      </div>
-                    )}
-
-                    {/* Estado de error */}
-                    {errorMessage && (
-                      <div className="flex items-center justify-center h-full">
-                        <p className="text-red-600 dark:text-red-400">
-                          {errorMessage}
-                        </p>
-                      </div>
-                    )}
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          {/* ===== COLUMNA 2: SIDEBAR DERECHO (Pedido) ===== */}
-          <div className="w-[304px] p-4 flex flex-col gap-0 h-full overflow-hidden">
-            <div className="flex flex-col h-full relative">
-              {/* Heading */}
-              <div className="border-b border-border-primary dark:border-dark-border-primary pb-4 z-10">
-                <h2 className="text-xl font-bold leading-7 tracking-tight text-content-primary dark:text-dark-content-primary">
-                  {tableTitle}
-                </h2>
-              </div>
-
-              {/* Tabs */}
-              <div className="flex items-start py-2.5 z-10">
-                <button
-                  className={`
-                    flex-1
-                    flex
-                    flex-col
-                    items-center
-                    p-2
-                    rounded-lg
-                    transition-colors
-                    duration-150
-                    ${activeTab === 'products' ? 'relative' : ''}
-                  `}
-                  onClick={() => onTabChange?.('products')}
-                >
-                  <span
-                    className={`
-                      text-sm
-                      font-bold
-                      leading-5
-                      ${activeTab === 'products'
-                        ? 'text-primary-custom-600 dark:text-primary-custom-600'
-                        : 'text-content-primary dark:text-dark-content-primary'
-                      }
-                    `}
-                  >
-                    Productos
-                  </span>
-                  {activeTab === 'products' && (
-                    <div className="absolute bottom-[-10px] left-0 right-0 h-0.5 bg-primary-custom-600 dark:bg-primary-custom-600 rounded-full" />
-                  )}
-                </button>
-
-                <button
-                  className={`
-                    flex-1
-                    flex
-                    flex-col
-                    items-center
-                    p-2
-                    rounded-lg
-                    transition-colors
-                    duration-150
-                    ${activeTab === 'client' ? 'relative' : ''}
-                  `}
-                  onClick={() => onTabChange?.('client')}
-                >
-                  <span
-                    className={`
-                      text-sm
-                      font-bold
-                      leading-5
-                      ${activeTab === 'client'
-                        ? 'text-primary-custom-600 dark:text-primary-custom-600'
-                        : 'text-content-primary dark:text-dark-content-primary'
-                      }
-                    `}
-                  >
-                    Cliente
-                  </span>
-                  {activeTab === 'client' && (
-                    <div className="absolute bottom-[-10px] left-0 right-0 h-0.5 bg-primary-custom-600 dark:bg-primary-custom-600 rounded-full" />
-                  )}
-                </button>
-              </div>
-
-              {/* Body: Lista de items del pedido */}
-              <div
-                className="
-                  flex-1
-                  flex
-                  flex-col
-                  gap-2
-                  p-4
-                  bg-white
-                  dark:bg-dark-bg-primary
-                  rounded-bl-lg
-                  rounded-br-lg
-                  overflow-x-hidden
-                  overflow-y-auto
-                  z-10
-                "
-              >
-                {orderItems.map((item, index) => (
-                  <React.Fragment key={item.productId}>
-                    <POSProductSidebarItems
-                      categoryLabel={item.categoryLabel}
-                      categoryColor={item.categoryColor}
-                      productRef={item.productRef}
-                      price={item.price}
-                      productName={item.productName}
-                      descriptionItems={item.descriptionItems}
-                      showDescription={!!item.descriptionItems && item.descriptionItems.length > 0}
-                      quantity={item.quantity}
-                      onQuantityChange={(qty) => onOrderItemQuantityChange?.(item.productId, qty)}
-                      onDelete={() => onOrderItemDelete?.(item.productId)}
-                    />
-                    {index < orderItems.length - 1 && <Divider />}
-                  </React.Fragment>
-                ))}
-
-                {/* Estado vacío */}
-                {orderItems.length === 0 && (
-                  <div className="flex items-center justify-center h-full">
-                    <p className="text-content-secondary dark:text-content-secondary text-center">
-                      No hay productos en el pedido
-                    </p>
-                  </div>
-                )}
-              </div>
-
-              {/* Footer: Resumen y botón confirmar */}
-              <div className="flex flex-col gap-4 pt-4 z-10">
-                {/* Resumen de precios */}
-                <div className="flex flex-col gap-2">
-                  {/* Subtotal */}
-                  <div className="flex items-start text-base font-bold leading-6 text-content-primary dark:text-dark-content-primary">
-                    <div className="flex-1">Subtotal</div>
-                    <div className="flex-1 text-right">{subtotal}</div>
-                  </div>
-
-                  {/* Impuestos */}
-                  <div className="flex items-start text-base font-bold leading-6 text-content-primary dark:text-dark-content-primary">
-                    <div className="flex-1">Impuestos</div>
-                    <div className="flex-1 text-right">{taxes}</div>
-                  </div>
-
-                  {/* Divider */}
-                  <Divider />
-
-                  {/* Total */}
-                  <div className="flex items-start text-lg font-bold leading-7 text-content-primary dark:text-dark-content-primary">
-                    <div className="flex-1">Total</div>
-                    <div className="flex-1 text-right">{total}</div>
-                  </div>
-                </div>
-
-                {/* Botón confirmar */}
-                <div className="flex gap-2 w-full">
-                  <Button
-                    type="default"
-                    leftIcon={<CheckIcon className="w-4 h-4" />}
-                    onClick={onConfirmOrder}
-                    fullWidth
-                    disabled={orderItems.length === 0 || isLoading}
-                  >
-                    {confirmLabel}
-                  </Button>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-ProductsView.displayName = 'ProductsView';
+import React from 'react';
+import type { ProductsViewProps } from './ProductsView.types';
+import { Button } from '../../components/Button';
+import { POSProductButton } from '../../components/POSProductButton';
+import { POSProductCard } from '../../components/POSProductCard';
+import { POSProductSidebarItems } from '../../components/POSProductSidebarItems';
+import { Divider } from '../../components/Divider/Divider';
+import { Navbar } from '../../components/Navbar';
+import {
+  ArrowLeftIcon,
+  CheckIcon,
+} from './icons';
+
+/**
+ * ProductsView - Vista de selección de productos para sistema POS
+ *
+ * Vista completa para sistemas POS que permite:
+ * - Seleccionar categorías de productos
+ * - Ver y agregar productos al pedido
+ * - Gestionar items del pedido (cantidad, eliminar)
+ * - Ver resumen con subtotal, impuestos y total
+ * - Confirmar pedido
+ *
+ * **Composición:**
+ * - Navbar superior con navegación y usuario
+ * - Área de contenido con 3 columnas:
+ *   - Columna 1: Sidebar de categorías (POSProductButton)
+ *   - Columna 2: Grid de productos (POSProductCard)
+ *   - Columna 3: Sidebar de pedido (POSProductSidebarItems)
+ *
+ * **Responsive:**
+ * - Mobile (< 768px): Layout vertical adaptativo
+ * - Desktop (≥ 768px): Layout de 3 columnas según Figma
+ *
+ * **Dark Mode:**
+ * - Soporte completo con tokens del sistema
+ * - Fondos, textos y bordes adaptativos
+ *
+ * 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
+ * - Responsive design con breakpoints
+ * - Composición con componentes del sistema
+ *
+ * @see docs/colors.md - Sistema de colores
+ * @see docs/typography.md - Sistema tipográfico
+ * @see docs/spacing.md - Sistema de espaciado
+ * @see src/components/POSProductButton - Botón de categoría
+ * @see src/components/POSProductCard - Card de producto
+ * @see src/components/POSProductSidebarItems - Item de pedido
+ *
+ * @example
+ * ```tsx
+ * <ProductsView
+ *   tableTitle="Mesa 1"
+ *   categories={categories}
+ *   products={products}
+ *   orderItems={orderItems}
+ *   onAddProduct={(id) => console.log('Agregar', id)}
+ *   onConfirmOrder={() => console.log('Confirmar')}
+ * />
+ * ```
+ */
+export const ProductsView: React.FC<ProductsViewProps> = ({
+  tableTitle = 'Mesa 1',
+  changeTableLabel = 'Cambiar Mesa',
+  menusTitle = 'Menús',
+  menus = [
+    { id: '1', label: 'Corral' },
+    { id: '2', label: 'Burguer One' },
+    { id: '3', label: 'Andrés Carne de Res' },
+    { id: '4', label: 'Aceites' },
+    { id: '5', label: 'Kiosco Mac' },
+    { id: '6', label: 'Kiosco Qbano' },
+    { id: '7', label: 'Premier Dinning' },
+  ],
+  selectedMenuId = '1',
+  onMenuSelect,
+  onChangeTable,
+  categoryTitle = 'Categoría',
+  categories = [],
+  selectedCategoryId,
+  onCategorySelect,
+  productsTitle = 'Productos',
+  products = [],
+  onAddProduct,
+  activeTab = 'products',
+  onTabChange,
+  orderItems = [],
+  onOrderItemQuantityChange,
+  onOrderItemDelete,
+  subtotal = '40,000.00',
+  taxes = '40,000.00',
+  total = '40,000.00',
+  confirmLabel = 'Confirmar Pedido',
+  onConfirmOrder,
+  isLoading = false,
+  errorMessage,
+  userAvatar,
+  userName = 'Jhonnatan Diaz',
+  userRole = 'Administrador',
+  businessLogo,
+  siesaLogo,
+  className = '',
+}) => {
+  return (
+    <div
+      className={`
+        min-h-screen
+        w-full
+        bg-background-secondary
+        dark:bg-dark-bg-primary
+        flex
+        flex-col
+        ${className}
+      `.trim().replace(/\s+/g, ' ')}
+    >
+      {/* ===== NAVBAR ===== */}
+      <Navbar
+        logo={
+          businessLogo && (
+            <div className="h-[30px] w-[168px] overflow-hidden">
+              {typeof businessLogo === 'string' ? (
+                <img src={businessLogo} alt="Business Logo" className="h-full w-full object-contain" />
+              ) : (
+                businessLogo
+              )}
+            </div>
+          )
+        }
+        productName=""
+        userDropdown={
+          userAvatar
+            ? {
+              avatar: userAvatar,
+              name: userName,
+              role: userRole,
+            }
+            : undefined
+        }
+        hideActionButtons
+        siesaLogo={
+          siesaLogo && (
+            <div className="h-[30px] w-[120px] overflow-hidden">
+              {typeof siesaLogo === 'string' ? (
+                <img src={siesaLogo} alt="Siesa Logo" className="h-full w-full object-contain" />
+              ) : (
+                siesaLogo
+              )}
+            </div>
+          )
+        }
+        variant="desktop"
+        className="bg-background-secondary dark:bg-dark-bg-primary"
+      />
+
+      {/* ===== CONTAINER ===== */}
+      <div className="flex flex-1 w-full overflow-hidden">
+        {/* ===== ROW PRINCIPAL ===== */}
+        <div className="flex flex-1 w-full overflow-hidden">
+          {/* ===== COLUMNA 1: ÁREA DE CONTENIDO (Menu + Body) ===== */}
+          <div
+            className="
+              flex-1
+              flex
+              flex-col
+              gap-4
+              p-4
+              bg-white
+              dark:bg-dark-bg-primary
+              rounded-tl-3xl
+              rounded-tr-3xl
+              overflow-hidden
+            "
+          >
+            {/* Menu de navegación */}
+            <div className="flex items-center gap-4 w-full">
+              {/* Cambiar Mesa Button */}
+              <div className="shrink-0">
+                <Button
+                  type="default"
+                  leftIcon={<ArrowLeftIcon className="w-4 h-4" />}
+                  onClick={onChangeTable}
+                  ariaLabel={changeTableLabel}
+                >
+                  {changeTableLabel}
+                </Button>
+              </div>
+
+              {/* Divider */}
+              <div className="h-8 w-px bg-border-primary dark:bg-dark-border-primary shrink-0" />
+
+              {/* Título Menús */}
+              <div className="shrink-0">
+                <h2 className="text-xl font-bold leading-7 tracking-tight text-content-primary dark:text-dark-content-primary">
+                  {menusTitle}
+                </h2>
+              </div>
+
+              {/* Botones de menús con scroll horizontal */}
+              <div className="flex-1 flex gap-2 overflow-x-auto overflow-y-hidden">
+                {menus.map((menu) => (
+                  <Button
+                    key={menu.id}
+                    type={selectedMenuId === menu.id ? 'default' : 'outline'}
+                    onClick={() => onMenuSelect?.(menu.id)}
+                  >
+                    {menu.label}
+                  </Button>
+                ))}
+              </div>
+            </div>
+
+            {/* Body: Categorías + Productos */}
+            <div
+              className="
+                flex-1
+                flex
+                gap-0
+                bg-background-secondary
+                dark:bg-dark-bg-primary/50
+                rounded-xl
+                overflow-hidden
+              "
+            >
+              {/* ===== SIDEBAR IZQUIERDO: CATEGORÍAS ===== */}
+              <div className="w-[213px] p-4 border-b border-border-primary dark:border-dark-border-primary">
+                <div className="flex flex-col gap-4 h-full">
+                  {/* Título */}
+                  <div className="flex items-center justify-center w-full">
+                    <h3 className="text-xl font-bold leading-6 text-content-primary dark:text-dark-content-primary">
+                      {categoryTitle}
+                    </h3>
+                  </div>
+
+                  {/* Lista de categorías con scroll */}
+                  <div className="flex-1 flex flex-col gap-2 overflow-x-hidden overflow-y-auto">
+                    {categories.map((category) => (
+                      <POSProductButton
+                        key={category.id}
+                        image={category.image}
+                        label={category.label}
+                        active={selectedCategoryId === category.id}
+                        onClick={() => onCategorySelect?.(category.id)}
+                      />
+                    ))}
+                  </div>
+                </div>
+              </div>
+
+              {/* ===== CONTENIDO PRINCIPAL: PRODUCTOS ===== */}
+              <div className="flex-1 p-4 border-l border-b border-border-primary dark:border-dark-border-primary">
+                <div className="flex flex-col gap-4 h-full">
+                  {/* Título */}
+                  <div className="flex items-center justify-center w-full">
+                    <h3 className="text-xl font-bold leading-6 text-content-primary dark:text-dark-content-primary">
+                      {productsTitle}
+                    </h3>
+                  </div>
+
+                  {/* Grid de productos con scroll - Flexbox centrado con max-width para 4 columnas (170px * 4 + 8px * 3 = 704px) */}
+                  <div className="flex-1 overflow-x-hidden overflow-y-auto">
+                    <div className="flex flex-col items-center justify-start min-h-full w-full">
+                      <div className="flex flex-wrap gap-2 justify-center max-w-[704px]">
+                        {products.map((product) => (
+                          <POSProductCard
+                            key={product.id}
+                            image={product.image}
+                            productName={product.name}
+                            price={product.price}
+                            onAddClick={() => onAddProduct?.(product.id)}
+                          />
+                        ))}
+                      </div>
+                    </div>
+
+                    {/* Estado vacío */}
+                    {products.length === 0 && (
+                      <div className="flex items-center justify-center h-full">
+                        <p className="text-content-secondary dark:text-content-secondary">
+                          No hay productos disponibles
+                        </p>
+                      </div>
+                    )}
+
+                    {/* Estado de carga */}
+                    {isLoading && (
+                      <div className="flex items-center justify-center h-full">
+                        <p className="text-content-secondary dark:text-content-secondary">
+                          Cargando productos...
+                        </p>
+                      </div>
+                    )}
+
+                    {/* Estado de error */}
+                    {errorMessage && (
+                      <div className="flex items-center justify-center h-full">
+                        <p className="text-red-600 dark:text-red-400">
+                          {errorMessage}
+                        </p>
+                      </div>
+                    )}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* ===== COLUMNA 2: SIDEBAR DERECHO (Pedido) ===== */}
+          <div className="w-[304px] p-4 flex flex-col gap-0 h-full overflow-hidden">
+            <div className="flex flex-col h-full relative">
+              {/* Heading */}
+              <div className="border-b border-border-primary dark:border-dark-border-primary pb-4 z-10">
+                <h2 className="text-xl font-bold leading-7 tracking-tight text-content-primary dark:text-dark-content-primary">
+                  {tableTitle}
+                </h2>
+              </div>
+
+              {/* Tabs */}
+              <div className="flex items-start py-2.5 z-10">
+                <button
+                  className={`
+                    flex-1
+                    flex
+                    flex-col
+                    items-center
+                    p-2
+                    rounded-lg
+                    transition-colors
+                    duration-150
+                    ${activeTab === 'products' ? 'relative' : ''}
+                  `}
+                  onClick={() => onTabChange?.('products')}
+                >
+                  <span
+                    className={`
+                      text-sm
+                      font-bold
+                      leading-5
+                      ${activeTab === 'products'
+                        ? 'text-primary-custom-600 dark:text-primary-custom-600'
+                        : 'text-content-primary dark:text-dark-content-primary'
+                      }
+                    `}
+                  >
+                    Productos
+                  </span>
+                  {activeTab === 'products' && (
+                    <div className="absolute bottom-[-10px] left-0 right-0 h-0.5 bg-primary-custom-600 dark:bg-primary-custom-600 rounded-full" />
+                  )}
+                </button>
+
+                <button
+                  className={`
+                    flex-1
+                    flex
+                    flex-col
+                    items-center
+                    p-2
+                    rounded-lg
+                    transition-colors
+                    duration-150
+                    ${activeTab === 'client' ? 'relative' : ''}
+                  `}
+                  onClick={() => onTabChange?.('client')}
+                >
+                  <span
+                    className={`
+                      text-sm
+                      font-bold
+                      leading-5
+                      ${activeTab === 'client'
+                        ? 'text-primary-custom-600 dark:text-primary-custom-600'
+                        : 'text-content-primary dark:text-dark-content-primary'
+                      }
+                    `}
+                  >
+                    Cliente
+                  </span>
+                  {activeTab === 'client' && (
+                    <div className="absolute bottom-[-10px] left-0 right-0 h-0.5 bg-primary-custom-600 dark:bg-primary-custom-600 rounded-full" />
+                  )}
+                </button>
+              </div>
+
+              {/* Body: Lista de items del pedido */}
+              <div
+                className="
+                  flex-1
+                  flex
+                  flex-col
+                  gap-2
+                  p-4
+                  bg-white
+                  dark:bg-dark-bg-primary
+                  rounded-bl-lg
+                  rounded-br-lg
+                  overflow-x-hidden
+                  overflow-y-auto
+                  z-10
+                "
+              >
+                {orderItems.map((item, index) => (
+                  <React.Fragment key={item.productId}>
+                    <POSProductSidebarItems
+                      categoryLabel={item.categoryLabel}
+                      categoryColor={item.categoryColor}
+                      productRef={item.productRef}
+                      price={item.price}
+                      productName={item.productName}
+                      descriptionItems={item.descriptionItems}
+                      showDescription={!!item.descriptionItems && item.descriptionItems.length > 0}
+                      quantity={item.quantity}
+                      onQuantityChange={(qty) => onOrderItemQuantityChange?.(item.productId, qty)}
+                      onDelete={() => onOrderItemDelete?.(item.productId)}
+                    />
+                    {index < orderItems.length - 1 && <Divider />}
+                  </React.Fragment>
+                ))}
+
+                {/* Estado vacío */}
+                {orderItems.length === 0 && (
+                  <div className="flex items-center justify-center h-full">
+                    <p className="text-content-secondary dark:text-content-secondary text-center">
+                      No hay productos en el pedido
+                    </p>
+                  </div>
+                )}
+              </div>
+
+              {/* Footer: Resumen y botón confirmar */}
+              <div className="flex flex-col gap-4 pt-4 z-10">
+                {/* Resumen de precios */}
+                <div className="flex flex-col gap-2">
+                  {/* Subtotal */}
+                  <div className="flex items-start text-base font-bold leading-6 text-content-primary dark:text-dark-content-primary">
+                    <div className="flex-1">Subtotal</div>
+                    <div className="flex-1 text-right">{subtotal}</div>
+                  </div>
+
+                  {/* Impuestos */}
+                  <div className="flex items-start text-base font-bold leading-6 text-content-primary dark:text-dark-content-primary">
+                    <div className="flex-1">Impuestos</div>
+                    <div className="flex-1 text-right">{taxes}</div>
+                  </div>
+
+                  {/* Divider */}
+                  <Divider />
+
+                  {/* Total */}
+                  <div className="flex items-start text-lg font-bold leading-7 text-content-primary dark:text-dark-content-primary">
+                    <div className="flex-1">Total</div>
+                    <div className="flex-1 text-right">{total}</div>
+                  </div>
+                </div>
+
+                {/* Botón confirmar */}
+                <div className="flex gap-2 w-full">
+                  <Button
+                    type="default"
+                    leftIcon={<CheckIcon className="w-4 h-4" />}
+                    onClick={onConfirmOrder}
+                    fullWidth
+                    disabled={orderItems.length === 0 || isLoading}
+                  >
+                    {confirmLabel}
+                  </Button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+ProductsView.displayName = 'ProductsView';