Upload 35 files

app/login/page.tsx

@@ -7,6 +7,8 @@ import { useRouter } from "next/navigation";
 import { motion } from "framer-motion";
 import { Lock, User, ArrowRight, ShieldCheck } from "lucide-react";
 
+import Link from "next/link";
+
 export default function LoginPage() {
   const [email, setEmail] = useState("admin@erp.com");
   const [password, setPassword] = useState("admin123");
@@ -22,7 +24,21 @@ export default function LoginPage() {
       await signInWithEmailAndPassword(auth, email, password);
       router.push("/");
     } catch (err: any) {
-      setError("Credenciales inválidas. Intente de nuevo.");
+      // Auto-create admin if it doesn't exist
+      if (err.code === "auth/user-not-found" && email === "admin@erp.com") {
+        try {
+          const { createUserWithEmailAndPassword } = await import("firebase/auth");
+          await createUserWithEmailAndPassword(auth, email, password);
+          router.push("/");
+          return;
+        } catch (regErr: any) {
+          setError("Error al crear cuenta administrativa automática.");
+        }
+      } else if (err.code === "auth/invalid-credential" || err.code === "auth/wrong-password") {
+         setError("Credenciales inválidas. Intente de nuevo.");
+      } else {
+         setError("Error de conexión. Intente de nuevo.");
+      }
       setLoading(false);
     }
   };
@@ -105,7 +121,7 @@ export default function LoginPage() {
           </button>
         </form>
 
-        <div className="mt-8 pt-8 border-t border-white/5">
+        <div className="mt-8 pt-8 border-t border-white/5 flex flex-col gap-4">
            <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" />
@@ -115,6 +131,13 @@ export default function LoginPage() {
                 <p className="text-[10px] text-gray-500 font-medium">Haga clic en 'Entrar' para acceder rápidamente.</p>
               </div>
            </div>
+
+           <p className="text-center text-xs text-gray-500 font-medium">
+             ¿No tienes una cuenta? {" "}
+             <Link href="/register" className="text-blue-400 font-black hover:text-blue-300 transition-colors">
+               Regístrate aquí
+             </Link>
+           </p>
         </div>
       </motion.div>
     </div>

app/register/page.tsx

@@ -0,0 +1,136 @@
+"use client";
+
+import React, { useState } from "react";
+import { createUserWithEmailAndPassword } from "firebase/auth";
+import { auth } from "@/lib/firebase";
+import { useRouter } from "next/navigation";
+import { motion } from "framer-motion";
+import { Lock, User, ArrowRight, ShieldCheck, Mail, UserPlus } from "lucide-react";
+import Link from "next/link";
+
+export default function RegisterPage() {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [name, setName] = useState("");
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+  const router = useRouter();
+
+  const handleRegister = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    setError("");
+    try {
+      await createUserWithEmailAndPassword(auth, email, password);
+      router.push("/");
+    } catch (err: any) {
+      setError(err.message || "Error al crear la cuenta.");
+      setLoading(false);
+    }
+  };
+
+  return (
+    <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>
+
+      <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-indigo-600 to-purple-600 rounded-[1.5rem] flex items-center justify-center shadow-2xl shadow-indigo-500/20 mb-6">
+            <UserPlus size={32} className="text-white" />
+          </div>
+          <h1 className="text-3xl font-black tracking-tighter italic uppercase text-white">
+            NEXUS <span className="text-indigo-500 italic">REGISTRO</span>
+          </h1>
+          <p className="text-gray-500 font-bold mt-2 uppercase text-[10px] tracking-[0.3em]">Crea tu cuenta empresarial</p>
+        </div>
+
+        <form onSubmit={handleRegister} className="space-y-4">
+          <div className="space-y-2">
+            <label className="text-[10px] font-black uppercase tracking-widest text-gray-400 ml-4">Nombre Completo</label>
+            <div className="relative group">
+              <User className="absolute left-4 top-1/2 -translate-y-1/2 text-gray-500 group-focus-within:text-indigo-400 transition-colors" size={18} />
+              <input 
+                type="text" 
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                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-indigo-500/50 outline-none transition-all focus:bg-white/10"
+                placeholder="Juan Pérez"
+                required
+              />
+            </div>
+          </div>
+
+          <div className="space-y-2">
+            <label className="text-[10px] font-black uppercase tracking-widest text-gray-400 ml-4">Correo Electrónico</label>
+            <div className="relative group">
+              <Mail className="absolute left-4 top-1/2 -translate-y-1/2 text-gray-500 group-focus-within:text-indigo-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 py-4 pl-12 pr-4 text-sm font-medium focus:ring-2 focus:ring-indigo-500/50 outline-none transition-all focus:bg-white/10"
+                placeholder="usuario@empresa.com"
+                required
+              />
+            </div>
+          </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-indigo-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 py-4 pl-12 pr-4 text-sm font-medium focus:ring-2 focus:ring-indigo-500/50 outline-none transition-all focus:bg-white/10"
+                placeholder="••••••••"
+                required
+              />
+            </div>
+          </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>
+          )}
+
+          <button 
+            type="submit" 
+            disabled={loading}
+            className="w-full bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-500 hover:to-purple-500 text-white font-black py-4 rounded-2xl shadow-xl shadow-indigo-900/40 flex items-center justify-center gap-2 group transition-all active:scale-[0.98] disabled:opacity-50"
+          >
+            {loading ? "Creando Cuenta..." : (
+              <>
+                Unirme a Nexus
+                <ArrowRight size={18} className="group-hover:translate-x-1 transition-transform" />
+              </>
+            )}
+          </button>
+        </form>
+
+        <div className="mt-8 pt-8 border-t border-white/5 text-center">
+           <p className="text-xs text-gray-500 font-medium">
+             ¿Ya tienes una cuenta? {" "}
+             <Link href="/login" className="text-indigo-400 font-black hover:text-indigo-300 transition-colors">
+               Inicia Sesión
+             </Link>
+           </p>
+        </div>
+      </motion.div>
+    </div>
+  );
+}