Feat/72 admin dashboard

app/(main)/dashboard/page.tsx

@@ -1,7 +1,13 @@
+import { OverviewSection } from "@/components/features/dashboard/overview-section";
 import React from "react";
 
 const DashboardPage = () => {
-  return <div>DashboardPage</div>;
+  return (
+    <div className="container mx-auto py-6">
+      <h1 className="text-5xl font-bold my-12">Hello, SAMAHAN SYSDEV</h1>
+      <OverviewSection />
+    </div>
+  );
 };
 
 export default DashboardPage;

components/features/dashboard/overview-section.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import { useDashboardOverviewQuery } from "@/lib/api/queries/dashboardQueries";
+import { StatCard } from "./stat-card";
+
+export function OverviewSection() {
+  const { data, isLoading } = useDashboardOverviewQuery();
+
+  return (
+    <section>
+      <h2 className="text-2xl font-medium mb-3">Events Overview</h2>
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-9">
+        <StatCard
+          title="Total Organizations"
+          value={data?.totalOrganizations ?? 0}
+          isLoading={isLoading}
+        />
+
+        <StatCard
+          title="Upcoming Events"
+          value={data?.upcomingEvents ?? 0}
+          isLoading={isLoading}
+        />
+      </div>
+    </section>
+  );
+}

components/features/dashboard/stat-card.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import { Card, CardContent } from "@/components/ui/card";
+import { ExternalLink } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+interface StatCardProps {
+  title: string;
+  value: number | string;
+  isLoading?: boolean;
+  className?: string;
+}
+
+export function StatCard({
+  title,
+  value,
+  isLoading,
+  className,
+}: StatCardProps) {
+  return (
+    <div
+      className={cn("rounded-[20px] border border-transparent", className)}
+      style={{
+        background:
+          "linear-gradient(#E2E8F0, #E2E8F0) padding-box, linear-gradient(to bottom, #1e40af, #3b82f6) border-box",
+      }}
+    >
+      <Card className="rounded-[20px] border-0 bg-transparent shadow-none">
+        <CardContent className="px-6 py-5 space-y-3">
+          <div className="flex items-center justify-between gap-2">
+            <p className="text-2xl font-medium bg-gradient-to-b from-blue-900 to-blue-600 bg-clip-text text-transparent truncate">
+              {title}
+            </p>
+
+            <div className="text-blue-800">
+              <ExternalLink size={15} />
+            </div>
+          </div>
+
+          <p className="text-5xl font-medium bg-gradient-to-b from-blue-900 to-blue-600 bg-clip-text text-transparent">
+            {isLoading ? "—" : value}
+          </p>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

lib/api/queries/dashboardQueries.ts

@@ -0,0 +1,10 @@
+import { useQuery } from "@tanstack/react-query";
+import { getDashboardOverview } from "../services/dashboardServices";
+
+export const useDashboardOverviewQuery = () => {
+  return useQuery({
+    queryKey: ["dashboard-overview"],
+    queryFn: getDashboardOverview,
+    staleTime: 60 * 1000, // 1 minute
+  });
+};

lib/api/services/dashboardServices.ts

@@ -0,0 +1,24 @@
+import { BASE_URL } from "../../config/api";
+
+export interface DashboardOverviewResponse {
+  totalOrganizations: number;
+  upcomingEvents: number;
+}
+
+export const getDashboardOverview =
+  async (): Promise<DashboardOverviewResponse> => {
+    const response = await fetch(`${BASE_URL}/dashboard/overview`, {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      credentials: "include",
+    });
+
+    if (!response.ok) {
+      throw new Error("Failed to fetch dashboard overview");
+    }
+
+    const data = await response.json();
+    return data;
+  };