dimitar/fitaiProto
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Feature/UI: updated layout, page, cards, sidebar, stats, user management

Browse Source
This commit is contained in:
Aleksandar 2025-12-10 14:00:43 +01:00
parent 0b9902dc5c
commit ddcc9f85a8
6 changed files with 473 additions and 278 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/admin/src/app/layout.tsx
View File

@ -26,7 +26,7 @@ export default function RootLayout({
<ClerkProvider> <ClerkProvider>
<html lang="en"> <html lang="en">
<body className={inter.className}> <body className={inter.className}>
<div className="flex min-h-screen bg-slate-50"> <div className="flex min-h-screen bg-gradient-to-br from-white via-blue-50 to-slate-50">
<Sidebar /> <Sidebar />
<main className="flex-1 ml-64 p-8"> <main className="flex-1 ml-64 p-8">
{children} {children}

124
apps/admin/src/app/page.tsx
View File

@ -1,10 +1,10 @@
"use client"; "use client";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { Users, CreditCard, CalendarCheck, TrendingUp } from "lucide-react"; import { Users, Activity, Zap, TrendingUp, Trophy, Target } from "lucide-react";
import { StatsCard } from "@/components/ui/StatsCard"; import { StatsCard } from "@/components/ui/StatsCard";
import { UserManagement } from "@/components/users/UserManagement";
import { AnalyticsDashboard } from "@/components/analytics/AnalyticsDashboard"; import { AnalyticsDashboard } from "@/components/analytics/AnalyticsDashboard";
import { UserManagement } from "@/components/users/UserManagement";
import axios from "axios"; import axios from "axios";
interface DashboardStats { interface DashboardStats {
@ -46,58 +46,132 @@ export default function Home() {
}; };
return ( return (
<div className="space-y-8"> <div className="min-h-screen bg-gradient-to-br from-white via-slate-50 to-blue-50">
{/* Premium Header */}
<div className="bg-gradient-to-r from-slate-900 via-blue-900 to-slate-900 shadow-2xl">
<div className="max-w-7xl mx-auto px-8 py-12">
<div className="flex items-end justify-between">
<div className="flex items-end gap-6">
<div className="w-16 h-16 bg-gradient-to-br from-blue-400 to-cyan-400 rounded-3xl flex items-center justify-center shadow-lg">
<Trophy className="w-9 h-9 text-white" />
</div>
<div> <div>
<h2 className="text-3xl font-bold text-slate-900">Dashboard</h2> <h1 className="text-5xl font-black text-white tracking-tight">FitAI</h1>
<p className="text-slate-500 mt-2">Welcome back, here's what's happening today.</p> <p className="text-blue-200 text-sm font-semibold mt-2">Premium Sports Management Platform</p>
</div>
</div>
<div className="text-right">
<p className="text-blue-100 text-sm">Welcome</p>
<p className="text-2xl font-bold text-white">Admin Control</p>
</div>
</div>
</div>
</div> </div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> {/* Main Content with Proper Spacing */}
<div className="max-w-7xl mx-auto px-8 py-16">
{/* Section: Performance Metrics */}
<div className="mb-20">
<div className="mb-10">
<h2 className="text-3xl font-black text-slate-900">Performance Metrics</h2>
<p className="text-slate-600 mt-2 font-medium">Real-time insights into your platform</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
<StatsCard <StatsCard
title="Total Users" title="Total Members"
value={loading ? "..." : stats.totalUsers} value={loading ? "..." : stats.totalUsers}
change="+12%" // Placeholder for now as we don't track historical growth yet change="+12% this month"
trend="up" trend="up"
icon={Users} icon={Users}
color="blue" color="blue"
/> />
<StatsCard <StatsCard
title="Active Clients" title="Active Athletes"
value={loading ? "..." : stats.activeClients} value={loading ? "..." : stats.activeClients}
change="+5%" change="+8% this week"
trend="up" trend="up"
icon={CalendarCheck} icon={Activity}
color="green" color="green"
/> />
<StatsCard <StatsCard
title="Revenue" title="Revenue"
value={loading ? "..." : formatCurrency(stats.totalRevenue)} value={loading ? "..." : formatCurrency(stats.totalRevenue)}
change={`${stats.revenueGrowth > 0 ? "+" : ""}${stats.revenueGrowth}%`} change={`${stats.revenueGrowth > 0 ? "+" : ""}${stats.revenueGrowth}% growth`}
trend={stats.revenueGrowth >= 0 ? "up" : "down"} trend={stats.revenueGrowth >= 0 ? "up" : "down"}
icon={CreditCard} icon={Zap}
color="purple" color="amber"
/> />
<StatsCard <StatsCard
title="Growth" title="Growth"
value="24%" // Placeholder value="24%"
change="-2%" change="+3% vs last month"
trend="down" trend="up"
icon={TrendingUp} icon={TrendingUp}
color="orange" color="cyan"
/> />
</div> </div>
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
<div className="lg:col-span-2 bg-white rounded-xl shadow-sm border border-slate-100 p-6">
<h3 className="text-xl font-bold text-slate-900 mb-6">Recent Activity</h3>
<UserManagement />
</div> </div>
<div className="bg-white rounded-xl shadow-sm border border-slate-100 p-6"> {/* Section: Member Management */}
<h3 className="text-xl font-bold text-slate-900 mb-6">Quick Analytics</h3> <div className="mb-20">
<div className="mb-8">
<h2 className="text-3xl font-black text-slate-900">Members Directory</h2>
<p className="text-slate-600 mt-2 font-medium">View detailed member information and analytics</p>
</div>
<div className="bg-white rounded-3xl shadow-lg border border-slate-100 p-10">
<UserManagement />
</div>
</div>
{/* Section: Key Insights */}
<div className="mb-20">
<div className="mb-8">
<h2 className="text-3xl font-black text-slate-900">Key Insights</h2>
<p className="text-slate-600 mt-2 font-medium">Quick stats overview</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
<div className="bg-white rounded-3xl shadow-lg border border-slate-100 p-8">
<div className="p-6 bg-gradient-to-br from-blue-50 via-blue-100 to-blue-50 rounded-2xl border border-blue-200 hover:shadow-md transition-shadow">
<p className="text-xs text-blue-700 uppercase font-black tracking-wider">Members</p>
<p className="text-3xl font-black text-blue-900 mt-4 truncate">{loading ? "..." : stats.totalUsers}</p>
<p className="text-sm text-blue-700 mt-2 font-semibold">Active subscriptions</p>
</div>
</div>
<div className="bg-white rounded-3xl shadow-lg border border-slate-100 p-8">
<div className="p-6 bg-gradient-to-br from-emerald-50 via-emerald-100 to-emerald-50 rounded-2xl border border-emerald-200 hover:shadow-md transition-shadow">
<p className="text-xs text-emerald-700 uppercase font-black tracking-wider">Training Now</p>
<p className="text-3xl font-black text-emerald-900 mt-4 truncate">{loading ? "..." : stats.activeClients}</p>
<p className="text-sm text-emerald-700 mt-2 font-semibold">Currently active</p>
</div>
</div>
<div className="bg-white rounded-3xl shadow-lg border border-slate-100 p-8">
<div className="p-6 bg-gradient-to-br from-amber-50 via-amber-100 to-amber-50 rounded-2xl border border-amber-200 hover:shadow-md transition-shadow">
<p className="text-xs text-amber-700 uppercase font-black tracking-wider">Revenue</p>
<p className="text-2xl font-black text-amber-900 mt-4 truncate">{loading ? "..." : formatCurrency(stats.totalRevenue)}</p>
<p className="text-sm text-amber-700 mt-2 font-semibold">This period</p>
</div>
</div>
</div>
</div>
{/* Section: Detailed Report - Full Width */}
<div className="mb-20">
<div className="mb-8">
<h2 className="text-3xl font-black text-slate-900">Detailed Report</h2>
<p className="text-slate-600 mt-2 font-medium">Analytics Dashboard</p>
</div>
<div className="bg-white rounded-3xl shadow-lg border border-slate-100 p-10">
<div className="bg-slate-50 rounded-2xl p-8">
<AnalyticsDashboard /> <AnalyticsDashboard />
</div> </div>
</div> </div>
</div> </div>
</div>
</div>
); );
} }

29
apps/admin/src/components/ui/Sidebar.tsx
View File

@ -65,14 +65,15 @@ export function Sidebar() {
]; ];
return ( return (
<aside className="w-64 bg-slate-900 text-white h-screen fixed left-0 top-0 flex flex-col border-r border-slate-800"> <aside className="w-64 bg-gradient-to-b from-white to-slate-50 h-screen fixed left-0 top-0 flex flex-col border-r border-slate-200/50">
<div className="p-6 border-b border-slate-800"> <div className="p-6 border-b border-slate-200">
<h1 className="text-2xl font-bold bg-gradient-to-r from-blue-400 to-indigo-400 bg-clip-text text-transparent"> <h1 className="text-2xl font-black bg-gradient-to-r from-blue-600 to-cyan-600 bg-clip-text text-transparent">
FitAI Admin FitAI
</h1> </h1>
<p className="text-xs text-slate-600 font-medium mt-1">Sports Admin</p>
</div> </div>
<nav className="flex-1 p-4 space-y-2"> <nav className="flex-1 p-4 space-y-1">
{menuItems.map((item) => { {menuItems.map((item) => {
const Icon = item.icon; const Icon = item.icon;
const isActive = pathname === item.href; const isActive = pathname === item.href;
@ -81,25 +82,25 @@ export function Sidebar() {
<Link <Link
key={item.href} key={item.href}
href={item.href} href={item.href}
className={`flex items-center gap-3 px-4 py-3 rounded-lg transition-all duration-200 group ${isActive className={`flex items-center gap-3 px-4 py-3 rounded-2xl transition-all duration-200 group font-medium ${isActive
? "bg-blue-600 text-white shadow-lg shadow-blue-900/20" ? "bg-gradient-to-r from-blue-500 to-cyan-500 text-white shadow-md shadow-blue-500/20"
: "text-slate-400 hover:bg-slate-800 hover:text-white"}`} : "text-slate-700 hover:bg-slate-100 hover:text-blue-600"}`}
> >
<Icon size={20} className={isActive ? "text-white" : "text-slate-500 group-hover:text-white"} /> <Icon size={20} className={isActive ? "text-white" : "text-slate-500 group-hover:text-blue-600"} />
<span className="font-medium">{label}</span> <span className="text-sm">{label}</span>
</Link> </Link>
); );
})} })}
</nav> </nav>
<div className="p-4 border-t border-slate-800"> <div className="p-4 border-t border-slate-200">
<div className="flex items-center gap-3 px-4 py-3 rounded-lg bg-slate-800/50"> <div className="flex items-center gap-3 px-4 py-3 rounded-2xl bg-slate-100">
<UserButton afterSignOutUrl="/" /> <UserButton afterSignOutUrl="/" />
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
<p className="text-sm font-medium text-white truncate"> <p className="text-sm font-semibold text-slate-900 truncate">
{user?.fullName || "Admin User"} {user?.fullName || "Admin User"}
</p> </p>
<p className="text-xs text-slate-400 truncate"> <p className="text-xs text-slate-600 truncate">
{user?.primaryEmailAddress?.emailAddress} {user?.primaryEmailAddress?.emailAddress}
</p> </p>
</div> </div>

83
apps/admin/src/components/ui/StatsCard.tsx
View File

@ -1,5 +1,4 @@
import { LucideIcon } from "lucide-react"; import { LucideIcon } from "lucide-react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
interface StatsCardProps { interface StatsCardProps {
title: string; title: string;
@ -7,45 +6,67 @@ interface StatsCardProps {
change?: string; change?: string;
trend?: "up" | "down" | "neutral"; trend?: "up" | "down" | "neutral";
icon: LucideIcon; icon: LucideIcon;
color?: "blue" | "green" | "purple" | "orange"; color?: "blue" | "green" | "amber" | "cyan";
} }
export function StatsCard({ title, value, change, trend, icon: Icon, color = "blue" }: StatsCardProps) { export function StatsCard({ title, value, change, trend, icon: Icon, color = "blue" }: StatsCardProps) {
const colorStyles = { const colorStyles = {
blue: "bg-blue-50 text-blue-600", blue: {
green: "bg-green-50 text-green-600", bg: "from-blue-50 via-blue-100 to-blue-50",
purple: "bg-purple-50 text-purple-600", text: "text-blue-950",
orange: "bg-orange-50 text-orange-600", icon: "bg-gradient-to-br from-blue-500 to-blue-600",
border: "border-blue-200",
label: "text-blue-700"
},
green: {
bg: "from-emerald-50 via-emerald-100 to-emerald-50",
text: "text-emerald-950",
icon: "bg-gradient-to-br from-emerald-500 to-emerald-600",
border: "border-emerald-200",
label: "text-emerald-700"
},
amber: {
bg: "from-amber-50 via-amber-100 to-amber-50",
text: "text-amber-950",
icon: "bg-gradient-to-br from-amber-500 to-amber-600",
border: "border-amber-200",
label: "text-amber-700"
},
cyan: {
bg: "from-cyan-50 via-cyan-100 to-cyan-50",
text: "text-cyan-950",
icon: "bg-gradient-to-br from-cyan-500 to-cyan-600",
border: "border-cyan-200",
label: "text-cyan-700"
},
}; };
const style = colorStyles[color];
return ( return (
<Card> <div className={`bg-gradient-to-br ${style.bg} rounded-3xl border ${style.border} p-6 hover:shadow-xl transition-all duration-300 cursor-default group`}>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2"> <div className="flex items-start justify-between mb-4 gap-3">
<CardTitle className="text-sm font-medium text-muted-foreground"> <div className="flex-1 min-w-0">
<p className={`text-xs ${style.label} uppercase font-black tracking-widest truncate`}>
{title} {title}
</CardTitle>
<div className={`p-2 rounded-lg ${colorStyles[color]}`}>
<Icon size={16} />
</div>
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">{value}</div>
{change && (
<p className="text-xs text-muted-foreground mt-1">
<span
className={`font-medium ${trend === "up"
? "text-green-600"
: trend === "down"
? "text-red-600"
: "text-slate-600"
}`}
>
{change}
</span>{" "}
vs last month
</p> </p>
</div>
<div className={`p-3 ${style.icon} rounded-2xl flex items-center justify-center shadow-lg group-hover:scale-110 transition-transform flex-shrink-0`}>
<Icon size={20} className="text-white" />
</div>
</div>
<div className={`text-4xl font-black ${style.text} mb-3 truncate`}>
{value}
</div>
{change && (
<div className="flex items-center gap-1 truncate">
<span className={`text-xs font-black uppercase tracking-wide ${style.label} truncate`}>
{trend === "up" ? "↑" : trend === "down" ? "↓" : "→"} {change}
</span>
</div>
)} )}
</CardContent> </div>
</Card>
); );
} }

8
apps/admin/src/components/ui/card.tsx
View File

@ -28,3 +28,11 @@ export function CardContent({ children, className = '' }: CardProps) {
</div> </div>
) )
} }
export function CardTitle({ children, className = '' }: CardProps) {
return (
<div className={`text-sm font-medium ${className}`}>
{children}
</div>
)
}

