feat: Next.js 14 web admin scaffold — auth, sidebar, dashboard, placeholders

2026-03-25 08:23:25 +08:00
parent dc01eac449
commit 310a9453de
37 changed files with 2755 additions and 292 deletions
--- a/app/(app)/dashboard/page.tsx
+++ b/app/(app)/dashboard/page.tsx
@@ -0,0 +1,100 @@
+'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>
+  );
+}