feat(backoffice): hackathon dashboard integration

apps/backoffice/src/app/(protected)/hackathon-dashboard/page.tsx

@@ -1,7 +1,35 @@
 import { BackofficeWrapper } from '@imphnen-frontend-service/ui/organisms';
 import { FC, ReactElement } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import {
+  getAdminUsers,
+  getAdminTeams,
+  getAdminSubmissions,
+} from '@imphnen-frontend-service/service';
 
 export const HackathonDashboardPage: FC = (): ReactElement => {
+  // Fetch total participants
+  const { data: usersData } = useQuery({
+    queryKey: ['admin-users-count'],
+    queryFn: () => getAdminUsers({ page: 1, limit: 1 }),
+  });
+
+  // Fetch total teams
+  const { data: teamsData } = useQuery({
+    queryKey: ['admin-teams-count'],
+    queryFn: () => getAdminTeams({ page: 1, limit: 1 }),
+  });
+
+  // Fetch total submissions
+  const { data: submissionsData } = useQuery({
+    queryKey: ['admin-submissions-count'],
+    queryFn: () => getAdminSubmissions({ page: 1, limit: 1 }),
+  });
+
+  const totalParticipants = usersData?.meta?.total_data ?? 0;
+  const totalTeams = teamsData?.meta?.total_data ?? 0;
+  const totalSubmissions = submissionsData?.meta?.total_data ?? 0;
+
   return (
     <BackofficeWrapper title="IMPHNEN x Kolosal.ai Hackathon 2025">
       <h1 className="mb-8 text-p1 font-semibold text-neutral-700">Dashboard</h1>
@@ -10,18 +38,22 @@ export const HackathonDashboardPage: FC = (): ReactElement => {
         {/* Participant */}
         <div className="bg-white px-6 py-4 rounded-md shadow">
           <h3 className="text-primary-500 text-p2 font-semibold mb-2.5">
-            1261
+            {totalParticipants}
           </h3>
           <p className="text-neutral-400 text-p3">Total Participants</p>
         </div>
         {/* Team */}
         <div className="bg-white px-6 py-4 rounded-md shadow">
-          <h3 className="text-primary-500 text-p2 font-semibold mb-2.5">206</h3>
+          <h3 className="text-primary-500 text-p2 font-semibold mb-2.5">
+            {totalTeams}
+          </h3>
           <p className="text-neutral-400 text-p3">Total Teams</p>
         </div>
         {/* Project Submitted */}
         <div className="bg-white px-6 py-4 rounded-md shadow">
-          <h3 className="text-primary-500 text-p2 font-semibold mb-2.5">0</h3>
+          <h3 className="text-primary-500 text-p2 font-semibold mb-2.5">
+            {totalSubmissions}
+          </h3>
           <p className="text-neutral-400 text-p3">Total Project Submitted</p>
         </div>
       </section>