initial commit

apps/frontend/src/components/layout/Header.tsx

@@ -0,0 +1,41 @@
+import { Menu } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { useSseStatus } from "@/lib/sse-context";
+import { cn } from "@/lib/utils";
+
+interface HeaderProps {
+  onMenuClick: () => void;
+}
+
+export function Header({ onMenuClick }: HeaderProps) {
+  const sseStatus = useSseStatus();
+
+  return (
+    <header className="flex h-14 items-center gap-4 border-b px-4">
+      <Button
+        variant="ghost"
+        size="icon"
+        className="md:hidden"
+        onClick={onMenuClick}
+      >
+        <Menu className="size-5" />
+      </Button>
+      <div className="flex-1" />
+      <div className="flex items-center gap-1.5">
+        <span
+          className={cn(
+            "size-2 rounded-full",
+            sseStatus === "connected" && "bg-emerald-500",
+            sseStatus === "connecting" && "bg-amber-500 animate-pulse",
+            sseStatus === "disconnected" && "bg-red-500",
+          )}
+        />
+        <span className="text-xs text-muted-foreground">
+          {sseStatus === "connected" && "Live"}
+          {sseStatus === "connecting" && "Conectando..."}
+          {sseStatus === "disconnected" && "Desconectado"}
+        </span>
+      </div>
+    </header>
+  );
+}

apps/frontend/src/components/layout/Layout.tsx

@@ -0,0 +1,20 @@
+import { useState } from "react";
+import { Outlet } from "@tanstack/react-router";
+import { Header } from "./Header";
+import { Sidebar } from "./Sidebar";
+
+export function Layout() {
+  const [sidebarOpen, setSidebarOpen] = useState(false);
+
+  return (
+    <div className="flex min-h-screen">
+      <Sidebar open={sidebarOpen} onClose={() => setSidebarOpen(false)} />
+      <div className="flex flex-1 flex-col">
+        <Header onMenuClick={() => setSidebarOpen(true)} />
+        <main className="flex-1 p-6">
+          <Outlet />
+        </main>
+      </div>
+    </div>
+  );
+}

apps/frontend/src/components/layout/Sidebar.tsx

@@ -0,0 +1,54 @@
+import { Link } from "@tanstack/react-router";
+import { FileText, LayoutDashboard, TrendingUp, Wallet } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+const navItems = [
+  { to: "/", label: "Panel", icon: LayoutDashboard },
+  { to: "/expenses", label: "Gastos", icon: Wallet },
+  { to: "/quotes", label: "Cotizaciones", icon: FileText },
+  { to: "/quotes/belo", label: "BELO", icon: TrendingUp },
+];
+
+interface SidebarProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+export function Sidebar({ open, onClose }: SidebarProps) {
+  return (
+    <>
+      {open && (
+        <div
+          className="fixed inset-0 z-40 bg-black/20 md:hidden"
+          onClick={onClose}
+        />
+      )}
+      <aside
+        className={cn(
+          "fixed inset-y-0 left-0 z-50 flex w-60 flex-col border-r bg-sidebar transition-transform duration-200 md:relative md:translate-x-0",
+          open ? "translate-x-0" : "-translate-x-full",
+        )}
+      >
+        <div className="flex h-14 items-center border-b px-4">
+          <span className="text-lg font-semibold text-sidebar-foreground">
+            Personal Admin
+          </span>
+        </div>
+        <nav className="flex-1 space-y-1 p-3">
+          {navItems.map((item) => (
+            <Link
+              key={item.to}
+              to={item.to}
+              activeProps={{ className: "bg-sidebar-accent text-sidebar-accent-foreground font-medium" }}
+              className="flex items-center gap-3 rounded-lg px-3 py-2 text-sm text-sidebar-foreground/70 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
+              onClick={onClose}
+            >
+              <item.icon className="size-4" />
+              {item.label}
+            </Link>
+          ))}
+        </nav>
+      </aside>
+    </>
+  );
+}