AgendaPro v1.0 - multi-tenant SaaS, mobile calendar, public booking
Multi-tenant scheduling SaaS (AgendaPro-equivalent): - Backend: Node + Express + node:sqlite, multi-tenant (admin/owner/employee), versioned migrations, 4 templates (estetica-spa, barberia, clinica, blank). - Frontend: React 18 + TS + Vite + Tailwind, FullCalendar drag-and-drop, Recharts dashboard, mobile-first (day/list views on mobile). - Features: calendar+services+employees+clients+tickets, dashboard with best employee/service, top tickets, top/frequent clients, commissions, cancellation policy + no-show tracking, public online booking (/b/:slug), cash register (cierre de caja), reminders/notifications center. - Verification: 65/65 e2e API, 58/58 visual (0 overflow, 0 console errors), typecheck clean, vite build OK.
This commit is contained in:
AgendaPro Dev
@@ -0,0 +1,191 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { Sparkles, ArrowRight, Mail, Lock, AlertCircle, Wand2 } from "lucide-react";
|
||||
import { useAuth } from "../lib/auth";
|
||||
import { api } from "../lib/api";
|
||||
import { Spinner } from "../components/ui";
|
||||
|
||||
export function LoginPage() {
|
||||
const { login, user } = useAuth();
|
||||
const navigate = useNavigate();
|
||||
const [email, setEmail] = useState("[email protected]");
|
||||
const [password, setPassword] = useState("demo1234");
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [demoUsers, setDemoUsers] = useState<{ email: string; name: string; role: string; avatar_color: string }[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
if (user) navigate("/", { replace: true });
|
||||
}, [user, navigate]);
|
||||
|
||||
useEffect(() => {
|
||||
api.auth.demoUsers().then((r) => setDemoUsers(r.users)).catch(() => {});
|
||||
}, []);
|
||||
|
||||
const submit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setError(null);
|
||||
setLoading(true);
|
||||
try {
|
||||
await login(email, password);
|
||||
navigate("/", { replace: true });
|
||||
} catch (err: any) {
|
||||
setError(err.message || "No pudimos iniciar sesión");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const quickLogin = async (mail: string) => {
|
||||
setEmail(mail);
|
||||
setPassword("demo1234");
|
||||
setError(null);
|
||||
setLoading(true);
|
||||
try {
|
||||
await login(mail, "demo1234");
|
||||
navigate("/", { replace: true });
|
||||
} catch (err: any) {
|
||||
setError(err.message);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="grid min-h-screen lg:grid-cols-2">
|
||||
{/* Left: brand panel */}
|
||||
<div className="relative hidden flex-col justify-between overflow-hidden bg-gradient-to-br from-brand-700 via-brand-600 to-brand-800 p-10 text-white lg:flex">
|
||||
<div className="absolute -right-24 -top-24 h-96 w-96 rounded-full bg-white/10 blur-3xl" />
|
||||
<div className="absolute -bottom-32 -left-20 h-96 w-96 rounded-full bg-accent-500/30 blur-3xl" />
|
||||
<div className="relative z-10 flex items-center gap-2.5">
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded-xl bg-white/15 backdrop-blur">
|
||||
<Sparkles className="h-5 w-5" />
|
||||
</div>
|
||||
<span className="text-lg font-extrabold tracking-tight">AgendaPro</span>
|
||||
</div>
|
||||
|
||||
<div className="relative z-10 max-w-md">
|
||||
<h1 className="text-4xl font-extrabold leading-tight tracking-tight">
|
||||
La gestión visual de tu negocio, en un solo lugar.
|
||||
</h1>
|
||||
<p className="mt-4 text-brand-100">
|
||||
Calendario de citas con arrastrar y soltar, control de empleados, tickets e ingresos en tiempo real.
|
||||
Diseñado para dueños y equipos.
|
||||
</p>
|
||||
<ul className="mt-8 space-y-3 text-sm">
|
||||
{[
|
||||
"Agenda citas en segundos y arrástralas cuando quieras",
|
||||
"Tablero con tus ingresos, mejores empleados y clientes top",
|
||||
"Gestiona servicios, empleados y clientes desde un panel",
|
||||
].map((t) => (
|
||||
<li key={t} className="flex items-start gap-3">
|
||||
<span className="mt-1.5 h-1.5 w-1.5 shrink-0 rounded-full bg-accent-300" />
|
||||
<span className="text-brand-50">{t}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="relative z-10 text-xs text-brand-200">
|
||||
© {new Date().getFullYear()} AgendaPro · Demo
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right: form */}
|
||||
<div className="flex items-center justify-center bg-[#f6f7fb] px-5 py-10">
|
||||
<div className="w-full max-w-sm">
|
||||
<div className="mb-7 text-center lg:hidden">
|
||||
<div className="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-2xl bg-gradient-to-br from-brand-500 to-brand-700 text-white">
|
||||
<Sparkles className="h-6 w-6" />
|
||||
</div>
|
||||
<h1 className="text-xl font-extrabold">AgendaPro</h1>
|
||||
</div>
|
||||
|
||||
<div className="card p-6 shadow-card">
|
||||
<h2 className="text-lg font-extrabold text-slate-900">Bienvenido de nuevo</h2>
|
||||
<p className="mt-1 text-sm text-slate-500">Inicia sesión para acceder a tu panel.</p>
|
||||
|
||||
<form onSubmit={submit} className="mt-5 space-y-4">
|
||||
<div>
|
||||
<label className="label">Correo</label>
|
||||
<div className="relative">
|
||||
<Mail className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
|
||||
<input
|
||||
type="email"
|
||||
className="input pl-9"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
placeholder="[email protected]"
|
||||
autoComplete="email"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label className="label">Contraseña</label>
|
||||
<div className="relative">
|
||||
<Lock className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
|
||||
<input
|
||||
type="password"
|
||||
className="input pl-9"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
placeholder="••••••••"
|
||||
autoComplete="current-password"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="flex items-center gap-2 rounded-lg bg-rose-50 px-3 py-2 text-sm font-medium text-rose-700">
|
||||
<AlertCircle className="h-4 w-4 shrink-0" />
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<button type="submit" className="btn btn-primary w-full" disabled={loading}>
|
||||
{loading ? <Spinner /> : <>Entrar <ArrowRight className="h-4 w-4" /></>}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div className="mt-5 flex items-center gap-2 text-xs font-medium text-slate-400">
|
||||
<span className="h-px flex-1 bg-slate-200" />
|
||||
cuentas demo
|
||||
<span className="h-px flex-1 bg-slate-200" />
|
||||
</div>
|
||||
|
||||
<div className="mt-3 space-y-1.5">
|
||||
{demoUsers.slice(0, 4).map((u) => (
|
||||
<button
|
||||
key={u.email}
|
||||
onClick={() => quickLogin(u.email)}
|
||||
disabled={loading}
|
||||
className="group flex w-full items-center gap-3 rounded-xl border border-slate-200 bg-white px-3 py-2 text-left transition-colors hover:border-brand-300 hover:bg-brand-50"
|
||||
>
|
||||
<div
|
||||
className="flex h-8 w-8 items-center justify-center rounded-full text-[11px] font-bold text-white"
|
||||
style={{ background: u.avatar_color }}
|
||||
>
|
||||
{u.name.split(" ").map((p) => p[0]).slice(0, 2).join("")}
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="truncate text-sm font-bold text-slate-800">{u.name}</div>
|
||||
<div className="truncate text-[11px] text-slate-500">
|
||||
{u.role === "owner" ? "Dueño" : "Empleado"} · {u.email}
|
||||
</div>
|
||||
</div>
|
||||
<Wand2 className="h-4 w-4 text-slate-300 transition-colors group-hover:text-brand-500" />
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="mt-4 text-center text-xs text-slate-400">
|
||||
Demo · cualquier cuenta usa la contraseña <code className="font-mono font-semibold text-slate-600">demo1234</code>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user