Implement organization statistics fetching and display in GraphicsPage

Author: aahnik

app/[orgId]/page.tsx

@@ -1,81 +1,72 @@
 "use client";
-import Charts from "@/components/statstable";
+import { useContext } from "react";
+import { AuthContext } from "@/contexts/auth-context";
+import { useOrgStats } from "@/hooks/use-org-stats";
+import { useParams } from "next/navigation";
+import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert";
+import { AlertCircle } from "lucide-react";
+import { Skeleton } from "@/components/ui/skeleton";
+import StatCard from "@/components/stat-card";
 
-interface ChartData {
-  submissions: {
-    total: number;
-    weeklyData: Array<{
-      date: string;
-      steps: number;
-    }>;
-    weeklyTotal: number;
-  };
-  upcomingContest: {
-    count: number;
-    variability: number;
-    weeklyData: Array<{
-      date: string;
-      resting: number;
-    }>;
-  };
-  contestDetails: {
-    currentYear: {
-      year: string;
-      contestsPerDay: number;
-    };
-    previousYear: {
-      year: string;
-      contestsPerDay: number;
-    };
-  };
+function StatsLoadingSkeleton() {
+  return (
+    <div className="container mx-auto max-w-5xl py-6">
+      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+        {[1, 2, 3, 4].map((i) => (
+          <div key={i} className="p-4 border rounded-lg">
+            <Skeleton className="h-4 w-24 mb-2" />
+            <Skeleton className="h-8 w-16" />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
 }
 
 export default function GraphicsPage() {
-  const chartData: ChartData = {
-    submissions: {
-      total: 12584,
-      weeklyData: [
-        { date: "2024-01-01", steps: 2000 },
-        { date: "2024-01-02", steps: 2100 },
-        { date: "2024-01-03", steps: 2200 },
-        { date: "2024-01-04", steps: 2300 },
-        { date: "2024-01-05", steps: 2400 },
-        { date: "2024-01-06", steps: 2500 },
-        { date: "2024-01-07", steps: 2600 },
-        // ... more data
-      ],
-      weeklyTotal: 5305,
-    },
-    upcomingContest: {
-      count: 62,
-      variability: 35,
-      weeklyData: [
-        { date: "2024-01-01", resting: 62 },
-        { date: "2024-01-02", resting: 63 },
-        { date: "2024-01-03", resting: 64 },
-        { date: "2024-01-04", resting: 65 },
-        { date: "2024-01-05", resting: 66 },
-        { date: "2024-01-06", resting: 67 },
-        { date: "2024-01-07", resting: 68 },
+  const { user } = useContext(AuthContext);
+  const params = useParams();
+  const orgId = params.orgId as string;
+
+  const currentOrg = user?.orgs.find((org) => org.nameId === orgId);
+  const { stats, loading, error } = useOrgStats(orgId, currentOrg?.role);
 
-        // ... more data
-      ],
-    },
-    contestDetails: {
-      currentYear: {
-        year: "2024",
-        contestsPerDay: 12453,
-      },
-      previousYear: {
-        year: "2023",
-        contestsPerDay: 10103,
-      },
-    },
-  };
+  if (loading) return <StatsLoadingSkeleton />;
+  if (error)
+    return (
+      <Alert variant="destructive" className="max-w-lg mx-auto my-4">
+        <AlertCircle className="h-4 w-4" />
+        <AlertTitle>Error</AlertTitle>
+        <AlertDescription>{error}</AlertDescription>
+      </Alert>
+    );
 
   return (
-    <div>
-      <Charts data={chartData} />
+    <div className="container mx-auto max-w-5xl py-6">
+      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+        <StatCard
+          heading="Total Contests"
+          value={stats.totalContests}
+          unit="contests"
+        />
+        <StatCard
+          heading="Upcoming Contests"
+          value={stats.upcomingContests}
+          unit="contests"
+        />
+        <StatCard
+          heading="Ended Contests"
+          value={stats.endedContests}
+          unit="contests"
+        />
+        {currentOrg?.role === "owner" && (
+          <StatCard
+            heading="Total Members"
+            value={stats.totalMembers}
+            unit="members"
+          />
+        )}
+      </div>
     </div>
   );
 }

hooks/use-org-stats.ts

@@ -0,0 +1,101 @@
+import { useEffect, useState } from "react";
+import { fetchApi } from "@/lib/client/fetch";
+
+type Period = "day" | "week" | "month" | "year";
+
+interface StatsResponse {
+  value: number;
+}
+
+interface StatConfig {
+  key: keyof typeof defaultStats;
+  stat: string;
+  period?: Period;
+  roleRequired?: string[];
+}
+
+const defaultStats = {
+  totalContests: 0,
+  upcomingContests: 0,
+  endedContests: 0,
+  totalMembers: 0,
+  totalProblems: 0,
+  totalGroups: 0,
+};
+
+const statsConfig: StatConfig[] = [
+  {
+    key: "totalContests",
+    stat: "total-contests",
+    roleRequired: ["owner", "organizer", "member"],
+  },
+  {
+    key: "upcomingContests",
+    stat: "upcoming-contests",
+    roleRequired: ["owner", "organizer", "member"],
+  },
+  {
+    key: "endedContests",
+    stat: "ended-contests",
+    roleRequired: ["owner", "organizer", "member"],
+  },
+  {
+    key: "totalMembers",
+    stat: "total-members",
+    roleRequired: ["owner"],
+  },
+  {
+    key: "totalProblems",
+    stat: "total-problems",
+    roleRequired: ["owner", "organizer", "member"],
+  },
+  {
+    key: "totalGroups",
+    stat: "total-groups",
+    roleRequired: ["owner", "organizer", "member"],
+  },
+];
+
+export function useOrgStats(orgId: string, currentRole?: string) {
+  const [stats, setStats] = useState(defaultStats);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const fetchStats = async () => {
+      try {
+        // Filter stats based on user's role
+        const allowedStats = statsConfig.filter((config) =>
+          config.roleRequired?.includes(currentRole || ""),
+        );
+
+        // Create array of promises for allowed stats
+        const responses = await Promise.all(
+          allowedStats.map(({ stat, period }) =>
+            fetchApi<StatsResponse>(
+              `/orgs/${orgId}/stats?stat=${stat}${period ? `&period=${period}` : ""}`,
+            ),
+          ),
+        );
+
+        // Combine responses into stats object
+        const newStats = { ...defaultStats };
+        allowedStats.forEach(({ key }, index) => {
+          newStats[key] = responses[index].value;
+        });
+
+        setStats(newStats);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : "Failed to fetch stats");
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    if (orgId) {
+      fetchStats();
+    }
+  }, [orgId, currentRole]);
+
+  return { stats, loading, error };
+}