Skip to content

Commit 83ea582

Browse files
yyyortyyyort
authored
Merge pull request #413 from CodebilityDev/ian/dev
Ian/dev
2 parents 711c829 + 5c00bf7 commit 83ea582

55 files changed

Lines changed: 2855 additions & 1117 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎apps/codebility/app/home/(dashboard)/_components/DashboardProfile.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@ export default function DashboardProfile() {
8888
{user && <DashboardCertificate />}
8989
<div className="relative mx-auto flex flex-col items-center gap-4">
9090
<div className="text-center">
91-
<h2 className="to-customBlue-600 mt-2 bg-gradient-to-r from-purple-600 bg-clip-text text-2xl font-bold text-transparent sm:mt-4 sm:text-3xl md:mt-0">
91+
<h2 className="to-blue-600 mt-2 bg-gradient-to-r from-purple-600 bg-clip-text text-2xl font-bold text-transparent sm:mt-4 sm:text-3xl md:mt-0">
9292
Hello, {user?.first_name ?? ""}!
9393
</h2>
9494
<p className="text-xs text-gray-500 dark:text-gray-400 sm:text-sm">

‎apps/codebility/app/home/(dashboard)/_components/DashboardWeeklyTop.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -306,7 +306,7 @@ export default function WeeklyTop() {
306306
<Trophy className="h-5 w-5 text-white" />
307307
</div>
308308
<div>
309-
<h2 className="text-2xl font-bold bg-gradient-to-r from-purple-600 to-customBlue-600 bg-clip-text text-transparent">
309+
<h2 className="text-2xl font-bold bg-gradient-to-r from-purple-600 to-blue-600 bg-clip-text text-transparent">
310310
🏆 Leaderboard
311311
</h2>
312312
<p className="text-sm text-gray-500 dark:text-gray-400">Compete and climb the ranks!</p>

‎apps/codebility/app/home/_components/LeftSidebar.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,7 @@ const LeftSidebar = () => {
9999
initial={false}
100100
animate={isToggleOpen ? "open" : "closed"}
101101
variants={sidebarVariants}
102-
className="background-navbar sticky left-0 top-0 z-40 hidden h-screen flex-col gap-8 overflow-hidden p-1 border-r border-gray-200 dark:border-gray-800 lg:flex"
102+
className="sticky left-0 top-0 z-40 hidden h-screen flex-col gap-8 overflow-hidden p-1 bg-white/80 dark:bg-gray-950/80 backdrop-blur-xl border-r border-gray-200/50 dark:border-gray-800/50 lg:flex"
103103
role="complementary"
104104
aria-label="Main navigation sidebar"
105105
>
@@ -210,7 +210,7 @@ const LeftSidebar = () => {
210210
prefetch={true}
211211
className={`${
212212
isActive
213-
? "primary-gradient text-light-900 rounded-lg"
213+
? "bg-gradient-to-r from-purple-800 via-customBlue-900 to-sky-500 text-light-900 rounded-lg"
214214
: "text-dark300_light900"
215215
} focus:ring-customBlue-500 mt-2 flex items-center gap-4 rounded-sm px-4 py-4 transition duration-100 hover:bg-[#F5F5F5] focus:outline-none focus:ring-2 focus:ring-offset-2 dark:hover:bg-[#131417]`}
216216
aria-current={isActive ? "page" : undefined}

‎apps/codebility/app/home/_components/LeftSidebarClient.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ const LeftSidebarClient = ({ initialSidebarData }: LeftSidebarClientProps) => {
5151
initial={false}
5252
animate={isToggleOpen ? "open" : "closed"}
5353
variants={sidebarVariants}
54-
className="background-navbar sticky left-0 top-0 z-40 hidden h-screen flex-col gap-8 overflow-hidden p-1 border-r border-gray-200 dark:border-gray-800 lg:flex"
54+
className="sticky left-0 top-0 z-40 hidden h-screen flex-col gap-8 overflow-hidden p-1 bg-white/80 dark:bg-gray-950/90 backdrop-blur-xl border-r border-gray-200/50 dark:border-gray-800/50 lg:flex"
5555
role="complementary"
5656
aria-label="Main navigation sidebar"
5757
>
@@ -162,7 +162,7 @@ const LeftSidebarClient = ({ initialSidebarData }: LeftSidebarClientProps) => {
162162
prefetch={true}
163163
className={`${
164164
isActive
165-
? "primary-gradient text-light-900 rounded-lg"
165+
? "bg-gradient-to-r from-purple-800 via-customBlue-900 to-sky-500 text-light-900 rounded-lg"
166166
: "text-dark300_light900"
167167
} focus:ring-customBlue-500 mt-2 flex items-center gap-4 rounded-sm px-4 py-4 transition duration-100 hover:bg-[#F5F5F5] focus:outline-none focus:ring-2 focus:ring-offset-2 dark:hover:bg-[#131417]`}
168168
aria-current={isActive ? "page" : undefined}

‎apps/codebility/app/home/_components/MobileNav.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -141,7 +141,7 @@ const MobileNav = () => {
141141
id="mobile-navigation"
142142
aria-describedby="mobile-nav-description"
143143
side="left"
144-
className="overflow-y-auto border-r border-zinc-300 bg-[#OEOEOE] bg-opacity-80 backdrop-blur-lg dark:border-zinc-800"
144+
className="overflow-y-auto bg-white/80 dark:bg-gray-950/80 backdrop-blur-xl border-r border-gray-200/50 dark:border-gray-800/50"
145145
role="dialog"
146146
aria-labelledby="mobile-nav-title"
147147
>

‎apps/codebility/app/home/_components/PageLoadingAnimation.tsx‎

Lines changed: 43 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
"use client";
22

33
import { motion } from "framer-motion";
4+
import Image from "next/image";
45

56
export default function PageLoadingAnimation() {
67
return (
@@ -63,42 +64,29 @@ export default function PageLoadingAnimation() {
6364
<motion.div
6465
animate={{
6566
scale: [1, 1.2, 1],
67+
rotate: 360,
6668
}}
6769
transition={{
68-
duration: 2,
69-
repeat: Infinity,
70-
ease: "easeInOut",
70+
scale: {
71+
duration: 2,
72+
repeat: Infinity,
73+
ease: "easeInOut",
74+
},
75+
rotate: {
76+
duration: 4,
77+
repeat: Infinity,
78+
ease: "linear",
79+
},
7180
}}
7281
>
73-
<svg
74-
width="40"
75-
height="40"
76-
viewBox="0 0 24 24"
77-
fill="none"
78-
className="text-customBlue-500"
79-
>
80-
<path
81-
d="M12 2L2 7L12 12L22 7L12 2Z"
82-
stroke="currentColor"
83-
strokeWidth="2"
84-
strokeLinecap="round"
85-
strokeLinejoin="round"
86-
/>
87-
<path
88-
d="M2 17L12 22L22 17"
89-
stroke="currentColor"
90-
strokeWidth="2"
91-
strokeLinecap="round"
92-
strokeLinejoin="round"
93-
/>
94-
<path
95-
d="M2 12L12 17L22 12"
96-
stroke="currentColor"
97-
strokeWidth="2"
98-
strokeLinecap="round"
99-
strokeLinejoin="round"
100-
/>
101-
</svg>
82+
<Image
83+
src="/assets/svgs/icon-codebility.svg"
84+
alt=""
85+
width={50}
86+
height={50}
87+
style={{ width: "100%", height: "100%" }}
88+
aria-hidden="true"
89+
/>
10290
</motion.div>
10391
</div>
10492
</motion.div>
@@ -124,14 +112,33 @@ export default function PageLoadingAnimation() {
124112
</div>
125113

126114
{/* Loading text */}
127-
<motion.p
128-
className="text-sm font-medium text-gray-600 dark:text-gray-400"
115+
<motion.div
116+
className="flex items-center text-sm font-medium text-gray-600 dark:text-gray-400"
129117
initial={{ opacity: 0, y: 10 }}
130118
animate={{ opacity: 1, y: 0 }}
131119
transition={{ delay: 0.3 }}
132120
>
133-
Loading your workspace...
134-
</motion.p>
121+
<span>console.log(loading)</span>
122+
<div className="ml-2 flex">
123+
{[0, 1, 2].map((i) => (
124+
<motion.span
125+
key={i}
126+
className="inline-block"
127+
animate={{
128+
opacity: [0, 1, 0],
129+
}}
130+
transition={{
131+
duration: 1.5,
132+
repeat: Infinity,
133+
delay: i * 0.3,
134+
ease: "easeInOut",
135+
}}
136+
>
137+
.
138+
</motion.span>
139+
))}
140+
</div>
141+
</motion.div>
135142
</div>
136143

137144
{/* Progress bar */}

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

Lines changed: 20 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -25,46 +25,56 @@ export default function AdminDashboardApplicantStatusPie({
2525
data,
2626
}: AdminDashboardApplicantStatusPieProps) {
2727
const title = "Total Applicant Status";
28+
2829
if (!data)
2930
return (
30-
<Card className="flex h-full flex-col bg-black">
31+
<Card className="flex h-full flex-col">
3132
<CardHeader className="items-center pb-0">
32-
<CardTitle>{title}</CardTitle>
33+
<CardTitle className="text-lg">{title}</CardTitle>
3334
</CardHeader>
35+
<CardContent className="flex flex-1 items-center justify-center">
36+
<p className="text-muted-foreground">No data available</p>
37+
</CardContent>
3438
</Card>
3539
);
3640

3741
const chartData = Object.keys(data || {}).map((status) => ({
3842
status,
3943
applicants: data[status],
40-
fill: `var(--color-${status})`, // Assuming your color variable names match the status
44+
fill: `var(--color-${status})`,
4145
}));
4246

4347
const chartConfig = Object.keys(data || {}).reduce(
4448
(config, status) => {
45-
const capitalizedLabel = status.charAt(0).toUpperCase() + status.slice(1); // Capitalize the first letter
49+
const capitalizedLabel = status.charAt(0).toUpperCase() + status.slice(1);
4650
config[status] = {
4751
label: capitalizedLabel,
48-
color: `hsl(var(--chart-${Object.keys(config).length + 1}))`, // Generate color based on index
52+
color: `hsl(var(--chart-${Object.keys(config).length + 1}))`,
4953
};
5054
return config;
5155
},
5256
{} as Record<string, { label: string; color: string }>,
5357
);
5458

5559
return (
56-
<Card className="flex h-full flex-col bg-black">
60+
<Card className="flex h-full flex-col">
5761
<CardHeader className="items-center pb-0">
58-
<CardTitle>{title}</CardTitle>
59-
{/* <CardDescription>All-time status data</CardDescription> */}
62+
<CardTitle className="text-lg">{title}</CardTitle>
63+
<CardDescription className="text-center text-sm">
64+
Distribution of application statuses
65+
</CardDescription>
6066
</CardHeader>
6167
<CardContent className="flex-1 pb-0">
6268
<ChartContainer
6369
config={chartConfig}
64-
className="mx-auto aspect-square max-h-[300px]"
70+
className="mx-auto aspect-square max-h-[350px]"
6571
>
6672
<PieChart>
67-
<Pie data={chartData} dataKey="applicants" />
73+
<Pie
74+
data={chartData}
75+
dataKey="applicants"
76+
strokeWidth={2}
77+
/>
6878
<ChartLegend
6979
content={<ChartLegendContent nameKey="status" />}
7080
className="-translate-y-2 flex-wrap gap-2 [&>*]:basis-1/4 [&>*]:justify-center"

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

Lines changed: 23 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -74,37 +74,51 @@ export default function AdminDashboardMonthlyApplicantsLineChart({
7474
} satisfies ChartConfig;
7575

7676
return (
77-
<Card className="bg-black">
77+
<Card>
7878
<CardHeader>
79-
<CardTitle>Monthly Applicants</CardTitle>
79+
<CardTitle className="text-lg">Monthly Applicants</CardTitle>
8080
<CardDescription>{description}</CardDescription>
8181
</CardHeader>
82-
<CardContent className="h-64">
82+
<CardContent className="h-80">
8383
<ResponsiveContainer width="100%" height="100%">
8484
<ChartContainer config={chartConfig}>
8585
<LineChart
8686
accessibilityLayer
8787
data={chartData}
88-
margin={{ left: 12, right: 12 }}
88+
margin={{ left: 12, right: 12, top: 12, bottom: 12 }}
8989
>
90-
<CartesianGrid vertical={false} />
90+
<CartesianGrid
91+
strokeDasharray="3 3"
92+
vertical={false}
93+
className="opacity-30"
94+
/>
9195
<XAxis
9296
dataKey="month"
9397
tickLine={false}
9498
axisLine={false}
9599
tickMargin={8}
96100
tickFormatter={(value) => value.slice(0, 3)}
101+
className="text-xs"
97102
/>
98103
<ChartTooltip
99-
cursor={false}
104+
cursor={{ strokeDasharray: "3 3" }}
100105
content={<ChartTooltipContent hideLabel />}
101106
/>
102107
<Line
103108
dataKey="applicants"
104-
type="natural"
109+
type="monotone"
105110
stroke="var(--color-applicants)"
106-
strokeWidth={2}
107-
dot={false}
111+
strokeWidth={3}
112+
dot={{
113+
fill: "var(--color-applicants)",
114+
strokeWidth: 2,
115+
r: 4
116+
}}
117+
activeDot={{
118+
r: 6,
119+
stroke: "var(--color-applicants)",
120+
strokeWidth: 2
121+
}}
108122
/>
109123
</LineChart>
110124
</ChartContainer>

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

Lines changed: 17 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -25,12 +25,16 @@ export default function AdminDashboardProjectsPie({
2525
data,
2626
}: AdminDashboardProjectsPieProps) {
2727
const title = "Projects";
28+
2829
if (!data)
2930
return (
30-
<Card className="flex h-full flex-col bg-black">
31+
<Card className="flex h-full flex-col">
3132
<CardHeader className="items-center pb-0">
32-
<CardTitle>{title}</CardTitle>
33+
<CardTitle className="text-lg">{title}</CardTitle>
3334
</CardHeader>
35+
<CardContent className="flex flex-1 items-center justify-center">
36+
<p className="text-muted-foreground">No data available</p>
37+
</CardContent>
3438
</Card>
3539
);
3640

@@ -58,18 +62,24 @@ export default function AdminDashboardProjectsPie({
5862
}, {} as ChartConfig);
5963

6064
return (
61-
<Card className="flex h-full flex-col bg-black">
65+
<Card className="flex h-full flex-col">
6266
<CardHeader className="items-center pb-0">
63-
<CardTitle>{title}</CardTitle>
64-
{/* <CardDescription>All-time status data</CardDescription> */}
67+
<CardTitle className="text-lg">{title}</CardTitle>
68+
<CardDescription className="text-center text-sm">
69+
Distribution by project categories
70+
</CardDescription>
6571
</CardHeader>
6672
<CardContent className="flex-1 pb-0">
6773
<ChartContainer
6874
config={chartConfig}
69-
className="mx-auto aspect-square max-h-[300px]"
75+
className="mx-auto aspect-square max-h-[350px]"
7076
>
7177
<PieChart>
72-
<Pie data={chartData} dataKey="projects" />
78+
<Pie
79+
data={chartData}
80+
dataKey="projects"
81+
strokeWidth={2}
82+
/>
7383
<ChartLegend
7484
content={<ChartLegendContent nameKey="category" />}
7585
className="-translate-y-2 flex-wrap gap-2 [&>*]:basis-1/4 [&>*]:justify-center"

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

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,28 +2,36 @@
22

33
import { Card, CardContent, CardHeader } from "@/components/ui/card";
44
import { UserCheck } from "lucide-react";
5+
import { cn } from "@/lib/utils";
56

67
interface AdminDashboardTotalActiveInternProps {
78
count?: number;
9+
className?: string;
810
}
911

1012
export default function AdminDashboardTotalActiveIntern({
1113
count,
14+
className,
1215
}: AdminDashboardTotalActiveInternProps) {
1316
return (
14-
<Card className="flex h-full flex-col bg-black">
17+
<Card className={cn("group transition-all hover:shadow-lg", className)}>
1518
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
16-
<p className="text-sm font-medium text-muted-foreground">
17-
Total Active Interns
18-
</p>
19-
<span>
20-
<UserCheck />
21-
</span>
19+
<div className="space-y-1">
20+
<p className="text-sm font-medium text-muted-foreground">
21+
Total Active Interns
22+
</p>
23+
</div>
24+
<div className="rounded-lg bg-blue-500/10 p-2 text-blue-500 transition-colors group-hover:bg-blue-500/20">
25+
<UserCheck className="h-4 w-4" />
26+
</div>
2227
</CardHeader>
2328
<CardContent>
2429
<div className="text-2xl font-bold">
25-
{count !== undefined ? count : "N/A"}
30+
{count !== undefined ? count.toLocaleString() : "N/A"}
2631
</div>
32+
<p className="text-xs text-muted-foreground">
33+
Currently active interns
34+
</p>
2735
</CardContent>
2836
</Card>
2937
);

0 commit comments

Comments
 (0)