Upload 34 files

app/billing/page.tsx

@@ -0,0 +1,276 @@
+"use client";
+
+import React, { useState } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { 
+  FileText, 
+  Download, 
+  Eye, 
+  Search, 
+  Filter, 
+  CreditCard, 
+  CheckCircle2, 
+  Clock, 
+  AlertCircle,
+  TrendingUp,
+  Receipt,
+  User,
+  Calendar,
+  DollarSign
+} from "lucide-react";
+
+const mockInvoices = [
+  { 
+    id: "INV-2023-001", 
+    customer: "Nexus Corp", 
+    date: "2023-11-15", 
+    amount: 15420.50, 
+    status: "paid",
+    items: [
+      { description: "Soporte Técnico Enterprise", qty: 1, price: 5000 },
+      { description: "Licencia Anual ERP Nexus", qty: 1, price: 8000 },
+      { description: "Implementación Cloud", qty: 1, price: 2420.50 }
+    ]
+  },
+  { 
+    id: "INV-2023-002", 
+    customer: "Global Tech Solutions", 
+    date: "2023-11-18", 
+    amount: 4200.00, 
+    status: "pending",
+    items: [
+      { description: "Consultoría IT", qty: 10, price: 420 }
+    ]
+  },
+  { 
+    id: "INV-2023-003", 
+    customer: "Alina Systems", 
+    date: "2023-11-20", 
+    amount: 1250.75, 
+    status: "overdue",
+    items: [
+      { description: "Mantenimiento Preventivo", qty: 5, price: 250.15 }
+    ]
+  },
+];
+
+export default function BillingPage() {
+  const [selectedInvoice, setSelectedInvoice] = useState<any>(null);
+
+  return (
+    <div className="p-10 bg-[#0f172a] min-h-screen text-white">
+      <header className="mb-12 flex justify-between items-end">
+        <div>
+          <h1 className="text-5xl font-black tracking-tighter italic bg-gradient-to-r from-white to-gray-500 bg-clip-text text-transparent">
+            FACTURACIÓN <span className="text-blue-500">/ BILLING</span>
+          </h1>
+          <p className="text-gray-500 font-bold mt-2 uppercase text-xs tracking-[0.3em]">Gestión de Ingresos y Comprobantes Fiscales</p>
+        </div>
+        <div className="flex gap-4">
+           <button className="bg-white/5 border border-white/10 px-6 py-3 rounded-2xl text-xs font-black uppercase tracking-widest hover:bg-white/10 transition-all flex items-center gap-2">
+              <Download size={16} /> Exportar CSV
+           </button>
+           <button className="bg-blue-600 px-6 py-3 rounded-2xl text-xs font-black uppercase tracking-widest hover:bg-blue-500 transition-all shadow-xl shadow-blue-900/40">
+              Nueva Factura
+           </button>
+        </div>
+      </header>
+
+      {/* Stats Quick View */}
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
+        <StatWidget label="Recaudado Mes" value="$20,871.25" icon={<TrendingUp className="text-emerald-400" />} />
+        <StatWidget label="Pendiente Cobro" value="$4,200.00" icon={<Clock className="text-orange-400" />} />
+        <StatWidget label="Facturas Activas" value="28" icon={<Receipt className="text-blue-400" />} />
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+        {/* Invoice List */}
+        <div className="lg:col-span-2 space-y-4">
+          <div className="bg-white/5 border border-white/10 rounded-[2.5rem] p-8">
+            <div className="flex justify-between items-center mb-8">
+               <h2 className="text-lg font-black italic uppercase tracking-widest text-gray-400">Historial de <span className="text-white">Facturas</span></h2>
+               <div className="flex gap-2">
+                  <div className="relative">
+                    <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500" size={14} />
+                    <input className="bg-white/5 border border-white/10 rounded-xl py-2 pl-9 pr-4 text-xs focus:ring-1 focus:ring-blue-500 outline-none w-48" placeholder="Buscar..." />
+                  </div>
+                  <button className="bg-white/5 border border-white/10 p-2 rounded-xl text-gray-400 hover:text-white"><Filter size={16} /></button>
+               </div>
+            </div>
+
+            <div className="space-y-3">
+              {mockInvoices.map((inv) => (
+                <motion.div 
+                  key={inv.id}
+                  whileHover={{ x: 10, backgroundColor: "rgba(255,255,255,0.05)" }}
+                  onClick={() => setSelectedInvoice(inv)}
+                  className={`flex items-center justify-between p-4 rounded-2xl border border-white/5 cursor-pointer transition-all ${selectedInvoice?.id === inv.id ? 'bg-white/10 border-blue-500/50 shadow-lg' : 'hover:border-white/10'}`}
+                >
+                  <div className="flex items-center gap-4">
+                    <div className={`w-10 h-10 rounded-xl flex items-center justify-center ${
+                      inv.status === 'paid' ? 'bg-emerald-500/10 text-emerald-400' : 
+                      inv.status === 'pending' ? 'bg-orange-500/10 text-orange-400' : 'bg-red-500/10 text-red-400'
+                    }`}>
+                      <FileText size={18} />
+                    </div>
+                    <div>
+                      <p className="text-sm font-black italic">{inv.id}</p>
+                      <p className="text-[10px] text-gray-500 font-bold uppercase">{inv.customer}</p>
+                    </div>
+                  </div>
+                  <div className="text-right">
+                    <p className="text-sm font-black tracking-tighter">${inv.amount.toLocaleString()}</p>
+                    <p className="text-[9px] text-gray-500 font-medium">{inv.date}</p>
+                  </div>
+                  <div className="flex items-center gap-2">
+                     <StatusBadge status={inv.status} />
+                     <button className="p-2 text-gray-500 hover:text-white transition-colors">
+                        <Eye size={16} />
+                     </button>
+                  </div>
+                </motion.div>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        {/* Invoice Detail Breakdown */}
+        <div className="lg:col-span-1">
+          <AnimatePresence mode="wait">
+            {selectedInvoice ? (
+              <motion.div 
+                key={selectedInvoice.id}
+                initial={{ opacity: 0, x: 20 }}
+                animate={{ opacity: 1, x: 0 }}
+                exit={{ opacity: 0, x: 20 }}
+                className="bg-white text-slate-900 rounded-[3rem] p-8 shadow-2xl relative overflow-hidden h-full flex flex-col"
+              >
+                {/* Decorative Elements */}
+                <div className="absolute top-0 right-0 w-32 h-32 bg-blue-50 rounded-bl-[100%] z-0"></div>
+                
+                <div className="relative z-10 flex-1">
+                  <div className="flex justify-between items-start mb-10">
+                    <div>
+                      <h3 className="text-2xl font-black tracking-tighter italic uppercase text-blue-600">INVOICE</h3>
+                      <p className="text-[10px] font-black uppercase text-slate-400">{selectedInvoice.id}</p>
+                    </div>
+                    <div className="w-12 h-12 bg-blue-600 rounded-2xl flex items-center justify-center text-white font-black italic text-xl">N</div>
+                  </div>
+
+                  <div className="grid grid-cols-2 gap-6 mb-10">
+                    <div className="space-y-1">
+                      <p className="text-[9px] font-black uppercase text-slate-400 tracking-widest flex items-center gap-1"><User size={10} /> Cliente</p>
+                      <p className="text-xs font-bold text-slate-700">{selectedInvoice.customer}</p>
+                    </div>
+                    <div className="space-y-1">
+                      <p className="text-[9px] font-black uppercase text-slate-400 tracking-widest flex items-center gap-1"><Calendar size={10} /> Fecha</p>
+                      <p className="text-xs font-bold text-slate-700">{selectedInvoice.date}</p>
+                    </div>
+                  </div>
+
+                  {/* Items Table */}
+                  <div className="border-t border-slate-100 pt-6 mb-10">
+                     <p className="text-[9px] font-black uppercase text-slate-400 tracking-widest mb-4">Desglose de Servicios</p>
+                     <div className="space-y-4">
+                        {selectedInvoice.items.map((item: any, idx: number) => (
+                           <div key={idx} className="flex justify-between items-center text-sm border-b border-slate-50 pb-2 last:border-0">
+                              <div className="flex flex-col">
+                                 <span className="font-bold text-slate-700">{item.description}</span>
+                                 <span className="text-[10px] text-slate-400 font-medium">Cant: {item.qty} x ${item.price.toLocaleString()}</span>
+                              </div>
+                              <span className="font-black text-slate-800">${(item.qty * item.price).toLocaleString()}</span>
+                           </div>
+                        ))}
+                     </div>
+                  </div>
+
+                  {/* Calculations */}
+                  <div className="space-y-2 mt-auto">
+                     <div className="flex justify-between text-xs font-medium text-slate-400">
+                        <span>Subtotal</span>
+                        <span>${(selectedInvoice.amount * 0.84).toLocaleString()}</span>
+                     </div>
+                     <div className="flex justify-between text-xs font-medium text-slate-400 border-b border-slate-100 pb-2">
+                        <span>IVA (16%)</span>
+                        <span>${(selectedInvoice.amount * 0.16).toLocaleString()}</span>
+                     </div>
+                     <div className="flex justify-between items-center pt-2">
+                        <span className="text-sm font-black uppercase tracking-widest text-slate-800">Total Neto</span>
+                        <span className="text-2xl font-black italic tracking-tighter text-blue-600">${selectedInvoice.amount.toLocaleString()}</span>
+                     </div>
+                  </div>
+                </div>
+
+                <button className="mt-10 w-full bg-slate-900 text-white rounded-2xl py-4 font-black uppercase tracking-widest text-xs flex items-center justify-center gap-2 hover:bg-slate-800 active:scale-95 transition-all">
+                   <Download size={16} /> Descargar PDF
+                </button>
+              </motion.div>
+            ) : (
+              <div className="bg-white/5 border border-white/10 border-dashed rounded-[3rem] p-8 flex flex-col items-center justify-center text-center h-[500px]">
+                <div className="w-16 h-16 bg-white/5 rounded-full flex items-center justify-center mb-6">
+                   <AlertCircle className="text-gray-500" size={32} />
+                </div>
+                <h3 className="font-black italic uppercase tracking-widest text-gray-400 mb-2">Seleccione una factura</h3>
+                <p className="text-xs text-gray-600 font-medium max-w-[200px]">Haga clic en una factura de la lista para ver el desglose detallado para el cliente.</p>
+              </div>
+            )}
+          </AnimatePresence>
+        </div>
+      </div>
+
+      {/* Payment Methods Footer */}
+      <div className="mt-12 bg-white/5 border border-white/10 rounded-[2.5rem] p-8 flex items-center justify-between">
+         <div className="flex items-center gap-6">
+            <div className="flex items-center gap-2">
+               <div className="w-2 h-2 rounded-full bg-emerald-500 drop-shadow-[0_0_8px_rgba(16,185,129,0.5)]"></div>
+               <span className="text-[10px] font-black uppercase tracking-widest text-gray-400">Gateways Activos</span>
+            </div>
+            <div className="flex gap-4">
+               <div className="h-4 w-12 bg-white/10 rounded"></div>
+               <div className="h-4 w-12 bg-white/10 rounded"></div>
+               <div className="h-4 w-12 bg-white/10 rounded"></div>
+            </div>
+         </div>
+         <div className="flex items-center gap-4 text-[10px] font-black uppercase tracking-widest text-gray-500">
+            <span className="flex items-center gap-1"><CreditCard size={12} /> Pagos Automáticos</span>
+            <span className="w-1 h-1 bg-white/10 rounded-full"></span>
+            <span className="flex items-center gap-1"><DollarSign size={12} /> Liquidación Instantánea</span>
+         </div>
+      </div>
+    </div>
+  );
+}
+
+function StatWidget({ label, value, icon }: any) {
+  return (
+    <div className="bg-white/5 border border-white/10 rounded-[2rem] p-6 relative group overflow-hidden">
+      <div className="absolute top-0 left-0 w-1 h-full bg-blue-500/20 group-hover:bg-blue-500 transition-colors"></div>
+      <div className="flex justify-between items-start">
+        <div className="space-y-1">
+          <p className="text-[10px] font-black uppercase tracking-widest text-gray-500">{label}</p>
+          <p className="text-3xl font-black italic tracking-tighter">{value}</p>
+        </div>
+        <div className="w-10 h-10 bg-white/5 rounded-xl flex items-center justify-center">
+          {icon}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function StatusBadge({ status }: { status: "paid" | "pending" | "overdue" | string }) {
+  const styles: Record<string, { bg: string; text: string; label: string; icon: React.ReactNode }> = {
+    paid: { bg: "bg-emerald-500/10", text: "text-emerald-400", label: "Pagado", icon: <CheckCircle2 size={10} /> },
+    pending: { bg: "bg-orange-500/10", text: "text-orange-400", label: "Pendiente", icon: <Clock size={10} /> },
+    overdue: { bg: "bg-red-500/10", text: "text-red-400", label: "Vencido", icon: <AlertCircle size={10} /> },
+  };
+
+  const style = styles[status] || { bg: "bg-gray-500/10", text: "text-gray-400", label: "Desconocido", icon: null };
+
+  return (
+    <div className={`${style.bg} ${style.text} px-3 py-1.5 rounded-full text-[9px] font-black uppercase flex items-center gap-1 tracking-wider border border-white/5`}>
+      {style.icon}
+      {style.label}
+    </div>
+  );
+}

app/layout.tsx

@@ -10,6 +10,7 @@ export const metadata: Metadata = {
 };
 
 import Sidebar from "@/components/Sidebar";
+import AuthGuard from "@/components/AuthGuard";
 
 export default function RootLayout({
   children,
@@ -19,10 +20,12 @@ export default function RootLayout({
   return (
     <html lang="es">
       <body className={`${inter.className} bg-[#0f172a] text-white selection:bg-blue-500/30`}>
-        <Sidebar />
-        <main className="ml-72 min-h-screen">
-          {children}
-        </main>
+        <AuthGuard>
+          <Sidebar />
+          <main className="ml-72 min-h-screen">
+            {children}
+          </main>
+        </AuthGuard>
       </body>
     </html>
   );

app/login/page.tsx

@@ -1,24 +1,19 @@
 "use client";
 
-import React, { useState, useEffect } from "react";
+import React, { useState } from "react";
+import { signInWithEmailAndPassword } from "firebase/auth";
 import { auth } from "@/lib/firebase";
-import { signInWithEmailAndPassword, onAuthStateChanged } from "firebase/auth";
 import { useRouter } from "next/navigation";
+import { motion } from "framer-motion";
+import { Lock, User, ArrowRight, ShieldCheck } from "lucide-react";
 
 export default function LoginPage() {
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
+  const [email, setEmail] = useState("admin@erp.com");
+  const [password, setPassword] = useState("admin123");
   const [error, setError] = useState("");
   const [loading, setLoading] = useState(false);
   const router = useRouter();
 
-  useEffect(() => {
-    const unsub = onAuthStateChanged(auth, (user) => {
-      if (user) router.push("/");
-    });
-    return () => unsub();
-  }, [router]);
-
   const handleLogin = async (e: React.FormEvent) => {
     e.preventDefault();
     setLoading(true);
@@ -27,81 +22,101 @@ export default function LoginPage() {
       await signInWithEmailAndPassword(auth, email, password);
       router.push("/");
     } catch (err: any) {
-      setError(err.message || "Error al iniciar sesión");
-    } finally {
+      setError("Credenciales inválidas. Intente de nuevo.");
       setLoading(false);
     }
   };
 
   return (
-    <div className="min-h-screen bg-[#0f172a] flex items-center justify-center p-6 relative overflow-hidden">
-      {/* Background Decor */}
-      <div className="absolute top-0 left-0 w-full h-full">
-        <div className="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] bg-blue-600/20 blur-[120px] rounded-full"></div>
-        <div className="absolute bottom-[-10%] right-[-10%] w-[40%] h-[40%] bg-purple-600/20 blur-[120px] rounded-full"></div>
-      </div>
+    <div className="fixed inset-0 bg-[#020617] flex items-center justify-center p-6 z-[100]">
+      {/* Background Decorative Elements */}
+      <div className="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] bg-blue-600/20 rounded-full blur-[120px] animate-pulse"></div>
+      <div className="absolute bottom-[-10%] right-[-10%] w-[40%] h-[40%] bg-indigo-600/20 rounded-full blur-[120px] animate-pulse delay-1000"></div>
 
-      <div className="w-full max-w-md relative z-10 transition-all duration-700 animate-in fade-in slide-in-from-bottom-8">
-        <div className="bg-white/5 border border-white/10 p-10 rounded-[40px] backdrop-blur-3xl shadow-2xl">
-          <div className="text-center mb-10">
-            <h1 className="text-4xl font-black bg-gradient-to-r from-blue-400 to-indigo-500 bg-clip-text text-transparent mb-2">
-              ERP System
-            </h1>
-            <p className="text-gray-400 text-sm font-medium">Panel de control empresarial premium</p>
+      <motion.div 
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        className="w-full max-w-md bg-white/5 border border-white/10 rounded-[2.5rem] p-10 backdrop-blur-3xl shadow-2xl relative overflow-hidden"
+      >
+        <div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-blue-500 via-indigo-500 to-purple-500"></div>
+        
+        <div className="flex flex-col items-center mb-10">
+          <div className="w-16 h-16 bg-gradient-to-br from-blue-600 to-indigo-600 rounded-[1.5rem] flex items-center justify-center shadow-2xl shadow-blue-500/20 mb-6">
+            <ShieldCheck size={32} className="text-white" />
           </div>
+          <h1 className="text-3xl font-black tracking-tighter italic uppercase text-white">
+            NEXUS <span className="text-blue-500 italic">ERP</span>
+          </h1>
+          <p className="text-gray-500 font-bold mt-2 uppercase text-[10px] tracking-[0.3em]">Acceso Seguro al Panel de Control</p>
+        </div>
 
-          <form onSubmit={handleLogin} className="space-y-6">
-            <div>
-              <input
-                type="email"
-                placeholder="admin@empresa-erp.com"
-                required
+        <form onSubmit={handleLogin} className="space-y-6">
+          <div className="space-y-2">
+            <label className="text-[10px] font-black uppercase tracking-widest text-gray-400 ml-4">Usuario / Email</label>
+            <div className="relative group">
+              <User className="absolute left-4 top-1/2 -translate-y-1/2 text-gray-500 group-focus-within:text-blue-400 transition-colors" size={18} />
+              <input 
+                type="email" 
                 value={email}
                 onChange={(e) => setEmail(e.target.value)}
-                className="w-full bg-white/5 border border-white/10 rounded-2xl px-6 py-4 outline-none focus:border-blue-500/50 focus:bg-white/10 transition-all placeholder:text-gray-700"
+                className="w-full bg-white/5 border border-white/10 rounded-2xl py-4 pl-12 pr-4 text-sm font-medium focus:ring-2 focus:ring-blue-500/50 outline-none transition-all focus:bg-white/10"
+                placeholder="usuario@empresa.com"
+                required
               />
             </div>
-            <div>
-              <input
-                type="password"
-                placeholder="Contraseña (ej: 123456)"
-                required
+          </div>
+
+          <div className="space-y-2">
+            <label className="text-[10px] font-black uppercase tracking-widest text-gray-400 ml-4">Contraseña</label>
+            <div className="relative group">
+              <Lock className="absolute left-4 top-1/2 -translate-y-1/2 text-gray-500 group-focus-within:text-blue-400 transition-colors" size={18} />
+              <input 
+                type="password" 
                 value={password}
                 onChange={(e) => setPassword(e.target.value)}
-                className="w-full bg-white/5 border border-white/10 rounded-2xl px-6 py-4 outline-none focus:border-blue-500/50 focus:bg-white/10 transition-all placeholder:text-gray-700"
+                className="w-full bg-white/5 border border-white/10 rounded-2xl py-4 pl-12 pr-4 text-sm font-medium focus:ring-2 focus:ring-blue-500/50 outline-none transition-all focus:bg-white/10"
+                placeholder="••••••••"
+                required
               />
             </div>
+          </div>
 
-            {error && (
-              <div className="bg-red-500/10 border border-red-500/20 text-red-400 text-xs p-4 rounded-xl">
-                {error}
-              </div>
-            )}
+          {error && (
+            <motion.p 
+              initial={{ opacity: 0, x: -10 }}
+              animate={{ opacity: 1, x: 0 }}
+              className="text-red-400 text-xs font-bold text-center bg-red-500/10 py-3 rounded-xl border border-red-500/20"
+            >
+              {error}
+            </motion.p>
+          )}
 
-            <div className="flex flex-col gap-3">
-              <button
-                type="submit"
-                disabled={loading}
-                className="w-full bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 hover:to-indigo-500 text-white font-bold py-4 rounded-2xl shadow-lg shadow-blue-900/20 hover:shadow-blue-900/40 transition-all transform active:scale-95 disabled:opacity-50"
-              >
-                {loading ? "Autenticando..." : "Entrar"}
-              </button>
-              
-              <button
-                type="button"
-                onClick={() => { setEmail("admin@empresa-erp.com"); setPassword("123456"); }}
-                className="w-full bg-white/5 border border-white/5 text-gray-400 hover:text-white hover:bg-white/10 py-3 rounded-2xl text-[10px] font-black uppercase tracking-widest transition-all"
-              >
-                Autocompletar Demo Admin
-              </button>
-            </div>
-          </form>
+          <button 
+            type="submit" 
+            disabled={loading}
+            className="w-full bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 hover:to-indigo-500 text-white font-black py-4 rounded-2xl shadow-xl shadow-blue-900/40 flex items-center justify-center gap-2 group transition-all active:scale-[0.98] disabled:opacity-50"
+          >
+            {loading ? "Iniciando Sesión..." : (
+              <>
+                Entrar al Sistema
+                <ArrowRight size={18} className="group-hover:translate-x-1 transition-transform" />
+              </>
+            )}
+          </button>
+        </form>
 
-          <p className="mt-8 text-center text-xs text-gray-500 font-medium">
-            Acceso restringido para administradores autorizados
-          </p>
+        <div className="mt-8 pt-8 border-t border-white/5">
+           <div className="bg-blue-500/5 border border-blue-500/10 rounded-2xl p-4 flex items-center gap-4">
+              <div className="w-8 h-8 rounded-full bg-blue-500/10 flex items-center justify-center">
+                 <ShieldCheck size={14} className="text-blue-400" />
+              </div>
+              <div>
+                <p className="text-[9px] font-black uppercase text-blue-400 tracking-wider">Modo Demo Activado</p>
+                <p className="text-[10px] text-gray-500 font-medium">Haga clic en 'Entrar' para acceder rápidamente.</p>
+              </div>
+           </div>
         </div>
-      </div>
+      </motion.div>
     </div>
   );
 }

components/AuthGuard.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { auth } from "@/lib/firebase";
+import { onAuthStateChanged } from "firebase/auth";
+import { useRouter, usePathname } from "next/navigation";
+import { motion, AnimatePresence } from "framer-motion";
+
+export default function AuthGuard({ children }: { children: React.ReactNode }) {
+  const [loading, setLoading] = useState(true);
+  const [user, setUser] = useState<any>(null);
+  const router = useRouter();
+  const pathname = usePathname();
+
+  useEffect(() => {
+    const unsubscribe = onAuthStateChanged(auth, (user) => {
+      setUser(user);
+      setLoading(false);
+      
+      if (!user && pathname !== "/login") {
+        router.push("/login");
+      }
+    });
+
+    return () => unsubscribe();
+  }, [pathname, router]);
+
+  if (loading) {
+    return (
+      <div className="fixed inset-0 bg-[#0f172a] flex items-center justify-center z-[200]">
+        <motion.div 
+          animate={{ rotate: 360 }}
+          transition={{ duration: 1, repeat: Infinity, ease: "linear" }}
+          className="w-12 h-12 border-4 border-blue-500 border-t-transparent rounded-full shadow-lg shadow-blue-500/20"
+        />
+      </div>
+    );
+  }
+
+  // If not logged in and not on login page, don't show children (redirecting)
+  if (!user && pathname !== "/login") {
+    return null;
+  }
+
+  return <>{children}</>;
+}

components/Sidebar.tsx

@@ -13,6 +13,7 @@ import {
   Network, 
   MessageSquare, 
   Map as MapIcon,
+  FileText,
   LogOut 
 } from "lucide-react";
 import { motion } from "framer-motion";
@@ -25,6 +26,7 @@ const menuItems = [
   { icon: Users, label: "Clientes", href: "/clients" },
   { icon: UserSquare2, label: "Personal / RRHH", href: "/hr" },
   { icon: CheckSquare, label: "Tareas", href: "/tasks" },
+  { icon: FileText, label: "Facturación", href: "/billing" },
   { icon: Network, label: "Organigrama", href: "/org-chart" },
   { icon: MessageSquare, label: "Intranet", href: "/intranet" },
   { icon: MapIcon, label: "Mapa Mental", href: "/mind-map" },