feat: implement dynamic admin dashboard with API data

apps/admin/src/App.tsx

@@ -1,21 +1,115 @@
 import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
 
+import { useEffect, useState } from 'react';
+
+interface DashboardData {
+    stats: {
+        totalUsers: number;
+        activeEnrollments: number;
+        completedEnrollments: number;
+        totalTracks: number;
+    } | null;
+    enrollments: any[];
+}
+
 function Dashboard() {
+    const [data, setData] = useState<DashboardData>({ stats: null, enrollments: [] });
+    const [loading, setLoading] = useState(true);
+
+    useEffect(() => {
+        const fetchData = async () => {
+            try {
+                const API_URL = import.meta.env.VITE_API_URL || 'http://localhost:3001';
+
+                const [statsRes, enrollmentsRes] = await Promise.all([
+                    fetch(`${API_URL}/v1/admin/stats`),
+                    fetch(`${API_URL}/v1/admin/enrollments`)
+                ]);
+
+                const stats = await statsRes.json();
+                const enrollments = await enrollmentsRes.json();
+
+                setData({ stats, enrollments });
+            } catch (error) {
+                console.error("Error fetching dashboard data", error);
+            } finally {
+                setLoading(false);
+            }
+        };
+
+        fetchData();
+    }, []);
+
+    if (loading) return <div className="p-8">Loading dashboard...</div>;
+
     return (
         <div className="p-8">
-            <h1 className="text-3xl font-bold mb-4">Admin Dashboard</h1>
-            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-                <div className="bg-white p-6 rounded-lg shadow-sm border">
-                    <h2 className="text-xl font-semibold mb-2">Users</h2>
-                    <p className="text-gray-600">Manage student enrollments</p>
+            <h1 className="text-3xl font-bold mb-8 text-slate-800">Admin Dashboard</h1>
+
+            {/* Stats Overview */}
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
+                <div className="bg-white p-6 rounded-xl shadow-sm border border-slate-100 flex flex-col justify-center items-center">
+                    <h2 className="text-sm font-semibold text-slate-500 uppercase tracking-wider mb-1">Total Users</h2>
+                    <p className="text-4xl font-bold text-slate-900">{data.stats?.totalUsers || 0}</p>
+                </div>
+                <div className="bg-white p-6 rounded-xl shadow-sm border border-slate-100 flex flex-col justify-center items-center">
+                    <h2 className="text-sm font-semibold text-slate-500 uppercase tracking-wider mb-1">Active Enrollments</h2>
+                    <p className="text-4xl font-bold text-blue-600">{data.stats?.activeEnrollments || 0}</p>
                 </div>
-                <div className="bg-white p-6 rounded-lg shadow-sm border">
-                    <h2 className="text-xl font-semibold mb-2">Tracks</h2>
-                    <p className="text-gray-600">Edit learning content</p>
+                <div className="bg-white p-6 rounded-xl shadow-sm border border-slate-100 flex flex-col justify-center items-center">
+                    <h2 className="text-sm font-semibold text-slate-500 uppercase tracking-wider mb-1">Completed</h2>
+                    <p className="text-4xl font-bold text-green-600">{data.stats?.completedEnrollments || 0}</p>
+                </div>
+                <div className="bg-white p-6 rounded-xl shadow-sm border border-slate-100 flex flex-col justify-center items-center">
+                    <h2 className="text-sm font-semibold text-slate-500 uppercase tracking-wider mb-1">Tracks</h2>
+                    <p className="text-4xl font-bold text-purple-600">{data.stats?.totalTracks || 0}</p>
+                </div>
+            </div>
+
+            {/* Recent Enrollments Table */}
+            <div className="bg-white rounded-xl shadow-sm border border-slate-100 overflow-hidden">
+                <div className="px-6 py-4 border-b border-slate-100">
+                    <h2 className="text-lg font-semibold text-slate-800">Recent Enrollments</h2>
                 </div>
-                <div className="bg-white p-6 rounded-lg shadow-sm border">
-                    <h2 className="text-xl font-semibold mb-2">Analytics</h2>
-                    <p className="text-gray-600">View platform metrics</p>
+                <div className="overflow-x-auto">
+                    <table className="w-full text-sm text-left">
+                        <thead className="text-xs text-slate-500 bg-slate-50 uppercase">
+                            <tr>
+                                <th className="px-6 py-3">User (WhatsApp)</th>
+                                <th className="px-6 py-3">Track</th>
+                                <th className="px-6 py-3">Status</th>
+                                <th className="px-6 py-3">Progress</th>
+                                <th className="px-6 py-3">Date</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {data.enrollments.map((env: any) => (
+                                <tr key={env.id} className="border-b border-slate-50 hover:bg-slate-50/50">
+                                    <td className="px-6 py-4 font-medium text-slate-900">{env.user?.whatsappId || 'Unknown'}</td>
+                                    <td className="px-6 py-4">{env.track?.title || 'Unknown Track'}</td>
+                                    <td className="px-6 py-4">
+                                        <span className={`px-2.5 py-1 py-0.5 rounded-full text-xs font-medium
+                                            ${env.status === 'ACTIVE' ? 'bg-blue-100 text-blue-800' :
+                                                env.status === 'COMPLETED' ? 'bg-green-100 text-green-800' :
+                                                    'bg-slate-100 text-slate-800'}`}>
+                                            {env.status}
+                                        </span>
+                                    </td>
+                                    <td className="px-6 py-4">Day {env.currentDay}</td>
+                                    <td className="px-6 py-4 text-slate-500">
+                                        {new Date(env.startedAt).toLocaleDateString()}
+                                    </td>
+                                </tr>
+                            ))}
+                            {data.enrollments.length === 0 && (
+                                <tr>
+                                    <td colSpan={5} className="px-6 py-8 text-center text-slate-500">
+                                        No enrollments found.
+                                    </td>
+                                </tr>
+                            )}
+                        </tbody>
+                    </table>
                 </div>
             </div>
         </div>

apps/admin/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

apps/api/src/index.ts

@@ -11,6 +11,9 @@ server.register(cors);
 import { whatsappRoutes } from './routes/whatsapp';
 server.register(whatsappRoutes, { prefix: '/v1/whatsapp' });
 
+import { adminRoutes } from './routes/admin';
+server.register(adminRoutes, { prefix: '/v1/admin' });
+
 server.get('/health', async () => {
     return { status: 'ok', timestamp: new Date().toISOString() };
 });

apps/api/src/routes/admin.ts

@@ -0,0 +1,43 @@
+import { FastifyInstance } from 'fastify';
+import { PrismaClient } from '@prisma/client';
+
+const prisma = new PrismaClient();
+
+export async function adminRoutes(fastify: FastifyInstance) {
+    // 1. Get Dashboard Stats
+    fastify.get('/stats', async () => {
+        const totalUsers = await prisma.user.count();
+        const activeEnrollments = await prisma.enrollment.count({ where: { status: 'ACTIVE' } });
+        const completedEnrollments = await prisma.enrollment.count({ where: { status: 'COMPLETED' } });
+        const totalTracks = await prisma.track.count();
+
+        return {
+            totalUsers,
+            activeEnrollments,
+            completedEnrollments,
+            totalTracks
+        };
+    });
+
+    // 2. Get Users List
+    fastify.get('/users', async () => {
+        const users = await prisma.user.findMany({
+            orderBy: { createdAt: 'desc' },
+            take: 50,
+        });
+        return users;
+    });
+
+    // 3. Get Recent Enrollments
+    fastify.get('/enrollments', async () => {
+        const enrollments = await prisma.enrollment.findMany({
+            include: {
+                user: true,
+                track: true,
+            },
+            orderBy: { startedAt: 'desc' },
+            take: 50,
+        });
+        return enrollments;
+    });
+}