From 06e9f3eba786a96cf80c8458a3dcd423c95145d0 Mon Sep 17 00:00:00 2001
From: Consultoria AS <desarrollo@consultoria-as.com>
Date: Thu, 22 Jan 2026 02:25:35 +0000
Subject: [PATCH] feat(web): add dashboard layout with sidebar and header

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 apps/web/app/(dashboard)/layout.tsx           | 34 +++++++
 .../components/layouts/dashboard-shell.tsx    | 19 ++++
 apps/web/components/layouts/header.tsx        | 42 +++++++++
 apps/web/components/layouts/sidebar.tsx       | 92 +++++++++++++++++++
 4 files changed, 187 insertions(+)
 create mode 100644 apps/web/app/(dashboard)/layout.tsx
 create mode 100644 apps/web/components/layouts/dashboard-shell.tsx
 create mode 100644 apps/web/components/layouts/header.tsx
 create mode 100644 apps/web/components/layouts/sidebar.tsx

diff --git a/apps/web/app/(dashboard)/layout.tsx b/apps/web/app/(dashboard)/layout.tsx
new file mode 100644
index 0000000..97bbd3f
--- /dev/null
+++ b/apps/web/app/(dashboard)/layout.tsx
@@ -0,0 +1,34 @@
+'use client';
+
+import { useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import { useAuthStore } from '@/stores/auth-store';
+import { Sidebar } from '@/components/layouts/sidebar';
+
+export default function DashboardLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const router = useRouter();
+  const { isAuthenticated } = useAuthStore();
+
+  useEffect(() => {
+    if (!isAuthenticated) {
+      router.push('/login');
+    }
+  }, [isAuthenticated, router]);
+
+  if (!isAuthenticated) {
+    return null;
+  }
+
+  return (
+    <div className="min-h-screen bg-background">
+      <Sidebar />
+      <div className="pl-64">
+        {children}
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/components/layouts/dashboard-shell.tsx b/apps/web/components/layouts/dashboard-shell.tsx
new file mode 100644
index 0000000..7c7f5ac
--- /dev/null
+++ b/apps/web/components/layouts/dashboard-shell.tsx
@@ -0,0 +1,19 @@
+import { Sidebar } from './sidebar';
+import { Header } from './header';
+
+interface DashboardShellProps {
+  children: React.ReactNode;
+  title: string;
+}
+
+export function DashboardShell({ children, title }: DashboardShellProps) {
+  return (
+    <div className="min-h-screen bg-background">
+      <Sidebar />
+      <div className="pl-64">
+        <Header title={title} />
+        <main className="p-6">{children}</main>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/components/layouts/header.tsx b/apps/web/components/layouts/header.tsx
new file mode 100644
index 0000000..31690ea
--- /dev/null
+++ b/apps/web/components/layouts/header.tsx
@@ -0,0 +1,42 @@
+'use client';
+
+import { useThemeStore } from '@/stores/theme-store';
+import { themes, type ThemeName } from '@/themes';
+import { Button } from '@/components/ui/button';
+import { Sun, Moon, Palette } from 'lucide-react';
+
+const themeIcons: Record<ThemeName, React.ReactNode> = {
+  light: <Sun className="h-4 w-4" />,
+  vibrant: <Palette className="h-4 w-4" />,
+  corporate: <Palette className="h-4 w-4" />,
+  dark: <Moon className="h-4 w-4" />,
+};
+
+const themeOrder: ThemeName[] = ['light', 'vibrant', 'corporate', 'dark'];
+
+export function Header({ title }: { title: string }) {
+  const { theme, setTheme } = useThemeStore();
+
+  const cycleTheme = () => {
+    const currentIndex = themeOrder.indexOf(theme);
+    const nextIndex = (currentIndex + 1) % themeOrder.length;
+    setTheme(themeOrder[nextIndex]);
+  };
+
+  return (
+    <header className="sticky top-0 z-30 flex h-16 items-center justify-between border-b bg-background/95 backdrop-blur px-6">
+      <h1 className="text-xl font-semibold">{title}</h1>
+
+      <div className="flex items-center gap-2">
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={cycleTheme}
+          title={`Tema: ${themes[theme].name}`}
+        >
+          {themeIcons[theme]}
+        </Button>
+      </div>
+    </header>
+  );
+}
diff --git a/apps/web/components/layouts/sidebar.tsx b/apps/web/components/layouts/sidebar.tsx
new file mode 100644
index 0000000..f037fa8
--- /dev/null
+++ b/apps/web/components/layouts/sidebar.tsx
@@ -0,0 +1,92 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { cn } from '@/lib/utils';
+import {
+  LayoutDashboard,
+  FileText,
+  Calculator,
+  Settings,
+  LogOut,
+} from 'lucide-react';
+import { useAuthStore } from '@/stores/auth-store';
+import { logout } from '@/lib/api/auth';
+import { useRouter } from 'next/navigation';
+
+const navigation = [
+  { name: 'Dashboard', href: '/dashboard', icon: LayoutDashboard },
+  { name: 'CFDI', href: '/cfdi', icon: FileText },
+  { name: 'Impuestos', href: '/impuestos', icon: Calculator },
+  { name: 'Configuracion', href: '/configuracion', icon: Settings },
+];
+
+export function Sidebar() {
+  const pathname = usePathname();
+  const router = useRouter();
+  const { user, logout: clearAuth } = useAuthStore();
+
+  const handleLogout = async () => {
+    try {
+      await logout();
+    } catch {
+      // Ignore errors
+    } finally {
+      clearAuth();
+      router.push('/login');
+    }
+  };
+
+  return (
+    <aside className="fixed left-0 top-0 z-40 h-screen w-64 border-r bg-card">
+      <div className="flex h-full flex-col">
+        {/* Logo */}
+        <div className="flex h-16 items-center border-b px-6">
+          <Link href="/dashboard" className="flex items-center gap-2">
+            <div className="h-8 w-8 rounded-lg bg-primary flex items-center justify-center">
+              <span className="text-primary-foreground font-bold text-lg">H</span>
+            </div>
+            <span className="font-bold text-xl">Horux360</span>
+          </Link>
+        </div>
+
+        {/* Navigation */}
+        <nav className="flex-1 space-y-1 px-3 py-4">
+          {navigation.map((item) => {
+            const isActive = pathname === item.href || pathname.startsWith(`${item.href}/`);
+            return (
+              <Link
+                key={item.name}
+                href={item.href}
+                className={cn(
+                  'flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors',
+                  isActive
+                    ? 'bg-primary text-primary-foreground'
+                    : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground'
+                )}
+              >
+                <item.icon className="h-5 w-5" />
+                {item.name}
+              </Link>
+            );
+          })}
+        </nav>
+
+        {/* User & Logout */}
+        <div className="border-t p-4">
+          <div className="mb-3 px-3">
+            <p className="text-sm font-medium">{user?.nombre}</p>
+            <p className="text-xs text-muted-foreground">{user?.email}</p>
+          </div>
+          <button
+            onClick={handleLogout}
+            className="flex w-full items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium text-muted-foreground hover:bg-destructive hover:text-destructive-foreground transition-colors"
+          >
+            <LogOut className="h-5 w-5" />
+            Cerrar sesion
+          </button>
+        </div>
+      </div>
+    </aside>
+  );
+}