rckrdmrd
4eb8ee2699
Reports module: - types/reports.types.ts: Complete type definitions for definitions, executions, schedules - api/reports.api.ts: API clients for all report operations - hooks/useReports.ts: Custom hooks (useReportDefinitions, useReportExecutions, etc.) - ReportsPage.tsx: Main reports management with tabs - QuickReportsPage.tsx: Trial Balance and General Ledger quick reports Settings module: - types/settings.types.ts: Types for company, users, profile, audit logs - api/settings.api.ts: API clients for settings operations - hooks/useSettings.ts: Custom hooks (useCompany, useUsers, useProfile, etc.) - SettingsPage.tsx: Settings hub with navigation cards - UsersSettingsPage.tsx: User management page Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
113 lines
3.3 KiB
TypeScript
113 lines
3.3 KiB
TypeScript
import { useState } from 'react';
|
|
import {
|
|
Building2,
|
|
Users as UsersIcon,
|
|
User,
|
|
Shield,
|
|
Settings2,
|
|
ChevronRight,
|
|
} from 'lucide-react';
|
|
import { Card, CardContent } from '@components/molecules/Card';
|
|
import { Breadcrumbs } from '@components/organisms/Breadcrumbs';
|
|
|
|
type SettingsSection = 'company' | 'users' | 'profile' | 'security' | 'system';
|
|
|
|
interface SettingsMenuItem {
|
|
key: SettingsSection;
|
|
label: string;
|
|
description: string;
|
|
icon: React.ReactNode;
|
|
href: string;
|
|
}
|
|
|
|
const menuItems: SettingsMenuItem[] = [
|
|
{
|
|
key: 'company',
|
|
label: 'Empresa',
|
|
description: 'Informacion general, logo y configuracion fiscal',
|
|
icon: <Building2 className="h-6 w-6 text-blue-600" />,
|
|
href: '/settings/company',
|
|
},
|
|
{
|
|
key: 'users',
|
|
label: 'Usuarios',
|
|
description: 'Gestiona usuarios, roles y permisos',
|
|
icon: <UsersIcon className="h-6 w-6 text-green-600" />,
|
|
href: '/settings/users',
|
|
},
|
|
{
|
|
key: 'profile',
|
|
label: 'Mi perfil',
|
|
description: 'Tu informacion personal y preferencias',
|
|
icon: <User className="h-6 w-6 text-purple-600" />,
|
|
href: '/settings/profile',
|
|
},
|
|
{
|
|
key: 'security',
|
|
label: 'Seguridad',
|
|
description: 'Contrasena, autenticacion y logs de auditoria',
|
|
icon: <Shield className="h-6 w-6 text-red-600" />,
|
|
href: '/settings/security',
|
|
},
|
|
{
|
|
key: 'system',
|
|
label: 'Sistema',
|
|
description: 'Configuracion avanzada del sistema',
|
|
icon: <Settings2 className="h-6 w-6 text-gray-600" />,
|
|
href: '/settings/system',
|
|
},
|
|
];
|
|
|
|
export function SettingsPage() {
|
|
const [hoveredItem, setHoveredItem] = useState<SettingsSection | null>(null);
|
|
|
|
return (
|
|
<div className="space-y-6 p-6">
|
|
<Breadcrumbs items={[
|
|
{ label: 'Configuracion' },
|
|
]} />
|
|
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-gray-900">Configuracion</h1>
|
|
<p className="text-sm text-gray-500">
|
|
Gestiona la configuracion de tu empresa, usuarios y sistema
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
|
{menuItems.map((item) => (
|
|
<a
|
|
key={item.key}
|
|
href={item.href}
|
|
onMouseEnter={() => setHoveredItem(item.key)}
|
|
onMouseLeave={() => setHoveredItem(null)}
|
|
>
|
|
<Card className={`cursor-pointer transition-all h-full ${
|
|
hoveredItem === item.key ? 'shadow-md ring-2 ring-blue-500' : 'hover:shadow-md'
|
|
}`}>
|
|
<CardContent className="p-6">
|
|
<div className="flex items-start justify-between">
|
|
<div className="flex items-start gap-4">
|
|
<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-gray-50">
|
|
{item.icon}
|
|
</div>
|
|
<div>
|
|
<h3 className="font-semibold text-gray-900">{item.label}</h3>
|
|
<p className="text-sm text-gray-500 mt-1">{item.description}</p>
|
|
</div>
|
|
</div>
|
|
<ChevronRight className={`h-5 w-5 text-gray-400 transition-transform ${
|
|
hoveredItem === item.key ? 'translate-x-1' : ''
|
|
}`} />
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</a>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default SettingsPage;
|