381
apps/admin/src/components/users/UserManagement.tsx
View File

@ -2,7 +2,7 @@
import { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import { UserGrid } from "@/components/users/UserGrid"; import { UserGrid } from "@/components/users/UserGrid";
import { Button } from "@/components/ui/Button"; import { Button } from "@/components/ui/button";
import { Card, CardHeader, CardContent } from "@/components/ui/card"; import { Card, CardHeader, CardContent } from "@/components/ui/card";
interface User { interface User {
@ -34,6 +34,7 @@ export function UserManagement() {
const [selectedUser, setSelectedUser] = useState<User | null>(null); const [selectedUser, setSelectedUser] = useState<User | null>(null);
const [isEditing, setIsEditing] = useState(false); const [isEditing, setIsEditing] = useState(false);
const [isDeleting, setIsDeleting] = useState(false); const [isDeleting, setIsDeleting] = useState(false);
const [activeTab, setActiveTab] = useState<"users" | "details">("users");
const [editForm, setEditForm] = useState<{ const [editForm, setEditForm] = useState<{
firstName: string; firstName: string;
lastName: string; lastName: string;
@ -205,25 +206,83 @@ export function UserManagement() {
}; };
return ( return (
<div className="space-y-6"> <div className="space-y-4">
<div className="flex justify-between items-center"> {/* Header with Count */}
<h2 className="text-2xl font-bold">User Management</h2> <div className="flex items-center justify-between">
<div className="flex gap-2"> <h3 className="text-lg font-black text-slate-900">
<Button {users.length} {users.length === 1 ? 'user' : 'users'}
variant={filter === "all" ? "primary" : "secondary"} </h3>
{selectedUser && (
<p className="text-sm text-blue-600 font-semibold">
Selected: {selectedUser.firstName} {selectedUser.lastName}
</p>
)}
</div>
{/* Compact Controls - Always Visible but Organized */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-3 p-4 bg-gradient-to-r from-slate-50 to-blue-50 rounded-lg border border-slate-200">
{/* Filter Row */}
<div>
<p className="text-xs font-black uppercase tracking-wider text-slate-600 mb-2">Roles</p>
<div className="flex flex-wrap gap-2">
<button
onClick={() => setFilter("all")} onClick={() => setFilter("all")}
className={`px-2 py-1 text-xs font-semibold rounded-lg transition-all ${
filter === "all"
? "bg-blue-500 text-white shadow-md"
: "bg-white text-slate-700 hover:bg-slate-100 border border-slate-200"
}`}
> >
All Users All
</Button> </button>
<Button <button
variant="secondary" onClick={() => setFilter("client")}
onClick={() => selectedUser && handleEditUser(selectedUser)} className={`px-2 py-1 text-xs font-semibold rounded-lg transition-all ${
disabled={!selectedUser} filter === "client"
? "bg-blue-500 text-white shadow-md"
: "bg-white text-slate-700 hover:bg-slate-100 border border-slate-200"
}`}
> >
Edit User Clients
</Button> </button>
<Button <button
variant="secondary" onClick={() => setFilter("trainer")}
className={`px-2 py-1 text-xs font-semibold rounded-lg transition-all ${
filter === "trainer"
? "bg-blue-500 text-white shadow-md"
: "bg-white text-slate-700 hover:bg-slate-100 border border-slate-200"
}`}
>
Trainers
</button>
<button
onClick={() => setFilter("admin")}
className={`px-2 py-1 text-xs font-semibold rounded-lg transition-all ${
filter === "admin"
? "bg-blue-500 text-white shadow-md"
: "bg-white text-slate-700 hover:bg-slate-100 border border-slate-200"
}`}
>
Admins
</button>
<button
onClick={() => setFilter("superAdmin")}
className={`px-2 py-1 text-xs font-semibold rounded-lg transition-all ${
filter === "superAdmin"
? "bg-blue-500 text-white shadow-md"
: "bg-white text-slate-700 hover:bg-slate-100 border border-slate-200"
}`}
>
Super Admins
</button>
</div>
</div>
{/* Action Buttons Row */}
<div>
<p className="text-xs font-black uppercase tracking-wider text-slate-600 mb-2">Quick Actions</p>
<div className="flex flex-wrap gap-2">
<button
onClick={() => { onClick={() => {
setEditForm({ setEditForm({
firstName: "", firstName: "",
@ -235,67 +294,69 @@ export function UserManagement() {
setSelectedUser(null); setSelectedUser(null);
setIsEditing(true); setIsEditing(true);
}} }}
className="px-2 py-1 text-xs font-semibold rounded-lg bg-blue-500 text-white hover:bg-blue-600"
> >
Invite User + Invite
</Button> </button>
<Button <button
variant="secondary" onClick={() => selectedUser && handleEditUser(selectedUser)}
disabled={!selectedUser}
className="px-2 py-1 text-xs font-semibold rounded-lg bg-white text-slate-700 hover:bg-slate-100 border border-slate-200 disabled:opacity-50"
>
Edit
</button>
<button
onClick={() => selectedUser && handleDeleteUser(selectedUser)} onClick={() => selectedUser && handleDeleteUser(selectedUser)}
disabled={!selectedUser} disabled={!selectedUser}
className="px-2 py-1 text-xs font-semibold rounded-lg bg-white text-slate-700 hover:bg-slate-100 border border-slate-200 disabled:opacity-50"
> >
Delete User Delete
</Button> </button>
<Button <button onClick={handleRefresh} className="px-2 py-1 text-xs font-semibold rounded-lg bg-white text-slate-700 hover:bg-slate-100 border border-slate-200">
variant={filter === "client" ? "primary" : "secondary"}
onClick={() => setFilter("client")}
>
Clients
</Button>
<Button
variant={filter === "trainer" ? "primary" : "secondary"}
onClick={() => setFilter("trainer")}
>
Trainers
</Button>
<Button
variant={filter === "admin" ? "primary" : "secondary"}
onClick={() => setFilter("admin")}
>
Admins
</Button>
<Button
variant={filter === "superAdmin" ? "primary" : "secondary"}
onClick={() => setFilter("superAdmin")}
>
Super Admins
</Button>
</div>
</div>
<div className="flex justify-between items-center">
<div className="text-sm text-gray-600">
Showing {users.length} users
{selectedUser && (
<span className="ml-4 text-blue-600">
Selected: {selectedUser.firstName} {selectedUser.lastName}
</span>
)}
</div>
<div className="flex gap-2">
<Button variant="secondary" onClick={handleRefresh}>
Refresh Refresh
</Button> </button>
<Button variant="secondary" onClick={handleExport}> <button onClick={handleExport} className="px-2 py-1 text-xs font-semibold rounded-lg bg-white text-slate-700 hover:bg-slate-100 border border-slate-200">
Export CSV Export
</Button> </button>
</div>
</div> </div>
</div> </div>
<Card> {/* Tab Navigation */}
<div className="flex gap-2 border-b border-slate-200">
<button
onClick={() => setActiveTab("users")}
className={`px-4 py-3 text-sm font-semibold border-b-2 transition-all ${
activeTab === "users"
? "border-blue-500 text-blue-600"
: "border-transparent text-slate-600 hover:text-slate-900"
}`}
>
User List ({users.length})
</button>
<button
onClick={() => setActiveTab("details")}
disabled={!selectedUser}
className={`px-4 py-3 text-sm font-semibold border-b-2 transition-all ${
activeTab === "details"
? "border-blue-500 text-blue-600"
: "border-transparent text-slate-600 hover:text-slate-900"
} ${!selectedUser ? "opacity-50 cursor-not-allowed" : ""}`}
>
User Details
</button>
</div>
{/* Tab Content */}
{activeTab === "users" && (
<Card className="border border-slate-200">
<CardContent className="p-0"> <CardContent className="p-0">
<UserGrid <UserGrid
users={users} users={users}
onUserSelect={(user) => handleUserSelect(user)} onUserSelect={(user) => {
handleUserSelect(user);
setActiveTab("details");
}}
onEditUser={handleEditUser} onEditUser={handleEditUser}
onDeleteUser={handleDeleteUser} onDeleteUser={handleDeleteUser}
onBulkDelete={handleBulkDelete} onBulkDelete={handleBulkDelete}
@ -303,6 +364,70 @@ export function UserManagement() {
/> />
</CardContent> </CardContent>
</Card> </Card>
)}
{activeTab === "details" && selectedUser && (
<div className="p-6 bg-white rounded-xl border border-slate-200">
<div className="mb-6">
<h3 className="text-xl font-black text-slate-900">
{selectedUser.firstName} {selectedUser.lastName}
</h3>
<p className="text-sm text-slate-600 mt-1">{selectedUser.email}</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div className="space-y-2">
<p className="text-xs font-black uppercase tracking-wider text-slate-600">Role</p>
<p className="text-base font-semibold text-slate-900">{selectedUser.role}</p>
</div>
<div className="space-y-2">
<p className="text-xs font-black uppercase tracking-wider text-slate-600">Joined</p>
<p className="text-base font-semibold text-slate-900">{new Date(selectedUser.createdAt).toLocaleDateString()}</p>
</div>
{selectedUser.client && (
<>
<div className="space-y-2">
<p className="text-xs font-black uppercase tracking-wider text-slate-600">Membership</p>
<p className="text-base font-semibold text-slate-900">{selectedUser.client.membershipType}</p>
</div>
<div className="space-y-2">
<p className="text-xs font-black uppercase tracking-wider text-slate-600">Status</p>
<p className="text-base font-semibold text-slate-900">{selectedUser.client.membershipStatus}</p>
</div>
</>
)}
<div className="space-y-2">
<p className="text-xs font-black uppercase tracking-wider text-slate-600">Check-ins This Month</p>
<p className="text-2xl font-black text-blue-600">{selectedUser.checkInsThisMonth || 0}</p>
</div>
</div>
<div className="flex gap-3 mt-8 pt-6 border-t border-slate-200">
<button
onClick={() => selectedUser && handleEditUser(selectedUser)}
className="px-5 py-2 bg-blue-50 text-blue-600 rounded-lg font-semibold text-sm hover:bg-blue-100 transition-all"
>
Edit User
</button>
<button
onClick={() => selectedUser && handleDeleteUser(selectedUser)}
className="px-5 py-2 bg-red-50 text-red-600 rounded-lg font-semibold text-sm hover:bg-red-100 transition-all"
>
Delete User
</button>
<a
href={`/users/${selectedUser.id}`}
className="px-5 py-2 bg-gradient-to-r from-blue-500 to-cyan-500 text-white rounded-lg font-semibold text-sm hover:shadow-lg transition-all"
>
Full Profile
</a>
</div>
</div>
)}
{isEditing && editForm && ( {isEditing && editForm && (
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"> <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
@ -438,98 +563,64 @@ export function UserManagement() {
)} )}
{selectedUser && ( {selectedUser && (
<Card> <div className="mt-8 pt-8 border-t border-slate-200">
<CardHeader className="flex flex-row items-center justify-between"> <div className="mb-6">
<h3 className="text-lg font-semibold">User Details</h3> <h3 className="text-lg font-black text-slate-900">
<a
href={`/users/${selectedUser.id}`}
className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 text-sm font-medium"
>
View Full Profile & Recommendations
</a>
</CardHeader>
<CardContent>
<div className="grid grid-cols-3 gap-4">
<div>
<h4 className="font-medium mb-2">Basic Information</h4>
<div className="space-y-1 text-sm">
<p>
<span className="font-medium">Name:</span>{" "}
{selectedUser.firstName} {selectedUser.lastName} {selectedUser.firstName} {selectedUser.lastName}
</p> </h3>
<p> <p className="text-sm text-slate-600 mt-1">{selectedUser.email}</p>
<span className="font-medium">Email:</span>{" "}
{selectedUser.email}
</p>
<p>
<span className="font-medium">Phone:</span>{" "}
{selectedUser.phone || "N/A"}
</p>
<p>
<span className="font-medium">Role:</span>{" "}
{selectedUser.role}
</p>
<p>
<span className="font-medium">Joined:</span>{" "}
{new Date(selectedUser.createdAt).toLocaleDateString()}
</p>
</div> </div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div className="space-y-3">
<p className="text-xs font-black uppercase tracking-wider text-slate-600">Role</p>
<p className="text-base font-semibold text-slate-900">{selectedUser.role}</p>
<p className="text-xs font-black uppercase tracking-wider text-slate-600 mt-4">Joined</p>
<p className="text-base font-semibold text-slate-900">{new Date(selectedUser.createdAt).toLocaleDateString()}</p>
</div> </div>
{selectedUser.client && ( {selectedUser.client && (
<div> <div className="space-y-3">
<h4 className="font-medium mb-2">Client Information</h4> <p className="text-xs font-black uppercase tracking-wider text-slate-600">Membership</p>
<div className="space-y-1 text-sm"> <p className="text-base font-semibold text-slate-900">{selectedUser.client.membershipType}</p>
<p> <p className="text-xs font-black uppercase tracking-wider text-slate-600 mt-4">Status</p>
<span className="font-medium">Membership:</span>{" "} <p className="text-base font-semibold text-slate-900">{selectedUser.client.membershipStatus}</p>
{selectedUser.client.membershipType}
</p>
<p>
<span className="font-medium">Status:</span>{" "}
{selectedUser.client.membershipStatus}
</p>
<p>
<span className="font-medium">Member Since:</span>{" "}
{new Date(
selectedUser.client.joinDate,
).toLocaleDateString()}
</p>
<p>
<span className="font-medium">Last Visit:</span>{" "}
{selectedUser.client.lastVisit
? new Date(
selectedUser.client.lastVisit,
).toLocaleDateString()
: "Never"}
</p>
</div>
</div> </div>
)} )}
<div> <div className="space-y-3">
<h4 className="font-medium mb-2">Check-In Statistics</h4> <p className="text-xs font-black uppercase tracking-wider text-slate-600">Check-ins This Month</p>
<div className="space-y-1 text-sm"> <p className="text-2xl font-black text-blue-600">{selectedUser.checkInsThisMonth || 0}</p>
<p> <p className="text-xs font-black uppercase tracking-wider text-slate-600 mt-4">Last Check-in</p>
<span className="font-medium">Last Check-In:</span>{" "} <p className="text-sm text-slate-900">
{selectedUser.lastCheckInTime {selectedUser.lastCheckInTime
? new Date( ? new Date(selectedUser.lastCheckInTime).toLocaleDateString()
selectedUser.lastCheckInTime,
).toLocaleString()
: "Never"} : "Never"}
</p> </p>
<p>
<span className="font-medium">This Week:</span>{" "}
{selectedUser.checkInsThisWeek || 0} check-ins
</p>
<p>
<span className="font-medium">This Month:</span>{" "}
{selectedUser.checkInsThisMonth || 0} check-ins
</p>
</div> </div>
</div> </div>
<div className="flex gap-3 mt-6">
<button
onClick={() => selectedUser && handleEditUser(selectedUser)}
className="px-5 py-2 bg-blue-50 text-blue-600 rounded-lg font-semibold text-sm hover:bg-blue-100 transition-all"
>
Edit
</button>
<button
onClick={() => selectedUser && handleDeleteUser(selectedUser)}
className="px-5 py-2 bg-red-50 text-red-600 rounded-lg font-semibold text-sm hover:bg-red-100 transition-all"
>
Delete
</button>
<a
href={`/users/${selectedUser.id}`}
className="px-5 py-2 bg-gradient-to-r from-blue-500 to-cyan-500 text-white rounded-lg font-semibold text-sm hover:shadow-lg transition-all"
>
Full Profile
</a>
</div>
</div> </div>
</CardContent>
</Card>
)} )}
</div> </div>
); );