feat: initial SPA frontend for network app
This commit is contained in:
151
src/pages/DashboardPage.tsx
Normal file
151
src/pages/DashboardPage.tsx
Normal file
@@ -0,0 +1,151 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { api } from '@/lib/api';
|
||||
import type { Client, Event, Email } from '@/types';
|
||||
import { Users, Calendar, Mail, Plus, ArrowRight, Gift, Heart, Clock } from 'lucide-react';
|
||||
import { formatDate, getDaysUntil } from '@/lib/utils';
|
||||
import { EventTypeBadge } from '@/components/Badge';
|
||||
import { PageLoader } from '@/components/LoadingSpinner';
|
||||
|
||||
export default function DashboardPage() {
|
||||
const [clients, setClients] = useState<Client[]>([]);
|
||||
const [events, setEvents] = useState<Event[]>([]);
|
||||
const [emails, setEmails] = useState<Email[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
Promise.all([
|
||||
api.getClients().catch(() => []),
|
||||
api.getEvents({ upcoming: 7 }).catch(() => []),
|
||||
api.getEmails({ status: 'draft' }).catch(() => []),
|
||||
]).then(([c, e, em]) => {
|
||||
setClients(c);
|
||||
setEvents(e);
|
||||
setEmails(em);
|
||||
setLoading(false);
|
||||
});
|
||||
}, []);
|
||||
|
||||
if (loading) return <PageLoader />;
|
||||
|
||||
const stats = [
|
||||
{ label: 'Total Clients', value: clients.length, icon: Users, color: 'bg-blue-50 text-blue-600', link: '/clients' },
|
||||
{ label: 'Upcoming Events', value: events.length, icon: Calendar, color: 'bg-emerald-50 text-emerald-600', link: '/events' },
|
||||
{ label: 'Pending Drafts', value: emails.length, icon: Mail, color: 'bg-amber-50 text-amber-600', link: '/emails' },
|
||||
];
|
||||
|
||||
const eventIcon = (type: string) => {
|
||||
if (type === 'birthday') return <Gift className="w-4 h-4 text-pink-500" />;
|
||||
if (type === 'anniversary') return <Heart className="w-4 h-4 text-purple-500" />;
|
||||
return <Clock className="w-4 h-4 text-blue-500" />;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="max-w-6xl mx-auto space-y-6 animate-fade-in">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-slate-900">Dashboard</h1>
|
||||
<p className="text-slate-500 text-sm mt-1">Welcome back. Here's your overview.</p>
|
||||
</div>
|
||||
<Link
|
||||
to="/clients"
|
||||
state={{ openCreate: true }}
|
||||
className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700 transition-colors"
|
||||
>
|
||||
<Plus className="w-4 h-4" />
|
||||
Add Client
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Stats */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
|
||||
{stats.map((stat) => (
|
||||
<Link
|
||||
key={stat.label}
|
||||
to={stat.link}
|
||||
className="bg-white border border-slate-200 rounded-xl p-5 hover:shadow-md transition-shadow"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className={`w-10 h-10 rounded-lg flex items-center justify-center ${stat.color}`}>
|
||||
<stat.icon className="w-5 h-5" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-2xl font-bold text-slate-900">{stat.value}</p>
|
||||
<p className="text-sm text-slate-500">{stat.label}</p>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
{/* Upcoming Events */}
|
||||
<div className="bg-white border border-slate-200 rounded-xl">
|
||||
<div className="flex items-center justify-between px-5 py-4 border-b border-slate-100">
|
||||
<h2 className="font-semibold text-slate-900">Upcoming Events</h2>
|
||||
<Link to="/events" className="text-sm text-blue-600 hover:text-blue-700 flex items-center gap-1">
|
||||
View all <ArrowRight className="w-3.5 h-3.5" />
|
||||
</Link>
|
||||
</div>
|
||||
<div className="divide-y divide-slate-100">
|
||||
{events.length === 0 ? (
|
||||
<p className="px-5 py-8 text-center text-sm text-slate-400">No upcoming events</p>
|
||||
) : (
|
||||
events.slice(0, 5).map((event) => (
|
||||
<div key={event.id} className="flex items-center gap-3 px-5 py-3">
|
||||
{eventIcon(event.type)}
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-medium text-slate-900 truncate">{event.title}</p>
|
||||
<p className="text-xs text-slate-500">{formatDate(event.date)}</p>
|
||||
</div>
|
||||
<EventTypeBadge type={event.type} />
|
||||
<span className="text-xs text-slate-400 whitespace-nowrap">
|
||||
{getDaysUntil(event.date)}d
|
||||
</span>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Recent Clients */}
|
||||
<div className="bg-white border border-slate-200 rounded-xl">
|
||||
<div className="flex items-center justify-between px-5 py-4 border-b border-slate-100">
|
||||
<h2 className="font-semibold text-slate-900">Recent Clients</h2>
|
||||
<Link to="/clients" className="text-sm text-blue-600 hover:text-blue-700 flex items-center gap-1">
|
||||
View all <ArrowRight className="w-3.5 h-3.5" />
|
||||
</Link>
|
||||
</div>
|
||||
<div className="divide-y divide-slate-100">
|
||||
{clients.length === 0 ? (
|
||||
<p className="px-5 py-8 text-center text-sm text-slate-400">No clients yet</p>
|
||||
) : (
|
||||
[...clients]
|
||||
.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime())
|
||||
.slice(0, 5)
|
||||
.map((client) => (
|
||||
<Link
|
||||
key={client.id}
|
||||
to={`/clients/${client.id}`}
|
||||
className="flex items-center gap-3 px-5 py-3 hover:bg-slate-50 transition-colors"
|
||||
>
|
||||
<div className="w-9 h-9 bg-blue-100 text-blue-700 rounded-full flex items-center justify-center text-sm font-semibold flex-shrink-0">
|
||||
{client.firstName[0]}{client.lastName[0]}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-medium text-slate-900 truncate">
|
||||
{client.firstName} {client.lastName}
|
||||
</p>
|
||||
<p className="text-xs text-slate-500 truncate">
|
||||
{client.company || client.email || 'No details'}
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user