From 181a3a42eb30a7b9e736238f00785db02dd85ea3 Mon Sep 17 00:00:00 2001
From: raineer <raineerdelarita@gmail.com>
Date: Fri, 7 Nov 2025 22:43:13 +0800
Subject: [PATCH 1/5] gradient

---
 .../AdminDashboardApplicantStatusPie.tsx      | 31 ++++++++++----
 ...minDashboardMonthlyApplicantsLineChart.tsx | 18 +++++---
 .../_components/AdminDashboardProjectsPie.tsx | 31 ++++++++++----
 .../AdminDashboardTotalActiveIntern.tsx       | 21 ++++++++--
 .../_components/AdminDashboardTotalAdmin.tsx  | 21 ++++++++--
 .../_components/AdminDashboardTotalCodev.tsx  | 42 +++++++++++--------
 .../AdminDashboardTotalInactiveIntern.tsx     | 21 ++++++++--
 .../_components/AdminDashboardTotalMentor.tsx | 21 ++++++++--
 .../AdminDashboardTotalProject.tsx            | 21 ++++++++--
 9 files changed, 171 insertions(+), 56 deletions(-)

diff --git a/apps/codebility/app/home/admin-dashboard/_components/AdminDashboardApplicantStatusPie.tsx b/apps/codebility/app/home/admin-dashboard/_components/AdminDashboardApplicantStatusPie.tsx
index 6179edc5c..571d8348f 100644
--- a/apps/codebility/app/home/admin-dashboard/_components/AdminDashboardApplicantStatusPie.tsx
+++ b/apps/codebility/app/home/admin-dashboard/_components/AdminDashboardApplicantStatusPie.tsx
@@ -14,6 +14,7 @@ import {
   ChartLegendContent,
 } from "@/components/ui/chart";
 import { Pie, PieChart } from "recharts";
+import { cn } from "@/lib/utils";
 
 interface ApplicantStatusCounts extends Record<string, number> {}
 
