root
316 lines
14 KiB
TypeScript
316 lines
14 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { motion } from "framer-motion";
|
|
|
|
type Booking = {
|
|
id: string;
|
|
customer: string;
|
|
service: string;
|
|
date: string;
|
|
time: string;
|
|
status: "confirmed" | "pending" | "cancelled";
|
|
};
|
|
|
|
type Lead = {
|
|
id: string;
|
|
name: string;
|
|
phone: string;
|
|
message: string;
|
|
date: string;
|
|
status: "new" | "contacted" | "qualified";
|
|
};
|
|
|
|
// Mock data for demo
|
|
const mockBookings: Booking[] = [
|
|
{ id: "1", customer: "María García", service: "Cita consulta", date: "2026-02-17", time: "10:00", status: "confirmed" },
|
|
{ id: "2", customer: "John Smith", service: "Treatment", date: "2026-02-17", time: "14:30", status: "pending" },
|
|
{ id: "3", customer: "Carlos Ruiz", service: "Reserva mesa", date: "2026-02-18", time: "20:00", status: "confirmed" },
|
|
{ id: "4", customer: "Ana López", service: "Cita estética", date: "2026-02-19", time: "11:00", status: "confirmed" },
|
|
{ id: "5", customer: "Pierre Dubois", service: "Booking", date: "2026-02-19", time: "16:00", status: "confirmed" },
|
|
];
|
|
|
|
const mockLeads: Lead[] = [
|
|
{ id: "1", name: "María García", phone: "+34 612 345 678", message: "Hola, me gustaría información sobre...", date: "2026-02-16", status: "new" },
|
|
{ id: "2", name: "John Smith", phone: "+44 7700 900123", message: "Do you have availability for next week?", date: "2026-02-16", status: "qualified" },
|
|
{ id: "3", name: "Carlos Ruiz", phone: "+34 654 987 321", message: "Quiero reservar para 4 personas", date: "2026-02-15", status: "contacted" },
|
|
];
|
|
|
|
export default function DashboardPage() {
|
|
const [isLoggedIn, setIsLoggedIn] = useState(false);
|
|
const [email, setEmail] = useState("");
|
|
const [password, setPassword] = useState("");
|
|
const [loginError, setLoginError] = useState("");
|
|
const [activeTab, setActiveTab] = useState<"bookings" | "leads" | "analytics">("bookings");
|
|
|
|
const handleLogin = () => {
|
|
if (email === "User" && password === "#SiteMenteUserpass2026") {
|
|
setIsLoggedIn(true);
|
|
setLoginError("");
|
|
} else {
|
|
setLoginError("Invalid credentials");
|
|
}
|
|
};
|
|
|
|
if (!isLoggedIn) {
|
|
return (
|
|
<div className="min-h-screen bg-[#1a1625] flex items-center justify-center p-4">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
className="w-full max-w-md"
|
|
>
|
|
<div className="text-center mb-8">
|
|
<div className="text-5xl mb-4">🏢</div>
|
|
<h1 className="text-3xl font-bold text-white mb-2">SiteMente</h1>
|
|
<p className="text-white/60">Client Dashboard</p>
|
|
</div>
|
|
|
|
<div className="bg-white/5 border border-white/10 rounded-2xl p-6">
|
|
<div className="space-y-4">
|
|
<div>
|
|
<label className="text-sm text-white/60 mb-1 block">Username</label>
|
|
<input
|
|
type="text"
|
|
value={email}
|
|
onChange={(e) => setEmail(e.target.value)}
|
|
placeholder="User"
|
|
className="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white placeholder:text-white/30"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="text-sm text-white/60 mb-1 block">Password</label>
|
|
<input
|
|
type="password"
|
|
value={password}
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
placeholder="••••••••"
|
|
className="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white placeholder:text-white/30"
|
|
/>
|
|
</div>
|
|
{loginError && (
|
|
<p className="text-red-400 text-sm">{loginError}</p>
|
|
)}
|
|
<button
|
|
onClick={handleLogin}
|
|
className="w-full py-3 bg-brand-pink rounded-lg font-semibold text-white hover:bg-[#ff7bc0] transition"
|
|
>
|
|
Login
|
|
</button>
|
|
<p className="text-center text-white/40 text-sm">
|
|
Ask SiteMente to create your dashboard
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const stats = {
|
|
totalBookings: mockBookings.length,
|
|
confirmed: mockBookings.filter(b => b.status === "confirmed").length,
|
|
pending: mockBookings.filter(b => b.status === "pending").length,
|
|
totalLeads: mockLeads.length,
|
|
newLeads: mockLeads.filter(l => l.status === "new").length,
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen bg-[#1a1625] text-white">
|
|
{/* Header */}
|
|
<header className="border-b border-white/10 bg-[#1a1625]/90 backdrop-blur sticky top-0 z-50">
|
|
<div className="mx-auto flex w-full max-w-6xl items-center justify-between px-6 py-4">
|
|
<div className="flex items-center gap-4">
|
|
<span className="text-2xl">🏢</span>
|
|
<span className="font-bold text-xl">SiteMente Dashboard</span>
|
|
</div>
|
|
<div className="flex items-center gap-4">
|
|
<span className="text-white/60">SiteMente Restaurant Demo</span>
|
|
<button
|
|
onClick={() => setIsLoggedIn(false)}
|
|
className="text-sm text-white/60 hover:text-white"
|
|
>
|
|
Logout
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main className="mx-auto max-w-6xl px-6 py-8">
|
|
{/* Stats */}
|
|
<div className="grid grid-cols-2 md:grid-cols-5 gap-4 mb-8">
|
|
<div className="bg-white/5 rounded-xl p-4 border border-white/10">
|
|
<p className="text-2xl font-bold text-brand-pink">{stats.totalBookings}</p>
|
|
<p className="text-sm text-white/60">Total Bookings</p>
|
|
</div>
|
|
<div className="bg-green-500/10 rounded-xl p-4 border border-green-500/30">
|
|
<p className="text-2xl font-bold text-green-400">{stats.confirmed}</p>
|
|
<p className="text-sm text-white/60">Confirmed</p>
|
|
</div>
|
|
<div className="bg-yellow-500/10 rounded-xl p-4 border border-yellow-500/30">
|
|
<p className="text-2xl font-bold text-yellow-400">{stats.pending}</p>
|
|
<p className="text-sm text-white/60">Pending</p>
|
|
</div>
|
|
<div className="bg-blue-500/10 rounded-xl p-4 border border-blue-500/30">
|
|
<p className="text-2xl font-bold text-blue-400">{stats.totalLeads}</p>
|
|
<p className="text-sm text-white/60">Total Leads</p>
|
|
</div>
|
|
<div className="bg-purple-500/10 rounded-xl p-4 border border-purple-500/30">
|
|
<p className="text-2xl font-bold text-purple-400">{stats.newLeads}</p>
|
|
<p className="text-sm text-white/60">New Leads</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Tabs */}
|
|
<div className="flex gap-2 mb-6">
|
|
<button
|
|
onClick={() => setActiveTab("bookings")}
|
|
className={`px-4 py-2 rounded-lg font-medium transition ${activeTab === "bookings" ? "bg-brand-pink" : "bg-white/10 hover:bg-white/20"}`}
|
|
>
|
|
📅 Bookings
|
|
</button>
|
|
<button
|
|
onClick={() => setActiveTab("leads")}
|
|
className={`px-4 py-2 rounded-lg font-medium transition ${activeTab === "leads" ? "bg-brand-pink" : "bg-white/10 hover:bg-white/20"}`}
|
|
>
|
|
📩 Leads
|
|
</button>
|
|
<button
|
|
onClick={() => setActiveTab("analytics")}
|
|
className={`px-4 py-2 rounded-lg font-medium transition ${activeTab === "analytics" ? "bg-brand-pink" : "bg-white/10 hover:bg-white/20"}`}
|
|
>
|
|
📈 Analytics
|
|
</button>
|
|
</div>
|
|
|
|
{/* Bookings Tab */}
|
|
{activeTab === "bookings" && (
|
|
<div className="bg-white/5 rounded-xl border border-white/10 overflow-hidden">
|
|
<table className="w-full">
|
|
<thead className="bg-white/5 border-b border-white/10">
|
|
<tr>
|
|
<th className="text-left px-4 py-3 text-sm font-medium text-white/60">Customer</th>
|
|
<th className="text-left px-4 py-3 text-sm font-medium text-white/60">Service</th>
|
|
<th className="text-left px-4 py-3 text-sm font-medium text-white/60">Date</th>
|
|
<th className="text-left px-4 py-3 text-sm font-medium text-white/60">Time</th>
|
|
<th className="text-left px-4 py-3 text-sm font-medium text-white/60">Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{mockBookings.map((booking) => (
|
|
<tr key={booking.id} className="border-b border-white/5">
|
|
<td className="px-4 py-3">{booking.customer}</td>
|
|
<td className="px-4 py-3">{booking.service}</td>
|
|
<td className="px-4 py-3">{booking.date}</td>
|
|
<td className="px-4 py-3">{booking.time}</td>
|
|
<td className="px-4 py-3">
|
|
<span className={`px-2 py-1 rounded-full text-xs ${
|
|
booking.status === "confirmed" ? "bg-green-500/20 text-green-400" :
|
|
booking.status === "pending" ? "bg-yellow-500/20 text-yellow-400" :
|
|
"bg-red-500/20 text-red-400"
|
|
}`}>
|
|
{booking.status}
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)}
|
|
|
|
{/* Leads Tab */}
|
|
{activeTab === "leads" && (
|
|
<div className="bg-white/5 rounded-xl border border-white/10 overflow-hidden">
|
|
<table className="w-full">
|
|
<thead className="bg-white/5 border-b border-white/10">
|
|
<tr>
|
|
<th className="text-left px-4 py-3 text-sm font-medium text-white/60">Name</th>
|
|
<th className="text-left px-4 py-3 text-sm font-medium text-white/60">Phone</th>
|
|
<th className="text-left px-4 py-3 text-sm font-medium text-white/60">Message</th>
|
|
<th className="text-left px-4 py-3 text-sm font-medium text-white/60">Date</th>
|
|
<th className="text-left px-4 py-3 text-sm font-medium text-white/60">Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{mockLeads.map((lead) => (
|
|
<tr key={lead.id} className="border-b border-white/5">
|
|
<td className="px-4 py-3">{lead.name}</td>
|
|
<td className="px-4 py-3">
|
|
<a href={`tel:${lead.phone}`} className="text-brand-pink hover:underline">{lead.phone}</a>
|
|
</td>
|
|
<td className="px-4 py-3 text-white/70 text-sm">{lead.message}</td>
|
|
<td className="px-4 py-3">{lead.date}</td>
|
|
<td className="px-4 py-3">
|
|
<span className={`px-2 py-1 rounded-full text-xs ${
|
|
lead.status === "new" ? "bg-blue-500/20 text-blue-400" :
|
|
lead.status === "qualified" ? "bg-green-500/20 text-green-400" :
|
|
"bg-yellow-500/20 text-yellow-400"
|
|
}`}>
|
|
{lead.status}
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)}
|
|
|
|
{/* Analytics Tab */}
|
|
{activeTab === "analytics" && (
|
|
<div className="grid md:grid-cols-2 gap-6">
|
|
<div className="bg-white/5 rounded-xl border border-white/10 p-6">
|
|
<h3 className="text-lg font-semibold mb-4">Bookings This Week</h3>
|
|
<div className="flex items-end gap-2 h-40">
|
|
{[3, 5, 2, 4, 6, 3, 5].map((h, i) => (
|
|
<div key={i} className="flex-1 bg-brand-pink/50 rounded-t" style={{ height: `${h * 14}%` }}></div>
|
|
))}
|
|
</div>
|
|
<div className="flex justify-between mt-2 text-xs text-white/40">
|
|
<span>Mon</span><span>Tue</span><span>Wed</span><span>Thu</span><span>Fri</span><span>Sat</span><span>Sun</span>
|
|
</div>
|
|
</div>
|
|
<div className="bg-white/5 rounded-xl border border-white/10 p-6">
|
|
<h3 className="text-lg font-semibold mb-4">Lead Sources</h3>
|
|
<div className="space-y-3">
|
|
<div>
|
|
<div className="flex justify-between text-sm mb-1">
|
|
<span>🌐 Website</span>
|
|
<span className="text-brand-pink">65%</span>
|
|
</div>
|
|
<div className="h-2 bg-white/10 rounded-full overflow-hidden">
|
|
<div className="h-full bg-brand-pink w-[65%]"></div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div className="flex justify-between text-sm mb-1">
|
|
<span>💬 WhatsApp</span>
|
|
<span className="text-green-400">25%</span>
|
|
</div>
|
|
<div className="h-2 bg-white/10 rounded-full overflow-hidden">
|
|
<div className="h-full bg-green-500 w-[25%]"></div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div className="flex justify-between text-sm mb-1">
|
|
<span>📞 Phone</span>
|
|
<span className="text-blue-400">10%</span>
|
|
</div>
|
|
<div className="h-2 bg-white/10 rounded-full overflow-hidden">
|
|
<div className="h-full bg-blue-500 w-[10%]"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<p className="text-center text-white/40 text-sm mt-8">
|
|
Powered by SiteMente AI • Your AI Employee working 24/7
|
|
</p>
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|