consultoria-as/Horux360
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(web): add configuracion page with theme selector

Browse Source
This commit is contained in:
Consultoria AS
2026-01-22 02:36:20 +00:00
parent 1dcc98aada
commit 62113c7fba
1 changed files with 115 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
apps/web/app/(dashboard)/configuracion/page.tsx Normal file
View File

@@ -0,0 +1,115 @@
'use client';
import { Header } from '@/components/layouts/header';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { useThemeStore } from '@/stores/theme-store';
import { useAuthStore } from '@/stores/auth-store';
import { themes, type ThemeName } from '@/themes';
import { Check, Palette, User, Building } from 'lucide-react';
const themeOptions: { name: ThemeName; label: string; description: string }[] = [
{ name: 'light', label: 'Light', description: 'Tema claro profesional' },
{ name: 'vibrant', label: 'Vibrant', description: 'Colores vivos y modernos' },
{ name: 'corporate', label: 'Corporate', description: 'Diseño empresarial denso' },
{ name: 'dark', label: 'Dark', description: 'Modo oscuro con acentos neón' },
];
export default function ConfiguracionPage() {
const { theme, setTheme } = useThemeStore();
const { user } = useAuthStore();
return (
<>
<Header title="Configuración" />
<main className="p-6 space-y-6">
{/* User Info */}
<Card>
<CardHeader>
<CardTitle className="flex items-center gap-2 text-base">
<User className="h-4 w-4" />
Información del Usuario
</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
<div className="grid gap-4 md:grid-cols-2">
<div>
<p className="text-sm text-muted-foreground">Nombre</p>
<p className="font-medium">{user?.nombre}</p>
</div>
<div>
<p className="text-sm text-muted-foreground">Email</p>
<p className="font-medium">{user?.email}</p>
</div>
<div>
<p className="text-sm text-muted-foreground">Rol</p>
<p className="font-medium capitalize">{user?.role}</p>
</div>
</div>
</CardContent>
</Card>
{/* Company Info */}
<Card>
<CardHeader>
<CardTitle className="flex items-center gap-2 text-base">
<Building className="h-4 w-4" />
Información de la Empresa
</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
<div className="grid gap-4 md:grid-cols-2">
<div>
<p className="text-sm text-muted-foreground">Empresa</p>
<p className="font-medium">{user?.tenantName}</p>
</div>
</div>
</CardContent>
</Card>
{/* Theme Selection */}
<Card>
<CardHeader>
<CardTitle className="flex items-center gap-2 text-base">
<Palette className="h-4 w-4" />
Tema Visual
</CardTitle>
<CardDescription>
Elige el tema que mejor se adapte a tu preferencia
</CardDescription>
</CardHeader>
<CardContent>
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
{themeOptions.map((option) => (
<button
key={option.name}
onClick={() => setTheme(option.name)}
className={`relative p-4 rounded-lg border-2 text-left transition-all ${
theme === option.name
? 'border-primary bg-primary/5'
: 'border-border hover:border-primary/50'
}`}
>
{theme === option.name && (
<div className="absolute top-2 right-2">
<Check className="h-4 w-4 text-primary" />
</div>
)}
<div
className="h-20 rounded-md mb-3"
style={{
background: `hsl(${themes[option.name].cssVars['--primary']})`,
}}
/>
<p className="font-medium">{option.label}</p>
<p className="text-xs text-muted-foreground">
{option.description}
</p>
</button>
))}
</div>
</CardContent>
</Card>
</main>
</>
);
}