siesa-ui-kit 1.0.3 → 1.0.4

package/src/components/NavigationRail/README.md

@@ -0,0 +1,224 @@
+# 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

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

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

@@ -0,0 +1,464 @@
+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>
+  ),
+};