Upload 26 files

app/clients/page.tsx

@@ -0,0 +1,102 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { db } from "@/lib/firebase";
+import { collection, onSnapshot, addDoc, deleteDoc, doc } from "firebase/firestore";
+import Link from "next/link";
+
+interface Client {
+  id: string;
+  name: string;
+  email: string;
+  phone: string;
+}
+
+export default function ClientsPage() {
+  const [clients, setClients] = useState<Client[]>([]);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [newClient, setNewClient] = useState({ name: "", email: "", phone: "" });
+
+  useEffect(() => {
+    const unsub = onSnapshot(collection(db, "clients"), (snap) => {
+      const data = snap.docs.map(doc => ({ id: doc.id, ...doc.data() } as Client));
+      setClients(data);
+    });
+    return () => unsub();
+  }, []);
+
+  const handleAdd = async (e: React.FormEvent) => {
+    e.preventDefault();
+    await addDoc(collection(db, "clients"), newClient);
+    setIsModalOpen(false);
+    setNewClient({ name: "", email: "", phone: "" });
+  };
+
+  return (
+    <div className="min-h-screen bg-[#0f172a] text-white p-6">
+      <header className="flex justify-between items-center mb-10">
+        <div>
+          <Link href="/" className="text-blue-400 hover:text-blue-300 transition-colors flex items-center gap-2 mb-2">
+            ← Dashboard
+          </Link>
+          <h1 className="text-4xl font-black">Directorio de Clientes</h1>
+        </div>
+        <button 
+          onClick={() => setIsModalOpen(true)}
+          className="px-8 py-3 bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-500 hover:to-pink-500 rounded-2xl font-bold transition-all shadow-xl shadow-purple-900/20"
+        >
+          ➕ Nuevo Cliente
+        </button>
+      </header>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        {clients.map((c) => (
+          <div key={c.id} className="bg-white/5 border border-white/10 rounded-[32px] p-8 backdrop-blur-xl relative overflow-hidden group hover:border-white/20 transition-all">
+            <div className="absolute -right-4 -top-4 w-24 h-24 bg-purple-500/10 blur-3xl rounded-full"></div>
+            <div className="relative z-10">
+              <div className="w-14 h-14 bg-white/10 rounded-2xl flex items-center justify-center text-2xl mb-6">👤</div>
+              <h3 className="text-xl font-bold mb-2 group-hover:text-purple-400 transition-colors">{c.name}</h3>
+              <p className="text-gray-400 text-sm mb-4">{c.email}</p>
+              <div className="flex items-center gap-2 text-xs font-mono text-purple-300 bg-purple-500/10 w-fit px-3 py-1 rounded-full border border-purple-500/20">
+                📞 {c.phone}
+              </div>
+              <div className="mt-8 pt-6 border-t border-white/5 flex gap-4">
+                <button className="text-xs font-bold text-gray-500 hover:text-white transition-colors uppercase tracking-widest">Editar</button>
+                <button onClick={() => deleteDoc(doc(db, "clients", c.id))} className="text-xs font-bold text-gray-700 hover:text-red-400 transition-colors uppercase tracking-widest ml-auto">Eliminar</button>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {isModalOpen && (
+        <div className="fixed inset-0 bg-black/80 backdrop-blur-md flex items-center justify-center p-6 z-50">
+          <div className="bg-[#1e293b] border border-white/10 p-10 rounded-[48px] w-full max-w-md shadow-2xl animate-in fade-in slide-in-from-bottom-5">
+            <h2 className="text-3xl font-black mb-8 text-center uppercase tracking-tighter">Registrar Cliente</h2>
+            <form onSubmit={handleAdd} className="space-y-4">
+              <input 
+                type="text" placeholder="Nombre completo" required
+                value={newClient.name} onChange={e => setNewClient({...newClient, name: e.target.value})}
+                className="w-full bg-white/5 border border-white/10 rounded-2xl px-6 py-4 outline-none focus:border-purple-500/50"
+              />
+              <input 
+                type="email" placeholder="Email" required
+                value={newClient.email} onChange={e => setNewClient({...newClient, email: e.target.value})}
+                className="w-full bg-white/5 border border-white/10 rounded-2xl px-6 py-4 outline-none focus:border-purple-500/50"
+              />
+              <input 
+                type="tel" placeholder="Teléfono" required
+                value={newClient.phone} onChange={e => setNewClient({...newClient, phone: e.target.value})}
+                className="w-full bg-white/5 border border-white/10 rounded-2xl px-6 py-4 outline-none focus:border-purple-500/50"
+              />
+              <div className="flex flex-col gap-3 mt-10">
+                <button type="submit" className="w-full bg-white text-[#0f172a] py-5 rounded-2xl font-black transition-all hover:bg-gray-200">CREAR CLIENTE</button>
+                <button type="button" onClick={() => setIsModalOpen(false)} className="w-full py-4 text-gray-500 font-bold hover:text-white transition-colors">CANCELAR</button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

app/hr/page.tsx

@@ -0,0 +1,105 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { db } from "@/lib/firebase";
+import { collection, onSnapshot, addDoc, deleteDoc, doc } from "firebase/firestore";
+import Link from "next/link";
+
+interface Employee {
+  id: string;
+  name: string;
+  position: string;
+  salary: number;
+}
+
+export default function HRPage() {
+  const [employees, setEmployees] = useState<Employee[]>([]);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [newEmp, setNewEmp] = useState({ name: "", position: "", salary: 0 });
+
+  useEffect(() => {
+    const unsub = onSnapshot(collection(db, "employees"), (snap) => {
+      const data = snap.docs.map(doc => ({ id: doc.id, ...doc.data() } as Employee));
+      setEmployees(data);
+    });
+    return () => unsub();
+  }, []);
+
+  const handleAdd = async (e: React.FormEvent) => {
+    e.preventDefault();
+    await addDoc(collection(db, "employees"), newEmp);
+    setIsModalOpen(false);
+    setNewEmp({ name: "", position: "", salary: 0 });
+  };
+
+  return (
+    <div className="min-h-screen bg-[#0f172a] text-white p-6">
+      <header className="flex justify-between items-center mb-10">
+        <div>
+          <Link href="/" className="text-cyan-400 hover:text-cyan-300 transition-colors flex items-center gap-2 mb-2 font-medium">
+            ← Panel Principal
+          </Link>
+          <h1 className="text-4xl font-extrabold tracking-tight">Gestión Humana</h1>
+        </div>
+        <button 
+          onClick={() => setIsModalOpen(true)}
+          className="px-8 py-3 bg-white/10 hover:bg-white/20 border border-white/10 rounded-full font-bold transition-all backdrop-blur-md"
+        >
+          ➕ Registrar Personal
+        </button>
+      </header>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+        {employees.map((e) => (
+          <div key={e.id} className="bg-gradient-to-br from-[#1e293b] to-[#0f172a] border border-white/5 rounded-[2rem] p-8 hover:border-cyan-500/30 transition-all group shadow-2xl">
+            <div className="flex items-center gap-4 mb-6">
+              <div className="w-12 h-12 bg-cyan-500/20 text-cyan-400 rounded-2xl flex items-center justify-center text-xl font-bold">
+                {e.name.charAt(0)}
+              </div>
+              <div>
+                <h3 className="font-bold group-hover:text-cyan-400 transition-colors">{e.name}</h3>
+                <span className="text-[10px] text-gray-500 font-black uppercase tracking-widest">{e.position}</span>
+              </div>
+            </div>
+            <div className="flex justify-between items-center py-4 border-y border-white/5 mb-6">
+              <span className="text-xs text-gray-500 uppercase font-bold">Salario</span>
+              <span className="font-mono text-cyan-400 font-bold">${Number(e.salary).toLocaleString()}</span>
+            </div>
+            <button 
+              onClick={() => deleteDoc(doc(db, "employees", e.id))}
+              className="w-full py-3 bg-red-500/5 hover:bg-red-500/20 text-red-500/60 hover:text-red-500 text-[10px] font-black uppercase tracking-widest rounded-xl transition-all border border-red-500/10"
+            >
+              Dar de Baja
+            </button>
+          </div>
+        ))}
+      </div>
+
+      {isModalOpen && (
+        <div className="fixed inset-0 bg-[#0f172a]/95 backdrop-blur-xl flex items-center justify-center p-6 z-50">
+          <div className="w-full max-w-sm">
+            <h2 className="text-4xl font-black mb-8 text-white italic tracking-tighter">NEW STAFF /</h2>
+            <form onSubmit={handleAdd} className="space-y-6">
+              <div className="space-y-1">
+                <label className="text-[10px] font-black text-cyan-500 uppercase ml-2">Nombre completo</label>
+                <input required value={newEmp.name} onChange={v => setNewEmp({...newEmp, name: v.target.value})} className="w-full bg-white/5 border-b border-white/20 px-4 py-4 outline-none focus:border-cyan-500 transition-all font-medium text-lg"/>
+              </div>
+              <div className="space-y-1">
+                <label className="text-[10px] font-black text-cyan-500 uppercase ml-2">Cargo / Posición</label>
+                <input required value={newEmp.position} onChange={v => setNewEmp({...newEmp, position: v.target.value})} className="w-full bg-white/5 border-b border-white/20 px-4 py-4 outline-none focus:border-cyan-500 transition-all font-medium text-lg"/>
+              </div>
+              <div className="space-y-1">
+                <label className="text-[10px] font-black text-cyan-500 uppercase ml-2">Salario Mensual</label>
+                <input type="number" required value={newEmp.salary} onChange={v => setNewEmp({...newEmp, salary: Number(v.target.value)})} className="w-full bg-white/5 border-b border-white/20 px-4 py-4 outline-none focus:border-cyan-500 transition-all font-medium text-lg"/>
+              </div>
+              <div className="flex gap-4 pt-10">
+                <button type="button" onClick={() => setIsModalOpen(false)} className="px-6 py-4 text-gray-500 font-black text-xs uppercase hover:text-white transition-colors">Cancelar</button>
+                <button type="submit" className="flex-1 bg-cyan-600 hover:bg-cyan-500 py-4 rounded-full font-black text-xs uppercase tracking-widest transition-all">Contratar</button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

app/inventory/page.tsx

@@ -0,0 +1,132 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { db } from "@/lib/firebase";
+import { collection, onSnapshot, addDoc, deleteDoc, doc, updateDoc } from "firebase/firestore";
+import Link from "next/link";
+
+interface Product {
+  id: string;
+  name: string;
+  category: string;
+  price: number;
+  stock: number;
+}
+
+export default function InventoryPage() {
+  const [products, setProducts] = useState<Product[]>([]);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [newProduct, setNewProduct] = useState({ name: "", category: "", price: 0, stock: 0 });
+
+  useEffect(() => {
+    const unsub = onSnapshot(collection(db, "products"), (snap) => {
+      const data = snap.docs.map(doc => ({ id: doc.id, ...doc.data() } as Product));
+      setProducts(data);
+    });
+    return () => unsub();
+  }, []);
+
+  const handleAdd = async (e: React.FormEvent) => {
+    e.preventDefault();
+    await addDoc(collection(db, "products"), newProduct);
+    setIsModalOpen(false);
+    setNewProduct({ name: "", category: "", price: 0, stock: 0 });
+  };
+
+  const handleDelete = async (id: string) => {
+    if(confirm("¿Seguro que quieres eliminar este producto?")) {
+      await deleteDoc(doc(db, "products", id));
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-[#0f172a] text-white p-6">
+      <header className="flex justify-between items-center mb-8">
+        <div>
+          <Link href="/" className="text-blue-400 hover:text-blue-300 transition-colors flex items-center gap-2 mb-2">
+            ← Volver al Dashboard
+          </Link>
+          <h1 className="text-3xl font-bold">Gestión de Inventario</h1>
+        </div>
+        <button 
+          onClick={() => setIsModalOpen(true)}
+          className="px-6 py-3 bg-blue-600 hover:bg-blue-500 rounded-2xl font-bold transition-all shadow-lg shadow-blue-900/20"
+        >
+          ➕ Añadir Producto
+        </button>
+      </header>
+
+      {/* Inventory Table */}
+      <div className="bg-white/5 border border-white/10 rounded-3xl overflow-hidden backdrop-blur-xl">
+        <table className="w-full text-left">
+          <thead className="bg-white/5 border-b border-white/10">
+            <tr>
+              <th className="px-6 py-4 font-semibold text-gray-400 uppercase text-xs tracking-wider">Nombre</th>
+              <th className="px-6 py-4 font-semibold text-gray-400 uppercase text-xs tracking-wider">Categoría</th>
+              <th className="px-6 py-4 font-semibold text-gray-400 uppercase text-xs tracking-wider">Precio</th>
+              <th className="px-6 py-4 font-semibold text-gray-400 uppercase text-xs tracking-wider">Stock</th>
+              <th className="px-6 py-4 font-semibold text-gray-400 uppercase text-xs tracking-wider">Acciones</th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-white/5">
+            {products.map((p) => (
+              <tr key={p.id} className="hover:bg-white/5 transition-colors group">
+                <td className="px-6 py-4 font-medium text-gray-200">{p.name}</td>
+                <td className="px-6 py-4 text-gray-400">
+                  <span className="px-3 py-1 bg-white/5 rounded-full text-xs border border-white/10">{p.category}</span>
+                </td>
+                <td className="px-6 py-4 font-bold text-blue-400">${Number(p.price).toLocaleString()}</td>
+                <td className="px-6 py-4">
+                  <div className="flex items-center gap-2">
+                    <span className={`w-2 h-2 rounded-full ${p.stock > 10 ? 'bg-green-400' : 'bg-red-400'}`}></span>
+                    {p.stock} uds.
+                  </div>
+                </td>
+                <td className="px-6 py-4">
+                  <button onClick={() => handleDelete(p.id)} className="text-gray-600 hover:text-red-400 transition-colors">🗑️</button>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+
+      {/* Modal Mockup */}
+      {isModalOpen && (
+        <div className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center p-6 z-50">
+          <div className="bg-[#1e293b] border border-white/10 p-8 rounded-[40px] w-full max-w-lg shadow-2xl animate-in fade-in zoom-in-95">
+            <h2 className="text-2xl font-bold mb-6">Nuevo Producto</h2>
+            <form onSubmit={handleAdd} className="space-y-4">
+              <input 
+                type="text" placeholder="Nombre" required
+                value={newProduct.name} onChange={e => setNewProduct({...newProduct, name: 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"
+              />
+              <input 
+                type="text" placeholder="Categoría" required
+                value={newProduct.category} onChange={e => setNewProduct({...newProduct, category: 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"
+              />
+              <div className="grid grid-cols-2 gap-4">
+                <input 
+                  type="number" placeholder="Precio" required
+                  value={newProduct.price} onChange={e => setNewProduct({...newProduct, price: Number(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"
+                />
+                <input 
+                  type="number" placeholder="Stock" required
+                  value={newProduct.stock} onChange={e => setNewProduct({...newProduct, stock: Number(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"
+                />
+              </div>
+              <div className="flex gap-4 mt-8">
+                <button type="button" onClick={() => setIsModalOpen(false)} className="flex-1 py-4 text-gray-400 hover:text-white transition-colors">Cancelar</button>
+                <button type="submit" className="flex-1 bg-blue-600 hover:bg-blue-500 py-4 rounded-2xl font-bold transition-all shadow-lg shadow-blue-900/20">Guardar</button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

app/layout.tsx

@@ -1,20 +1,12 @@
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
+import { Inter } from "next/font/google";
 import "./globals.css";
 
-const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
-});
-
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
-});
+const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "ERP Premium | Next Generation Control Panel",
+  description: "Modern Enterprise Resource Planning system powered by Firebase",
 };
 
 export default function RootLayout({
@@ -23,11 +15,8 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html
-      lang="en"
-      className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
-    >
-      <body className="min-h-full flex flex-col">{children}</body>
+    <html lang="es">
+      <body className={`${inter.className} bg-[#0f172a]`}>{children}</body>
     </html>
   );
 }

app/login/page.tsx

@@ -0,0 +1,107 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { auth } from "@/lib/firebase";
+import { signInWithEmailAndPassword, onAuthStateChanged } from "firebase/auth";
+import { useRouter } from "next/navigation";
+
+export default function LoginPage() {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  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);
+    setError("");
+    try {
+      await signInWithEmailAndPassword(auth, email, password);
+      router.push("/");
+    } catch (err: any) {
+      setError(err.message || "Error al iniciar sesión");
+    } finally {
+      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="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>
+          </div>
+
+          <form onSubmit={handleLogin} className="space-y-6">
+            <div>
+              <input
+                type="email"
+                placeholder="Email corporativo"
+                required
+                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-600"
+              />
+            </div>
+            <div>
+              <input
+                type="password"
+                placeholder="Contraseña"
+                required
+                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-600"
+              />
+            </div>
+
+            {error && (
+              <div className="bg-red-500/10 border border-red-500/20 text-red-400 text-xs p-4 rounded-xl animate-shake">
+                {error}
+              </div>
+            )}
+
+            <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 ? (
+                <span className="flex items-center justify-center gap-2">
+                  <svg className="animate-spin h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+                    <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                  </svg>
+                  Autenticando...
+                </span>
+              ) : (
+                "Entrar"
+              )}
+            </button>
+          </form>
+
+          <p className="mt-8 text-center text-xs text-gray-500 font-medium">
+            Acceso restringido para administradores autorizados
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

app/page.tsx

@@ -1,65 +1,130 @@
-import Image from "next/image";
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { db, auth } from "@/lib/firebase";
+import { collection, onSnapshot, query, orderBy, limit } from "firebase/firestore";
+import Link from "next/link";
+
+export default function Dashboard() {
+  const [stats, setStats] = useState({
+    products: 0,
+    clients: 0,
+    salesCount: 0,
+    revenue: 0,
+  });
+
+  useEffect(() => {
+    // Real-time stats from Firestore
+    const unsubProducts = onSnapshot(collection(db, "products"), (snap) => {
+      setStats((prev) => ({ ...prev, products: snap.size }));
+    });
+
+    const unsubClients = onSnapshot(collection(db, "clients"), (snap) => {
+      setStats((prev) => ({ ...prev, clients: snap.size }));
+    });
+
+    const unsubSales = onSnapshot(collection(db, "sales"), (snap) => {
+      let rev = 0;
+      snap.forEach((doc) => {
+        rev += doc.data().total || 0;
+      });
+      setStats((prev) => ({ ...prev, salesCount: snap.size, revenue: rev }));
+    });
+
+    return () => {
+      unsubProducts();
+      unsubClients();
+      unsubSales();
+    };
+  }, []);
 
-export default function Home() {
   return (
-    <div className="flex flex-col flex-1 items-center justify-center bg-zinc-50 font-sans dark:bg-black">
-      <main className="flex flex-1 w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
-        <Image
-          className="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={100}
-          height={20}
-          priority
-        />
-        <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
-          <h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
-            To get started, edit the page.tsx file.
+    <div className="min-h-screen bg-[#0f172a] text-white p-6 font-sans">
+      <header className="flex justify-between items-center mb-10">
+        <div>
+          <h1 className="text-4xl font-extrabold bg-gradient-to-r from-blue-400 to-indigo-500 bg-clip-text text-transparent">
+            ERP Premium Dashboard
           </h1>
-          <p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
-            Looking for a starting point or more instructions? Head over to{" "}
-            <a
-              href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Templates
-            </a>{" "}
-            or the{" "}
-            <a
-              href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Learning
-            </a>{" "}
-            center.
-          </p>
+          <p className="text-gray-400 mt-1">Bienvenido al centro de control de tu negocio</p>
         </div>
-        <div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
-          <a
-            className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
+        <div className="flex gap-4">
+          <button 
+            onClick={() => auth.signOut()}
+            className="px-6 py-2 bg-white/10 hover:bg-white/20 rounded-full border border-white/10 transition-all text-sm font-medium backdrop-blur-md"
           >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={16}
-              height={16}
-            />
-            Deploy Now
-          </a>
-          <a
-            className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Documentation
-          </a>
+            Cerrar Sesión
+          </button>
+        </div>
+      </header>
+
+      {/* Stats Grid */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-10">
+        <StatCard title="Productos" value={stats.products} icon="📦" color="from-blue-500 to-cyan-400" />
+        <StatCard title="Clientes" value={stats.clients} icon="👥" color="from-purple-500 to-pink-500" />
+        <StatCard title="Ventas Totales" value={stats.salesCount} icon="🛒" color="from-orange-500 to-yellow-400" />
+        <StatCard title="Ingresos" value={`$${stats.revenue.toLocaleString()}`} icon="💰" color="from-green-500 to-emerald-400" />
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+        {/* Quick Actions */}
+        <div className="lg:col-span-1 bg-white/5 border border-white/10 rounded-3xl p-8 backdrop-blur-xl">
+          <h2 className="text-xl font-bold mb-6">Acciones Rápidas</h2>
+          <div className="space-y-4">
+            <QuickAction href="/inventory" label="Nueva Existencia" icon="➕" />
+            <QuickAction href="/sales" label="Registrar Venta" icon="🏷️" />
+            <QuickAction href="/clients" label="Añadir Cliente" icon="👤" />
+            <QuickAction href="/hr" label="Gestionar Personal" icon="👔" />
+          </div>
+        </div>
+
+        {/* Charts Mockup / Future Widget */}
+        <div className="lg:col-span-2 bg-white/5 border border-white/10 rounded-3xl p-8 backdrop-blur-xl relative overflow-hidden group">
+          <div className="absolute inset-0 bg-gradient-to-br from-blue-600/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-700"></div>
+          <div className="relative z-10">
+            <h2 className="text-xl font-bold mb-6">Rendimiento Semanal</h2>
+            <div className="h-64 flex items-end justify-between gap-2">
+              {[60, 45, 80, 55, 95, 70, 85].map((h, i) => (
+                <div key={i} className="flex-1 flex flex-col items-center">
+                  <div 
+                    className="w-full bg-gradient-to-t from-blue-600 to-cyan-400 rounded-t-lg transition-all duration-1000 delay-150"
+                    style={{ height: `${h}%` }}
+                  ></div>
+                  <span className="text-[10px] text-gray-500 mt-2">{['L', 'M', 'X', 'J', 'V', 'S', 'D'][i]}</span>
+                </div>
+              ))}
+            </div>
+            <p className="mt-8 text-sm text-gray-400 items-center flex gap-2">
+              <span className="w-2 h-2 rounded-full bg-green-400 animate-pulse"></span>
+              Actualizado en tiempo real con Firestore
+            </p>
+          </div>
         </div>
-      </main>
+      </div>
     </div>
   );
 }
+
+function StatCard({ title, value, icon, color }: { title: string, value: string | number, icon: string, color: string }) {
+  return (
+    <div className="bg-white/5 border border-white/10 rounded-3xl p-6 backdrop-blur-md relative overflow-hidden group hover:scale-[1.02] transition-all">
+      <div className={`absolute -right-4 -top-4 w-24 h-24 bg-gradient-to-br ${color} opacity-20 blur-2xl rounded-full group-hover:opacity-40 transition-opacity`}></div>
+      <div className="flex items-center gap-4 relative z-10">
+        <div className="text-3xl">{icon}</div>
+        <div>
+          <p className="text-sm text-gray-400 uppercase tracking-wider font-semibold">{title}</p>
+          <p className="text-2xl font-bold">{value}</p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function QuickAction({ href, label, icon }: { href: string, label: string, icon: string }) {
+  return (
+    <Link href={href} className="flex items-center gap-4 p-4 rounded-2xl bg-white/5 border border-white/5 hover:bg-white/10 hover:border-white/20 transition-all group">
+      <span className="text-xl group-hover:scale-125 transition-transform">{icon}</span>
+      <span className="font-medium text-gray-200">{label}</span>
+      <span className="ml-auto opacity-0 group-hover:opacity-100 transition-opacity">→</span>
+    </Link>
+  );
+}

app/sales/page.tsx

@@ -0,0 +1,114 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { db } from "@/lib/firebase";
+import { collection, onSnapshot, addDoc, serverTimestamp } from "firebase/firestore";
+import Link from "next/link";
+
+interface Sale {
+  id: string;
+  client: string;
+  items: string;
+  total: number;
+  date: any;
+}
+
+export default function SalesPage() {
+  const [sales, setSales] = useState<Sale[]>([]);
+  const [products, setProducts] = useState<any[]>([]);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [newSale, setNewSale] = useState({ client: "", items: "", total: 0 });
+
+  useEffect(() => {
+    const unsubSales = onSnapshot(collection(db, "sales"), (snap) => {
+      const data = snap.docs.map(doc => ({ id: doc.id, ...doc.data() } as Sale));
+      setSales(data);
+    });
+    const unsubProducts = onSnapshot(collection(db, "products"), (snap) => {
+      setProducts(snap.docs.map(doc => ({ id: doc.id, ...doc.data() })));
+    });
+    return () => { unsubSales(); unsubProducts(); };
+  }, []);
+
+  const handleAdd = async (e: React.FormEvent) => {
+    e.preventDefault();
+    await addDoc(collection(db, "sales"), {
+      ...newSale,
+      date: serverTimestamp()
+    });
+    setIsModalOpen(false);
+    setNewSale({ client: "", items: "", total: 0 });
+  };
+
+  return (
+    <div className="min-h-screen bg-[#0f172a] text-white p-6">
+      <header className="flex justify-between items-center mb-10">
+        <div>
+          <Link href="/" className="text-orange-400 hover:text-orange-300 transition-colors flex items-center gap-2 mb-2 font-medium">
+            ← Home
+          </Link>
+          <h1 className="text-4xl font-black bg-gradient-to-r from-orange-400 to-yellow-500 bg-clip-text text-transparent">Historial de Ventas</h1>
+        </div>
+        <button 
+          onClick={() => setIsModalOpen(true)}
+          className="px-10 py-4 bg-orange-600 hover:bg-orange-500 rounded-full font-black text-xs uppercase tracking-widest transition-all shadow-xl shadow-orange-900/40 transform hover:scale-105 active:scale-95"
+        >
+          ➕ Registrar Transacción
+        </button>
+      </header>
+
+      <div className="bg-white/5 border border-white/10 rounded-[3rem] p-10 backdrop-blur-2xl">
+        <div className="space-y-6">
+          {sales.map((s) => (
+            <div key={s.id} className="flex items-center justify-between p-6 bg-white/5 border border-white/5 rounded-3xl hover:bg-white/10 transition-all group">
+              <div className="flex items-center gap-6">
+                <div className="w-14 h-14 bg-gradient-to-br from-orange-500 to-yellow-500 rounded-2xl flex items-center justify-center text-2xl shadow-lg">🧾</div>
+                <div>
+                  <h3 className="font-bold text-lg group-hover:text-orange-400 transition-colors uppercase tracking-tight">{s.client}</h3>
+                  <p className="text-gray-500 text-xs font-medium mt-1">PRODUCTOS: <span className="text-gray-400">{s.items}</span></p>
+                </div>
+              </div>
+              <div className="text-right">
+                <p className="text-2xl font-black text-white">${Number(s.total).toLocaleString()}</p>
+                <p className="text-[10px] text-gray-600 font-black uppercase mt-1">Completado</p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {isModalOpen && (
+        <div className="fixed inset-0 bg-[#0f172a]/95 backdrop-blur-3xl flex items-center justify-center p-6 z-50">
+          <div className="bg-white/5 border border-white/10 p-12 rounded-[50px] w-full max-w-lg shadow-2xl relative overflow-hidden">
+            <div className="absolute top-0 right-0 w-32 h-32 bg-orange-500/10 blur-[80px] rounded-full"></div>
+            <h2 className="text-3xl font-black mb-10 tracking-tighter italic">NUEVA VENTA /</h2>
+            <form onSubmit={handleAdd} className="space-y-6">
+              <input 
+                placeholder="Nombre del Cliente" required
+                value={newSale.client} onChange={e => setNewSale({...newSale, client: e.target.value})}
+                className="w-full bg-white/5 border-b border-white/10 py-4 text-xl outline-none focus:border-orange-500 transition-all font-bold"
+              />
+              <input 
+                placeholder="Descripción de Ítems" required
+                value={newSale.items} onChange={e => setNewSale({...newSale, items: e.target.value})}
+                className="w-full bg-white/5 border-b border-white/10 py-4 text-lg outline-none focus:border-orange-500 transition-all"
+              />
+              <div className="relative">
+                <span className="absolute left-0 top-1/2 -translate-y-1/2 text-3xl font-black text-gray-700">$</span>
+                <input 
+                  type="number" placeholder="0.00" required
+                  value={newSale.total} onChange={e => setNewSale({...newSale, total: Number(e.target.value)})}
+                  className="w-full bg-transparent border-b border-white/10 pl-10 py-6 text-6xl outline-none focus:border-orange-500 transition-all font-black text-orange-400 placeholder:text-gray-800"
+                />
+              </div>
+              <div className="flex gap-4 pt-12">
+                <button type="button" onClick={() => setIsModalOpen(false)} className="px-8 py-5 text-gray-500 font-black text-xs uppercase hover:text-white transition-colors tracking-widest">Descartar</button>
+                <button type="submit" className="flex-1 bg-orange-600 hover:bg-orange-500 py-5 rounded-3xl font-black text-xs uppercase tracking-[0.2em] transition-all shadow-xl shadow-orange-900/20">Finalizar Venta</button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

lib/firebase.ts

@@ -0,0 +1,19 @@
+import { initializeApp, getApps } from "firebase/app";
+import { getAuth } from "firebase/auth";
+import { getFirestore } from "firebase/firestore";
+
+const firebaseConfig = {
+    apiKey: "AIzaSyD0gjMSH04oiyUIjqTiUs3zuLkW7UP1x-s",
+    authDomain: "erpjsf.firebaseapp.com",
+    projectId: "erpjsf",
+    storageBucket: "erpjsf.firebasestorage.app",
+    messagingSenderId: "996985286814",
+    appId: "1:996985286814:web:7e02e9a31da1deac638b8f"
+};
+
+// Initialize Firebase
+const app = getApps().length === 0 ? initializeApp(firebaseConfig) : getApps()[0];
+const auth = getAuth(app);
+const db = getFirestore(app);
+
+export { app, auth, db };