Skip to content

Commit f4b284b

Browse files
yyyortyyyort
committed
improve admin-dashboard ui
1 parent 06e11d1 commit f4b284b

6 files changed

Lines changed: 189 additions & 125 deletions

File tree

‎apps/codebility/app/home/admin-dashboard/_components/AdminDashboardTotalInactiveIntern.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 { UserX } from "lucide-react";
5+
import { cn } from "@/lib/utils";
56

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

1012
export default function AdminDashboardTotalInactiveIntern({
1113
count,
14+
className,
1215
}: AdminDashboardTotalInactiveInternProps) {
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 Inactive Interns
18-
</p>
19-
<span>
20-
<UserX />
21-
</span>
19+
<div className="space-y-1">
20+
<p className="text-sm font-medium text-muted-foreground">
21+
Total Inactive Interns
22+
</p>
23+
</div>
24+
<div className="rounded-lg bg-red-500/10 p-2 text-red-500 transition-colors group-hover:bg-red-500/20">
25+
<UserX 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 inactive interns
34+
</p>
2735
</CardContent>
2836
</Card>
2937
);

‎apps/codebility/app/home/admin-dashboard/_components/AdminDashboardTotalMentor.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 { UserPen } from "lucide-react";
5+
import { cn } from "@/lib/utils";
56

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

1012
export default function AdminDashboardTotalMentor({
1113
count,
14+
className,
1215
}: AdminDashboardTotalMentorProps) {
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 Mentors
18-
</p>
19-
<span>
20-
<UserPen />
21-
</span>
19+
<div className="space-y-1">
20+
<p className="text-sm font-medium text-muted-foreground">
21+
Total Mentors
22+
</p>
23+
</div>
24+
<div className="rounded-lg bg-orange-500/10 p-2 text-orange-500 transition-colors group-hover:bg-orange-500/20">
25+
<UserPen 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+
Active mentors
34+
</p>
2735
</CardContent>
2836
</Card>
2937
);

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

Lines changed: 17 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,37 @@
11
"use client";
22

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

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

1012
export default function AdminDashboardTotalProject({
1113
count,
14+
className,
1215
}: AdminDashboardTotalProjectsProps) {
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 Projects
18-
</p>
19-
<span>
20-
<Server />
21-
</span>
19+
<div className="space-y-1">
20+
<p className="text-sm font-medium text-muted-foreground">
21+
Total Projects
22+
</p>
23+
</div>
24+
<div className="rounded-lg bg-cyan-500/10 p-2 text-cyan-500 transition-colors group-hover:bg-cyan-500/20">
25+
<FolderKanban 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+
Active projects
34+
</p>
2735
</CardContent>
2836
</Card>
2937
);

‎apps/codebility/app/home/admin-dashboard/layout.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import React from "react";
2+
3+
export default function AdminDashboardLayout({
4+
children,
5+
}: {
6+
children: React.ReactNode;
7+
}) {
8+
return (
9+
<div className="min-h-screen bg-gray-100 dark:bg-gray-900">
10+
{/* Background decorations */}
11+
<div className="pointer-events-none absolute inset-0 overflow-hidden">
12+
<div className="absolute -left-4 -top-4 h-72 w-72 rounded-full bg-gradient-to-br from-blue-400/10 to-purple-400/10 blur-3xl" />
13+
<div className="absolute -right-4 top-1/2 h-96 w-96 rounded-full bg-gradient-to-br from-green-400/10 to-blue-400/10 blur-3xl" />
14+
<div className="absolute -bottom-4 left-1/3 h-80 w-80 rounded-full bg-gradient-to-br from-purple-400/10 to-pink-400/10 blur-3xl" />
15+
<div className="absolute right-1/4 top-1/4 h-64 w-64 rounded-full bg-gradient-to-br from-yellow-400/5 to-orange-400/5 blur-3xl" />
16+
</div>
17+
{children}
18+
</div>
19+
);
20+
}

‎apps/codebility/app/home/admin-dashboard/loading.tsx‎

Lines changed: 70 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,76 +1,81 @@
11
import { Card, CardContent, CardHeader } from "@/components/ui/card";
22
import { Skeleton } from "@/components/ui/skeleton/skeleton";
3+
import PageContainer from "../_components/PageContainer";
34

