feat: donation tracker

apps/frontend/src/api/apiClient.ts

@@ -23,6 +23,37 @@ export type DonationStatsResponse = {
   monthToDate: number;
 };
 
+export type DonationListRow = {
+  id: number;
+  firstName: string;
+  lastName: string;
+  email: string;
+  amount: number;
+  donationType: 'one_time' | 'recurring';
+  recurringInterval?:
+    | 'weekly'
+    | 'monthly'
+    | 'yearly'
+    | 'bimonthly'
+    | 'quarterly'
+    | 'annually';
+  dedicationMessage?: string;
+  showDedicationPublicly: boolean;
+  status: 'pending' | 'succeeded' | 'failed' | 'cancelled';
+  createdAt: string;
+  updatedAt: string;
+  transactionId?: string;
+  isAnonymous: boolean;
+};
+
+export type DonationListResponse = {
+  rows: DonationListRow[];
+  total: number;
+  page: number;
+  perPage: number;
+  totalPages: number;
+};
+
 export type ActiveGoalResponse = {
   goal: {
     id: number;
@@ -222,22 +253,7 @@ export class ApiClient {
     status?: 'pending' | 'succeeded' | 'failed' | 'cancelled';
     startDate?: string;
     endDate?: string;
-  }): 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;
-  }> {
+  }): Promise<DonationListResponse> {
     try {
       const res = await this.axiosInstance.get('/api/donations', {
         params,
@@ -257,6 +273,17 @@ export class ApiClient {
     }
   }
 
+  public async exportDonationsCsv(): Promise<Blob> {
+    try {
+      const res = await this.axiosInstance.get('/api/donations/export', {
+        responseType: 'blob',
+      });
+      return res.data as Blob;
+    } catch (err: unknown) {
+      this.handleAxiosError(err, 'Failed to export donations');
+    }
+  }
+
   public async updateUserStatus(
     id: number,
     status: 'ADMIN' | 'STANDARD',

apps/frontend/src/app.tsx

@@ -16,6 +16,7 @@ import { ConfirmRegisteredPage } from '@containers/auth/ConfirmRegisteredPage';
 import { DashboardPage } from '@containers/dashboard/DashboardPage';
 import { DonorStatsChart } from '@components/DonorStatsChart';
 import DashboardOverview from '@containers/dashboard/sidebar/DashboardOverview';
+import DonationTrackerPage from '@containers/dashboard/donations/DonationTrackerPage';
 import { EmailEditor } from './components/EmailComms/EmailEditorOverviewPage';
 import { AdminGrowingGoalTester } from '@containers/dashboard/AdminGrowingGoalTester';
 import OverviewPage from '@containers/dashboard/OverviewPage';
@@ -49,6 +50,16 @@ const router = createBrowserRouter([
             path: '',
             element: <OverviewPage />,
           },
+          {
+            path: 'donations',
+            element: <ProtectedRoute />,
+            children: [
+              {
+                path: '',
+                element: <DonationTrackerPage />,
+              },
+            ],
+          },
           {
             path: 'email',
             element: <EmailEditor />,

apps/frontend/src/components/ui/button.tsx

@@ -42,46 +42,56 @@ const buttonVariants = cva(
     },
   },
 );
-function Button({
-  className,
-  variant = 'default',
-  size = 'default',
-  asChild = false,
-  withShareIcon = false,
-  children,
-  ...props
-}: React.ComponentProps<'button'> &
-  VariantProps<typeof buttonVariants> & {
-    asChild?: boolean;
-    withShareIcon?: boolean;
-  }) {
-  const Comp = asChild ? Slot : 'button';
-  return (
-    <Comp
-      data-slot="button"
-      data-variant={variant}
-      data-size={size}
-      className={cn(buttonVariants({ variant, size, className }))}
-      {...props}
-    >
-      {children}
-      {withShareIcon && (
-        <svg
-          width="20"
-          height="20"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          strokeWidth="2"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        >
-          <path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8" />
-          <polyline points="16 6 12 2 8 6" />
-          <line x1="12" y1="2" x2="12" y2="15" />
-        </svg>
-      )}
-    </Comp>
-  );
-}
+const Button = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<'button'> &
+    VariantProps<typeof buttonVariants> & {
+      asChild?: boolean;
+      withShareIcon?: boolean;
+    }
+>(
+  (
+    {
+      className,
+      variant = 'default',
+      size = 'default',
+      asChild = false,
+      withShareIcon = false,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const Comp = asChild ? Slot : 'button';
+    return (
+      <Comp
+        ref={ref}
+        data-slot="button"
+        data-variant={variant}
+        data-size={size}
+        className={cn(buttonVariants({ variant, size, className }))}
+        {...props}
+      >
+        {children}
+        {withShareIcon && (
+          <svg
+            width="20"
+            height="20"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8" />
+            <polyline points="16 6 12 2 8 6" />
+            <line x1="12" y1="2" x2="12" y2="15" />
+          </svg>
+        )}
+      </Comp>
+    );
+  },
+);
+Button.displayName = 'Button';
 export { Button, buttonVariants };

apps/frontend/src/containers/dashboard/UserManagement.tsx

@@ -72,6 +72,7 @@ export const UserManagement: React.FC = () => {
   const [denyingUser, setDenyingUser] = useState<CombinedUser | null>(null);
   const [verifyingUser, setVerifyingUser] = useState<CombinedUser | null>(null);
   const [modalPosition, setModalPosition] = useState<
+    // eslint-disable-next-line no-restricted-globals
     { top: number; right: number } | undefined
   >(undefined);
   const [isUpdatingRole, setIsUpdatingRole] = useState(false);