siesa-ui-kit 1.0.4 → 1.0.6

package/src/components/NavigationRail/README.md

@@ -1,224 +0,0 @@
-# NavigationRail
-
-Componente de navegación vertical (rail) para aplicaciones del sistema de diseño Siesa.
-
-## Descripción
-
-El NavigationRail proporciona acceso rápido a destinos principales de la aplicación mediante iconos y labels opcionales. Es ideal para aplicaciones de escritorio y tablets donde se requiere navegación persistente sin ocupar mucho espacio horizontal.
-
-**Figma:** [Siesa UI Kit - Navigation Rail](https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=4294-22925&m=dev)
-
-## Características
-
-- ✅ **Ancho fijo de 80px** para navegación compacta y consistente
-- ✅ **Soporte para FAB** (Floating Action Button) en la parte superior
-- ✅ **Estados completos**: normal, hover, selected, disabled
-- ✅ **Badges de notificación** con contador opcional
-- ✅ **Alineación flexible**: top, center, bottom
-- ✅ **Dark mode completo** en todos los estados
-- ✅ **Accesibilidad**: ARIA labels, navegación por teclado
-- ✅ **Tipografía Label XXSmall** (10px Bold) según sistema de diseño
-
-## Instalación
-
-```tsx
-import { NavigationRail } from '@/components/NavigationRail';
-import type { NavigationRailProps, NavigationRailItemProps } from '@/components/NavigationRail';
-```
-
-## Uso Básico
-
-```tsx
-import { NavigationRail } from '@/components/NavigationRail';
-import { HomeIcon, SearchIcon, BellIcon, UserIcon } from '@/icons';
-
-function App() {
-  const [selectedId, setSelectedId] = useState('home');
-
-  return (
-    <NavigationRail
-      items={[
-        { id: 'home', icon: <HomeIcon />, label: 'Inicio' },
-        { id: 'search', icon: <SearchIcon />, label: 'Buscar' },
-        { id: 'notifications', icon: <BellIcon />, label: 'Notificaciones', badgeCount: 5 },
-        { id: 'profile', icon: <UserIcon />, label: 'Perfil' },
-      ]}
-      selectedId={selectedId}
-      onItemSelect={setSelectedId}
-      alignment="top"
-    />
-  );
-}
-```
-
-## Ejemplos
-
-### Con Botón FAB
-
-```tsx
-<NavigationRail
-  showFab
-  fabIcon={<PlusIcon />}
-  onFabClick={() => console.log('Create new')}
-  fabAriaLabel="Crear nuevo"
-  items={[
-    { id: 'home', icon: <HomeIcon />, label: 'Inicio', selected: true },
-    { id: 'search', icon: <SearchIcon />, label: 'Buscar' },
-  ]}
-/>
-```
-
-### Con Badges de Notificación
-
-```tsx
-<NavigationRail
-  items={[
-    { id: 'home', icon: <HomeIcon />, label: 'Inicio' },
-    // Badge dot simple
-    { id: 'notifications', icon: <BellIcon />, label: 'Notificaciones', badge: true },
-    // Badge con contador
-    { id: 'messages', icon: <MessageIcon />, label: 'Mensajes', badgeCount: 12 },
-  ]}
-/>
-```
-
-### Alineación de Items
-
-```tsx
-// Items en la parte superior (default)
-<NavigationRail items={items} alignment="top" />
-
-// Items centrados verticalmente
-<NavigationRail items={items} alignment="center" />
-
-// Items en la parte inferior
-<NavigationRail items={items} alignment="bottom" />
-```
-
-### Estados de Items
-
-```tsx
-<NavigationRail
-  items={[
-    // Item normal
-    { id: 'home', icon: <HomeIcon />, label: 'Inicio' },
-    // Item seleccionado
-    { id: 'search', icon: <SearchIcon />, label: 'Buscar', selected: true },
-    // Item deshabilitado
-    { id: 'settings', icon: <SettingsIcon />, label: 'Configuración', disabled: true },
-  ]}
-/>
-```
-
-## Props
-
-### NavigationRailProps
-
-| Prop | Tipo | Default | Descripción |
-|------|------|---------|-------------|
-| `items` | `NavigationRailItemProps[]` | - | **Requerido.** Array de items de navegación |
-| `alignment` | `'top' \| 'center' \| 'bottom'` | `'top'` | Alineación vertical de los items |
-| `showFab` | `boolean` | `false` | Mostrar botón FAB en la parte superior |
-| `fabIcon` | `ReactNode` | - | Icono del botón FAB |
-| `onFabClick` | `() => void` | - | Handler para click en el FAB |
-| `fabAriaLabel` | `string` | `'Crear nuevo'` | Label del FAB para accesibilidad |
-| `className` | `string` | `''` | Clases CSS adicionales |
-| `selectedId` | `string` | - | ID del item seleccionado actualmente |
-| `onItemSelect` | `(id: string) => void` | - | Handler cuando se selecciona un item |
-
-### NavigationRailItemProps
-
-| Prop | Tipo | Default | Descripción |
-|------|------|---------|-------------|
-| `icon` | `ReactNode` | - | **Requerido.** Icono a mostrar (16x16px) |
-| `label` | `string` | - | **Requerido.** Label del item |
-| `id` | `string` | - | ID único del item (recomendado para navegación) |
-| `selected` | `boolean` | `false` | Si el item está seleccionado |
-| `disabled` | `boolean` | `false` | Si el item está deshabilitado |
-| `badge` | `boolean` | `false` | Mostrar badge dot de notificación |
-| `badgeCount` | `number` | - | Número a mostrar en el badge (reemplaza el dot) |
-| `onClick` | `() => void` | - | Handler para click individual del item |
-| `ariaLabel` | `string` | - | Label ARIA (usa `label` si no se proporciona) |
-
-## Mejores Prácticas
-
-### ✅ Hacer
-
-- **Usar entre 3-7 items**: Óptimo para navegación principal sin scroll
-- **Iconos de 16x16px**: Tamaño estándar para máxima claridad
-- **Labels descriptivos**: Usar nombres cortos y claros (1-2 palabras)
-- **Indicar item activo**: Siempre mantener un item selected
-- **FAB para acción principal**: Usar para "Crear", "Nuevo", etc.
-- **Badges para notificaciones**: Actualizar en tiempo real
-- **IDs únicos**: Facilita el manejo de estado y navegación
-
-### ❌ Evitar
-
-- **Demasiados items**: Más de 7 items requiere scroll, considera otro patrón
-- **Labels largos**: Más de 12 caracteres pueden truncarse
-- **Iconos inconsistentes**: Usar mismo estilo visual en todos los iconos
-- **Sin item seleccionado**: Siempre debe haber uno selected
-- **Múltiples badges rojos**: Limitar uso para evitar fatiga visual
-
-## Especificaciones de Diseño
-
-### Dimensiones
-- **Ancho del rail**: 80px (w-20)
-- **Ancho del item**: 56px (w-14)
-- **Gap entre items**: 12px (gap-3)
-- **Gap FAB a items**: 40px (gap-10)
-- **Padding vertical**: 8px arriba, 40px abajo
-
-### Tipografía
-- **Label**: 10px Bold (Label XXSmall)
-- **Line height**: 12px (leading-3)
-
-### Colores
-
-#### Light Mode
-- **Default icon**: `content-primary` (#18181b)
-- **Hover bg**: `primary-custom-100` (#dbeefe)
-- **Hover icon**: `primary-custom-600` (#0e79fd)
-- **Selected bg**: `primary-custom-100` (#dbeefe)
-- **Selected icon**: `primary-custom-600` (#0e79fd)
-- **Badge**: `red-700` (#b91c1c)
-
-#### Dark Mode
-- **Default icon**: `dark-content-primary`
-- **Hover bg**: `primary-custom-100/20`
-- **Selected bg**: `primary-custom-100/20`
-- **Badge**: `red-700` (#b91c1c)
-
-### Estados Interactivos
-- **Hover**: Background azul suave, icon cambia a primary
-- **Selected**: Background azul con overlay, icon primary permanente
-- **Disabled**: Opacity 50%, cursor not-allowed, sin interacción
-- **Focus**: Ring 2px con primary-custom-400 en light, dark-border-custom en dark
-
-## Accesibilidad
-
-- ✅ **Roles ARIA**: `<nav>` con `aria-label="Navegación principal"`
-- ✅ **aria-current**: Items seleccionados tienen `aria-current="page"`
-- ✅ **aria-label**: Todos los items tienen labels descriptivos
-- ✅ **Navegación por teclado**: Tab para navegar, Enter/Space para activar
-- ✅ **Focus visible**: Anillos de enfoque claros y adaptativos
-- ✅ **Screen reader**: Badges anuncian cantidad de notificaciones
-- ✅ **Estados semánticos**: Disabled con `disabled` attribute y `aria-disabled`
-
-## Referencias
-
-- 📘 [Sistema de Colores](../../../docs/colors.md)
-- 📘 [Sistema Tipográfico](../../../docs/typography.md)
-- 📘 [Sistema de Espaciado](../../../docs/spacing.md)
-- 📘 [Sistema de Sombras](../../../docs/shadows.md)
-- 🎨 [Figma: Navigation Rail](https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=4294-22925&m=dev)
-
-## Componentes Relacionados
-
-- **Button**: Usado para el FAB button
-- **Badge**: Sistema de notificaciones similar
-- **Navbar**: Alternativa para navegación horizontal
-
----
-
-**Implementado con ❤️ siguiendo Siesa UI Kit Design System**

package/src/components/NavigationRail/index.ts

@@ -1,2 +0,0 @@
-export { NavigationRail } from './NavigationRail';
-export type { NavigationRailProps, NavigationRailItemProps } from './NavigationRail.types';

package/src/components/NavigationRailCommercial/NavigationRailCommercial.stories.tsx

@@ -1,464 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { useState } from 'react';
-import { NavigationRailCommercial } from './NavigationRailCommercial';
-import type { NavigationRailCommercialProps } from './NavigationRailCommercial.types';
-import {
-  Cog6ToothIcon,
-  ShoppingCartIcon,
-  CubeIcon,
-  DocumentIcon,
-} from './icons';
-
-// Wrapper con estado para las stories interactivas
-const NavigationRailCommercialWithState = (args: NavigationRailCommercialProps) => {
-  const [state, setState] = useState(args.state || 'collapsed');
-
-  return (
-    <NavigationRailCommercial
-      {...args}
-      state={state}
-      onStateChange={(newState) => {
-        setState(newState);
-        args.onStateChange?.(newState);
-      }}
-    />
-  );
-};
-
-const meta = {
-  title: 'Siesa UI Kit/NavigationRailCommercial',
-  component: NavigationRailCommercial,
-  parameters: {
-    layout: 'fullscreen',
-    docs: {
-      description: {
-        component:
-          'Componente de navegación lateral especializado para aplicaciones comerciales que combina NavigationRailTypes y NavigationRailPanel. Soporta cuatro estados: collapsed, expanded, hover y searcher.',
-      },
-    },
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    state: {
-      control: 'select',
-      options: ['collapsed', 'expanded', 'hover', 'searcher'],
-      description: 'Estado visual del componente',
-      table: {
-        type: { summary: 'string' },
-        category: 'Apariencia',
-        defaultValue: { summary: 'collapsed' },
-      },
-    },
-    items: {
-      control: 'object',
-      description: 'Items de menú a mostrar',
-      table: {
-        type: { summary: 'NavigationRailCommercialMenuItem[]' },
-        category: 'Contenido',
-      },
-    },
-    showSearchButton: {
-      control: 'boolean',
-      description: 'Si mostrar el botón de búsqueda en modo collapsed',
-      table: {
-        type: { summary: 'boolean' },
-        category: 'Apariencia',
-        defaultValue: { summary: 'true' },
-      },
-    },
-    onStateChange: {
-      action: 'stateChanged',
-      description: 'Callback cuando cambia el estado',
-      table: {
-        category: 'Eventos',
-      },
-    },
-    onItemClick: {
-      action: 'itemClicked',
-      description: 'Callback cuando se hace click en un item',
-      table: {
-        category: 'Eventos',
-      },
-    },
-    onItemHover: {
-      action: 'itemHovered',
-      description: 'Callback cuando se hace hover en un item',
-      table: {
-        category: 'Eventos',
-      },
-    },
-  },
-} satisfies Meta<typeof NavigationRailCommercial>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// ============================================
-// DATOS DE EJEMPLO
-// ============================================
-const exampleItems = [
-  {
-    id: 'admin',
-    label: 'Administración',
-    icon: <Cog6ToothIcon className="size-4" />,
-    isCollapsible: true,
-    children: [
-      {
-        id: 'users',
-        label: 'Usuarios',
-        icon: <Cog6ToothIcon className="size-4" />,
-        onClick: () => console.log('Usuarios clicked'),
-      },
-      {
-        id: 'roles',
-        label: 'Roles y Permisos',
-        icon: <Cog6ToothIcon className="size-4" />,
-        onClick: () => console.log('Roles clicked'),
-      },
-      {
-        id: 'config',
-        label: 'Configuración',
-        icon: <Cog6ToothIcon className="size-4" />,
-        onClick: () => console.log('Config clicked'),
-      },
-    ],
-  },
-  {
-    id: 'sales',
-    label: 'Ventas',
-    icon: <ShoppingCartIcon className="size-4" />,
-    isCollapsible: true,
-    children: [
-      {
-        id: 'orders',
-        label: 'Pedidos',
-        icon: <ShoppingCartIcon className="size-4" />,
-      },
-      {
-        id: 'invoices',
-        label: 'Facturas',
-        icon: <ShoppingCartIcon className="size-4" />,
-      },
-    ],
-  },
-  {
-    id: 'inventory',
-    label: 'Inventario',
-    icon: <CubeIcon className="size-4" />,
-    isCollapsible: true,
-    children: [
-      {
-        id: 'products',
-        label: 'Productos',
-        icon: <CubeIcon className="size-4" />,
-      },
-      {
-        id: 'categories',
-        label: 'Categorías',
-        icon: <CubeIcon className="size-4" />,
-      },
-    ],
-  },
-  {
-    id: 'purchases',
-    label: 'Compras',
-    icon: <DocumentIcon className="size-4" />,
-    isCollapsible: true,
-    children: [
-      {
-        id: 'orders-purchase',
-        label: 'Órdenes de Compra',
-        icon: <DocumentIcon className="size-4" />,
-      },
-      {
-        id: 'suppliers',
-        label: 'Proveedores',
-        icon: <DocumentIcon className="size-4" />,
-      },
-    ],
-  },
-];
-
-// ============================================
-// 1. INTERACTIVE PLAYGROUND
-// ============================================
-export const Playground: Story = {
-  args: {
-    state: 'collapsed',
-    items: exampleItems,
-    showSearchButton: true,
-  },
-  render: (args) => <NavigationRailCommercialWithState {...args} />,
-};
-
-// ============================================
-// 2. ESTADOS DEL COMPONENTE
-// ============================================
-export const EstadoColapsado: Story = {
-  args: {
-    state: 'collapsed',
-    items: exampleItems,
-  },
-  render: (args) => (
-    <div className="flex h-screen bg-white dark:bg-dark-bg-primary">
-      <NavigationRailCommercialWithState {...args} />
-      <div className="flex-1 p-8">
-        <h3 className="text-lg font-bold mb-4 text-content-primary dark:text-dark-content-primary">
-          Estado Colapsado
-        </h3>
-        <p className="text-sm text-content-secondary dark:text-content-secondary">
-          Barra de navegación compacta de 80px con solo iconos.
-          <br />
-          Pasa el mouse sobre un icono para ver el panel lateral con el submenú.
-          <br />
-          <strong>Prueba el botón de expandir</strong> en el footer.
-        </p>
-      </div>
-    </div>
-  ),
-};
-
-export const EstadoExpandido: Story = {
-  args: {
-    state: 'expanded',
-    items: exampleItems,
-  },
-  render: (args) => (
-    <div className="flex h-screen bg-white dark:bg-dark-bg-primary">
-      <NavigationRailCommercialWithState {...args} />
-      <div className="flex-1 p-8">
-        <h3 className="text-lg font-bold mb-4 text-content-primary dark:text-dark-content-primary">
-          Estado Expandido
-        </h3>
-        <p className="text-sm text-content-secondary dark:text-content-secondary">
-          Barra de navegación de 215px con labels visibles.
-          <br />
-          Los items colapsables se muestran con chevron down y se pueden expandir.
-          <br />
-          <strong>Prueba el botón "Colapsar"</strong> en el footer.
-        </p>
-      </div>
-    </div>
-  ),
-};
-
-export const EstadoHover: Story = {
-  args: {
-    state: 'hover',
-    items: exampleItems,
-  },
-  render: (args) => (
-    <div className="flex h-screen bg-white dark:bg-dark-bg-primary">
-      <div className="relative">
-        <NavigationRailCommercial {...args} />
-        <div className="absolute left-[80px] top-0 w-[248px] h-full bg-bg-primary dark:bg-dark-bg-primary border-l border-border-primary dark:border-dark-border-primary p-3 shadow-lg">
-          <div className="mb-3">
-            <h4 className="text-sm font-bold text-content-primary dark:text-dark-content-primary px-4 py-2">
-              Administración
-            </h4>
-          </div>
-          <div className="border-t border-border-primary dark:border-dark-border-primary mb-3" />
-          <div className="space-y-1">
-            <button className="w-full text-left px-4 py-2 text-sm text-content-primary dark:text-dark-content-primary hover:bg-primary-custom-100 dark:hover:bg-dark-bg-custom rounded-lg transition-colors">
-              Usuarios
-            </button>
-            <button className="w-full text-left px-4 py-2 text-sm text-content-primary dark:text-dark-content-primary hover:bg-primary-custom-100 dark:hover:bg-dark-bg-custom rounded-lg transition-colors">
-              Roles y Permisos
-            </button>
-            <button className="w-full text-left px-4 py-2 text-sm text-content-primary dark:text-dark-content-primary hover:bg-primary-custom-100 dark:hover:bg-dark-bg-custom rounded-lg transition-colors">
-              Configuración
-            </button>
-          </div>
-        </div>
-      </div>
-      <div className="flex-1 p-8">
-        <h3 className="text-lg font-bold mb-4 text-content-primary dark:text-dark-content-primary">
-          Estado Hover
-        </h3>
-        <p className="text-sm text-content-secondary dark:text-content-secondary">
-          Panel lateral se muestra al hacer hover sobre un item con submenú.
-          <br />
-          El panel desaparece cuando el mouse sale de la zona del rail + panel.
-        </p>
-      </div>
-    </div>
-  ),
-};
-
-export const EstadoBusqueda: Story = {
-  args: {
-    state: 'searcher',
-    items: exampleItems,
-  },
-  render: (args) => (
-    <div className="flex h-screen bg-white dark:bg-dark-bg-primary">
-      <div className="relative">
-        <NavigationRailCommercial {...args} />
-        <div className="absolute left-[80px] top-0 w-[248px] h-full bg-bg-primary dark:bg-dark-bg-primary border-l border-border-primary dark:border-dark-border-primary shadow-lg">
-          <div className="p-3">
-            <input
-              type="text"
-              placeholder="Buscar módulo"
-              className="w-full px-3 py-2 text-sm border border-border-primary dark:border-dark-border-primary rounded-lg bg-white dark:bg-dark-bg-primary text-content-primary dark:text-dark-content-primary placeholder-content-tertiary dark:placeholder-content-tertiary"
-            />
-          </div>
-          <div className="border-t border-border-primary dark:border-dark-border-primary mb-3" />
-          <div className="px-3 space-y-3">
-            <div>
-              <p className="text-xs text-content-tertiary dark:text-content-tertiary mb-2">
-                Recientes
-              </p>
-              <button className="w-full text-left px-4 py-2 text-sm text-content-primary dark:text-dark-content-primary hover:bg-primary-custom-100 dark:hover:bg-dark-bg-custom rounded-lg transition-colors">
-                Configuración
-              </button>
-            </div>
-            <div>
-              <p className="text-xs text-content-tertiary dark:text-content-tertiary mb-2">
-                Opciones frecuentes
-              </p>
-              <button className="w-full text-left px-4 py-2 text-sm text-content-primary dark:text-dark-content-primary hover:bg-primary-custom-100 dark:hover:bg-dark-bg-custom rounded-lg transition-colors">
-                Item
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div className="flex-1 p-8">
-        <h3 className="text-lg font-bold mb-4 text-content-primary dark:text-dark-content-primary">
-          Estado Búsqueda
-        </h3>
-        <p className="text-sm text-content-secondary dark:text-content-secondary">
-          Panel lateral se muestra al hacer click en el botón de búsqueda (modo collapsed).
-          <br />
-          Incluye input de búsqueda, sección de recientes y opciones frecuentes.
-        </p>
-      </div>
-    </div>
-  ),
-};
-
-// ============================================
-// 3. VARIANTES CON ITEMS ACTIVOS
-// ============================================
-export const ConItemActivo: Story = {
-  args: {
-    state: 'collapsed',
-    items: exampleItems.map((item, index) => ({
-      ...item,
-      active: index === 0,
-    })),
-  },
-  render: (args) => (
-    <div className="flex h-screen bg-white dark:bg-dark-bg-primary">
-      <NavigationRailCommercialWithState {...args} />
-      <div className="flex-1 p-8">
-        <h3 className="text-lg font-bold mb-4 text-content-primary dark:text-dark-content-primary">
-          Con Item Activo
-        </h3>
-        <p className="text-sm text-content-secondary dark:text-content-secondary">
-          El primer item (Administración) está marcado como activo.
-          <br />
-          Los items activos tienen un fondo de color custom-primary.
-        </p>
-      </div>
-    </div>
-  ),
-};
-
-export const ConBadges: Story = {
-  args: {
-    state: 'collapsed',
-    items: exampleItems.map((item, index) => ({
-      ...item,
-      badge: index === 1 || index === 3,
-      badgeCount: index === 1 ? 5 : index === 3 ? 12 : undefined,
-    })),
-  },
-  render: (args) => (
-    <div className="flex h-screen bg-white dark:bg-dark-bg-primary">
-      <NavigationRailCommercialWithState {...args} />
-      <div className="flex-1 p-8">
-        <h3 className="text-lg font-bold mb-4 text-content-primary dark:text-dark-content-primary">
-          Con Badges de Notificación
-        </h3>
-        <p className="text-sm text-content-secondary dark:text-content-secondary">
-          Algunos items tienen badges de notificación con contador.
-          <br />
-          Ventas (5) y Compras (12) tienen notificaciones pendientes.
-        </p>
-      </div>
-    </div>
-  ),
-};
-
-// ============================================
-// 4. CASOS DE USO REALES
-// ============================================
-export const AplicacionCompleta: Story = {
-  args: {
-    state: 'collapsed',
-    items: exampleItems,
-  },
-  render: (args) => (
-    <div className="flex h-screen bg-white dark:bg-dark-bg-primary">
-      <NavigationRailCommercialWithState {...args} />
-      <div className="flex-1 p-8">
-        <div className="max-w-4xl">
-          <h1 className="text-3xl font-bold mb-2 text-content-primary dark:text-dark-content-primary">
-            Panel de Control
-          </h1>
-          <p className="text-content-secondary dark:text-content-secondary mb-8">
-            Bienvenido al sistema comercial de Siesa
-          </p>
-
-          <div className="grid grid-cols-3 gap-6 mb-8">
-            <div className="bg-white dark:bg-dark-bg-primary p-6 rounded-lg border border-border-primary dark:border-dark-border-primary">
-              <h3 className="text-lg font-bold mb-2 text-content-primary dark:text-dark-content-primary">
-                Ventas del Mes
-              </h3>
-              <p className="text-3xl font-bold text-primary-custom-600">$125,430</p>
-            </div>
-            <div className="bg-white dark:bg-dark-bg-primary p-6 rounded-lg border border-border-primary dark:border-dark-border-primary">
-              <h3 className="text-lg font-bold mb-2 text-content-primary dark:text-dark-content-primary">
-                Pedidos Activos
-              </h3>
-              <p className="text-3xl font-bold text-primary-custom-600">48</p>
-            </div>
-            <div className="bg-white dark:bg-dark-bg-primary p-6 rounded-lg border border-border-primary dark:border-dark-border-primary">
-              <h3 className="text-lg font-bold mb-2 text-content-primary dark:text-dark-content-primary">
-                Productos en Stock
-              </h3>
-              <p className="text-3xl font-bold text-primary-custom-600">1,234</p>
-            </div>
-          </div>
-
-          <div className="bg-white dark:bg-dark-bg-primary p-6 rounded-lg border border-border-primary dark:border-dark-border-primary">
-            <h3 className="text-lg font-bold mb-4 text-content-primary dark:text-dark-content-primary">
-              Actividad Reciente
-            </h3>
-            <div className="space-y-3">
-              {[1, 2, 3, 4].map((i) => (
-                <div
-                  key={i}
-                  className="flex items-center justify-between py-3 border-b border-border-primary dark:border-dark-border-primary last:border-0"
-                >
-                  <div>
-                    <p className="font-medium text-content-primary dark:text-dark-content-primary">
-                      Nueva orden #{1000 + i}
-                    </p>
-                    <p className="text-sm text-content-secondary dark:text-content-secondary">
-                      Cliente: Usuario {i}
-                    </p>
-                  </div>
-                  <span className="text-sm text-content-secondary dark:text-content-secondary">
-                    Hace {i} hora{i > 1 ? 's' : ''}
-                  </span>
-                </div>
-              ))}
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  ),
-};