@@ -28,12 +29,20 @@ export default function AdminDashboardApplicantStatusPie({
   
   if (!data)
     return (
-      <Card className="flex h-full flex-col">
+      <Card 
+        className={cn(
+          "flex h-full flex-col",
+          // Light mode - clean white
+          "bg-white border-gray-200",
+          // Dark mode - Home's silver gradient
+          "dark:bg-gradient-to-r dark:from-[#464646] dark:to-[#a8a8a8]"
+        )}
+      >
         <CardHeader className="items-center pb-0">
-          <CardTitle className="text-lg">{title}</CardTitle>
+          <CardTitle className="text-lg dark:text-white">{title}</CardTitle>
         </CardHeader>
         <CardContent className="flex flex-1 items-center justify-center">
-          <p className="text-muted-foreground">No data available</p>
+          <p className="text-muted-foreground dark:text-white/70">No data available</p>
         </CardContent>
       </Card>
     );
@@ -57,10 +66,18 @@ export default function AdminDashboardApplicantStatusPie({
   );
 
   return (
-    <Card className="flex h-full flex-col">
+    <Card 
+      className={cn(
+        "flex h-full flex-col",
+        // Light mode - clean white
+        "bg-white border-gray-200",
+        // Dark mode - Home's silver gradient
+        "dark:bg-gradient-to-r dark:from-[#464646] dark:to-[#a8a8a8]"
+      )}
+    >
       <CardHeader className="items-center pb-0">
-        <CardTitle className="text-lg">{title}</CardTitle>
-        <CardDescription className="text-center text-sm">
+        <CardTitle className="text-lg dark:text-white">{title}</CardTitle>
+        <CardDescription className="text-center text-sm dark:text-white/70">
           Distribution of application statuses
         </CardDescription>
       </CardHeader>
@@ -84,4 +101,4 @@ export default function AdminDashboardApplicantStatusPie({
       </CardContent>
     </Card>
   );
-}
+}
\ No newline at end of file
diff --git a/apps/codebility/app/home/admin-dashboard/_components/AdminDashboardMonthlyApplicantsLineChart.tsx b/apps/codebility/app/home/admin-dashboard/_components/AdminDashboardMonthlyApplicantsLineChart.tsx
index cbf29177f..c063e36e5 100644
--- a/apps/codebility/app/home/admin-dashboard/_components/AdminDashboardMonthlyApplicantsLineChart.tsx
+++ b/apps/codebility/app/home/admin-dashboard/_components/AdminDashboardMonthlyApplicantsLineChart.tsx
@@ -21,6 +21,7 @@ import {
   ResponsiveContainer,
   XAxis,
 } from "recharts";
+import { cn } from "@/lib/utils";
 
 interface AdminDashboardMonthlyApplicantsLineChartProp {
   dateApplied?: string[];
@@ -74,10 +75,17 @@ export default function AdminDashboardMonthlyApplicantsLineChart({
   } satisfies ChartConfig;
 
   return (
-    <Card>
+    <Card 
+      className={cn(
+        // Light mode - clean white
+        "bg-white border-gray-200",
+        // Dark mode - Home's gold gradient
+        "dark:bg-gradient-to-r dark:from-[#9c813b] dark:to-[#ecc258]"
+      )}
+    >
       <CardHeader>
-        <CardTitle className="text-lg">Monthly Applicants</CardTitle>
-        <CardDescription>{description}</CardDescription>
+        <CardTitle className="text-lg dark:text-white">Monthly Applicants</CardTitle>
+        <CardDescription className="dark:text-white/70">{description}</CardDescription>
       </CardHeader>
       <CardContent className="h-80">
         <ResponsiveContainer width="100%" height="100%">
@@ -125,10 +133,10 @@ export default function AdminDashboardMonthlyApplicantsLineChart({
         </ResponsiveContainer>
       </CardContent>
       <CardFooter className="flex-col items-start gap-2 text-sm">
-        <div className="leading-none text-muted-foreground">
+        <div className="leading-none text-muted-foreground dark:text-white/70">
           Showing monthly applicants for the current and previous 5 months
         </div>
       </CardFooter>
     </Card>
   );
-}
+}
\ No newline at end of file
diff --git a/apps/codebility/app/home/admin-dashboard/_components/AdminDashboardProjectsPie.tsx b/apps/codebility/app/home/admin-dashboard/_components/AdminDashboardProjectsPie.tsx
index 7a4edb4ff..a21976d92 100644
--- a/apps/codebility/app/home/admin-dashboard/_components/AdminDashboardProjectsPie.tsx
+++ b/apps/codebility/app/home/admin-dashboard/_components/AdminDashboardProjectsPie.tsx
@@ -14,6 +14,7 @@ import {
   ChartLegendContent,
 } from "@/components/ui/chart";
 import { Pie, PieChart } from "recharts";
+import { cn } from "@/lib/utils";
 
 interface ProjectCategoryCounts extends Record<string, number> {}
 
@@ -28,12 +29,20 @@ export default function AdminDashboardProjectsPie({
   
   if (!data)
     return (
-      <Card className="flex h-full flex-col">
+      <Card 
+        className={cn(
+          "flex h-full flex-col",
+          // Light mode - clean white
+          "bg-white border-gray-200",
+          // Dark mode - Home's bronze gradient
+          "dark:bg-gradient-to-r dark:from-[#563c1e] dark:to-[#ba8240]"
+        )}
+      >
         <CardHeader className="items-center pb-0">
-          <CardTitle className="text-lg">{title}</CardTitle>
+          <CardTitle className="text-lg dark:text-white">{title}</CardTitle>
         </CardHeader>
         <CardContent className="flex flex-1 items-center justify-center">
-          <p className="text-muted-foreground">No data available</p>
+          <p className="text-muted-foreground dark:text-white/70">No data available</p>
         </CardContent>
       </Card>
     );
@@ -62,10 +71,18 @@ export default function AdminDashboardProjectsPie({
   }, {} as ChartConfig);
 
   return (
-    <Card className="flex h-full flex-col">
+    <Card 
+      className={cn(
+        "flex h-full flex-col",
+        // Light mode - clean white
+        "bg-white border-gray-200",
+        // Dark mode - Home's bronze gradient
+        "dark:bg-gradient-to-r dark:from-[#563c1e] dark:to-[#ba8240]"
+      )}
+    >
       <CardHeader className="items-center pb-0">
-        <CardTitle className="text-lg">{title}</CardTitle>
-        <CardDescription className="text-center text-sm">
+        <CardTitle className="text-lg dark:text-white">{title}</CardTitle>
+        <CardDescription className="text-center text-sm dark:text-white/70">
           Distribution by project categories
         </CardDescription>
       </CardHeader>
@@ -89,4 +106,4 @@ export default function AdminDashboardProjectsPie({
       </CardContent>
     </Card>
   );
-}
+}
\ No newline at end of file
diff --git a/apps/codebility/app/home/admin-dashboard/_components/AdminDashboardTotalActiveIntern.tsx b/apps/codebility/app/home/admin-dashboard/_components/AdminDashboardTotalActiveIntern.tsx
index 6fd4f3680..fc73f0f08 100644
--- a/apps/codebility/app/home/admin-dashboard/_components/AdminDashboardTotalActiveIntern.tsx
+++ b/apps/codebility/app/home/admin-dashboard/_components/AdminDashboardTotalActiveIntern.tsx
@@ -14,8 +14,21 @@ export default function AdminDashboardTotalActiveIntern({
   className,
 }: AdminDashboardTotalActiveInternProps) {
   return (
-    <Card className={cn("group transition-all hover:shadow-lg", className)}>
-      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+    <Card 
+      className={cn(
+        "group relative overflow-hidden transition-all hover:shadow-lg",
+        // Dark mode gradient background - blue theme
+        "bg-gradient-to-br from-blue-950/40 via-slate-900/60 to-slate-950/40",
+        "dark:from-blue-950/30 dark:via-slate-900/50 dark:to-slate-950/30",
+        // Border for definition
+        "border border-blue-900/20 dark:border-blue-800/20",
+        className
+      )}
+    >
+      {/* Subtle overlay for depth */}
+      <div className="absolute inset-0 bg-gradient-to-br from-blue-500/5 to-transparent pointer-events-none" />
+      
+      <CardHeader className="relative flex flex-row items-center justify-between space-y-0 pb-2">
         <div className="space-y-1">
           <p className="text-sm font-medium text-muted-foreground">
             Total Active Interns
@@ -25,7 +38,7 @@ export default function AdminDashboardTotalActiveIntern({
           <UserCheck className="h-4 w-4" />
         </div>
       </CardHeader>
-      <CardContent>
+      <CardContent className="relative">
         <div className="text-2xl font-bold">
           {count !== undefined ? count.toLocaleString() : "N/A"}
         </div>
@@ -35,4 +48,4 @@ export default function AdminDashboardTotalActiveIntern({
       </CardContent>
     </Card>
   );
-}
+}
\ No newline at end of file
diff --git a/apps/codebility/app/home/admin-dashboard/_components/AdminDashboardTotalAdmin.tsx b/apps/codebility/app/home/admin-dashboard/_components/AdminDashboardTotalAdmin.tsx
index 052a97301..ae7abefb2 100644
--- a/apps/codebility/app/home/admin-dashboard/_components/AdminDashboardTotalAdmin.tsx
+++ b/apps/codebility/app/home/admin-dashboard/_components/AdminDashboardTotalAdmin.tsx
@@ -14,8 +14,21 @@ export default function AdminDashboardTotalAdmin({
   className,
 }: AdminDashboardTotalAdminProps) {
   return (
-    <Card className={cn("group transition-all hover:shadow-lg", className)}>
-      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+    <Card 
+      className={cn(
+        "group relative overflow-hidden transition-all hover:shadow-lg",
+        // Dark mode gradient background - purple theme
+        "bg-gradient-to-br from-purple-950/40 via-slate-900/60 to-slate-950/40",
+        "dark:from-purple-950/30 dark:via-slate-900/50 dark:to-slate-950/30",
+        // Border for definition
+        "border border-purple-900/20 dark:border-purple-800/20",
+        className
+      )}
+    >
+      {/* Subtle overlay for depth */}
+      <div className="absolute inset-0 bg-gradient-to-br from-purple-500/5 to-transparent pointer-events-none" />
+      
+      <CardHeader className="relative flex flex-row items-center justify-between space-y-0 pb-2">
         <div className="space-y-1">
           <p className="text-sm font-medium text-muted-foreground">
             Total Admins
@@ -25,7 +38,7 @@ export default function AdminDashboardTotalAdmin({
           <UserCog className="h-4 w-4" />
         </div>
       </CardHeader>
-      <CardContent>
+      <CardContent className="relative">
         <div className="text-2xl font-bold">
           {count !== undefined ? count.toLocaleString() : "N/A"}
         </div>
@@ -35,4 +48,4 @@ export default function AdminDashboardTotalAdmin({
       </CardContent>
     </Card>
   );
-}
+}
\ No newline at end of file
diff --git a/apps/codebility/app/home/admin-dashboard/_components/AdminDashboardTotalCodev.tsx b/apps/codebility/app/home/admin-dashboard/_components/AdminDashboardTotalCodev.tsx
index 626c419a6..6bb3ce9a2 100644
--- a/apps/codebility/app/home/admin-dashboard/_components/AdminDashboardTotalCodev.tsx
+++ b/apps/codebility/app/home/admin-dashboard/_components/AdminDashboardTotalCodev.tsx
@@ -1,43 +1,51 @@
 "use client";
 
-import React, { memo } from "react";
 import { Card, CardContent, CardHeader } from "@/components/ui/card";
-import { UserPlus } from "lucide-react";
+import { UserPen } from "lucide-react";
 import { cn } from "@/lib/utils";
 
-interface AdminDashboardTotalCodevProps {
+interface AdminDashboardTotalMentorProps {
   count?: number;
   className?: string;
 }
 
-const AdminDashboardTotalCodev = memo(({
+export default function AdminDashboardTotalMentor({
   count,
   className,
-}: AdminDashboardTotalCodevProps) => {
+}: AdminDashboardTotalMentorProps) {
   return (
-    <Card className={cn("group transition-all hover:shadow-lg", className)}>
-      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+    <Card 
+      className={cn(
+        "group relative overflow-hidden transition-all hover:shadow-lg",
+        // Dark mode gradient background - orange theme
+        "bg-gradient-to-br from-orange-950/40 via-slate-900/60 to-slate-950/40",
+        "dark:from-orange-950/30 dark:via-slate-900/50 dark:to-slate-950/30",
+        // Border for definition
+        "border border-orange-900/20 dark:border-orange-800/20",
+        className
+      )}
+    >
+      {/* Subtle overlay for depth */}
+      <div className="absolute inset-0 bg-gradient-to-br from-orange-500/5 to-transparent pointer-events-none" />
+      
+      <CardHeader className="relative flex flex-row items-center justify-between space-y-0 pb-2">
         <div className="space-y-1">
           <p className="text-sm font-medium text-muted-foreground">
-            Total Codevs
+            Total Mentors
           </p>
         </div>
-        <div className="rounded-lg bg-green-500/10 p-2 text-green-500 transition-colors group-hover:bg-green-500/20">
-          <UserPlus className="h-4 w-4" />
+        <div className="rounded-lg bg-orange-500/10 p-2 text-orange-500 transition-colors group-hover:bg-orange-500/20">
+          <UserPen className="h-4 w-4" />
         </div>
       </CardHeader>
-      <CardContent>
+      <CardContent className="relative">
         <div className="text-2xl font-bold">
           {count !== undefined ? count.toLocaleString() : "N/A"}
         </div>
         <p className="text-xs text-muted-foreground">
-          Registered developers
+          Active mentors
         </p>
       </CardContent>
     </Card>
   );
-});
-
-AdminDashboardTotalCodev.displayName = "AdminDashboardTotalCodev";
-
-export default AdminDashboardTotalCodev;
+}
\ No newline at end of file
diff --git a/apps/codebility/app/home/admin-dashboard/_components/AdminDashboardTotalInactiveIntern.tsx b/apps/codebility/app/home/admin-dashboard/_components/AdminDashboardTotalInactiveIntern.tsx
index ff98e5e93..82b37497e 100644
--- a/apps/codebility/app/home/admin-dashboard/_components/AdminDashboardTotalInactiveIntern.tsx
+++ b/apps/codebility/app/home/admin-dashboard/_components/AdminDashboardTotalInactiveIntern.tsx
@@ -14,8 +14,21 @@ export default function AdminDashboardTotalInactiveIntern({
   className,
 }: AdminDashboardTotalInactiveInternProps) {
   return (
-    <Card className={cn("group transition-all hover:shadow-lg", className)}>
-      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+    <Card 
+      className={cn(
+        "group relative overflow-hidden transition-all hover:shadow-lg",
+        // Dark mode gradient background - red theme
+        "bg-gradient-to-br from-red-950/40 via-slate-900/60 to-slate-950/40",
+        "dark:from-red-950/30 dark:via-slate-900/50 dark:to-slate-950/30",
+        // Border for definition
+        "border border-red-900/20 dark:border-red-800/20",
+        className
+      )}
+    >
+      {/* Subtle overlay for depth */}
+      <div className="absolute inset-0 bg-gradient-to-br from-red-500/5 to-transparent pointer-events-none" />
+      
+      <CardHeader className="relative flex flex-row items-center justify-between space-y-0 pb-2">
         <div className="space-y-1">
           <p className="text-sm font-medium text-muted-foreground">
             Total Inactive Interns
@@ -25,7 +38,7 @@ export default function AdminDashboardTotalInactiveIntern({
           <UserX className="h-4 w-4" />
         </div>
       </CardHeader>
-      <CardContent>
+      <CardContent className="relative">
         <div className="text-2xl font-bold">
           {count !== undefined ? count.toLocaleString() : "N/A"}
         </div>
@@ -35,4 +48,4 @@ export default function AdminDashboardTotalInactiveIntern({
       </CardContent>
     </Card>
   );
-}
+}
\ No newline at end of file
diff --git a/apps/codebility/app/home/admin-dashboard/_components/AdminDashboardTotalMentor.tsx b/apps/codebility/app/home/admin-dashboard/_components/AdminDashboardTotalMentor.tsx
index 4663a9e9a..6bb3ce9a2 100644
--- a/apps/codebility/app/home/admin-dashboard/_components/AdminDashboardTotalMentor.tsx
+++ b/apps/codebility/app/home/admin-dashboard/_components/AdminDashboardTotalMentor.tsx
@@ -14,8 +14,21 @@ export default function AdminDashboardTotalMentor({
   className,
 }: AdminDashboardTotalMentorProps) {
   return (
-    <Card className={cn("group transition-all hover:shadow-lg", className)}>
-      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+    <Card 
+      className={cn(
+        "group relative overflow-hidden transition-all hover:shadow-lg",
+        // Dark mode gradient background - orange theme
+        "bg-gradient-to-br from-orange-950/40 via-slate-900/60 to-slate-950/40",
+        "dark:from-orange-950/30 dark:via-slate-900/50 dark:to-slate-950/30",
+        // Border for definition
+        "border border-orange-900/20 dark:border-orange-800/20",
+        className
+      )}
+    >
+      {/* Subtle overlay for depth */}
+      <div className="absolute inset-0 bg-gradient-to-br from-orange-500/5 to-transparent pointer-events-none" />
+      
+      <CardHeader className="relative flex flex-row items-center justify-between space-y-0 pb-2">
         <div className="space-y-1">
           <p className="text-sm font-medium text-muted-foreground">
             Total Mentors
@@ -25,7 +38,7 @@ export default function AdminDashboardTotalMentor({
           <UserPen className="h-4 w-4" />
         </div>
       </CardHeader>
-      <CardContent>
+      <CardContent className="relative">
         <div className="text-2xl font-bold">
           {count !== undefined ? count.toLocaleString() : "N/A"}
         </div>
@@ -35,4 +48,4 @@ export default function AdminDashboardTotalMentor({
       </CardContent>
     </Card>
   );
-}
+}
\ No newline at end of file
diff --git a/apps/codebility/app/home/admin-dashboard/_components/AdminDashboardTotalProject.tsx b/apps/codebility/app/home/admin-dashboard/_components/AdminDashboardTotalProject.tsx
index 34f544660..4ee72675d 100644
--- a/apps/codebility/app/home/admin-dashboard/_components/AdminDashboardTotalProject.tsx
+++ b/apps/codebility/app/home/admin-dashboard/_components/AdminDashboardTotalProject.tsx
@@ -14,8 +14,21 @@ export default function AdminDashboardTotalProject({
   className,
 }: AdminDashboardTotalProjectsProps) {
   return (
-    <Card className={cn("group transition-all hover:shadow-lg", className)}>
-      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+    <Card 
+      className={cn(
+        "group relative overflow-hidden transition-all hover:shadow-lg",
+        // Dark mode gradient background - cyan theme
+        "bg-gradient-to-br from-cyan-950/40 via-slate-900/60 to-slate-950/40",
+        "dark:from-cyan-950/30 dark:via-slate-900/50 dark:to-slate-950/30",
+        // Border for definition
+        "border border-cyan-900/20 dark:border-cyan-800/20",
+        className
+      )}
+    >
+      {/* Subtle overlay for depth */}
+      <div className="absolute inset-0 bg-gradient-to-br from-cyan-500/5 to-transparent pointer-events-none" />
+      
+      <CardHeader className="relative flex flex-row items-center justify-between space-y-0 pb-2">
         <div className="space-y-1">
           <p className="text-sm font-medium text-muted-foreground">
             Total Projects
@@ -25,7 +38,7 @@ export default function AdminDashboardTotalProject({
           <FolderKanban className="h-4 w-4" />
         </div>
       </CardHeader>
-      <CardContent>
+      <CardContent className="relative">
         <div className="text-2xl font-bold">
           {count !== undefined ? count.toLocaleString() : "N/A"}
         </div>
@@ -35,4 +48,4 @@ export default function AdminDashboardTotalProject({
       </CardContent>
     </Card>
   );
-}
+}
\ No newline at end of file

From 6fc229dae58da054a62b8e8f64bb77b29cc49354 Mon Sep 17 00:00:00 2001
From: raineer <raineerdelarita@gmail.com>
Date: Sat, 8 Nov 2025 00:29:03 +0800
Subject: [PATCH 2/5] fix top cards

---
 .../AdminDashboardApplicantStatusPie.tsx      | 43 +++++++------------
 ...minDashboardMonthlyApplicantsLineChart.tsx | 25 +++++------
 .../_components/AdminDashboardProjectsPie.tsx | 43 +++++++------------
 3 files changed, 42 insertions(+), 69 deletions(-)

diff --git a/apps/codebility/app/home/admin-dashboard/_components/AdminDashboardApplicantStatusPie.tsx b/apps/codebility/app/home/admin-dashboard/_components/AdminDashboardApplicantStatusPie.tsx
index 571d8348f..0ffa56954 100644
--- a/apps/codebility/app/home/admin-dashboard/_components/AdminDashboardApplicantStatusPie.tsx
+++ b/apps/codebility/app/home/admin-dashboard/_components/AdminDashboardApplicantStatusPie.tsx
@@ -14,7 +14,6 @@ import {
   ChartLegendContent,
 } from "@/components/ui/chart";
 import { Pie, PieChart } from "recharts";
-import { cn } from "@/lib/utils";
 
 interface ApplicantStatusCounts extends Record<string, number> {}
 
@@ -29,20 +28,15 @@ export default function AdminDashboardApplicantStatusPie({
   
   if (!data)
     return (
-      <Card 
-        className={cn(
-          "flex h-full flex-col",
-          // Light mode - clean white
-          "bg-white border-gray-200",
-          // Dark mode - Home's silver gradient
-          "dark:bg-gradient-to-r dark:from-[#464646] dark:to-[#a8a8a8]"
-        )}
-      >
-        <CardHeader className="items-center pb-0">
-          <CardTitle className="text-lg dark:text-white">{title}</CardTitle>
+      <Card className="flex h-full flex-col relative overflow-hidden">
+        {/* Gradient background - only visible in dark mode */}
+        <div className="absolute inset-0 bg-gradient-to-br from-customBlue-950/10 to-purple-950/10 dark:block hidden" />
+        
+        <CardHeader className="relative items-center pb-0">
+          <CardTitle className="text-lg">{title}</CardTitle>
         </CardHeader>
-        <CardContent className="flex flex-1 items-center justify-center">
-          <p className="text-muted-foreground dark:text-white/70">No data available</p>
+        <CardContent className="relative flex flex-1 items-center justify-center">
+          <p className="text-muted-foreground">No data available</p>
         </CardContent>
       </Card>
     );
@@ -66,22 +60,17 @@ export default function AdminDashboardApplicantStatusPie({
   );
 
   return (
-    <Card 
-      className={cn(
-        "flex h-full flex-col",
-        // Light mode - clean white
-        "bg-white border-gray-200",
-        // Dark mode - Home's silver gradient
-        "dark:bg-gradient-to-r dark:from-[#464646] dark:to-[#a8a8a8]"
-      )}
-    >
-      <CardHeader className="items-center pb-0">
-        <CardTitle className="text-lg dark:text-white">{title}</CardTitle>
-        <CardDescription className="text-center text-sm dark:text-white/70">
+    <Card className="flex h-full flex-col relative overflow-hidden">
+      {/* Gradient background - only visible in dark mode */}
+      <div className="absolute inset-0 bg-gradient-to-br from-customBlue-950/10 to-purple-950/10 dark:block hidden" />
+      
+      <CardHeader className="relative items-center pb-0">
+        <CardTitle className="text-lg">{title}</CardTitle>
+        <CardDescription className="text-center text-sm">
           Distribution of application statuses
         </CardDescription>
       </CardHeader>
-      <CardContent className="flex-1 pb-0">
+      <CardContent className="relative flex-1 pb-0">
         <ChartContainer
           config={chartConfig}
           className="mx-auto aspect-square max-h-[350px]"
diff --git a/apps/codebility/app/home/admin-dashboard/_components/AdminDashboardMonthlyApplicantsLineChart.tsx b/apps/codebility/app/home/admin-dashboard/_components/AdminDashboardMonthlyApplicantsLineChart.tsx
index c063e36e5..06636616a 100644
--- a/apps/codebility/app/home/admin-dashboard/_components/AdminDashboardMonthlyApplicantsLineChart.tsx
+++ b/apps/codebility/app/home/admin-dashboard/_components/AdminDashboardMonthlyApplicantsLineChart.tsx
@@ -21,7 +21,6 @@ import {
   ResponsiveContainer,
   XAxis,
 } from "recharts";
-import { cn } from "@/lib/utils";
 
 interface AdminDashboardMonthlyApplicantsLineChartProp {
   dateApplied?: string[];
@@ -75,19 +74,15 @@ export default function AdminDashboardMonthlyApplicantsLineChart({
   } satisfies ChartConfig;
 
   return (
-    <Card 
-      className={cn(
-        // Light mode - clean white
-        "bg-white border-gray-200",
-        // Dark mode - Home's gold gradient
-        "dark:bg-gradient-to-r dark:from-[#9c813b] dark:to-[#ecc258]"
-      )}
-    >
-      <CardHeader>
-        <CardTitle className="text-lg dark:text-white">Monthly Applicants</CardTitle>
-        <CardDescription className="dark:text-white/70">{description}</CardDescription>
+    <Card className="relative overflow-hidden">
+      {/* Gradient background - only visible in dark mode */}
+      <div className="absolute inset-0 bg-gradient-to-br from-customBlue-950/10 to-purple-950/10 dark:block hidden" />
+      
+      <CardHeader className="relative">
+        <CardTitle className="text-lg">Monthly Applicants</CardTitle>
+        <CardDescription>{description}</CardDescription>
       </CardHeader>
-      <CardContent className="h-80">
+      <CardContent className="relative h-80">
         <ResponsiveContainer width="100%" height="100%">
           <ChartContainer config={chartConfig}>
             <LineChart
@@ -132,8 +127,8 @@ export default function AdminDashboardMonthlyApplicantsLineChart({
           </ChartContainer>
         </ResponsiveContainer>
       </CardContent>
-      <CardFooter className="flex-col items-start gap-2 text-sm">
-        <div className="leading-none text-muted-foreground dark:text-white/70">
+      <CardFooter className="relative flex-col items-start gap-2 text-sm">
+        <div className="leading-none text-muted-foreground">
           Showing monthly applicants for the current and previous 5 months
         </div>
       </CardFooter>
diff --git a/apps/codebility/app/home/admin-dashboard/_components/AdminDashboardProjectsPie.tsx b/apps/codebility/app/home/admin-dashboard/_components/AdminDashboardProjectsPie.tsx
index a21976d92..190fbac9c 100644
--- a/apps/codebility/app/home/admin-dashboard/_components/AdminDashboardProjectsPie.tsx
+++ b/apps/codebility/app/home/admin-dashboard/_components/AdminDashboardProjectsPie.tsx
@@ -14,7 +14,6 @@ import {
   ChartLegendContent,
 } from "@/components/ui/chart";
 import { Pie, PieChart } from "recharts";
-import { cn } from "@/lib/utils";
 
 interface ProjectCategoryCounts extends Record<string, number> {}
 
@@ -29,20 +28,15 @@ export default function AdminDashboardProjectsPie({
   
   if (!data)
     return (
-      <Card 
-        className={cn(
-          "flex h-full flex-col",
-          // Light mode - clean white
-          "bg-white border-gray-200",
-          // Dark mode - Home's bronze gradient
-          "dark:bg-gradient-to-r dark:from-[#563c1e] dark:to-[#ba8240]"
-        )}
-      >
-        <CardHeader className="items-center pb-0">
-          <CardTitle className="text-lg dark:text-white">{title}</CardTitle>
+      <Card className="flex h-full flex-col relative overflow-hidden">
+        {/* Gradient background - only visible in dark mode */}
+        <div className="absolute inset-0 bg-gradient-to-br from-customBlue-950/10 to-purple-950/10 dark:block hidden" />
+        
+        <CardHeader className="relative items-center pb-0">
+          <CardTitle className="text-lg">{title}</CardTitle>
         </CardHeader>
-        <CardContent className="flex flex-1 items-center justify-center">
-          <p className="text-muted-foreground dark:text-white/70">No data available</p>
+        <CardContent className="relative flex flex-1 items-center justify-center">
+          <p className="text-muted-foreground">No data available</p>
         </CardContent>
       </Card>
     );
@@ -71,22 +65,17 @@ export default function AdminDashboardProjectsPie({
   }, {} as ChartConfig);
 
   return (
-    <Card 
-      className={cn(
-        "flex h-full flex-col",
-        // Light mode - clean white
-        "bg-white border-gray-200",
-        // Dark mode - Home's bronze gradient
-        "dark:bg-gradient-to-r dark:from-[#563c1e] dark:to-[#ba8240]"
-      )}
-    >
-      <CardHeader className="items-center pb-0">
-        <CardTitle className="text-lg dark:text-white">{title}</CardTitle>
-        <CardDescription className="text-center text-sm dark:text-white/70">
+    <Card className="flex h-full flex-col relative overflow-hidden">
+      {/* Gradient background - only visible in dark mode */}
+      <div className="absolute inset-0 bg-gradient-to-br from-customBlue-950/10 to-purple-950/10 dark:block hidden" />
+      
+      <CardHeader className="relative items-center pb-0">
+        <CardTitle className="text-lg">{title}</CardTitle>
+        <CardDescription className="text-center text-sm">
           Distribution by project categories
         </CardDescription>
       </CardHeader>
-      <CardContent className="flex-1 pb-0">
+      <CardContent className="relative flex-1 pb-0">
         <ChartContainer
           config={chartConfig}
           className="mx-auto aspect-square max-h-[350px]"

From b33935877c0a0aec850d3e5f5b97c9f030f98699 Mon Sep 17 00:00:00 2001
From: raineer <raineerdelarita@gmail.com>
Date: Sat, 8 Nov 2025 22:54:53 +0800
Subject: [PATCH 3/5]  preserved dark mode styling

---
 .../_components/AdminDashboardStatsCard.tsx   | 126 ++++++++++++++++++
 .../app/home/admin-dashboard/page.tsx         |  59 +++++---
 2 files changed, 170 insertions(+), 15 deletions(-)
 create mode 100644 apps/codebility/app/home/admin-dashboard/_components/AdminDashboardStatsCard.tsx

diff --git a/apps/codebility/app/home/admin-dashboard/_components/AdminDashboardStatsCard.tsx b/apps/codebility/app/home/admin-dashboard/_components/AdminDashboardStatsCard.tsx
new file mode 100644
index 000000000..bc9c57978
--- /dev/null
+++ b/apps/codebility/app/home/admin-dashboard/_components/AdminDashboardStatsCard.tsx
@@ -0,0 +1,126 @@
+"use client";
+
+import { UserCheck, UserX, Users, UserCog, FolderKanban, UserPen } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+// Icon mapping
+const ICON_MAP = {
+  UserCheck,
+  UserX,
+  Users,
+  UserCog,
+  FolderKanban,
+  UserPen,
+} as const;
+
+type IconName = keyof typeof ICON_MAP;
+
+interface AdminDashboardStatsCardProps {
+  title: string;
+  count?: number;
+  description: string;
+  iconName: IconName;
+  colorTheme: "blue" | "red" | "orange" | "purple" | "cyan" | "green";
+  className?: string;
+}
+
+// ORIGINAL theme config - DARK RICH COLORS (not pale)
+const THEME_CONFIGS = {
+  blue: {
+    card: "bg-white dark:bg-gradient-to-br dark:from-blue-950 dark:via-slate-900 dark:to-slate-950",
+    border: "border-gray-200 dark:border-blue-900/30",
+    overlay: "dark:from-blue-500/10",
+    iconBg: "bg-blue-500/10 group-hover:bg-blue-500/20",
+    iconColor: "text-blue-500",
+  },
+  red: {
+    card: "bg-white dark:bg-gradient-to-br dark:from-red-950 dark:via-slate-900 dark:to-slate-950",
+    border: "border-gray-200 dark:border-red-900/30",
+    overlay: "dark:from-red-500/10",
+    iconBg: "bg-red-500/10 group-hover:bg-red-500/20",
+    iconColor: "text-red-500",
+  },
+  orange: {
+    card: "bg-white dark:bg-gradient-to-br dark:from-orange-950 dark:via-slate-900 dark:to-slate-950",
+    border: "border-gray-200 dark:border-orange-900/30",
+    overlay: "dark:from-orange-500/10",
+    iconBg: "bg-orange-500/10 group-hover:bg-orange-500/20",
+    iconColor: "text-orange-500",
+  },
+  purple: {
+    card: "bg-white dark:bg-gradient-to-br dark:from-purple-950 dark:via-slate-900 dark:to-slate-950",
+    border: "border-gray-200 dark:border-purple-900/30",
+    overlay: "dark:from-purple-500/10",
+    iconBg: "bg-purple-500/10 group-hover:bg-purple-500/20",
+    iconColor: "text-purple-500",
+  },
+  cyan: {
+    card: "bg-white dark:bg-gradient-to-br dark:from-cyan-950 dark:via-slate-900 dark:to-slate-950",
+    border: "border-gray-200 dark:border-cyan-900/30",
+    overlay: "dark:from-cyan-500/10",
+    iconBg: "bg-cyan-500/10 group-hover:bg-cyan-500/20",
+    iconColor: "text-cyan-500",
+  },
+  green: {
+    card: "bg-white dark:bg-gradient-to-br dark:from-green-950 dark:via-slate-900 dark:to-slate-950",
+    border: "border-gray-200 dark:border-green-900/30",
+    overlay: "dark:from-green-500/10",
+    iconBg: "bg-green-500/10 group-hover:bg-green-500/20",
+    iconColor: "text-green-500",
+  },
+} as const;
+
+export default function AdminDashboardStatsCard({
+  title,
+  count,
+  description,
+  iconName,
+  colorTheme,
+  className,
+}: AdminDashboardStatsCardProps) {
+  const theme = THEME_CONFIGS[colorTheme];
+  const Icon = ICON_MAP[iconName];
+
+  return (
+    <div 
+      className={cn(
+        "group relative overflow-hidden rounded-lg border transition-all hover:shadow-lg",
+        theme.card,
+        theme.border,
+        className
+      )}
+    >
+      {/* Overlay - only visible in dark mode */}
+      <div className={cn(
+        "absolute inset-0 bg-gradient-to-br to-transparent pointer-events-none opacity-0 dark:opacity-100",
+        theme.overlay
+      )} />
+      
+      {/* Header */}
+      <div className="relative flex flex-row items-center justify-between space-y-0 p-6 pb-2">
+        <div className="space-y-1">
+          <p className="text-sm font-medium text-muted-foreground">
+            {title}
+          </p>
+        </div>
+        <div className={cn(
+          "rounded-lg p-2 transition-colors",
+          theme.iconBg,
+          theme.iconColor
+        )}>
+          <Icon className="h-4 w-4" />
+        </div>
+      </div>
+      
+      {/* Content */}
+      <div className="relative p-6 pt-0">
+        <div className="text-2xl font-bold">
+          {count !== undefined ? count.toLocaleString() : "N/A"}
+        </div>
+        <p className="text-xs text-muted-foreground">
+          {description}
+        </p>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/apps/codebility/app/home/admin-dashboard/page.tsx b/apps/codebility/app/home/admin-dashboard/page.tsx
index b0bf86b06..6e72bf373 100644
--- a/apps/codebility/app/home/admin-dashboard/page.tsx
+++ b/apps/codebility/app/home/admin-dashboard/page.tsx
@@ -2,17 +2,11 @@ import H1 from "@/components/shared/dashboard/H1";
 import { getOrSetCache } from "@/lib/server/redis-cache";
 import { cacheKeys } from "@/lib/server/redis-cache-keys";
 import { createClientServerComponent } from "@/utils/supabase/server";
-import PageContainer from "../_components/PageContainer";
 
 import AdminDashboardApplicantStatusPie from "./_components/AdminDashboardApplicantStatusPie";
 import AdminDashboardMonthlyApplicantsLineChart from "./_components/AdminDashboardMonthlyApplicantsLineChart";
 import AdminDashboardProjectsPie from "./_components/AdminDashboardProjectsPie";
-import AdminDashboardTotalActiveIntern from "./_components/AdminDashboardTotalActiveIntern";
-import AdminDashboardTotalAdmin from "./_components/AdminDashboardTotalAdmin";
-import AdminDashboardTotalCodev from "./_components/AdminDashboardTotalCodev";
-import AdminDashboardTotalInactiveIntern from "./_components/AdminDashboardTotalInactiveIntern";
-import AdminDashboardTotalMentor from "./_components/AdminDashboardTotalMentor";
-import AdminDashboardTotalProjects from "./_components/AdminDashboardTotalProject";
+import AdminDashboardStatsCard from "./_components/AdminDashboardStatsCard";
 
 // Force dynamic rendering to avoid prerender errors with Supabase env vars
 export const dynamic = "force-dynamic";
@@ -153,19 +147,54 @@ export default async function AdminDashboard() {
             </div>
           </div>
 
-          {/* Metrics Grid */}
+          {/* Metrics Grid - UPDATED TO USE SHARED COMPONENT */}
           <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6">
-            <AdminDashboardTotalActiveIntern
+            <AdminDashboardStatsCard
+              title="Total Active Interns"
               count={dashboardData?.activeInterns}
+              description="Currently active interns"
+              iconName="UserCheck"
+              colorTheme="blue"
             />
-            <AdminDashboardTotalInactiveIntern
+            
+            <AdminDashboardStatsCard
+              title="Total Inactive Interns"
               count={dashboardData?.inactiveInterns}
+              description="Currently inactive interns"
+              iconName="UserX"
+              colorTheme="red"
             />
-            <AdminDashboardTotalCodev count={dashboardData?.codevs} />
-            <AdminDashboardTotalAdmin count={dashboardData?.admins} />
-            <AdminDashboardTotalMentor count={dashboardData?.mentors} />
-            <AdminDashboardTotalProjects
+            
+            <AdminDashboardStatsCard
+              title="Total Codevs"
+              count={dashboardData?.codevs}
+              description="Registered developers"
+              iconName="Users"
+              colorTheme="green"
+            />
+            
+            <AdminDashboardStatsCard
+              title="Total Admins"
+              count={dashboardData?.admins}
+              description="System administrators"
+              iconName="UserCog"
+              colorTheme="purple"
+            />
+            
+            <AdminDashboardStatsCard
+              title="Total Mentors"
+              count={dashboardData?.mentors}
+              description="Active mentors"
+              iconName="UserPen"
+              colorTheme="orange"
+            />
+            
+            <AdminDashboardStatsCard
+              title="Total Projects"
               count={dashboardData?.projectTotalCount}
+              description="Active projects"
+              iconName="FolderKanban"
+              colorTheme="cyan"
             />
           </div>
 
@@ -187,4 +216,4 @@ export default async function AdminDashboard() {
       </div>
     </div>
   );
-}
+}
\ No newline at end of file

From 4fcd1f458c266be7d641770137945e39261dc5ec Mon Sep 17 00:00:00 2001
From: raineer <raineerdelarita@gmail.com>
Date: Sun, 9 Nov 2025 09:40:46 +0800
Subject: [PATCH 4/5] font text white

---
 .../admin-dashboard/_components/AdminDashboardStatsCard.tsx   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/codebility/app/home/admin-dashboard/_components/AdminDashboardStatsCard.tsx b/apps/codebility/app/home/admin-dashboard/_components/AdminDashboardStatsCard.tsx
index bc9c57978..49f81e8aa 100644
--- a/apps/codebility/app/home/admin-dashboard/_components/AdminDashboardStatsCard.tsx
+++ b/apps/codebility/app/home/admin-dashboard/_components/AdminDashboardStatsCard.tsx
@@ -99,7 +99,7 @@ export default function AdminDashboardStatsCard({
       {/* Header */}
       <div className="relative flex flex-row items-center justify-between space-y-0 p-6 pb-2">
         <div className="space-y-1">
-          <p className="text-sm font-medium text-muted-foreground">
+          <p className="text-sm font-medium text-muted-foreground dark:text-white">
             {title}
           </p>
         </div>
@@ -114,7 +114,7 @@ export default function AdminDashboardStatsCard({
       
       {/* Content */}
       <div className="relative p-6 pt-0">
-        <div className="text-2xl font-bold">
+        <div className="text-2xl font-bold dark:text-white">
           {count !== undefined ? count.toLocaleString() : "N/A"}
         </div>
         <p className="text-xs text-muted-foreground">

From 9e2482464d08573aa67c58d94de8d7e8c209270a Mon Sep 17 00:00:00 2001
From: raineer <raineerdelarita@gmail.com>
Date: Wed, 12 Nov 2025 00:12:06 +0800
Subject: [PATCH 5/5] changes ui styling

---
 .../AdminDashboardApplicantStatusPie.tsx      | 19 +++++++++++++------
 ...minDashboardMonthlyApplicantsLineChart.tsx | 11 +++++++----
 .../_components/AdminDashboardProjectsPie.tsx | 19 +++++++++++++------
 3 files changed, 33 insertions(+), 16 deletions(-)

diff --git a/apps/codebility/app/home/admin-dashboard/_components/AdminDashboardApplicantStatusPie.tsx b/apps/codebility/app/home/admin-dashboard/_components/AdminDashboardApplicantStatusPie.tsx
index 0ffa56954..f6d9092f2 100644
--- a/apps/codebility/app/home/admin-dashboard/_components/AdminDashboardApplicantStatusPie.tsx
+++ b/apps/codebility/app/home/admin-dashboard/_components/AdminDashboardApplicantStatusPie.tsx
@@ -14,6 +14,7 @@ import {
   ChartLegendContent,
 } from "@/components/ui/chart";
 import { Pie, PieChart } from "recharts";
+import { cn } from "@/lib/utils";
 
 interface ApplicantStatusCounts extends Record<string, number> {}
 
@@ -28,9 +29,12 @@ export default function AdminDashboardApplicantStatusPie({
   
   if (!data)
     return (
-      <Card className="flex h-full flex-col relative overflow-hidden">
-        {/* Gradient background - only visible in dark mode */}
-        <div className="absolute inset-0 bg-gradient-to-br from-customBlue-950/10 to-purple-950/10 dark:block hidden" />
+      <Card className={cn(
+        "flex h-full flex-col relative overflow-hidden",
+        "bg-white dark:bg-gradient-to-br dark:from-blue-950 dark:via-slate-900 dark:to-slate-950",
+        "border-gray-200 dark:border-blue-900/30"
+      )}>
+        <div className="absolute inset-0 bg-gradient-to-br to-transparent pointer-events-none opacity-0 dark:opacity-100 dark:from-blue-500/10" />
         
         <CardHeader className="relative items-center pb-0">
           <CardTitle className="text-lg">{title}</CardTitle>
@@ -60,9 +64,12 @@ export default function AdminDashboardApplicantStatusPie({
   );
 
   return (
-    <Card className="flex h-full flex-col relative overflow-hidden">
-      {/* Gradient background - only visible in dark mode */}
-      <div className="absolute inset-0 bg-gradient-to-br from-customBlue-950/10 to-purple-950/10 dark:block hidden" />
+    <Card className={cn(
+      "flex h-full flex-col relative overflow-hidden",
+      "bg-white dark:bg-gradient-to-br dark:from-blue-950 dark:via-slate-900 dark:to-slate-950",
+      "border-gray-200 dark:border-blue-900/30"
+    )}>
+      <div className="absolute inset-0 bg-gradient-to-br to-transparent pointer-events-none opacity-0 dark:opacity-100 dark:from-blue-500/10" />
       
       <CardHeader className="relative items-center pb-0">
         <CardTitle className="text-lg">{title}</CardTitle>
diff --git a/apps/codebility/app/home/admin-dashboard/_components/AdminDashboardMonthlyApplicantsLineChart.tsx b/apps/codebility/app/home/admin-dashboard/_components/AdminDashboardMonthlyApplicantsLineChart.tsx
index 06636616a..2ae3d5bf2 100644
--- a/apps/codebility/app/home/admin-dashboard/_components/AdminDashboardMonthlyApplicantsLineChart.tsx
+++ b/apps/codebility/app/home/admin-dashboard/_components/AdminDashboardMonthlyApplicantsLineChart.tsx
@@ -21,6 +21,7 @@ import {
   ResponsiveContainer,
   XAxis,
 } from "recharts";
+import { cn } from "@/lib/utils";
 
 interface AdminDashboardMonthlyApplicantsLineChartProp {
   dateApplied?: string[];
@@ -29,7 +30,6 @@ interface AdminDashboardMonthlyApplicantsLineChartProp {
 export default function AdminDashboardMonthlyApplicantsLineChart({
   dateApplied = [],
 }: AdminDashboardMonthlyApplicantsLineChartProp) {
-  // Get current and previous 5 months
   const getLastSixMonths = () => {
     const now = new Date();
     const months: { month: string; year: number }[] = [];
@@ -74,9 +74,12 @@ export default function AdminDashboardMonthlyApplicantsLineChart({
   } satisfies ChartConfig;
 
   return (
-    <Card className="relative overflow-hidden">
-      {/* Gradient background - only visible in dark mode */}
-      <div className="absolute inset-0 bg-gradient-to-br from-customBlue-950/10 to-purple-950/10 dark:block hidden" />
+    <Card className={cn(
+      "relative overflow-hidden",
+      "bg-white dark:bg-gradient-to-br dark:from-green-950 dark:via-slate-900 dark:to-slate-950",
+      "border-gray-200 dark:border-green-900/30"
+    )}>
+      <div className="absolute inset-0 bg-gradient-to-br to-transparent pointer-events-none opacity-0 dark:opacity-100 dark:from-green-500/10" />
       
       <CardHeader className="relative">
         <CardTitle className="text-lg">Monthly Applicants</CardTitle>
diff --git a/apps/codebility/app/home/admin-dashboard/_components/AdminDashboardProjectsPie.tsx b/apps/codebility/app/home/admin-dashboard/_components/AdminDashboardProjectsPie.tsx
index 190fbac9c..6fa380e8a 100644
--- a/apps/codebility/app/home/admin-dashboard/_components/AdminDashboardProjectsPie.tsx
+++ b/apps/codebility/app/home/admin-dashboard/_components/AdminDashboardProjectsPie.tsx
@@ -14,6 +14,7 @@ import {
   ChartLegendContent,
 } from "@/components/ui/chart";
 import { Pie, PieChart } from "recharts";
+import { cn } from "@/lib/utils";
 
 interface ProjectCategoryCounts extends Record<string, number> {}
 
@@ -28,9 +29,12 @@ export default function AdminDashboardProjectsPie({
   
   if (!data)
     return (
-      <Card className="flex h-full flex-col relative overflow-hidden">
-        {/* Gradient background - only visible in dark mode */}
-        <div className="absolute inset-0 bg-gradient-to-br from-customBlue-950/10 to-purple-950/10 dark:block hidden" />
+      <Card className={cn(
+        "flex h-full flex-col relative overflow-hidden",
+        "bg-white dark:bg-gradient-to-br dark:from-cyan-950 dark:via-slate-900 dark:to-slate-950",
+        "border-gray-200 dark:border-cyan-900/30"
+      )}>
+        <div className="absolute inset-0 bg-gradient-to-br to-transparent pointer-events-none opacity-0 dark:opacity-100 dark:from-cyan-500/10" />
         
         <CardHeader className="relative items-center pb-0">
           <CardTitle className="text-lg">{title}</CardTitle>
@@ -65,9 +69,12 @@ export default function AdminDashboardProjectsPie({
   }, {} as ChartConfig);
 
   return (
-    <Card className="flex h-full flex-col relative overflow-hidden">
-      {/* Gradient background - only visible in dark mode */}
-      <div className="absolute inset-0 bg-gradient-to-br from-customBlue-950/10 to-purple-950/10 dark:block hidden" />
+    <Card className={cn(
+      "flex h-full flex-col relative overflow-hidden",
+      "bg-white dark:bg-gradient-to-br dark:from-cyan-950 dark:via-slate-900 dark:to-slate-950",
+      "border-gray-200 dark:border-cyan-900/30"
+    )}>
+      <div className="absolute inset-0 bg-gradient-to-br to-transparent pointer-events-none opacity-0 dark:opacity-100 dark:from-cyan-500/10" />
       
       <CardHeader className="relative items-center pb-0">
         <CardTitle className="text-lg">{title}</CardTitle>