Upload 29 files

.gitignore

@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

AGENTS.md

@@ -0,0 +1,5 @@
+<!-- BEGIN:nextjs-agent-rules -->
+# This is NOT the Next.js you know
+
+This version has breaking changes — APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in `node_modules/next/dist/docs/` before writing any code. Heed deprecation notices.
+<!-- END:nextjs-agent-rules -->

CLAUDE.md

@@ -0,0 +1 @@
+@AGENTS.md

Dockerfile

@@ -0,0 +1,30 @@
+# --- STAGE 1: Build ---
+FROM node:20-alpine AS builder
+WORKDIR /app
+
+# Install dependencies
+COPY package.json package-lock.json ./
+RUN npm ci
+
+# Copy source and build
+COPY . .
+RUN npm run build
+
+# --- STAGE 2: Runtime ---
+FROM node:20-alpine AS runner
+WORKDIR /app
+
+ENV NODE_ENV=production
+ENV PORT=7860
+
+# Copy necessary files from builder
+COPY --from=builder /app/next.config.ts ./
+COPY --from=builder /app/public ./public
+COPY --from=builder /app/.next ./.next
+COPY --from=builder /app/node_modules ./node_modules
+COPY --from=builder /app/package.json ./package.json
+
+EXPOSE 7860
+
+# Start the application
+CMD ["npm", "start"]

README.md

@@ -1,11 +1,36 @@
----
-title: Restoplus
-emoji: 🏃
-colorFrom: yellow
-colorTo: purple
-sdk: docker
-pinned: false
-license: mit
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

app/globals.css

@@ -0,0 +1,26 @@
+@import "tailwindcss";
+
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #0a0a0a;
+    --foreground: #ededed;
+  }
+}
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+  font-family: Arial, Helvetica, sans-serif;
+}

app/layout.tsx

@@ -0,0 +1,33 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } 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"],
+});
+
+export const metadata: Metadata = {
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  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>
+  );
+}

app/page.tsx

@@ -0,0 +1,65 @@
+import Image from "next/image";
+
+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.
+          </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>
+        </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"
+          >
+            <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>
+        </div>
+      </main>
+    </div>
+  );
+}

eslint.config.mjs

@@ -0,0 +1,18 @@
+import { defineConfig, globalIgnores } from "eslint/config";
+import nextVitals from "eslint-config-next/core-web-vitals";
+import nextTs from "eslint-config-next/typescript";
+
+const eslintConfig = defineConfig([
+  ...nextVitals,
+  ...nextTs,
+  // Override default ignores of eslint-config-next.
+  globalIgnores([
+    // Default ignores of eslint-config-next:
+    ".next/**",
+    "out/**",
+    "build/**",
+    "next-env.d.ts",
+  ]),
+]);
+
+export default eslintConfig;

next-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+import "./.next/types/routes.d.ts";
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

next.config.ts

@@ -0,0 +1,7 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  /* config options here */
+};
+
+export default nextConfig;

package.json

@@ -0,0 +1,27 @@
+{
+  "name": "erp-next",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "eslint"
+  },
+  "dependencies": {
+    "firebase": "^12.11.0",
+    "next": "16.2.1",
+    "react": "19.2.4",
+    "react-dom": "19.2.4"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "16.2.1",
+    "tailwindcss": "^4",
+    "typescript": "^5"
+  }
+}

postcss.config.mjs

@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+
+export default config;

src/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>
+  );
+}

src/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>
+  );
+}

src/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>
+  );
+}

src/app/layout.tsx

@@ -0,0 +1,22 @@
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import "./globals.css";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata: Metadata = {
+  title: "ERP Premium | Next Generation Control Panel",
+  description: "Modern Enterprise Resource Planning system powered by Firebase",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="es">
+      <body className={`${inter.className} bg-[#0f172a]`}>{children}</body>
+    </html>
+  );
+}

src/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>
+  );
+}

src/app/page.tsx

@@ -0,0 +1,130 @@
+"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();
+    };
+  }, []);
+
+  return (
+    <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="text-gray-400 mt-1">Bienvenido al centro de control de tu negocio</p>
+        </div>
+        <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"
+          >
+            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>
+      </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>
+  );
+}

src/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>
+  );
+}

src/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 };

tsconfig.json

@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts",
+    "**/*.mts"
+  ],
+  "exclude": ["node_modules"]
+}