Add donation donor chart (#82)

* add donor chart

* fix: remove 'use client from files as that's only for Next.js

* add donor chart

* add donor chart

* fix: remove 'use client from files as that's only for Next.js

* feat: add admin guard for chart route

* fix: example .env, proxy addr change, stripe API version

* fix: update stripe

---------

Co-authored-by: thaninbew <kongkiatsophon.t@northeastern.edu>
Co-authored-by: Thanin Kongkiatsophon <108406347+thaninbew@users.noreply.github.com>

Author: ItsEricSun

apps/backend/src/donations/donations.controller.ts

@@ -204,7 +204,9 @@ export class DonationsController {
     status: 401,
     description: 'unauthorized',
   })
+  @UseInterceptors(CurrentUserInterceptor)
   async findAll(
+    @Req() req: any,
     @Query('page', new ParseIntPipe({ optional: true })) page = 1,
     @Query('perPage', new ParseIntPipe({ optional: true }))
     perPage = 20,
@@ -223,6 +225,13 @@ export class DonationsController {
     perPage: number;
     totalPages: number;
   }> {
+    if (
+      req.user.status !== Status.ADMIN &&
+      req.user.status !== Status.STANDARD
+    ) {
+      throw new UnauthorizedException('Admin access required');
+    }
+
     const filters: PaginationFilters = {
       donationType,
       status,

apps/backend/src/payments/payments.module.ts

@@ -13,7 +13,7 @@ import { DonationsModule } from '../donations/donations.module';
       provide: 'STRIPE_CLIENT',
       useFactory: (configService: ConfigService) => {
         return new Stripe(configService.get<string>('STRIPE_SECRET_KEY'), {
-          apiVersion: '2025-12-15.clover',
+          apiVersion: '2026-01-28.clover',
         });
       },
       inject: [ConfigService],

apps/frontend/proxy.conf.json

@@ -1,6 +1,6 @@
 {
   "/api": {
-    "target": "http://localhost:3001",
+    "target": "http://localhost:3000",
     "secure": false
   }
 }

apps/frontend/src/api/apiClient.ts

@@ -111,6 +111,37 @@ export class ApiClient {
     }
   }
 
+  public async getDonations(params?: {
+    page?: number;
+    perPage?: number;
+    donationType?: 'one_time' | 'recurring';
+    status?: 'pending' | 'succeeded' | 'failed' | 'cancelled';
+  }): Promise<{
+    rows: Array<{
+      id: number;
+      firstName: string;
+      lastName: string;
+      email: string;
+      amount: number;
+      donationType: 'one_time' | 'recurring';
+      status: string;
+      createdAt: string;
+    }>;
+    total: number;
+    page: number;
+    perPage: number;
+    totalPages: number;
+  }> {
+    try {
+      const res = await this.axiosInstance.get('/api/donations', {
+        params,
+      });
+      return res.data;
+    } catch (err: unknown) {
+      this.handleAxiosError(err, 'Failed to fetch donations');
+    }
+  }
+
   private async get(path: string): Promise<unknown> {
     return this.axiosInstance.get(path).then((response) => response.data);
   }

apps/frontend/src/app.tsx

@@ -9,8 +9,10 @@ import { DonationForm } from '@containers/donations/DonationForm';
 import { ShadcnExample } from '@components/ShadcnExample';
 import { AuthProvider } from '@components/AuthProvider';
 import { ProtectedRoute } from '@components/ProtectedRoute';
+import { AdminRoute } from '@components/AdminRoute';
 import { LoginPage } from '@containers/auth/LoginPage';
 import { DashboardPage } from '@containers/dashboard/DashboardPage';
+import { DonorStatsChart } from '@components/DonorStatsChart';
 
 const router = createBrowserRouter([
   {
@@ -40,6 +42,16 @@ const router = createBrowserRouter([
     path: '/shadcn-example',
     element: <ShadcnExample />,
   },
+  {
+    path: '/chart',
+    element: <AdminRoute />,
+    children: [
+      {
+        path: '',
+        element: <DonorStatsChart />,
+      },
+    ],
+  },
   {
     path: '/donate',
     element: (

apps/frontend/src/components/AdminRoute.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Navigate, Outlet } from 'react-router-dom';
+import { useAuth } from './AuthProvider';
+
+export const AdminRoute: React.FC = () => {
+  const { isAuthenticated, isLoading, user } = useAuth();
+
+  if (isLoading) {
+    return <div>Loading authentication...</div>;
+  }
+
+  if (!isAuthenticated) {
+    return <Navigate to="/login" replace />;
+  }
+
+  if (user?.status !== 'ADMIN' && user?.status !== 'STANDARD') {
+    console.log('[AdminRoute] blocked, user:', user);
+    return <Navigate to="/dashboard" replace />;
+  }
+
+  return <Outlet />;
+};