Fix frontend 3

frontend/src/pages/app/operations/production/ProductionPage.tsx

@@ -1,12 +1,22 @@
 import React, { useState } from 'react';
-import { Plus, Calendar, Clock, Users, AlertCircle } from 'lucide-react';
-import { Button, Card, Badge, Table } from '../../../../components/ui';
-import type { TableColumn } from '../../../../components/ui';
+import { Plus, Calendar, Clock, Users, AlertCircle, Search, Download, Filter } from 'lucide-react';
+import { Button, Card, Badge } from '../../../../components/ui';
+import { DataTable } from '../../../../components/shared';
+import type { DataTableColumn, DataTableFilter, DataTablePagination, DataTableSelection } from '../../../../components/shared';
 import { PageHeader } from '../../../../components/layout';
 import { ProductionSchedule, BatchTracker, QualityControl } from '../../../../components/domain/production';
 
 const ProductionPage: React.FC = () => {
   const [activeTab, setActiveTab] = useState('schedule');
+  const [searchQuery, setSearchQuery] = useState('');
+  const [filters, setFilters] = useState<DataTableFilter[]>([]);
+  const [selectedBatches, setSelectedBatches] = useState<any[]>([]);
+  const [pagination, setPagination] = useState<DataTablePagination>({
+    page: 1,
+    pageSize: 10,
+    total: 8 // Updated to match the number of mock orders
+  });
+  const [isLoading, setIsLoading] = useState(false);
 
   const mockProductionStats = {
     dailyTarget: 150,
@@ -17,6 +27,41 @@ const ProductionPage: React.FC = () => {
     quality: 94,
   };
 
+  // Handler functions for table actions
+  const handleViewBatch = (batch: any) => {
+    console.log('Ver lote:', batch);
+    // Implement view logic
+  };
+
+  const handleEditBatch = (batch: any) => {
+    console.log('Editar lote:', batch);
+    // Implement edit logic
+  };
+
+  const handleSearchChange = (query: string) => {
+    setSearchQuery(query);
+    // Implement search logic
+  };
+
+  const handleFiltersChange = (newFilters: DataTableFilter[]) => {
+    setFilters(newFilters);
+    // Implement filtering logic
+  };
+
+  const handlePageChange = (page: number, pageSize: number) => {
+    setPagination(prev => ({ ...prev, page, pageSize }));
+    // Implement pagination logic
+  };
+
+  const handleBatchSelection = (selectedRows: any[]) => {
+    setSelectedBatches(selectedRows);
+  };
+
+  const handleExport = (format: 'csv' | 'xlsx') => {
+    console.log(`Exportando en formato ${format}`);
+    // Implement export logic
+  };
+
   const mockProductionOrders = [
     {
       id: '1',
@@ -51,6 +96,61 @@ const ProductionPage: React.FC = () => {
       estimatedCompletion: '2024-01-26T08:00:00Z',
       progress: 100,
     },
+    {
+      id: '4',
+      recipeName: 'Tarta de Chocolate',
+      quantity: 5,
+      status: 'pending',
+      priority: 'low',
+      assignedTo: 'Ana Pastelera',
+      startTime: '2024-01-26T10:00:00Z',
+      estimatedCompletion: '2024-01-26T16:00:00Z',
+      progress: 0,
+    },
+    {
+      id: '5',
+      recipeName: 'Empanadas de Pollo',
+      quantity: 40,
+      status: 'in_progress',
+      priority: 'high',
+      assignedTo: 'Luis Hornero',
+      startTime: '2024-01-26T07:00:00Z',
+      estimatedCompletion: '2024-01-26T11:00:00Z',
+      progress: 45,
+    },
+    {
+      id: '6',
+      recipeName: 'Donuts Glaseados',
+      quantity: 60,
+      status: 'pending',
+      priority: 'urgent',
+      assignedTo: 'María González',
+      startTime: '2024-01-26T12:00:00Z',
+      estimatedCompletion: '2024-01-26T15:00:00Z',
+      progress: 0,
+    },
+    {
+      id: '7',
+      recipeName: 'Pan de Centeno',
+      quantity: 25,
+      status: 'completed',
+      priority: 'medium',
+      assignedTo: 'Juan Panadero',
+      startTime: '2024-01-26T05:00:00Z',
+      estimatedCompletion: '2024-01-26T09:00:00Z',
+      progress: 100,
+    },
+    {
+      id: '8',
+      recipeName: 'Muffins de Arándanos',
+      quantity: 36,
+      status: 'in_progress',
+      priority: 'medium',
+      assignedTo: 'Ana Pastelera',
+      startTime: '2024-01-26T08:30:00Z',
+      estimatedCompletion: '2024-01-26T12:30:00Z',
+      progress: 70,
+    },
   ];
 
   const getStatusBadge = (status: string) => {
@@ -77,38 +177,74 @@ const ProductionPage: React.FC = () => {
     return <Badge variant={config.color as any}>{config.text}</Badge>;
   };
 
-  const columns: TableColumn[] = [
+  const columns: DataTableColumn[] = [
     {
+      id: 'recipeName',
       key: 'recipeName',
-      title: 'Receta',
-      dataIndex: 'recipeName',
-      render: (value) => (
+      header: 'Receta',
+      sortable: true,
+      filterable: true,
+      type: 'text',
+      width: 200,
+      cell: (value) => (
         <div className="text-sm font-medium text-[var(--text-primary)]">{value}</div>
       ),
     },
     {
+      id: 'quantity',
       key: 'quantity',
-      title: 'Cantidad',
-      dataIndex: 'quantity',
-      render: (value) => `${value} unidades`,
+      header: 'Cantidad',
+      sortable: true,
+      filterable: true,
+      type: 'number',
+      width: 120,
+      align: 'center',
+      cell: (value) => `${value} unidades`,
     },
     {
+      id: 'status',
       key: 'status',
-      title: 'Estado',
-      dataIndex: 'status',
-      render: (value) => getStatusBadge(value),
+      header: 'Estado',
+      sortable: true,
+      filterable: true,
+      type: 'select',
+      width: 130,
+      align: 'center',
+      selectOptions: [
+        { value: 'pending', label: 'Pendiente' },
+        { value: 'in_progress', label: 'En Proceso' },
+        { value: 'completed', label: 'Completado' },
+        { value: 'cancelled', label: 'Cancelado' }
+      ],
+      cell: (value) => getStatusBadge(value),
     },
     {
+      id: 'priority',
       key: 'priority',
-      title: 'Prioridad',
-      dataIndex: 'priority',
-      render: (value) => getPriorityBadge(value),
+      header: 'Prioridad',
+      sortable: true,
+      filterable: true,
+      type: 'select',
+      width: 120,
+      align: 'center',
+      selectOptions: [
+        { value: 'low', label: 'Baja' },
+        { value: 'medium', label: 'Media' },
+        { value: 'high', label: 'Alta' },
+        { value: 'urgent', label: 'Urgente' }
+      ],
+      cell: (value) => getPriorityBadge(value),
     },
     {
+      id: 'assignedTo',
       key: 'assignedTo',
-      title: 'Asignado a',
-      dataIndex: 'assignedTo',
-      render: (value) => (
+      header: 'Asignado a',
+      sortable: true,
+      filterable: true,
+      type: 'text',
+      width: 180,
+      hideOnMobile: true,
+      cell: (value) => (
         <div className="flex items-center">
           <Users className="h-4 w-4 text-[var(--text-tertiary)] mr-2" />
           <span className="text-sm text-[var(--text-primary)]">{value}</span>
@@ -116,10 +252,16 @@ const ProductionPage: React.FC = () => {
       ),
     },
     {
+      id: 'progress',
       key: 'progress',
-      title: 'Progreso',
-      dataIndex: 'progress',
-      render: (value) => (
+      header: 'Progreso',
+      sortable: true,
+      filterable: true,
+      type: 'number',
+      width: 150,
+      align: 'center',
+      hideOnMobile: true,
+      cell: (value) => (
         <div className="flex items-center">
           <div className="w-full bg-[var(--bg-quaternary)] rounded-full h-2 mr-2">
             <div
@@ -132,24 +274,35 @@ const ProductionPage: React.FC = () => {
       ),
     },
     {
+      id: 'estimatedCompletion',
       key: 'estimatedCompletion',
-      title: 'Tiempo Estimado',
-      dataIndex: 'estimatedCompletion',
-      render: (value) => new Date(value).toLocaleTimeString('es-ES', { 
+      header: 'Tiempo Estimado',
+      sortable: true,
+      filterable: true,
+      type: 'date',
+      width: 140,
+      align: 'center',
+      hideOnMobile: true,
+      cell: (value) => new Date(value).toLocaleTimeString('es-ES', { 
         hour: '2-digit', 
         minute: '2-digit' 
       }),
     },
     {
+      id: 'actions',
       key: 'actions',
-      title: 'Acciones',
-      align: 'right' as const,
-      render: () => (
+      header: 'Acciones',
+      sortable: false,
+      filterable: false,
+      width: 150,
+      align: 'right',
+      sticky: 'right',
+      cell: (value, row) => (
         <div className="flex space-x-2">
-          <Button variant="outline" size="sm">
+          <Button variant="outline" size="sm" onClick={() => handleViewBatch(row)}>
             Ver
           </Button>
-          <Button variant="outline" size="sm">
+          <Button variant="outline" size="sm" onClick={() => handleEditBatch(row)}>
             Editar
           </Button>
         </div>
@@ -288,22 +441,46 @@ const ProductionPage: React.FC = () => {
             <div className="flex justify-between items-center mb-6">
               <h3 className="text-lg font-medium text-[var(--text-primary)]">Órdenes de Producción</h3>
               <div className="flex space-x-2">
+                {selectedBatches.length > 0 && (
+                  <Button variant="outline" size="sm">
+                    <Download className="w-4 h-4 mr-2" />
+                    Acciones en lote ({selectedBatches.length})
+                  </Button>
+                )}
                 <Button variant="outline" size="sm">
-                  Filtros
-                </Button>
-                <Button variant="outline" size="sm">
+                  <Filter className="w-4 h-4 mr-2" />
                   Vista Calendario
                 </Button>
               </div>
             </div>
             
-            <Table
-              columns={columns}
+            <DataTable
               data={mockProductionOrders}
-              rowKey="id"
-              hover={true}
-              variant="default"
-              size="md"
+              columns={columns}
+              isLoading={isLoading}
+              searchQuery={searchQuery}
+              onSearchChange={handleSearchChange}
+              searchPlaceholder="Buscar por receta, asignado, estado..."
+              filters={filters}
+              onFiltersChange={handleFiltersChange}
+              pagination={pagination}
+              onPageChange={handlePageChange}
+              selection={{
+                mode: 'multiple',
+                selectedRows: selectedBatches,
+                onSelectionChange: handleBatchSelection,
+                getRowId: (row) => row.id
+              }}
+              enableExport={true}
+              onExport={handleExport}
+              density="normal"
+              horizontalScroll={true}
+              emptyStateMessage="No se encontraron órdenes de producción"
+              emptyStateAction={{
+                label: "Nueva Orden",
+                onClick: () => console.log('Nueva orden de producción')
+              }}
+              onRowClick={(row) => console.log('Ver detalles:', row)}
             />
           </div>
         </Card>

frontend/src/pages/app/settings/profile/ProfilePage.tsx

@@ -0,0 +1,384 @@
+import React, { useState } from 'react';
+import { User, Mail, Phone, MapPin, Building, Shield, Activity, Settings, Edit3, Lock, Bell, Download } from 'lucide-react';
+import { Button, Card, Badge, Avatar, Input, ProgressBar } from '../../../../components/ui';
+import { PageHeader } from '../../../../components/layout';
+import { ProfileSettings } from '../../../../components/domain/auth';
+
+const ProfilePage: React.FC = () => {
+  const [activeTab, setActiveTab] = useState('profile');
+  const [isEditing, setIsEditing] = useState(false);
+  const [userInfo, setUserInfo] = useState({
+    name: 'María González',
+    email: 'maria.gonzalez@panaderia.com',
+    phone: '+34 123 456 789',
+    address: 'Calle Mayor 123, Madrid',
+    bakery: 'Panadería La Tradicional',
+    role: 'Propietario'
+  });
+
+  const mockProfileStats = {
+    profileCompletion: 85,
+    securityScore: 94,
+    lastLogin: '2 horas',
+    activeSessions: 2,
+    twoFactorEnabled: false,
+    passwordLastChanged: '2 meses'
+  };
+
+  const handleSave = () => {
+    setIsEditing(false);
+    console.log('Profile updated:', userInfo);
+  };
+
+  const handleCancel = () => {
+    setIsEditing(false);
+  };
+
+  const handleEnable2FA = () => {
+    console.log('Enabling 2FA');
+  };
+
+  const handleChangePassword = () => {
+    console.log('Change password');
+  };
+
+  const handleManageSessions = () => {
+    console.log('Manage sessions');
+  };
+
+  return (
+    <div className="p-6 space-y-6">
+      <PageHeader
+        title="Mi Perfil"
+        description="Gestiona tu información personal y configuración de cuenta"
+        action={
+          <Button onClick={() => setIsEditing(!isEditing)}>
+            <Edit3 className="w-4 h-4 mr-2" />
+            {isEditing ? 'Guardar Cambios' : 'Editar Perfil'}
+          </Button>
+        }
+      />
+
+      {/* Profile Stats */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-6 gap-4">
+        <Card className="p-4">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-sm font-medium text-[var(--text-secondary)]">Perfil Completado</p>
+              <p className="text-2xl font-bold text-[var(--color-success)]">{mockProfileStats.profileCompletion}%</p>
+            </div>
+            <User className="h-8 w-8 text-[var(--color-success)]" />
+          </div>
+        </Card>
+
+        <Card className="p-4">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-sm font-medium text-[var(--text-secondary)]">Seguridad</p>
+              <p className="text-2xl font-bold text-[var(--color-info)]">{mockProfileStats.securityScore}%</p>
+            </div>
+            <Shield className="h-8 w-8 text-[var(--color-info)]" />
+          </div>
+        </Card>
+
+        <Card className="p-4">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-sm font-medium text-[var(--text-secondary)]">Último Acceso</p>
+              <p className="text-2xl font-bold text-[var(--text-primary)]">{mockProfileStats.lastLogin}</p>
+            </div>
+            <Activity className="h-8 w-8 text-[var(--color-primary)]" />
+          </div>
+        </Card>
+
+        <Card className="p-4">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-sm font-medium text-[var(--text-secondary)]">Sesiones</p>
+              <p className="text-2xl font-bold text-purple-600">{mockProfileStats.activeSessions}</p>
+            </div>
+            <div className="h-8 w-8 bg-purple-100 rounded-full flex items-center justify-center">
+              <Settings className="h-5 w-5 text-purple-600" />
+            </div>
+          </div>
+        </Card>
+
+        <Card className="p-4">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-sm font-medium text-[var(--text-secondary)]">2FA</p>
+              <p className="text-lg font-bold text-[var(--color-warning)]">{mockProfileStats.twoFactorEnabled ? 'Activo' : 'Pendiente'}</p>
+            </div>
+            <Lock className="h-8 w-8 text-[var(--color-warning)]" />
+          </div>
+        </Card>
+
+        <Card className="p-4">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-sm font-medium text-[var(--text-secondary)]">Contraseña</p>
+              <p className="text-lg font-bold text-indigo-600">{mockProfileStats.passwordLastChanged}</p>
+            </div>
+            <div className="h-8 w-8 bg-indigo-100 rounded-full flex items-center justify-center">
+              <Shield className="h-5 w-5 text-indigo-600" />
+            </div>
+          </div>
+        </Card>
+      </div>
+
+      {/* Tabs Navigation */}
+      <div className="border-b border-[var(--border-primary)]">
+        <nav className="-mb-px flex space-x-8">
+          <button
+            onClick={() => setActiveTab('profile')}
+            className={`py-2 px-1 border-b-2 font-medium text-sm ${
+              activeTab === 'profile'
+                ? 'border-orange-500 text-[var(--color-primary)]'
+                : 'border-transparent text-[var(--text-tertiary)] hover:text-[var(--text-secondary)] hover:border-[var(--border-secondary)]'
+            }`}
+          >
+            Información Personal
+          </button>
+          <button
+            onClick={() => setActiveTab('security')}
+            className={`py-2 px-1 border-b-2 font-medium text-sm ${
+              activeTab === 'security'
+                ? 'border-orange-500 text-[var(--color-primary)]'
+                : 'border-transparent text-[var(--text-tertiary)] hover:text-[var(--text-secondary)] hover:border-[var(--border-secondary)]'
+            }`}
+          >
+            Seguridad
+          </button>
+          <button
+            onClick={() => setActiveTab('activity')}
+            className={`py-2 px-1 border-b-2 font-medium text-sm ${
+              activeTab === 'activity'
+                ? 'border-orange-500 text-[var(--color-primary)]'
+                : 'border-transparent text-[var(--text-tertiary)] hover:text-[var(--text-secondary)] hover:border-[var(--border-secondary)]'
+            }`}
+          >
+            Actividad
+          </button>
+        </nav>
+      </div>
+
+      {/* Tab Content */}
+      {activeTab === 'profile' && (
+        <Card>
+          <div className="p-6">
+            <div className="flex justify-between items-center mb-6">
+              <h3 className="text-lg font-medium text-[var(--text-primary)]">Información Personal</h3>
+              <div className="flex space-x-2">
+                <Button variant="outline" size="sm">
+                  <Download className="w-4 h-4 mr-2" />
+                  Exportar Datos
+                </Button>
+              </div>
+            </div>
+            
+            {/* Avatar and Basic Info */}
+            <div className="flex items-center gap-6 mb-8">
+              <Avatar 
+                src="/api/placeholder/120/120" 
+                alt={userInfo.name}
+                size="lg"
+                className="w-20 h-20"
+              />
+              <div className="flex-1">
+                <h2 className="text-xl font-semibold text-[var(--text-primary)]">{userInfo.name}</h2>
+                <p className="text-[var(--text-secondary)]">{userInfo.role}</p>
+                <div className="flex items-center gap-2 mt-2">
+                  <Badge variant="success">Verificado</Badge>
+                  <Badge variant="info">Premium</Badge>
+                </div>
+              </div>
+            </div>
+
+            {/* Form Fields */}
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+              <div>
+                <label className="block text-sm font-medium text-[var(--text-primary)] mb-2">
+                  <User className="w-4 h-4 inline mr-2" />
+                  Nombre Completo
+                </label>
+                <Input 
+                  value={userInfo.name}
+                  onChange={(e) => setUserInfo({...userInfo, name: e.target.value})}
+                  disabled={!isEditing}
+                />
+              </div>
+              
+              <div>
+                <label className="block text-sm font-medium text-[var(--text-primary)] mb-2">
+                  <Mail className="w-4 h-4 inline mr-2" />
+                  Email
+                </label>
+                <Input 
+                  value={userInfo.email}
+                  onChange={(e) => setUserInfo({...userInfo, email: e.target.value})}
+                  disabled={!isEditing}
+                  type="email"
+                />
+              </div>
+              
+              <div>
+                <label className="block text-sm font-medium text-[var(--text-primary)] mb-2">
+                  <Phone className="w-4 h-4 inline mr-2" />
+                  Teléfono
+                </label>
+                <Input 
+                  value={userInfo.phone}
+                  onChange={(e) => setUserInfo({...userInfo, phone: e.target.value})}
+                  disabled={!isEditing}
+                  type="tel"
+                />
+              </div>
+              
+              <div>
+                <label className="block text-sm font-medium text-[var(--text-primary)] mb-2">
+                  <Building className="w-4 h-4 inline mr-2" />
+                  Panadería
+                </label>
+                <Input 
+                  value={userInfo.bakery}
+                  onChange={(e) => setUserInfo({...userInfo, bakery: e.target.value})}
+                  disabled={!isEditing}
+                />
+              </div>
+              
+              <div className="md:col-span-2">
+                <label className="block text-sm font-medium text-[var(--text-primary)] mb-2">
+                  <MapPin className="w-4 h-4 inline mr-2" />
+                  Dirección
+                </label>
+                <Input 
+                  value={userInfo.address}
+                  onChange={(e) => setUserInfo({...userInfo, address: e.target.value})}
+                  disabled={!isEditing}
+                />
+              </div>
+            </div>
+
+            {/* Action Buttons */}
+            {isEditing && (
+              <div className="flex gap-3 pt-6 mt-6 border-t border-[var(--border-primary)]">
+                <Button onClick={handleSave}>Guardar Cambios</Button>
+                <Button variant="outline" onClick={handleCancel}>Cancelar</Button>
+              </div>
+            )}
+          </div>
+        </Card>
+      )}
+
+      {activeTab === 'security' && (
+        <Card>
+          <div className="p-6">
+            <div className="flex justify-between items-center mb-6">
+              <h3 className="text-lg font-medium text-[var(--text-primary)]">Configuración de Seguridad</h3>
+            </div>
+            
+            <div className="space-y-6">
+              <div className="flex items-center justify-between p-4 border border-[var(--border-primary)] rounded-lg">
+                <div className="flex items-center gap-3">
+                  <Shield className="w-5 h-5 text-[var(--color-info)]" />
+                  <div>
+                    <p className="font-medium text-[var(--text-primary)]">Autenticación de Dos Factores</p>
+                    <p className="text-sm text-[var(--text-secondary)]">Protege tu cuenta con 2FA</p>
+                  </div>
+                </div>
+                <div className="flex items-center gap-3">
+                  <Badge variant={mockProfileStats.twoFactorEnabled ? "success" : "warning"}>
+                    {mockProfileStats.twoFactorEnabled ? "Activo" : "Pendiente"}
+                  </Badge>
+                  <Button variant="outline" size="sm" onClick={handleEnable2FA}>
+                    {mockProfileStats.twoFactorEnabled ? "Desactivar" : "Activar"}
+                  </Button>
+                </div>
+              </div>
+              
+              <div className="flex items-center justify-between p-4 border border-[var(--border-primary)] rounded-lg">
+                <div className="flex items-center gap-3">
+                  <Lock className="w-5 h-5 text-[var(--color-primary)]" />
+                  <div>
+                    <p className="font-medium text-[var(--text-primary)]">Contraseña</p>
+                    <p className="text-sm text-[var(--text-secondary)]">Actualizada hace {mockProfileStats.passwordLastChanged}</p>
+                  </div>
+                </div>
+                <Button variant="outline" size="sm" onClick={handleChangePassword}>
+                  Cambiar
+                </Button>
+              </div>
+              
+              <div className="flex items-center justify-between p-4 border border-[var(--border-primary)] rounded-lg">
+                <div className="flex items-center gap-3">
+                  <Settings className="w-5 h-5 text-purple-600" />
+                  <div>
+                    <p className="font-medium text-[var(--text-primary)]">Sesiones Activas</p>
+                    <p className="text-sm text-[var(--text-secondary)]">{mockProfileStats.activeSessions} dispositivos conectados</p>
+                  </div>
+                </div>
+                <Button variant="outline" size="sm" onClick={handleManageSessions}>
+                  Gestionar
+                </Button>
+              </div>
+            </div>
+          </div>
+        </Card>
+      )}
+
+      {activeTab === 'activity' && (
+        <Card>
+          <div className="p-6">
+            <div className="flex justify-between items-center mb-6">
+              <h3 className="text-lg font-medium text-[var(--text-primary)]">Actividad Reciente</h3>
+            </div>
+            
+            <div className="space-y-4">
+              <div className="flex items-center gap-4 p-4 border border-[var(--border-primary)] rounded-lg">
+                <div className="w-2 h-2 bg-green-500 rounded-full"></div>
+                <Activity className="w-5 h-5 text-green-500" />
+                <div className="flex-1">
+                  <p className="font-medium text-[var(--text-primary)]">Inicio de sesión</p>
+                  <p className="text-sm text-[var(--text-secondary)]">Hace 2 horas desde Chrome en Madrid, España</p>
+                </div>
+                <span className="text-xs text-[var(--text-tertiary)]">Hoy 14:30</span>
+              </div>
+              
+              <div className="flex items-center gap-4 p-4 border border-[var(--border-primary)] rounded-lg">
+                <div className="w-2 h-2 bg-blue-500 rounded-full"></div>
+                <User className="w-5 h-5 text-blue-500" />
+                <div className="flex-1">
+                  <p className="font-medium text-[var(--text-primary)]">Perfil actualizado</p>
+                  <p className="text-sm text-[var(--text-secondary)]">Se modificó la información de contacto</p>
+                </div>
+                <span className="text-xs text-[var(--text-tertiary)]">Ayer 09:15</span>
+              </div>
+              
+              <div className="flex items-center gap-4 p-4 border border-[var(--border-primary)] rounded-lg">
+                <div className="w-2 h-2 bg-orange-500 rounded-full"></div>
+                <Shield className="w-5 h-5 text-orange-500" />
+                <div className="flex-1">
+                  <p className="font-medium text-[var(--text-primary)]">Contraseña cambiada</p>
+                  <p className="text-sm text-[var(--text-secondary)]">Contraseña actualizada exitosamente</p>
+                </div>
+                <span className="text-xs text-[var(--text-tertiary)]">Hace 2 meses</span>
+              </div>
+              
+              <div className="flex items-center gap-4 p-4 border border-[var(--border-primary)] rounded-lg">
+                <div className="w-2 h-2 bg-purple-500 rounded-full"></div>
+                <Bell className="w-5 h-5 text-purple-500" />
+                <div className="flex-1">
+                  <p className="font-medium text-[var(--text-primary)]">Configuración de notificaciones</p>
+                  <p className="text-sm text-[var(--text-secondary)]">Se habilitaron las notificaciones por email</p>
+                </div>
+                <span className="text-xs text-[var(--text-tertiary)]">Hace 1 semana</span>
+              </div>
+            </div>
+          </div>
+        </Card>
+      )}
+    </div>
+  );
+};
+
+export default ProfilePage;

frontend/src/pages/app/settings/profile/index.ts

@@ -0,0 +1 @@
+export { default as ProfilePage } from './ProfilePage';