siesa-ui-kit 1.0.0 → 1.0.1

package/src/views/ProductsView/ProductsView.tsx

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