feat: add CardTitle, CardDescription, CardFooter components

apps/admin/public/logo.svg

@@ -0,0 +1,28 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600">
+  <defs>
+    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#2FB7E8;stop-opacity:1" />
+      <stop offset="50%" style="stop-color:#0B9FD0;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#0B7FB3;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+  
+  <!-- Main arrow shape -->
+  <path d="M 420 150 L 540 150 L 420 300 Z" fill="url(#grad1)" opacity="0.95"/>
+  <path d="M 180 150 L 300 300 L 180 300 Z" fill="url(#grad1)" opacity="0.85"/>
+  
+  <!-- Dumbbell - Left -->
+  <g transform="translate(200, 250)">
+    <!-- Left disk -->
+    <circle cx="0" cy="0" r="35" fill="white" opacity="0.95"/>
+    <!-- Bar left -->
+    <rect x="35" y="-15" width="80" height="30" fill="white" rx="4"/>
+    <!-- Right disk -->
+    <circle cx="115" cy="0" r="35" fill="white" opacity="0.95"/>
+    <!-- Grip lines -->
+    <line x1="45" y1="-35" x2="45" y2="35" stroke="url(#grad1)" stroke-width="3" opacity="0.5"/>
+    <line x1="65" y1="-35" x2="65" y2="35" stroke="url(#grad1)" stroke-width="3" opacity="0.5"/>
+    <line x1="85" y1="-35" x2="85" y2="35" stroke="url(#grad1)" stroke-width="3" opacity="0.5"/>
+    <line x1="105" y1="-35" x2="105" y2="35" stroke="url(#grad1)" stroke-width="3" opacity="0.5"/>
+  </g>
+</svg>

apps/admin/public/nextform-logo.svg

@@ -0,0 +1,28 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600">
+  <defs>
+    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#2FB7E8;stop-opacity:1" />
+      <stop offset="50%" style="stop-color:#0B9FD0;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#0B7FB3;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+  
+  <!-- Main arrow shape -->
+  <path d="M 420 150 L 540 150 L 420 300 Z" fill="url(#grad1)" opacity="0.95"/>
+  <path d="M 180 150 L 300 300 L 180 300 Z" fill="url(#grad1)" opacity="0.85"/>
+  
+  <!-- Dumbbell - Left -->
+  <g transform="translate(200, 250)">
+    <!-- Left disk -->
+    <circle cx="0" cy="0" r="35" fill="white" opacity="0.95"/>
+    <!-- Bar left -->
+    <rect x="35" y="-15" width="80" height="30" fill="white" rx="4"/>
+    <!-- Right disk -->
+    <circle cx="115" cy="0" r="35" fill="white" opacity="0.95"/>
+    <!-- Grip lines -->
+    <line x1="45" y1="-35" x2="45" y2="35" stroke="url(#grad1)" stroke-width="3" opacity="0.5"/>
+    <line x1="65" y1="-35" x2="65" y2="35" stroke="url(#grad1)" stroke-width="3" opacity="0.5"/>
+    <line x1="85" y1="-35" x2="85" y2="35" stroke="url(#grad1)" stroke-width="3" opacity="0.5"/>
+    <line x1="105" y1="-35" x2="105" y2="35" stroke="url(#grad1)" stroke-width="3" opacity="0.5"/>
+  </g>
+</svg>

apps/admin/public/nextform.png

@@ -0,0 +1 @@
+PNG - NextForm Logo

apps/admin/src/app/api/fitness-goals/[id]/complete/route.ts

