Skip to content

Commit 600ce86

Browse files
codeunia-devcodeunia-dev
authored
Merge pull request #15 from codeunia-dev/sidebar
Enhanced UsersPage and Sidebar components
2 parents e3896f7 + 551b53b commit 600ce86

File tree

2 files changed

+57
-24
lines changed

2 files changed

+57
-24
lines changed

‎app/admin/users/page.tsx‎

Lines changed: 52 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -145,14 +145,19 @@ export default function UsersPage() {
145145
}
146146

147147
return (
148-
<div className="space-y-6 md:space-y-8">
149-
150-
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
148+
<div className="space-y-8 md:space-y-14 min-h-screen px-4 py-8 md:px-8 lg:px-16 relative overflow-x-hidden">
149+
<div className="flex items-center gap-3 pb-6 border-b border-zinc-800/60 relative z-10 mt-2 mb-4">
150+
<span className="inline-block w-2 h-6 sm:h-8 bg-gradient-to-b from-blue-400 to-pink-400 rounded-full mr-2" />
151151
<div>
152-
<h1 className="text-2xl sm:text-3xl font-bold tracking-tight">User Management</h1>
153-
<p className="text-muted-foreground text-sm sm:text-base">Manage and monitor all platform users</p>
152+
<h1 className="text-2xl sm:text-3xl md:text-4xl font-extrabold tracking-tight text-zinc-900 dark:text-white drop-shadow-sm flex items-center gap-3">
153+
User Management
154+
</h1>
155+
<p className="text-zinc-400 mt-1 font-medium text-sm sm:text-base">Manage and monitor all platform users</p>
154156
</div>
155-
<div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-2">
157+
</div>
158+
159+
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
160+
<div className="flex gap-3">
156161
<Button variant="outline" className="text-sm">
157162
<Download className="h-4 w-4 mr-2" />
158163
Export
@@ -206,18 +211,37 @@ export default function UsersPage() {
206211
</div>
207212
</div>
208213

209-
214+
{/* User Stats Section Header */}
215+
<div className="flex items-center gap-3 mt-8 md:mt-10 mb-2 relative z-10">
216+
<span className="inline-block w-1.5 h-6 bg-gradient-to-b from-blue-400 to-emerald-400 rounded-full" />
217+
<h2 className="text-lg sm:text-xl font-bold text-zinc-900 dark:text-white tracking-tight">User Stats</h2>
218+
</div>
219+
220+
{/* Stats Cards */}
210221
<div className="grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-4">
211222
{userStats.map((stat) => (
212-
<Card key={stat.title} className="border-0 shadow-lg">
213-
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
214-
<CardTitle className="text-xs sm:text-sm font-medium">{stat.title}</CardTitle>
215-
<div className={`p-2 rounded-lg ${stat.bgColor}`}>
223+
<Card key={stat.title} className={
224+
`border-0 shadow-2xl rounded-2xl transition-transform duration-300 hover:-translate-y-2 ` +
225+
(
226+
stat.title === "Total Users"
227+
? "bg-gradient-to-br from-blue-100/80 to-blue-200/60 dark:from-blue-900/60 dark:to-blue-800/40"
228+
: stat.title === "Active This Month"
229+
? "bg-gradient-to-br from-emerald-100/80 to-emerald-200/60 dark:from-emerald-900/60 dark:to-emerald-800/40"
230+
: stat.title === "New Signups"
231+
? "bg-gradient-to-br from-green-100/80 to-green-200/60 dark:from-green-900/60 dark:to-green-800/40"
232+
: stat.title === "Suspended"
233+
? "bg-gradient-to-br from-red-100/80 to-red-200/60 dark:from-red-900/60 dark:to-red-800/40"
234+
: "bg-white/10 dark:bg-zinc-900/60"
235+
)
236+
}>
237+
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2 relative z-10">
238+
<CardTitle className="text-xs sm:text-sm font-medium text-zinc-900 dark:text-zinc-100 flex items-center gap-2 tracking-tight">{stat.title}</CardTitle>
239+
<div className="p-2 rounded-lg bg-gradient-to-br from-white/80 to-zinc-100/40 dark:from-zinc-800/80 dark:to-zinc-900/40 shadow-lg flex items-center justify-center">
216240
<stat.icon className={`h-4 w-4 ${stat.color}`} />
217241
</div>
218242
</CardHeader>
219243
<CardContent>
220-
<div className="text-xl sm:text-2xl font-bold">{stat.value}</div>
244+
<div className="text-xl sm:text-2xl font-bold text-zinc-900 dark:text-white">{stat.value}</div>
221245
<p className="text-xs text-muted-foreground">
222246
<span className={stat.change.startsWith("+") ? "text-green-500" : "text-red-500"}>{stat.change}</span>{" "}
223247
from last month
@@ -227,11 +251,20 @@ export default function UsersPage() {
227251
))}
228252
</div>
229253

230-
231-
<Card className="border-0 shadow-lg">
254+
{/* User Directory Section Header */}
255+
<div className="flex items-center gap-3 mt-8 md:mt-10 mb-2 relative z-10">
256+
<span className="inline-block w-1.5 h-6 bg-gradient-to-b from-cyan-400 to-purple-400 rounded-full" />
257+
<h2 className="text-lg sm:text-xl font-bold text-zinc-900 dark:text-white tracking-tight">User Directory</h2>
258+
</div>
259+
260+
{/* User Directory Card */}
261+
<Card className="border-0 shadow-2xl rounded-2xl bg-gradient-to-br from-cyan-100/80 to-cyan-200/60 dark:from-cyan-900/60 dark:to-cyan-800/40 relative overflow-hidden group">
232262
<CardHeader>
233-
<CardTitle className="text-lg sm:text-xl">User Directory</CardTitle>
234-
<CardDescription className="text-sm">Search and filter through all platform users</CardDescription>
263+
<CardTitle className="text-lg sm:text-xl text-zinc-900 dark:text-zinc-100 font-bold flex items-center">
264+
<Users className="h-5 w-5 mr-2 text-blue-400" />
265+
User Directory
266+
</CardTitle>
267+
<CardDescription className="text-zinc-500 dark:text-zinc-300 font-medium text-sm">Search and filter through all platform users</CardDescription>
235268
</CardHeader>
236269
<CardContent>
237270
<div className="flex flex-col gap-4 mb-6">
@@ -270,7 +303,6 @@ export default function UsersPage() {
270303
</div>
271304
</div>
272305

273-
274306
<div className="overflow-x-auto">
275307
<Table>
276308
<TableHeader>
@@ -287,14 +319,14 @@ export default function UsersPage() {
287319
</TableHeader>
288320
<TableBody>
289321
{filteredUsers.map((user) => (
290-
<TableRow key={user.id}>
322+
<TableRow key={user.id} className="hover:bg-purple-700/10 transition-colors">
291323
<TableCell>
292324
<div className="flex items-center space-x-3">
293325
<div className="w-8 h-8 bg-gradient-to-br from-primary to-purple-600 rounded-full flex items-center justify-center text-white text-sm font-semibold">
294326
{user.avatar}
295327
</div>
296328
<div className="min-w-0 flex-1">
297-
<p className="font-medium text-sm truncate">{user.name}</p>
329+
<p className="font-medium text-sm truncate text-zinc-900 dark:text-zinc-100">{user.name}</p>
298330
<p className="text-xs text-muted-foreground truncate">{user.email}</p>
299331
<div className="flex items-center gap-2 mt-1 sm:hidden">
300332
{getRoleBadge(user.role)}
@@ -313,7 +345,7 @@ export default function UsersPage() {
313345
<TableCell className="text-right">
314346
<DropdownMenu>
315347
<DropdownMenuTrigger asChild>
316-
<Button variant="ghost" className="h-8 w-8 p-0">
348+
<Button variant="ghost" className="h-8 w-8 p-0 hover:bg-purple-700/20 text-purple-400 font-semibold text-xs sm:text-sm">
317349
<MoreHorizontal className="h-4 w-4" />
318350
</Button>
319351
</DropdownMenuTrigger>

‎components/admin/Sidebar.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from "react";
1+
import React, { useState } from "react";
22
import Link from "next/link";
33
import {
44
Code2,
@@ -31,7 +31,6 @@ import {
3131
SidebarTrigger,
3232
} from "@/components/ui/sidebar"
3333
import { Button } from "@/components/ui/button"
34-
import { ThemeToggle } from "@/components/theme-toggle"
3534
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"
3635

3736

@@ -55,11 +54,13 @@ interface SidebarProps {
5554
}
5655

5756
export function Sidebar({ avatar, name, email, role, sidebarItems, children }: SidebarProps) {
57+
const [mobileOpen, setMobileOpen] = useState(false);
58+
const closeSidebar = () => setMobileOpen(false);
5859
return (
5960
<SidebarProvider>
6061
<div className="w-full bg-zinc-900">
6162
{/* mobile sidebar */}
62-
<Sheet>
63+
<Sheet open={mobileOpen} onOpenChange={setMobileOpen}>
6364
<SheetTrigger asChild>
6465
<Button variant="outline" size="icon" className="md:hidden fixed top-4 left-4 z-50 border-zinc-700 bg-zinc-900 hover:bg-purple-700/10">
6566
<Menu className="h-4 w-4 text-purple-400" />
@@ -93,6 +94,7 @@ export function Sidebar({ avatar, name, email, role, sidebarItems, children }: S
9394
key={item.title}
9495
href={item.url}
9596
className="flex items-center gap-3 px-4 py-2 rounded-lg transition-all hover:bg-purple-700/10 active:bg-purple-800/20 text-zinc-200 hover:text-white font-medium"
97+
onClick={closeSidebar}
9698
>
9799
<span className="text-purple-400">
98100
{React.createElement(item.icon, { className: "size-5" })}
@@ -278,7 +280,6 @@ export function Sidebar({ avatar, name, email, role, sidebarItems, children }: S
278280
<Button variant="outline" size="icon" className="border-zinc-700 bg-zinc-900 hover:bg-purple-700/10">
279281
<Bell className="h-4 w-4 text-purple-400" />
280282
</Button>
281-
<ThemeToggle />
282283
</div>
283284
</header>
284285
<div className="flex flex-1 flex-col gap-4 p-4 pt-0">

0 commit comments

Comments
 (0)