101 lines
3.0 KiB
TypeScript
101 lines
3.0 KiB
TypeScript
'use client';
|
|
|
|
import { useQuery } from '@tanstack/react-query';
|
|
import { api } from '@/lib/api';
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { Skeleton } from '@/components/ui/skeleton';
|
|
import { Users, Wifi, DollarSign, AlertTriangle } from 'lucide-react';
|
|
|
|
interface DashboardSummary {
|
|
totalClients: number;
|
|
activeSubscribers: number;
|
|
todayCollections: number;
|
|
overdueInvoices: number;
|
|
}
|
|
|
|
const kpiCards = [
|
|
{
|
|
key: 'totalClients' as const,
|
|
label: 'Total Clients',
|
|
icon: Users,
|
|
color: '#0891B2',
|
|
format: (v: number) => v.toLocaleString(),
|
|
},
|
|
{
|
|
key: 'activeSubscribers' as const,
|
|
label: 'Active Subscribers',
|
|
icon: Wifi,
|
|
color: '#059669',
|
|
format: (v: number) => v.toLocaleString(),
|
|
},
|
|
{
|
|
key: 'todayCollections' as const,
|
|
label: "Today's Collections",
|
|
icon: DollarSign,
|
|
color: '#7C3AED',
|
|
format: (v: number) => '₱' + v.toLocaleString('en-PH', { minimumFractionDigits: 2 }),
|
|
},
|
|
{
|
|
key: 'overdueInvoices' as const,
|
|
label: 'Overdue Invoices',
|
|
icon: AlertTriangle,
|
|
color: '#DC2626',
|
|
format: (v: number) => v.toLocaleString(),
|
|
},
|
|
];
|
|
|
|
export default function DashboardPage() {
|
|
const { data, isLoading, error } = useQuery<DashboardSummary>({
|
|
queryKey: ['dashboard', 'summary'],
|
|
queryFn: async () => {
|
|
const res = await api.get('/api/v1/dashboard/summary');
|
|
return res.data;
|
|
},
|
|
});
|
|
|
|
return (
|
|
<div>
|
|
<div className="mb-6">
|
|
<h1 className="text-2xl font-bold text-slate-800">Dashboard</h1>
|
|
<p className="text-slate-500 text-sm mt-1">Overview of your ISP operations</p>
|
|
</div>
|
|
|
|
{error && (
|
|
<div className="mb-4 p-3 bg-red-50 border border-red-200 rounded-lg text-red-600 text-sm">
|
|
Failed to load dashboard data. The API endpoint may not be available yet.
|
|
</div>
|
|
)}
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-4">
|
|
{kpiCards.map((card) => {
|
|
const Icon = card.icon;
|
|
return (
|
|
<Card key={card.key} className="border shadow-sm">
|
|
<CardHeader className="flex flex-row items-center justify-between pb-2">
|
|
<CardTitle className="text-sm font-medium text-slate-500">
|
|
{card.label}
|
|
</CardTitle>
|
|
<div
|
|
className="w-9 h-9 rounded-lg flex items-center justify-center"
|
|
style={{ backgroundColor: card.color + '1A' }}
|
|
>
|
|
<Icon size={18} style={{ color: card.color }} />
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{isLoading ? (
|
|
<Skeleton className="h-8 w-24" />
|
|
) : (
|
|
<p className="text-2xl font-bold text-slate-800">
|
|
{data ? card.format(data[card.key]) : '—'}
|
|
</p>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|