Merge branch 'adminUI'

apps/admin/src/app/api/admin/attendance/route.ts

@@ -1,27 +1,26 @@
-import { auth } from '@clerk/nextjs/server'
+import { auth } from "@clerk/nextjs/server";
-import { NextResponse } from 'next/server'
+import { NextResponse } from "next/server";
-import { getDatabase } from '@/lib/database'
+import { getDatabase } from "@/lib/database";
-import { ensureUserSynced } from '@/lib/sync-user'
+import { ensureUserSynced } from "@/lib/sync-user";
+import { successResponse } from "@/lib/api/responses";
 
 export async function GET(req: Request) {
   try {
-        const { userId } = await auth()
+    const { userId } = await auth();
-        if (!userId) return new NextResponse('Unauthorized', { status: 401 })
+    if (!userId) return new NextResponse("Unauthorized", { status: 401 });
 
-        const db = await getDatabase()
+    const db = await getDatabase();
 
-        // Ensure user is synced (handles seed script ID mismatch)
+    const user = await ensureUserSynced(userId, db);
-        // We need to import ensureUserSynced
-        const user = await ensureUserSynced(userId, db)
 
-        if (!user || (user.role !== 'admin' && user.role !== 'superAdmin')) {
+    if (!user || (user.role !== "admin" && user.role !== "superAdmin")) {
-            return new NextResponse('Forbidden', { status: 403 })
+      return new NextResponse("Forbidden", { status: 403 });
     }
 
-        const attendance = await db.getAllAttendance()
+    const attendance = await db.getAllAttendance();
-        return NextResponse.json(attendance)
+    return successResponse({ records: attendance });
   } catch (error) {
-        console.error('Admin attendance error:', error)
+    console.error("Admin attendance error:", error);
-        return new NextResponse('Internal Server Error', { status: 500 })
+    return new NextResponse("Internal Server Error", { status: 500 });
   }
 }

apps/admin/src/app/attendance/page.tsx

@@ -1,96 +1,102 @@
-'use client'
+"use client";
 
-import { useState, useEffect } from 'react'
+import { useAttendance } from "@/hooks/use-api";
-import { format } from 'date-fns'
+import { PageHeader } from "@/components/ui/PageHeader";
-
+import { Badge } from "@/components/ui/badge";
-interface Attendance {
-    id: string
-    clientId: string
-    checkInTime: string
-    checkOutTime?: string
-    type: string
-    notes?: string
-}
 
 export default function AttendancePage() {
-    const [attendance, setAttendance] = useState<Attendance[]>([])
+  const { data: attendance = [], isLoading } = useAttendance();
-    const [loading, setLoading] = useState(true)
 
-    useEffect(() => {
+  if (isLoading) {
-        const fetchAttendance = async () => {
+    return (
-            try {
+      <div className="space-y-8">
-                const res = await fetch('/api/admin/attendance')
+        <PageHeader
-                if (res.ok) {
+          title="Attendance"
-                    const data = await res.json()
+          description="Monitor gym check-ins and check-outs"
-                    setAttendance(data)
+          breadcrumbs={[{ label: "Attendance" }]}
-                }
+        />
-            } catch (error) {
+        <div className="card-modern">
-                console.error('Error fetching attendance:', error)
+          <div className="animate-pulse space-y-4">
-            } finally {
+            {[...Array(5)].map((_, i) => (
-                setLoading(false)
+              <div key={i} className="h-12 bg-muted rounded" />
-            }
+            ))}
-        }
+          </div>
-
+        </div>
-        fetchAttendance()
+      </div>
-    }, [])
+    );
-
-    if (loading) {
-        return <div className="p-8">Loading...</div>
   }
 
   return (
-        <div className="p-8">
+    <div className="space-y-8">
-            <h1 className="text-2xl font-bold mb-6">Attendance Monitoring</h1>
+      <PageHeader
+        title="Attendance"
+        description="Monitor gym check-ins and check-outs"
+        breadcrumbs={[{ label: "Attendance" }]}
+      />
 
-            <div className="bg-white rounded-lg shadow overflow-hidden">
+      <div className="card-modern">
-                <table className="min-w-full divide-y divide-gray-200">
+        <div className="overflow-x-auto">
-                    <thead className="bg-gray-50">
+          <table className="w-full">
-                        <tr>
+            <thead>
-                            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+              <tr className="border-b border-border">
-                                Client ID
+                <th className="text-left py-3 px-4 text-sm font-medium text-muted-foreground">
+                  Client
                 </th>
-                            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                <th className="text-left py-3 px-4 text-sm font-medium text-muted-foreground">
                   Type
                 </th>
-                            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                <th className="text-left py-3 px-4 text-sm font-medium text-muted-foreground">
                   Check In
                 </th>
-                            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                <th className="text-left py-3 px-4 text-sm font-medium text-muted-foreground">
                   Check Out
                 </th>
-                            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                <th className="text-left py-3 px-4 text-sm font-medium text-muted-foreground">
                   Status
                 </th>
               </tr>
             </thead>
-                    <tbody className="bg-white divide-y divide-gray-200">
+            <tbody>
               {attendance.map((record) => (
-                            <tr key={record.id}>
+                <tr
-                                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
+                  key={record.id}
-                                    {record.clientId}
+                  className="border-b border-border/50 hover:bg-muted/50 transition-colors"
+                >
+                  <td className="py-3 px-4 text-sm">
+                    {record.userId.substring(0, 8)}...
                   </td>
-                                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500 capitalize">
+                  <td className="py-3 px-4 text-sm capitalize text-muted-foreground">
                     {record.type}
                   </td>
-                                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                  <td className="py-3 px-4 text-sm text-muted-foreground">
-                                    {format(new Date(record.checkInTime), 'PP p')}
+                    {new Date(record.checkIn).toLocaleString()}
                   </td>
-                                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                  <td className="py-3 px-4 text-sm text-muted-foreground">
-                                    {record.checkOutTime ? format(new Date(record.checkOutTime), 'PP p') : '-'}
+                    {record.checkOut
+                      ? new Date(record.checkOut).toLocaleString()
+                      : "-"}
                   </td>
-                                <td className="px-6 py-4 whitespace-nowrap">
+                  <td className="py-3 px-4">
-                                    <span className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${record.checkOutTime
+                    <Badge variant={record.checkOut ? "gray" : "success"}>
-                                            ? 'bg-gray-100 text-gray-800'
+                      {record.checkOut ? "Completed" : "Active"}
-                                            : 'bg-green-100 text-green-800'
+                    </Badge>
-                                        }`}>
-                                        {record.checkOutTime ? 'Completed' : 'Active'}
-                                    </span>
                   </td>
                 </tr>
               ))}
+              {attendance.length === 0 && (
+                <tr>
+                  <td
+                    colSpan={5}
+                    className="py-8 text-center text-muted-foreground"
+                  >
+                    No attendance records found
+                  </td>
+                </tr>
+              )}
             </tbody>
           </table>
         </div>
       </div>
-    )
+    </div>
+  );
 }

apps/admin/src/app/globals.css

@@ -4,7 +4,7 @@
 
 @layer base {
   :root {
-    --background: 0 0% 100%;
+    --background: 0 0% 98%;
     --foreground: 222.2 84% 4.9%;
 
     --card: 0 0% 100%;
@@ -13,7 +13,7 @@
     --popover: 0 0% 100%;
     --popover-foreground: 222.2 84% 4.9%;
 
-    --primary: 222.2 47.4% 11.2%;
+    --primary: 221.2 83.2% 53.3%;
     --primary-foreground: 210 40% 98%;
 
     --secondary: 210 40% 96.1%;
@@ -28,24 +28,42 @@
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 210 40% 98%;
 
+    --success: 142.1 76.2% 36.3%;
+    --success-foreground: 355.7 100% 97.3%;
+
+    --warning: 37.7 93.1% 50.2%;
+    --warning-foreground: 222.2 47.4% 11.2%;
+
+    --info: 199.4 86.4% 48.4%;
+    --info-foreground: 210 40% 98%;
+
     --border: 214.3 31.8% 91.4%;
     --input: 214.3 31.8% 91.4%;
-    --ring: 222.2 84% 4.9%;
+    --ring: 221.2 83.2% 53.3%;
 
-    --radius: 0.5rem;
+    --radius: 0.625rem;
+
+    --sidebar-background: 222.2 47.4% 7.8%;
+    --sidebar-foreground: 210 40% 98%;
+    --sidebar-primary: 221.2 83.2% 53.3%;
+    --sidebar-primary-foreground: 210 40% 98%;
+    --sidebar-accent: 217.2 32.6% 17.5%;
+    --sidebar-accent-foreground: 210 40% 98%;
+    --sidebar-border: 217.2 32.6% 17.5%;
+    --sidebar-ring: 217.2 91.6% 59.8%;
   }
 
   .dark {
     --background: 222.2 84% 4.9%;
     --foreground: 210 40% 98%;
 
-    --card: 222.2 84% 4.9%;
+    --card: 222.2 47.4% 10.2%;
     --card-foreground: 210 40% 98%;
 
-    --popover: 222.2 84% 4.9%;
+    --popover: 222.2 47.4% 10.2%;
     --popover-foreground: 210 40% 98%;
 
-    --primary: 210 40% 98%;
+    --primary: 217.2 91.2% 59.8%;
     --primary-foreground: 222.2 47.4% 11.2%;
 
     --secondary: 217.2 32.6% 17.5%;
@@ -60,9 +78,27 @@
     --destructive: 0 62.8% 30.6%;
     --destructive-foreground: 210 40% 98%;
 
+    --success: 142.1 76.2% 36.3%;
+    --success-foreground: 355.7 100% 97.3%;
+
+    --warning: 37.7 93.1% 50.2%;
+    --warning-foreground: 222.2 47.4% 11.2%;
+
+    --info: 199.4 86.4% 48.4%;
+    --info-foreground: 210 40% 98%;
+
     --border: 217.2 32.6% 17.5%;
     --input: 217.2 32.6% 17.5%;
-    --ring: 212.7 26.8% 83.9%;
+    --ring: 224.3 76.3% 48%;
+
+    --sidebar-background: 222.2 47.4% 7.8%;
+    --sidebar-foreground: 210 40% 98%;
+    --sidebar-primary: 217.2 91.2% 59.8%;
+    --sidebar-primary-foreground: 222.2 47.4% 11.2%;
+    --sidebar-accent: 217.2 32.6% 17.5%;
+    --sidebar-accent-foreground: 210 40% 98%;
+    --sidebar-border: 217.2 32.6% 17.5%;
+    --sidebar-ring: 217.2 91.6% 59.8%;
   }
 }
 
@@ -74,3 +110,139 @@
     @apply bg-background text-foreground antialiased;
   }
 }
+
+@layer utilities {
+  .gradient-mesh {
+    background:
+      radial-gradient(
+        at 40% 20%,
+        hsla(221, 83%, 53%, 0.1) 0px,
+        transparent 50%
+      ),
+      radial-gradient(at 80% 0%, hsla(189, 97%, 66%, 0.1) 0px, transparent 50%),
+      radial-gradient(at 0% 50%, hsla(355, 85%, 93%, 0.3) 0px, transparent 50%),
+      radial-gradient(
+        at 80% 50%,
+        hsla(240, 75%, 98%, 0.3) 0px,
+        transparent 50%
+      ),
+      radial-gradient(at 0% 100%, hsla(22, 100%, 92%, 0.2) 0px, transparent 50%);
+  }
+
+  .glass {
+    @apply backdrop-blur-xl bg-white/70 dark:bg-black/70;
+  }
+
+  .text-gradient {
+    @apply bg-clip-text text-transparent bg-gradient-to-r from-primary to-primary/60;
+  }
+
+  .animate-fade-in {
+    animation: fadeIn 0.5s ease-out forwards;
+  }
+
+  .animate-slide-up {
+    animation: slideUp 0.5s ease-out forwards;
+  }
+
+  .animate-scale-in {
+    animation: scaleIn 0.3s ease-out forwards;
+  }
+
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes slideUp {
+    from {
+      opacity: 0;
+      transform: translateY(20px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes scaleIn {
+    from {
+      opacity: 0;
+      transform: scale(0.95);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+  .stagger-1 {
+    animation-delay: 0.1s;
+  }
+  .stagger-2 {
+    animation-delay: 0.2s;
+  }
+  .stagger-3 {
+    animation-delay: 0.3s;
+  }
+  .stagger-4 {
+    animation-delay: 0.4s;
+  }
+  .stagger-5 {
+    animation-delay: 0.5s;
+  }
+}
+
+@layer components {
+  .btn-primary {
+    @apply inline-flex items-center justify-center rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow-sm transition-all duration-200 hover:bg-primary/90 hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50;
+  }
+
+  .btn-secondary {
+    @apply inline-flex items-center justify-center rounded-lg bg-secondary px-4 py-2 text-sm font-medium text-secondary-foreground shadow-sm transition-all duration-200 hover:bg-secondary/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50;
+  }
+
+  .btn-ghost {
+    @apply inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-medium text-muted-foreground transition-all duration-200 hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50;
+  }
+
+  .btn-danger {
+    @apply inline-flex items-center justify-center rounded-lg bg-destructive px-4 py-2 text-sm font-medium text-destructive-foreground shadow-sm transition-all duration-200 hover:bg-destructive/90 hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50;
+  }
+
+  .card-modern {
+    @apply rounded-xl border border-border/50 bg-card p-6 shadow-sm transition-all duration-200 hover:shadow-md;
+  }
+
+  .card-elevated {
+    @apply rounded-xl border border-border/50 bg-card p-6 shadow-lg transition-all duration-200 hover:shadow-xl hover:-translate-y-0.5;
+  }
+
+  .input-modern {
+    @apply flex h-10 w-full rounded-lg border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 transition-all duration-200;
+  }
+
+  .badge-success {
+    @apply inline-flex items-center rounded-full bg-green-100 px-2.5 py-0.5 text-xs font-medium text-green-800 dark:bg-green-900/30 dark:text-green-400;
+  }
+
+  .badge-warning {
+    @apply inline-flex items-center rounded-full bg-yellow-100 px-2.5 py-0.5 text-xs font-medium text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400;
+  }
+
+  .badge-error {
+    @apply inline-flex items-center rounded-full bg-red-100 px-2.5 py-0.5 text-xs font-medium text-red-800 dark:bg-red-900/30 dark:text-red-400;
+  }
+
+  .badge-info {
+    @apply inline-flex items-center rounded-full bg-blue-100 px-2.5 py-0.5 text-xs font-medium text-blue-800 dark:bg-blue-900/30 dark:text-blue-400;
+  }
+
+  .badge-default {
+    @apply inline-flex items-center rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-800 dark:bg-gray-800 dark:text-gray-300;
+  }
+}

apps/admin/src/app/layout.tsx

@@ -29,9 +29,11 @@ export default function RootLayout({
       <QueryProvider>
         <html lang="en">
           <body className={inter.className}>
-            <div className="flex min-h-screen bg-slate-50">
+            <div className="flex min-h-screen bg-background">
               <Sidebar />
-              <main className="flex-1 ml-20 p-8">{children}</main>
+              <main className="flex-1 p-6 lg:p-8 min-h-screen">
+                <div className="max-w-7xl mx-auto space-y-8">{children}</div>
+              </main>
             </div>
             <Toaster richColors position="top-right" />
           </body>

apps/admin/src/app/page.tsx

@@ -1,32 +1,62 @@
 "use client";
 
-import { Users, CreditCard, CalendarCheck, TrendingUp } from "lucide-react";
+import {
-import { StatsCard } from "@/components/ui/StatsCard";
+  Users,
-import { StatsCardSkeleton } from "@/components/ui/skeleton";
+  CreditCard,
+  CalendarCheck,
+  TrendingUp,
+  RefreshCw,
+} from "lucide-react";
+import { StatsCard, StatsCardSkeleton } from "@/components/ui/StatsCard";
+import { PageHeader } from "@/components/ui/PageHeader";
 import { UserManagement } from "@/components/users/UserManagement";
 import { AnalyticsDashboard } from "@/components/analytics/AnalyticsDashboard";
 import { useDashboardStats } from "@/hooks/use-api";
+import { useQueryClient } from "@tanstack/react-query";
+import { Button } from "@/components/ui/button";
 
 export default function Home() {
-  const { data: stats, isLoading } = useDashboardStats();
+  const { data: stats, isLoading, refetch, isFetching } = useDashboardStats();
+  const queryClient = useQueryClient();
+
+  const handleRefresh = () => {
+    queryClient.invalidateQueries({ queryKey: ["dashboard-stats"] });
+    queryClient.invalidateQueries({ queryKey: ["analytics"] });
+    refetch();
+  };
 
   const formatCurrency = (value: number) => {
     return new Intl.NumberFormat("en-US", {
       style: "currency",
       currency: "USD",
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 0,
     }).format(value || 0);
   };
 
   return (
     <div className="space-y-8">
-      <div>
+      <PageHeader
-        <h2 className="text-3xl font-bold text-slate-900">Dashboard</h2>
+        title="Dashboard"
-        <p className="text-slate-500 mt-2">
+        description="Welcome back! Here's what's happening with your gym today."
-          Welcome back, here's what's happening today.
+        actions={
-        </p>
+          <Button
-      </div>
+            variant="outline"
+            size="sm"
+            onClick={handleRefresh}
+            disabled={isFetching}
+            className="gap-2"
+          >
+            <RefreshCw
+              className={`h-4 w-4 ${isFetching ? "animate-spin" : ""}`}
+            />
+            Refresh
+          </Button>
+        }
+      />
 
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+      {/* Stats Grid */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
         {isLoading ? (
           <>
             <StatsCardSkeleton />
@@ -72,20 +102,33 @@ export default function Home() {
         )}
       </div>
 
-      <div className="flex flex-col gap-8">
+      {/* Main Content Grid */}
-        <div className="bg-white rounded-xl shadow-sm border border-slate-100 p-6">
+      <div className="grid grid-cols-1 xl:grid-cols-3 gap-6">
-          <h3 className="text-xl font-bold text-slate-900 mb-6">
+        {/* <div className="xl:col-span-2"> */}
-            Recent Activity
+        {/*   <div className="card-modern"> */}
-          </h3>
+        {/*     <div className="mb-6"> */}
-          <UserManagement />
+        {/*       <h3 className="text-lg font-semibold">Recent Activity</h3> */}
+        {/*       <p className="text-sm text-muted-foreground"> */}
+        {/*         Manage and view your users */}
+        {/*       </p> */}
+        {/*     </div> */}
+        {/*     <UserManagement /> */}
+        {/*   </div> */}
+        {/* </div> */}
+
+        {/* Analytics Sidebar */}
+        <div className="xl:col-span-3">
+          <div className="card-modern">
+            <div className="mb-6">
+              <h3 className="text-lg font-semibold">Quick Analytics</h3>
+              <p className="text-sm text-muted-foreground">
+                Overview of your gym metrics
+              </p>
             </div>
-        <div className="bg-white rounded-xl shadow-sm border border-slate-100 p-6">
-          <h3 className="text-xl font-bold text-slate-900 mb-6">
-            Quick Analytics
-          </h3>
             <AnalyticsDashboard />
           </div>
         </div>
       </div>
+    </div>
   );
 }

apps/admin/src/app/profile/page.tsx

@@ -55,7 +55,7 @@ export default function ProfilePage() {
         <div className="flex justify-between items-center mb-6">
           <h1 className="text-2xl font-bold">Profile</h1>
           <Button
-            variant={isEditing ? "primary" : "secondary"}
+            variant={isEditing ? "default" : "secondary"}
             onClick={() => setIsEditing(!isEditing)}
           >
             {isEditing ? "Cancel" : "Edit Profile"}

apps/admin/src/app/recommendations/page.tsx

@@ -12,6 +12,7 @@ import {
   useUpdateRecommendation,
   type Recommendation,
 } from "@/hooks/use-api";
+import { PageHeader } from "@/components/ui/PageHeader";
 
 export default function RecommendationsPage() {
   const { user } = useUser();
@@ -83,126 +84,110 @@ export default function RecommendationsPage() {
 
   if (usersLoading || recsLoading) {
     return (
-      <div className="flex items-center justify-center h-screen">
+      <div className="flex items-center justify-center h-64">
-        <div className="text-xl">Loading...</div>
+        <div className="text-lg">Loading...</div>
       </div>
     );
   }
 
   return (
-    <div className="container mx-auto py-10 px-4">
+    <div className="space-y-8">
-      <div className="flex justify-between items-center mb-8">
+      <PageHeader
-        <h1 className="text-3xl font-bold">AI Recommendations</h1>
+        title="AI Recommendations"
-
+        description="Generate and manage AI-powered fitness recommendations"
-        {/* Model Selection Toggle */}
+        breadcrumbs={[{ label: "AI Recommendations" }]}
-        <div className="flex items-center gap-3 bg-white px-4 py-2 rounded-lg shadow">
-          <span className="text-sm font-medium text-gray-700">
-            {useExternalModel ? "DeepSeek AI" : "Local Ollama"}
-          </span>
-          <button
-            onClick={() => setUseExternalModel(!useExternalModel)}
-            className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
-              useExternalModel ? "bg-blue-600" : "bg-gray-300"
-            }`}
-          >
-            <span
-              className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
-                useExternalModel ? "translate-x-6" : "translate-x-1"
-              }`}
       />
-          </button>
-          <span className="text-xs text-gray-500">
-            {useExternalModel ? "External" : "Local"}
-          </span>
-        </div>
-      </div>
 
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
         {/* Generate Section */}
-        <div>
+        <div className="card-modern">
-          <h2 className="text-2xl font-semibold mb-4">
+          <div className="mb-6">
-            Generate Recommendations
+            <h3 className="text-lg font-semibold">Generate Recommendations</h3>
-          </h2>
+            <p className="text-sm text-muted-foreground">
-          <div className="bg-white shadow rounded-lg p-6">
-            <p className="mb-4 text-gray-600">
               Select a user to generate a new daily recommendation.
             </p>
+          </div>
           <ul className="space-y-4">
             {users.map((user) => (
               <li
                 key={user.id}
-                  className="flex items-center justify-between border-b pb-2"
+                className="flex items-center justify-between border-b border-border/50 pb-4 last:border-0 last:pb-0"
               >
                 <div>
                   <p className="font-medium">
                     {user.firstName} {user.lastName}
                   </p>
-                    <p className="text-sm text-gray-500">{user.email}</p>
+                  <p className="text-sm text-muted-foreground">{user.email}</p>
                 </div>
                 <button
                   onClick={() => handleGenerate(user.id)}
                   disabled={generateRec.isPending}
-                    className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 disabled:opacity-50"
+                  className="btn-primary"
                 >
                   {generateRec.isPending ? "Generating..." : "Generate"}
                 </button>
               </li>
             ))}
             {users.length === 0 && (
-                <p className="text-gray-500 italic">No users found.</p>
+              <p className="text-muted-foreground italic">No users found.</p>
             )}
           </ul>
         </div>
-        </div>
 
         {/* Pending Approvals Section */}
-        <div>
+        <div className="card-modern">
-          <h2 className="text-2xl font-semibold mb-4">Pending Approvals</h2>
+          <div className="mb-6">
-          <div className="bg-white shadow rounded-lg p-6">
+            <h3 className="text-lg font-semibold">Pending Approvals</h3>
+            <p className="text-sm text-muted-foreground">
+              Review and approve AI-generated recommendations
+            </p>
+          </div>
           {pendingRecommendations.length === 0 ? (
-              <p className="text-gray-500 italic">
+            <p className="text-muted-foreground italic">
               No pending recommendations.
             </p>
           ) : (
-              <ul className="space-y-6">
+            <ul className="space-y-4">
               {pendingRecommendations.map((rec) => (
-                  <li key={rec.id} className="border rounded p-4">
+                <li
-                    <div className="flex justify-between items-start mb-2">
+                  key={rec.id}
-                      <h3 className="font-bold">For: User {rec.userId}</h3>
+                  className="border border-border rounded-lg p-4"
-                      <span className="text-xs text-gray-500">
+                >
+                  <div className="flex justify-between items-start mb-3">
+                    <h4 className="font-semibold">For: User {rec.userId}</h4>
+                    <span className="text-xs text-muted-foreground">
                       {new Date(rec.createdAt).toLocaleDateString()}
                     </span>
                   </div>
                   <div className="space-y-2 text-sm mb-4">
                     <div>
-                        <span className="font-semibold">Advice:</span>{" "}
+                      <span className="font-medium">Advice:</span>{" "}
                       {rec.recommendationText}
                     </div>
                     <div>
-                        <span className="font-semibold">Activity:</span>{" "}
+                      <span className="font-medium">Activity:</span>{" "}
                       {rec.activityPlan}
                     </div>
                     <div>
-                        <span className="font-semibold">Diet:</span>{" "}
+                      <span className="font-medium">Diet:</span> {rec.dietPlan}
-                        {rec.dietPlan}
                     </div>
                   </div>
-                    <div className="flex space-x-2">
+                  <div className="flex gap-2">
                     <button
                       onClick={() => handleEdit(rec)}
-                        className="flex-1 bg-blue-500 text-white py-2 rounded hover:bg-blue-600"
+                      className="btn-secondary flex-1"
                     >
                       Edit
                     </button>
                     <button
                       onClick={() => handleApprove(rec.id, "approved")}
-                        className="flex-1 bg-green-600 text-white py-2 rounded hover:bg-green-700"
+                      className="btn-primary flex-1 bg-emerald-600 hover:bg-emerald-700"
                     >
                       Approve
                     </button>
                     <button
                       onClick={() => handleApprove(rec.id, "rejected")}
-                        className="flex-1 bg-red-600 text-white py-2 rounded hover:bg-red-700"
+                      className="btn-danger flex-1"
                     >
                       Reject
                     </button>
@@ -214,6 +199,5 @@ export default function RecommendationsPage() {
         </div>
       </div>
     </div>
-    </div>
   );
 }

apps/admin/src/app/users/page.tsx

@@ -1,11 +1,18 @@
-import { UserManagement } from '@/components/users/UserManagement'
+import { UserManagement } from "@/components/users/UserManagement";
+import { PageHeader } from "@/components/ui/PageHeader";
 
 export default function UsersPage() {
   return (
-    <main className="min-h-screen bg-gray-50">
+    <div className="space-y-8">
-      <div className="container mx-auto px-4 py-8">
+      <PageHeader
+        title="Users"
+        description="Manage your gym members, trainers, and administrators"
+        breadcrumbs={[{ label: "Users", href: "/users" }]}
+      />
+
+      <div className="card-modern">
         <UserManagement />
       </div>
-    </main>
+    </div>
-  )
+  );
 }

apps/admin/src/components/Navigation.tsx

@@ -71,7 +71,7 @@ export function Navigation(): ReactElement {
               <li key={item.href}>
                 <Link href={item.href} className="flex items-center gap-2">
                   <Button
-                    variant={pathname === item.href ? "primary" : "secondary"}
+                    variant={pathname === item.href ? "default" : "secondary"}
                     className={cn(
                       "h-9 px-4 py-2",
                       pathname === item.href &&

apps/admin/src/components/ui/PageHeader.tsx

@@ -0,0 +1,101 @@
+import { cn } from "@/lib/utils";
+import { ChevronRight, Home } from "lucide-react";
+import Link from "next/link";
+
+interface Breadcrumb {
+  label: string;
+  href?: string;
+}
+
+interface PageHeaderProps {
+  title: string;
+  description?: string;
+  breadcrumbs?: Breadcrumb[];
+  actions?: React.ReactNode;
+  className?: string;
+}
+
+export function PageHeader({
+  title,
+  description,
+  breadcrumbs,
+  actions,
+  className,
+}: PageHeaderProps) {
+  return (
+    <div className={cn("space-y-4", className)}>
+      {breadcrumbs && breadcrumbs.length > 0 && (
+        <nav className="flex items-center gap-1 text-sm">
+          <Link
+            href="/"
+            className="flex items-center gap-1 text-muted-foreground hover:text-foreground transition-colors"
+          >
+            <Home className="h-4 w-4" />
+            <span>Home</span>
+          </Link>
+          {breadcrumbs.map((crumb, index) => (
+            <span key={index} className="flex items-center gap-1">
+              <ChevronRight className="h-4 w-4 text-muted-foreground" />
+              {crumb.href ? (
+                <Link
+                  href={crumb.href}
+                  className="text-muted-foreground hover:text-foreground transition-colors"
+                >
+                  {crumb.label}
+                </Link>
+              ) : (
+                <span className="font-medium text-foreground">
+                  {crumb.label}
+                </span>
+              )}
+            </span>
+          ))}
+        </nav>
+      )}
+      <div className="flex items-start justify-between gap-4">
+        <div className="space-y-1">
+          <h1 className="text-3xl font-bold tracking-tight">{title}</h1>
+          {description && (
+            <p className="text-muted-foreground">{description}</p>
+          )}
+        </div>
+        {actions && <div className="flex items-center gap-3">{actions}</div>}
+      </div>
+    </div>
+  );
+}
+
+interface PageSectionProps {
+  title?: string;
+  description?: string;
+  children: React.ReactNode;
+  actions?: React.ReactNode;
+  className?: string;
+}
+
+export function PageSection({
+  title,
+  description,
+  children,
+  actions,
+  className,
+}: PageSectionProps) {
+  return (
+    <section className={cn("space-y-4", className)}>
+      {(title || actions) && (
+        <div className="flex items-start justify-between gap-4">
+          <div className="space-y-1">
+            {title && (
+              <h2 className="text-xl font-semibold tracking-tight">{title}</h2>
+            )}
+            {description && (
+              <p className="text-sm text-muted-foreground">{description}</p>
+            )}
+          </div>
+          {actions && <div className="flex items-center gap-2">{actions}</div>}
+        </div>
+      )}
+      {children}
+    </section>
+  );
+}

apps/admin/src/components/ui/Sidebar.tsx

@@ -9,38 +9,48 @@ import {
   CalendarCheck,
   CreditCard,
   Settings,
-  LogOut,
   Brain,
+  ChevronLeft,
+  Activity,
 } from "lucide-react";
 import { UserButton, useUser } from "@clerk/nextjs";
 import { usePendingRecommendationsCount } from "@/hooks/use-api";
+import { cn } from "@/lib/utils";
+
+interface NavItem {
+  icon: React.ElementType;
+  label: string;
+  href: string;
+  badge?: number;
+}
 
 export function Sidebar() {
   const pathname = usePathname();
   const { user } = useUser();
   const { data: pendingCount = 0 } = usePendingRecommendationsCount();
   const [mounted, setMounted] = useState(false);
+  const [isCollapsed, setIsCollapsed] = useState(false);
 
   useEffect(() => {
     setMounted(true);
+    const saved = localStorage.getItem("sidebar-collapsed");
+    if (saved) setIsCollapsed(JSON.parse(saved));
   }, []);
 
-  const menuItems = [
+  const handleToggle = () => {
+    const newState = !isCollapsed;
+    setIsCollapsed(newState);
+    localStorage.setItem("sidebar-collapsed", JSON.stringify(newState));
+  };
+
+  const navItems: NavItem[] = [
     { icon: LayoutDashboard, label: "Dashboard", href: "/" },
     { icon: Users, label: "Users", href: "/users" },
     {
       icon: Brain,
-      label: (
+      label: "AI Recommendations",
-        <span className="flex items-center">
-          AI Recommendations
-          {pendingCount > 0 && (
-            <span className="ml-2 inline-block bg-red-600 text-xs rounded-full px-2 py-0.5">
-              {pendingCount}
-            </span>
-          )}
-        </span>
-      ),
       href: "/recommendations",
+      badge: pendingCount > 0 ? pendingCount : undefined,
     },
     { icon: CalendarCheck, label: "Attendance", href: "/attendance" },
     { icon: CreditCard, label: "Payments", href: "/payments" },
@@ -48,60 +58,127 @@ export function Sidebar() {
   ];
 
   return (
-    <aside className="w-20 hover:w-64 bg-slate-900 text-white h-screen fixed left-0 top-0 flex flex-col border-r border-slate-800 transition-all duration-300 z-50 group overflow-hidden">
+    <aside
-      <div className="p-6 border-b border-slate-800 flex items-center overflow-hidden whitespace-nowrap">
+      className={cn(
-        <h1 className="text-2xl font-bold bg-gradient-to-r from-blue-400 to-indigo-400 bg-clip-text text-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300">
+        "fixed left-0 top-0 z-40 h-screen transition-all duration-300 ease-in-out",
-          FitAI Admin
+        isCollapsed ? "w-[72px]" : "w-[260px]",
-        </h1>
+        "bg-gradient-to-b from-[var(--sidebar-background)] to-[#0f172a]",
+      )}
+    >
+      <div className="flex h-full flex-col border-r border-white/5">
+        {/* Logo */}
+        <div
+          className={cn(
+            "flex h-16 items-center border-b border-white/5 px-4",
+            isCollapsed ? "justify-center" : "justify-between",
+          )}
+        >
+          {!isCollapsed && (
+            <Link href="/" className="flex items-center gap-2">
+              <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-gradient-to-br from-blue-500 to-indigo-600 shadow-lg shadow-blue-500/25">
+                <Activity className="h-5 w-5 text-white" />
+              </div>
+              <span className="text-lg font-bold text-white">FitAI</span>
+            </Link>
+          )}
+          {isCollapsed && (
+            <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-gradient-to-br from-blue-500 to-indigo-600 shadow-lg shadow-blue-500/25">
+              <Activity className="h-5 w-5 text-white" />
+            </div>
+          )}
         </div>
 
-      <nav className="flex-1 p-4 space-y-2">
+        {/* Toggle Button */}
-        {menuItems.map((item) => {
+        <button
+          onClick={handleToggle}
+          className={cn(
+            "absolute -right-3 top-20 z-50 flex h-6 w-6 items-center justify-center rounded-full border border-white/10 bg-slate-800 text-white/60 shadow-lg transition-all hover:bg-slate-700 hover:text-white",
+            isCollapsed ? "left-[60px]" : "left-[244px]",
+          )}
+        >
+          <ChevronLeft
+            className={cn(
+              "h-3.5 w-3.5 transition-transform",
+              isCollapsed && "rotate-180",
+            )}
+          />
+        </button>
+
+        {/* Navigation */}
+        <nav className="flex-1 space-y-1 overflow-y-auto p-3">
+          {navItems.map((item) => {
             const Icon = item.icon;
-          const isActive = pathname === item.href;
+            const isActive =
-          const label =
+              pathname === item.href ||
-            typeof item.label === "string" ? item.label : item.label;
+              (item.href !== "/" && pathname.startsWith(item.href));
+
             return (
               <Link
                 key={item.href}
                 href={item.href}
-              className={`flex items-center gap-3 px-4 py-3 rounded-lg transition-all duration-200 ${
+                className={cn(
+                  "group flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-all duration-200",
                   isActive
-                  ? "bg-blue-600 text-white shadow-lg shadow-blue-900/20"
+                    ? "bg-gradient-to-r from-blue-600 to-blue-500 text-white shadow-lg shadow-blue-500/25"
-                  : "text-slate-400 hover:bg-slate-800 hover:text-white"
+                    : "text-slate-400 hover:bg-white/5 hover:text-white",
-              }`}
+                  isCollapsed && "justify-center px-2",
+                )}
               >
-              <div className="min-w-[20px]">
                 <Icon
-                  size={20}
+                  className={cn(
-                  className={
+                    "h-5 w-5 flex-shrink-0 transition-colors",
                     isActive
                       ? "text-white"
-                      : "text-slate-500 group-hover:text-white"
+                      : "text-slate-500 group-hover:text-white",
-                  }
+                  )}
                 />
-              </div>
+                {!isCollapsed && (
-              <span className="font-medium opacity-0 group-hover:opacity-100 transition-opacity duration-300 whitespace-nowrap overflow-hidden">
+                  <>
-                {label}
+                    <span className="flex-1">{item.label}</span>
+                    {item.badge !== undefined && (
+                      <span className="flex h-5 min-w-[20px] items-center justify-center rounded-full bg-red-500 px-1.5 text-xs font-bold text-white">
+                        {item.badge > 99 ? "99+" : item.badge}
                       </span>
+                    )}
+                  </>
+                )}
+                {isCollapsed && item.badge !== undefined && (
+                  <span className="absolute -right-1 -top-1 flex h-4 min-w-[16px] items-center justify-center rounded-full bg-red-500 px-1 text-[10px] font-bold text-white">
+                    {item.badge > 9 ? "9+" : item.badge}
+                  </span>
+                )}
               </Link>
             );
           })}
         </nav>
 
-      <div className="p-4 border-t border-slate-800">
+        {/* User Section */}
-        <div className="flex items-center gap-3 px-2 py-3 rounded-lg bg-slate-800/50 overflow-hidden whitespace-nowrap">
+        <div
-          <div className="min-w-[32px]">
+          className={cn(
+            "border-t border-white/5 p-3",
+            isCollapsed && "flex justify-center",
+          )}
+        >
+          <div
+            className={cn(
+              "flex items-center gap-3 rounded-lg bg-white/5 p-2 transition-colors hover:bg-white/10",
+              isCollapsed && "justify-center p-2",
+            )}
+          >
+            <div className={cn("flex-shrink-0", isCollapsed ? "" : "ml-1")}>
               {mounted && <UserButton afterSignOutUrl="/" />}
             </div>
-          <div className="flex-1 min-w-0 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
+            {!isCollapsed && (
-            <p className="text-sm font-medium text-white truncate">
+              <div className="min-w-0 flex-1">
-              {user?.fullName || "Admin User"}
+                <p className="truncate text-sm font-medium text-white">
+                  {user?.fullName || "Admin"}
                 </p>
-            <p className="text-xs text-slate-400 truncate">
+                <p className="truncate text-xs text-slate-400">
                   {user?.primaryEmailAddress?.emailAddress}
                 </p>
               </div>
+            )}
+          </div>
         </div>
       </div>
     </aside>

apps/admin/src/components/ui/StatsCard.tsx

@@ -1,5 +1,6 @@
 import { LucideIcon } from "lucide-react";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+import { TrendingUp, TrendingDown, Minus } from "lucide-react";
 
 interface StatsCardProps {
   title: string;
@@ -7,45 +8,132 @@ interface StatsCardProps {
   change?: string;
   trend?: "up" | "down" | "neutral";
   icon: LucideIcon;
-    color?: "blue" | "green" | "purple" | "orange";
+  color?: "blue" | "green" | "purple" | "orange" | "red";
+  className?: string;
 }
 
-export function StatsCard({ title, value, change, trend, icon: Icon, color = "blue" }: StatsCardProps) {
+export function StatsCard({
+  title,
+  value,
+  change,
+  trend,
+  icon: Icon,
+  color = "blue",
+  className,
+}: StatsCardProps) {
   const colorStyles = {
-        blue: "bg-blue-50 text-blue-600",
+    blue: {
-        green: "bg-green-50 text-green-600",
+      gradient: "from-blue-500/10 to-blue-600/5",
-        purple: "bg-purple-50 text-purple-600",
+      iconBg: "bg-gradient-to-br from-blue-500 to-blue-600",
-        orange: "bg-orange-50 text-orange-600",
+      iconShadow: "shadow-blue-500/25",
+      text: "text-blue-600",
+      trendUp: "text-emerald-600",
+      trendDown: "text-red-600",
+    },
+    green: {
+      gradient: "from-emerald-500/10 to-emerald-600/5",
+      iconBg: "bg-gradient-to-br from-emerald-500 to-emerald-600",
+      iconShadow: "shadow-emerald-500/25",
+      text: "text-emerald-600",
+      trendUp: "text-emerald-600",
+      trendDown: "text-red-600",
+    },
+    purple: {
+      gradient: "from-violet-500/10 to-violet-600/5",
+      iconBg: "bg-gradient-to-br from-violet-500 to-violet-600",
+      iconShadow: "shadow-violet-500/25",
+      text: "text-violet-600",
+      trendUp: "text-emerald-600",
+      trendDown: "text-red-600",
+    },
+    orange: {
+      gradient: "from-amber-500/10 to-amber-600/5",
+      iconBg: "bg-gradient-to-br from-amber-500 to-orange-600",
+      iconShadow: "shadow-amber-500/25",
+      text: "text-amber-600",
+      trendUp: "text-emerald-600",
+      trendDown: "text-red-600",
+    },
+    red: {
+      gradient: "from-rose-500/10 to-rose-600/5",
+      iconBg: "bg-gradient-to-br from-rose-500 to-rose-600",
+      iconShadow: "shadow-rose-500/25",
+      text: "text-rose-600",
+      trendUp: "text-emerald-600",
+      trendDown: "text-red-600",
+    },
   };
 
+  const styles = colorStyles[color];
+  const TrendIcon =
+    trend === "up" ? TrendingUp : trend === "down" ? TrendingDown : Minus;
+
   return (
-        <Card>
+    <div
-            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+      className={cn(
-                <CardTitle className="text-sm font-medium text-muted-foreground">
+        "group relative overflow-hidden rounded-2xl border border-border/50 bg-gradient-to-br p-6 transition-all duration-300 hover:shadow-lg hover:-translate-y-1",
-                    {title}
+        styles.gradient,
-                </CardTitle>
+        className,
-                <div className={`p-2 rounded-lg ${colorStyles[color]}`}>
+      )}
-                    <Icon size={16} />
+    >
+      <div className="flex items-start justify-between">
+        <div className="space-y-2">
+          <p className="text-sm font-medium text-muted-foreground">{title}</p>
+          <div className="flex items-baseline gap-2">
+            <span className="text-3xl font-bold tracking-tight">{value}</span>
           </div>
-            </CardHeader>
-            <CardContent>
-                <div className="text-2xl font-bold">{value}</div>
           {change && (
-                    <p className="text-xs text-muted-foreground mt-1">
+            <div className="flex items-center gap-1 text-sm">
+              <TrendIcon
+                className={cn(
+                  "h-4 w-4",
+                  trend === "up" && styles.trendUp,
+                  trend === "down" && styles.trendDown,
+                  trend === "neutral" && "text-muted-foreground",
+                )}
+              />
               <span
-                            className={`font-medium ${trend === "up"
+                className={cn(
-                                    ? "text-green-600"
+                  "font-medium",
-                                    : trend === "down"
+                  trend === "up" && styles.trendUp,
-                                        ? "text-red-600"
+                  trend === "down" && styles.trendDown,
-                                        : "text-slate-600"
+                  trend === "neutral" && "text-muted-foreground",
-                                }`}
+                )}
               >
                 {change}
-                        </span>{" "}
+              </span>
-                        vs last month
+              <span className="text-muted-foreground">vs last month</span>
-                    </p>
+            </div>
           )}
-            </CardContent>
+        </div>
-        </Card>
+        <div
+          className={cn(
+            "flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br shadow-lg transition-transform duration-300 group-hover:scale-110",
+            styles.iconBg,
+            styles.iconShadow,
+          )}
+        >
+          <Icon className="h-6 w-6 text-white" />
+        </div>
+      </div>
+
+      {/* Decorative corner gradient */}
+      <div className="absolute -right-8 -top-8 h-32 w-32 rounded-full bg-gradient-to-br from-white/20 to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
+    </div>
+  );
+}
+
+export function StatsCardSkeleton() {
+  return (
+    <div className="animate-pulse rounded-2xl border border-border/50 bg-gradient-to-br from-muted/30 to-muted/20 p-6">
+      <div className="flex items-start justify-between">
+        <div className="space-y-3">
+          <div className="h-4 w-24 rounded bg-muted" />
+          <div className="h-9 w-32 rounded bg-muted" />
+          <div className="h-4 w-20 rounded bg-muted" />
+        </div>
+        <div className="h-12 w-12 rounded-xl bg-muted" />
+      </div>
+    </div>
   );
 }

apps/admin/src/components/ui/badge.tsx

@@ -0,0 +1,62 @@
+import { cn } from "@/lib/utils";
+import { cva, type VariantProps } from "class-variance-authority";
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary/10 text-primary",
+        secondary: "bg-secondary text-secondary-foreground",
+        success:
+          "bg-emerald-100 text-emerald-800 dark:bg-emerald-900/30 dark:text-emerald-400",
+        warning:
+          "bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-400",
+        destructive:
+          "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400",
+        info: "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400",
+        outline: "border border-input text-foreground",
+        gray: "bg-slate-100 text-slate-800 dark:bg-slate-800 dark:text-slate-300",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+export function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  );
+}
+
+export function StatusBadge({ status }: { status: string }) {
+  const statusConfig: Record<
+    string,
+    { variant: BadgeProps["variant"]; label: string }
+  > = {
+    active: { variant: "success", label: "Active" },
+    inactive: { variant: "gray", label: "Inactive" },
+    pending: { variant: "warning", label: "Pending" },
+    approved: { variant: "success", label: "Approved" },
+    rejected: { variant: "destructive", label: "Rejected" },
+    completed: { variant: "success", label: "Completed" },
+    failed: { variant: "destructive", label: "Failed" },
+    suspended: { variant: "destructive", label: "Suspended" },
+    basic: { variant: "default", label: "Basic" },
+    premium: { variant: "info", label: "Premium" },
+    vip: { variant: "warning", label: "VIP" },
+  };
+
+  const config = statusConfig[status.toLowerCase()] || {
+    variant: "outline",
+    label: status,
+  };
+
+  return <Badge variant={config.variant}>{config.label}</Badge>;
+}

apps/admin/src/components/ui/button.tsx

@@ -1,49 +1,60 @@
-import React from 'react'
+import React from "react";
-import { cn } from '@/lib/utils'
+import { cn } from "@/lib/utils";
-import { Loader2 } from 'lucide-react'
+import { Loader2 } from "lucide-react";
+import { cva, type VariantProps } from "class-variance-authority";
 
-interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+const buttonVariants = cva(
-  variant?: 'primary' | 'secondary' | 'ghost' | 'destructive' | 'outline' | 'default'
+  "inline-flex items-center justify-center rounded-lg text-sm font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
-  size?: 'default' | 'sm' | 'lg' | 'icon'
+  {
-  isLoading?: boolean
+    variants: {
-  children: React.ReactNode
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow-sm hover:bg-primary/90 hover:shadow",
+        destructive:
+          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90 hover:shadow",
+        outline:
+          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  isLoading?: boolean;
 }
 
-export function Button({
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  variant = 'primary',
+  (
-  size = 'default',
+    { className, variant, size, isLoading, children, disabled, ...props },
-  isLoading = false,
+    ref,
-  children,
+  ) => {
-  className = '',
-  disabled,
-  ...props
-}: ButtonProps) {
-  const baseClasses = 'inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50'
-
-  const variantClasses = {
-    primary: 'bg-blue-600 text-white hover:bg-blue-700 shadow hover:bg-blue-700/90',
-    default: 'bg-blue-600 text-white hover:bg-blue-700 shadow hover:bg-blue-700/90',
-    secondary: 'bg-slate-100 text-slate-900 hover:bg-slate-200/80',
-    ghost: 'hover:bg-slate-100 hover:text-slate-900',
-    destructive: 'bg-red-500 text-white hover:bg-red-600/90',
-    outline: 'border border-input bg-transparent shadow-sm hover:bg-slate-100 hover:text-slate-900'
-  }
-
-  const sizeClasses = {
-    default: 'h-9 px-4 py-2',
-    sm: 'h-8 rounded-md px-3 text-xs',
-    lg: 'h-10 rounded-md px-8',
-    icon: 'h-9 w-9'
-  }
-
     return (
       <button
-      className={cn(baseClasses, variantClasses[variant], sizeClasses[size], className)}
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
         disabled={disabled || isLoading}
         {...props}
       >
         {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
         {children}
       </button>
-  )
+    );
-}
+  },
+);
+Button.displayName = "Button";

apps/admin/src/hooks/use-api.ts

@@ -58,6 +58,7 @@ export interface AttendanceRecord {
   checkIn: string;
   checkOut?: string;
   date: string;
+  type?: string;
 }
 
 async function fetchApi<T>(url: string, options?: RequestInit): Promise<T> {