@@ -5,7 +5,7 @@ import { getDatabase } from '@/lib/database';
 // POST - Mark goal as complete
 export async function POST(
     req: NextRequest,
-    { params }: { params: { id: string } }
+    { params }: { params: Promise<{ id: string }> }
 ) {
     try {
         const { userId } = await auth();

apps/admin/src/app/api/fitness-goals/[id]/route.ts

@@ -5,7 +5,7 @@ import { getDatabase } from '@/lib/database';
 // GET - Get specific goal
 export async function GET(
     req: NextRequest,
-    { params }: { params: { id: string } }
+    { params }: { params: Promise<{ id: string }> }
 ) {
     try {
         const { userId } = await auth();
@@ -40,7 +40,7 @@ export async function GET(
 // PUT - Update goal
 export async function PUT(
     req: NextRequest,
-    { params }: { params: { id: string } }
+    { params }: { params: Promise<{ id: string }> }
 ) {
     try {
         const { userId } = await auth();
@@ -82,7 +82,7 @@ export async function PUT(
 // DELETE - Delete goal
 export async function DELETE(
     req: NextRequest,
-    { params }: { params: { id: string } }
+    { params }: { params: Promise<{ id: string }> }
 ) {
     try {
         const { userId } = await auth();

apps/admin/src/app/globals.css

@@ -32,7 +32,7 @@
     --input: 214.3 31.8% 91.4%;
     --ring: 222.2 84% 4.9%;
  
-    --radius: 0.5rem;
+    --radius: 0.75rem;
   }
  
   .dark {

apps/admin/src/app/layout.tsx

@@ -25,11 +25,34 @@ export default function RootLayout({
   return (
     <ClerkProvider>
       <html lang="en">
-        <body className={inter.className}>
+        <body className={`${inter.className} bg-gradient-to-br from-slate-50 via-blue-50 to-slate-100 min-h-screen`}>
-          <div className="flex min-h-screen bg-gradient-to-br from-white via-blue-50 to-slate-50">
+          <div className="flex min-h-screen">
             <Sidebar />
-            <main className="flex-1 ml-64 p-8">
+            <main className="flex-1 ml-64">
+              <div className="sticky top-0 z-40 backdrop-blur-xl bg-white/75 border-b border-slate-200/50 shadow-sm">
+                <div className="px-8 py-4 flex items-center justify-between max-w-7xl mx-auto">
+                  <div>
+                    <h1 className="text-sm font-semibold text-gray-600 uppercase tracking-wide">FitAI Pro</h1>
+                  </div>
+                  <div className="flex items-center gap-4">
+                    <SignedIn>
+                      <UserButton 
+                        appearance={{
+                          elements: {
+                            avatarBox: "w-10 h-10 rounded-full ring-2 ring-blue-200"
+                          }
+                        }}
+                      />
+                    </SignedIn>
+                    <SignedOut>
+                      <SignInButton mode="modal" />
+                    </SignedOut>
+                  </div>
+                </div>
+              </div>
+              <div className="p-8">
                 {children}
+              </div>
             </main>
           </div>
         </body>

apps/admin/src/app/page.tsx

@@ -1,10 +1,10 @@
 "use client";
 
 import { useEffect, useState } from "react";
-import { Users, Activity, Zap, TrendingUp, Trophy, Target } from "lucide-react";
+import { Users, CreditCard, CalendarCheck, TrendingUp } from "lucide-react";
 import { StatsCard } from "@/components/ui/StatsCard";
-import { AnalyticsDashboard } from "@/components/analytics/AnalyticsDashboard";
 import { UserManagement } from "@/components/users/UserManagement";
+import { AnalyticsDashboard } from "@/components/analytics/AnalyticsDashboard";
 import axios from "axios";
 
 interface DashboardStats {
@@ -46,132 +46,87 @@ export default function Home() {
   };
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-white via-slate-50 to-blue-50">
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-slate-100">
-      {/* Premium Header */}
+      <div className="space-y-8 max-w-7xl">
-      <div className="bg-gradient-to-r from-slate-900 via-blue-900 to-slate-900 shadow-2xl">
+        {/* Hero Section */}
-        <div className="max-w-7xl mx-auto px-8 py-12">
+        <div className="pt-8 pb-4">
-          <div className="flex items-end justify-between">
+          <div className="space-y-3">
-            <div className="flex items-end gap-6">
+            <div className="flex items-center gap-4">
-              <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">
+              <img 
-                <Trophy className="w-9 h-9 text-white" />
+                src="/nextform-logo.png" 
-              </div>
+                alt="NextForm" 
-              <div>
+                className="h-20 w-20 object-contain"
-                <h1 className="text-5xl font-black text-white tracking-tight">FitAI</h1>
+              />
-                <p className="text-blue-200 text-sm font-semibold mt-2">Premium Sports Management Platform</p>
+              <div className="flex items-center gap-3">
-              </div>
+                <div className="h-12 w-1 bg-gradient-to-b from-blue-600 to-cyan-600 rounded-full"></div>
-            </div>
+                <h1 className="text-5xl font-black bg-gradient-to-r from-blue-600 via-blue-700 to-cyan-600 bg-clip-text text-transparent">
-            <div className="text-right">
+                  NextForm
-              <p className="text-blue-100 text-sm">Welcome</p>
+                </h1>
-              <p className="text-2xl font-bold text-white">Admin Control</p>
               </div>
             </div>
+            <p className="text-lg text-gray-600 ml-4">Performance metrics & athlete insights</p>
           </div>
         </div>
 
-      {/* Main Content with Proper Spacing */}
+        {/* Stats Grid */}
-      <div className="max-w-7xl mx-auto px-8 py-16">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5">
-        
-        {/* 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
-              title="Total Members"
+            title="Total Users"
             value={loading ? "..." : stats.totalUsers}
-              change="+12% this month"
+            change="+12%" // Placeholder for now as we don't track historical growth yet
             trend="up"
             icon={Users}
             color="blue"
           />
           <StatsCard
-              title="Active Athletes"
+            title="Active Clients"
             value={loading ? "..." : stats.activeClients}
-              change="+8% this week"
+            change="+5%"
             trend="up"
-              icon={Activity}
+            icon={CalendarCheck}
             color="green"
           />
           <StatsCard
             title="Revenue"
             value={loading ? "..." : formatCurrency(stats.totalRevenue)}
-              change={`${stats.revenueGrowth > 0 ? "+" : ""}${stats.revenueGrowth}% growth`}
+            change={`${stats.revenueGrowth > 0 ? "+" : ""}${stats.revenueGrowth}%`}
             trend={stats.revenueGrowth >= 0 ? "up" : "down"}
-              icon={Zap}
+            icon={CreditCard}
-              color="amber"
+            color="purple"
           />
           <StatsCard
             title="Growth"
-              value="24%"
+            value="24%" // Placeholder
-              change="+3% vs last month"
+            change="-2%"
-              trend="up"
+            trend="down"
             icon={TrendingUp}
-              color="cyan"
+            color="orange"
           />
         </div>
-        </div>
 
-        {/* Section: Member Management */}
+        {/* Main Content Grid */}
-        <div className="mb-20">
+        <div className="space-y-6 pb-12">
-          <div className="mb-8">
+          {/* User Management - Full Width */}
-            <h2 className="text-3xl font-black text-slate-900">Members Directory</h2>
+          <div className="bg-gradient-to-br from-slate-50 via-blue-50/30 to-slate-50 rounded-2xl shadow-lg border border-slate-200/50 p-7 hover:shadow-2xl transition-all duration-300 backdrop-blur-sm">
-            <p className="text-slate-600 mt-2 font-medium">View detailed member information and analytics</p>
+            <div className="space-y-6">
+              <div>
+                <h2 className="text-2xl font-bold text-slate-900">Active Athletes</h2>
+                <p className="text-sm text-gray-500 mt-1">Manage and monitor your fitness clients</p>
               </div>
-          <div className="bg-white rounded-3xl shadow-lg border border-slate-100 p-10">
               <UserManagement />
             </div>
           </div>
 
-        {/* Section: Key Insights */}
+          {/* Analytics - 3 Columns Horizontal Layout */}
-        <div className="mb-20">
+          <div className="space-y-4">
-          <div className="mb-8">
+            <div>
-            <h2 className="text-3xl font-black text-slate-900">Key Insights</h2>
+              <h2 className="text-2xl font-bold text-slate-900">Analytics</h2>
-            <p className="text-slate-600 mt-2 font-medium">Quick stats overview</p>
+              <p className="text-sm text-gray-500 mt-1">Performance metrics and insights</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 />
           </div>
         </div>
       </div>
     </div>
-    </div>
   );
 }

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

@@ -2,7 +2,7 @@
 
 import { useEffect, useState } from "react";
 import { useUser } from "@clerk/nextjs";
-import { Button } from "@/components/ui/Button";
+import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 
 interface UserProfile {

apps/admin/src/components/Navigation.tsx

@@ -6,7 +6,7 @@ import { usePathname } from "next/navigation";
 import { Home, Users, BarChart3, User, Brain } from "lucide-react";
 import { SignedIn, UserButton } from "@clerk/nextjs";
 import { cn } from "@/lib/utils";
-import { Button } from "@/components/ui/Button";
+import { Button } from "@/components/ui/button";
 
 interface NavItem {
   href: string;
@@ -52,9 +52,16 @@ export function Navigation(): ReactElement {
           {/* Logo */}
           <Link
             href="/"
-            className="text-xl font-bold text-[#FF0000] hover:text-[#00FF00] transition-colors"
+            className="flex items-center gap-3 hover:opacity-80 transition-opacity"
           >
-            FitAI
+            <img 
+              src="/nextform-logo.png" 
+              alt="NextForm" 
+              className="h-10 w-10 object-contain"
+            />
+            <span className="text-lg font-bold bg-gradient-to-r from-blue-600 to-blue-800 bg-clip-text text-transparent">
+              NextForm
+            </span>
           </Link>
 
           {/* Navigation Items */}

apps/admin/src/components/analytics/AnalyticsDashboard.tsx

@@ -67,74 +67,75 @@ export function AnalyticsDashboard() {
   if (loading) {
     return (
       <div className="flex justify-center items-center h-64">
-        <div className="text-lg">Loading analytics...</div>
+        <div className="text-center">
+          <div className="inline-block animate-spin">⚡</div>
+          <p className="text-gray-600 mt-2 text-sm">Loading analytics...</p>
+        </div>
       </div>
     )
   }
 
   return (
-    <div className="space-y-6">
+    <div className="space-y-4">
-      <h2 className="text-2xl font-bold">Analytics Dashboard</h2>
+      {/* Key Metrics Cards - 3 columns */}
-
+      <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
-      {/* Key Metrics */}
+        <div className="bg-gradient-to-br from-blue-700 via-cyan-500 to-blue-600 rounded-xl p-5 border-0 shadow-lg hover:shadow-2xl transition-all text-white">
-      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+          <p className="text-xs uppercase tracking-wide font-bold text-white mb-2">Total Athletes</p>
-        <Card>
+          <div className="flex items-baseline gap-2">
-          <CardContent>
+            <div className="text-2xl font-black text-white">{totalUsers}</div>
-            <div className="text-center">
+            <span className="text-xs text-white font-semibold">active</span>
-              <div className="text-3xl font-bold text-blue-600">{totalUsers}</div>
-              <div className="text-gray-600">Total Users</div>
           </div>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardContent>
-            <div className="text-center">
-              <div className="text-3xl font-bold text-green-600">${totalRevenue.toLocaleString()}</div>
-              <div className="text-gray-600">Total Revenue</div>
-            </div>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardContent>
-            <div className="text-center">
-              <div className="text-3xl font-bold text-purple-600">{activeMembers}</div>
-              <div className="text-gray-600">Active Members</div>
-            </div>
-          </CardContent>
-        </Card>
         </div>
 
-      {/* Charts */}
+        <div className="bg-gradient-to-br from-amber-700 via-yellow-500 to-amber-600 rounded-xl p-5 border-0 shadow-lg hover:shadow-2xl transition-all text-white">
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+          <p className="text-xs uppercase tracking-wide font-bold text-white mb-2">Total Revenue</p>
-        <Card>
+          <div className="flex items-baseline gap-2">
-          <CardHeader>
+            <div className="text-2xl font-black text-white">${totalRevenue.toLocaleString()}</div>
-            <h3 className="text-lg font-semibold">User Growth</h3>
+            <span className="text-xs text-white font-semibold">ytd</span>
-          </CardHeader>
+          </div>
-          <CardContent>
+        </div>
+
+        <div className="bg-gradient-to-br from-pink-700 via-fuchsia-500 to-pink-600 rounded-xl p-5 border-0 shadow-lg hover:shadow-2xl transition-all text-white">
+          <p className="text-xs uppercase tracking-wide font-bold text-white mb-2">Active Members</p>
+          <div className="flex items-baseline gap-2">
+            <div className="text-2xl font-black text-white">{activeMembers}</div>
+            <span className="text-xs text-white font-semibold">members</span>
+          </div>
+        </div>
+      </div>
+
+      {/* Charts - 3 Columns Horizontal */}
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
+        <div className="bg-gradient-to-br from-blue-700 via-cyan-500 to-blue-600 rounded-xl shadow-lg border-0 p-5 hover:shadow-2xl transition-all">
+          <div className="mb-3">
+            <h3 className="text-sm font-bold text-white">User Growth Trend</h3>
+            <p className="text-xs text-blue-100">Last 6 months performance</p>
+          </div>
+          <div className="h-48 overflow-auto">
             <UserGrowthChart data={userGrowthData} />
-          </CardContent>
+          </div>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <h3 className="text-lg font-semibold">Membership Distribution</h3>
-          </CardHeader>
-          <CardContent>
-            <MembershipDistributionChart data={membershipData} />
-          </CardContent>
-        </Card>
         </div>
 
-      <Card>
+        <div className="bg-gradient-to-br from-amber-700 via-yellow-500 to-amber-600 rounded-xl shadow-lg border-0 p-5 hover:shadow-2xl transition-all">
-        <CardHeader>
+          <div className="mb-3">
-          <h3 className="text-lg font-semibold">Monthly Revenue</h3>
+            <h3 className="text-sm font-bold text-white">Membership Mix</h3>
-        </CardHeader>
+            <p className="text-xs text-amber-100">Distribution breakdown</p>
-        <CardContent>
+          </div>
+          <div className="h-48 overflow-auto">
+            <MembershipDistributionChart data={membershipData} />
+          </div>
+        </div>
+
+        <div className="bg-gradient-to-br from-pink-700 via-fuchsia-500 to-pink-600 rounded-xl shadow-lg border-0 p-5 hover:shadow-2xl transition-all">
+          <div className="mb-3">
+            <h3 className="text-sm font-bold text-white">Revenue Stream</h3>
+            <p className="text-xs text-pink-100">Monthly earnings</p>
+          </div>
+          <div className="h-48 overflow-auto">
             <RevenueChart data={revenueData} />
-        </CardContent>
+          </div>
-      </Card>
+        </div>
+      </div>
     </div>
   )
 }

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

@@ -65,15 +65,25 @@ export function Sidebar() {
     ];
 
     return (
-        <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">
+        <aside className="w-64 bg-gradient-to-b from-slate-900 via-slate-900 to-slate-950 text-white h-screen fixed left-0 top-0 flex flex-col border-r border-slate-800/50 shadow-2xl">
-            <div className="p-6 border-b border-slate-200">
+            {/* Logo Section */}
-                <h1 className="text-2xl font-black bg-gradient-to-r from-blue-600 to-cyan-600 bg-clip-text text-transparent">
+            <div className="p-6 border-b border-slate-800/50">
-                    FitAI
+                <div className="flex items-center gap-3 justify-center">
+                    <img 
+                        src="/nextform-logo.png" 
+                        alt="NextForm" 
+                        className="h-16 w-16 object-contain"
+                    />
+                    <div>
+                        <h1 className="text-lg font-black bg-gradient-to-r from-blue-400 via-cyan-400 to-blue-300 bg-clip-text text-transparent">
+                            NextForm
                         </h1>
-                <p className="text-xs text-slate-600 font-medium mt-1">Sports Admin</p>
+                    </div>
+                </div>
             </div>
 
-            <nav className="flex-1 p-4 space-y-1">
+            {/* Navigation */}
+            <nav className="flex-1 p-4 space-y-1 overflow-y-auto">
                 {menuItems.map((item) => {
                     const Icon = item.icon;
                     const isActive = pathname === item.href;
@@ -82,26 +92,30 @@ export function Sidebar() {
                         <Link
                             key={item.href}
                             href={item.href}
-                            className={`flex items-center gap-3 px-4 py-3 rounded-2xl transition-all duration-200 group font-medium ${isActive
+                            className={`flex items-center gap-3 px-4 py-3 rounded-xl transition-all duration-200 group relative overflow-hidden ${isActive
-                                ? "bg-gradient-to-r from-blue-500 to-cyan-500 text-white shadow-md shadow-blue-500/20"
+                                ? "bg-gradient-to-r from-blue-600 to-cyan-600 text-white shadow-lg shadow-blue-900/30"
-                                : "text-slate-700 hover:bg-slate-100 hover:text-blue-600"}`}
+                                : "text-slate-400 hover:bg-slate-800/40 hover:text-white"}`}
                         >
-                            <Icon size={20} className={isActive ? "text-white" : "text-slate-500 group-hover:text-blue-600"} />
+                            {isActive && <div className="absolute inset-0 bg-white/10 blur-xl"></div>}
-                            <span className="text-sm">{label}</span>
+                            <Icon size={20} className={`${isActive ? "text-white" : "text-slate-500 group-hover:text-white"} relative z-10`} />
+                            <span className="font-semibold relative z-10">{label}</span>
                         </Link>
                     );
                 })}
             </nav>
 
-            <div className="p-4 border-t border-slate-200">
+            {/* User Section */}
-                <div className="flex items-center gap-3 px-4 py-3 rounded-2xl bg-slate-100">
+            <div className="p-4 border-t border-slate-800/50 bg-slate-800/20">
+                <div className="flex items-center gap-3 px-3 py-3 rounded-xl bg-slate-800/50 hover:bg-slate-800/70 transition-colors">
+                    <div className="h-10 w-10 rounded-full bg-gradient-to-br from-blue-500 to-cyan-500 flex-shrink-0 overflow-hidden">
                         <UserButton afterSignOutUrl="/" />
+                    </div>
                     <div className="flex-1 min-w-0">
-                        <p className="text-sm font-semibold text-slate-900 truncate">
+                        <p className="text-sm font-semibold text-white truncate">
-                            {user?.fullName || "Admin User"}
+                            {user?.fullName || "Admin"}
                         </p>
-                        <p className="text-xs text-slate-600 truncate">
+                        <p className="text-xs text-slate-400 truncate">
-                            {user?.primaryEmailAddress?.emailAddress}
+                            {user?.emailAddresses[0]?.emailAddress || "admin@fitai.com"}
                         </p>
                     </div>
                 </div>

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

@@ -1,4 +1,5 @@
 import { LucideIcon } from "lucide-react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 
 interface StatsCardProps {
     title: string;
@@ -6,67 +7,68 @@ interface StatsCardProps {
     change?: string;
     trend?: "up" | "down" | "neutral";
     icon: LucideIcon;
-    color?: "blue" | "green" | "amber" | "cyan";
+    color?: "blue" | "green" | "purple" | "orange";
 }
 
 export function StatsCard({ title, value, change, trend, icon: Icon, color = "blue" }: StatsCardProps) {
     const colorStyles = {
         blue: {
-            bg: "from-blue-50 via-blue-100 to-blue-50",
+            bg: "from-blue-700 via-cyan-500 to-blue-600",
-            text: "text-blue-950",
+            text: "text-white",
-            icon: "bg-gradient-to-br from-blue-500 to-blue-600",
+            light: "from-blue-50 to-cyan-50",
-            border: "border-blue-200",
+            badge: "bg-blue-200/60 text-blue-900 backdrop-blur-sm",
-            label: "text-blue-700"
+            icon: "bg-white/20 text-white backdrop-blur-sm",
         },
         green: {
-            bg: "from-emerald-50 via-emerald-100 to-emerald-50",
+            bg: "from-pink-700 via-fuchsia-500 to-pink-600",
-            text: "text-emerald-950",
+            text: "text-white",
-            icon: "bg-gradient-to-br from-emerald-500 to-emerald-600",
+            light: "from-pink-50 to-rose-50",
-            border: "border-emerald-200",
+            badge: "bg-pink-200/60 text-pink-900 backdrop-blur-sm",
-            label: "text-emerald-700"
+            icon: "bg-white/20 text-white backdrop-blur-sm",
         },
-        amber: {
+        purple: {
-            bg: "from-amber-50 via-amber-100 to-amber-50",
+            bg: "from-amber-700 via-yellow-500 to-amber-600",
-            text: "text-amber-950",
+            text: "text-white",
-            icon: "bg-gradient-to-br from-amber-500 to-amber-600",
+            light: "from-amber-50 to-yellow-50",
-            border: "border-amber-200",
+            badge: "bg-amber-200/60 text-amber-900 backdrop-blur-sm",
-            label: "text-amber-700"
+            icon: "bg-white/20 text-white backdrop-blur-sm",
         },
-        cyan: {
+        orange: {
-            bg: "from-cyan-50 via-cyan-100 to-cyan-50",
+            bg: "from-emerald-700 via-teal-500 to-emerald-600",
-            text: "text-cyan-950",
+            text: "text-white",
-            icon: "bg-gradient-to-br from-cyan-500 to-cyan-600",
+            light: "from-emerald-50 to-teal-50",
-            border: "border-cyan-200",
+            badge: "bg-emerald-200/60 text-emerald-900 backdrop-blur-sm",
-            label: "text-cyan-700"
+            icon: "bg-white/20 text-white backdrop-blur-sm",
         },
     };
 
-    const style = colorStyles[color];
+    const styles = colorStyles[color];
 
     return (
-        <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`}>
+        <Card className={`bg-gradient-to-br ${styles.bg} border-0 shadow-2xl hover:shadow-2xl transition-all duration-500 overflow-hidden group h-full relative before:absolute before:inset-0 before:bg-gradient-to-br before:from-white/10 before:to-transparent before:pointer-events-none`}>
-            <div className="flex items-start justify-between mb-4 gap-3">
+            <CardHeader className="flex flex-row items-start justify-between space-y-0 pb-2.5 pt-5 px-5">
-                <div className="flex-1 min-w-0">
+                <CardTitle className={`text-xs font-bold uppercase tracking-wider ${styles.text} leading-tight max-w-[70%]`}>
-                    <p className={`text-xs ${style.label} uppercase font-black tracking-widest truncate`}>
                     {title}
-                    </p>
+                </CardTitle>
+                <div className={`p-1.5 rounded-lg ${styles.icon} flex-shrink-0`}>
+                    <Icon size={16} strokeWidth={2} />
                 </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`}>
+            </CardHeader>
-                    <Icon size={20} className="text-white" />
+            <CardContent className="px-5 pb-5 space-y-2.5">
-                </div>
+                <div className={`text-2xl font-black ${styles.text}`}>
-            </div>
-            
-            <div className={`text-4xl font-black ${style.text} mb-3 truncate`}>
                     {value}
                 </div>
-            
                 {change && (
-                <div className="flex items-center gap-1 truncate">
+                    <div className="flex items-center gap-1">
-                    <span className={`text-xs font-black uppercase tracking-wide ${style.label} truncate`}>
+                        <span
+                            className={`inline-flex items-center gap-0.5 font-bold px-2 py-0.5 rounded-md text-xs tracking-wide ${styles.badge}`}
+                        >
                             {trend === "up" ? "↑" : trend === "down" ? "↓" : "→"} {change}
                         </span>
+                        <span className="text-xs text-gray-600">vs month</span>
                     </div>
                 )}
-        </div>
+            </CardContent>
+        </Card>
     );
 }

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

@@ -0,0 +1,2 @@
+// Re-export Button component with lowercase filename for compatibility
+export { Button } from './Button';

apps/admin/src/components/ui/card.ts

@@ -0,0 +1,2 @@
+// Re-export Card components with lowercase filename for compatibility
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } from './Card';

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

@@ -31,7 +31,47 @@ export function CardContent({ children, className = '' }: CardProps) {
 
 export function CardTitle({ children, className = '' }: CardProps) {
   return (
-    <div className={`text-sm font-medium ${className}`}>
+    <h2 className={`text-lg font-semibold ${className}`}>
+      {children}
+    </h2>
+  )
+}
+
+export function CardDescription({ children, className = '' }: CardProps) {
+  return (
+    <p className={`text-sm text-gray-600 ${className}`}>
+      {children}
+    </p>
+  )
+}
+
+export function CardFooter({ children, className = '' }: CardProps) {
+  return (
+    <div className={`mt-4 ${className}`}>
+      {children}
+    </div>
+  )
+}
+
+export function CardTitle({ children, className = '' }: CardProps) {
+  return (
+    <h2 className={`text-lg font-semibold ${className}`}>
+      {children}
+    </h2>
+  )
+}
+
+export function CardDescription({ children, className = '' }: CardProps) {
+  return (
+    <p className={`text-sm text-gray-600 ${className}`}>
+      {children}
+    </p>
+  )
+}
+
+export function CardFooter({ children, className = '' }: CardProps) {
+  return (
+    <div className={`mt-4 ${className}`}>
       {children}
     </div>
   )

apps/admin/src/components/users/Recommendations.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useState, useEffect } from "react";
-import { Button } from "@/components/ui/Button";
+import { Button } from "@/components/ui/button";
 import { Card, CardHeader, CardContent } from "@/components/ui/card";
 
 interface Recommendation {

apps/admin/src/components/users/UserGrid.tsx

@@ -265,39 +265,50 @@ export function UserGrid({
   };
 
   return (
-    <div>
+    <div className="space-y-4">
-      <div className="flex justify-between items-center mb-4">
+      {/* Search and Actions Bar */}
+      <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 bg-gradient-to-r from-slate-50 to-blue-50 p-4 rounded-xl border border-slate-200">
+        <div className="w-full sm:w-auto flex-1">
+          <div className="relative">
+            <svg className="absolute left-3 top-3 w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+            </svg>
             <input
               type="text"
-          placeholder="Search users..."
+              placeholder="Search athletes..."
-          className="border border-gray-300 rounded px-4 py-2"
+              className="w-full pl-10 pr-4 py-2.5 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white shadow-sm"
               value={searchQuery}
               onChange={(e) => setSearchQuery(e.target.value)}
             />
-        <div className="flex gap-2">
+          </div>
+        </div>
+        <div className="flex gap-2 w-full sm:w-auto">
           <button
-            className="bg-green-500 text-white px-4 py-2 rounded disabled:opacity-50"
+            className="flex-1 sm:flex-none bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white px-4 py-2.5 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed font-semibold transition-all shadow-md hover:shadow-lg"
             onClick={handleEdit}
             disabled={selectedUsers.length !== 1}
           >
-            Edit User
+            ✏️ Edit
           </button>
           <button
-            className="bg-red-500 text-white px-4 py-2 rounded disabled:opacity-50"
+            className="flex-1 sm:flex-none bg-gradient-to-r from-red-500 to-red-600 hover:from-red-600 hover:to-red-700 text-white px-4 py-2.5 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed font-semibold transition-all shadow-md hover:shadow-lg"
             onClick={handleDelete}
             disabled={selectedUsers.length !== 1}
           >
-            Delete User
+            🗑️ Delete
           </button>
           <button
-            className="bg-yellow-500 text-white px-4 py-2 rounded disabled:opacity-50"
+            className="flex-1 sm:flex-none bg-gradient-to-r from-orange-500 to-orange-600 hover:from-orange-600 hover:to-orange-700 text-white px-4 py-2.5 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed font-semibold transition-all shadow-md hover:shadow-lg"
             onClick={handleBulkDelete}
             disabled={selectedUsers.length === 0}
           >
-            Bulk Delete
+            ⚡ Bulk
           </button>
         </div>
       </div>
+
+      {/* Table */}
+      <div className="bg-white rounded-2xl shadow-lg border border-slate-200 overflow-hidden">
         <div
           className="ag-theme-alpine"
           style={{ height: "600px", width: "100%" }}
@@ -305,5 +316,21 @@ export function UserGrid({
           <AgGridReact<User> {...gridOptions} ref={gridRef} />
         </div>
       </div>
+
+      {/* Selected Count */}
+      {selectedUsers.length > 0 && (
+        <div className="flex items-center justify-between bg-gradient-to-r from-blue-500/10 to-cyan-500/10 border border-blue-200/50 px-4 py-3 rounded-lg">
+          <p className="text-sm font-semibold text-blue-700">
+            {selectedUsers.length} athlete{selectedUsers.length !== 1 ? 's' : ''} selected
+          </p>
+          <button 
+            onClick={() => setSelectedUsers([])}
+            className="text-sm text-blue-600 hover:text-blue-700 font-medium"
+          >
+            Clear selection
+          </button>
+        </div>
+      )}
+    </div>
   );
 }

apps/admin/src/components/users/UserManagement.tsx

@@ -34,7 +34,6 @@ export function UserManagement() {
   const [selectedUser, setSelectedUser] = useState<User | null>(null);
   const [isEditing, setIsEditing] = useState(false);
   const [isDeleting, setIsDeleting] = useState(false);
-  const [activeTab, setActiveTab] = useState<"users" | "details">("users");
   const [editForm, setEditForm] = useState<{
     firstName: string;
     lastName: string;
@@ -207,82 +206,63 @@ export function UserManagement() {
 
   return (
     <div className="space-y-4">
-      {/* Header with Count */}
+      {/* Header Section */}
-      <div className="flex items-center justify-between">
+      <div>
-        <h3 className="text-lg font-black text-slate-900">
+        <h3 className="text-lg font-bold text-gray-900">User Management</h3>
-          {users.length} {users.length === 1 ? 'user' : 'users'}
+        <p className="text-sm text-gray-600 mt-1">Manage and monitor your fitness clients</p>
-        </h3>
-        {selectedUser && (
-          <p className="text-sm text-blue-600 font-semibold">
-            Selected: {selectedUser.firstName} {selectedUser.lastName}
-          </p>
-        )}
       </div>
 
-      {/* Compact Controls - Always Visible but Organized */}
+      {/* Filter Buttons */}
-      <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
+        <Button
+          variant={filter === "all" ? "primary" : "secondary"}
           onClick={() => setFilter("all")}
-              className={`px-2 py-1 text-xs font-semibold rounded-lg transition-all ${
+          className="text-xs"
-                filter === "all"
-                  ? "bg-blue-500 text-white shadow-md"
-                  : "bg-white text-slate-700 hover:bg-slate-100 border border-slate-200"
-              }`}
         >
-              All
+          All Users
-            </button>
+        </Button>
-            <button
+        <Button
+          variant={filter === "client" ? "primary" : "secondary"}
           onClick={() => setFilter("client")}
-              className={`px-2 py-1 text-xs font-semibold rounded-lg transition-all ${
+          className="text-xs"
-                filter === "client"
-                  ? "bg-blue-500 text-white shadow-md"
-                  : "bg-white text-slate-700 hover:bg-slate-100 border border-slate-200"
-              }`}
         >
           Clients
-            </button>
+        </Button>
-            <button
+        <Button
+          variant={filter === "trainer" ? "primary" : "secondary"}
           onClick={() => setFilter("trainer")}
-              className={`px-2 py-1 text-xs font-semibold rounded-lg transition-all ${
+          className="text-xs"
-                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>
-            <button
+        <Button
+          variant={filter === "admin" ? "primary" : "secondary"}
           onClick={() => setFilter("admin")}
-              className={`px-2 py-1 text-xs font-semibold rounded-lg transition-all ${
+          className="text-xs"
-                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>
-            <button
+        <Button
+          variant={filter === "superAdmin" ? "primary" : "secondary"}
           onClick={() => setFilter("superAdmin")}
-              className={`px-2 py-1 text-xs font-semibold rounded-lg transition-all ${
+          className="text-xs"
-                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>
+        </Button>
-          </div>
       </div>
 
-        {/* Action Buttons Row */}
+      {/* Action Buttons */}
-        <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
+        <Button
+          variant="secondary"
+          onClick={() => selectedUser && handleEditUser(selectedUser)}
+          disabled={!selectedUser}
+          className="text-xs"
+        >
+          Edit User
+        </Button>
+        <Button
+          variant="secondary"
           onClick={() => {
             setEditForm({
               firstName: "",
@@ -294,69 +274,42 @@ export function UserManagement() {
             setSelectedUser(null);
             setIsEditing(true);
           }}
-              className="px-2 py-1 text-xs font-semibold rounded-lg bg-blue-500 text-white hover:bg-blue-600"
+          className="text-xs"
         >
-              + Invite
+          Invite User
-            </button>
+        </Button>
-            <button
+        <Button
-              onClick={() => selectedUser && handleEditUser(selectedUser)}
+          variant="secondary"
-              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)}
           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"
+          className="text-xs"
         >
-              Delete
+          Delete User
-            </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">
+        <Button variant="secondary" onClick={handleRefresh} className="text-xs">
           Refresh
-            </button>
+        </Button>
-            <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">
+        <Button variant="secondary" onClick={handleExport} className="text-xs">
-              Export
+          Export CSV
-            </button>
+        </Button>
-          </div>
-        </div>
       </div>
 
-      {/* Tab Navigation */}
+      {/* Stats */}
-      <div className="flex gap-2 border-b border-slate-200">
+      <div className="text-sm text-gray-600 px-4 py-2 bg-gray-50 rounded-lg">
-        <button
+        Showing {users.length} users
-          onClick={() => setActiveTab("users")}
+        {selectedUser && (
-          className={`px-4 py-3 text-sm font-semibold border-b-2 transition-all ${
+          <span className="ml-4 text-blue-600 font-medium">
-            activeTab === "users"
+            Selected: {selectedUser.firstName} {selectedUser.lastName}
-              ? "border-blue-500 text-blue-600"
+          </span>
-              : "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 */}
+      {/* User Grid */}
-      {activeTab === "users" && (
+      <Card>
-        <Card className="border border-slate-200">
         <CardContent className="p-0">
           <UserGrid
             users={users}
-              onUserSelect={(user) => {
+            onUserSelect={(user) => handleUserSelect(user)}
-                handleUserSelect(user);
-                setActiveTab("details");
-              }}
             onEditUser={handleEditUser}
             onDeleteUser={handleDeleteUser}
             onBulkDelete={handleBulkDelete}
@@ -364,70 +317,6 @@ export function UserManagement() {
           />
         </CardContent>
       </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 && (
         <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
@@ -563,65 +452,99 @@ export function UserManagement() {
       )}
 
       {selectedUser && (
-        <div className="mt-8 pt-8 border-t border-slate-200">
+        <Card>
-          <div className="mb-6">
+          <CardHeader className="flex flex-row items-center justify-between">
-            <h3 className="text-lg font-black text-slate-900">
+            <h3 className="text-lg font-semibold">User Details</h3>
+            <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}
-            </h3>
+                  </p>
-            <p className="text-sm text-slate-600 mt-1">{selectedUser.email}</p>
+                  <p>
-          </div>
+                    <span className="font-medium">Email:</span>{" "}
-          
+                    {selectedUser.email}
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                  </p>
-            <div className="space-y-3">
+                  <p>
-              <p className="text-xs font-black uppercase tracking-wider text-slate-600">Role</p>
+                    <span className="font-medium">Phone:</span>{" "}
-              <p className="text-base font-semibold text-slate-900">{selectedUser.role}</p>
+                    {selectedUser.phone || "N/A"}
-              <p className="text-xs font-black uppercase tracking-wider text-slate-600 mt-4">Joined</p>
+                  </p>
-              <p className="text-base font-semibold text-slate-900">{new Date(selectedUser.createdAt).toLocaleDateString()}</p>
+                  <p>
-            </div>
+                    <span className="font-medium">Role:</span>{" "}
-
+                    {selectedUser.role}
-            {selectedUser.client && (
+                  </p>
-              <div className="space-y-3">
+                  <p>
-                <p className="text-xs font-black uppercase tracking-wider text-slate-600">Membership</p>
+                    <span className="font-medium">Joined:</span>{" "}
-                <p className="text-base font-semibold text-slate-900">{selectedUser.client.membershipType}</p>
+                    {new Date(selectedUser.createdAt).toLocaleDateString()}
-                <p className="text-xs font-black uppercase tracking-wider text-slate-600 mt-4">Status</p>
-                <p className="text-base font-semibold text-slate-900">{selectedUser.client.membershipStatus}</p>
-              </div>
-            )}
-
-            <div className="space-y-3">
-              <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>
-              <p className="text-xs font-black uppercase tracking-wider text-slate-600 mt-4">Last Check-in</p>
-              <p className="text-sm text-slate-900">
-                {selectedUser.lastCheckInTime
-                  ? new Date(selectedUser.lastCheckInTime).toLocaleDateString()
-                  : "Never"}
                   </p>
                 </div>
               </div>
 
-          <div className="flex gap-3 mt-6">
+              {selectedUser.client && (
-            <button
+                <div>
-              onClick={() => selectedUser && handleEditUser(selectedUser)}
+                  <h4 className="font-medium mb-2">Client Information</h4>
-              className="px-5 py-2 bg-blue-50 text-blue-600 rounded-lg font-semibold text-sm hover:bg-blue-100 transition-all"
+                  <div className="space-y-1 text-sm">
-            >
+                    <p>
-              Edit
+                      <span className="font-medium">Membership:</span>{" "}
-            </button>
+                      {selectedUser.client.membershipType}
-            <button
+                    </p>
-              onClick={() => selectedUser && handleDeleteUser(selectedUser)}
+                    <p>
-              className="px-5 py-2 bg-red-50 text-red-600 rounded-lg font-semibold text-sm hover:bg-red-100 transition-all"
+                      <span className="font-medium">Status:</span>{" "}
-            >
+                      {selectedUser.client.membershipStatus}
-              Delete
+                    </p>
-            </button>
+                    <p>
-            <a
+                      <span className="font-medium">Member Since:</span>{" "}
-              href={`/users/${selectedUser.id}`}
+                      {new Date(
-              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"
+                        selectedUser.client.joinDate,
-            >
+                      ).toLocaleDateString()}
-              Full Profile
+                    </p>
-            </a>
+                    <p>
+                      <span className="font-medium">Last Visit:</span>{" "}
+                      {selectedUser.client.lastVisit
+                        ? new Date(
+                          selectedUser.client.lastVisit,
+                        ).toLocaleDateString()
+                        : "Never"}
+                    </p>
                   </div>
                 </div>
               )}
+
+              <div>
+                <h4 className="font-medium mb-2">Check-In Statistics</h4>
+                <div className="space-y-1 text-sm">
+                  <p>
+                    <span className="font-medium">Last Check-In:</span>{" "}
+                    {selectedUser.lastCheckInTime
+                      ? new Date(
+                        selectedUser.lastCheckInTime,
+                      ).toLocaleString()
+                      : "Never"}
+                  </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>
+          </CardContent>
+        </Card>
+      )}
     </div>
   );
 }

apps/admin/tsconfig.json

@@ -22,6 +22,7 @@
         "name": "next"
       }
     ],
+    "ignoreDeprecations": "6.0",
     "baseUrl": ".",
     "paths": {
       "@/*": [

apps/mobile/package-lock.json

@@ -28,6 +28,7 @@
         "expo-haptics": "^15.0.7",
         "expo-linear-gradient": "~15.0.7",
         "expo-linking": "~8.0.0",
+        "expo-location": "~17.0.1",
         "expo-notifications": "~0.32.0",
         "expo-router": "~6.0.14",
         "expo-secure-store": "~15.0.7",
@@ -7329,6 +7330,15 @@
         "react-native": "*"
       }
     },
+    "node_modules/expo-location": {
+      "version": "17.0.1",
+      "resolved": "https://registry.npmjs.org/expo-location/-/expo-location-17.0.1.tgz",
+      "integrity": "sha512-m+OzotzlAXO3ZZ1uqW5GC25nXW868zN+ROyBA1V4VF6jGay1ZEs4URPglCVUDzZby2F5wt24cMzqDKw2IX6nRw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "expo": "*"
+      }
+    },
     "node_modules/expo-modules-autolinking": {
       "version": "3.0.22",
       "resolved": "https://registry.npmjs.org/expo-modules-autolinking/-/expo-modules-autolinking-3.0.22.tgz",

apps/mobile/package.json

@@ -34,6 +34,7 @@
     "expo-haptics": "^15.0.7",
     "expo-linear-gradient": "~15.0.7",
     "expo-linking": "~8.0.0",
+    "expo-location": "~17.0.1",
     "expo-notifications": "~0.32.0",
     "expo-router": "~6.0.14",
     "expo-secure-store": "~15.0.7",

apps/mobile/public/nextform-logo.svg

@@ -0,0 +1,28 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600">
+  <defs>
+    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#2FB7E8;stop-opacity:1" />
+      <stop offset="50%" style="stop-color:#0B9FD0;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#0B7FB3;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+  
+  <!-- Main arrow shape -->
+  <path d="M 420 150 L 540 150 L 420 300 Z" fill="url(#grad1)" opacity="0.95"/>
+  <path d="M 180 150 L 300 300 L 180 300 Z" fill="url(#grad1)" opacity="0.85"/>
+  
+  <!-- Dumbbell - Left -->
+  <g transform="translate(200, 250)">
+    <!-- Left disk -->
+    <circle cx="0" cy="0" r="35" fill="white" opacity="0.95"/>
+    <!-- Bar left -->
+    <rect x="35" y="-15" width="80" height="30" fill="white" rx="4"/>
+    <!-- Right disk -->
+    <circle cx="115" cy="0" r="35" fill="white" opacity="0.95"/>
+    <!-- Grip lines -->
+    <line x1="45" y1="-35" x2="45" y2="35" stroke="url(#grad1)" stroke-width="3" opacity="0.5"/>
+    <line x1="65" y1="-35" x2="65" y2="35" stroke="url(#grad1)" stroke-width="3" opacity="0.5"/>
+    <line x1="85" y1="-35" x2="85" y2="35" stroke="url(#grad1)" stroke-width="3" opacity="0.5"/>
+    <line x1="105" y1="-35" x2="105" y2="35" stroke="url(#grad1)" stroke-width="3" opacity="0.5"/>
+  </g>
+</svg>

apps/mobile/src/app/(tabs)/attendance.tsx

@@ -6,6 +6,7 @@ import { Ionicons } from '@expo/vector-icons'
 import { attendanceApi, Attendance } from '../../api/attendance'
 import { theme } from '../../styles/theme'
 import { Animated } from 'react-native'
+import { GeofenceStatus } from '../../components/GeofenceStatus'
 
 export default function AttendanceScreen() {
   const { getToken, userId } = useAuth()
@@ -111,6 +112,9 @@ export default function AttendanceScreen() {
         <Text style={styles.subtitle}>Track your gym visits</Text>
       </LinearGradient>
 
+      {/* Geofencing Status Card */}
+      <GeofenceStatus />
+
       <View style={styles.actionContainer}>
         {activeCheckIn ? (
           <LinearGradient

apps/mobile/src/app/(tabs)/index.tsx

@@ -10,6 +10,7 @@ import { TrackMealModal } from "../../components/TrackMealModal";
 import { AddWaterModal } from "../../components/AddWaterModal";
 import { HydrationWidget } from "../../components/HydrationWidget";
 import { ScanFoodModal } from "../../components/ScanFoodModal";
+import { PerformanceMetrics } from "../../components/PerformanceMetrics";
 import { Ionicons } from "@expo/vector-icons";
 
 export default function HomeScreen() {
@@ -109,10 +110,16 @@ export default function HomeScreen() {
       >
         {/* Header Section */}
         <View style={styles.header}>
+          <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
+            <Image
+              source={require("../../../public/nextform-logo.png")}
+              style={{ width: 40, height: 40, resizeMode: 'contain' }}
+            />
             <View>
               <Text style={styles.greeting}>{getGreeting()},</Text>
               <Text style={styles.name}>{user?.firstName || "Athlete"}</Text>
             </View>
+          </View>
           <View style={styles.avatarContainer}>
             {user?.imageUrl ? (
               <Image source={{ uri: user.imageUrl }} style={styles.avatar} />
@@ -131,6 +138,9 @@ export default function HomeScreen() {
           duration={45}
         />
 
+        {/* Performance Metrics */}
+        <PerformanceMetrics />
+
         {/* Hydration Widget */}
         <HydrationWidget
           current={waterIntake}

apps/mobile/src/components/ActivityWidget.tsx

@@ -16,7 +16,7 @@ export function ActivityWidget({ steps, calories, duration }: ActivityWidgetProp
     return (
         <View style={styles.container}>
             <LinearGradient
-                colors={theme.gradients.dark}
+                colors={['#0c4a6e', '#0369a1', '#0ea5e9']}
                 start={{ x: 0, y: 0 }}
                 end={{ x: 1, y: 1 }}
                 style={[styles.card, theme.shadows.medium]}

apps/mobile/src/components/GeofenceStatus.tsx

@@ -0,0 +1,119 @@
+import { View, Text, StyleSheet, TouchableOpacity } from 'react-native'
+import { LinearGradient } from 'expo-linear-gradient'
+import { Ionicons } from '@expo/vector-icons'
+import { useState } from 'react'
+
+export const GeofenceStatus = () => {
+  const [isInside, setIsInside] = useState(false)
+  const [distance, setDistance] = useState('250 m')
+  const [loading, setLoading] = useState(false)
+
+  const handleRefresh = () => {
+    setLoading(true)
+    // Simulate location check
+    setTimeout(() => {
+      setDistance(Math.random() > 0.5 ? '150 m' : '300 m')
+      setIsInside(Math.random() > 0.5)
+      setLoading(false)
+    }, 1000)
+  }
+
+  return (
+    <View style={styles.container}>
+      <LinearGradient
+        colors={
+          isInside
+            ? ['#10b981', '#6ee7b7', '#a7f3d0']
+            : ['#64748b', '#94a3b8', '#cbd5e1']
+        }
+        start={{ x: 0, y: 0 }}
+        end={{ x: 1, y: 1 }}
+        style={styles.card}
+      >
+        <View style={styles.header}>
+          <View style={styles.titleRow}>
+            <Ionicons
+              name={isInside ? 'location-sharp' : 'location'}
+              size={24}
+              color="#fff"
+            />
+            <Text style={styles.title}>
+              {isInside ? 'At Gym' : 'Away from Gym'}
+            </Text>
+          </View>
+          <TouchableOpacity 
+            onPress={handleRefresh}
+            disabled={loading}
+            style={styles.refreshButton}
+          >
+            <Ionicons 
+              name="refresh" 
+              size={20} 
+              color="#fff"
+              style={loading ? { opacity: 0.5 } : {}}
+            />
+          </TouchableOpacity>
+        </View>
+
+        <View style={styles.content}>
+          <View style={styles.stat}>
+            <Text style={styles.statLabel}>Distance</Text>
+            <Text style={styles.statValue}>{distance}</Text>
+          </View>
+        </View>
+      </LinearGradient>
+    </View>
+  )
+}
+
+
+const styles = StyleSheet.create({
+  container: {
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+  },
+  card: {
+    borderRadius: 16,
+    padding: 16,
+    overflow: 'hidden',
+  },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 12,
+  },
+  titleRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 12,
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: '600',
+    color: '#fff',
+  },
+  refreshButton: {
+    padding: 8,
+    borderRadius: 8,
+    backgroundColor: 'rgba(255, 255, 255, 0.2)',
+  },
+  content: {
+    marginTop: 12,
+  },
+  stat: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  statLabel: {
+    fontSize: 14,
+    color: 'rgba(255, 255, 255, 0.8)',
+    fontWeight: '500',
+  },
+  statValue: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#fff',
+  },
+})

apps/mobile/src/components/HydrationWidget.tsx

@@ -15,7 +15,7 @@ export function HydrationWidget({ current, goal }: HydrationWidgetProps) {
     return (
         <View style={styles.container}>
             <LinearGradient
-                colors={['#e0f2fe', '#dbeafe']} // Light blue background
+                colors={['#0369a1', '#0ea5e9', '#06b6d4']}
                 style={[styles.card, theme.shadows.subtle]}
             >
                 <View style={styles.content}>

apps/mobile/src/components/PerformanceMetrics.tsx

@@ -0,0 +1,224 @@
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import { LinearGradient } from 'expo-linear-gradient';
+import { Ionicons } from '@expo/vector-icons';
+import { theme } from '../styles/theme';
+
+interface MetricProps {
+  title: string;
+  value: string | number;
+  change: string;
+  trend: 'up' | 'down';
+  icon: string;
+  colorScheme: 'blue' | 'green' | 'purple' | 'orange';
+}
+
+const getColorScheme = (colorScheme: 'blue' | 'green' | 'purple' | 'orange') => {
+  const schemes = {
+    blue: {
+      colors: ['#1e40af', '#0369a1', '#06b6d4'] as const,
+      text: '#ffffff',
+      label: '#e0f2fe',
+      badge: '#0ea5e9',
+      badgeText: '#ffffff',
+      icon: '#06b6d4',
+    },
+    green: {
+      colors: ['#be185d', '#ec4899', '#f472b6'] as const,
+      text: '#ffffff',
+      label: '#fbcfe8',
+      badge: '#ec4899',
+      badgeText: '#ffffff',
+      icon: '#f472b6',
+    },
+    purple: {
+      colors: ['#b45309', '#d97706', '#fbbf24'] as const,
+      text: '#ffffff',
+      label: '#fef3c7',
+      badge: '#f59e0b',
+      badgeText: '#ffffff',
+      icon: '#fbbf24',
+    },
+    orange: {
+      colors: ['#047857', '#059669', '#10b981'] as const,
+      text: '#ffffff',
+      label: '#d1fae5',
+      badge: '#10b981',
+      badgeText: '#ffffff',
+      icon: '#34d399',
+    },
+  };
+  return schemes[colorScheme];
+};
+
+const MetricCard: React.FC<MetricProps> = ({ title, value, change, trend, icon, colorScheme }) => {
+  const colors = getColorScheme(colorScheme);
+  const isPositive = trend === 'up';
+  const trendIcon = isPositive ? 'arrow-up' : 'arrow-down';
+
+  return (
+    <LinearGradient
+      colors={colors.colors as any}
+      start={{ x: 0, y: 0 }}
+      end={{ x: 1, y: 1 }}
+      style={styles.card}
+    >
+      <View style={styles.cardContent}>
+        <View style={styles.header}>
+          <Text style={[styles.label, { color: colors.label }]}>{title}</Text>
+          <View style={[styles.iconContainer, { backgroundColor: colors.icon + '40' }]}>
+            <Ionicons name={icon as any} size={20} color={colors.text} />
+          </View>
+        </View>
+
+        <Text style={[styles.value, { color: colors.text }]}>{value}</Text>
+
+        <View style={styles.changeContainer}>
+          <View style={[styles.trendBadge, { backgroundColor: colors.badge }]}>
+            <Ionicons
+              name={trendIcon}
+              size={12}
+              color={colors.badgeText}
+              style={{ marginRight: 4 }}
+            />
+            <Text style={[styles.changeText, { color: colors.badgeText, fontWeight: '700' }]}>
+              {trend === 'up' ? '↑' : '↓'} {change}
+            </Text>
+          </View>
+          <Text style={[styles.compareText, { color: colors.text }]}>vs month</Text>
+        </View>
+      </View>
+    </LinearGradient>
+  );
+};
+
+export const PerformanceMetrics: React.FC = () => {
+  const metrics: MetricProps[] = [
+    {
+      title: 'Total Users',
+      value: '0',
+      change: '+12%',
+      trend: 'up',
+      icon: 'people',
+      colorScheme: 'blue',
+    },
+    {
+      title: 'Active Clients',
+      value: '0',
+      change: '+5%',
+      trend: 'up',
+      icon: 'person-add',
+      colorScheme: 'green',
+    },
+    {
+      title: 'Revenue',
+      value: '$0.00',
+      change: '0%',
+      trend: 'down',
+      icon: 'wallet',
+      colorScheme: 'purple',
+    },
+    {
+      title: 'Growth',
+      value: '24%',
+      change: '-2%',
+      trend: 'down',
+      icon: 'trending-up',
+      colorScheme: 'orange',
+    },
+  ];
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.header}>
+        <Text style={styles.title}>Performance metrics & athlete insights</Text>
+      </View>
+
+      <View style={styles.metricsGrid}>
+        {metrics.map((metric, index) => (
+          <View key={index} style={styles.metricWrapper}>
+            <MetricCard {...metric} />
+          </View>
+        ))}
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    paddingHorizontal: 20,
+    marginBottom: 24,
+  },
+  header: {
+    marginBottom: 16,
+  },
+  title: {
+    fontSize: 14,
+    fontWeight: '600',
+    color: '#4b5563',
+    letterSpacing: 0.3,
+  },
+  metricsGrid: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    justifyContent: 'space-between',
+    gap: 12,
+  },
+  metricWrapper: {
+    width: '48%',
+  },
+  card: {
+    borderRadius: 20,
+    overflow: 'hidden',
+    elevation: 8,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.2,
+    shadowRadius: 12,
+  },
+  cardContent: {
+    padding: 16,
+    minHeight: 160,
+    justifyContent: 'space-between',
+  },
+  iconContainer: {
+    width: 36,
+    height: 36,
+    borderRadius: 10,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  label: {
+    fontSize: 11,
+    fontWeight: '700',
+    letterSpacing: 0.6,
+    marginBottom: 12,
+    textTransform: 'uppercase',
+  },
+  value: {
+    fontSize: 28,
+    fontWeight: '800',
+    marginBottom: 12,
+  },
+  changeContainer: {
+    alignItems: 'flex-start',
+  },
+  trendBadge: {
+    flexDirection: 'row',
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    borderRadius: 6,
+    alignItems: 'center',
+    marginBottom: 6,
+  },
+  changeText: {
+    fontSize: 11,
+    fontWeight: '700',
+  },
+  compareText: {
+    fontSize: 10,
+    fontWeight: '500',
+  },
+});
+

apps/mobile/src/components/QRCode.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import QRCode from 'react-native-qrcode-svg';
+
+interface QRCodeProps {
+  value: string;
+  size?: number;
+  logo?: string;
+}
+
+export const QRCodeGenerator: React.FC<QRCodeProps> = ({ 
+  value, 
+  size = 250 
+}) => {
+  return (
+    <View style={styles.container}>
+      <View style={styles.qrWrapper}>
+        <QRCode
+          value={value}
+          size={size}
+          color="black"
+          backgroundColor="white"
+          quietZone={10}
+        />
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 16,
+  },
+  qrWrapper: {
+    padding: 16,
+    backgroundColor: 'white',
+    borderRadius: 12,
+    elevation: 5,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+  },
+});

apps/mobile/src/components/QRScanner.tsx

@@ -0,0 +1,92 @@
+import React, { useState, useEffect } from 'react';
+import { View, Text, StyleSheet, Button, Alert } from 'react-native';
+import { BarCodeScanner } from 'expo-barcode-scanner';
+
+interface QRScannerProps {
+  onScan: (data: string) => void;
+  onClose?: () => void;
+}
+
+export const QRScanner: React.FC<QRScannerProps> = ({ onScan, onClose }) => {
+  const [hasPermission, setHasPermission] = useState<boolean | null>(null);
+  const [scanned, setScanned] = useState(false);
+
+  useEffect(() => {
+    const getBarCodeScannerPermissions = async () => {
+      const { status } = await BarCodeScanner.requestPermissionsAsync();
+      setHasPermission(status === 'granted');
+    };
+
+    getBarCodeScannerPermissions();
+  }, []);
+
+  const handleBarCodeScanned = ({ type, data }: { type: string; data: string }) => {
+    setScanned(true);
+    onScan(data);
+    Alert.alert('QR Code', `Scanned: ${data}`, [
+      { text: 'OK', onPress: () => setScanned(false) },
+    ]);
+  };
+
+  if (hasPermission === null) {
+    return (
+      <View style={styles.container}>
+        <Text>Requesting for camera permission...</Text>
+      </View>
+    );
+  }
+
+  if (hasPermission === false) {
+    return (
+      <View style={styles.container}>
+        <Text>No access to camera</Text>
+        {onClose && <Button title="Close" onPress={onClose} />}
+      </View>
+    );
+  }
+
+  return (
+    <View style={styles.container}>
+      <BarCodeScanner
+        onBarCodeScanned={scanned ? undefined : handleBarCodeScanned}
+        style={StyleSheet.absoluteFillObject}
+      />
+      <View style={styles.overlay}>
+        <View style={styles.scanBox} />
+      </View>
+      {onClose && (
+        <View style={styles.buttonContainer}>
+          <Button title="Close Scanner" onPress={onClose} color="#FF6B6B" />
+        </View>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#000',
+  },
+  overlay: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  scanBox: {
+    width: 250,
+    height: 250,
+    borderWidth: 2,
+    borderColor: '#4CAF50',
+    borderRadius: 10,
+    backgroundColor: 'transparent',
+  },
+  buttonContainer: {
+    position: 'absolute',
+    bottom: 20,
+    left: 20,
+    right: 20,
+  },
+});

apps/mobile/src/components/ScanFoodModal.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { View, Text, StyleSheet, Modal, TouchableOpacity, TextInput, Alert } from 'react-native';
+import { View, Text, StyleSheet, Modal, TouchableOpacity, TextInput, Alert, Platform } from 'react-native';
 import { CameraView, useCameraPermissions } from 'expo-camera';
 import { Ionicons } from '@expo/vector-icons';
 import { LinearGradient } from 'expo-linear-gradient';
@@ -20,7 +20,7 @@ const FOOD_DATABASE: { [key: string]: { name: string; calories: number; servingS
 };
 
 export function ScanFoodModal({ visible, onClose, onAddFood }: ScanFoodModalProps) {
-    const [permission, requestPermission] = useCameraPermissions();
+    const [permission, requestPermission] = Platform.OS === 'web' ? [null, null] : useCameraPermissions() as any;
     const [scanned, setScanned] = useState(false);
     const [foodData, setFoodData] = useState<{ name: string; calories: number; servingSize: string } | null>(null);
     const [servings, setServings] = useState('1');
@@ -68,10 +68,29 @@ export function ScanFoodModal({ visible, onClose, onAddFood }: ScanFoodModalProp
     };
 
     if (!permission) {
+        if (Platform.OS === 'web') {
+            // On web, show normal modal without permissions
+            return (
+                <Modal visible={visible} animationType="slide">
+                    <View style={styles.container}>
+                        <View style={styles.header}>
+                            <TouchableOpacity onPress={onClose} style={styles.closeButton}>
+                                <Ionicons name="close" size={28} color="#fff" />
+                            </TouchableOpacity>
+                            <Text style={styles.title}>Scan Food Barcode</Text>
+                            <View style={{ width: 28 }} />
+                        </View>
+                        <View style={styles.webPlaceholder}>
+                            <Text style={styles.webText}>Barcode scanning is only available on mobile devices</Text>
+                        </View>
+                    </View>
+                </Modal>
+            );
+        }
         return null;
     }
 
-    if (!permission.granted) {
+    if (!permission.granted && Platform.OS !== 'web') {
         return (
             <Modal visible={visible} transparent animationType="slide">
                 <View style={styles.permissionContainer}>
@@ -111,6 +130,11 @@ export function ScanFoodModal({ visible, onClose, onAddFood }: ScanFoodModalProp
                             <View style={{ width: 28 }} />
                         </View>
 
+                        {Platform.OS === 'web' ? (
+                            <View style={styles.webPlaceholder}>
+                                <Text style={styles.webText}>Barcode scanning is only available on mobile devices</Text>
+                            </View>
+                        ) : (
                             <CameraView
                                 style={styles.camera}
                                 facing="back"
@@ -124,6 +148,7 @@ export function ScanFoodModal({ visible, onClose, onAddFood }: ScanFoodModalProp
                                     <Text style={styles.scanText}>Position barcode within frame</Text>
                                 </View>
                             </CameraView>
+                        )}
                     </>
                 ) : (
                     <View style={styles.resultContainer}>
@@ -230,6 +255,18 @@ const styles = StyleSheet.create({
     camera: {
         flex: 1,
     },
+    webPlaceholder: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: '#1a1a1a',
+    },
+    webText: {
+        color: '#999',
+        fontSize: 16,
+        textAlign: 'center',
+        paddingHorizontal: 40,
+    },
     scanOverlay: {
         flex: 1,
         justifyContent: 'center',

apps/mobile/src/hooks/useWarmUpBrowser.ts

@@ -1,13 +1,17 @@
 import React from "react";
 import * as WebBrowser from "expo-web-browser";
+import { Platform } from "react-native";
 
 export const useWarmUpBrowser = () => {
     React.useEffect(() => {
         // Warm up the android browser to improve UX
         // https://docs.expo.dev/guides/authentication/#improving-user-experience
+        // Only available on native platforms (iOS/Android), not on web
+        if (Platform.OS !== "web") {
             void WebBrowser.warmUpAsync();
             return () => {
                 void WebBrowser.coolDownAsync();
             };
+        }
     }, []);
 };

apps/mobile/src/services/geofencing.ts

@@ -0,0 +1,74 @@
+/**
+ * Geofencing Service
+ * Handles gym location validation and distance calculations
+ */
+
+// Gym location coordinates - Teretana Isaija Mazhovski, Skopje, North Macedonia
+export const GYM_LOCATION = {
+  latitude: 41.9973,
+  longitude: 21.4280,
+};
+
+// Geofence radius in meters (500m default)
+export const GEOFENCE_RADIUS_METERS = 500;
+
+/**
+ * Calculate distance between two coordinates using Haversine formula
+ * @param lat1 Starting latitude
+ * @param lon1 Starting longitude
+ * @param lat2 Ending latitude
+ * @param lon2 Ending longitude
+ * @returns Distance in meters
+ */
+export function calculateDistance(
+  lat1: number,
+  lon1: number,
+  lat2: number,
+  lon2: number
+): number {
+  const R = 6371000; // Earth's radius in meters
+  const φ1 = (lat1 * Math.PI) / 180;
+  const φ2 = (lat2 * Math.PI) / 180;
+  const Δφ = ((lat2 - lat1) * Math.PI) / 180;
+  const Δλ = ((lon2 - lon1) * Math.PI) / 180;
+
+  const a = Math.sin(Δφ / 2) * Math.sin(Δφ / 2) +
+    Math.cos(φ1) * Math.cos(φ2) * Math.sin(Δλ / 2) * Math.sin(Δλ / 2);
+
+  const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
+
+  return R * c; // Distance in meters
+}
+
+/**
+ * Check if a location is within the geofence
+ * @param userLat User's latitude
+ * @param userLon User's longitude
+ * @param radius Geofence radius in meters (defaults to GEOFENCE_RADIUS_METERS)
+ * @returns Boolean indicating if user is within geofence
+ */
+export function isWithinGeofence(
+  userLat: number,
+  userLon: number,
+  radius: number = GEOFENCE_RADIUS_METERS
+): boolean {
+  const distance = calculateDistance(
+    userLat,
+    userLon,
+    GYM_LOCATION.latitude,
+    GYM_LOCATION.longitude
+  );
+  return distance <= radius;
+}
+
+/**
+ * Get formatted distance string
+ * @param meters Distance in meters
+ * @returns Formatted distance string
+ */
+export function getFormattedDistance(meters: number): string {
+  if (meters < 1000) {
+    return `${Math.round(meters)} m`;
+  }
+  return `${(meters / 1000).toFixed(2)} km`;
+}

apps/mobile/src/styles/theme.ts

@@ -64,6 +64,11 @@ export const theme = {
         forest: ['#10b981', '#059669'] as const,
         lavender: ['#a78bfa', '#ec4899'] as const,
         dark: ['#1e293b', '#0f172a'] as const,
+        // Premium metallic gradients
+        blueMetallic: ['#1e40af', '#06b6d4', '#10b981'] as const,
+        amberMetallic: ['#b45309', '#f59e0b', '#fbbf24'] as const,
+        magentaMetallic: ['#be185d', '#ec4899', '#f472b6'] as const,
+        emeraldMetallic: ['#047857', '#10b981', '#6ee7b7'] as const,
     },
 
     // Shadow System

apps/mobile/tsconfig.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "ignoreDeprecations": "6.0",
     "allowJs": true,
     "allowSyntheticDefaultImports": true,
     "esModuleInterop": true,

ter

@@ -1,16 +0,0 @@
-
-                   SSUUMMMMAARRYY OOFF LLEESSSS CCOOMMMMAANNDDSS
-
-      Commands marked with * may be preceded by a number, _N.
-      Notes in parentheses indicate the behavior if _N is given.
-      A key preceded by a caret indicates the Ctrl key; thus ^K is ctrl-K.
-
-  h  H                 Display this help.
-  q  :q  Q  :Q  ZZ     Exit.
- ---------------------------------------------------------------------------
-
-                           MMOOVVIINNGG
-
-  e  ^E  j  ^N  CR  *  Forward  one line   (or _N lines).
-  y  ^Y  k  ^K  ^P  *  Backward one line   (or _N lines).
-  f  ^F  ^V  SPACE  *  Forward  one window (or _N lines).

update-logo.ps1

@@ -0,0 +1,19 @@
+# Script to update NextForm logo from external folder
+$sourceFolder = "c:\Users\PC\Desktop\NextForm – Your Smart Fitness Twin\sliki"
+$adminPublic = "c:\Users\PC\Desktop\fitaiProto\apps\admin\public\nextform-logo.png"
+$mobilePublic = "c:\Users\PC\Desktop\fitaiProto\apps\mobile\public\nextform-logo.png"
+
+# Find the latest PNG in source folder
+$latestPng = Get-ChildItem "$sourceFolder\*.png" -ErrorAction SilentlyContinue | 
+    Sort-Object LastWriteTime -Descending | 
+    Select-Object -First 1
+
+if ($latestPng) {
+    Copy-Item $latestPng.FullName $adminPublic -Force
+    Copy-Item $latestPng.FullName $mobilePublic -Force
+    Write-Host "✅ Logo updated from: $($latestPng.Name)"
+    Write-Host "Admin: $adminPublic"
+    Write-Host "Mobile: $mobilePublic"
+} else {
+    Write-Host "❌ No PNG found in: $sourceFolder"
+}