Skip to content

Commit 181a3a4

Browse files
author
raineer
committed
gradient
1 parent ce93849 commit 181a3a4

9 files changed

Lines changed: 171 additions & 56 deletions

‎apps/codebility/app/home/admin-dashboard/_components/AdminDashboardApplicantStatusPie.tsx‎

Lines changed: 24 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import {
1414
ChartLegendContent,
1515
} from "@/components/ui/chart";
1616
import { Pie, PieChart } from "recharts";
17+
import { cn } from "@/lib/utils";
1718

1819
interface ApplicantStatusCounts extends Record<string, number> {}
1920

@@ -28,12 +29,20 @@ export default function AdminDashboardApplicantStatusPie({
2829

2930
if (!data)
3031
return (
31-
<Card className="flex h-full flex-col">
32+
<Card
33+
className={cn(
34+
"flex h-full flex-col",
35+
// Light mode - clean white
36+
"bg-white border-gray-200",
37+
// Dark mode - Home's silver gradient
38+
"dark:bg-gradient-to-r dark:from-[#464646] dark:to-[#a8a8a8]"
39+
)}
40+
>
3241
<CardHeader className="items-center pb-0">
33-
<CardTitle className="text-lg">{title}</CardTitle>
42+
<CardTitle className="text-lg dark:text-white">{title}</CardTitle>
3443
</CardHeader>
3544
<CardContent className="flex flex-1 items-center justify-center">
36-
<p className="text-muted-foreground">No data available</p>
45+
<p className="text-muted-foreground dark:text-white/70">No data available</p>
3746
</CardContent>
3847
</Card>
3948
);
@@ -57,10 +66,18 @@ export default function AdminDashboardApplicantStatusPie({
5766
);
5867

5968
return (
60-
<Card className="flex h-full flex-col">
69+
<Card
70+
className={cn(
71+
"flex h-full flex-col",
72+
// Light mode - clean white
73+
"bg-white border-gray-200",
74+
// Dark mode - Home's silver gradient
75+
"dark:bg-gradient-to-r dark:from-[#464646] dark:to-[#a8a8a8]"
76+
)}
77+
>
6178
<CardHeader className="items-center pb-0">
62-
<CardTitle className="text-lg">{title}</CardTitle>
63-
<CardDescription className="text-center text-sm">
79+
<CardTitle className="text-lg dark:text-white">{title}</CardTitle>
80+
<CardDescription className="text-center text-sm dark:text-white/70">
6481
Distribution of application statuses
6582
</CardDescription>
6683
</CardHeader>
@@ -84,4 +101,4 @@ export default function AdminDashboardApplicantStatusPie({
84101
</CardContent>
85102
</Card>
86103
);
87-
}
104+
}

‎apps/codebility/app/home/admin-dashboard/_components/AdminDashboardMonthlyApplicantsLineChart.tsx‎

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import {
2121
ResponsiveContainer,
2222
XAxis,
2323
} from "recharts";
24+
import { cn } from "@/lib/utils";
2425

2526
interface AdminDashboardMonthlyApplicantsLineChartProp {
2627
dateApplied?: string[];
@@ -74,10 +75,17 @@ export default function AdminDashboardMonthlyApplicantsLineChart({
7475
} satisfies ChartConfig;
7576

7677
return (
77-
<Card>
78+
<Card
79+
className={cn(
80+
// Light mode - clean white
81+
"bg-white border-gray-200",
82+
// Dark mode - Home's gold gradient
83+
"dark:bg-gradient-to-r dark:from-[#9c813b] dark:to-[#ecc258]"
84+
)}
85+
>
7886
<CardHeader>
79-
<CardTitle className="text-lg">Monthly Applicants</CardTitle>
80-
<CardDescription>{description}</CardDescription>
87+
<CardTitle className="text-lg dark:text-white">Monthly Applicants</CardTitle>
88+
<CardDescription className="dark:text-white/70">{description}</CardDescription>
8189
</CardHeader>
8290
<CardContent className="h-80">
8391
<ResponsiveContainer width="100%" height="100%">
@@ -125,10 +133,10 @@ export default function AdminDashboardMonthlyApplicantsLineChart({
125133
</ResponsiveContainer>
126134
</CardContent>
127135
<CardFooter className="flex-col items-start gap-2 text-sm">
128-
<div className="leading-none text-muted-foreground">
136+
<div className="leading-none text-muted-foreground dark:text-white/70">
129137
Showing monthly applicants for the current and previous 5 months
130138
</div>
131139
</CardFooter>
132140
</Card>
133141
);
134-
}
142+
}

‎apps/codebility/app/home/admin-dashboard/_components/AdminDashboardProjectsPie.tsx‎

Lines changed: 24 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import {
1414
ChartLegendContent,
1515
} from "@/components/ui/chart";
1616
import { Pie, PieChart } from "recharts";
17+
import { cn } from "@/lib/utils";
1718

1819
interface ProjectCategoryCounts extends Record<string, number> {}
1920

@@ -28,12 +29,20 @@ export default function AdminDashboardProjectsPie({
2829

2930
if (!data)
3031
return (
31-
<Card className="flex h-full flex-col">
32+
<Card
33+
className={cn(
34+
"flex h-full flex-col",
35+
// Light mode - clean white
36+
"bg-white border-gray-200",
37+
// Dark mode - Home's bronze gradient
38+
"dark:bg-gradient-to-r dark:from-[#563c1e] dark:to-[#ba8240]"
39+
)}
40+
>
3241
<CardHeader className="items-center pb-0">
33-
<CardTitle className="text-lg">{title}</CardTitle>
42+
<CardTitle className="text-lg dark:text-white">{title}</CardTitle>
3443
</CardHeader>
3544
<CardContent className="flex flex-1 items-center justify-center">
36-
<p className="text-muted-foreground">No data available</p>
45+
<p className="text-muted-foreground dark:text-white/70">No data available</p>
3746
</CardContent>
3847
</Card>
3948
);
@@ -62,10 +71,18 @@ export default function AdminDashboardProjectsPie({
6271
}, {} as ChartConfig);
6372

6473
return (
65-
<Card className="flex h-full flex-col">
74+
<Card
75+
className={cn(
76+
"flex h-full flex-col",
77+
// Light mode - clean white
78+
"bg-white border-gray-200",
79+
// Dark mode - Home's bronze gradient
80+
"dark:bg-gradient-to-r dark:from-[#563c1e] dark:to-[#ba8240]"
81+
)}
82+
>
6683
<CardHeader className="items-center pb-0">
67-
<CardTitle className="text-lg">{title}</CardTitle>
68-
<CardDescription className="text-center text-sm">
84+
<CardTitle className="text-lg dark:text-white">{title}</CardTitle>
85+
<CardDescription className="text-center text-sm dark:text-white/70">
6986
Distribution by project categories
7087
</CardDescription>
7188
</CardHeader>
@@ -89,4 +106,4 @@ export default function AdminDashboardProjectsPie({
89106
</CardContent>
90107
</Card>
91108
);
92-
}
109+
}

‎apps/codebility/app/home/admin-dashboard/_components/AdminDashboardTotalActiveIntern.tsx‎

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,21 @@ export default function AdminDashboardTotalActiveIntern({
1414
className,
1515
}: AdminDashboardTotalActiveInternProps) {
1616
return (
17-
<Card className={cn("group transition-all hover:shadow-lg", className)}>
18-
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
17+
<Card
18+
className={cn(
19+
"group relative overflow-hidden transition-all hover:shadow-lg",
20+
// Dark mode gradient background - blue theme
21+
"bg-gradient-to-br from-blue-950/40 via-slate-900/60 to-slate-950/40",
22+
"dark:from-blue-950/30 dark:via-slate-900/50 dark:to-slate-950/30",
23+
// Border for definition
24+
"border border-blue-900/20 dark:border-blue-800/20",
25+
className
26+
)}
27+
>
28+
{/* Subtle overlay for depth */}
29+
<div className="absolute inset-0 bg-gradient-to-br from-blue-500/5 to-transparent pointer-events-none" />
30+
31+
<CardHeader className="relative flex flex-row items-center justify-between space-y-0 pb-2">
1932
<div className="space-y-1">
2033
<p className="text-sm font-medium text-muted-foreground">
2134
Total Active Interns
@@ -25,7 +38,7 @@ export default function AdminDashboardTotalActiveIntern({
2538
<UserCheck className="h-4 w-4" />
2639
</div>
2740
</CardHeader>
28-
<CardContent>
41+
<CardContent className="relative">
2942
<div className="text-2xl font-bold">
3043
{count !== undefined ? count.toLocaleString() : "N/A"}
3144
</div>
@@ -35,4 +48,4 @@ export default function AdminDashboardTotalActiveIntern({
3548
</CardContent>
3649
</Card>
3750
);
38-
}
51+
}

‎apps/codebility/app/home/admin-dashboard/_components/AdminDashboardTotalAdmin.tsx‎

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,21 @@ export default function AdminDashboardTotalAdmin({
1414
className,
1515
}: AdminDashboardTotalAdminProps) {
1616
return (
17-
<Card className={cn("group transition-all hover:shadow-lg", className)}>
18-
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
17+
<Card
18+
className={cn(
19+
"group relative overflow-hidden transition-all hover:shadow-lg",
20+
// Dark mode gradient background - purple theme
21+
"bg-gradient-to-br from-purple-950/40 via-slate-900/60 to-slate-950/40",
22+
"dark:from-purple-950/30 dark:via-slate-900/50 dark:to-slate-950/30",
23+
// Border for definition
24+
"border border-purple-900/20 dark:border-purple-800/20",
25+
className
26+
)}
27+
>
28+
{/* Subtle overlay for depth */}
29+
<div className="absolute inset-0 bg-gradient-to-br from-purple-500/5 to-transparent pointer-events-none" />
30+
31+
<CardHeader className="relative flex flex-row items-center justify-between space-y-0 pb-2">
1932
<div className="space-y-1">
2033
<p className="text-sm font-medium text-muted-foreground">
2134
Total Admins
@@ -25,7 +38,7 @@ export default function AdminDashboardTotalAdmin({
2538
<UserCog className="h-4 w-4" />
2639
</div>
2740
</CardHeader>
28-
<CardContent>
41+
<CardContent className="relative">
2942
<div className="text-2xl font-bold">
3043
{count !== undefined ? count.toLocaleString() : "N/A"}
3144
</div>
@@ -35,4 +48,4 @@ export default function AdminDashboardTotalAdmin({
3548
</CardContent>
3649
</Card>
3750
);
38-
}
51+
}

‎apps/codebility/app/home/admin-dashboard/_components/AdminDashboardTotalCodev.tsx‎

Lines changed: 25 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,51 @@
11
"use client";
22

3-
import React, { memo } from "react";
43
import { Card, CardContent, CardHeader } from "@/components/ui/card";
5-
import { UserPlus } from "lucide-react";
4+
import { UserPen } from "lucide-react";
65
import { cn } from "@/lib/utils";
76

8-
interface AdminDashboardTotalCodevProps {
7+
interface AdminDashboardTotalMentorProps {
98
count?: number;
109
className?: string;
1110
}
1211

13-
const AdminDashboardTotalCodev = memo(({
12+
export default function AdminDashboardTotalMentor({
1413
count,
1514
className,
16-
}: AdminDashboardTotalCodevProps) => {
15+
}: AdminDashboardTotalMentorProps) {
1716
return (
18-
<Card className={cn("group transition-all hover:shadow-lg", className)}>
19-
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
17+
<Card
18+
className={cn(
19+
"group relative overflow-hidden transition-all hover:shadow-lg",
20+
// Dark mode gradient background - orange theme
21+
"bg-gradient-to-br from-orange-950/40 via-slate-900/60 to-slate-950/40",
22+
"dark:from-orange-950/30 dark:via-slate-900/50 dark:to-slate-950/30",
23+
// Border for definition
24+
"border border-orange-900/20 dark:border-orange-800/20",
25+
className
26+
)}
27+
>
28+
{/* Subtle overlay for depth */}
29+
<div className="absolute inset-0 bg-gradient-to-br from-orange-500/5 to-transparent pointer-events-none" />
30+
31+
<CardHeader className="relative flex flex-row items-center justify-between space-y-0 pb-2">
2032
<div className="space-y-1">
2133
<p className="text-sm font-medium text-muted-foreground">
22-
Total Codevs
34+
Total Mentors
2335
</p>
2436
</div>
25-
<div className="rounded-lg bg-green-500/10 p-2 text-green-500 transition-colors group-hover:bg-green-500/20">
26-
<UserPlus className="h-4 w-4" />
37+
<div className="rounded-lg bg-orange-500/10 p-2 text-orange-500 transition-colors group-hover:bg-orange-500/20">
38+
<UserPen className="h-4 w-4" />
2739
</div>
2840
</CardHeader>
29-
<CardContent>
41+
<CardContent className="relative">
3042
<div className="text-2xl font-bold">
3143
{count !== undefined ? count.toLocaleString() : "N/A"}
3244
</div>
3345
<p className="text-xs text-muted-foreground">
34-
Registered developers
46+
Active mentors
3547
</p>
3648
</CardContent>
3749
</Card>
3850
);
39-
});
40-
41-
AdminDashboardTotalCodev.displayName = "AdminDashboardTotalCodev";
42-
43-
export default AdminDashboardTotalCodev;
51+
}

‎apps/codebility/app/home/admin-dashboard/_components/AdminDashboardTotalInactiveIntern.tsx‎

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,21 @@ export default function AdminDashboardTotalInactiveIntern({
1414
className,
1515
}: AdminDashboardTotalInactiveInternProps) {
1616
return (
17-
<Card className={cn("group transition-all hover:shadow-lg", className)}>
18-
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
17+
<Card
18+
className={cn(
19+
"group relative overflow-hidden transition-all hover:shadow-lg",
20+
// Dark mode gradient background - red theme
21+
"bg-gradient-to-br from-red-950/40 via-slate-900/60 to-slate-950/40",
22+
"dark:from-red-950/30 dark:via-slate-900/50 dark:to-slate-950/30",
23+
// Border for definition
24+
"border border-red-900/20 dark:border-red-800/20",
25+
className
26+
)}
27+
>
28+
{/* Subtle overlay for depth */}
29+
<div className="absolute inset-0 bg-gradient-to-br from-red-500/5 to-transparent pointer-events-none" />
30+
31+
<CardHeader className="relative flex flex-row items-center justify-between space-y-0 pb-2">
1932
<div className="space-y-1">
2033
<p className="text-sm font-medium text-muted-foreground">
2134
Total Inactive Interns
@@ -25,7 +38,7 @@ export default function AdminDashboardTotalInactiveIntern({
2538
<UserX className="h-4 w-4" />
2639
</div>
2740
</CardHeader>
28-
<CardContent>
41+
<CardContent className="relative">
2942
<div className="text-2xl font-bold">
3043
{count !== undefined ? count.toLocaleString() : "N/A"}
3144
</div>
@@ -35,4 +48,4 @@ export default function AdminDashboardTotalInactiveIntern({
3548
</CardContent>
3649
</Card>
3750
);
38-
}
51+
}

‎apps/codebility/app/home/admin-dashboard/_components/AdminDashboardTotalMentor.tsx‎

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,21 @@ export default function AdminDashboardTotalMentor({
1414
className,
1515
}: AdminDashboardTotalMentorProps) {
1616
return (
17-
<Card className={cn("group transition-all hover:shadow-lg", className)}>
18-
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
17+
<Card
18+
className={cn(
19+
"group relative overflow-hidden transition-all hover:shadow-lg",
20+
// Dark mode gradient background - orange theme
21+
"bg-gradient-to-br from-orange-950/40 via-slate-900/60 to-slate-950/40",
22+
"dark:from-orange-950/30 dark:via-slate-900/50 dark:to-slate-950/30",
23+
// Border for definition
24+
"border border-orange-900/20 dark:border-orange-800/20",
25+
className
26+
)}
27+
>
28+
{/* Subtle overlay for depth */}
29+
<div className="absolute inset-0 bg-gradient-to-br from-orange-500/5 to-transparent pointer-events-none" />
30+
31+
<CardHeader className="relative flex flex-row items-center justify-between space-y-0 pb-2">
1932
<div className="space-y-1">
2033
<p className="text-sm font-medium text-muted-foreground">
2134
Total Mentors
@@ -25,7 +38,7 @@ export default function AdminDashboardTotalMentor({
2538
<UserPen className="h-4 w-4" />
2639
</div>
2740
</CardHeader>
28-
<CardContent>
41+
<CardContent className="relative">
2942
<div className="text-2xl font-bold">
3043
{count !== undefined ? count.toLocaleString() : "N/A"}
3144
</div>
@@ -35,4 +48,4 @@ export default function AdminDashboardTotalMentor({
3548
</CardContent>
3649
</Card>
3750
);
38-
}
51+
}

0 commit comments

Comments
 (0)