siesa-ui-kit 1.0.3 → 1.0.5

package/src/views/ProductsView/ProductsView.tsx

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