+ {/* Header */}
+
+ );
+}
+
+export default PipelineKanbanPage;
diff --git a/src/pages/financial/AccountsPage.tsx b/src/pages/financial/AccountsPage.tsx
index 2df34d1..37cdaaa 100644
--- a/src/pages/financial/AccountsPage.tsx
+++ b/src/pages/financial/AccountsPage.tsx
@@ -1,4 +1,5 @@
import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
import {
BookOpen,
Plus,
@@ -45,6 +46,7 @@ const formatCurrency = (value: number): string => {
};
export function AccountsPage() {
+ const navigate = useNavigate();
const [selectedType, setSelectedType] = useState
+
+
+ {/* Kanban Board */}
+
+
+
+ {/* Summary Stats */}
+
+
+ Pipeline de Ventas
++ Gestiona oportunidades arrastrando tarjetas entre etapas +
+
+
+
+
+
+
+
+
+
+
+ {/* Filters */}
+
+
+ Oportunidades
+ {totals.totalOpportunities}
+
+
+ Pipeline Total
+ ${formatCurrency(totals.openValue)}
+
+
+ Ponderado
+ ${formatCurrency(totals.weightedValue)}
+
+
+ Ganado
+ ${formatCurrency(totals.wonValue)}
+
+
+ Valor Total
+ ${formatCurrency(totals.totalValue)}
+
+
+
+ {/* Search */}
+
+
+ {/* Expanded Filters */}
+ {showFilters && (
+
+
+
+ {/* Toggle Filters */}
+
+
+ {hasActiveFilters && (
+
+ )}
+
+
+ )}
+
+
+
+
+
+
+
+
+
+ {(Object.keys(stageLabels) as StageKey[]).map((stage) => (
+
+
+
+ );
+}
+
+export default CompanySettingsPage;
diff --git a/src/pages/settings/ProfileSettingsPage.tsx b/src/pages/settings/ProfileSettingsPage.tsx
new file mode 100644
index 0000000..7d2eb25
--- /dev/null
+++ b/src/pages/settings/ProfileSettingsPage.tsx
@@ -0,0 +1,549 @@
+import { useState } from 'react';
+import {
+ User,
+ Camera,
+ Save,
+ Mail,
+ Phone,
+ Lock,
+ Eye,
+ EyeOff,
+ Bell,
+ Globe,
+ Check,
+} from 'lucide-react';
+import { Button } from '@components/atoms/Button';
+import { Input } from '@components/atoms/Input';
+import { Card, CardHeader, CardTitle, CardContent, CardFooter } from '@components/molecules/Card';
+import { Breadcrumbs } from '@components/organisms/Breadcrumbs';
+
+interface ProfileFormData {
+ firstName: string;
+ lastName: string;
+ email: string;
+ phone: string;
+ avatar: string | null;
+ language: string;
+ timezone: string;
+}
+
+interface PasswordFormData {
+ currentPassword: string;
+ newPassword: string;
+ confirmPassword: string;
+}
+
+interface NotificationSettings {
+ emailNotifications: boolean;
+ pushNotifications: boolean;
+ smsNotifications: boolean;
+ marketingEmails: boolean;
+ securityAlerts: boolean;
+ weeklyReport: boolean;
+ monthlyReport: boolean;
+}
+
+const initialProfileData: ProfileFormData = {
+ firstName: 'Juan',
+ lastName: 'Perez',
+ email: 'juan.perez@miempresa.com',
+ phone: '+52 55 1234 5678',
+ avatar: null,
+ language: 'es-MX',
+ timezone: 'America/Mexico_City',
+};
+
+const initialPasswordData: PasswordFormData = {
+ currentPassword: '',
+ newPassword: '',
+ confirmPassword: '',
+};
+
+const initialNotifications: NotificationSettings = {
+ emailNotifications: true,
+ pushNotifications: true,
+ smsNotifications: false,
+ marketingEmails: false,
+ securityAlerts: true,
+ weeklyReport: true,
+ monthlyReport: false,
+};
+
+const languages = [
+ { value: 'es-MX', label: 'Espanol (Mexico)' },
+ { value: 'es-ES', label: 'Espanol (Espana)' },
+ { value: 'en-US', label: 'English (US)' },
+ { value: 'en-GB', label: 'English (UK)' },
+ { value: 'pt-BR', label: 'Portugues (Brasil)' },
+];
+
+const timezones = [
+ { value: 'America/Mexico_City', label: '(UTC-06:00) Ciudad de Mexico' },
+ { value: 'America/Tijuana', label: '(UTC-08:00) Tijuana' },
+ { value: 'America/Cancun', label: '(UTC-05:00) Cancun' },
+ { value: 'America/New_York', label: '(UTC-05:00) Nueva York' },
+ { value: 'America/Los_Angeles', label: '(UTC-08:00) Los Angeles' },
+ { value: 'Europe/Madrid', label: '(UTC+01:00) Madrid' },
+ { value: 'Europe/London', label: '(UTC+00:00) Londres' },
+];
+
+function ToggleSwitch({
+ checked,
+ onChange,
+ label,
+ description,
+}: {
+ checked: boolean;
+ onChange: (checked: boolean) => void;
+ label: string;
+ description?: string;
+}) {
+ return (
+
+
+
+
+
+
+ Configuracion de Empresa
++ Administra la informacion general de tu empresa +
+
+ {/* General Information */}
+
+
+
+
+
+
+ {/* Logo */}
+
+
+
+ {/* Contact Information */}
+
+
+
+
+
+
+
+
+
+ {/* Address */}
+
+
+
+
+
+
+
+
+
+ {/* Fiscal Information */}
+
+
+
+
+
+
+
+
+
+ {/* Regional Settings */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Company Name */}
+
+
+
+ {logoPreview ? (
+ 
+ ) : (
+
+
+
+
+ + PNG, JPG o SVG. Maximo 2MB. +
+
+
+ handleInputChange('name', e.target.value)}
+ placeholder="Nombre de la empresa"
+ />
+
+
+ {/* Legal Name */}
+
+
+ handleInputChange('legalName', e.target.value)}
+ placeholder="Razon social completa"
+ />
+
+
+
+ handleInputChange('phone', e.target.value)}
+ placeholder="+52 55 1234 5678"
+ />
+
+
+
+
+ handleInputChange('email', e.target.value)}
+ placeholder="contacto@empresa.com"
+ />
+
+
+
+
+ handleInputChange('website', e.target.value)}
+ placeholder="https://www.empresa.com"
+ />
+
+
+
+ handleInputChange('street', e.target.value)}
+ placeholder="Av. Reforma 123, Col. Centro"
+ />
+
+
+
+
+
+
+
+ handleInputChange('city', e.target.value)}
+ placeholder="Ciudad de Mexico"
+ />
+
+
+
+ handleInputChange('state', e.target.value)}
+ placeholder="CDMX"
+ />
+
+
+
+
+
+ handleInputChange('postalCode', e.target.value)}
+ placeholder="06000"
+ />
+
+
+
+ handleInputChange('country', e.target.value)}
+ placeholder="Mexico"
+ />
+
+
+
+ handleInputChange('taxId', e.target.value.toUpperCase())}
+ placeholder="XAXX010101000"
+ className="uppercase"
+ />
+
+
+
+
+
+
+
+
+
+ handleInputChange('fiscalAddress', e.target.value)}
+ placeholder="Domicilio fiscal completo"
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export function ProfileSettingsPage() {
+ const [profileData, setProfileData] = useState
+
+
+ {label}
+ {description && {description}
}
+
+
+ );
+}
+
+export default ProfileSettingsPage;
diff --git a/src/pages/settings/SecuritySettingsPage.tsx b/src/pages/settings/SecuritySettingsPage.tsx
new file mode 100644
index 0000000..0e39fcb
--- /dev/null
+++ b/src/pages/settings/SecuritySettingsPage.tsx
@@ -0,0 +1,662 @@
+import { useState } from 'react';
+import {
+ Shield,
+ Smartphone,
+ Key,
+ Monitor,
+ LogOut,
+ MapPin,
+ Clock,
+ Check,
+ X,
+ AlertTriangle,
+ Trash2,
+ QrCode,
+ Copy,
+} from 'lucide-react';
+import { Button } from '@components/atoms/Button';
+import { Input } from '@components/atoms/Input';
+import { Card, CardHeader, CardTitle, CardContent } from '@components/molecules/Card';
+import { DataTable, type Column } from '@components/organisms/DataTable';
+import { Breadcrumbs } from '@components/organisms/Breadcrumbs';
+import { ConfirmModal } from '@components/organisms/Modal';
+import { formatDate } from '@utils/formatters';
+
+interface Session {
+ id: string;
+ device: string;
+ browser: string;
+ location: string;
+ ipAddress: string;
+ lastActive: string;
+ isCurrent: boolean;
+}
+
+interface LoginHistory {
+ id: string;
+ date: string;
+ ipAddress: string;
+ location: string;
+ device: string;
+ browser: string;
+ status: 'success' | 'failed';
+}
+
+interface AuthorizedDevice {
+ id: string;
+ name: string;
+ type: 'desktop' | 'mobile' | 'tablet';
+ lastUsed: string;
+ trusted: boolean;
+}
+
+const mockSessions: Session[] = [
+ {
+ id: '1',
+ device: 'MacBook Pro',
+ browser: 'Chrome 120',
+ location: 'Ciudad de Mexico, Mexico',
+ ipAddress: '189.203.xxx.xxx',
+ lastActive: new Date().toISOString(),
+ isCurrent: true,
+ },
+ {
+ id: '2',
+ device: 'iPhone 15',
+ browser: 'Safari Mobile',
+ location: 'Ciudad de Mexico, Mexico',
+ ipAddress: '187.190.xxx.xxx',
+ lastActive: new Date(Date.now() - 3600000).toISOString(),
+ isCurrent: false,
+ },
+ {
+ id: '3',
+ device: 'Windows PC',
+ browser: 'Edge 120',
+ location: 'Guadalajara, Mexico',
+ ipAddress: '201.175.xxx.xxx',
+ lastActive: new Date(Date.now() - 86400000).toISOString(),
+ isCurrent: false,
+ },
+];
+
+const mockLoginHistory: LoginHistory[] = [
+ {
+ id: '1',
+ date: new Date().toISOString(),
+ ipAddress: '189.203.xxx.xxx',
+ location: 'Ciudad de Mexico, Mexico',
+ device: 'MacBook Pro',
+ browser: 'Chrome 120',
+ status: 'success',
+ },
+ {
+ id: '2',
+ date: new Date(Date.now() - 7200000).toISOString(),
+ ipAddress: '189.203.xxx.xxx',
+ location: 'Ciudad de Mexico, Mexico',
+ device: 'MacBook Pro',
+ browser: 'Chrome 120',
+ status: 'success',
+ },
+ {
+ id: '3',
+ date: new Date(Date.now() - 14400000).toISOString(),
+ ipAddress: '200.100.xxx.xxx',
+ location: 'Ubicacion desconocida',
+ device: 'Unknown',
+ browser: 'Unknown',
+ status: 'failed',
+ },
+ {
+ id: '4',
+ date: new Date(Date.now() - 86400000).toISOString(),
+ ipAddress: '187.190.xxx.xxx',
+ location: 'Ciudad de Mexico, Mexico',
+ device: 'iPhone 15',
+ browser: 'Safari Mobile',
+ status: 'success',
+ },
+ {
+ id: '5',
+ date: new Date(Date.now() - 172800000).toISOString(),
+ ipAddress: '201.175.xxx.xxx',
+ location: 'Guadalajara, Mexico',
+ device: 'Windows PC',
+ browser: 'Edge 120',
+ status: 'success',
+ },
+ {
+ id: '6',
+ date: new Date(Date.now() - 259200000).toISOString(),
+ ipAddress: '189.203.xxx.xxx',
+ location: 'Ciudad de Mexico, Mexico',
+ device: 'MacBook Pro',
+ browser: 'Chrome 120',
+ status: 'success',
+ },
+ {
+ id: '7',
+ date: new Date(Date.now() - 345600000).toISOString(),
+ ipAddress: '189.203.xxx.xxx',
+ location: 'Ciudad de Mexico, Mexico',
+ device: 'MacBook Pro',
+ browser: 'Firefox 121',
+ status: 'success',
+ },
+ {
+ id: '8',
+ date: new Date(Date.now() - 432000000).toISOString(),
+ ipAddress: '123.456.xxx.xxx',
+ location: 'Ubicacion desconocida',
+ device: 'Unknown',
+ browser: 'Unknown',
+ status: 'failed',
+ },
+ {
+ id: '9',
+ date: new Date(Date.now() - 518400000).toISOString(),
+ ipAddress: '187.190.xxx.xxx',
+ location: 'Ciudad de Mexico, Mexico',
+ device: 'iPhone 15',
+ browser: 'Safari Mobile',
+ status: 'success',
+ },
+ {
+ id: '10',
+ date: new Date(Date.now() - 604800000).toISOString(),
+ ipAddress: '189.203.xxx.xxx',
+ location: 'Ciudad de Mexico, Mexico',
+ device: 'MacBook Pro',
+ browser: 'Chrome 119',
+ status: 'success',
+ },
+];
+
+const mockAuthorizedDevices: AuthorizedDevice[] = [
+ {
+ id: '1',
+ name: 'MacBook Pro de Juan',
+ type: 'desktop',
+ lastUsed: new Date().toISOString(),
+ trusted: true,
+ },
+ {
+ id: '2',
+ name: 'iPhone de Juan',
+ type: 'mobile',
+ lastUsed: new Date(Date.now() - 3600000).toISOString(),
+ trusted: true,
+ },
+ {
+ id: '3',
+ name: 'iPad Pro',
+ type: 'tablet',
+ lastUsed: new Date(Date.now() - 604800000).toISOString(),
+ trusted: false,
+ },
+];
+
+export function SecuritySettingsPage() {
+ const [is2FAEnabled, setIs2FAEnabled] = useState(false);
+ const [show2FASetup, setShow2FASetup] = useState(false);
+ const [verificationCode, setVerificationCode] = useState('');
+ const [sessions] = useState
+
+
+ Mi Perfil
++ Administra tu informacion personal y preferencias +
+
+ {/* Profile Information */}
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Change Password */}
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Locale Settings */}
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Notification Settings */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Avatar */}
+
+
+
+
+ {/* Form Fields */}
+
+
+
+ {avatarPreview ? (
+ 
+ ) : (
+ initials
+ )}
+
+
+ Cambiar foto
+
+
+
+
+ handleProfileChange('firstName', e.target.value)}
+ placeholder="Tu nombre"
+ />
+
+
+
+
+ handleProfileChange('lastName', e.target.value)}
+ placeholder="Tu apellido"
+ />
+
+
+
+
+ handleProfileChange('email', e.target.value)}
+ placeholder="tu@email.com"
+ />
+
+
+
+
+ handleProfileChange('phone', e.target.value)}
+ placeholder="+52 55 1234 5678"
+ />
+
+
+
+
+
+
+ handlePasswordChange('currentPassword', e.target.value)}
+ placeholder="Tu contrasena actual"
+ />
+
+
+
+
+
+
+
+ handlePasswordChange('newPassword', e.target.value)}
+ placeholder="Minimo 8 caracteres"
+ />
+
+
+
+
+
+
+ handlePasswordChange('confirmPassword', e.target.value)}
+ placeholder="Repite la nueva contrasena"
+ />
+
+
+ {passwordData.newPassword &&
+ passwordData.confirmPassword &&
+ passwordData.newPassword !== passwordData.confirmPassword && (
+ + Las contrasenas no coinciden +
+ )} + {passwordData.newPassword && + passwordData.confirmPassword && + passwordData.newPassword === passwordData.confirmPassword && ( +
+
+
+
+
+
+
+
+
+
+
+
+
+ handleNotificationChange('emailNotifications', value)}
+ label="Notificaciones por email"
+ description="Recibe alertas y actualizaciones por correo"
+ />
+ handleNotificationChange('pushNotifications', value)}
+ label="Notificaciones push"
+ description="Notificaciones en el navegador"
+ />
+ handleNotificationChange('smsNotifications', value)}
+ label="Notificaciones SMS"
+ description="Recibe alertas por mensaje de texto"
+ />
+
+
+ Canales de notificacion
+
+ handleNotificationChange('securityAlerts', value)}
+ label="Alertas de seguridad"
+ description="Inicios de sesion y cambios de contrasena"
+ />
+ handleNotificationChange('weeklyReport', value)}
+ label="Reporte semanal"
+ description="Resumen de actividad semanal"
+ />
+ handleNotificationChange('monthlyReport', value)}
+ label="Reporte mensual"
+ description="Resumen de actividad mensual"
+ />
+ handleNotificationChange('marketingEmails', value)}
+ label="Emails de marketing"
+ description="Novedades, ofertas y actualizaciones"
+ />
+
+ Tipos de notificacion
+
+
+ ),
+ },
+ {
+ key: 'location',
+ header: 'Ubicacion',
+ render: (session) => (
+
+
+
+
+
+ {session.device}
+ {session.isCurrent && (
+
+ Actual
+
+ )}
+
+ {session.browser}
+
+
+ ),
+ },
+ {
+ key: 'lastActive',
+ header: 'Ultima actividad',
+ render: (session) => (
+
+
+ {session.location}
+ {session.ipAddress}
+
+
+ ),
+ },
+ {
+ key: 'actions',
+ header: '',
+ render: (session) =>
+ !session.isCurrent && (
+
+ ),
+ },
+ ];
+
+ const loginHistoryColumns: Column
+
+ ),
+ },
+ {
+ key: 'device',
+ header: 'Dispositivo',
+ render: (log) => (
+
+ {log.device} / {log.browser}
+
+ ),
+ },
+ {
+ key: 'ipAddress',
+ header: 'IP',
+ render: (log) => (
+ {log.ipAddress}
+ ),
+ },
+ ];
+
+ return (
+
+
+
+
+
+
+
+ {!show2FASetup ? (
+
+
+
+ {/* Active Sessions */}
+
+
+
+
+
+
+
+ {/* Login History */}
+
+
+
+
+
+
+
+
+
+ {/* Authorized Devices */}
+
+
+
+
+
+
+
+
+
+ {/* Revoke Session Modal */}
+ setSessionToRevoke(null)}
+ onConfirm={handleRevokeSession}
+ title="Cerrar sesion"
+ message={`¿Cerrar la sesion en "${sessionToRevoke?.device}"? El usuario tendra que volver a iniciar sesion.`}
+ variant="warning"
+ confirmText="Cerrar sesion"
+ />
+
+ {/* Remove Device Modal */}
+ setDeviceToRemove(null)}
+ onConfirm={handleRemoveDevice}
+ title="Eliminar dispositivo"
+ message={`¿Eliminar "${deviceToRemove?.name}" de la lista de dispositivos autorizados? El dispositivo tendra que volver a autenticarse.`}
+ variant="danger"
+ confirmText="Eliminar"
+ />
+
+ );
+}
+
+export default SecuritySettingsPage;
diff --git a/src/pages/settings/SystemSettingsPage.tsx b/src/pages/settings/SystemSettingsPage.tsx
new file mode 100644
index 0000000..c5b90d8
--- /dev/null
+++ b/src/pages/settings/SystemSettingsPage.tsx
@@ -0,0 +1,923 @@
+import { useState } from 'react';
+import {
+ Database,
+ Download,
+ Upload,
+ FileText,
+ Key,
+ Plus,
+ Copy,
+ Eye,
+ EyeOff,
+ Trash2,
+ Check,
+ X,
+ AlertTriangle,
+ Clock,
+ HardDrive,
+ Cpu,
+ Activity,
+ Package,
+ ToggleLeft,
+ ToggleRight,
+ Calendar,
+ Filter,
+} from 'lucide-react';
+import { Button } from '@components/atoms/Button';
+import { Input } from '@components/atoms/Input';
+import { Card, CardHeader, CardTitle, CardContent, CardFooter } from '@components/molecules/Card';
+import { DataTable, type Column } from '@components/organisms/DataTable';
+import { Breadcrumbs } from '@components/organisms/Breadcrumbs';
+import { ConfirmModal } from '@components/organisms/Modal';
+import { formatDate } from '@utils/formatters';
+
+interface BackupConfig {
+ autoBackup: boolean;
+ frequency: 'daily' | 'weekly' | 'monthly';
+ retentionDays: number;
+ lastBackup: string | null;
+ nextBackup: string | null;
+ storageLocation: string;
+}
+
+interface SystemLog {
+ id: string;
+ timestamp: string;
+ level: 'info' | 'warning' | 'error';
+ source: string;
+ message: string;
+}
+
+interface ApiKey {
+ id: string;
+ name: string;
+ key: string;
+ createdAt: string;
+ lastUsed: string | null;
+ permissions: string[];
+ isActive: boolean;
+}
+
+interface Module {
+ id: string;
+ name: string;
+ description: string;
+ version: string;
+ isActive: boolean;
+ isCore: boolean;
+}
+
+const initialBackupConfig: BackupConfig = {
+ autoBackup: true,
+ frequency: 'daily',
+ retentionDays: 30,
+ lastBackup: new Date(Date.now() - 86400000).toISOString(),
+ nextBackup: new Date(Date.now() + 43200000).toISOString(),
+ storageLocation: 'cloud',
+};
+
+const mockSystemLogs: SystemLog[] = [
+ {
+ id: '1',
+ timestamp: new Date().toISOString(),
+ level: 'info',
+ source: 'auth',
+ message: 'Usuario juan.perez@miempresa.com inicio sesion exitosamente',
+ },
+ {
+ id: '2',
+ timestamp: new Date(Date.now() - 300000).toISOString(),
+ level: 'warning',
+ source: 'database',
+ message: 'Conexion a base de datos lenta (>500ms)',
+ },
+ {
+ id: '3',
+ timestamp: new Date(Date.now() - 600000).toISOString(),
+ level: 'info',
+ source: 'backup',
+ message: 'Respaldo automatico completado exitosamente',
+ },
+ {
+ id: '4',
+ timestamp: new Date(Date.now() - 900000).toISOString(),
+ level: 'error',
+ source: 'email',
+ message: 'Error al enviar notificacion: SMTP timeout',
+ },
+ {
+ id: '5',
+ timestamp: new Date(Date.now() - 1200000).toISOString(),
+ level: 'info',
+ source: 'system',
+ message: 'Modulo de inventario actualizado a v2.1.0',
+ },
+ {
+ id: '6',
+ timestamp: new Date(Date.now() - 1500000).toISOString(),
+ level: 'warning',
+ source: 'storage',
+ message: 'Uso de almacenamiento al 75%',
+ },
+ {
+ id: '7',
+ timestamp: new Date(Date.now() - 1800000).toISOString(),
+ level: 'info',
+ source: 'auth',
+ message: 'Token de API generado para integracion externa',
+ },
+ {
+ id: '8',
+ timestamp: new Date(Date.now() - 2100000).toISOString(),
+ level: 'error',
+ source: 'api',
+ message: 'Rate limit excedido para IP 192.168.1.100',
+ },
+ {
+ id: '9',
+ timestamp: new Date(Date.now() - 2400000).toISOString(),
+ level: 'info',
+ source: 'database',
+ message: 'Migracion de base de datos completada',
+ },
+ {
+ id: '10',
+ timestamp: new Date(Date.now() - 2700000).toISOString(),
+ level: 'info',
+ source: 'system',
+ message: 'Sistema iniciado correctamente',
+ },
+];
+
+const mockApiKeys: ApiKey[] = [
+ {
+ id: '1',
+ name: 'Integracion Shopify',
+ key: 'sk_live_xxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
+ createdAt: new Date(Date.now() - 2592000000).toISOString(),
+ lastUsed: new Date(Date.now() - 3600000).toISOString(),
+ permissions: ['read:products', 'write:orders'],
+ isActive: true,
+ },
+ {
+ id: '2',
+ name: 'API Movil',
+ key: 'sk_live_yyyyyyyyyyyyyyyyyyyyyyyyyyy',
+ createdAt: new Date(Date.now() - 5184000000).toISOString(),
+ lastUsed: new Date().toISOString(),
+ permissions: ['read:all', 'write:all'],
+ isActive: true,
+ },
+ {
+ id: '3',
+ name: 'Webhook Pagos',
+ key: 'sk_live_zzzzzzzzzzzzzzzzzzzzzzzzzzz',
+ createdAt: new Date(Date.now() - 7776000000).toISOString(),
+ lastUsed: null,
+ permissions: ['write:payments'],
+ isActive: false,
+ },
+];
+
+const mockModules: Module[] = [
+ {
+ id: '1',
+ name: 'Core',
+ description: 'Funcionalidades basicas del sistema',
+ version: '1.0.0',
+ isActive: true,
+ isCore: true,
+ },
+ {
+ id: '2',
+ name: 'Inventario',
+ description: 'Gestion de productos y stock',
+ version: '2.1.0',
+ isActive: true,
+ isCore: false,
+ },
+ {
+ id: '3',
+ name: 'Ventas',
+ description: 'Punto de venta y facturacion',
+ version: '1.5.0',
+ isActive: true,
+ isCore: false,
+ },
+ {
+ id: '4',
+ name: 'Compras',
+ description: 'Ordenes de compra y proveedores',
+ version: '1.3.0',
+ isActive: true,
+ isCore: false,
+ },
+ {
+ id: '5',
+ name: 'Contabilidad',
+ description: 'Plan de cuentas y asientos contables',
+ version: '1.2.0',
+ isActive: false,
+ isCore: false,
+ },
+ {
+ id: '6',
+ name: 'CRM',
+ description: 'Gestion de clientes y oportunidades',
+ version: '1.0.0',
+ isActive: false,
+ isCore: false,
+ },
+ {
+ id: '7',
+ name: 'Proyectos',
+ description: 'Gestion de proyectos y tareas',
+ version: '1.0.0',
+ isActive: false,
+ isCore: false,
+ },
+ {
+ id: '8',
+ name: 'RRHH',
+ description: 'Recursos humanos y nomina',
+ version: '0.9.0',
+ isActive: false,
+ isCore: false,
+ },
+];
+
+export function SystemSettingsPage() {
+ const [backupConfig, setBackupConfig] = useState
+
+
+ {/* Two-Factor Authentication */}
+
+
+
+ Seguridad
++ Administra la seguridad de tu cuenta +
+
+
+ ) : (
+
+
+
+
+
+
+
+
+ {is2FAEnabled
+ ? 'Autenticacion de dos factores activada'
+ : 'Autenticacion de dos factores desactivada'}
+
+
+ {is2FAEnabled
+ ? 'Tu cuenta esta protegida con un segundo factor de autenticacion'
+ : 'Anade una capa extra de seguridad a tu cuenta'}
+
+
+
+ )}
+
+
+
+
+
+ Configura tu aplicacion de autenticacion
++ Escanea el codigo QR con tu aplicacion de autenticacion (Google Authenticator, Authy, etc.) + o ingresa el codigo secreto manualmente. +
+
+ {/* QR Code placeholder */}
+
+
+
+
+
+
+
+ Codigo QR
+
+
+
+
+
+
+
+
+
+ {mock2FASecret}
+
+
+
+
+
+
+ setVerificationCode(e.target.value.replace(/\D/g, '').slice(0, 6))}
+ placeholder="000000"
+ className="font-mono text-center text-lg tracking-widest"
+ maxLength={6}
+ />
+
+
+ + Ingresa el codigo de 6 digitos de tu aplicacion +
+
+
+
+
+
+
+
+
+ + Ultimos 10 intentos de inicio de sesion +
+
+ {authorizedDevices.map((device) => (
+
+
+
+ ))}
+
+
+
+
+ {getDeviceIcon(device.type)}
+
+
+
+
+ {device.name}
+ {device.trusted && (
+
+
+
+ Ultimo uso: {formatDate(device.lastUsed, 'short')}
+
+
+
+ ),
+ },
+ {
+ key: 'key',
+ header: 'API Key',
+ render: (apiKey) => (
+ {apiKey.name}
+
+ Creada: {formatDate(apiKey.createdAt, 'short')}
+
+
+
+ ),
+ },
+ {
+ key: 'lastUsed',
+ header: 'Ultimo uso',
+ render: (apiKey) => (
+
+ {apiKey.lastUsed ? formatDate(apiKey.lastUsed, 'short') : 'Nunca'}
+
+ ),
+ },
+ {
+ key: 'isActive',
+ header: 'Estado',
+ render: (apiKey) => (
+
+ {apiKey.isActive ? (
+ <>
+
+ {visibleKeys.has(apiKey.id)
+ ? apiKey.key
+ : `${apiKey.key.slice(0, 10)}${'*'.repeat(20)}`}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* System Logs */}
+
+
+
+
+
+
+
+ {/* API Keys */}
+
+
+
+
+
+
+
+ {/* Active Modules */}
+
+
+
+
+
+
+
+
+
+ {/* New API Key Modal */}
+ {showNewApiKeyModal && (
+ setApiKeyToDelete(null)}
+ onConfirm={handleDeleteApiKey}
+ title="Eliminar API Key"
+ message={`¿Eliminar la API key "${apiKeyToDelete?.name}"? Las integraciones que usen esta key dejaran de funcionar.`}
+ variant="danger"
+ confirmText="Eliminar"
+ />
+
+ );
+}
+
+export default SystemSettingsPage;
diff --git a/src/pages/settings/UsersSettingsPage.tsx b/src/pages/settings/UsersSettingsPage.tsx
index f248082..4d58495 100644
--- a/src/pages/settings/UsersSettingsPage.tsx
+++ b/src/pages/settings/UsersSettingsPage.tsx
@@ -1,4 +1,5 @@
import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
import {
Users as UsersIcon,
Plus,
@@ -34,6 +35,7 @@ const roleColors: Record
+
+
+ {/* System Stats */}
+ Configuracion del Sistema
++ Administra respaldos, logs, API keys y modulos +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Backup Configuration */}
+
+
+
+
+
+
+ Base de datos
+ 2.3 GB
+
+
+
+
+
+
+ Almacenamiento
+ 75%
+
+
+
+
+
+
+ CPU
+ 23%
+
+
+
+
+
+
+ Uptime
+ 99.9%
+
+
+
+
+
+
+
+
+ {backupConfig.autoBackup && (
+ <>
+
+
+
+ Respaldo automatico
+
+ Realiza respaldos automaticos de la base de datos
+
+
+
+
+
+
+
+
+
+ handleBackupConfigChange('retentionDays', parseInt(e.target.value))
+ }
+ min={7}
+ max={365}
+ />
+
+
+ )}
+
+
+
+
+
+ {backupConfig.autoBackup && backupConfig.nextBackup && (
+
+
+ Ultimo respaldo
+
+ {backupConfig.lastBackup
+ ? formatDate(backupConfig.lastBackup, 'full')
+ : 'Nunca'}
+
+
+
+ )}
+
+
+
+ Proximo respaldo
+
+ {formatDate(backupConfig.nextBackup, 'full')}
+
+
+
+
+
+
+
+
+
+
+
+ {/* Filters */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {(logLevelFilter || logSourceFilter) && (
+
+ )}
+
+
+
+
+
+ + Gestiona las API keys para integraciones externas +
+
+ {modules.map((module) => (
+
+
+
+ ))}
+
+
+
+
+ {!module.isCore && (
+
+ )}
+
+ {module.name}
+ {module.isCore && (
+
+ Core
+
+ )}
+
+ v{module.version}
+ {module.description}
+
+
+
+
+
+
+
+ {!generatedApiKey ? (
+
+
+
+ {!generatedApiKey && (
+
+ )}
+
+
+
+ )}
+
+ {/* Delete API Key Modal */}
+
+
+ setNewApiKeyName(e.target.value)}
+ placeholder="Ej: Integracion Shopify"
+ />
+
+ ) : (
+ + Un nombre descriptivo para identificar esta API key +
+
+
+ )}
+
+
+
+
+ Guarda esta API key de forma segura
++ Esta es la unica vez que veras esta API key completa. No podras verla de nuevo. +
+
+
+
+
+
+
+ {generatedApiKey}
+
+
+ onClick?.(opportunity)}
+ className={cn(
+ 'cursor-grab rounded-lg border bg-white p-3 shadow-sm transition-all',
+ 'hover:shadow-md hover:border-gray-300',
+ 'active:cursor-grabbing active:shadow-lg'
+ )}
+ >
+ {/* Opportunity Name */}
+ = {
+ new: {
+ bg: 'bg-blue-50',
+ border: 'border-blue-200',
+ header: 'bg-blue-100',
+ text: 'text-blue-700',
+ },
+ qualified: {
+ bg: 'bg-indigo-50',
+ border: 'border-indigo-200',
+ header: 'bg-indigo-100',
+ text: 'text-indigo-700',
+ },
+ proposition: {
+ bg: 'bg-amber-50',
+ border: 'border-amber-200',
+ header: 'bg-amber-100',
+ text: 'text-amber-700',
+ },
+ won: {
+ bg: 'bg-green-50',
+ border: 'border-green-200',
+ header: 'bg-green-100',
+ text: 'text-green-700',
+ },
+ lost: {
+ bg: 'bg-red-50',
+ border: 'border-red-200',
+ header: 'bg-red-100',
+ text: 'text-red-700',
+ },
+};
+
+const formatCurrency = (value: number): string => {
+ return formatNumber(value, 'es-MX', { minimumFractionDigits: 0, maximumFractionDigits: 0 });
+};
+
+export function KanbanColumn({ title, stage, items, onDrop, onCardClick }: KanbanColumnProps) {
+ const [isDragOver, setIsDragOver] = useState(false);
+
+ const colors = stageColors[stage];
+
+ // Calculate totals
+ const totalCount = items.length;
+ const totalValue = items.reduce((sum, item) => sum + (item.expectedRevenue || 0), 0);
+
+ // Pass-through for drag start - actual data transfer happens in KanbanCard
+ const handleDragStart = (_e: DragEvent, _opportunity: KanbanOpportunity) => {
+ // Data transfer is handled by KanbanCard
+ };
+
+ const handleDragOver = (e: DragEvent) => {
+ e.preventDefault();
+ e.dataTransfer.dropEffect = 'move';
+ setIsDragOver(true);
+ };
+
+ const handleDragLeave = (e: DragEvent) => {
+ e.preventDefault();
+ setIsDragOver(false);
+ };
+
+ const handleDrop = (e: DragEvent) => {
+ e.preventDefault();
+ setIsDragOver(false);
+
+ try {
+ const data = e.dataTransfer.getData('application/json');
+ const opportunity: KanbanOpportunity = JSON.parse(data);
+ onDrop(opportunity, stage);
+ } catch (err) {
+ console.error('Error parsing dropped data:', err);
+ }
+ };
+
+ return (
+
+
+
+ {/* Expected Revenue */}
+ {opportunity.name}
+ {opportunity.partnerName && ( +{opportunity.partnerName}
+ )} +
+
+
+ {/* Footer: Date and Avatar */}
+
+ {/* Expected Close Date */}
+ {opportunity.expectedCloseDate ? (
+
+
+ {/* Probability indicator */}
+
+
+ ) : (
+
+
+ )}
+
+ {/* Assigned User Avatar */}
+ {opportunity.assignedTo ? (
+
+
+ );
+}
+
+export default KanbanCard;
diff --git a/src/shared/components/crm/KanbanColumn.tsx b/src/shared/components/crm/KanbanColumn.tsx
new file mode 100644
index 0000000..1ec9a31
--- /dev/null
+++ b/src/shared/components/crm/KanbanColumn.tsx
@@ -0,0 +1,154 @@
+import { DragEvent, useState } from 'react';
+import { DollarSign } from 'lucide-react';
+import { KanbanCard, type KanbanOpportunity } from './KanbanCard';
+import { formatNumber } from '@utils/formatters';
+import { cn } from '@utils/cn';
+
+export type StageKey = 'new' | 'qualified' | 'proposition' | 'won' | 'lost';
+
+export interface KanbanColumnProps {
+ title: string;
+ stage: StageKey;
+ items: KanbanOpportunity[];
+ onDrop: (opportunity: KanbanOpportunity, targetStage: StageKey) => void;
+ onCardClick?: (opportunity: KanbanOpportunity) => void;
+}
+
+const stageColors: Record
+ Probabilidad
+ {opportunity.probability}%
+
+
+
+ = 70 ? 'bg-green-500' :
+ opportunity.probability >= 40 ? 'bg-yellow-500' : 'bg-red-500'
+ )}
+ style={{ width: `${opportunity.probability}%` }}
+ />
+
+
+ {/* Column Header */}
+
+ );
+}
+
+export default KanbanColumn;
diff --git a/src/shared/components/crm/index.ts b/src/shared/components/crm/index.ts
new file mode 100644
index 0000000..fa1b249
--- /dev/null
+++ b/src/shared/components/crm/index.ts
@@ -0,0 +1,3 @@
+// CRM Components
+export { KanbanCard, type KanbanOpportunity, type KanbanCardProps } from './KanbanCard';
+export { KanbanColumn, type StageKey, type KanbanColumnProps } from './KanbanColumn';
+
+
+ {/* Cards Container */}
+
+
+ {title}
+ + {totalCount} + +
+
+
+ {items.length === 0 ? (
+
+
+ {isDragOver ? 'Soltar aqui' : 'Sin oportunidades'}
+
+ ) : (
+ items.map((opportunity) => (
+