45
export default function AdminDashboardLoading() {
56
return (
6-
<div className="mx-auto max-w-screen-2xl space-y-6 p-6">
7-
<div className="flex items-center justify-between">
8-
<Skeleton className="h-8 w-32" />
9-
</div>
7+
<PageContainer maxWidth="2xl">
8+
<div className="space-y-6">
9+
<div className="flex items-center justify-between">
10+
<div className="flex items-center gap-3">
11+
<Skeleton className="h-12 w-12 rounded-full" />
12+
<div>
13+
<Skeleton className="h-8 w-32" />
14+
<Skeleton className="mt-2 h-4 w-64" />
15+
</div>
16+
</div>
17+
</div>
1018

11-
{/* Metrics Grid Skeleton */}
12-
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6">
13-
{Array.from({ length: 6 }).map((_, i) => (
14-
<Card key={i} className="group">
15-
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
16-
<div className="space-y-1">
19+
{/* Metrics Grid Skeleton */}
20+
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6">
21+
{Array.from({ length: 6 }).map((_, i) => (
22+
<Card key={i}>
23+
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
1724
<Skeleton className="h-4 w-24" />
18-
</div>
19-
<div className="rounded-lg bg-muted p-2">
20-
<Skeleton className="h-4 w-4 rounded" />
21-
</div>
22-
</CardHeader>
23-
<CardContent>
24-
<Skeleton className="h-8 w-16" />
25-
<Skeleton className="mt-1 h-3 w-20" />
26-
</CardContent>
27-
</Card>
28-
))}
29-
</div>
25+
<Skeleton className="h-5 w-5 rounded" />
26+
</CardHeader>
27+
<CardContent>
28+
<Skeleton className="h-8 w-16" />
29+
<Skeleton className="mt-1 h-3 w-20" />
30+
</CardContent>
31+
</Card>
32+
))}
33+
</div>
3034

31-
{/* Charts Section Skeleton */}
32-
<div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
33-
{Array.from({ length: 2 }).map((_, i) => (
34-
<Card key={i}>
35-
<CardHeader className="items-center pb-0">
36-
<Skeleton className="h-6 w-32" />
37-
<Skeleton className="h-4 w-48" />
38-
</CardHeader>
39-
<CardContent className="flex-1 pb-0">
40-
<div className="mx-auto flex aspect-square max-h-[350px] items-center justify-center">
41-
<Skeleton className="h-64 w-64 rounded-full" />
42-
</div>
43-
<div className="mt-4 flex flex-wrap justify-center gap-2">
44-
{Array.from({ length: 4 }).map((_, j) => (
45-
<Skeleton key={j} className="h-4 w-16" />
46-
))}
47-
</div>
48-
</CardContent>
49-
</Card>
50-
))}
51-
</div>
35+
{/* Charts Section Skeleton */}
36+
<div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
37+
{Array.from({ length: 2 }).map((_, i) => (
38+
<Card key={i}>
39+
<CardHeader className="items-center pb-0">
40+
<Skeleton className="h-6 w-32" />
41+
<Skeleton className="h-4 w-48" />
42+
</CardHeader>
43+
<CardContent className="flex-1 pb-0">
44+
<div className="mx-auto flex aspect-square max-h-[350px] items-center justify-center">
45+
<Skeleton className="h-64 w-64 rounded-full" />
46+
</div>
47+
<div className="mt-4 flex flex-wrap justify-center gap-2">
48+
{Array.from({ length: 4 }).map((_, j) => (
49+
<Skeleton key={j} className="h-4 w-16" />
50+
))}
51+
</div>
52+
</CardContent>
53+
</Card>
54+
))}
55+
</div>
5256

53-
{/* Line Chart Skeleton */}
54-
<Card>
55-
<CardHeader>
56-
<Skeleton className="h-6 w-40" />
57-
<Skeleton className="h-4 w-64" />
58-
</CardHeader>
59-
<CardContent className="h-80">
60-
<div className="flex h-full items-end justify-between space-x-2">
61-
{Array.from({ length: 6 }).map((_, i) => (
62-
<Skeleton
63-
key={i}
64-
className="w-full"
65-
style={{ height: `${Math.random() * 80 + 20}%` }}
66-
/>
67-
))}
68-
</div>
69-
</CardContent>
70-
<CardContent>
71-
<Skeleton className="h-4 w-80" />
72-
</CardContent>
73-
</Card>
74-
</div>
57+
{/* Line Chart Skeleton */}
58+
<Card>
59+
<CardHeader>
60+
<Skeleton className="h-6 w-40" />
61+
<Skeleton className="h-4 w-64" />
62+
</CardHeader>
63+
<CardContent className="h-80">
64+
<div className="flex h-full items-end justify-between space-x-2">
65+
{Array.from({ length: 6 }).map((_, i) => (
66+
<Skeleton
67+
key={i}
68+
className="w-full"
69+
style={{ height: `${Math.random() * 80 + 20}%` }}
70+
/>
71+
))}
72+
</div>
73+
</CardContent>
74+
<CardContent>
75+
<Skeleton className="h-4 w-80" />
76+
</CardContent>
77+
</Card>
78+
</div>
79+
</PageContainer>
7580
);
7681
}

0 commit comments

Comments
 (0)