role based auth

implemented superadmin -> admin -> traniner

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

@@ -0,0 +1,167 @@
+import { NextRequest, NextResponse } from "next/server";
+import { auth } from "@clerk/nextjs/server";
+import { getDatabase } from "@/lib/database";
+import { ensureUserSynced } from "@/lib/sync-user";
+import { successResponse } from "@/lib/api/responses";
+import { db as rawDb, sql } from "@fitai/database";
+import { getUsersByGym, getClientsByGym } from "@/lib/gym-context";
+
+interface UserGrowthPoint {
+  label: string;
+  value: number;
+}
+
+interface MembershipDistributionPoint {
+  label: string;
+  value: number;
+  color: string;
+}
+
+interface RevenuePoint {
+  label: string;
+  value: number;
+  color: string;
+}
+
+interface AnalyticsData {
+  userGrowth: UserGrowthPoint[];
+  membershipDistribution: MembershipDistributionPoint[];
+  revenue: RevenuePoint[];
+}
+
+export async function GET(req: NextRequest) {
+  try {
+    const { userId } = await auth();
+    if (!userId) {
+      return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+    }
+
+    const database = await getDatabase();
+    const user = await ensureUserSynced(userId, database);
+
+    if (!user || (user.role !== "admin" && user.role !== "superAdmin")) {
+      return NextResponse.json({ error: "Forbidden" }, { status: 403 });
+    }
+
+    const url = new URL(req.url);
+    const months = parseInt(url.searchParams.get("months") || "6");
+
+    // Get target gym based on role
+    const targetGymId =
+      user.role === "superAdmin"
+        ? (url.searchParams.get("gymId") ?? undefined)
+        : (user.gymId ?? undefined);
+
+    // Validate gym access for non-superAdmins
+    if (user.role !== "superAdmin" && !targetGymId) {
+      return NextResponse.json(
+        { error: "Forbidden - No gym assigned" },
+        { status: 403 },
+      );
+    }
+
+    // Get gym-scoped data
+    const allUsers = targetGymId
+      ? await getUsersByGym(targetGymId)
+      : await database.getAllUsers();
+
+    const allClients = targetGymId
+      ? await getClientsByGym(targetGymId)
+      : await database.getAllClients();
+
+    // For payments, we'd need a similar filter - for now, skip payments if gym-scoped
+    // TODO: Add getPaymentsByGym when needed
+    const paymentsRaw = targetGymId
+      ? [] // Skip payments for gym-scoped for now
+      : await rawDb.all(
+          sql`SELECT * FROM payments WHERE status = 'completed' AND paid_at IS NOT NULL`,
+        );
+    const payments: any[] = paymentsRaw || [];
+
+    const now = new Date();
+    const userGrowth: UserGrowthPoint[] = [];
+
+    for (let i = months - 1; i >= 0; i--) {
+      const date = new Date(now.getFullYear(), now.getMonth() - i, 1);
+      const monthLabel = date.toLocaleDateString("en-US", { month: "short" });
+
+      const usersCreatedByMonth = allUsers.filter((u: any) => {
+        const createdAt = new Date(u.createdAt);
+        return (
+          createdAt.getFullYear() === date.getFullYear() &&
+          createdAt.getMonth() === date.getMonth()
+        );
+      });
+
+      userGrowth.push({
+        label: monthLabel,
+        value: usersCreatedByMonth.length,
+      });
+    }
+
+    let runningTotal = 0;
+    for (const point of userGrowth) {
+      runningTotal += point.value;
+      point.value = runningTotal;
+    }
+
+    const membershipCounts: Record<string, number> = {
+      basic: 0,
+      premium: 0,
+      vip: 0,
+    };
+
+    for (const client of allClients) {
+      const membershipType = (client as any).membershipType || "basic";
+      if (membershipCounts[membershipType] !== undefined) {
+        membershipCounts[membershipType]++;
+      }
+    }
+
+    const membershipDistribution: MembershipDistributionPoint[] = [
+      { label: "Basic", value: membershipCounts.basic, color: "#6b7280" },
+      { label: "Premium", value: membershipCounts.premium, color: "#3b82f6" },
+      { label: "VIP", value: membershipCounts.vip, color: "#f59e0b" },
+    ];
+
+    const revenue: RevenuePoint[] = [];
+
+    for (let i = months - 1; i >= 0; i--) {
+      const date = new Date(now.getFullYear(), now.getMonth() - i, 1);
+      const monthLabel = date.toLocaleDateString("en-US", { month: "short" });
+      const nextMonthDate = new Date(
+        now.getFullYear(),
+        now.getMonth() - i + 1,
+        1,
+      );
+
+      const monthlyRevenue = payments
+        .filter((p: any) => {
+          const paidAt = p.paid_at ? new Date(p.paid_at) : null;
+          if (!paidAt) return false;
+          return paidAt >= date && paidAt < nextMonthDate;
+        })
+        .reduce((sum: number, p: any) => sum + (p.amount || 0), 0);
+
+      revenue.push({
+        label: monthLabel,
+        value: monthlyRevenue,
+        color: "#10b981",
+      });
+    }
+
+    const analyticsData: AnalyticsData = {
+      userGrowth,
+      membershipDistribution,
+      revenue,
+    };
+
+    return successResponse({ analytics: analyticsData });
+  } catch (error) {
+    console.error("Analytics error:", error);
+    return NextResponse.json(
+      { error: "Internal server error" },
+      { status: 500 },
+    );
+  }
+}

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

@@ -1,27 +1,42 @@
-import { auth } from '@clerk/nextjs/server'
-import { NextResponse } from 'next/server'
-import { getDatabase } from '@/lib/database'
-import { ensureUserSynced } from '@/lib/sync-user'
+import { auth } from "@clerk/nextjs/server";
+import { NextRequest, NextResponse } from "next/server";
+import { getDatabase } from "@/lib/database";
+import { ensureUserSynced } from "@/lib/sync-user";
+import { successResponse } from "@/lib/api/responses";
+import { getAttendanceByGym } from "@/lib/gym-context";
 
-export async function GET(req: Request) {
-    try {
-        const { userId } = await auth()
-        if (!userId) return new NextResponse('Unauthorized', { status: 401 })
+export async function GET(req: NextRequest) {
+  try {
+    const { userId } = await auth();
+    if (!userId) return new NextResponse("Unauthorized", { status: 401 });
 
-        const db = await getDatabase()
+    const db = await getDatabase();
+    const user = await ensureUserSynced(userId, db);
 
-        // Ensure user is synced (handles seed script ID mismatch)
-        // We need to import ensureUserSynced
-        const user = await ensureUserSynced(userId, db)
-
-        if (!user || (user.role !== 'admin' && user.role !== 'superAdmin')) {
-            return new NextResponse('Forbidden', { status: 403 })
-        }
-
-        const attendance = await db.getAllAttendance()
-        return NextResponse.json(attendance)
-    } catch (error) {
-        console.error('Admin attendance error:', error)
-        return new NextResponse('Internal Server Error', { status: 500 })
+    if (!user || (user.role !== "admin" && user.role !== "superAdmin")) {
+      return new NextResponse("Forbidden", { status: 403 });
     }
+
+    // Get target gym based on role
+    const url = new URL(req.url);
+    const targetGymId =
+      user.role === "superAdmin"
+        ? (url.searchParams.get("gymId") ?? undefined)
+        : (user.gymId ?? undefined);
+
+    // Validate gym access for non-superAdmins
+    if (user.role !== "superAdmin" && !targetGymId) {
+      return new NextResponse("Forbidden - No gym assigned", { status: 403 });
+    }
+
+    // Get attendance filtered by gym
+    const attendance = targetGymId
+      ? await getAttendanceByGym(targetGymId)
+      : await db.getAllAttendance();
+
+    return successResponse({ records: attendance });
+  } catch (error) {
+    console.error("Admin attendance error:", error);
+    return new NextResponse("Internal Server Error", { status: 500 });
+  }
 }

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

@@ -2,6 +2,7 @@ import { auth } from "@clerk/nextjs/server";
 import { NextResponse } from "next/server";
 import { getDatabase } from "@/lib/database";
 import { ensureUserSynced } from "@/lib/sync-user";
+import { successResponse } from "@/lib/api/responses";
 
 export async function GET(req: Request) {
   try {
@@ -51,7 +52,7 @@ export async function GET(req: Request) {
       revenueGrowth: 0,
     };
 
-    return NextResponse.json(stats);
+    return successResponse({ stats });
   } catch (error) {
     console.error("Dashboard stats error:", error);
     return new NextResponse("Internal Server Error", { status: 500 });

apps/admin/src/app/api/profile/fitness/route.ts

@@ -1,11 +1,14 @@
 import { NextRequest, NextResponse } from "next/server";
 import { getDatabase } from "../../../../lib/database/index";
+import { auth } from "@clerk/nextjs/server";
 import log from "@/lib/logger";
 import { fitnessProfileSchema } from "@/lib/validation/schemas";
 import {
   validateRequestBody,
   validationErrorResponse,
 } from "@/lib/validation/helpers";
+import { getFitnessProfilesByGym } from "@/lib/gym-context";
+import { ensureUserSynced } from "@/lib/sync-user";
 
 export async function POST(request: NextRequest) {
   try {
@@ -63,12 +66,47 @@ export async function POST(request: NextRequest) {
 
 export async function GET(request: NextRequest) {
   try {
-    const db = await getDatabase();
-    const { searchParams } = new URL(request.url);
-    const userId = searchParams.get("userId");
+    // First authenticate
+    const { userId: clerkUserId } = await auth();
+    if (!clerkUserId) {
+      return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+    }
 
-    if (userId) {
-      const profile = await db.getFitnessProfileByUserId(userId);
+    const db = await getDatabase();
+    const currentUser = await ensureUserSynced(clerkUserId, db);
+
+    if (!currentUser) {
+      return NextResponse.json({ error: "Forbidden" }, { status: 403 });
+    }
+
+    const { searchParams } = new URL(request.url);
+    const targetUserId = searchParams.get("userId");
+
+    // If accessing another user's profile, verify gym access
+    if (targetUserId && targetUserId !== clerkUserId) {
+      const isStaff =
+        currentUser.role === "admin" ||
+        currentUser.role === "superAdmin" ||
+        currentUser.role === "trainer";
+
+      if (!isStaff) {
+        return NextResponse.json({ error: "Forbidden" }, { status: 403 });
+      }
+
+      // Staff need to verify target user is in same gym
+      if (currentUser.role !== "superAdmin") {
+        const targetUser = await db.getUserById(targetUserId);
+        if (!targetUser || targetUser.gymId !== currentUser.gymId) {
+          return NextResponse.json(
+            { error: "Forbidden - Cannot access users from other gyms" },
+            { status: 403 },
+          );
+        }
+      }
+    }
+
+    if (targetUserId) {
+      const profile = await db.getFitnessProfileByUserId(targetUserId);
       if (!profile) {
         return NextResponse.json(
           { error: "Profile not found" },
@@ -78,8 +116,28 @@ export async function GET(request: NextRequest) {
       return NextResponse.json({ profile });
     }
 
-    const profiles = await db.getAllFitnessProfiles();
-    return NextResponse.json({ profiles });
+    // Staff get gym-scoped profiles
+    const isStaff =
+      currentUser.role === "admin" ||
+      currentUser.role === "superAdmin" ||
+      currentUser.role === "trainer";
+
+    if (isStaff) {
+      const targetGymId =
+        currentUser.role === "superAdmin"
+          ? (searchParams.get("gymId") ?? undefined)
+          : (currentUser.gymId ?? undefined);
+
+      const profiles = targetGymId
+        ? await getFitnessProfilesByGym(targetGymId)
+        : await db.getAllFitnessProfiles();
+
+      return NextResponse.json({ profiles });
+    }
+
+    // Regular users only get their own
+    const profile = await db.getFitnessProfileByUserId(clerkUserId);
+    return NextResponse.json({ profile: profile ? [profile] : [] });
   } catch (error) {
     log.error("Failed to get fitness profiles", error);
     return NextResponse.json(

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

@@ -17,6 +17,8 @@ import {
   badRequestResponse,
   internalErrorResponse,
 } from "@/lib/api/responses";
+import { getRecommendationsByGym } from "@/lib/gym-context";
+import { ensureUserSynced } from "@/lib/sync-user";
 
 export async function GET(request: NextRequest) {
   try {
@@ -25,38 +27,59 @@ export async function GET(request: NextRequest) {
       return unauthorizedResponse();
     }
 
+    const db = await getDatabase();
+    const currentUser = await ensureUserSynced(currentUserId, db);
+
+    if (!currentUser) {
+      return forbiddenResponse("User not found");
+    }
+
     const { searchParams } = new URL(request.url);
     const targetUserId = searchParams.get("userId");
 
-    const db = await getDatabase();
-
-    // If no userId provided, check if staff and return all recommendations
+    // If no userId provided, staff gets gym-scoped recommendations
     if (!targetUserId) {
-      const currentUser = await db.getUserById(currentUserId);
       const isStaff =
-        currentUser?.role === "admin" ||
-        currentUser?.role === "superAdmin" ||
-        currentUser?.role === "trainer";
+        currentUser.role === "admin" ||
+        currentUser.role === "superAdmin" ||
+        currentUser.role === "trainer";
 
       if (!isStaff) {
         return badRequestResponse("User ID is required");
       }
 
-      const recommendations = await db.getAllRecommendations();
+      // Get target gym based on role
+      const targetGymId =
+        currentUser.role === "superAdmin"
+          ? (searchParams.get("gymId") ?? undefined)
+          : (currentUser.gymId ?? undefined);
+
+      // Get recommendations filtered by gym
+      const recommendations = targetGymId
+        ? await getRecommendationsByGym(targetGymId)
+        : await db.getAllRecommendations();
+
       return successResponse({ recommendations });
     }
 
-    // Check permissions: Users can view their own, Admins/Trainers can view anyone's
-    const currentUser = await db.getUserById(currentUserId);
+    // Check permissions: Users can view their own, Admins/Trainers can view anyone's in their gym
     const isStaff =
-      currentUser?.role === "admin" ||
-      currentUser?.role === "superAdmin" ||
-      currentUser?.role === "trainer";
+      currentUser.role === "admin" ||
+      currentUser.role === "superAdmin" ||
+      currentUser.role === "trainer";
 
     if (currentUserId !== targetUserId) {
       if (!isStaff) {
         return forbiddenResponse();
       }
+
+      // Staff need to verify target user is in same gym
+      if (currentUser.role !== "superAdmin") {
+        const targetUser = await db.getUserById(targetUserId);
+        if (!targetUser || targetUser.gymId !== currentUser.gymId) {
+          return forbiddenResponse("Cannot access users from other gyms");
+        }
+      }
     }
 
     let recommendations = await db.getRecommendationsByUserId(targetUserId);

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

@@ -24,14 +24,42 @@ import {
   internalErrorResponse,
   badRequestResponse,
 } from "@/lib/api/responses";
+import { getUsersByGym } from "@/lib/gym-context";
+import { ensureUserSynced } from "@/lib/sync-user";
 
 export async function GET(request: NextRequest) {
   try {
+    // First authenticate the user
+    const { userId: clerkUserId } = await auth();
+    if (!clerkUserId) {
+      return unauthorizedResponse();
+    }
+
     const db = await getDatabase();
+    const currentUser = await ensureUserSynced(clerkUserId, db);
+
+    if (!currentUser) {
+      return forbiddenResponse("User not found");
+    }
+
     const { searchParams } = new URL(request.url);
     const role = searchParams.get("role");
 
-    let users = await db.getAllUsers();
+    // Get target gym based on role
+    const targetGymId =
+      currentUser.role === "superAdmin"
+        ? (searchParams.get("gymId") ?? undefined)
+        : (currentUser.gymId ?? undefined);
+
+    // Validate gym access for non-superAdmins
+    if (currentUser.role !== "superAdmin" && !targetGymId) {
+      return forbiddenResponse("No gym assigned");
+    }
+
+    // Get users filtered by gym
+    let users = targetGymId
+      ? await getUsersByGym(targetGymId)
+      : await db.getAllUsers();
 
     // Hydrate gymId from raw DB to ensure consistency with writes
     const rawUserRows = await rawDb.all(sql`SELECT id, gym_id FROM users`);

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

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

@@ -1,76 +1,248 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
- 
+
 @layer base {
   :root {
-    --background: 0 0% 100%;
+    --background: 0 0% 98%;
     --foreground: 222.2 84% 4.9%;
- 
+
     --card: 0 0% 100%;
     --card-foreground: 222.2 84% 4.9%;
- 
+
     --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%;
     --secondary-foreground: 222.2 47.4% 11.2%;
- 
+
     --muted: 210 40% 96.1%;
     --muted-foreground: 215.4 16.3% 46.9%;
- 
+
     --accent: 210 40% 96.1%;
     --accent-foreground: 222.2 47.4% 11.2%;
- 
+
     --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%;
- 
-    --radius: 0.5rem;
+    --ring: 221.2 83.2% 53.3%;
+
+    --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%;
     --secondary-foreground: 210 40% 98%;
- 
+
     --muted: 217.2 32.6% 17.5%;
     --muted-foreground: 215 20.2% 65.1%;
- 
+
     --accent: 217.2 32.6% 17.5%;
     --accent-foreground: 210 40% 98%;
- 
+
     --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%;
   }
 }
- 
+
 @layer base {
   * {
     @apply border-border;
   }
   body {
-    @apply bg-background text-foreground;
+    @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

@@ -10,6 +10,7 @@ import {
 } from "@clerk/nextjs";
 import { Sidebar } from "@/components/ui/Sidebar";
 import { Toaster } from "sonner";
+import { QueryProvider } from "@/components/providers/QueryProvider";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -25,15 +26,19 @@ export default function RootLayout({
 }) {
   return (
     <ClerkProvider>
-      <html lang="en">
-        <body className={inter.className}>
-          <div className="flex min-h-screen bg-slate-50">
-            <Sidebar />
-            <main className="flex-1 ml-20 p-8">{children}</main>
-          </div>
-          <Toaster richColors position="top-right" />
-        </body>
-      </html>
+      <QueryProvider>
+        <html lang="en">
+          <body className={inter.className}>
+            <div className="flex min-h-screen bg-background">
+              <Sidebar />
+              <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>
+        </html>
+      </QueryProvider>
     </ClerkProvider>
   );
 }

apps/admin/src/app/page.tsx

@@ -1,100 +1,150 @@
 "use client";
 
-import { useEffect, useState } from "react";
-import { Users, CreditCard, CalendarCheck, TrendingUp } from "lucide-react";
-import { StatsCard } from "@/components/ui/StatsCard";
+import {
+  Users,
+  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 axios from "axios";
-
-interface DashboardStats {
-  totalUsers: number;
-  activeClients: number;
-  totalRevenue: number;
-  revenueGrowth: number;
-}
+import { useDashboardStats } from "@/hooks/use-api";
+import { useQueryClient } from "@tanstack/react-query";
+import { Button } from "@/components/ui/button";
+import { useUser } from "@clerk/nextjs";
+import { useSearchParams } from "next/navigation";
+import { GymSelector } from "@/components/gym/GymSelector";
 
 export default function Home() {
-  const [stats, setStats] = useState<DashboardStats>({
-    totalUsers: 0,
-    activeClients: 0,
-    totalRevenue: 0,
-    revenueGrowth: 0,
-  });
-  const [loading, setLoading] = useState(true);
+  const { user } = useUser();
+  const searchParams = useSearchParams();
+  const gymId = searchParams.get("gymId") ?? undefined;
 
-  useEffect(() => {
-    const fetchStats = async () => {
-      try {
-        const response = await axios.get("/api/admin/stats");
-        setStats(response.data);
-      } catch (error) {
-        console.error("Failed to fetch dashboard stats:", error);
-      } finally {
-        setLoading(false);
-      }
-    };
+  const {
+    data: stats,
+    isLoading,
+    refetch,
+    isFetching,
+  } = useDashboardStats(gymId);
+  const queryClient = useQueryClient();
 
-    fetchStats();
-  }, []);
+  // Get user role from metadata
+  const userRole = (user?.publicMetadata?.role as string) ?? "client";
+
+  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",
-    }).format(value);
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 0,
+    }).format(value || 0);
   };
 
   return (
     <div className="space-y-8">
-      <div>
-        <h2 className="text-3xl font-bold text-slate-900">Dashboard</h2>
-        <p className="text-slate-500 mt-2">Welcome back, here's what's happening today.</p>
+      <PageHeader
+        title="Dashboard"
+        description="Welcome back! Here's what's happening with your gym today."
+        actions={
+          <div className="flex items-center gap-3">
+            <GymSelector userRole={userRole} />
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={handleRefresh}
+              disabled={isFetching}
+              className="gap-2"
+            >
+              <RefreshCw
+                className={`h-4 w-4 ${isFetching ? "animate-spin" : ""}`}
+              />
+              Refresh
+            </Button>
+          </div>
+        }
+      />
+
+      {/* Stats Grid */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+        {isLoading ? (
+          <>
+            <StatsCardSkeleton />
+            <StatsCardSkeleton />
+            <StatsCardSkeleton />
+            <StatsCardSkeleton />
+          </>
+        ) : (
+          <>
+            <StatsCard
+              title="Total Users"
+              value={stats?.totalUsers ?? 0}
+              change="+12%"
+              trend="up"
+              icon={Users}
+              color="blue"
+            />
+            <StatsCard
+              title="Active Clients"
+              value={stats?.activeClients ?? 0}
+              change="+5%"
+              trend="up"
+              icon={CalendarCheck}
+              color="green"
+            />
+            <StatsCard
+              title="Revenue"
+              value={formatCurrency(stats?.totalRevenue ?? 0)}
+              change={`${(stats?.revenueGrowth ?? 0) > 0 ? "+" : ""}${stats?.revenueGrowth ?? 0}%`}
+              trend={(stats?.revenueGrowth ?? 0) >= 0 ? "up" : "down"}
+              icon={CreditCard}
+              color="purple"
+            />
+            <StatsCard
+              title="Growth"
+              value="24%"
+              change="-2%"
+              trend="down"
+              icon={TrendingUp}
+              color="orange"
+            />
+          </>
+        )}
       </div>
 
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
-        <StatsCard
-          title="Total Users"
-          value={loading ? "..." : stats.totalUsers}
-          change="+12%" // Placeholder for now as we don't track historical growth yet
-          trend="up"
-          icon={Users}
-          color="blue"
-        />
-        <StatsCard
-          title="Active Clients"
-          value={loading ? "..." : stats.activeClients}
-          change="+5%"
-          trend="up"
-          icon={CalendarCheck}
-          color="green"
-        />
-        <StatsCard
-          title="Revenue"
-          value={loading ? "..." : formatCurrency(stats.totalRevenue)}
-          change={`${stats.revenueGrowth > 0 ? "+" : ""}${stats.revenueGrowth}%`}
-          trend={stats.revenueGrowth >= 0 ? "up" : "down"}
-          icon={CreditCard}
-          color="purple"
-        />
-        <StatsCard
-          title="Growth"
-          value="24%" // Placeholder
-          change="-2%"
-          trend="down"
-          icon={TrendingUp}
-          color="orange"
-        />
-      </div>
+      {/* Main Content Grid */}
+      <div className="grid grid-cols-1 xl:grid-cols-3 gap-6">
+        {/* <div className="xl:col-span-2"> */}
+        {/*   <div className="card-modern"> */}
+        {/*     <div className="mb-6"> */}
+        {/*       <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> */}
 
-      <div className="flex flex-col gap-8">
-        <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">Recent Activity</h3>
-          <UserManagement />
-        </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 />
+        {/* 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>
+            <AnalyticsDashboard gymId={gymId} />
+          </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

@@ -1,86 +1,41 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { useUser } from "@clerk/nextjs";
 import log from "@/lib/logger";
 import { toast } from "@/lib/toast";
-
-interface User {
-  id: string;
-  firstName: string;
-  lastName: string;
-  email: string;
-}
-
-interface Recommendation {
-  id: string;
-  userId: string;
-  content: string;
-  recommendationText: string;
-  activityPlan: string;
-  dietPlan: string;
-  status: string;
-  createdAt: Date;
-}
+import {
+  useUsers,
+  useRecommendations,
+  useGenerateRecommendations,
+  useApproveRecommendation,
+  useUpdateRecommendation,
+  type Recommendation,
+} from "@/hooks/use-api";
+import { PageHeader } from "@/components/ui/PageHeader";
 
 export default function RecommendationsPage() {
   const { user } = useUser();
-  const [users, setUsers] = useState<User[]>([]);
-  const [pendingRecommendations, setPendingRecommendations] = useState<
-    Recommendation[]
-  >([]);
-  const [loading, setLoading] = useState(true);
-  const [generating, setGenerating] = useState<string | null>(null);
   const [useExternalModel, setUseExternalModel] = useState(false);
 
-  useEffect(() => {
-    fetchData();
-  }, []);
+  const { data: users = [], isLoading: usersLoading } = useUsers();
+  const { data: allRecommendations = [], isLoading: recsLoading } =
+    useRecommendations();
+  const pendingRecommendations = allRecommendations.filter(
+    (r) => r.status === "pending",
+  );
 
-  const fetchData = async () => {
-    try {
-      // Fetch users - API returns { success: true, data: { users: [...] }, meta: {...} }
-      const usersRes = await fetch("/api/users");
-      const usersResult = await usersRes.json();
-      const usersArray = usersResult.data?.users || usersResult.users || [];
-      setUsers(usersArray);
-
-      // Fetch pending recommendations - API returns { success: true, data: { recommendations: [...] }, meta: {...} }
-      const recsRes = await fetch("/api/recommendations");
-      const recsResult = await recsRes.json();
-      const allRecs =
-        recsResult.data?.recommendations || recsResult.recommendations || [];
-      setPendingRecommendations(
-        allRecs.filter((r: Recommendation) => r.status === "pending"),
-      );
-    } catch (error) {
-      log.error("Failed to fetch data", error);
-    } finally {
-      setLoading(false);
-    }
-  };
+  const generateRec = useGenerateRecommendations();
+  const approveRec = useApproveRecommendation();
+  const updateRec = useUpdateRecommendation();
 
   const handleGenerate = async (userId: string) => {
-    setGenerating(userId);
     try {
-      const res = await fetch("/api/recommendations/generate", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ userId, useExternalModel }),
-      });
-
-      if (!res.ok) {
-        const error = await res.json();
-        toast.error(`Error: ${error.error}`);
-      } else {
-        toast.success("Recommendation generated successfully!");
-        fetchData(); // Refresh data
-      }
+      await generateRec.mutateAsync(userId);
+      toast.success("Recommendation generated successfully!");
     } catch (error) {
       log.error("Failed to generate recommendation", error);
       toast.error("Failed to generate recommendation.");
-    } finally {
-      setGenerating(null);
     }
   };
 
@@ -89,25 +44,11 @@ export default function RecommendationsPage() {
     status: "approved" | "rejected",
   ) => {
     try {
-      const res = await fetch("/api/recommendations/approve", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          recommendationId,
-          status,
-          approvedBy: user?.id || "admin",
-        }),
+      await approveRec.mutateAsync({
+        recommendationId,
+        approved: status === "approved",
       });
-
-      if (!res.ok) {
-        const errorData = await res.json();
-        toast.error(
-          `Failed to update status: ${errorData.error || "Unknown error"}`,
-        );
-      } else {
-        toast.success("Recommendation status updated");
-        fetchData(); // Refresh data
-      }
+      toast.success("Recommendation status updated");
     } catch (error) {
       log.error("Failed to approve recommendation", error);
       toast.error("Error processing request");
@@ -124,168 +65,137 @@ export default function RecommendationsPage() {
       newActivityPlan === null ||
       newDietPlan === null
     ) {
-      // User cancelled one of the prompts
       return;
     }
 
     try {
-      const res = await fetch("/api/recommendations", {
-        method: "PUT",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          id: rec.id,
-          content: newContent,
-          activityPlan: newActivityPlan,
-          dietPlan: newDietPlan,
-        }),
+      await updateRec.mutateAsync({
+        id: rec.id,
+        content: newContent,
+        activityPlan: newActivityPlan,
+        dietPlan: newDietPlan,
       });
-
-      if (!res.ok) {
-        const errorData = await res.json();
-        toast.error(
-          `Failed to update recommendation: ${errorData.error || "Unknown error"}`,
-        );
-      } else {
-        toast.success("Recommendation updated successfully!");
-        fetchData(); // Refresh data
-      }
+      toast.success("Recommendation updated successfully!");
     } catch (error) {
       log.error("Failed to update recommendation", error);
       toast.error("Failed to update recommendation.");
     }
   };
 
-  if (loading) {
+  if (usersLoading || recsLoading) {
     return (
-      <div className="flex items-center justify-center h-screen">
-        <div className="text-xl">Loading...</div>
+      <div className="flex items-center justify-center h-64">
+        <div className="text-lg">Loading...</div>
       </div>
     );
   }
 
   return (
-    <div className="container mx-auto py-10 px-4">
-      <div className="flex justify-between items-center mb-8">
-        <h1 className="text-3xl font-bold">AI Recommendations</h1>
+    <div className="space-y-8">
+      <PageHeader
+        title="AI Recommendations"
+        description="Generate and manage AI-powered fitness recommendations"
+        breadcrumbs={[{ label: "AI Recommendations" }]}
+      />
 
-        {/* Model Selection Toggle */}
-        <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>
-          <h2 className="text-2xl font-semibold mb-4">
-            Generate Recommendations
-          </h2>
-          <div className="bg-white shadow rounded-lg p-6">
-            <p className="mb-4 text-gray-600">
+        <div className="card-modern">
+          <div className="mb-6">
+            <h3 className="text-lg font-semibold">Generate Recommendations</h3>
+            <p className="text-sm text-muted-foreground">
               Select a user to generate a new daily recommendation.
             </p>
-            <ul className="space-y-4">
-              {users.map((user) => (
-                <li
-                  key={user.id}
-                  className="flex items-center justify-between border-b pb-2"
-                >
-                  <div>
-                    <p className="font-medium">
-                      {user.firstName} {user.lastName}
-                    </p>
-                    <p className="text-sm text-gray-500">{user.email}</p>
-                  </div>
-                  <button
-                    onClick={() => handleGenerate(user.id)}
-                    disabled={generating === user.id}
-                    className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 disabled:opacity-50"
-                  >
-                    {generating === user.id ? "Generating..." : "Generate"}
-                  </button>
-                </li>
-              ))}
-              {users.length === 0 && (
-                <p className="text-gray-500 italic">No users found.</p>
-              )}
-            </ul>
           </div>
+          <ul className="space-y-4">
+            {users.map((user) => (
+              <li
+                key={user.id}
+                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-muted-foreground">{user.email}</p>
+                </div>
+                <button
+                  onClick={() => handleGenerate(user.id)}
+                  disabled={generateRec.isPending}
+                  className="btn-primary"
+                >
+                  {generateRec.isPending ? "Generating..." : "Generate"}
+                </button>
+              </li>
+            ))}
+            {users.length === 0 && (
+              <p className="text-muted-foreground italic">No users found.</p>
+            )}
+          </ul>
         </div>
 
         {/* Pending Approvals Section */}
-        <div>
-          <h2 className="text-2xl font-semibold mb-4">Pending Approvals</h2>
-          <div className="bg-white shadow rounded-lg p-6">
-            {pendingRecommendations.length === 0 ? (
-              <p className="text-gray-500 italic">
-                No pending recommendations.
-              </p>
-            ) : (
-              <ul className="space-y-6">
-                {pendingRecommendations.map((rec) => (
-                  <li key={rec.id} className="border rounded p-4">
-                    <div className="flex justify-between items-start mb-2">
-                      <h3 className="font-bold">For: User {rec.userId}</h3>
-                      <span className="text-xs text-gray-500">
-                        {new Date(rec.createdAt).toLocaleDateString()}
-                      </span>
-                    </div>
-                    <div className="space-y-2 text-sm mb-4">
-                      <div>
-                        <span className="font-semibold">Advice:</span>{" "}
-                        {rec.recommendationText}
-                      </div>
-                      <div>
-                        <span className="font-semibold">Activity:</span>{" "}
-                        {rec.activityPlan}
-                      </div>
-                      <div>
-                        <span className="font-semibold">Diet:</span>{" "}
-                        {rec.dietPlan}
-                      </div>
-                    </div>
-                    <div className="flex space-x-2">
-                      <button
-                        onClick={() => handleEdit(rec)}
-                        className="flex-1 bg-blue-500 text-white py-2 rounded hover:bg-blue-600"
-                      >
-                        Edit
-                      </button>
-                      <button
-                        onClick={() => handleApprove(rec.id, "approved")}
-                        className="flex-1 bg-green-600 text-white py-2 rounded hover:bg-green-700"
-                      >
-                        Approve
-                      </button>
-                      <button
-                        onClick={() => handleApprove(rec.id, "rejected")}
-                        className="flex-1 bg-red-600 text-white py-2 rounded hover:bg-red-700"
-                      >
-                        Reject
-                      </button>
-                    </div>
-                  </li>
-                ))}
-              </ul>
-            )}
+        <div className="card-modern">
+          <div className="mb-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-muted-foreground italic">
+              No pending recommendations.
+            </p>
+          ) : (
+            <ul className="space-y-4">
+              {pendingRecommendations.map((rec) => (
+                <li
+                  key={rec.id}
+                  className="border border-border rounded-lg p-4"
+                >
+                  <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-medium">Advice:</span>{" "}
+                      {rec.recommendationText}
+                    </div>
+                    <div>
+                      <span className="font-medium">Activity:</span>{" "}
+                      {rec.activityPlan}
+                    </div>
+                    <div>
+                      <span className="font-medium">Diet:</span> {rec.dietPlan}
+                    </div>
+                  </div>
+                  <div className="flex gap-2">
+                    <button
+                      onClick={() => handleEdit(rec)}
+                      className="btn-secondary flex-1"
+                    >
+                      Edit
+                    </button>
+                    <button
+                      onClick={() => handleApprove(rec.id, "approved")}
+                      className="btn-primary flex-1 bg-emerald-600 hover:bg-emerald-700"
+                    >
+                      Approve
+                    </button>
+                    <button
+                      onClick={() => handleApprove(rec.id, "rejected")}
+                      className="btn-danger flex-1"
+                    >
+                      Reject
+                    </button>
+                  </div>
+                </li>
+              ))}
+            </ul>
+          )}
         </div>
       </div>
     </div>

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

@@ -1,11 +1,30 @@
-import { UserManagement } from '@/components/users/UserManagement'
+"use client";
+
+import { UserManagement } from "@/components/users/UserManagement";
+import { PageHeader } from "@/components/ui/PageHeader";
+import { useUser } from "@clerk/nextjs";
+import { useSearchParams } from "next/navigation";
+import { GymSelector } from "@/components/gym/GymSelector";
 
 export default function UsersPage() {
+  const { user } = useUser();
+  const searchParams = useSearchParams();
+
+  const userRole = (user?.publicMetadata?.role as string) ?? "client";
+  const gymId = searchParams.get("gymId") ?? undefined;
+
   return (
-    <main className="min-h-screen bg-gray-50">
-      <div className="container mx-auto px-4 py-8">
-        <UserManagement />
+    <div className="space-y-8">
+      <PageHeader
+        title="Users"
+        description="Manage your gym members, trainers, and administrators"
+        breadcrumbs={[{ label: "Users", href: "/users" }]}
+        actions={<GymSelector userRole={userRole} />}
+      />
+
+      <div className="card-modern">
+        <UserManagement gymId={gymId} />
       </div>
-    </main>
-  )
-}
+    </div>
+  );
+}

apps/admin/src/components/Navigation.tsx

@@ -71,11 +71,11 @@ 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 &&
-                      "bg-primary text-primary-foreground",
+                        "bg-primary text-primary-foreground",
                     )}
                     aria-current={pathname === item.href ? "page" : undefined}
                   >

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

@@ -1,75 +1,38 @@
-'use client'
+"use client";
 
-import { useState, useEffect } from 'react'
-import { UserGrowthChart } from '@/components/charts/UserGrowthChart'
-import { MembershipDistributionChart } from '@/components/charts/MembershipDistributionChart'
-import { RevenueChart } from '@/components/charts/RevenueChart'
-import { Card, CardHeader, CardContent } from '@/components/ui/card'
+import { UserGrowthChart } from "@/components/charts/UserGrowthChart";
+import { MembershipDistributionChart } from "@/components/charts/MembershipDistributionChart";
+import { RevenueChart } from "@/components/charts/RevenueChart";
+import { Card, CardHeader, CardContent } from "@/components/ui/card";
+import { useAnalytics } from "@/hooks/use-api";
 
-interface ChartData {
-  label: string
-  value: number
-  color?: string
+interface AnalyticsDashboardProps {
+  gymId?: string;
 }
 
-export function AnalyticsDashboard() {
-  const [userGrowthData, setUserGrowthData] = useState<ChartData[]>([])
-  const [membershipData, setMembershipData] = useState<ChartData[]>([])
-  const [revenueData, setRevenueData] = useState<ChartData[]>([])
-  const [loading, setLoading] = useState(true)
+export function AnalyticsDashboard({ gymId }: AnalyticsDashboardProps) {
+  const { data: analytics, isLoading } = useAnalytics(6, gymId);
 
-  useEffect(() => {
-    fetchAnalyticsData()
-  }, [])
+  const userGrowthData = analytics?.userGrowth ?? [];
+  const membershipData = analytics?.membershipDistribution ?? [];
+  const revenueData = analytics?.revenue ?? [];
 
-  const fetchAnalyticsData = async () => {
-    setLoading(true)
-    try {
-      // Mock data for demonstration - replace with real API calls
-      const mockUserGrowth = [
-        { label: 'Jan', value: 45 },
-        { label: 'Feb', value: 52 },
-        { label: 'Mar', value: 61 },
-        { label: 'Apr', value: 58 },
-        { label: 'May', value: 67 },
-        { label: 'Jun', value: 74 },
-      ]
+  const totalUsers =
+    userGrowthData.length > 0
+      ? userGrowthData[userGrowthData.length - 1].value
+      : 0;
+  const totalRevenue = revenueData.reduce((sum, item) => sum + item.value, 0);
+  const activeMembers = membershipData.reduce(
+    (sum, item) => sum + item.value,
+    0,
+  );
 
-      const mockMembershipData = [
-        { label: 'Basic', value: 45, color: '#6b7280' },
-        { label: 'Premium', value: 28, color: '#3b82f6' },
-        { label: 'VIP', value: 12, color: '#f59e0b' },
-      ]
-
-      const mockRevenueData = [
-        { label: 'Jan', value: 12500, color: '#10b981' },
-        { label: 'Feb', value: 14200, color: '#10b981' },
-        { label: 'Mar', value: 16800, color: '#10b981' },
-        { label: 'Apr', value: 15900, color: '#10b981' },
-        { label: 'May', value: 18200, color: '#10b981' },
-        { label: 'Jun', value: 19400, color: '#10b981' },
-      ]
-
-      setUserGrowthData(mockUserGrowth)
-      setMembershipData(mockMembershipData)
-      setRevenueData(mockRevenueData)
-    } catch (error) {
-      console.error('Failed to fetch analytics data:', error)
-    } finally {
-      setLoading(false)
-    }
-  }
-
-  const totalUsers = userGrowthData.length > 0 ? userGrowthData[userGrowthData.length - 1].value : 0
-  const totalRevenue = revenueData.reduce((sum, item) => sum + item.value, 0)
-  const activeMembers = membershipData.reduce((sum, item) => sum + item.value, 0)
-
-  if (loading) {
+  if (isLoading) {
     return (
       <div className="flex justify-center items-center h-64">
         <div className="text-lg">Loading analytics...</div>
       </div>
-    )
+    );
   }
 
   return (
@@ -81,7 +44,9 @@ export function AnalyticsDashboard() {
         <Card>
           <CardContent>
             <div className="text-center">
-              <div className="text-3xl font-bold text-blue-600">{totalUsers}</div>
+              <div className="text-3xl font-bold text-blue-600">
+                {totalUsers}
+              </div>
               <div className="text-gray-600">Total Users</div>
             </div>
           </CardContent>
@@ -90,7 +55,9 @@ export function AnalyticsDashboard() {
         <Card>
           <CardContent>
             <div className="text-center">
-              <div className="text-3xl font-bold text-green-600">${totalRevenue.toLocaleString()}</div>
+              <div className="text-3xl font-bold text-green-600">
+                ${totalRevenue.toLocaleString()}
+              </div>
               <div className="text-gray-600">Total Revenue</div>
             </div>
           </CardContent>
@@ -99,7 +66,9 @@ export function AnalyticsDashboard() {
         <Card>
           <CardContent>
             <div className="text-center">
-              <div className="text-3xl font-bold text-purple-600">{activeMembers}</div>
+              <div className="text-3xl font-bold text-purple-600">
+                {activeMembers}
+              </div>
               <div className="text-gray-600">Active Members</div>
             </div>
           </CardContent>
@@ -133,14 +102,14 @@ export function AnalyticsDashboard() {
         </CardHeader>
         <CardContent>
           <RevenueChart
-            data={revenueData.map(item => ({
+            data={revenueData.map((item) => ({
               category: item.label,
               value: item.value,
-              color: item.color
+              color: item.color,
             }))}
           />
         </CardContent>
       </Card>
     </div>
-  )
+  );
 }

apps/admin/src/components/gym/GymSelector.tsx

@@ -0,0 +1,91 @@
+"use client";
+
+import { useRouter, useSearchParams } from "next/navigation";
+import { useEffect, useState } from "react";
+
+interface Gym {
+  id: string;
+  name: string;
+}
+
+interface GymSelectorProps {
+  currentGymId?: string;
+  userRole: string;
+}
+
+export function GymSelector({ userRole }: GymSelectorProps) {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const [gyms, setGyms] = useState<Gym[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    // Only fetch gyms for superAdmin
+    if (userRole !== "superAdmin") {
+      setLoading(false);
+      return;
+    }
+
+    async function fetchGyms() {
+      try {
+        const response = await fetch("/api/gyms");
+        const data = await response.json();
+
+        // API returns array directly
+        if (Array.isArray(data)) {
+          setGyms(data);
+        }
+      } catch (error) {
+        console.error("Failed to fetch gyms:", error);
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    fetchGyms();
+  }, [userRole]);
+
+  const handleGymChange = (gymId: string) => {
+    const params = new URLSearchParams(searchParams.toString());
+
+    if (gymId === "all") {
+      params.delete("gymId");
+    } else {
+      params.set("gymId", gymId);
+    }
+
+    router.push(`?${params.toString()}`);
+  };
+
+  // Only show for superAdmin
+  if (userRole !== "superAdmin") {
+    return null;
+  }
+
+  const selectedGymId = searchParams.get("gymId") ?? "all";
+
+  if (loading) {
+    return (
+      <div className="flex items-center gap-2">
+        <div className="h-9 w-40 animate-pulse rounded-md bg-muted" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex items-center gap-2">
+      <select
+        value={selectedGymId}
+        onChange={(e) => handleGymChange(e.target.value)}
+        className="h-9 rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+      >
+        <option value="all">All Gyms</option>
+        {gyms.map((gym) => (
+          <option key={gym.id} value={gym.id}>
+            {gym.name}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+}

apps/admin/src/components/providers/QueryProvider.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { useState, type ReactNode } from "react";
+
+interface QueryProviderProps {
+  children: ReactNode;
+}
+
+export function QueryProvider({ children }: QueryProviderProps) {
+  const [queryClient] = useState(
+    () =>
+      new QueryClient({
+        defaultOptions: {
+          queries: {
+            staleTime: 60 * 1000,
+            refetchOnWindowFocus: false,
+          },
+        },
+      }),
+  );
+
+  return (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  );
+}

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,60 +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 Recommendation {
-  id: string;
-  status: string;
+interface NavItem {
+  icon: React.ElementType;
+  label: string;
+  href: string;
+  badge?: number;
 }
 
 export function Sidebar() {
   const pathname = usePathname();
   const { user } = useUser();
-  const [pendingCount, setPendingCount] = useState(0);
+  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));
   }, []);
 
-  useEffect(() => {
-    const fetchPending = async () => {
-      try {
-        const res = await fetch("/api/recommendations");
-        if (res.ok) {
-          const data = await res.json();
-          const pending = (data.recommendations || []).filter(
-            (r: Recommendation) => r.status === "pending",
-          );
-          setPendingCount(pending.length);
-        }
-      } catch (e) {
-        console.error("Failed to fetch pending recommendations", e);
-      }
-    };
-    fetchPending();
-  }, []);
+  const handleToggle = () => {
+    const newState = !isCollapsed;
+    setIsCollapsed(newState);
+    localStorage.setItem("sidebar-collapsed", JSON.stringify(newState));
+  };
 
-  const menuItems = [
+  const navItems: NavItem[] = [
     { icon: LayoutDashboard, label: "Dashboard", href: "/" },
     { icon: Users, label: "Users", href: "/users" },
     {
       icon: Brain,
-      label: (
-        <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>
-      ),
+      label: "AI Recommendations",
       href: "/recommendations",
+      badge: pendingCount > 0 ? pendingCount : undefined,
     },
     { icon: CalendarCheck, label: "Attendance", href: "/attendance" },
     { icon: CreditCard, label: "Payments", href: "/payments" },
@@ -70,59 +58,126 @@ 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">
-      <div className="p-6 border-b border-slate-800 flex items-center overflow-hidden whitespace-nowrap">
-        <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">
-          FitAI Admin
-        </h1>
-      </div>
+    <aside
+      className={cn(
+        "fixed left-0 top-0 z-40 h-screen transition-all duration-300 ease-in-out",
+        isCollapsed ? "w-[72px]" : "w-[260px]",
+        "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">
-        {menuItems.map((item) => {
-          const Icon = item.icon;
-          const isActive = pathname === item.href;
-          const label =
-            typeof item.label === "string" ? item.label : item.label;
-          return (
-            <Link
-              key={item.href}
-              href={item.href}
-              className={`flex items-center gap-3 px-4 py-3 rounded-lg transition-all duration-200 ${
-                isActive
-                  ? "bg-blue-600 text-white shadow-lg shadow-blue-900/20"
-                  : "text-slate-400 hover:bg-slate-800 hover:text-white"
-              }`}
-            >
-              <div className="min-w-[20px]">
+        {/* Toggle Button */}
+        <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 ||
+              (item.href !== "/" && pathname.startsWith(item.href));
+
+            return (
+              <Link
+                key={item.href}
+                href={item.href}
+                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-gradient-to-r from-blue-600 to-blue-500 text-white shadow-lg shadow-blue-500/25"
+                    : "text-slate-400 hover:bg-white/5 hover:text-white",
+                  isCollapsed && "justify-center px-2",
+                )}
+              >
                 <Icon
-                  size={20}
-                  className={
+                  className={cn(
+                    "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>
-              <span className="font-medium opacity-0 group-hover:opacity-100 transition-opacity duration-300 whitespace-nowrap overflow-hidden">
-                {label}
-              </span>
-            </Link>
-          );
-        })}
-      </nav>
+                {!isCollapsed && (
+                  <>
+                    <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">
-        <div className="flex items-center gap-3 px-2 py-3 rounded-lg bg-slate-800/50 overflow-hidden whitespace-nowrap">
-          <div className="min-w-[32px]">
-            {mounted && <UserButton afterSignOutUrl="/" />}
-          </div>
-          <div className="flex-1 min-w-0 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
-            <p className="text-sm font-medium text-white truncate">
-              {user?.fullName || "Admin User"}
-            </p>
-            <p className="text-xs text-slate-400 truncate">
-              {user?.primaryEmailAddress?.emailAddress}
-            </p>
+        {/* User Section */}
+        <div
+          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>
+            {!isCollapsed && (
+              <div className="min-w-0 flex-1">
+                <p className="truncate text-sm font-medium text-white">
+                  {user?.fullName || "Admin"}
+                </p>
+                <p className="truncate text-xs text-slate-400">
+                  {user?.primaryEmailAddress?.emailAddress}
+                </p>
+              </div>
+            )}
           </div>
         </div>
       </div>

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

@@ -1,51 +1,139 @@
 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;
-    value: string | number;
-    change?: string;
-    trend?: "up" | "down" | "neutral";
-    icon: LucideIcon;
-    color?: "blue" | "green" | "purple" | "orange";
+  title: string;
+  value: string | number;
+  change?: string;
+  trend?: "up" | "down" | "neutral";
+  icon: LucideIcon;
+  color?: "blue" | "green" | "purple" | "orange" | "red";
+  className?: string;
 }
 
-export function StatsCard({ title, value, change, trend, icon: Icon, color = "blue" }: StatsCardProps) {
-    const colorStyles = {
-        blue: "bg-blue-50 text-blue-600",
-        green: "bg-green-50 text-green-600",
-        purple: "bg-purple-50 text-purple-600",
-        orange: "bg-orange-50 text-orange-600",
-    };
+export function StatsCard({
+  title,
+  value,
+  change,
+  trend,
+  icon: Icon,
+  color = "blue",
+  className,
+}: StatsCardProps) {
+  const colorStyles = {
+    blue: {
+      gradient: "from-blue-500/10 to-blue-600/5",
+      iconBg: "bg-gradient-to-br from-blue-500 to-blue-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",
+    },
+  };
 
-    return (
-        <Card>
-            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-                <CardTitle className="text-sm font-medium text-muted-foreground">
-                    {title}
-                </CardTitle>
-                <div className={`p-2 rounded-lg ${colorStyles[color]}`}>
-                    <Icon size={16} />
-                </div>
-            </CardHeader>
-            <CardContent>
-                <div className="text-2xl font-bold">{value}</div>
-                {change && (
-                    <p className="text-xs text-muted-foreground mt-1">
-                        <span
-                            className={`font-medium ${trend === "up"
-                                    ? "text-green-600"
-                                    : trend === "down"
-                                        ? "text-red-600"
-                                        : "text-slate-600"
-                                }`}
-                        >
-                            {change}
-                        </span>{" "}
-                        vs last month
-                    </p>
+  const styles = colorStyles[color];
+  const TrendIcon =
+    trend === "up" ? TrendingUp : trend === "down" ? TrendingDown : Minus;
+
+  return (
+    <div
+      className={cn(
+        "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",
+        styles.gradient,
+        className,
+      )}
+    >
+      <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>
+          {change && (
+            <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",
                 )}
-            </CardContent>
-        </Card>
-    );
+              />
+              <span
+                className={cn(
+                  "font-medium",
+                  trend === "up" && styles.trendUp,
+                  trend === "down" && styles.trendDown,
+                  trend === "neutral" && "text-muted-foreground",
+                )}
+              >
+                {change}
+              </span>
+              <span className="text-muted-foreground">vs last month</span>
+            </div>
+          )}
+        </div>
+        <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 { cn } from '@/lib/utils'
-import { Loader2 } from 'lucide-react'
+import React from "react";
+import { cn } from "@/lib/utils";
+import { Loader2 } from "lucide-react";
+import { cva, type VariantProps } from "class-variance-authority";
 
-interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: 'primary' | 'secondary' | 'ghost' | 'destructive' | 'outline' | 'default'
-  size?: 'default' | 'sm' | 'lg' | 'icon'
-  isLoading?: boolean
-  children: React.ReactNode
+const buttonVariants = cva(
+  "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",
+  {
+    variants: {
+      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({
-  variant = 'primary',
-  size = 'default',
-  isLoading = false,
-  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)}
-      disabled={disabled || isLoading}
-      {...props}
-    >
-      {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
-      {children}
-    </button>
-  )
-}
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    { className, variant, size, isLoading, children, disabled, ...props },
+    ref,
+  ) => {
+    return (
+      <button
+        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/components/ui/skeleton.tsx

@@ -0,0 +1,57 @@
+import { cn } from "@/lib/utils";
+
+interface SkeletonProps {
+  className?: string;
+}
+
+export function Skeleton({ className }: SkeletonProps) {
+  return (
+    <div
+      className={cn(
+        "animate-pulse rounded-md bg-slate-200 dark:bg-slate-700",
+        className,
+      )}
+    />
+  );
+}
+
+export function StatsCardSkeleton() {
+  return (
+    <div className="bg-white rounded-xl shadow-sm border border-slate-100 p-6">
+      <div className="flex items-center gap-4">
+        <Skeleton className="h-12 w-12 rounded-full" />
+        <div className="flex-1 space-y-2">
+          <Skeleton className="h-4 w-20" />
+          <Skeleton className="h-8 w-16" />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function TableSkeleton({ rows = 5 }: { rows?: number }) {
+  return (
+    <div className="space-y-3">
+      {Array.from({ length: rows }).map((_, i) => (
+        <div key={i} className="flex gap-4">
+          <Skeleton className="h-12 flex-1" />
+          <Skeleton className="h-12 w-32" />
+          <Skeleton className="h-12 w-24" />
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export function CardSkeleton() {
+  return (
+    <div className="bg-white rounded-xl shadow-sm border border-slate-100 p-6 space-y-4">
+      <Skeleton className="h-6 w-40" />
+      <div className="space-y-2">
+        <Skeleton className="h-4 w-full" />
+        <Skeleton className="h-4 w-3/4" />
+        <Skeleton className="h-4 w-5/6" />
+      </div>
+    </div>
+  );
+}

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

@@ -9,9 +9,10 @@ import { formatDate } from "@/lib/utils";
 
 ModuleRegistry.registerModules([AllCommunityModule]);
 
-function getTimeAgo(date: Date): string {
+function getTimeAgo(date: Date | string): string {
   const now = new Date();
-  const diffMs = now.getTime() - date.getTime();
+  const d = typeof date === "string" ? new Date(date) : date;
+  const diffMs = now.getTime() - d.getTime();
   const diffMins = Math.floor(diffMs / 60000);
   const diffHours = Math.floor(diffMins / 60);
   const diffDays = Math.floor(diffHours / 24);
@@ -22,7 +23,7 @@ function getTimeAgo(date: Date): string {
   return `${diffDays}d ago`;
 }
 
-interface User {
+export interface User {
   id: string;
   email: string;
   firstName: string;
@@ -31,15 +32,18 @@ interface User {
   phone?: string;
   gymId?: string;
   gymName?: string | null;
-  createdAt: Date;
+  createdAt?: string | Date;
   isCheckedIn?: boolean;
-  checkInTime?: Date;
+  checkInTime?: string | Date;
+  lastCheckInTime?: string | Date;
+  checkInsThisWeek?: number;
+  checkInsThisMonth?: number;
   client?: {
     id: string;
     membershipType: string;
     membershipStatus: string;
-    joinDate: Date;
-    lastVisit?: Date;
+    joinDate: string | Date;
+    lastVisit?: string | Date;
   };
 }
 

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

@@ -1,43 +1,27 @@
 "use client";
 
-import { useState, useEffect } from "react";
-import { UserGrid } from "@/components/users/UserGrid";
-// import { Button } from "@/components/ui/button";
+import { useState } from "react";
+import { UserGrid, type User } from "@/components/users/UserGrid";
 import { Card, CardHeader, CardContent } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { useUser } from "@clerk/nextjs";
-import { getGymIdFromUser } from "@/lib/error-helpers";
 import log from "@/lib/logger";
 import { toast } from "@/lib/toast";
 import { CreateUserModal } from "./CreateUserModal";
+import {
+  useUsers,
+  useGyms,
+  useUpdateUser,
+  useDeleteUser,
+  useSendInvitation,
+} from "@/hooks/use-api";
 
-interface User {
-  id: string;
-  email: string;
-  firstName: string;
-  lastName: string;
-  role: string;
-  phone?: string;
+interface UserManagementProps {
   gymId?: string;
-  createdAt: Date;
-  isCheckedIn?: boolean;
-  checkInTime?: Date;
-  lastCheckInTime?: Date;
-  checkInsThisWeek?: number;
-  checkInsThisMonth?: number;
-  client?: {
-    id: string;
-    membershipType: string;
-    membershipStatus: string;
-    joinDate: Date;
-    lastVisit?: Date;
-  };
 }
 
-export function UserManagement() {
+export function UserManagement({ gymId }: UserManagementProps) {
   const { user } = useUser();
-  const [users, setUsers] = useState<User[]>([]);
-  const [loading, setLoading] = useState(true);
   const [filter, setFilter] = useState<string>("all");
   const [selectedUser, setSelectedUser] = useState<User | null>(null);
   const [isEditing, setIsEditing] = useState(false);
@@ -52,68 +36,18 @@ export function UserManagement() {
     gymId: string;
   } | null>(null);
 
-  // Active gyms for dropdown
-  const [gyms, setGyms] = useState<Array<{ id: string; name: string }>>([]);
-
-  // Load gyms when modal opens or refreshes
-  useEffect(() => {
-    if (isEditing) {
-      (async () => {
-        try {
-          const res = await fetch("/api/gyms");
-          const data = await res.json();
-          if (Array.isArray(data)) {
-            // map down to id and name to avoid extra payload use here
-            setGyms(data.map((g: any) => ({ id: g.id, name: g.name })));
-          } else {
-            setGyms([]);
-          }
-        } catch {
-          setGyms([]);
-        }
-      })();
-    }
-  }, [isEditing]);
-
-  useEffect(() => {
-    fetchUsers();
-  }, [filter]);
-
-  const fetchUsers = async () => {
-    setLoading(true);
-    try {
-      const ts = Date.now();
-      const url =
-        filter === "all"
-          ? `/api/users?ts=${ts}`
-          : `/api/users?role=${filter}&ts=${ts}`;
-
-      log.debug("Fetching users", { url });
-      const response = await fetch(url, { cache: "no-store" });
-      log.debug("Users fetch response", {
-        ok: response.ok,
-        status: response.status,
-      });
-      const responseData = await response.json();
-      const data = responseData.data || responseData; // Handle both old and new API response formats
-      log.debug("Received users data", {
-        count: Array.isArray(data.users) ? data.users.length : 0,
-        sample:
-          data.users && data.users[0]
-            ? {
-                id: data.users[0].id,
-                gymId: data.users[0].gymId,
-                role: data.users[0].role,
-              }
-            : null,
-      });
-      setUsers(data.users || []);
-    } catch (error) {
-      log.error("Failed to fetch users", error);
-    } finally {
-      setLoading(false);
-    }
-  };
+  const {
+    data: users = [],
+    isLoading,
+    refetch,
+  } = useUsers({
+    role: filter !== "all" ? filter : undefined,
+    gymId,
+  });
+  const { data: gyms = [] } = useGyms();
+  const updateUser = useUpdateUser();
+  const deleteUser = useDeleteUser();
+  const sendInvitation = useSendInvitation();
 
   const handleUserSelect = (user: User | null) => {
     setSelectedUser(user);
@@ -144,17 +78,12 @@ export function UserManagement() {
       return;
 
     try {
-      const response = await fetch("/api/users", {
-        method: "DELETE",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ ids: users.map((u) => u.id) }),
-      });
-      if (response.ok) {
-        fetchUsers();
-        toast.success("Users deleted successfully");
-      } else {
-        toast.error("Error deleting users");
-      }
+      const deletePromises = users.map((u) =>
+        fetch(`/api/users?id=${u.id}`, { method: "DELETE" }),
+      );
+      await Promise.all(deletePromises);
+      refetch();
+      toast.success("Users deleted successfully");
     } catch (error) {
       log.error("Failed to delete users", error);
     }
@@ -196,7 +125,7 @@ export function UserManagement() {
   };
 
   const handleRefresh = () => {
-    fetchUsers();
+    refetch();
   };
 
   const handleSaveEdit = async () => {
@@ -204,7 +133,6 @@ export function UserManagement() {
 
     try {
       if (selectedUser) {
-        // Update existing user
         const payload = {
           id: selectedUser.id,
           email: editForm.email,
@@ -214,80 +142,21 @@ export function UserManagement() {
           phone: editForm.phone,
           gymId: editForm.gymId === "" ? null : editForm.gymId,
         };
-        log.debug("Updating user", payload);
-        const response = await fetch("/api/users", {
-          method: "PUT",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify(payload),
-        });
-        log.debug("User update response", {
-          ok: response.ok,
-          status: response.status,
-        });
-        if (response.ok) {
-          // Optimistically update local state so grid reflects changes immediately
-          setUsers((prev) =>
-            prev.map((u) =>
-              u.id === selectedUser.id
-                ? {
-                    ...u,
-                    email: editForm.email,
-                    firstName: editForm.firstName,
-                    lastName: editForm.lastName,
-                    role: editForm.role,
-                    phone: editForm.phone || undefined,
-                    gymId: editForm.gymId === "" ? undefined : editForm.gymId,
-                  }
-                : u,
-            ),
-          );
-          setSelectedUser((prev) =>
-            prev
-              ? {
-                  ...prev,
-                  email: editForm.email,
-                  firstName: editForm.firstName,
-                  lastName: editForm.lastName,
-                  role: editForm.role,
-                  phone: editForm.phone || undefined,
-                  gymId: editForm.gymId === "" ? undefined : editForm.gymId,
-                }
-              : prev,
-          );
-          setIsEditing(false);
-          setEditForm(null);
-          // Still re-fetch from server to ensure consistency
-          log.debug("Re-fetching users after successful edit");
-          fetchUsers();
-          toast.success("User updated successfully");
-        } else {
-          const errText = await response.text().catch(() => "");
-          log.error("User update failed", new Error(errText), {
-            status: response.status,
-          });
-          toast.error("Error updating user");
-        }
-      } else {
-        // Create (Invite) new user
-        const response = await fetch("/api/invitations", {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({
-            inviteeEmail: editForm.email,
-            roleAssigned: editForm.role,
-            gymId: editForm.gymId || undefined,
-          }),
-        });
 
-        if (response.ok) {
-          setIsEditing(false);
-          setEditForm(null);
-          fetchUsers();
-          toast.success("Invitation sent successfully!");
-        } else {
-          const errorData = await response.json();
-          toast.error(`Error sending invitation: ${errorData.error}`);
-        }
+        await updateUser.mutateAsync(payload);
+        setIsEditing(false);
+        setEditForm(null);
+        refetch();
+        toast.success("User updated successfully");
+      } else {
+        await sendInvitation.mutateAsync({
+          email: editForm.email,
+          role: editForm.role,
+        });
+        setIsEditing(false);
+        setEditForm(null);
+        refetch();
+        toast.success("Invitation sent successfully!");
       }
     } catch (error) {
       console.error(error);
@@ -299,17 +168,11 @@ export function UserManagement() {
     if (!selectedUser) return;
 
     try {
-      const response = await fetch(`/api/users?id=${selectedUser.id}`, {
-        method: "DELETE",
-      });
-      if (response.ok) {
-        setIsDeleting(false);
-        setSelectedUser(null);
-        fetchUsers();
-        toast.success("User deleted successfully");
-      } else {
-        toast.error("Error deleting user");
-      }
+      await deleteUser.mutateAsync(selectedUser.id);
+      setIsDeleting(false);
+      setSelectedUser(null);
+      refetch();
+      toast.success("User deleted successfully");
     } catch (error) {
       log.error("Failed to delete user", error);
     }
@@ -397,7 +260,7 @@ export function UserManagement() {
             onEditUser={handleEditUser}
             onDeleteUser={handleDeleteUser}
             onBulkDelete={handleBulkDelete}
-            loading={loading}
+            loading={isLoading}
           />
         </CardContent>
       </Card>
@@ -591,7 +454,9 @@ export function UserManagement() {
                   </p>
                   <p>
                     <span className="font-medium">Joined:</span>{" "}
-                    {new Date(selectedUser.createdAt).toLocaleDateString()}
+                    {selectedUser.createdAt
+                      ? new Date(selectedUser.createdAt).toLocaleDateString()
+                      : "N/A"}
                   </p>
                 </div>
               </div>
@@ -653,7 +518,7 @@ export function UserManagement() {
       <CreateUserModal
         open={createModalOpen}
         onOpenChange={setCreateModalOpen}
-        onSuccess={() => fetchUsers()}
+        onSuccess={() => refetch()}
       />
     </div>
   );

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

@@ -0,0 +1,385 @@
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+
+export interface DashboardStats {
+  totalUsers: number;
+  activeClients: number;
+  totalRevenue: number;
+  revenueGrowth: number;
+}
+
+export interface User {
+  id: string;
+  email: string;
+  firstName: string;
+  lastName: string;
+  role: string;
+  phone?: string;
+  gymId?: string;
+  gymName?: string | null;
+  createdAt?: string;
+  isCheckedIn?: boolean;
+  checkInTime?: string;
+  lastCheckInTime?: string;
+  checkInsThisWeek?: number;
+  checkInsThisMonth?: number;
+  client?: {
+    id: string;
+    membershipType: string;
+    membershipStatus: string;
+    joinDate: string;
+    lastVisit?: string;
+  };
+}
+
+export interface Recommendation {
+  id: string;
+  userId: string;
+  type: string;
+  title: string;
+  description: string;
+  content?: string;
+  recommendationText?: string;
+  activityPlan?: string;
+  dietPlan?: string;
+  status: "pending" | "approved" | "rejected";
+  createdAt: string;
+  user?: User;
+}
+
+export interface Gym {
+  id: string;
+  name: string;
+  address?: string;
+}
+
+export interface AttendanceRecord {
+  id: string;
+  userId: string;
+  checkIn: string;
+  checkOut?: string;
+  date: string;
+  type?: string;
+}
+
+async function fetchApi<T>(url: string, options?: RequestInit): Promise<T> {
+  const response = await fetch(url, {
+    ...options,
+    headers: {
+      "Content-Type": "application/json",
+      ...options?.headers,
+    },
+  });
+
+  if (!response.ok) {
+    const error = await response
+      .json()
+      .catch(() => ({ error: "Request failed" }));
+    throw new Error(error.error || `HTTP ${response.status}`);
+  }
+
+  return response.json();
+}
+
+export function useDashboardStats(gymId?: string) {
+  return useQuery({
+    queryKey: ["dashboard-stats", gymId],
+    queryFn: () => {
+      const url = gymId
+        ? `/api/admin/stats?gymId=${gymId}`
+        : "/api/admin/stats";
+      return fetchApi<{ data: { stats: DashboardStats } }>(url).then(
+        (res) => res.data?.stats,
+      );
+    },
+  });
+}
+
+export function useUsers(filters?: {
+  role?: string;
+  gymId?: string;
+  search?: string;
+}) {
+  const params = new URLSearchParams();
+  if (filters?.role) params.set("role", filters.role);
+  if (filters?.gymId) params.set("gymId", filters.gymId);
+  if (filters?.search) params.set("search", filters.search);
+
+  const queryString = params.toString();
+  const url = queryString ? `/api/users?${queryString}` : "/api/users";
+
+  return useQuery({
+    queryKey: ["users", filters],
+    queryFn: () =>
+      fetchApi<{ data: { users: User[] } }>(url).then(
+        (res) => res.data?.users ?? [],
+      ),
+  });
+}
+
+export function useUser(userId: string) {
+  return useQuery({
+    queryKey: ["user", userId],
+    queryFn: () =>
+      fetchApi<{ data: { user: User } }>(`/api/users?id=${userId}`).then(
+        (res) => res.data?.user,
+      ),
+    enabled: !!userId,
+  });
+}
+
+export function useRecommendations(filters?: {
+  userId?: string;
+  status?: string;
+}) {
+  const params = new URLSearchParams();
+  if (filters?.userId) params.set("userId", filters.userId);
+  if (filters?.status) params.set("status", filters.status);
+
+  const queryString = params.toString();
+  const url = queryString
+    ? `/api/recommendations?${queryString}`
+    : "/api/recommendations";
+
+  return useQuery({
+    queryKey: ["recommendations", filters],
+    queryFn: () =>
+      fetchApi<{ data: { recommendations: Recommendation[] } }>(url).then(
+        (res) => res.data?.recommendations ?? [],
+      ),
+  });
+}
+
+export function usePendingRecommendationsCount() {
+  return useQuery({
+    queryKey: ["pending-recommendations-count"],
+    queryFn: () =>
+      fetchApi<{ data: { recommendations: Recommendation[] } }>(
+        "/api/recommendations",
+      ).then(
+        (res) =>
+          (res.data?.recommendations ?? []).filter(
+            (r) => r.status === "pending",
+          ).length,
+      ),
+    refetchInterval: 30000,
+  });
+}
+
+export function useGyms() {
+  return useQuery({
+    queryKey: ["gyms"],
+    queryFn: () =>
+      fetchApi<{ data: { gyms: Gym[] } }>("/api/gyms").then(
+        (res) => res.data?.gyms ?? [],
+      ),
+  });
+}
+
+export function useAttendance(filters?: { userId?: string; date?: string }) {
+  const params = new URLSearchParams();
+  if (filters?.userId) params.set("userId", filters.userId);
+  if (filters?.date) params.set("date", filters.date);
+
+  const queryString = params.toString();
+  const url = queryString
+    ? `/api/admin/attendance?${queryString}`
+    : "/api/admin/attendance";
+
+  return useQuery({
+    queryKey: ["attendance", filters],
+    queryFn: () =>
+      fetchApi<{ data: { records: AttendanceRecord[] } }>(url).then(
+        (res) => res.data?.records ?? [],
+      ),
+  });
+}
+
+export function useCreateUser() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (data: {
+      email: string;
+      firstName: string;
+      lastName: string;
+      role: string;
+      phone?: string;
+      gymId?: string;
+    }) =>
+      fetchApi<{ data: { userId: string } }>("/api/users/create", {
+        method: "POST",
+        body: JSON.stringify(data),
+      }).then((res) => res.data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["users"] });
+      queryClient.invalidateQueries({ queryKey: ["dashboard-stats"] });
+    },
+  });
+}
+
+export function useUpdateUser() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (data: { id: string; [key: string]: unknown }) =>
+      fetchApi<{ data: { success: boolean } }>(`/api/users?id=${data.id}`, {
+        method: "PUT",
+        body: JSON.stringify(data),
+      }),
+    onSuccess: (_, variables) => {
+      queryClient.invalidateQueries({ queryKey: ["users"] });
+      queryClient.invalidateQueries({ queryKey: ["user", variables.id] });
+    },
+  });
+}
+
+export function useDeleteUser() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (userId: string) =>
+      fetchApi<{ data: { success: boolean } }>(`/api/users?id=${userId}`, {
+        method: "DELETE",
+      }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["users"] });
+      queryClient.invalidateQueries({ queryKey: ["dashboard-stats"] });
+    },
+  });
+}
+
+export function useGenerateRecommendations() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (userId?: string) =>
+      fetchApi<{
+        data: { success: boolean; recommendations?: Recommendation[] };
+      }>("/api/recommendations/generate", {
+        method: "POST",
+        body: userId ? JSON.stringify({ userId }) : undefined,
+      }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["recommendations"] });
+      queryClient.invalidateQueries({
+        queryKey: ["pending-recommendations-count"],
+      });
+    },
+  });
+}
+
+export function useApproveRecommendation() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (data: { recommendationId: string; approved: boolean }) =>
+      fetchApi<{ data: { success: boolean } }>("/api/recommendations/approve", {
+        method: "POST",
+        body: JSON.stringify(data),
+      }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["recommendations"] });
+      queryClient.invalidateQueries({
+        queryKey: ["pending-recommendations-count"],
+      });
+    },
+  });
+}
+
+export function useUpdateRecommendation() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (data: {
+      id: string;
+      content?: string;
+      activityPlan?: string;
+      dietPlan?: string;
+    }) =>
+      fetchApi<{ data: { success: boolean } }>("/api/recommendations", {
+        method: "PUT",
+        body: JSON.stringify(data),
+      }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["recommendations"] });
+    },
+  });
+}
+
+export function useCheckIn() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (userId: string) =>
+      fetchApi<{ data: { success: boolean; record: AttendanceRecord } }>(
+        "/api/attendance/check-in",
+        {
+          method: "POST",
+          body: JSON.stringify({ userId }),
+        },
+      ),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["attendance"] });
+    },
+  });
+}
+
+export function useCheckOut() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (userId: string) =>
+      fetchApi<{ data: { success: boolean } }>("/api/attendance/check-out", {
+        method: "POST",
+        body: JSON.stringify({ userId }),
+      }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["attendance"] });
+    },
+  });
+}
+
+export function useInvitations() {
+  return useQuery({
+    queryKey: ["invitations"],
+    queryFn: () =>
+      fetchApi<{ data: { invitations: unknown[] } }>("/api/invitations").then(
+        (res) => res.data?.invitations ?? [],
+      ),
+  });
+}
+
+export function useSendInvitation() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (data: { email: string; role: string }) =>
+      fetchApi<{ data: { success: boolean } }>("/api/invitations", {
+        method: "POST",
+        body: JSON.stringify(data),
+      }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["invitations"] });
+    },
+  });
+}
+
+export interface AnalyticsData {
+  userGrowth: { label: string; value: number }[];
+  membershipDistribution: { label: string; value: number; color: string }[];
+  revenue: { label: string; value: number; color: string }[];
+}
+
+export function useAnalytics(months: number = 6, gymId?: string) {
+  return useQuery({
+    queryKey: ["analytics", months, gymId],
+    queryFn: () => {
+      const url = gymId
+        ? `/api/admin/analytics?months=${months}&gymId=${gymId}`
+        : `/api/admin/analytics?months=${months}`;
+      return fetchApi<{ data: { analytics: AnalyticsData } }>(url).then(
+        (res) => res.data?.analytics,
+      );
+    },
+  });
+}

apps/admin/src/lib/auth/context.ts

@@ -0,0 +1,231 @@
+import { NextRequest, NextResponse } from "next/server";
+import { auth } from "@clerk/nextjs/server";
+import { USER_ROLES, type UserRole } from "@fitai/shared";
+import { getDatabase } from "../database";
+
+export interface AuthContext {
+  userId: string;
+  role: UserRole;
+  gymId: string | null;
+}
+
+export interface AuthResult extends AuthContext {}
+
+/**
+ * Get the full authentication context including gymId
+ * Combines Clerk session claims with database lookup for accurate gym assignment
+ *
+ * @returns AuthContext with userId, role, and gymId
+ *
+ * @example
+ * const { userId, role, gymId } = await getAuthContext();
+ * // userId: "user_abc123"
+ * // role: "admin"
+ * // gymId: "gym_xyz"
+ */
+export async function getAuthContext(): Promise<AuthContext> {
+  const { userId, sessionClaims } = await auth();
+
+  if (!userId) {
+    throw new Error("Unauthorized: No authenticated user");
+  }
+
+  // Get role from Clerk metadata
+  const role = (sessionClaims?.metadata as { role?: UserRole })?.role;
+
+  if (!role || !USER_ROLES.includes(role)) {
+    throw new Error(`Forbidden: Invalid or missing role - ${role}`);
+  }
+
+  // Get gymId from Clerk metadata or database
+  let gymId: string | null = null;
+
+  // First try Clerk metadata (faster path)
+  const clerkGymId = (sessionClaims?.metadata as { gymId?: string })?.gymId;
+  if (clerkGymId) {
+    gymId = clerkGymId;
+  } else {
+    // Fallback to database lookup
+    try {
+      const db = await getDatabase();
+      const user = await db.getUserById(userId);
+      gymId = user?.gymId ?? null;
+    } catch (error) {
+      console.error("Failed to get gymId from database:", error);
+      gymId = null;
+    }
+  }
+
+  return { userId, role, gymId };
+}
+
+/**
+ * Middleware to require authentication and optionally check user role
+ * Enhanced version that also retrieves gymId
+ *
+ * @param allowedRoles - Array of roles allowed to access the endpoint (optional)
+ * @returns Authentication result with userId, role, and gymId, or NextResponse error
+ *
+ * @example
+ * export async function DELETE(request: NextRequest) {
+ *   const authResult = await requireAuth(["admin", "superAdmin"]);
+ *   if (authResult instanceof NextResponse) return authResult;
+ *   const { userId, role, gymId } = authResult;
+ *   // ... proceed with authorized logic
+ * }
+ */
+export async function requireAuth(
+  allowedRoles?: UserRole[],
+): Promise<AuthResult | NextResponse> {
+  try {
+    const context = await getAuthContext();
+
+    // Check if user has required role
+    if (allowedRoles && allowedRoles.length > 0) {
+      if (!allowedRoles.includes(context.role)) {
+        return NextResponse.json(
+          {
+            error: `Forbidden - Requires one of: ${allowedRoles.join(", ")}`,
+            requiredRoles: allowedRoles,
+            userRole: context.role,
+          },
+          { status: 403 },
+        );
+      }
+    }
+
+    return context;
+  } catch (error) {
+    const message = error instanceof Error ? error.message : "Unknown error";
+
+    if (message.includes("Unauthorized")) {
+      return NextResponse.json(
+        { error: "Unauthorized - Authentication required" },
+        { status: 401 },
+      );
+    }
+
+    if (message.includes("Forbidden")) {
+      return NextResponse.json({ error: message }, { status: 403 });
+    }
+
+    return NextResponse.json(
+      { error: "Internal server error" },
+      { status: 500 },
+    );
+  }
+}
+
+/**
+ * Require authentication with gym access validation
+ * Use this for endpoints that need to verify the user can access a specific gym
+ *
+ * @param allowedRoles - Roles allowed to access this endpoint
+ * @param requiredGymId - Gym ID that must be accessed (optional - uses user's gym if not provided)
+ * @returns AuthResult with full context, or NextResponse error
+ *
+ * @example
+ * // Admin accessing their own gym
+ * const result = await requireGymAccess(["admin"]);
+ *
+ * // SuperAdmin accessing specific gym
+ * const result = await requireGymAccess(["superAdmin"], "gym_123");
+ */
+export async function requireGymAccess(
+  allowedRoles: UserRole[],
+  requiredGymId?: string,
+): Promise<AuthResult | NextResponse> {
+  const authResult = await requireAuth(allowedRoles);
+
+  if (authResult instanceof NextResponse) {
+    return authResult;
+  }
+
+  const { role, gymId: userGymId } = authResult;
+
+  // Determine target gym
+  const targetGymId = requiredGymId ?? userGymId;
+
+  // SuperAdmin can access any gym
+  if (role === "superAdmin") {
+    return { ...authResult, gymId: targetGymId };
+  }
+
+  // Other roles must have matching gym
+  if (!targetGymId) {
+    return NextResponse.json(
+      { error: "Forbidden - User is not assigned to a gym" },
+      { status: 403 },
+    );
+  }
+
+  if (userGymId !== targetGymId) {
+    return NextResponse.json(
+      { error: "Forbidden - Cannot access other gym's data" },
+      { status: 403 },
+    );
+  }
+
+  return { ...authResult, gymId: targetGymId };
+}
+
+/**
+ * Get the target gym ID from request for superAdmin context switching
+ * SuperAdmins can pass ?gymId to view specific gym data
+ *
+ * @param request - NextRequest with query params
+ * @param userRole - Current user's role
+ * @param userGymId - Current user's gym ID
+ * @returns Target gym ID or undefined for superAdmin viewing all
+ *
+ * @example
+ * const targetGymId = getTargetGymId(request, role, gymId);
+ * // For superAdmin with ?gymId=abc -> "abc"
+ * // For superAdmin without param -> undefined (all gyms)
+ * // For admin -> always returns their gymId
+ */
+export function getTargetGymId(
+  request: NextRequest,
+  userRole: UserRole,
+  userGymId: string | null,
+): string | undefined {
+  // For superAdmin, allow gymId query param for context switching
+  if (userRole === "superAdmin") {
+    const queryGymId = request.nextUrl.searchParams.get("gymId");
+    return queryGymId ?? undefined;
+  }
+
+  // For other roles, they can only access their own gym
+  return userGymId ?? undefined;
+}
+
+/**
+ * Check if the authenticated user is trying to modify their own account
+ * Useful for preventing self-deletion or self-demotion
+ */
+export function isSelfModification(
+  userId: string,
+  targetUserId: string,
+): boolean {
+  return userId === targetUserId;
+}
+
+/**
+ * Validate that an admin isn't demoting themselves or deleting their own account
+ */
+export function preventSelfModification(
+  userId: string,
+  targetUserId: string,
+  action: string,
+): NextResponse | undefined {
+  if (isSelfModification(userId, targetUserId)) {
+    return NextResponse.json(
+      {
+        error: `Cannot ${action} your own account`,
+        hint: "Ask another administrator to perform this action",
+      },
+      { status: 403 },
+    );
+  }
+  return undefined;
+}

apps/admin/src/lib/auth/permissions.ts

@@ -0,0 +1,249 @@
+import type { UserRole } from "@fitai/shared";
+import { NextResponse } from "next/server";
+
+/**
+ * Check if a user can access data from a specific gym
+ *
+ * @param userRole - The role of the requesting user
+ * @param userGymId - The gym ID of the requesting user (null for superAdmin)
+ * @param targetGymId - The gym ID being accessed (undefined means all gyms)
+ * @returns true if access is allowed
+ *
+ * @example
+ * // SuperAdmin accessing any gym
+ * canAccessGym("superAdmin", null, "gym_123") // true
+ *
+ * // Admin accessing their own gym
+ * canAccessGym("admin", "gym_abc", "gym_abc") // true
+ *
+ * // Admin trying to access other gym
+ * canAccessGym("admin", "gym_abc", "gym_xyz") // false
+ */
+export function canAccessGym(
+  userRole: UserRole,
+  userGymId: string | null,
+  targetGymId: string | undefined,
+): boolean {
+  // SuperAdmin can access any gym
+  if (userRole === "superAdmin") {
+    return true;
+  }
+
+  // If no target gym specified, allow access to own gym
+  if (targetGymId === undefined) {
+    return true;
+  }
+
+  // Non-superAdmins must have a gymId
+  if (!userGymId) {
+    return false;
+  }
+
+  // Must match the gym
+  return userGymId === targetGymId;
+}
+
+/**
+ * Check if a user can manage (create/update/delete) another user
+ * Based on role hierarchy and gym membership
+ *
+ * @param requesterRole - Role of the user making the request
+ * @param requesterGymId - Gym ID of the requesting user
+ * @param targetRole - Role of the user being managed
+ * @param targetGymId - Gym ID of the user being managed
+ * @returns true if management is allowed
+ *
+ * @example
+ * // SuperAdmin can manage anyone
+ * canManageUser("superAdmin", null, "admin", "gym_abc") // true
+ *
+ * // Admin can manage trainers and clients in their gym
+ * canManageUser("admin", "gym_abc", "trainer", "gym_abc") // true
+ * canManageUser("admin", "gym_abc", "client", "gym_abc") // true
+ *
+ * // Admin cannot manage users in other gyms
+ * canManageUser("admin", "gym_abc", "trainer", "gym_xyz") // false
+ *
+ * // Trainer can manage clients in their gym
+ * canManageUser("trainer", "gym_abc", "client", "gym_abc") // true
+ */
+export function canManageUser(
+  requesterRole: UserRole,
+  requesterGymId: string | null,
+  targetRole: UserRole,
+  targetGymId: string | null,
+): boolean {
+  // SuperAdmin can manage anyone
+  if (requesterRole === "superAdmin") {
+    return true;
+  }
+
+  // Role hierarchy: admin > trainer > client
+  const roleHierarchy: Record<UserRole, number> = {
+    superAdmin: 4,
+    admin: 3,
+    trainer: 2,
+    client: 1,
+  };
+
+  const requesterLevel = roleHierarchy[requesterRole];
+  const targetLevel = roleHierarchy[targetRole];
+
+  // Cannot manage users at same or higher level
+  if (requesterLevel <= targetLevel) {
+    return false;
+  }
+
+  // Must have gym access
+  if (!requesterGymId) {
+    return false;
+  }
+
+  // For admin/trainer, target must be in same gym
+  if (requesterRole === "admin" || requesterRole === "trainer") {
+    return requesterGymId === targetGymId;
+  }
+
+  return false;
+}
+
+/**
+ * Check if a trainer can access a specific client's data
+ * Trainer must be assigned to that client via trainerClients table
+ *
+ * @param trainerGymId - Gym ID of the trainer
+ * @param clientGymId - Gym ID of the client
+ * @returns true if in same gym
+ *
+ * @note In a more complex system, this would query trainerClients table
+ * For now, we use gym-based access (trainer and client in same gym)
+ */
+export function canTrainerAccessClient(
+  trainerGymId: string | null,
+  clientGymId: string | null,
+): boolean {
+  if (!trainerGymId || !clientGymId) {
+    return false;
+  }
+  return trainerGymId === clientGymId;
+}
+
+/**
+ * Get the roles that a specific role can invite
+ * Based on role hierarchy
+ *
+ * @param role - The role wanting to invite
+ * @returns Array of roles that can be invited
+ *
+ * @example
+ * getInvitableRoles("superAdmin") // ["admin", "trainer", "client"]
+ * getInvitableRoles("admin")      // ["trainer", "client"]
+ * getInvitableRoles("trainer")    // ["client"]
+ * getInvitableRoles("client")     // []
+ */
+export function getInvitableRoles(role: UserRole): UserRole[] {
+  const invitationRules: Record<UserRole, UserRole[]> = {
+    superAdmin: ["admin", "trainer", "client"],
+    admin: ["trainer", "client"],
+    trainer: ["client"],
+    client: [],
+  };
+
+  return invitationRules[role] ?? [];
+}
+
+/**
+ * Validate gym access and return error response if denied
+ * Use this in API routes to enforce gym-based access control
+ *
+ * @param request - NextRequest for getting query params
+ * @param userRole - Current user's role
+ * @param userGymId - Current user's gym ID
+ * @param targetGymId - Gym being accessed (optional)
+ * @returns NextResponse if denied, undefined if allowed
+ *
+ * @example
+ * export async function GET(request: NextRequest) {
+ *   const error = await validateGymAccess(request, role, gymId);
+ *   if (error) return error;
+ *   // ... proceed
+ * }
+ */
+export function validateGymAccess(
+  userRole: UserRole,
+  userGymId: string | null,
+  targetGymId?: string,
+): NextResponse | undefined {
+  if (!canAccessGym(userRole, userGymId, targetGymId)) {
+    return NextResponse.json(
+      { error: "Forbidden - Cannot access this gym's data" },
+      { status: 403 },
+    );
+  }
+  return undefined;
+}
+
+/**
+ * Get filter condition for gym-scoped queries
+ * Returns appropriate filter based on user role
+ *
+ * @param userRole - Current user's role
+ * @param userGymId - Current user's gym ID
+ * @returns Filter object or undefined (no filter = all gyms)
+ *
+ * @example
+ * // For superAdmin: returns undefined (no filter)
+ * getGymFilter("superAdmin", null) // undefined
+ *
+ * // For admin: returns { gymId: "gym_abc" }
+ * getGymFilter("admin", "gym_abc") // { gymId: "gym_abc" }
+ */
+export function getGymFilter(
+  userRole: UserRole,
+  userGymId: string | null,
+): { gymId: string } | undefined {
+  // SuperAdmin sees all gyms
+  if (userRole === "superAdmin") {
+    return undefined;
+  }
+
+  // Other roles filtered by their gym
+  if (userGymId) {
+    return { gymId: userGymId };
+  }
+
+  // No gym assigned - return filter that matches nothing
+  return { gymId: "" };
+}
+
+/**
+ * Get all gym IDs a user can access
+ * SuperAdmin gets all gyms, others get only their own
+ *
+ * @param userRole - Current user's role
+ * @param userGymId - Current user's gym ID
+ * @param allGymIds - List of all gym IDs in system (for superAdmin)
+ * @returns Array of accessible gym IDs
+ *
+ * @example
+ * getAccessibleGymIds("admin", "gym_abc", ["gym_abc", "gym_xyz"])
+ * // Returns: ["gym_abc"]
+ *
+ * getAccessibleGymIds("superAdmin", null, ["gym_abc", "gym_xyz"])
+ * // Returns: ["gym_abc", "gym_xyz"]
+ */
+export function getAccessibleGymIds(
+  userRole: UserRole,
+  userGymId: string | null,
+  allGymIds: string[],
+): string[] {
+  if (userRole === "superAdmin") {
+    return allGymIds;
+  }
+
+  if (userGymId) {
+    return [userGymId];
+  }
+
+  return [];
+}

apps/admin/src/lib/gym-context.ts

@@ -0,0 +1,149 @@
+import { getDatabase } from "@/lib/database";
+
+/**
+ * Get users filtered by gym ID
+ *
+ * @param gymId - Gym ID to filter by (undefined returns all users for superAdmin)
+ * @returns Array of users in the gym
+ */
+export async function getUsersByGym(gymId?: string) {
+  const db = await getDatabase();
+  const allUsers = await db.getAllUsers();
+
+  if (!gymId) {
+    return allUsers;
+  }
+
+  return allUsers.filter((u) => u.gymId === gymId);
+}
+
+/**
+ * Get clients filtered by gym ID
+ *
+ * @param gymId - Gym ID to filter by
+ * @returns Array of clients in the gym
+ */
+export async function getClientsByGym(gymId: string) {
+  const db = await getDatabase();
+  const allUsers = await db.getAllUsers();
+  const allClients = await db.getAllClients();
+
+  const gymClientUserIds = allUsers
+    .filter((u) => u.gymId === gymId && u.role === "client")
+    .map((u) => u.id);
+
+  if (gymClientUserIds.length === 0) {
+    return [];
+  }
+
+  return allClients.filter((c) => gymClientUserIds.includes(c.userId));
+}
+
+/**
+ * Get trainers filtered by gym ID
+ *
+ * @param gymId - Gym ID to filter by
+ * @returns Array of trainers in the gym
+ */
+export async function getTrainersByGym(gymId: string) {
+  const db = await getDatabase();
+  const allUsers = await db.getAllUsers();
+
+  return allUsers.filter((u) => u.gymId === gymId && u.role === "trainer");
+}
+
+/**
+ * Get attendance filtered by gym ID
+ *
+ * @param gymId - Gym ID to filter by
+ * @returns Array of attendance records in the gym
+ */
+export async function getAttendanceByGym(gymId: string) {
+  const db = await getDatabase();
+  const allUsers = await db.getAllUsers();
+  const allAttendance = await db.getAllAttendance();
+
+  const gymUserIds = allUsers.filter((u) => u.gymId === gymId).map((u) => u.id);
+
+  if (gymUserIds.length === 0) {
+    return [];
+  }
+
+  return allAttendance.filter((a) => gymUserIds.includes(a.userId));
+}
+
+/**
+ * Get recommendations filtered by gym ID
+ *
+ * @param gymId - Gym ID to filter by
+ * @returns Array of recommendations in the gym
+ */
+export async function getRecommendationsByGym(gymId: string) {
+  const db = await getDatabase();
+  const allUsers = await db.getAllUsers();
+  const allRecommendations = await db.getAllRecommendations();
+
+  const gymUserIds = allUsers.filter((u) => u.gymId === gymId).map((u) => u.id);
+
+  if (gymUserIds.length === 0) {
+    return [];
+  }
+
+  return allRecommendations.filter((r) => gymUserIds.includes(r.userId));
+}
+
+/**
+ * Get fitness profiles filtered by gym ID
+ *
+ * @param gymId - Gym ID to filter by
+ * @returns Array of fitness profiles in the gym
+ */
+export async function getFitnessProfilesByGym(gymId: string) {
+  const db = await getDatabase();
+  const allUsers = await db.getAllUsers();
+  const allProfiles = await db.getAllFitnessProfiles();
+
+  const gymUserIds = allUsers.filter((u) => u.gymId === gymId).map((u) => u.id);
+
+  if (gymUserIds.length === 0) {
+    return [];
+  }
+
+  return allProfiles.filter((p) => gymUserIds.includes(p.userId));
+}
+
+/**
+ * Get fitness goals filtered by gym ID
+ *
+ * @param gymId - Gym ID to filter by
+ * @returns Array of fitness goals in the gym
+ */
+export async function getFitnessGoalsByGym(gymId: string) {
+  const db = await getDatabase();
+  const allUsers = await db.getAllUsers();
+
+  const gymUserIds = allUsers.filter((u) => u.gymId === gymId).map((u) => u.id);
+
+  if (gymUserIds.length === 0) {
+    return [];
+  }
+
+  const allGoals: any[] = [];
+  for (const userId of gymUserIds) {
+    const goals = await db.getFitnessGoalsByUserId(userId);
+    allGoals.push(...goals);
+  }
+
+  return allGoals.sort(
+    (a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(),
+  );
+}
+
+/**
+ * Get user by ID and check if they belong to a specific gym
+ */
+export async function getUserGymId(userId: string): Promise<string | null> {
+  const db = await getDatabase();
+  const user = await db.getUserById(userId);
+  return user?.gymId ?? null;
+}

apps/admin/src/lib/migrations/fix-gym-assignments.js

@@ -0,0 +1,138 @@
+/**
+ * Migration Script: Fix gym assignments for users without gymId
+ *
+ * This script:
+ * 1. Finds all users with null gymId
+ * 2. For admins: Assigns them to gym where they are adminUserId
+ * 3. For trainers: Gets gymId from their trainerClients records
+ * 4. For clients: Gets gymId from trainerClients or leaves as null for manual review
+ *
+ * Run with: node apps/admin/src/lib/migrations/fix-gym-assignments.js
+ *
+ * Note: Run this AFTER setting up the database, before starting the app
+ */
+
+const Database = require("better-sqlite3");
+
+// Use absolute path to the database - this is where the app stores data
+const dbPath = "/home/echo/dev/prototype/apps/admin/data/fitai.db";
+
+function fixGymAssignments() {
+  console.log("Starting gym assignment migration...\n");
+  console.log(`Database path: ${dbPath}\n`);
+
+  const db = new Database(dbPath);
+
+  // Step 1: Find all users without gymId
+  const usersWithoutGym = db
+    .prepare(
+      `
+    SELECT id, email, role FROM users WHERE gym_id IS NULL
+  `,
+    )
+    .all();
+
+  console.log(`Found ${usersWithoutGym.length} users without gymId`);
+
+  let adminsFixed = 0;
+  let trainersFixed = 0;
+  let clientsFixed = 0;
+  const unableToFix = [];
+
+  for (const user of usersWithoutGym) {
+    try {
+      if (user.role === "admin") {
+        // Find gym where this user is admin
+        const gym = db
+          .prepare(
+            `
+          SELECT id, name FROM gyms WHERE admin_user_id = ?
+        `,
+          )
+          .get(user.id);
+
+        if (gym) {
+          db.prepare(
+            `
+            UPDATE users SET gym_id = ? WHERE id = ?
+          `,
+          ).run(gym.id, user.id);
+
+          console.log(`  ✓ Fixed admin ${user.email} -> gym ${gym.name}`);
+          adminsFixed++;
+        } else {
+          unableToFix.push(`Admin ${user.email} (no gym found)`);
+        }
+      } else if (user.role === "trainer") {
+        // Get gym from trainerClients
+        const tc = db
+          .prepare(
+            `
+          SELECT gym_id FROM trainer_clients WHERE trainer_user_id = ? LIMIT 1
+        `,
+          )
+          .get(user.id);
+
+        if (tc) {
+          db.prepare(
+            `
+            UPDATE users SET gym_id = ? WHERE id = ?
+          `,
+          ).run(tc.gym_id, user.id);
+
+          console.log(`  ✓ Fixed trainer ${user.email} -> gym ${tc.gym_id}`);
+          trainersFixed++;
+        } else {
+          unableToFix.push(`Trainer ${user.email} (no trainerClients record)`);
+        }
+      } else if (user.role === "client") {
+        // Get gym from trainerClients
+        const tc = db
+          .prepare(
+            `
+          SELECT gym_id FROM trainer_clients WHERE client_user_id = ? LIMIT 1
+        `,
+          )
+          .get(user.id);
+
+        if (tc) {
+          db.prepare(
+            `
+            UPDATE users SET gym_id = ? WHERE id = ?
+          `,
+          ).run(tc.gym_id, user.id);
+
+          console.log(`  ✓ Fixed client ${user.email} -> gym ${tc.gym_id}`);
+          clientsFixed++;
+        } else {
+          unableToFix.push(`Client ${user.email} (no trainer assignment)`);
+        }
+      }
+    } catch (error) {
+      console.error(`  ✗ Error fixing user ${user.email}:`, error.message);
+      unableToFix.push(`User ${user.email} (error: ${error.message})`);
+    }
+  }
+
+  db.close();
+
+  console.log("\n=== Migration Summary ===");
+  console.log(`Admins fixed: ${adminsFixed}`);
+  console.log(`Trainers fixed: ${trainersFixed}`);
+  console.log(`Clients fixed: ${clientsFixed}`);
+  console.log(`Unable to fix: ${unableToFix.length}`);
+
+  if (unableToFix.length > 0) {
+    console.log("\nUsers requiring manual review:");
+    unableToFix.forEach((u) => console.log(`  - ${u}`));
+  }
+
+  console.log("\nMigration complete!");
+}
+
+// Run if called directly
+if (require.main === module) {
+  fixGymAssignments();
+}
+
+module.exports = { fixGymAssignments };

apps/admin/src/lib/validation/schemas.ts

@@ -15,8 +15,10 @@ export const passwordSchema = z
 
 export const phoneSchema = z
   .string()
-  .regex(/^\+?[1-9]\d{1,14}$/, "Invalid phone number format")
-  .optional();
+  .optional()
+  .refine((val) => !val || /^\+?[1-9]\d{1,14}$/.test(val), {
+    message: "Invalid phone number format",
+  });
 
 export const dateTimeSchema = z.string().datetime("Invalid datetime format");
 

apps/mobile/src/app/(auth)/onboarding.tsx

@@ -96,9 +96,13 @@ export default function OnboardingScreen() {
 
       const fitnessData = {
         userId: user.id,
-        height: parseFloat(fitnessProfile.height),
-        weight: parseFloat(fitnessProfile.weight),
-        age: parseInt(fitnessProfile.age),
+        height: fitnessProfile.height
+          ? parseFloat(fitnessProfile.height)
+          : undefined,
+        weight: fitnessProfile.weight
+          ? parseFloat(fitnessProfile.weight)
+          : undefined,
+        age: fitnessProfile.age ? parseInt(fitnessProfile.age, 10) : undefined,
         fitnessGoals: fitnessProfile.goals ? [fitnessProfile.goals] : [],
         medicalConditions: fitnessProfile.medicalConditions || undefined,
         allergies: fitnessProfile.dietaryRestrictions || undefined,

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

@@ -7,46 +7,28 @@ import {
   ScrollView,
   Alert,
 } from "react-native";
-import { useState, useEffect, useRef } from "react";
+import { useState, useEffect } from "react";
 import { useAuth } from "@clerk/clerk-expo";
-import { LinearGradient } from "expo-linear-gradient";
 import { Ionicons } from "@expo/vector-icons";
+import { useTheme } from "../../contexts/ThemeContext";
+import { MinimalCard } from "../../components/MinimalCard";
+import { SectionHeader } from "../../components/SectionHeader";
+import { MinimalButton } from "../../components/MinimalButton";
+import { Badge } from "../../components/Badge";
+import { IconContainer } from "../../components/IconContainer";
 import { attendanceApi, Attendance } from "../../api/attendance";
 import { AttendanceCalendar } from "../../components/AttendanceCalendar";
 import { useStatistics } from "../../contexts/StatisticsContext";
-import { theme } from "../../styles/theme";
-import { Animated } from "react-native";
 import { getErrorMessage } from "../../utils/error-helpers";
 import log from "../../utils/logger";
 
 export default function AttendanceScreen() {
   const { getToken, userId } = useAuth();
+  const { colors, typography } = useTheme();
   const { clearCache: clearStatisticsCache } = useStatistics();
   const [loading, setLoading] = useState(true);
   const [activeCheckIn, setActiveCheckIn] = useState<Attendance | null>(null);
   const [history, setHistory] = useState<Attendance[]>([]);
-  const pulseAnim = useRef(new Animated.Value(1)).current;
-
-  useEffect(() => {
-    if (activeCheckIn) {
-      const pulse = Animated.loop(
-        Animated.sequence([
-          Animated.timing(pulseAnim, {
-            toValue: 1.05,
-            duration: 1000,
-            useNativeDriver: true,
-          }),
-          Animated.timing(pulseAnim, {
-            toValue: 1,
-            duration: 1000,
-            useNativeDriver: true,
-          }),
-        ]),
-      );
-      pulse.start();
-      return () => pulse.stop();
-    }
-  }, [activeCheckIn]);
 
   const fetchAttendance = async () => {
     try {
@@ -82,10 +64,7 @@ export default function AttendanceScreen() {
       if (!token) return;
 
       await attendanceApi.checkIn("gym", token);
-
-      // Clear statistics cache to force refresh on home screen
       clearStatisticsCache();
-
       fetchAttendance();
       Alert.alert("Success", "Checked in successfully!");
     } catch (error: unknown) {
@@ -100,10 +79,7 @@ export default function AttendanceScreen() {
       if (!token) return;
 
       await attendanceApi.checkOut(token);
-
-      // Clear statistics cache to force refresh on home screen
       clearStatisticsCache();
-
       fetchAttendance();
       Alert.alert("Success", "Checked out successfully!");
     } catch (error: unknown) {
@@ -114,143 +90,204 @@ export default function AttendanceScreen() {
 
   if (loading && !history.length) {
     return (
-      <View style={styles.centered}>
-        <ActivityIndicator size="large" color={theme.colors.primary} />
+      <View style={[styles.centered, { backgroundColor: colors.background }]}>
+        <ActivityIndicator size="large" color={colors.primary} />
       </View>
     );
   }
 
   return (
-    <ScrollView style={styles.container} contentContainerStyle={styles.content}>
-      <LinearGradient
-        colors={theme.gradients.primary}
-        start={{ x: 0, y: 0 }}
-        end={{ x: 1, y: 1 }}
-        style={styles.header}
-      >
-        <Text style={styles.title}>Attendance</Text>
-        <Text style={styles.subtitle}>Track your gym visits</Text>
-      </LinearGradient>
+    <ScrollView
+      style={[styles.container, { backgroundColor: colors.background }]}
+      contentContainerStyle={styles.content}
+    >
+      {/* Header */}
+      <View style={styles.header}>
+        <Text
+          style={[typography.h1, { color: colors.textPrimary, fontSize: 32 }]}
+        >
+          Attendance
+        </Text>
+        <Text
+          style={[
+            typography.body,
+            { color: colors.textSecondary, marginTop: 8 },
+          ]}
+        >
+          {activeCheckIn
+            ? "You're crushing it today!"
+            : history.length === 0
+              ? "Ready to start your fitness journey?"
+              : "Track your gym visits and build streaks!"}
+        </Text>
+      </View>
 
-      <View style={styles.actionContainer}>
+      {/* Check In/Out Section */}
+      <View style={styles.section}>
         {activeCheckIn ? (
-          <LinearGradient
-            colors={["rgba(16, 185, 129, 0.15)", "rgba(5, 150, 105, 0.1)"]}
-            style={[styles.activeCard, theme.shadows.medium]}
-          >
-            <View style={styles.activeCardContent}>
-              <View style={styles.activeIconContainer}>
-                <LinearGradient
-                  colors={theme.gradients.success}
-                  style={styles.activeIcon}
+          <MinimalCard variant="bordered" style={styles.activeCard}>
+            <View style={styles.activeHeader}>
+              <View style={styles.activeHeaderLeft}>
+                <IconContainer
+                  variant="colored"
+                  backgroundColor={`${colors.success}20`}
+                  size="lg"
                 >
-                  <Ionicons name="checkmark-circle" size={32} color="#fff" />
-                </LinearGradient>
-              </View>
-              <View style={styles.activeTextContainer}>
-                <Text style={styles.activeText}>Currently Checked In</Text>
-                <Text style={styles.timeText}>
-                  Since{" "}
-                  {new Date(activeCheckIn.checkInTime).toLocaleTimeString([], {
-                    hour: "2-digit",
-                    minute: "2-digit",
-                  })}
-                </Text>
+                  <Ionicons
+                    name="checkmark-circle"
+                    size={28}
+                    color={colors.success}
+                  />
+                </IconContainer>
+                <View style={{ marginLeft: 12 }}>
+                  <Text style={[typography.h3, { color: colors.textPrimary }]}>
+                    ✅ Currently Checked In
+                  </Text>
+                  <Text
+                    style={[
+                      typography.caption,
+                      { color: colors.textTertiary, marginTop: 2 },
+                    ]}
+                  >
+                    Since{" "}
+                    {new Date(activeCheckIn.checkInTime).toLocaleTimeString(
+                      [],
+                      {
+                        hour: "2-digit",
+                        minute: "2-digit",
+                      },
+                    )}
+                  </Text>
+                </View>
               </View>
             </View>
-            <TouchableOpacity onPress={handleCheckOut} activeOpacity={0.8}>
-              <LinearGradient
-                colors={theme.gradients.danger}
-                start={{ x: 0, y: 0 }}
-                end={{ x: 1, y: 0 }}
-                style={[styles.checkOutButton, theme.shadows.medium]}
-              >
-                <Ionicons
-                  name="log-out-outline"
-                  size={20}
-                  color="#fff"
-                  style={{ marginRight: 8 }}
-                />
-                <Text style={styles.buttonText}>Check Out</Text>
-              </LinearGradient>
-            </TouchableOpacity>
-          </LinearGradient>
+            <MinimalButton
+              title="Check Out"
+              onPress={handleCheckOut}
+              variant="danger"
+              size="lg"
+              style={{ marginTop: 16 }}
+            />
+          </MinimalCard>
         ) : (
-          <Animated.View style={{ transform: [{ scale: pulseAnim }] }}>
-            <TouchableOpacity onPress={handleCheckIn} activeOpacity={0.8}>
-              <LinearGradient
-                colors={theme.gradients.primary}
-                start={{ x: 0, y: 0 }}
-                end={{ x: 1, y: 0 }}
-                style={[styles.checkInButton, theme.shadows.glow]}
-              >
-                <Ionicons
-                  name="log-in-outline"
-                  size={24}
-                  color="#fff"
-                  style={{ marginRight: 8 }}
-                />
-                <Text style={styles.checkInButtonText}>Check In</Text>
-              </LinearGradient>
-            </TouchableOpacity>
-          </Animated.View>
+          <MinimalButton
+            title="💪 Check In"
+            onPress={handleCheckIn}
+            variant="primary"
+            size="lg"
+          />
         )}
       </View>
 
       {/* Attendance Calendar */}
-      {history.length > 0 && <AttendanceCalendar attendanceRecords={history} />}
+      <View style={styles.section}>
+        <SectionHeader title="📅 Calendar" />
+        <MinimalCard variant="default" style={{ borderRadius: 20 }}>
+          <AttendanceCalendar attendanceRecords={history} />
+        </MinimalCard>
+      </View>
 
-      <Text style={styles.sectionTitle}>Recent History</Text>
-      {history.map((item) => (
-        <LinearGradient
-          key={item.id}
-          colors={["rgba(255, 255, 255, 1)", "rgba(249, 250, 251, 1)"] as const}
-          style={[styles.historyItem, theme.shadows.medium]}
-        >
-          <View style={styles.historyLeft}>
-            <View style={styles.historyIconContainer}>
-              <LinearGradient
-                colors={
-                  item.checkOutTime
-                    ? theme.gradients.success
-                    : theme.gradients.primary
-                }
-                style={styles.historyIcon}
+      {/* Recent History */}
+      <View style={styles.section}>
+        <SectionHeader title="📊 Recent History" />
+        {history.length === 0 ? (
+          <MinimalCard variant="default" style={{ borderRadius: 20 }}>
+            <View style={styles.emptyState}>
+              <Text style={{ fontSize: 64 }}>📍</Text>
+              <Text
+                style={[
+                  typography.bodyEmphasis,
+                  { color: colors.textPrimary, marginTop: 16 },
+                ]}
               >
-                <Ionicons
-                  name={item.checkOutTime ? "checkmark" : "time-outline"}
-                  size={16}
-                  color="#fff"
-                />
-              </LinearGradient>
-            </View>
-            <View>
-              <Text style={styles.dateText}>
-                {new Date(item.checkInTime).toLocaleDateString()}
+                No attendance history yet
               </Text>
-              <Text style={styles.typeText}>{item.type.toUpperCase()}</Text>
-            </View>
-          </View>
-          <View style={styles.timeContainer}>
-            <Text style={styles.historyTime}>
-              In:{" "}
-              {new Date(item.checkInTime).toLocaleTimeString([], {
-                hour: "2-digit",
-                minute: "2-digit",
-              })}
-            </Text>
-            {item.checkOutTime && (
-              <Text style={styles.historyTime}>
-                Out:{" "}
-                {new Date(item.checkOutTime).toLocaleTimeString([], {
-                  hour: "2-digit",
-                  minute: "2-digit",
-                })}
+              <Text
+                style={[
+                  typography.body,
+                  {
+                    color: colors.textSecondary,
+                    marginTop: 8,
+                    textAlign: "center",
+                  },
+                ]}
+              >
+                Check in to start building your streak! 🔥
               </Text>
-            )}
+            </View>
+          </MinimalCard>
+        ) : (
+          <View style={styles.historyList}>
+            {history.slice(0, 10).map((record, index) => {
+              const checkIn = new Date(record.checkInTime);
+              const checkOut = record.checkOutTime
+                ? new Date(record.checkOutTime)
+                : null;
+              const duration = checkOut
+                ? Math.round((checkOut.getTime() - checkIn.getTime()) / 60000)
+                : null;
+
+              return (
+                <MinimalCard
+                  key={index}
+                  variant="bordered"
+                  style={{ borderRadius: 16 }}
+                >
+                  <View style={styles.historyItem}>
+                    <View style={styles.historyLeft}>
+                      <IconContainer
+                        variant="colored"
+                        backgroundColor={
+                          checkOut ? `${colors.success}20` : `${colors.info}20`
+                        }
+                      >
+                        <Ionicons
+                          name={checkOut ? "checkmark-done" : "time"}
+                          size={20}
+                          color={checkOut ? colors.success : colors.info}
+                        />
+                      </IconContainer>
+                      <View style={{ marginLeft: 12, flex: 1 }}>
+                        <Text
+                          style={[typography.h3, { color: colors.textPrimary }]}
+                        >
+                          {checkIn.toLocaleDateString()}
+                        </Text>
+                        <Text
+                          style={[
+                            typography.caption,
+                            { color: colors.textTertiary, marginTop: 2 },
+                          ]}
+                        >
+                          {checkIn.toLocaleTimeString([], {
+                            hour: "2-digit",
+                            minute: "2-digit",
+                          })}
+                          {checkOut &&
+                            ` - ${checkOut.toLocaleTimeString([], {
+                              hour: "2-digit",
+                              minute: "2-digit",
+                            })}`}
+                        </Text>
+                      </View>
+                    </View>
+                    {duration && (
+                      <Badge
+                        label={`${duration}m`}
+                        variant="neutral"
+                        size="sm"
+                      />
+                    )}
+                  </View>
+                </MinimalCard>
+              );
+            })}
           </View>
-        </LinearGradient>
-      ))}
+        )}
+      </View>
+
+      {/* Bottom Spacer */}
+      <View style={{ height: 100 }} />
     </ScrollView>
   );
 }
@@ -258,147 +295,54 @@ export default function AttendanceScreen() {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: theme.colors.background,
-  },
-  content: {
-    paddingBottom: 20,
   },
   centered: {
     flex: 1,
     justifyContent: "center",
     alignItems: "center",
   },
+  content: {
+    paddingBottom: 20,
+  },
   header: {
+    paddingHorizontal: 24,
     paddingTop: 60,
     paddingBottom: 24,
+  },
+  section: {
     paddingHorizontal: 24,
     marginBottom: 24,
-    borderBottomLeftRadius: theme.borderRadius.xl,
-    borderBottomRightRadius: theme.borderRadius.xl,
-  },
-  title: {
-    fontSize: theme.typography.fontSize["3xl"],
-    fontWeight: theme.typography.fontWeight.bold,
-    color: theme.colors.white,
-    marginBottom: 4,
-  },
-  subtitle: {
-    fontSize: theme.typography.fontSize.base,
-    color: "rgba(255, 255, 255, 0.9)",
-  },
-  actionContainer: {
-    marginBottom: 32,
-    paddingHorizontal: 20,
-  },
-  checkInButton: {
-    paddingVertical: 20,
-    paddingHorizontal: 24,
-    borderRadius: theme.borderRadius.xl,
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "center",
-  },
-  checkInButtonText: {
-    color: theme.colors.white,
-    fontSize: theme.typography.fontSize.xl,
-    fontWeight: theme.typography.fontWeight.semibold,
-  },
-  checkOutButton: {
-    paddingVertical: 14,
-    paddingHorizontal: 20,
-    borderRadius: theme.borderRadius.lg,
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "center",
-    marginTop: 16,
-  },
-  buttonText: {
-    color: theme.colors.white,
-    fontSize: theme.typography.fontSize.base,
-    fontWeight: theme.typography.fontWeight.semibold,
   },
   activeCard: {
     padding: 20,
-    borderRadius: theme.borderRadius.xl,
-    borderWidth: 1,
-    borderColor: "rgba(16, 185, 129, 0.2)",
+    borderRadius: 20,
   },
-  activeCardContent: {
+  activeHeader: {
     flexDirection: "row",
+    justifyContent: "space-between",
     alignItems: "center",
-    marginBottom: 16,
   },
-  activeIconContainer: {
-    marginRight: 16,
-  },
-  activeIcon: {
-    width: 56,
-    height: 56,
-    borderRadius: 28,
-    justifyContent: "center",
+  activeHeaderLeft: {
+    flexDirection: "row",
     alignItems: "center",
-  },
-  activeTextContainer: {
     flex: 1,
   },
-  activeText: {
-    fontSize: theme.typography.fontSize.lg,
-    fontWeight: theme.typography.fontWeight.semibold,
-    color: theme.colors.gray900,
-    marginBottom: 4,
-  },
-  timeText: {
-    fontSize: theme.typography.fontSize.sm,
-    color: theme.colors.gray600,
+  emptyState: {
+    alignItems: "center",
+    paddingVertical: 40,
+    paddingHorizontal: 20,
   },
-  sectionTitle: {
-    fontSize: theme.typography.fontSize.xl,
-    fontWeight: theme.typography.fontWeight.semibold,
-    marginBottom: 16,
-    paddingHorizontal: 20,
-    color: theme.colors.gray900,
+  historyList: {
+    gap: 12,
   },
   historyItem: {
-    padding: 16,
-    borderRadius: theme.borderRadius.xl,
-    marginBottom: 12,
-    marginHorizontal: 20,
     flexDirection: "row",
     justifyContent: "space-between",
     alignItems: "center",
-    borderWidth: 1,
-    borderColor: "rgba(59, 130, 246, 0.1)",
   },
   historyLeft: {
     flexDirection: "row",
     alignItems: "center",
-    gap: 12,
-  },
-  historyIconContainer: {
-    marginRight: 4,
-  },
-  historyIcon: {
-    width: 32,
-    height: 32,
-    borderRadius: 16,
-    justifyContent: "center",
-    alignItems: "center",
-  },
-  dateText: {
-    fontSize: theme.typography.fontSize.base,
-    fontWeight: theme.typography.fontWeight.semibold,
-    color: theme.colors.gray900,
-  },
-  typeText: {
-    fontSize: theme.typography.fontSize.xs,
-    color: theme.colors.gray600,
-    marginTop: 2,
-  },
-  timeContainer: {
-    alignItems: "flex-end",
-  },
-  historyTime: {
-    fontSize: theme.typography.fontSize.sm,
-    color: theme.colors.gray700,
+    flex: 1,
   },
 });

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

@@ -1,4 +1,4 @@
-import React, { useState, useCallback, useRef } from "react";
+import React, { useState, useCallback } from "react";
 import {
   View,
   Text,
@@ -6,27 +6,31 @@ import {
   ScrollView,
   RefreshControl,
   TouchableOpacity,
-  Animated,
   Alert,
 } from "react-native";
 import { Ionicons } from "@expo/vector-icons";
-import { LinearGradient } from "expo-linear-gradient";
-import { theme } from "../../styles/theme";
+import { useUser } from "@clerk/clerk-expo";
+import { useFocusEffect } from "expo-router";
+import * as SecureStore from "expo-secure-store";
+import { useTheme } from "../../contexts/ThemeContext";
+import { MinimalCard } from "../../components/MinimalCard";
+import { SectionHeader } from "../../components/SectionHeader";
+import { MinimalButton } from "../../components/MinimalButton";
+import { Badge } from "../../components/Badge";
+import { ProgressBar } from "../../components/ProgressBar";
 import { GoalProgressCard } from "../../components/GoalProgressCard";
 import { GoalCreationModal } from "../../components/GoalCreationModal";
 import { WeeklyProgressChart } from "../../components/WeeklyProgressChart";
 import { GoalTypeBreakdownChart } from "../../components/GoalTypeBreakdownChart";
-import { useUser } from "@clerk/clerk-expo";
 import type { FitnessGoal, CreateGoalData } from "../../services/fitnessGoals";
 import { useStatistics } from "../../contexts/StatisticsContext";
 import { useFitnessGoals } from "../../contexts/FitnessGoalsContext";
 import { useRecommendations } from "../../contexts/RecommendationsContext";
-import { useFocusEffect } from "expo-router";
-import * as SecureStore from "expo-secure-store";
 import log from "../../utils/logger";
 
 export default function GoalsScreen() {
   const { user } = useUser();
+  const { colors, typography } = useTheme();
   const {
     statistics,
     refetchStatistics,
@@ -45,10 +49,8 @@ export default function GoalsScreen() {
   const [refreshing, setRefreshing] = useState(false);
   const [isModalVisible, setIsModalVisible] = useState(false);
   const [showAnalytics, setShowAnalytics] = useState(false);
-  const fabScale = useRef(new Animated.Value(1)).current;
 
   const loadData = useCallback(async () => {
-    // Load goals and statistics (both cached)
     await refetchGoals();
     await refetchStatistics();
   }, [refetchGoals, refetchStatistics]);
@@ -64,7 +66,6 @@ export default function GoalsScreen() {
           style: "destructive",
           onPress: async () => {
             try {
-              // Clear all possible Clerk token keys
               const keysToDelete = [
                 "__clerk_client_jwt",
                 "__clerk_db_jwt",
@@ -82,7 +83,6 @@ export default function GoalsScreen() {
                 }
               }
 
-              // Clear all caches
               clearStatsCache();
               clearGoalsCache();
               clearRecommendationsCache();
@@ -128,183 +128,310 @@ export default function GoalsScreen() {
 
   const activeGoals = goals?.filter((g) => g.status === "active") || [];
   const completedGoals = goals?.filter((g) => g.status === "completed") || [];
+  const avgProgress =
+    activeGoals.length > 0
+      ? Math.round(
+          activeGoals.reduce((sum, g) => sum + (g.progress || 0), 0) /
+            activeGoals.length,
+        )
+      : 0;
 
   return (
-    <View style={styles.container}>
+    <View style={[styles.container, { backgroundColor: colors.background }]}>
       <ScrollView
         contentContainerStyle={styles.scrollContent}
         refreshControl={
           <RefreshControl
             refreshing={refreshing}
             onRefresh={onRefresh}
-            tintColor={theme.colors.primary}
+            tintColor={colors.primary}
           />
         }
       >
-        <LinearGradient colors={theme.gradients.primary} style={styles.header}>
-          <View style={styles.headerContent}>
-            <View>
-              <Text style={styles.headerTitle}>Fitness Goals</Text>
-              <Text style={styles.headerSubtitle}>
-                Track your fitness journey progress
-              </Text>
-            </View>
-            <TouchableOpacity
-              onPress={clearClerkCache}
-              style={styles.debugButton}
+        {/* Header */}
+        <View style={styles.header}>
+          <View style={{ flex: 1 }}>
+            <Text
+              style={[
+                typography.h1,
+                { color: colors.textPrimary, fontSize: 32 },
+              ]}
             >
-              <Ionicons name="refresh-circle-outline" size={24} color="#fff" />
-            </TouchableOpacity>
+              Goals
+            </Text>
+            <Text
+              style={[
+                typography.body,
+                { color: colors.textSecondary, marginTop: 8 },
+              ]}
+            >
+              {activeGoals.length === 0
+                ? "Ready to crush some goals?"
+                : activeGoals.length === 1
+                  ? "You're on a mission! Keep it up!"
+                  : `${activeGoals.length} goals in progress. Let's go!`}
+            </Text>
           </View>
-        </LinearGradient>
+          <TouchableOpacity
+            onPress={clearClerkCache}
+            style={styles.debugButton}
+          >
+            <Ionicons
+              name="refresh-circle-outline"
+              size={24}
+              color={colors.textTertiary}
+            />
+          </TouchableOpacity>
+        </View>
 
         {/* Stats Summary */}
         {goals && goals.length > 0 && (
-          <View style={styles.statsContainer}>
-            <View style={styles.statCard}>
-              <Text style={styles.statValue}>{activeGoals.length}</Text>
-              <Text style={styles.statLabel}>Active</Text>
-            </View>
-            <View style={styles.statCard}>
-              <Text style={styles.statValue}>{completedGoals.length}</Text>
-              <Text style={styles.statLabel}>Completed</Text>
-            </View>
-            <View style={styles.statCard}>
-              <Text style={styles.statValue}>
-                {activeGoals.length > 0
-                  ? Math.round(
-                      activeGoals.reduce(
-                        (sum, g) => sum + (g.progress || 0),
-                        0,
-                      ) / activeGoals.length,
-                    )
-                  : 0}
-                %
-              </Text>
-              <Text style={styles.statLabel}>Avg Progress</Text>
+          <View style={styles.section}>
+            <View style={styles.statsRow}>
+              <MinimalCard
+                variant="elevated"
+                style={[styles.statCard, { backgroundColor: colors.primary }]}
+              >
+                <Text
+                  style={[
+                    typography.statLarge,
+                    { color: colors.white, fontSize: 36 },
+                  ]}
+                >
+                  {activeGoals.length}
+                </Text>
+                <Text
+                  style={[
+                    typography.label,
+                    { color: "rgba(255,255,255,0.8)", marginTop: 4 },
+                  ]}
+                >
+                  ACTIVE
+                </Text>
+              </MinimalCard>
+
+              <MinimalCard
+                variant="elevated"
+                style={[styles.statCard, { backgroundColor: colors.success }]}
+              >
+                <Text
+                  style={[
+                    typography.statLarge,
+                    { color: colors.white, fontSize: 36 },
+                  ]}
+                >
+                  {completedGoals.length}
+                </Text>
+                <Text
+                  style={[
+                    typography.label,
+                    { color: "rgba(255,255,255,0.8)", marginTop: 4 },
+                  ]}
+                >
+                  COMPLETED
+                </Text>
+              </MinimalCard>
+
+              <MinimalCard
+                variant="elevated"
+                style={[styles.statCard, { backgroundColor: colors.accent }]}
+              >
+                <Text
+                  style={[
+                    typography.statLarge,
+                    { color: colors.white, fontSize: 36 },
+                  ]}
+                >
+                  {avgProgress}%
+                </Text>
+                <Text
+                  style={[
+                    typography.label,
+                    { color: "rgba(255,255,255,0.8)", marginTop: 4 },
+                  ]}
+                >
+                  PROGRESS
+                </Text>
+              </MinimalCard>
             </View>
           </View>
         )}
 
         {/* Analytics Section */}
-        {statistics && (
-          <View style={styles.analyticsSection}>
-            <TouchableOpacity
-              style={styles.analyticsHeader}
-              onPress={() => setShowAnalytics(!showAnalytics)}
-            >
-              <View style={styles.analyticsHeaderLeft}>
-                <Ionicons
-                  name="bar-chart-outline"
-                  size={20}
-                  color={theme.colors.primary}
-                />
-                <Text style={styles.analyticsTitle}>Progress Analytics</Text>
-              </View>
-              <Ionicons
-                name={showAnalytics ? "chevron-up" : "chevron-down"}
-                size={20}
-                color={theme.colors.gray400}
-              />
-            </TouchableOpacity>
+        {statistics &&
+          (statistics.weeklyTrend.length > 0 ||
+            statistics.goals.goalsByType.length > 0) && (
+            <View style={styles.section}>
+              <TouchableOpacity
+                onPress={() => setShowAnalytics(!showAnalytics)}
+                activeOpacity={0.85}
+              >
+                <MinimalCard variant="elevated" style={styles.analyticsCard}>
+                  <View style={styles.analyticsHeader}>
+                    <View style={styles.analyticsHeaderLeft}>
+                      <View
+                        style={[
+                          styles.analyticsIcon,
+                          { backgroundColor: `${colors.primary}15` },
+                        ]}
+                      >
+                        <Ionicons
+                          name="bar-chart"
+                          size={24}
+                          color={colors.primary}
+                        />
+                      </View>
+                      <View>
+                        <Text
+                          style={[typography.h3, { color: colors.textPrimary }]}
+                        >
+                          Progress Analytics
+                        </Text>
+                        <Text
+                          style={[
+                            typography.caption,
+                            { color: colors.textTertiary, marginTop: 2 },
+                          ]}
+                        >
+                          {showAnalytics ? "Tap to collapse" : "Tap to expand"}
+                        </Text>
+                      </View>
+                    </View>
+                    <View
+                      style={[
+                        styles.analyticsToggle,
+                        { backgroundColor: colors.surfaceElevated },
+                      ]}
+                    >
+                      <Ionicons
+                        name={showAnalytics ? "chevron-up" : "chevron-down"}
+                        size={20}
+                        color={colors.textSecondary}
+                      />
+                    </View>
+                  </View>
 
-            {showAnalytics && (
-              <View style={styles.analyticsContent}>
-                {statistics.weeklyTrend.length > 0 && (
-                  <WeeklyProgressChart
-                    weeklyData={statistics.weeklyTrend}
-                    title="8-Week Trend"
-                  />
-                )}
-                {statistics.goals.goalsByType.length > 0 && (
-                  <GoalTypeBreakdownChart
-                    data={statistics.goals.goalsByType}
-                    title="Goals by Type"
-                  />
-                )}
-              </View>
-            )}
-          </View>
-        )}
+                  {showAnalytics && (
+                    <View style={styles.analyticsContent}>
+                      {statistics.weeklyTrend.length > 0 && (
+                        <View style={styles.chartSection}>
+                          <Text
+                            style={[
+                              typography.h4,
+                              { color: colors.textPrimary, marginBottom: 16 },
+                            ]}
+                          >
+                            Weekly Trend
+                          </Text>
+                          <WeeklyProgressChart
+                            weeklyData={statistics.weeklyTrend}
+                          />
+                        </View>
+                      )}
+                      {statistics.goals.goalsByType.length > 0 && (
+                        <View style={styles.chartSection}>
+                          <Text
+                            style={[
+                              typography.h4,
+                              { color: colors.textPrimary, marginBottom: 16 },
+                            ]}
+                          >
+                            Goals by Type
+                          </Text>
+                          <GoalTypeBreakdownChart
+                            data={statistics.goals.goalsByType}
+                          />
+                        </View>
+                      )}
+                    </View>
+                  )}
+                </MinimalCard>
+              </TouchableOpacity>
+            </View>
+          )}
 
         {/* Active Goals */}
         <View style={styles.section}>
-          <Text style={styles.sectionTitle}>
-            Active Goals ({activeGoals.length})
-          </Text>
+          <SectionHeader
+            title={`Active Goals (${activeGoals.length})`}
+            subtitle="Keep pushing forward!"
+            actionLabel="+ Add New"
+            onActionPress={() => setIsModalVisible(true)}
+          />
           {activeGoals.length === 0 ? (
-            <View style={styles.emptyState}>
-              <Ionicons name="flag-outline" size={48} color="#d1d5db" />
-              <Text style={styles.emptyText}>No active goals yet</Text>
-              <Text style={styles.emptySubtext}>
-                Tap the + button to create your first goal
-              </Text>
-            </View>
+            <MinimalCard variant="default">
+              <View style={styles.emptyState}>
+                <Text style={{ fontSize: 64 }}>🎯</Text>
+                <Text
+                  style={[
+                    typography.bodyEmphasis,
+                    { color: colors.textSecondary, marginTop: 12 },
+                  ]}
+                >
+                  No active goals yet
+                </Text>
+                <Text
+                  style={[
+                    typography.caption,
+                    { color: colors.textTertiary, marginTop: 4 },
+                  ]}
+                >
+                  Tap "Add New" to set your first goal! 💪
+                </Text>
+              </View>
+            </MinimalCard>
           ) : (
-            activeGoals.map((goal) => (
-              <GoalProgressCard
-                key={goal.id}
-                goal={goal}
-                onComplete={() => handleCompleteGoal(goal)}
-                onDelete={() => handleDeleteGoal(goal.id)}
-              />
-            ))
+            <View style={styles.goalsList}>
+              {activeGoals.map((goal) => (
+                <GoalProgressCard
+                  key={goal.id}
+                  goal={goal}
+                  onComplete={() => handleCompleteGoal(goal)}
+                  onDelete={() => handleDeleteGoal(goal.id)}
+                />
+              ))}
+            </View>
           )}
         </View>
 
         {/* Completed Goals */}
         {completedGoals.length > 0 && (
           <View style={styles.section}>
-            <Text style={styles.sectionTitle}>
-              Completed Goals ({completedGoals.length})
-            </Text>
-            {completedGoals.map((goal) => (
-              <GoalProgressCard
-                key={goal.id}
-                goal={goal}
-                onDelete={() => handleDeleteGoal(goal.id)}
-              />
-            ))}
+            <SectionHeader
+              title={`Completed (${completedGoals.length})`}
+              subtitle="Great work!"
+            />
+            <View style={styles.goalsList}>
+              {completedGoals.map((goal) => (
+                <GoalProgressCard
+                  key={goal.id}
+                  goal={goal}
+                  onDelete={() => handleDeleteGoal(goal.id)}
+                />
+              ))}
+            </View>
           </View>
         )}
 
         <View style={styles.footer} />
       </ScrollView>
 
-      {/* Floating Action Button */}
-      <Animated.View
-        style={[styles.fabContainer, { transform: [{ scale: fabScale }] }]}
-      >
+      {/* Floating Action Button - Minimal Style */}
+      <View style={styles.fabContainer}>
         <TouchableOpacity
           onPress={() => setIsModalVisible(true)}
-          onPressIn={() => {
-            Animated.spring(fabScale, {
-              toValue: 0.9,
-              friction: 8,
-              tension: 100,
-              useNativeDriver: true,
-            }).start();
-          }}
-          onPressOut={() => {
-            Animated.spring(fabScale, {
-              toValue: 1,
-              friction: 8,
-              tension: 100,
-              useNativeDriver: true,
-            }).start();
-          }}
-          activeOpacity={0.9}
+          activeOpacity={0.8}
+          style={[
+            styles.fab,
+            {
+              backgroundColor: colors.primary,
+              shadowColor: colors.primary,
+            },
+          ]}
         >
-          <LinearGradient
-            colors={theme.gradients.primary}
-            start={{ x: 0, y: 0 }}
-            end={{ x: 1, y: 1 }}
-            style={styles.fab}
-          >
-            <Ionicons name="add" size={28} color="#fff" />
-          </LinearGradient>
+          <Ionicons name="add" size={28} color={colors.white} />
         </TouchableOpacity>
-      </Animated.View>
+      </View>
 
       {/* Create Goal Modal */}
       <GoalCreationModal
@@ -319,129 +446,96 @@ export default function GoalsScreen() {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: theme.colors.background,
   },
   scrollContent: {
     paddingBottom: 20,
   },
   header: {
-    padding: 24,
-    paddingTop: 60,
-    paddingBottom: 24,
-    marginBottom: 10,
-    borderBottomLeftRadius: theme.borderRadius.xl,
-    borderBottomRightRadius: theme.borderRadius.xl,
-  },
-  headerContent: {
     flexDirection: "row",
     justifyContent: "space-between",
-    alignItems: "center",
+    alignItems: "flex-start",
+    paddingHorizontal: 20,
+    paddingTop: 60,
+    paddingBottom: 20,
   },
   debugButton: {
     padding: 8,
   },
-  headerTitle: {
-    fontSize: theme.typography.fontSize["3xl"],
-    fontWeight: theme.typography.fontWeight.bold,
-    color: theme.colors.white,
+  section: {
+    paddingHorizontal: 20,
+    marginBottom: 24,
   },
-  headerSubtitle: {
-    fontSize: theme.typography.fontSize.base,
-    color: "rgba(255, 255, 255, 0.9)",
-    marginTop: 4,
-  },
-  statsContainer: {
+  statsRow: {
     flexDirection: "row",
-    padding: 16,
     gap: 12,
   },
   statCard: {
     flex: 1,
-    backgroundColor: theme.colors.white,
-    padding: 16,
-    borderRadius: theme.borderRadius.xl,
     alignItems: "center",
-    ...theme.shadows.medium,
-    borderWidth: 1,
-    borderColor: "rgba(59, 130, 246, 0.1)",
+    paddingVertical: 20,
+    paddingHorizontal: 12,
+    borderRadius: 20,
   },
-  statValue: {
-    fontSize: theme.typography.fontSize["2xl"],
-    fontWeight: theme.typography.fontWeight.bold,
-    color: theme.colors.primary,
-    marginBottom: 4,
-  },
-  statLabel: {
-    fontSize: 12,
-    color: "#6b7280",
-    fontWeight: "500",
-  },
-  analyticsSection: {
-    padding: 16,
-    paddingTop: 0,
+  analyticsCard: {
+    padding: 20,
   },
   analyticsHeader: {
     flexDirection: "row",
     justifyContent: "space-between",
     alignItems: "center",
-    backgroundColor: theme.colors.white,
-    padding: 16,
-    borderRadius: theme.borderRadius.xl,
-    marginBottom: 12,
-    ...theme.shadows.subtle,
   },
   analyticsHeaderLeft: {
     flexDirection: "row",
     alignItems: "center",
-    gap: 8,
   },
-  analyticsTitle: {
-    fontSize: theme.typography.fontSize.base,
-    fontWeight: theme.typography.fontWeight.semibold,
-    color: theme.colors.gray700,
+  analyticsIcon: {
+    width: 48,
+    height: 48,
+    borderRadius: 14,
+    justifyContent: "center",
+    alignItems: "center",
+    marginRight: 14,
+  },
+  analyticsToggle: {
+    width: 36,
+    height: 36,
+    borderRadius: 10,
+    justifyContent: "center",
+    alignItems: "center",
   },
   analyticsContent: {
-    paddingTop: 4,
+    paddingTop: 24,
+    marginTop: 20,
+    borderTopWidth: 1,
+    borderTopColor: "rgba(0,0,0,0.05)",
   },
-  section: {
-    padding: 20,
-    paddingTop: 10,
+  chartSection: {
+    marginBottom: 20,
   },
-  sectionTitle: {
-    fontSize: 18,
-    fontWeight: "600",
-    color: "#374151",
-    marginBottom: 12,
+  goalsList: {
+    gap: 16,
   },
   emptyState: {
     alignItems: "center",
     paddingVertical: 40,
   },
-  emptyText: {
-    fontSize: 16,
-    fontWeight: "500",
-    color: "#6b7280",
-    marginTop: 12,
-  },
-  emptySubtext: {
-    fontSize: 14,
-    color: "#9ca3af",
-    marginTop: 4,
-  },
   footer: {
     height: 100,
   },
   fabContainer: {
     position: "absolute",
     right: 20,
-    bottom: 110, // Adjusted for tab bar height
+    bottom: 90,
   },
   fab: {
     width: 64,
     height: 64,
-    borderRadius: 32,
+    borderRadius: 22,
     justifyContent: "center",
     alignItems: "center",
-    ...theme.shadows.glow,
+    shadowOffset: { width: 0, height: 6 },
+    shadowOpacity: 0.35,
+    shadowRadius: 12,
+    elevation: 8,
   },
 });

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

@@ -1,4 +1,4 @@
-import React, { useState, useCallback, useRef } from "react";
+import React, { useState, useCallback } from "react";
 import {
   View,
   Text,
@@ -9,11 +9,15 @@ import {
   ActivityIndicator,
   Alert,
 } from "react-native";
-import { LinearGradient } from "expo-linear-gradient";
 import { Ionicons } from "@expo/vector-icons";
 import { useUser } from "@clerk/clerk-expo";
 import { useFocusEffect } from "expo-router";
-import { theme } from "../../styles/theme";
+import { useTheme } from "../../contexts/ThemeContext";
+import { MinimalCard } from "../../components/MinimalCard";
+import { SectionHeader } from "../../components/SectionHeader";
+import { MinimalButton } from "../../components/MinimalButton";
+import { Badge } from "../../components/Badge";
+import { IconContainer } from "../../components/IconContainer";
 import { useRecommendations } from "../../contexts/RecommendationsContext";
 import { useNotifications } from "../../contexts/NotificationsContext";
 import { NotificationsModal } from "../../components/NotificationsModal";
@@ -22,6 +26,7 @@ import log from "../../utils/logger";
 
 export default function RecommendationsScreen() {
   const { user } = useUser();
+  const { colors, typography } = useTheme();
   const {
     recommendations: allRecommendations,
     loading,
@@ -43,7 +48,7 @@ export default function RecommendationsScreen() {
     setNotificationsVisible(false);
   };
 
-  // Filter to show only approved recommendations for regular users
+  // Filter to show only approved recommendations
   const recommendations = allRecommendations.filter(
     (rec) => rec.status === "approved",
   );
@@ -101,14 +106,14 @@ export default function RecommendationsScreen() {
 
   if (loading && recommendations.length === 0) {
     return (
-      <View style={styles.centered}>
-        <ActivityIndicator size="large" color={theme.colors.primary} />
+      <View style={[styles.centered, { backgroundColor: colors.background }]}>
+        <ActivityIndicator size="large" color={colors.primary} />
       </View>
     );
   }
 
   return (
-    <View style={styles.container}>
+    <View style={[styles.container, { backgroundColor: colors.background }]}>
       <NotificationsModal
         visible={notificationsVisible}
         onClose={handleCloseNotifications}
@@ -119,98 +124,125 @@ export default function RecommendationsScreen() {
           <RefreshControl
             refreshing={refreshing}
             onRefresh={onRefresh}
-            tintColor={theme.colors.primary}
+            tintColor={colors.primary}
           />
         }
       >
         {/* Header */}
-        <LinearGradient
-          colors={theme.gradients.primary}
-          start={{ x: 0, y: 0 }}
-          end={{ x: 1, y: 1 }}
-          style={styles.header}
-        >
-          <View>
-            <Text style={styles.headerTitle}>AI Recommendations</Text>
-            <Text style={styles.headerSubtitle}>
-              Personalized fitness & nutrition plans
+        <View style={styles.header}>
+          <View style={{ flex: 1 }}>
+            <Text
+              style={[
+                typography.h1,
+                { color: colors.textPrimary, fontSize: 32 },
+              ]}
+            >
+              Recommendations
+            </Text>
+            <Text
+              style={[
+                typography.body,
+                { color: colors.textSecondary, marginTop: 8 },
+              ]}
+            >
+              {recommendations.length === 0
+                ? "Let's create your perfect plan!"
+                : `${recommendations.length} plan${recommendations.length !== 1 ? "s" : ""} ready for you!`}
             </Text>
           </View>
           <TouchableOpacity
-            style={styles.iconContainer}
+            style={styles.notificationButton}
             onPress={handleOpenNotifications}
             activeOpacity={0.7}
           >
-            <Ionicons name="sparkles" size={32} color="#fff" />
-            {unreadCount > 0 && (
-              <View style={styles.badge}>
-                <Text style={styles.badgeText}>{unreadCount}</Text>
-              </View>
-            )}
+            <IconContainer
+              variant="colored"
+              backgroundColor={colors.accent}
+              size="lg"
+            >
+              <Ionicons name="sparkles" size={24} color={colors.white} />
+              {unreadCount > 0 && (
+                <View
+                  style={[
+                    styles.notificationBadge,
+                    { backgroundColor: colors.danger },
+                  ]}
+                >
+                  <Text style={styles.notificationBadgeText}>
+                    {unreadCount}
+                  </Text>
+                </View>
+              )}
+            </IconContainer>
           </TouchableOpacity>
-        </LinearGradient>
+        </View>
 
         {/* Generate Button */}
-        <View style={styles.actionContainer}>
-          <TouchableOpacity
+        <View style={styles.section}>
+          <MinimalButton
+            title="Generate New Plan"
             onPress={handleGenerateRecommendation}
+            variant="primary"
+            size="lg"
+            fullWidth
+            loading={generating}
             disabled={generating}
-            activeOpacity={0.8}
-          >
-            <LinearGradient
-              colors={theme.gradients.purple}
-              start={{ x: 0, y: 0 }}
-              end={{ x: 1, y: 0 }}
-              style={[styles.generateButton, theme.shadows.medium]}
-            >
-              {generating ? (
-                <ActivityIndicator size="small" color="#fff" />
-              ) : (
-                <>
-                  <Ionicons
-                    name="bulb"
-                    size={24}
-                    color="#fff"
-                    style={{ marginRight: 12 }}
-                  />
-                  <Text style={styles.generateButtonText}>
-                    Generate New Plan
-                  </Text>
-                </>
-              )}
-            </LinearGradient>
-          </TouchableOpacity>
+            textStyle={{ fontSize: 16 }}
+          />
         </View>
 
         {/* Recommendations List */}
         <View style={styles.section}>
+          <SectionHeader
+            title="💡 Your Plans"
+            subtitle={
+              recommendations.length > 0
+                ? `${recommendations.length} active plan${recommendations.length !== 1 ? "s" : ""}`
+                : undefined
+            }
+          />
+
           {recommendations.length === 0 ? (
-            <View style={styles.emptyState}>
-              <LinearGradient
-                colors={["rgba(139, 92, 246, 0.1)", "rgba(139, 92, 246, 0.05)"]}
-                style={styles.emptyCard}
-              >
-                <Ionicons
-                  name="sparkles-outline"
-                  size={64}
-                  color={theme.colors.purple}
-                />
-                <Text style={styles.emptyTitle}>No Recommendations Yet</Text>
-                <Text style={styles.emptyText}>
-                  Tap "Generate New Plan" to get personalized AI-powered fitness
-                  and nutrition recommendations based on your profile and goals.
+            <MinimalCard variant="default" style={{ borderRadius: 20 }}>
+              <View style={styles.emptyState}>
+                <Text style={{ fontSize: 64 }}>🤖</Text>
+                <Text
+                  style={[
+                    typography.bodyEmphasis,
+                    { color: colors.textPrimary, marginTop: 16 },
+                  ]}
+                >
+                  No Recommendations Yet
                 </Text>
-              </LinearGradient>
-            </View>
+                <Text
+                  style={[
+                    typography.body,
+                    {
+                      color: colors.textSecondary,
+                      marginTop: 8,
+                      textAlign: "center",
+                    },
+                  ]}
+                >
+                  Tap "Generate New Plan" to get personalized AI-powered fitness
+                  and nutrition recommendations! 🎯
+                </Text>
+              </View>
+            </MinimalCard>
           ) : (
-            recommendations.map((recommendation) => (
-              <RecommendationCard
-                key={recommendation.id}
-                recommendation={recommendation}
-              />
-            ))
+            <View style={styles.recommendationsList}>
+              {recommendations.map((recommendation) => (
+                <RecommendationCard
+                  key={recommendation.id}
+                  recommendation={recommendation}
+                />
+              ))}
+            </View>
           )}
         </View>
+
+        {/* Bottom Spacer */}
+        <View style={{ height: 100 }} />
       </ScrollView>
     </View>
   );
@@ -221,250 +253,195 @@ interface RecommendationCardProps {
 }
 
 function RecommendationCard({ recommendation }: RecommendationCardProps) {
+  const { colors, typography } = useTheme();
   const [expanded, setExpanded] = useState(false);
 
   return (
-    <View style={styles.card}>
-      <LinearGradient
-        colors={["rgba(255, 255, 255, 1)", "rgba(249, 250, 251, 1)"]}
-        style={[styles.cardContent, theme.shadows.medium]}
+    <MinimalCard variant="bordered" style={{ borderRadius: 20 }}>
+      {/* Header */}
+      <TouchableOpacity
+        onPress={() => setExpanded(!expanded)}
+        activeOpacity={0.7}
+        style={styles.cardHeader}
       >
-        {/* Header */}
-        <View style={styles.cardHeader}>
-          <View style={styles.cardHeaderLeft}>
-            <LinearGradient
-              colors={theme.gradients.success}
-              style={styles.cardIcon}
-            >
-              <Ionicons name="checkmark-circle" size={20} color="#fff" />
-            </LinearGradient>
-            <View>
-              <Text style={styles.cardTitle}>AI Fitness Plan</Text>
-              <Text style={styles.cardDate}>
-                {new Date(recommendation.generatedAt).toLocaleDateString()}
+        <View style={styles.cardHeaderLeft}>
+          <IconContainer
+            variant="colored"
+            backgroundColor={`${colors.success}20`}
+          >
+            <Ionicons
+              name="checkmark-circle"
+              size={20}
+              color={colors.success}
+            />
+          </IconContainer>
+          <View style={{ marginLeft: 12 }}>
+            <Text style={[typography.h3, { color: colors.textPrimary }]}>
+              ✨ AI Fitness Plan
+            </Text>
+            <Text style={[typography.caption, { color: colors.textTertiary }]}>
+              {new Date(recommendation.generatedAt).toLocaleDateString()}
+            </Text>
+          </View>
+        </View>
+        <Ionicons
+          name={expanded ? "chevron-up" : "chevron-down"}
+          size={24}
+          color={colors.textTertiary}
+        />
+      </TouchableOpacity>
+
+      {/* Summary */}
+      <View style={styles.cardSummary}>
+        <Text
+          style={[typography.body, { color: colors.textSecondary }]}
+          numberOfLines={expanded ? undefined : 3}
+        >
+          {recommendation.recommendationText}
+        </Text>
+      </View>
+
+      {/* Expanded Content */}
+      {expanded && (
+        <View style={styles.expandedContent}>
+          {/* Activity Plan */}
+          <View
+            style={[
+              styles.planSection,
+              { backgroundColor: colors.surfaceElevated },
+            ]}
+          >
+            <View style={styles.planHeader}>
+              <Ionicons name="barbell" size={20} color={colors.primary} />
+              <Text
+                style={[
+                  typography.h3,
+                  { color: colors.textPrimary, marginLeft: 8 },
+                ]}
+              >
+                💪 Activity Plan
               </Text>
             </View>
+            <Text
+              style={[
+                typography.body,
+                { color: colors.textSecondary, marginTop: 8 },
+              ]}
+            >
+              {recommendation.activityPlan}
+            </Text>
           </View>
-          <TouchableOpacity onPress={() => setExpanded(!expanded)}>
-            <Ionicons
-              name={expanded ? "chevron-up" : "chevron-down"}
-              size={24}
-              color={theme.colors.gray400}
-            />
-          </TouchableOpacity>
-        </View>
 
-        {/* Summary */}
-        <View style={styles.cardSummary}>
-          <Text
-            style={styles.summaryText}
-            numberOfLines={expanded ? undefined : 3}
+          {/* Diet Plan */}
+          <View
+            style={[
+              styles.planSection,
+              { backgroundColor: colors.surfaceElevated },
+            ]}
           >
-            {recommendation.recommendationText}
-          </Text>
-        </View>
-
-        {/* Expanded Content */}
-        {expanded && (
-          <View style={styles.expandedContent}>
-            {/* Activity Plan */}
-            <View style={styles.planSection}>
-              <View style={styles.planHeader}>
-                <Ionicons
-                  name="barbell"
-                  size={20}
-                  color={theme.colors.primary}
-                />
-                <Text style={styles.planTitle}>Activity Plan</Text>
-              </View>
-              <Text style={styles.planText}>{recommendation.activityPlan}</Text>
-            </View>
-
-            {/* Diet Plan */}
-            <View style={styles.planSection}>
-              <View style={styles.planHeader}>
-                <Ionicons
-                  name="restaurant"
-                  size={20}
-                  color={theme.colors.success}
-                />
-                <Text style={styles.planTitle}>Diet Plan</Text>
-              </View>
-              <Text style={styles.planText}>{recommendation.dietPlan}</Text>
+            <View style={styles.planHeader}>
+              <Ionicons name="restaurant" size={20} color={colors.success} />
+              <Text
+                style={[
+                  typography.h3,
+                  { color: colors.textPrimary, marginLeft: 8 },
+                ]}
+              >
+                🍽️ Diet Plan
+              </Text>
             </View>
+            <Text
+              style={[
+                typography.body,
+                { color: colors.textSecondary, marginTop: 8 },
+              ]}
+            >
+              {recommendation.dietPlan}
+            </Text>
           </View>
-        )}
-      </LinearGradient>
-    </View>
+        </View>
+      )}
+    </MinimalCard>
   );
 }
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: theme.colors.background,
   },
   centered: {
     flex: 1,
     justifyContent: "center",
     alignItems: "center",
-    backgroundColor: theme.colors.background,
   },
   scrollContent: {
-    paddingBottom: 100,
+    paddingBottom: 20,
   },
   header: {
     flexDirection: "row",
     justifyContent: "space-between",
-    alignItems: "center",
-    padding: 24,
+    alignItems: "flex-start",
+    paddingHorizontal: 24,
     paddingTop: 60,
     paddingBottom: 24,
-    marginBottom: 20,
-    borderBottomLeftRadius: theme.borderRadius.xl,
-    borderBottomRightRadius: theme.borderRadius.xl,
   },
-  headerTitle: {
-    fontSize: theme.typography.fontSize["3xl"],
-    fontWeight: theme.typography.fontWeight.bold,
-    color: theme.colors.white,
+  notificationButton: {
+    position: "relative",
   },
-  headerSubtitle: {
-    fontSize: theme.typography.fontSize.base,
-    color: "rgba(255, 255, 255, 0.9)",
-    marginTop: 4,
-  },
-  iconContainer: {
-    backgroundColor: "rgba(255, 255, 255, 0.2)",
-    width: 64,
-    height: 64,
-    borderRadius: 32,
-    justifyContent: "center",
-    alignItems: "center",
-  },
-  badge: {
+  notificationBadge: {
     position: "absolute",
     top: -4,
     right: -4,
-    backgroundColor: theme.colors.danger,
-    borderRadius: 10,
-    width: 20,
-    height: 20,
+    minWidth: 18,
+    height: 18,
+    borderRadius: 9,
     justifyContent: "center",
     alignItems: "center",
+    paddingHorizontal: 4,
   },
-  badgeText: {
+  notificationBadgeText: {
     color: "#fff",
-    fontSize: 12,
-    fontWeight: "bold",
-  },
-  actionContainer: {
-    paddingHorizontal: 20,
-    marginBottom: 20,
-  },
-  generateButton: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "center",
-    paddingVertical: 16,
-    paddingHorizontal: 24,
-    borderRadius: theme.borderRadius.xl,
-  },
-  generateButtonText: {
-    fontSize: theme.typography.fontSize.lg,
-    fontWeight: theme.typography.fontWeight.bold,
-    color: theme.colors.white,
+    fontSize: 11,
+    fontWeight: "700",
   },
   section: {
-    paddingHorizontal: 20,
+    paddingHorizontal: 24,
+    marginBottom: 24,
   },
   emptyState: {
-    paddingVertical: 40,
-  },
-  emptyCard: {
-    borderRadius: theme.borderRadius["2xl"],
-    padding: 32,
     alignItems: "center",
+    paddingVertical: 40,
+    paddingHorizontal: 20,
   },
-  emptyTitle: {
-    fontSize: theme.typography.fontSize.xl,
-    fontWeight: theme.typography.fontWeight.bold,
-    color: theme.colors.gray700,
-    marginTop: 16,
-    marginBottom: 8,
-  },
-  emptyText: {
-    fontSize: theme.typography.fontSize.base,
-    color: theme.colors.gray500,
-    textAlign: "center",
-    lineHeight: 24,
-  },
-  card: {
-    marginBottom: 16,
-  },
-  cardContent: {
-    borderRadius: theme.borderRadius["2xl"],
-    padding: 20,
+  recommendationsList: {
+    gap: 12,
   },
   cardHeader: {
     flexDirection: "row",
     justifyContent: "space-between",
     alignItems: "center",
-    marginBottom: 16,
   },
   cardHeaderLeft: {
     flexDirection: "row",
     alignItems: "center",
-    gap: 12,
-  },
-  cardIcon: {
-    width: 40,
-    height: 40,
-    borderRadius: 20,
-    justifyContent: "center",
-    alignItems: "center",
-  },
-  cardTitle: {
-    fontSize: theme.typography.fontSize.lg,
-    fontWeight: theme.typography.fontWeight.bold,
-    color: theme.colors.gray800,
-  },
-  cardDate: {
-    fontSize: theme.typography.fontSize.sm,
-    color: theme.colors.gray500,
-    marginTop: 2,
+    flex: 1,
   },
   cardSummary: {
-    marginBottom: 12,
-  },
-  summaryText: {
-    fontSize: theme.typography.fontSize.base,
-    color: theme.colors.gray700,
-    lineHeight: 24,
+    marginTop: 12,
+    paddingTop: 12,
+    borderTopWidth: 1,
+    borderTopColor: "rgba(0, 0, 0, 0.05)",
   },
   expandedContent: {
-    marginTop: 12,
-    paddingTop: 16,
-    borderTopWidth: 1,
-    borderTopColor: theme.colors.gray200,
+    marginTop: 16,
+    gap: 12,
   },
   planSection: {
-    marginBottom: 16,
+    padding: 16,
+    borderRadius: 16,
   },
   planHeader: {
     flexDirection: "row",
     alignItems: "center",
-    gap: 8,
-    marginBottom: 8,
-  },
-  planTitle: {
-    fontSize: theme.typography.fontSize.base,
-    fontWeight: theme.typography.fontWeight.bold,
-    color: theme.colors.gray800,
-  },
-  planText: {
-    fontSize: theme.typography.fontSize.base,
-    color: theme.colors.gray600,
-    lineHeight: 22,
   },
 });

apps/mobile/src/app/_layout.tsx

@@ -3,7 +3,9 @@ import { Stack } from "expo-router";
 import * as SecureStore from "expo-secure-store";
 import { View, Text } from "react-native";
 import { useEffect, useState } from "react";
+import { SafeAreaProvider } from "react-native-safe-area-context";
 import { validateEnv } from "../utils/env";
+import { ThemeProvider } from "../contexts/ThemeContext";
 import { StatisticsProvider } from "../contexts/StatisticsContext";
 import { FitnessGoalsProvider } from "../contexts/FitnessGoalsContext";
 import { RecommendationsProvider } from "../contexts/RecommendationsContext";
@@ -169,18 +171,22 @@ export default function RootLayout() {
   });
 
   return (
-    <ClerkProvider tokenCache={tokenCache} publishableKey={publishableKey}>
-      <ClerkLoaded>
-        <NotificationsProvider>
-          <StatisticsProvider>
-            <FitnessGoalsProvider>
-              <RecommendationsProvider>
-                <AppContent />
-              </RecommendationsProvider>
-            </FitnessGoalsProvider>
-          </StatisticsProvider>
-        </NotificationsProvider>
-      </ClerkLoaded>
-    </ClerkProvider>
+    <SafeAreaProvider>
+      <ClerkProvider tokenCache={tokenCache} publishableKey={publishableKey}>
+        <ClerkLoaded>
+          <ThemeProvider>
+            <NotificationsProvider>
+              <StatisticsProvider>
+                <FitnessGoalsProvider>
+                  <RecommendationsProvider>
+                    <AppContent />
+                  </RecommendationsProvider>
+                </FitnessGoalsProvider>
+              </StatisticsProvider>
+            </NotificationsProvider>
+          </ThemeProvider>
+        </ClerkLoaded>
+      </ClerkProvider>
+    </SafeAreaProvider>
   );
 }

apps/mobile/src/app/fitness-profile.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect } from "react";
 import {
   View,
   Text,
@@ -9,13 +9,15 @@ import {
   Alert,
   TextInput,
   Platform,
-} from 'react-native';
-import { useRouter, Stack } from 'expo-router';
-import { useAuth } from '@clerk/clerk-expo';
-import { Ionicons } from '@expo/vector-icons';
-import { LinearGradient } from 'expo-linear-gradient';
-import { theme } from '../styles/theme';
-import { API_BASE_URL } from '../config/api';
+} from "react-native";
+import { useRouter, Stack } from "expo-router";
+import { useAuth } from "@clerk/clerk-expo";
+import { Ionicons } from "@expo/vector-icons";
+import { useTheme } from "../contexts/ThemeContext";
+import { MinimalCard } from "../components/MinimalCard";
+import { MinimalButton } from "../components/MinimalButton";
+import { IconContainer } from "../components/IconContainer";
+import { API_BASE_URL } from "../config/api";
 
 interface FitnessProfileData {
   height?: number;
@@ -30,29 +32,71 @@ interface FitnessProfileData {
 }
 
 const GENDER_OPTIONS = [
-  { label: 'Male', value: 'male', icon: 'male' },
-  { label: 'Female', value: 'female', icon: 'female' },
-  { label: 'Other', value: 'other', icon: 'transgender' },
+  { label: "Male", value: "male", icon: "male-outline" },
+  { label: "Female", value: "female", icon: "female-outline" },
+  { label: "Other", value: "other", icon: "transgender-outline" },
+  {
+    label: "Prefer not to say",
+    value: "prefer_not_to_say",
+    icon: "help-circle-outline",
+  },
 ];
 
 const FITNESS_GOAL_OPTIONS = [
-  { label: 'Weight Loss', value: 'weight_loss', icon: 'trending-down', color: theme.colors.danger },
-  { label: 'Muscle Gain', value: 'muscle_gain', icon: 'barbell', color: theme.colors.primary },
-  { label: 'Endurance', value: 'endurance', icon: 'bicycle', color: theme.colors.success },
-  { label: 'Flexibility', value: 'flexibility', icon: 'body', color: theme.colors.purple },
-  { label: 'General Fitness', value: 'general_fitness', icon: 'fitness', color: theme.colors.warning },
+  {
+    label: "Weight Loss",
+    value: "weight_loss",
+    icon: "trending-down",
+    color: "#FF3B3B",
+  },
+  {
+    label: "Muscle Gain",
+    value: "muscle_gain",
+    icon: "barbell",
+    color: "#0066FF",
+  },
+  { label: "Endurance", value: "endurance", icon: "bicycle", color: "#00D26A" },
+  {
+    label: "Flexibility",
+    value: "flexibility",
+    icon: "body",
+    color: "#7B2CBF",
+  },
+  {
+    label: "General Fitness",
+    value: "general_fitness",
+    icon: "fitness",
+    color: "#FFB800",
+  },
 ];
 
 const ACTIVITY_LEVEL_OPTIONS = [
-  { label: 'Sedentary', value: 'sedentary', description: 'Little to no exercise' },
-  { label: 'Light', value: 'light', description: '1-3 days/week' },
-  { label: 'Moderate', value: 'moderate', description: '3-5 days/week' },
-  { label: 'Active', value: 'active', description: '6-7 days/week' },
-  { label: 'Very Active', value: 'very_active', description: 'Intense daily training' },
+  {
+    label: "Sedentary",
+    value: "sedentary",
+    description: "Little to no exercise",
+  },
+  {
+    label: "Lightly Active",
+    value: "lightly_active",
+    description: "1-3 days/week",
+  },
+  {
+    label: "Moderately Active",
+    value: "moderately_active",
+    description: "3-5 days/week",
+  },
+  { label: "Very Active", value: "very_active", description: "6-7 days/week" },
+  {
+    label: "Extremely Active",
+    value: "extremely_active",
+    description: "Intense daily training",
+  },
 ];
 
 export default function FitnessProfileScreen() {
   const router = useRouter();
+  const { colors, typography } = useTheme();
   const { userId, getToken } = useAuth();
   const [loading, setLoading] = useState(false);
   const [fetchingProfile, setFetchingProfile] = useState(true);
@@ -66,34 +110,42 @@ export default function FitnessProfileScreen() {
     try {
       setFetchingProfile(true);
       const token = await getToken();
-      const response = await fetch(`${API_BASE_URL}/api/profile/fitness?userId=${userId}`, {
-        headers: {
-          Authorization: `Bearer ${token}`,
+      const response = await fetch(
+        `${API_BASE_URL}/api/profile/fitness?userId=${userId}`,
+        {
+          headers: {
+            Authorization: `Bearer ${token}`,
+          },
         },
-      });
+      );
 
       if (response.ok) {
         const data = await response.json();
         if (data.profile) {
+          let activityLevel = data.profile.activityLevel || "";
+          if (activityLevel === "light") activityLevel = "lightly_active";
+          if (activityLevel === "moderate") activityLevel = "moderately_active";
+          if (activityLevel === "active") activityLevel = "very_active";
+
           setProfileData({
             height: data.profile.height,
             weight: data.profile.weight,
             age: data.profile.age,
-            gender: data.profile.gender || '',
+            gender: data.profile.gender || "",
             fitnessGoal: Array.isArray(data.profile.fitnessGoals)
               ? data.profile.fitnessGoals[0]
-              : (typeof data.profile.fitnessGoals === 'string'
+              : typeof data.profile.fitnessGoals === "string"
                 ? JSON.parse(data.profile.fitnessGoals)[0]
-                : ''),
-            activityLevel: data.profile.activityLevel || '',
-            medicalConditions: data.profile.medicalConditions || '',
-            allergies: data.profile.allergies || '',
-            injuries: data.profile.injuries || '',
+                : "",
+            activityLevel: activityLevel,
+            medicalConditions: data.profile.medicalConditions || "",
+            allergies: data.profile.allergies || "",
+            injuries: data.profile.injuries || "",
           });
         }
       }
     } catch (error) {
-      console.error('Error fetching profile:', error);
+      console.error("Error fetching profile:", error);
     } finally {
       setFetchingProfile(false);
     }
@@ -104,40 +156,39 @@ export default function FitnessProfileScreen() {
       setLoading(true);
       const token = await getToken();
 
-      // Prepare data with userId and convert fitnessGoal to fitnessGoals array
       const dataToSave = {
         userId: userId,
         height: profileData.height,
         weight: profileData.weight,
         age: profileData.age,
-        gender: profileData.gender,
+        gender: profileData.gender || undefined,
         fitnessGoals: profileData.fitnessGoal ? [profileData.fitnessGoal] : [],
-        activityLevel: profileData.activityLevel,
+        activityLevel: profileData.activityLevel || undefined,
         medicalConditions: profileData.medicalConditions,
         allergies: profileData.allergies,
         injuries: profileData.injuries,
       };
 
       const response = await fetch(`${API_BASE_URL}/api/profile/fitness`, {
-        method: 'POST',
+        method: "POST",
         headers: {
-          'Content-Type': 'application/json',
+          "Content-Type": "application/json",
           Authorization: `Bearer ${token}`,
         },
         body: JSON.stringify(dataToSave),
       });
 
       if (response.ok) {
-        Alert.alert('Success', 'Fitness profile saved successfully!', [
-          { text: 'OK', onPress: () => router.back() },
+        Alert.alert("Success", "Fitness profile saved successfully!", [
+          { text: "OK", onPress: () => router.back() },
         ]);
       } else {
         const error = await response.json();
-        Alert.alert('Error', error.error || 'Failed to save profile');
+        Alert.alert("Error", error.error || "Failed to save profile");
       }
     } catch (error) {
-      console.error('Error saving profile:', error);
-      Alert.alert('Error', 'Failed to save fitness profile');
+      console.error("Error saving profile:", error);
+      Alert.alert("Error", "Failed to save fitness profile");
     } finally {
       setLoading(false);
     }
@@ -149,8 +200,13 @@ export default function FitnessProfileScreen() {
 
   if (fetchingProfile) {
     return (
-      <View style={styles.loadingContainer}>
-        <ActivityIndicator size="large" color={theme.colors.primary} />
+      <View
+        style={[
+          styles.loadingContainer,
+          { backgroundColor: colors.background },
+        ]}
+      >
+        <ActivityIndicator size="large" color={colors.primary} />
       </View>
     );
   }
@@ -158,15 +214,28 @@ export default function FitnessProfileScreen() {
   return (
     <>
       <Stack.Screen options={{ headerShown: false }} />
-      <View style={styles.container}>
+      <View style={[styles.container, { backgroundColor: colors.background }]}>
         {/* Header */}
-        <LinearGradient colors={theme.gradients.primary} style={styles.header}>
-          <TouchableOpacity style={styles.backButton} onPress={() => router.back()}>
+        <View
+          style={[
+            styles.header,
+            {
+              backgroundColor: colors.primary,
+              paddingTop: Platform.OS === "ios" ? 60 : 40,
+            },
+          ]}
+        >
+          <TouchableOpacity
+            style={styles.backButton}
+            onPress={() => router.back()}
+          >
             <Ionicons name="arrow-back" size={24} color="#fff" />
           </TouchableOpacity>
-          <Text style={styles.headerTitle}>Fitness Profile</Text>
+          <Text style={[typography.h2, { color: "#fff" }]}>
+            Fitness Profile
+          </Text>
           <View style={{ width: 40 }} />
-        </LinearGradient>
+        </View>
 
         <ScrollView
           style={styles.scrollView}
@@ -175,87 +244,181 @@ export default function FitnessProfileScreen() {
         >
           {/* Basic Information */}
           <View style={styles.section}>
-            <Text style={styles.sectionTitle}>Basic Information</Text>
-            <View style={styles.card}>
-              <View style={styles.row}>
+            <Text
+              style={[
+                typography.h3,
+                { color: colors.textPrimary, marginBottom: 16 },
+              ]}
+            >
+              Basic Information
+            </Text>
+            <MinimalCard variant="elevated" style={styles.card}>
+              <View style={styles.inputRow}>
                 <View style={styles.inputGroup}>
-                  <Text style={styles.label}>Height (cm)</Text>
-                  <View style={styles.inputContainer}>
-                    <Ionicons name="resize-outline" size={20} color={theme.colors.gray400} />
+                  <Text
+                    style={[
+                      typography.label,
+                      { color: colors.textSecondary, marginBottom: 8 },
+                    ]}
+                  >
+                    HEIGHT (CM)
+                  </Text>
+                  <View
+                    style={[
+                      styles.inputContainer,
+                      {
+                        backgroundColor: colors.surfaceElevated,
+                        borderColor: colors.border,
+                      },
+                    ]}
+                  >
+                    <Ionicons
+                      name="resize"
+                      size={20}
+                      color={colors.textTertiary}
+                    />
                     <TextInput
-                      style={styles.input}
-                      value={profileData.height?.toString() || ''}
+                      style={[styles.input, { color: colors.textPrimary }]}
+                      value={profileData.height?.toString() || ""}
                       onChangeText={(text) =>
-                        updateField('height', text ? parseFloat(text) : undefined)
+                        updateField(
+                          "height",
+                          text ? parseFloat(text) : undefined,
+                        )
                       }
                       keyboardType="decimal-pad"
                       placeholder="175"
-                      placeholderTextColor={theme.colors.gray400}
+                      placeholderTextColor={colors.textTertiary}
                     />
                   </View>
                 </View>
                 <View style={styles.inputGroup}>
-                  <Text style={styles.label}>Weight (kg)</Text>
-                  <View style={styles.inputContainer}>
-                    <Ionicons name="scale-outline" size={20} color={theme.colors.gray400} />
+                  <Text
+                    style={[
+                      typography.label,
+                      { color: colors.textSecondary, marginBottom: 8 },
+                    ]}
+                  >
+                    WEIGHT (KG)
+                  </Text>
+                  <View
+                    style={[
+                      styles.inputContainer,
+                      {
+                        backgroundColor: colors.surfaceElevated,
+                        borderColor: colors.border,
+                      },
+                    ]}
+                  >
+                    <Ionicons
+                      name="scale"
+                      size={20}
+                      color={colors.textTertiary}
+                    />
                     <TextInput
-                      style={styles.input}
-                      value={profileData.weight?.toString() || ''}
+                      style={[styles.input, { color: colors.textPrimary }]}
+                      value={profileData.weight?.toString() || ""}
                       onChangeText={(text) =>
-                        updateField('weight', text ? parseFloat(text) : undefined)
+                        updateField(
+                          "weight",
+                          text ? parseFloat(text) : undefined,
+                        )
                       }
                       keyboardType="decimal-pad"
                       placeholder="70"
-                      placeholderTextColor={theme.colors.gray400}
+                      placeholderTextColor={colors.textTertiary}
                     />
                   </View>
                 </View>
               </View>
               <View style={styles.inputGroup}>
-                <Text style={styles.label}>Age</Text>
-                <View style={styles.inputContainer}>
-                  <Ionicons name="calendar-outline" size={20} color={theme.colors.gray400} />
+                <Text
+                  style={[
+                    typography.label,
+                    { color: colors.textSecondary, marginBottom: 8 },
+                  ]}
+                >
+                  AGE
+                </Text>
+                <View
+                  style={[
+                    styles.inputContainer,
+                    {
+                      backgroundColor: colors.surfaceElevated,
+                      borderColor: colors.border,
+                    },
+                  ]}
+                >
+                  <Ionicons
+                    name="calendar"
+                    size={20}
+                    color={colors.textTertiary}
+                  />
                   <TextInput
-                    style={styles.input}
-                    value={profileData.age?.toString() || ''}
+                    style={[styles.input, { color: colors.textPrimary }]}
+                    value={profileData.age?.toString() || ""}
                     onChangeText={(text) =>
-                      updateField('age', text ? parseInt(text, 10) : undefined)
+                      updateField("age", text ? parseInt(text, 10) : undefined)
                     }
                     keyboardType="number-pad"
                     placeholder="25"
-                    placeholderTextColor={theme.colors.gray400}
+                    placeholderTextColor={colors.textTertiary}
                   />
                 </View>
               </View>
-            </View>
+            </MinimalCard>
           </View>
 
           {/* Gender Selection */}
           <View style={styles.section}>
-            <Text style={styles.sectionTitle}>Gender</Text>
-            <View style={styles.optionsRow}>
+            <Text
+              style={[
+                typography.h3,
+                { color: colors.textPrimary, marginBottom: 16 },
+              ]}
+            >
+              Gender
+            </Text>
+            <View style={styles.genderRow}>
               {GENDER_OPTIONS.map((option) => (
                 <TouchableOpacity
                   key={option.value}
                   style={[
-                    styles.optionCard,
-                    profileData.gender === option.value && styles.optionCardActive,
+                    styles.genderCard,
+                    {
+                      backgroundColor:
+                        profileData.gender === option.value
+                          ? colors.primary
+                          : colors.surfaceElevated,
+                      borderColor:
+                        profileData.gender === option.value
+                          ? colors.primary
+                          : colors.border,
+                    },
                   ]}
-                  onPress={() => updateField('gender', option.value)}
+                  onPress={() => updateField("gender", option.value)}
                 >
                   <Ionicons
                     name={option.icon as any}
                     size={24}
                     color={
                       profileData.gender === option.value
-                        ? theme.colors.primary
-                        : theme.colors.gray400
+                        ? "#fff"
+                        : colors.textTertiary
                     }
                   />
                   <Text
                     style={[
-                      styles.optionLabel,
-                      profileData.gender === option.value && styles.optionLabelActive,
+                      typography.caption,
+                      {
+                        color:
+                          profileData.gender === option.value
+                            ? "#fff"
+                            : colors.textSecondary,
+                        fontWeight:
+                          profileData.gender === option.value ? "700" : "500",
+                        marginTop: 6,
+                      },
                     ]}
                   >
                     {option.label}
@@ -267,117 +430,236 @@ export default function FitnessProfileScreen() {
 
           {/* Fitness Goal */}
           <View style={styles.section}>
-            <Text style={styles.sectionTitle}>Primary Fitness Goal</Text>
-            <View style={styles.card}>
+            <Text
+              style={[
+                typography.h3,
+                { color: colors.textPrimary, marginBottom: 16 },
+              ]}
+            >
+              Primary Fitness Goal
+            </Text>
+            <MinimalCard variant="elevated" style={styles.card}>
               {FITNESS_GOAL_OPTIONS.map((option, index) => (
                 <React.Fragment key={option.value}>
                   <TouchableOpacity
                     style={styles.listItem}
-                    onPress={() => updateField('fitnessGoal', option.value)}
+                    onPress={() => updateField("fitnessGoal", option.value)}
                   >
-                    <View style={[styles.iconCircle, { backgroundColor: `${option.color}20` }]}>
-                      <Ionicons name={option.icon as any} size={20} color={option.color} />
+                    <View
+                      style={[
+                        styles.iconCircle,
+                        { backgroundColor: `${option.color}20` },
+                      ]}
+                    >
+                      <Ionicons
+                        name={option.icon as any}
+                        size={20}
+                        color={option.color}
+                      />
                     </View>
-                    <Text style={styles.listItemText}>{option.label}</Text>
+                    <Text
+                      style={[
+                        typography.bodyEmphasis,
+                        { color: colors.textPrimary, flex: 1 },
+                      ]}
+                    >
+                      {option.label}
+                    </Text>
                     {profileData.fitnessGoal === option.value && (
-                      <Ionicons name="checkmark-circle" size={24} color={theme.colors.primary} />
+                      <Ionicons
+                        name="checkmark-circle"
+                        size={24}
+                        color={colors.primary}
+                      />
                     )}
                   </TouchableOpacity>
-                  {index < FITNESS_GOAL_OPTIONS.length - 1 && <View style={styles.divider} />}
+                  {index < FITNESS_GOAL_OPTIONS.length - 1 && (
+                    <View
+                      style={[
+                        styles.divider,
+                        { backgroundColor: colors.border },
+                      ]}
+                    />
+                  )}
                 </React.Fragment>
               ))}
-            </View>
+            </MinimalCard>
           </View>
 
           {/* Activity Level */}
           <View style={styles.section}>
-            <Text style={styles.sectionTitle}>Activity Level</Text>
-            <View style={styles.card}>
+            <Text
+              style={[
+                typography.h3,
+                { color: colors.textPrimary, marginBottom: 16 },
+              ]}
+            >
+              Activity Level
+            </Text>
+            <MinimalCard variant="elevated" style={styles.card}>
               {ACTIVITY_LEVEL_OPTIONS.map((option, index) => (
                 <React.Fragment key={option.value}>
                   <TouchableOpacity
                     style={styles.listItem}
-                    onPress={() => updateField('activityLevel', option.value)}
+                    onPress={() => updateField("activityLevel", option.value)}
                   >
                     <View style={{ flex: 1 }}>
-                      <Text style={styles.listItemText}>{option.label}</Text>
-                      <Text style={styles.listItemDescription}>{option.description}</Text>
+                      <Text
+                        style={[
+                          typography.bodyEmphasis,
+                          { color: colors.textPrimary },
+                        ]}
+                      >
+                        {option.label}
+                      </Text>
+                      <Text
+                        style={[
+                          typography.caption,
+                          { color: colors.textTertiary, marginTop: 2 },
+                        ]}
+                      >
+                        {option.description}
+                      </Text>
                     </View>
                     {profileData.activityLevel === option.value && (
-                      <Ionicons name="checkmark-circle" size={24} color={theme.colors.primary} />
+                      <Ionicons
+                        name="checkmark-circle"
+                        size={24}
+                        color={colors.primary}
+                      />
                     )}
                   </TouchableOpacity>
-                  {index < ACTIVITY_LEVEL_OPTIONS.length - 1 && <View style={styles.divider} />}
+                  {index < ACTIVITY_LEVEL_OPTIONS.length - 1 && (
+                    <View
+                      style={[
+                        styles.divider,
+                        { backgroundColor: colors.border },
+                      ]}
+                    />
+                  )}
                 </React.Fragment>
               ))}
-            </View>
+            </MinimalCard>
           </View>
 
           {/* Health Information */}
           <View style={styles.section}>
-            <Text style={styles.sectionTitle}>Health Information (Optional)</Text>
-            <View style={styles.card}>
+            <Text
+              style={[
+                typography.h3,
+                { color: colors.textPrimary, marginBottom: 16 },
+              ]}
+            >
+              Health Information
+            </Text>
+            <MinimalCard variant="elevated" style={styles.card}>
               <View style={styles.inputGroup}>
-                <Text style={styles.label}>Medical Conditions</Text>
+                <Text
+                  style={[
+                    typography.label,
+                    { color: colors.textSecondary, marginBottom: 8 },
+                  ]}
+                >
+                  MEDICAL CONDITIONS
+                </Text>
                 <TextInput
-                  style={[styles.textArea]}
-                  value={profileData.medicalConditions || ''}
-                  onChangeText={(text) => updateField('medicalConditions', text)}
+                  style={[
+                    styles.textArea,
+                    {
+                      backgroundColor: colors.surfaceElevated,
+                      borderColor: colors.border,
+                      color: colors.textPrimary,
+                    },
+                  ]}
+                  value={profileData.medicalConditions || ""}
+                  onChangeText={(text) =>
+                    updateField("medicalConditions", text)
+                  }
                   placeholder="e.g., Asthma, diabetes..."
-                  placeholderTextColor={theme.colors.gray400}
+                  placeholderTextColor={colors.textTertiary}
                   multiline
                   numberOfLines={3}
                   textAlignVertical="top"
                 />
               </View>
               <View style={styles.inputGroup}>
-                <Text style={styles.label}>Allergies</Text>
+                <Text
+                  style={[
+                    typography.label,
+                    { color: colors.textSecondary, marginBottom: 8 },
+                  ]}
+                >
+                  ALLERGIES
+                </Text>
                 <TextInput
-                  style={[styles.textArea]}
-                  value={profileData.allergies || ''}
-                  onChangeText={(text) => updateField('allergies', text)}
+                  style={[
+                    styles.textArea,
+                    {
+                      backgroundColor: colors.surfaceElevated,
+                      borderColor: colors.border,
+                      color: colors.textPrimary,
+                    },
+                  ]}
+                  value={profileData.allergies || ""}
+                  onChangeText={(text) => updateField("allergies", text)}
                   placeholder="e.g., Peanuts, latex..."
-                  placeholderTextColor={theme.colors.gray400}
+                  placeholderTextColor={colors.textTertiary}
                   multiline
                   numberOfLines={3}
                   textAlignVertical="top"
                 />
               </View>
               <View style={styles.inputGroup}>
-                <Text style={styles.label}>Injuries</Text>
+                <Text
+                  style={[
+                    typography.label,
+                    { color: colors.textSecondary, marginBottom: 8 },
+                  ]}
+                >
+                  INJURIES
+                </Text>
                 <TextInput
-                  style={[styles.textArea]}
-                  value={profileData.injuries || ''}
-                  onChangeText={(text) => updateField('injuries', text)}
+                  style={[
+                    styles.textArea,
+                    {
+                      backgroundColor: colors.surfaceElevated,
+                      borderColor: colors.border,
+                      color: colors.textPrimary,
+                    },
+                  ]}
+                  value={profileData.injuries || ""}
+                  onChangeText={(text) => updateField("injuries", text)}
                   placeholder="e.g., Previous knee injury..."
-                  placeholderTextColor={theme.colors.gray400}
+                  placeholderTextColor={colors.textTertiary}
                   multiline
                   numberOfLines={3}
                   textAlignVertical="top"
                 />
               </View>
-            </View>
+            </MinimalCard>
           </View>
+
+          <View style={{ height: 120 }} />
         </ScrollView>
 
         {/* Save Button */}
-        <View style={styles.footer}>
-          <TouchableOpacity
-            style={[styles.saveButton, loading && styles.saveButtonDisabled]}
+        <View
+          style={[
+            styles.footer,
+            {
+              backgroundColor: colors.background,
+              borderTopColor: colors.border,
+            },
+          ]}
+        >
+          <MinimalButton
+            title="Save Profile"
             onPress={handleSave}
-            disabled={loading}
-          >
-            <LinearGradient colors={theme.gradients.primary} style={styles.saveButtonGradient}>
-              {loading ? (
-                <ActivityIndicator color="#fff" />
-              ) : (
-                <>
-                  <Ionicons name="checkmark-circle" size={20} color="#fff" />
-                  <Text style={styles.saveButtonText}>Save Profile</Text>
-                </>
-              )}
-            </LinearGradient>
-          </TouchableOpacity>
+            variant="primary"
+            size="xl"
+            fullWidth
+            loading={loading}
+          />
         </View>
       </View>
     </>
@@ -387,34 +669,26 @@ export default function FitnessProfileScreen() {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: theme.colors.background,
   },
   loadingContainer: {
     flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: theme.colors.background,
+    justifyContent: "center",
+    alignItems: "center",
   },
   header: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    paddingTop: Platform.OS === 'ios' ? 60 : 40,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
     paddingBottom: 20,
     paddingHorizontal: 20,
   },
   backButton: {
     width: 40,
     height: 40,
-    borderRadius: 20,
-    backgroundColor: 'rgba(255, 255, 255, 0.2)',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  headerTitle: {
-    fontSize: theme.typography.fontSize['2xl'],
-    fontWeight: theme.typography.fontWeight.bold,
-    color: '#fff',
+    borderRadius: 12,
+    backgroundColor: "rgba(255, 255, 255, 0.2)",
+    justifyContent: "center",
+    alignItems: "center",
   },
   scrollView: {
     flex: 1,
@@ -424,148 +698,77 @@ const styles = StyleSheet.create({
     paddingBottom: 100,
   },
   section: {
-    marginBottom: 24,
-  },
-  sectionTitle: {
-    fontSize: theme.typography.fontSize.lg,
-    fontWeight: theme.typography.fontWeight.bold,
-    color: theme.colors.gray900,
-    marginBottom: 12,
+    marginBottom: 28,
   },
   card: {
-    backgroundColor: '#fff',
-    borderRadius: theme.borderRadius.xl,
-    padding: 16,
-    ...theme.shadows.subtle,
-    borderWidth: 1,
-    borderColor: theme.colors.gray100,
+    padding: 4,
   },
-  row: {
-    flexDirection: 'row',
+  inputRow: {
+    flexDirection: "row",
     gap: 12,
-    marginBottom: 16,
   },
   inputGroup: {
     flex: 1,
-    marginBottom: 16,
-  },
-  label: {
-    fontSize: theme.typography.fontSize.sm,
-    fontWeight: theme.typography.fontWeight.semibold,
-    color: theme.colors.gray700,
-    marginBottom: 8,
+    marginBottom: 4,
   },
   inputContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    backgroundColor: theme.colors.gray50,
-    borderRadius: theme.borderRadius.lg,
-    borderWidth: 1,
-    borderColor: theme.colors.gray200,
-    paddingHorizontal: 12,
-    gap: 8,
+    flexDirection: "row",
+    alignItems: "center",
+    borderRadius: 14,
+    borderWidth: 1.5,
+    paddingHorizontal: 14,
+    gap: 10,
   },
   input: {
     flex: 1,
-    paddingVertical: 12,
-    fontSize: theme.typography.fontSize.base,
-    color: theme.colors.gray900,
+    paddingVertical: 14,
+    fontSize: 16,
+    fontWeight: "600",
   },
   textArea: {
-    backgroundColor: theme.colors.gray50,
-    borderRadius: theme.borderRadius.lg,
-    borderWidth: 1,
-    borderColor: theme.colors.gray200,
-    padding: 12,
-    fontSize: theme.typography.fontSize.base,
-    color: theme.colors.gray900,
-    minHeight: 80,
+    borderRadius: 14,
+    borderWidth: 1.5,
+    padding: 14,
+    fontSize: 16,
+    minHeight: 90,
   },
-  optionsRow: {
-    flexDirection: 'row',
-    gap: 12,
+  genderRow: {
+    flexDirection: "row",
+    gap: 10,
   },
-  optionCard: {
+  genderCard: {
     flex: 1,
-    backgroundColor: '#fff',
-    borderRadius: theme.borderRadius.lg,
-    padding: 16,
-    alignItems: 'center',
-    gap: 8,
+    paddingVertical: 16,
+    paddingHorizontal: 8,
+    borderRadius: 14,
     borderWidth: 2,
-    borderColor: theme.colors.gray200,
-    ...theme.shadows.subtle,
-  },
-  optionCardActive: {
-    borderColor: theme.colors.primary,
-    backgroundColor: `${theme.colors.primary}10`,
-  },
-  optionLabel: {
-    fontSize: theme.typography.fontSize.sm,
-    fontWeight: theme.typography.fontWeight.medium,
-    color: theme.colors.gray600,
-  },
-  optionLabelActive: {
-    color: theme.colors.primary,
-    fontWeight: theme.typography.fontWeight.bold,
+    alignItems: "center",
   },
   listItem: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingVertical: 12,
-    gap: 12,
+    flexDirection: "row",
+    alignItems: "center",
+    paddingVertical: 14,
+    paddingHorizontal: 12,
+    gap: 14,
   },
   iconCircle: {
-    width: 40,
-    height: 40,
-    borderRadius: 20,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  listItemText: {
-    flex: 1,
-    fontSize: theme.typography.fontSize.base,
-    fontWeight: theme.typography.fontWeight.medium,
-    color: theme.colors.gray900,
-  },
-  listItemDescription: {
-    fontSize: theme.typography.fontSize.xs,
-    color: theme.colors.gray500,
-    marginTop: 2,
+    width: 44,
+    height: 44,
+    borderRadius: 12,
+    justifyContent: "center",
+    alignItems: "center",
   },
   divider: {
     height: 1,
-    backgroundColor: theme.colors.gray100,
+    marginLeft: 58,
   },
   footer: {
-    position: 'absolute',
+    position: "absolute",
     bottom: 0,
     left: 0,
     right: 0,
     padding: 20,
-    paddingBottom: Platform.OS === 'ios' ? 40 : 20,
-    backgroundColor: '#fff',
+    paddingBottom: 34,
     borderTopWidth: 1,
-    borderTopColor: theme.colors.gray100,
-    ...theme.shadows.medium,
-  },
-  saveButton: {
-    borderRadius: theme.borderRadius.lg,
-    overflow: 'hidden',
-  },
-  saveButtonGradient: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingVertical: 16,
-    gap: 8,
-  },
-  saveButtonDisabled: {
-    opacity: 0.6,
-  },
-  saveButtonText: {
-    fontSize: theme.typography.fontSize.base,
-    fontWeight: theme.typography.fontWeight.bold,
-    color: '#fff',
   },
 });

apps/mobile/src/components/ActivityRing.tsx

@@ -0,0 +1,128 @@
+import React, { useEffect, useRef } from "react";
+import { View, Animated, StyleSheet, Text } from "react-native";
+import Svg, { Circle } from "react-native-svg";
+import { useTheme } from "../contexts/ThemeContext";
+
+const AnimatedCircle = Animated.createAnimatedComponent(Circle);
+
+interface ActivityRingProps {
+  size?: number;
+  strokeWidth?: number;
+  progress: number;
+  current: number;
+  goal: number;
+  label: string;
+  color: string;
+  icon?: React.ReactNode;
+}
+
+export function ActivityRing({
+  size = 100,
+  strokeWidth = 10,
+  progress,
+  current,
+  goal,
+  label,
+  color,
+  icon,
+}: ActivityRingProps) {
+  const { colors, typography } = useTheme();
+  const animatedValue = useRef(new Animated.Value(0)).current;
+  const radius = (size - strokeWidth) / 2;
+  const circumference = radius * 2 * Math.PI;
+
+  useEffect(() => {
+    Animated.timing(animatedValue, {
+      toValue: Math.min(progress, 100),
+      duration: 1200,
+      useNativeDriver: true,
+    }).start();
+  }, [progress]);
+
+  const strokeDashoffset = animatedValue.interpolate({
+    inputRange: [0, 100],
+    outputRange: [circumference, 0],
+  });
+
+  return (
+    <View style={styles.container}>
+      <View
+        style={{
+          width: size,
+          height: size,
+          justifyContent: "center",
+          alignItems: "center",
+        }}
+      >
+        <Svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
+          <Circle
+            cx={size / 2}
+            cy={size / 2}
+            r={radius}
+            stroke={colors.surfaceElevated}
+            strokeWidth={strokeWidth}
+            fill="transparent"
+          />
+          <AnimatedCircle
+            cx={size / 2}
+            cy={size / 2}
+            r={radius}
+            stroke={color}
+            strokeWidth={strokeWidth}
+            fill="transparent"
+            strokeDasharray={circumference}
+            strokeDashoffset={strokeDashoffset}
+            strokeLinecap="round"
+            rotation="-90"
+            origin={`${size / 2}, ${size / 2}`}
+          />
+        </Svg>
+        <View
+          style={[
+            StyleSheet.absoluteFillObject,
+            { justifyContent: "center", alignItems: "center" },
+          ]}
+        >
+          {icon ? (
+            <View style={styles.iconContainer}>{icon}</View>
+          ) : (
+            <Text
+              style={[
+                typography.statLarge,
+                { color: colors.textPrimary, fontSize: size * 0.28 },
+              ]}
+            >
+              {Math.round(current)}
+            </Text>
+          )}
+        </View>
+      </View>
+      <Text
+        style={[
+          typography.label,
+          { color: colors.textTertiary, marginTop: 8, textAlign: "center" },
+        ]}
+      >
+        {label}
+      </Text>
+      <Text
+        style={[
+          typography.caption,
+          { color: colors.textSecondary, marginTop: 2 },
+        ]}
+      >
+        / {goal.toLocaleString()}
+      </Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: "center",
+  },
+  iconContainer: {
+    justifyContent: "center",
+    alignItems: "center",
+  },
+});

apps/mobile/src/components/Badge.tsx

@@ -0,0 +1,117 @@
+import React from "react";
+import { View, Text, StyleSheet, ViewStyle, StyleProp } from "react-native";
+import { useTheme } from "../contexts/ThemeContext";
+import { fontSize, fontWeight } from "../styles/typography";
+
+type BadgeVariant =
+  | "neutral"
+  | "success"
+  | "warning"
+  | "danger"
+  | "info"
+  | "primary";
+type BadgeSize = "sm" | "md" | "lg";
+
+interface BadgeProps {
+  label: string;
+  variant?: BadgeVariant;
+  size?: BadgeSize;
+  style?: StyleProp<ViewStyle>;
+  emoji?: string;
+}
+
+export function Badge({
+  label,
+  variant = "neutral",
+  size = "md",
+  style,
+  emoji,
+}: BadgeProps) {
+  const { colors } = useTheme();
+
+  const sizeStyles = {
+    sm: {
+      paddingVertical: 6,
+      paddingHorizontal: 12,
+      fontSize: fontSize.xs,
+    },
+    md: {
+      paddingVertical: 8,
+      paddingHorizontal: 14,
+      fontSize: fontSize.sm,
+    },
+    lg: {
+      paddingVertical: 10,
+      paddingHorizontal: 18,
+      fontSize: fontSize.base,
+    },
+  };
+
+  const variantStyles: Record<
+    BadgeVariant,
+    { backgroundColor: string; color: string }
+  > = {
+    neutral: {
+      backgroundColor: colors.surfaceElevated,
+      color: colors.textSecondary,
+    },
+    success: {
+      backgroundColor: colors.success,
+      color: colors.white,
+    },
+    warning: {
+      backgroundColor: colors.warning,
+      color: colors.black,
+    },
+    danger: {
+      backgroundColor: colors.danger,
+      color: colors.white,
+    },
+    info: {
+      backgroundColor: colors.info,
+      color: colors.white,
+    },
+    primary: {
+      backgroundColor: colors.primary,
+      color: colors.white,
+    },
+  };
+
+  return (
+    <View
+      style={[
+        styles.badge,
+        {
+          backgroundColor: variantStyles[variant].backgroundColor,
+          paddingVertical: sizeStyles[size].paddingVertical,
+          paddingHorizontal: sizeStyles[size].paddingHorizontal,
+        },
+        style,
+      ]}
+    >
+      <Text
+        style={[
+          styles.label,
+          {
+            color: variantStyles[variant].color,
+            fontSize: sizeStyles[size].fontSize,
+            fontWeight: fontWeight.bold,
+          },
+        ]}
+      >
+        {emoji && `${emoji} `}
+        {label}
+      </Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  badge: {
+    borderRadius: 12,
+    alignSelf: "flex-start",
+  },
+  label: {
+    textAlign: "center",
+  },
+});

apps/mobile/src/components/CustomTabBar.tsx

@@ -1,143 +1,151 @@
-import React from 'react';
-import { View, StyleSheet, TouchableOpacity, Platform, Dimensions } from 'react-native';
-import { BottomTabBarProps } from '@react-navigation/bottom-tabs';
-import { Ionicons } from '@expo/vector-icons';
-import { LinearGradient } from 'expo-linear-gradient';
-import { theme } from '../styles/theme';
-import { Animated } from 'react-native';
+import React from "react";
+import { View, StyleSheet, TouchableOpacity, Text } from "react-native";
+import { BottomTabBarProps } from "@react-navigation/bottom-tabs";
+import { Ionicons } from "@expo/vector-icons";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { useTheme } from "../contexts/ThemeContext";
 
-const { width } = Dimensions.get('window');
+export function CustomTabBar({
+  state,
+  descriptors,
+  navigation,
+}: BottomTabBarProps) {
+  const { colors } = useTheme();
+  const insets = useSafeAreaInsets();
 
-export function CustomTabBar({ state, descriptors, navigation }: BottomTabBarProps) {
-    return (
-        <View style={styles.container}>
-            <LinearGradient
-                colors={['rgba(255, 255, 255, 0.9)', 'rgba(255, 255, 255, 0.7)']}
-                style={[styles.tabBar, theme.shadows.medium]}
-                start={{ x: 0, y: 0 }}
-                end={{ x: 0, y: 1 }}
+  return (
+    <View
+      style={[
+        styles.container,
+        {
+          backgroundColor: colors.surface,
+          borderTopColor: colors.border,
+          paddingBottom: insets.bottom,
+        },
+      ]}
+    >
+      {state.routes.map((route, index) => {
+        const { options } = descriptors[route.key];
+        const isFocused = state.index === index;
+
+        const onPress = () => {
+          const event = navigation.emit({
+            type: "tabPress",
+            target: route.key,
+            canPreventDefault: true,
+          });
+
+          if (!isFocused && !event.defaultPrevented) {
+            navigation.navigate(route.name);
+          }
+        };
+
+        const getIconName = (
+          routeName: string,
+          focused: boolean,
+        ): keyof typeof Ionicons.glyphMap => {
+          switch (routeName) {
+            case "index":
+              return focused ? "home" : "home-outline";
+            case "goals":
+              return focused ? "trophy" : "trophy-outline";
+            case "attendance":
+              return focused ? "calendar" : "calendar-outline";
+            case "recommendations":
+              return focused ? "sparkles" : "sparkles-outline";
+            case "profile":
+              return focused ? "person" : "person-outline";
+            default:
+              return "ellipse-outline";
+          }
+        };
+
+        const getLabel = (routeName: string) => {
+          switch (routeName) {
+            case "index":
+              return "Home";
+            case "goals":
+              return "Goals";
+            case "attendance":
+              return "Attendance";
+            case "recommendations":
+              return "Plans";
+            case "profile":
+              return "Profile";
+            default:
+              return "";
+          }
+        };
+
+        return (
+          <TouchableOpacity
+            key={index}
+            accessibilityRole="button"
+            accessibilityState={isFocused ? { selected: true } : {}}
+            accessibilityLabel={options.tabBarAccessibilityLabel}
+            testID={(options as any).tabBarTestID}
+            onPress={onPress}
+            style={styles.tabItem}
+            activeOpacity={0.7}
+          >
+            <View style={styles.iconWrapper}>
+              <Ionicons
+                name={getIconName(route.name, isFocused)}
+                size={26}
+                color={isFocused ? colors.primary : colors.textTertiary}
+              />
+              {isFocused && (
+                <View
+                  style={[
+                    styles.indicator,
+                    { backgroundColor: colors.primary },
+                  ]}
+                />
+              )}
+            </View>
+            <Text
+              style={[
+                styles.label,
+                {
+                  color: isFocused ? colors.primary : colors.textTertiary,
+                  fontWeight: isFocused ? "700" : "500",
+                },
+              ]}
             >
-                {state.routes.map((route, index) => {
-                    const { options } = descriptors[route.key];
-                    const isFocused = state.index === index;
-
-                    const onPress = () => {
-                        const event = navigation.emit({
-                            type: 'tabPress',
-                            target: route.key,
-                            canPreventDefault: true,
-                        });
-
-                        if (!isFocused && !event.defaultPrevented) {
-                            navigation.navigate(route.name);
-                        }
-                    };
-
-                    const getIconName = (routeName: string, focused: boolean): keyof typeof Ionicons.glyphMap => {
-                        switch (routeName) {
-                            case 'index':
-                                return focused ? 'home' : 'home-outline';
-                            case 'goals':
-                                return focused ? 'trophy' : 'trophy-outline';
-                            case 'attendance':
-                                return focused ? 'calendar' : 'calendar-outline';
-                            case 'recommendations':
-                                return focused ? 'sparkles' : 'sparkles-outline';
-                            case 'profile':
-                                return focused ? 'person' : 'person-outline';
-                            default:
-                                return 'ellipse-outline';
-                        }
-                    };
-
-                    // Animation for scale
-                    const scaleValue = React.useRef(new Animated.Value(1)).current;
-
-                    React.useEffect(() => {
-                        Animated.spring(scaleValue, {
-                            toValue: isFocused ? 1.2 : 1,
-                            useNativeDriver: true,
-                            friction: 8,
-                        }).start();
-                    }, [isFocused]);
-
-                    return (
-                        <TouchableOpacity
-                            key={index}
-                            accessibilityRole="button"
-                            accessibilityState={isFocused ? { selected: true } : {}}
-                            accessibilityLabel={options.tabBarAccessibilityLabel}
-                            testID={(options as any).tabBarTestID}
-                            onPress={onPress}
-                            style={styles.tabItem}
-                            activeOpacity={0.7}
-                        >
-                            <Animated.View style={{ transform: [{ scale: scaleValue }] }}>
-                                {isFocused ? (
-                                    <LinearGradient
-                                        colors={theme.gradients.primary}
-                                        style={styles.iconContainer}
-                                    >
-                                        <Ionicons
-                                            name={getIconName(route.name, true)}
-                                            size={20}
-                                            color="#fff"
-                                        />
-                                    </LinearGradient>
-                                ) : (
-                                    <Ionicons
-                                        name={getIconName(route.name, false)}
-                                        size={24}
-                                        color={theme.colors.gray500}
-                                    />
-                                )}
-                            </Animated.View>
-                        </TouchableOpacity>
-                    );
-                })}
-            </LinearGradient>
-        </View>
-    );
+              {getLabel(route.name)}
+            </Text>
+          </TouchableOpacity>
+        );
+      })}
+    </View>
+  );
 }
 
 const styles = StyleSheet.create({
-    container: {
-        position: 'absolute',
-        bottom: 0,
-        left: 0,
-        right: 0,
-        alignItems: 'center',
-        paddingBottom: Platform.OS === 'ios' ? 30 : 20,
-        pointerEvents: 'box-none',
-    },
-    tabBar: {
-        flexDirection: 'row',
-        backgroundColor: 'rgba(255, 255, 255, 0.8)',
-        borderRadius: 35,
-        height: 70,
-        width: width - 40,
-        justifyContent: 'space-around',
-        alignItems: 'center',
-        borderWidth: 1,
-        borderColor: 'rgba(255, 255, 255, 0.5)',
-        paddingHorizontal: 10,
-    },
-    tabItem: {
-        flex: 1,
-        alignItems: 'center',
-        justifyContent: 'center',
-        height: '100%',
-    },
-    iconContainer: {
-        width: 40,
-        height: 40,
-        borderRadius: 20,
-        alignItems: 'center',
-        justifyContent: 'center',
-        shadowColor: theme.colors.primary,
-        shadowOffset: { width: 0, height: 4 },
-        shadowOpacity: 0.3,
-        shadowRadius: 8,
-        elevation: 4,
-    },
+  container: {
+    flexDirection: "row",
+    height: 70,
+    borderTopWidth: 1,
+    paddingTop: 8,
+  },
+  tabItem: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    height: "100%",
+  },
+  iconWrapper: {
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  indicator: {
+    width: 20,
+    height: 4,
+    borderRadius: 2,
+    marginTop: 4,
+  },
+  label: {
+    fontSize: 11,
+    marginTop: 4,
+  },
 });

apps/mobile/src/components/GoalCreationModal.tsx

@@ -1,426 +1,526 @@
-import React, { useState } from 'react';
+import React, { useState } from "react";
 import {
-    View,
-    Text,
-    StyleSheet,
-    Modal,
-    TextInput,
-    TouchableOpacity,
-    ScrollView,
-    Platform,
-    Alert,
-} from 'react-native';
-import { Ionicons } from '@expo/vector-icons';
-import DateTimePicker from '@react-native-community/datetimepicker';
-import type { CreateGoalData } from '../services/fitnessGoals';
+  View,
+  Text,
+  StyleSheet,
+  Modal,
+  TextInput,
+  TouchableOpacity,
+  ScrollView,
+  Platform,
+  Alert,
+} from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+import DateTimePicker from "@react-native-community/datetimepicker";
+import type { CreateGoalData } from "../services/fitnessGoals";
+import { useTheme } from "../contexts/ThemeContext";
+import { MinimalButton } from "./MinimalButton";
 
 interface GoalCreationModalProps {
-    visible: boolean;
-    onClose: () => void;
-    onSubmit: (goalData: CreateGoalData) => Promise<void>;
+  visible: boolean;
+  onClose: () => void;
+  onSubmit: (goalData: CreateGoalData) => Promise<void>;
 }
 
 const GOAL_TYPES = [
-    { value: 'weight_target', label: 'Weight Target' },
-    { value: 'strength_milestone', label: 'Strength Milestone' },
-    { value: 'endurance_target', label: 'Endurance Target' },
-    { value: 'flexibility_goal', label: 'Flexibility Goal' },
-    { value: 'habit_building', label: 'Habit Building' },
-    { value: 'custom', label: 'Custom Goal' },
+  { value: "weight_target", label: "Weight Target" },
+  { value: "strength_milestone", label: "Strength Milestone" },
+  { value: "endurance_target", label: "Endurance Target" },
+  { value: "flexibility_goal", label: "Flexibility Goal" },
+  { value: "habit_building", label: "Habit Building" },
+  { value: "custom", label: "Custom Goal" },
 ] as const;
 
 const PRIORITIES = [
-    { value: 'low', label: 'Low', color: '#10b981' },
-    { value: 'medium', label: 'Medium', color: '#f59e0b' },
-    { value: 'high', label: 'High', color: '#ef4444' },
+  { value: "low", label: "Low" },
+  { value: "medium", label: "Medium" },
+  { value: "high", label: "High" },
 ] as const;
 
-export function GoalCreationModal({ visible, onClose, onSubmit }: GoalCreationModalProps) {
-    const [goalType, setGoalType] = useState<CreateGoalData['goalType']>('weight_target');
-    const [title, setTitle] = useState('');
-    const [description, setDescription] = useState('');
-    const [targetValue, setTargetValue] = useState('');
-    const [currentValue, setCurrentValue] = useState('');
-    const [unit, setUnit] = useState('');
-    const [priority, setPriority] = useState<'low' | 'medium' | 'high'>('medium');
-    const [targetDate, setTargetDate] = useState<Date | undefined>();
-    const [showDatePicker, setShowDatePicker] = useState(false);
-    const [submitting, setSubmitting] = useState(false);
+export function GoalCreationModal({
+  visible,
+  onClose,
+  onSubmit,
+}: GoalCreationModalProps) {
+  const { colors, typography } = useTheme();
+  const [goalType, setGoalType] =
+    useState<CreateGoalData["goalType"]>("weight_target");
+  const [title, setTitle] = useState("");
+  const [description, setDescription] = useState("");
+  const [targetValue, setTargetValue] = useState("");
+  const [currentValue, setCurrentValue] = useState("");
+  const [unit, setUnit] = useState("");
+  const [priority, setPriority] = useState<"low" | "medium" | "high">("medium");
+  const [targetDate, setTargetDate] = useState<Date | undefined>();
+  const [showDatePicker, setShowDatePicker] = useState(false);
+  const [submitting, setSubmitting] = useState(false);
 
-    const resetForm = () => {
-        setGoalType('weight_target');
-        setTitle('');
-        setDescription('');
-        setTargetValue('');
-        setCurrentValue('');
-        setUnit('');
-        setPriority('medium');
-        setTargetDate(undefined);
-    };
+  const resetForm = () => {
+    setGoalType("weight_target");
+    setTitle("");
+    setDescription("");
+    setTargetValue("");
+    setCurrentValue("");
+    setUnit("");
+    setPriority("medium");
+    setTargetDate(undefined);
+  };
 
-    const handleSubmit = async () => {
-        if (!title.trim()) {
-            Alert.alert('Error', 'Please enter a goal title');
-            return;
-        }
+  const handleSubmit = async () => {
+    if (!title.trim()) {
+      Alert.alert("Error", "Please enter a goal title");
+      return;
+    }
 
-        setSubmitting(true);
-        try {
-            const goalData: CreateGoalData = {
-                goalType,
-                title: title.trim(),
-                description: description.trim() || undefined,
-                targetValue: targetValue ? parseFloat(targetValue) : undefined,
-                currentValue: currentValue ? parseFloat(currentValue) : undefined,
-                unit: unit.trim() || undefined,
-                targetDate: targetDate?.toISOString(),
-                priority,
-            };
+    setSubmitting(true);
+    try {
+      const goalData: CreateGoalData = {
+        goalType,
+        title: title.trim(),
+        description: description.trim() || undefined,
+        targetValue: targetValue ? parseFloat(targetValue) : undefined,
+        currentValue: currentValue ? parseFloat(currentValue) : undefined,
+        unit: unit.trim() || undefined,
+        targetDate: targetDate?.toISOString(),
+        priority,
+      };
 
-            await onSubmit(goalData);
-            resetForm();
-            onClose();
-        } catch (error) {
-            console.error('Error creating goal:', error);
-            Alert.alert('Error', 'Failed to create goal. Please try again.');
-        } finally {
-            setSubmitting(false);
-        }
-    };
+      await onSubmit(goalData);
+      resetForm();
+      onClose();
+    } catch (error) {
+      console.error("Error creating goal:", error);
+      Alert.alert("Error", "Failed to create goal. Please try again.");
+    } finally {
+      setSubmitting(false);
+    }
+  };
 
-    const handleClose = () => {
-        resetForm();
-        onClose();
-    };
+  const handleClose = () => {
+    resetForm();
+    onClose();
+  };
 
-    return (
-        <Modal
-            visible={visible}
-            animationType="slide"
-            presentationStyle="pageSheet"
-            onRequestClose={handleClose}
+  const getPriorityColor = (p: "low" | "medium" | "high") => {
+    switch (p) {
+      case "high":
+        return colors.danger;
+      case "medium":
+        return colors.warning;
+      case "low":
+        return colors.success;
+    }
+  };
+
+  return (
+    <Modal
+      visible={visible}
+      animationType="slide"
+      presentationStyle="pageSheet"
+      onRequestClose={handleClose}
+    >
+      <View style={[styles.container, { backgroundColor: colors.background }]}>
+        <View
+          style={[
+            styles.header,
+            {
+              backgroundColor: colors.surface,
+              borderBottomColor: colors.border,
+            },
+          ]}
         >
-            <View style={styles.container}>
-                <View style={styles.header}>
-                    <Text style={styles.headerTitle}>Create Fitness Goal</Text>
-                    <TouchableOpacity onPress={handleClose} style={styles.closeButton}>
-                        <Ionicons name="close" size={28} color="#111827" />
-                    </TouchableOpacity>
-                </View>
+          <Text style={[typography.h2, { color: colors.textPrimary }]}>
+            Create Fitness Goal
+          </Text>
+          <TouchableOpacity onPress={handleClose} style={styles.closeButton}>
+            <Ionicons name="close" size={28} color={colors.textPrimary} />
+          </TouchableOpacity>
+        </View>
 
-                <ScrollView style={styles.content} showsVerticalScrollIndicator={false}>
-                    {/* Goal Type */}
-                    <View style={styles.field}>
-                        <Text style={styles.label}>Goal Type *</Text>
-                        <ScrollView horizontal showsHorizontalScrollIndicator={false} style={styles.typeScroll}>
-                            {GOAL_TYPES.map((type) => (
-                                <TouchableOpacity
-                                    key={type.value}
-                                    style={[
-                                        styles.typeButton,
-                                        goalType === type.value && styles.typeButtonActive,
-                                    ]}
-                                    onPress={() => setGoalType(type.value)}
-                                >
-                                    <Text
-                                        style={[
-                                            styles.typeButtonText,
-                                            goalType === type.value && styles.typeButtonTextActive,
-                                        ]}
-                                    >
-                                        {type.label}
-                                    </Text>
-                                </TouchableOpacity>
-                            ))}
-                        </ScrollView>
-                    </View>
+        <ScrollView style={styles.content} showsVerticalScrollIndicator={false}>
+          {/* Goal Type */}
+          <View style={styles.field}>
+            <Text
+              style={[typography.bodyEmphasis, { color: colors.textPrimary }]}
+            >
+              Goal Type *
+            </Text>
+            <ScrollView
+              horizontal
+              showsHorizontalScrollIndicator={false}
+              style={styles.typeScroll}
+            >
+              {GOAL_TYPES.map((type) => (
+                <TouchableOpacity
+                  key={type.value}
+                  style={[
+                    styles.typeButton,
+                    {
+                      borderColor: colors.border,
+                      backgroundColor: colors.surface,
+                    },
+                    goalType === type.value && {
+                      backgroundColor: colors.primary,
+                      borderColor: colors.primary,
+                    },
+                  ]}
+                  onPress={() => setGoalType(type.value)}
+                >
+                  <Text
+                    style={[
+                      typography.caption,
+                      { color: colors.textSecondary },
+                      goalType === type.value && {
+                        color: colors.white,
+                        fontWeight: "600",
+                      },
+                    ]}
+                  >
+                    {type.label}
+                  </Text>
+                </TouchableOpacity>
+              ))}
+            </ScrollView>
+          </View>
 
-                    {/* Title */}
-                    <View style={styles.field}>
-                        <Text style={styles.label}>Title *</Text>
-                        <TextInput
-                            style={styles.input}
-                            value={title}
-                            onChangeText={setTitle}
-                            placeholder="e.g., Lose 5kg"
-                            placeholderTextColor="#9ca3af"
-                        />
-                    </View>
+          {/* Title */}
+          <View style={styles.field}>
+            <Text
+              style={[typography.bodyEmphasis, { color: colors.textPrimary }]}
+            >
+              Title *
+            </Text>
+            <TextInput
+              style={[
+                styles.input,
+                {
+                  backgroundColor: colors.surface,
+                  borderColor: colors.border,
+                  color: colors.textPrimary,
+                },
+              ]}
+              value={title}
+              onChangeText={setTitle}
+              placeholder="e.g., Lose 5kg"
+              placeholderTextColor={colors.textTertiary}
+            />
+          </View>
 
-                    {/* Description */}
-                    <View style={styles.field}>
-                        <Text style={styles.label}>Description</Text>
-                        <TextInput
-                            style={[styles.input, styles.textArea]}
-                            value={description}
-                            onChangeText={setDescription}
-                            placeholder="Optional description"
-                            placeholderTextColor="#9ca3af"
-                            multiline
-                            numberOfLines={3}
-                        />
-                    </View>
+          {/* Description */}
+          <View style={styles.field}>
+            <Text
+              style={[typography.bodyEmphasis, { color: colors.textPrimary }]}
+            >
+              Description
+            </Text>
+            <TextInput
+              style={[
+                styles.input,
+                styles.textArea,
+                {
+                  backgroundColor: colors.surface,
+                  borderColor: colors.border,
+                  color: colors.textPrimary,
+                },
+              ]}
+              value={description}
+              onChangeText={setDescription}
+              placeholder="Optional description"
+              placeholderTextColor={colors.textTertiary}
+              multiline
+              numberOfLines={3}
+            />
+          </View>
 
-                    {/* Target Value & Unit */}
-                    <View style={styles.row}>
-                        <View style={[styles.field, styles.flex1]}>
-                            <Text style={styles.label}>Target Value</Text>
-                            <TextInput
-                                style={styles.input}
-                                value={targetValue}
-                                onChangeText={setTargetValue}
-                                placeholder="e.g., 70"
-                                placeholderTextColor="#9ca3af"
-                                keyboardType="numeric"
-                            />
-                        </View>
-                        <View style={[styles.field, styles.flex1]}>
-                            <Text style={styles.label}>Unit</Text>
-                            <TextInput
-                                style={styles.input}
-                                value={unit}
-                                onChangeText={setUnit}
-                                placeholder="e.g., kg"
-                                placeholderTextColor="#9ca3af"
-                            />
-                        </View>
-                    </View>
-
-                    {/* Current Value */}
-                    <View style={styles.field}>
-                        <Text style={styles.label}>Current Value</Text>
-                        <TextInput
-                            style={styles.input}
-                            value={currentValue}
-                            onChangeText={setCurrentValue}
-                            placeholder="Starting value (optional)"
-                            placeholderTextColor="#9ca3af"
-                            keyboardType="numeric"
-                        />
-                    </View>
-
-                    {/* Target Date */}
-                    <View style={styles.field}>
-                        <Text style={styles.label}>Target Date</Text>
-                        <TouchableOpacity
-                            style={styles.dateButton}
-                            onPress={() => setShowDatePicker(!showDatePicker)}
-                        >
-                            <Text style={targetDate ? styles.dateText : styles.datePlaceholder}>
-                                {targetDate ? targetDate.toLocaleDateString() : 'Select target date'}
-                            </Text>
-                            <Ionicons name={showDatePicker ? "chevron-up" : "calendar-outline"} size={20} color="#6b7280" />
-                        </TouchableOpacity>
-                    </View>
-
-                    {showDatePicker && (
-                        <View style={Platform.OS === 'ios' ? styles.datePickerContainer : undefined}>
-                            <DateTimePicker
-                                value={targetDate || new Date()}
-                                mode="date"
-                                display={Platform.OS === 'ios' ? 'inline' : 'default'}
-                                onChange={(event, selectedDate) => {
-                                    setShowDatePicker(Platform.OS === 'ios');
-                                    if (selectedDate) {
-                                        setTargetDate(selectedDate);
-                                    }
-                                }}
-                                minimumDate={new Date()}
-                                themeVariant="light"
-                            />
-                        </View>
-                    )}
-
-                    {/* Priority */}
-                    <View style={styles.field}>
-                        <Text style={styles.label}>Priority</Text>
-                        <View style={styles.priorityContainer}>
-                            {PRIORITIES.map((p) => (
-                                <TouchableOpacity
-                                    key={p.value}
-                                    style={[
-                                        styles.priorityButton,
-                                        priority === p.value && { backgroundColor: p.color },
-                                    ]}
-                                    onPress={() => setPriority(p.value)}
-                                >
-                                    <Text
-                                        style={[
-                                            styles.priorityButtonText,
-                                            priority === p.value && styles.priorityButtonTextActive,
-                                        ]}
-                                    >
-                                        {p.label}
-                                    </Text>
-                                </TouchableOpacity>
-                            ))}
-                        </View>
-                    </View>
-                </ScrollView>
-
-                <View style={styles.footer}>
-                    <TouchableOpacity
-                        style={[styles.submitButton, submitting && styles.submitButtonDisabled]}
-                        onPress={handleSubmit}
-                        disabled={submitting}
-                    >
-                        <Text style={styles.submitButtonText}>
-                            {submitting ? 'Creating...' : 'Create Goal'}
-                        </Text>
-                    </TouchableOpacity>
-                </View>
+          {/* Target Value & Unit */}
+          <View style={styles.row}>
+            <View style={[styles.field, styles.flex1]}>
+              <Text
+                style={[typography.bodyEmphasis, { color: colors.textPrimary }]}
+              >
+                Target Value
+              </Text>
+              <TextInput
+                style={[
+                  styles.input,
+                  {
+                    backgroundColor: colors.surface,
+                    borderColor: colors.border,
+                    color: colors.textPrimary,
+                  },
+                ]}
+                value={targetValue}
+                onChangeText={setTargetValue}
+                placeholder="e.g., 70"
+                placeholderTextColor={colors.textTertiary}
+                keyboardType="numeric"
+              />
             </View>
-        </Modal>
-    );
+            <View style={[styles.field, styles.flex1]}>
+              <Text
+                style={[typography.bodyEmphasis, { color: colors.textPrimary }]}
+              >
+                Unit
+              </Text>
+              <TextInput
+                style={[
+                  styles.input,
+                  {
+                    backgroundColor: colors.surface,
+                    borderColor: colors.border,
+                    color: colors.textPrimary,
+                  },
+                ]}
+                value={unit}
+                onChangeText={setUnit}
+                placeholder="e.g., kg"
+                placeholderTextColor={colors.textTertiary}
+              />
+            </View>
+          </View>
+
+          {/* Current Value */}
+          <View style={styles.field}>
+            <Text
+              style={[typography.bodyEmphasis, { color: colors.textPrimary }]}
+            >
+              Current Value
+            </Text>
+            <TextInput
+              style={[
+                styles.input,
+                {
+                  backgroundColor: colors.surface,
+                  borderColor: colors.border,
+                  color: colors.textPrimary,
+                },
+              ]}
+              value={currentValue}
+              onChangeText={setCurrentValue}
+              placeholder="Starting value (optional)"
+              placeholderTextColor={colors.textTertiary}
+              keyboardType="numeric"
+            />
+          </View>
+
+          {/* Target Date */}
+          <View style={styles.field}>
+            <Text
+              style={[typography.bodyEmphasis, { color: colors.textPrimary }]}
+            >
+              Target Date
+            </Text>
+            <TouchableOpacity
+              style={[
+                styles.dateButton,
+                {
+                  backgroundColor: colors.surface,
+                  borderColor: colors.border,
+                },
+              ]}
+              onPress={() => setShowDatePicker(!showDatePicker)}
+            >
+              <Text
+                style={[
+                  typography.body,
+                  {
+                    color: targetDate
+                      ? colors.textPrimary
+                      : colors.textTertiary,
+                  },
+                ]}
+              >
+                {targetDate
+                  ? targetDate.toLocaleDateString()
+                  : "Select target date"}
+              </Text>
+              <Ionicons
+                name={showDatePicker ? "chevron-up" : "calendar-outline"}
+                size={20}
+                color={colors.textSecondary}
+              />
+            </TouchableOpacity>
+          </View>
+
+          {showDatePicker && (
+            <View
+              style={
+                Platform.OS === "ios"
+                  ? [
+                      styles.datePickerContainer,
+                      {
+                        backgroundColor: colors.surface,
+                        borderColor: colors.border,
+                      },
+                    ]
+                  : undefined
+              }
+            >
+              <DateTimePicker
+                value={targetDate || new Date()}
+                mode="date"
+                display={Platform.OS === "ios" ? "inline" : "default"}
+                onChange={(event, selectedDate) => {
+                  setShowDatePicker(Platform.OS === "ios");
+                  if (selectedDate) {
+                    setTargetDate(selectedDate);
+                  }
+                }}
+                minimumDate={new Date()}
+                themeVariant="light"
+              />
+            </View>
+          )}
+
+          {/* Priority */}
+          <View style={styles.field}>
+            <Text
+              style={[typography.bodyEmphasis, { color: colors.textPrimary }]}
+            >
+              Priority
+            </Text>
+            <View style={styles.priorityContainer}>
+              {PRIORITIES.map((p) => (
+                <TouchableOpacity
+                  key={p.value}
+                  style={[
+                    styles.priorityButton,
+                    {
+                      borderColor: colors.border,
+                      backgroundColor: colors.surface,
+                    },
+                    priority === p.value && {
+                      backgroundColor: getPriorityColor(p.value),
+                      borderColor: getPriorityColor(p.value),
+                    },
+                  ]}
+                  onPress={() => setPriority(p.value)}
+                >
+                  <Text
+                    style={[
+                      typography.body,
+                      { color: colors.textSecondary },
+                      priority === p.value && {
+                        color: colors.white,
+                        fontWeight: "600",
+                      },
+                    ]}
+                  >
+                    {p.label}
+                  </Text>
+                </TouchableOpacity>
+              ))}
+            </View>
+          </View>
+        </ScrollView>
+
+        <View
+          style={[
+            styles.footer,
+            {
+              backgroundColor: colors.surface,
+              borderTopColor: colors.border,
+            },
+          ]}
+        >
+          <MinimalButton
+            variant="primary"
+            title={submitting ? "Creating..." : "Create Goal"}
+            onPress={handleSubmit}
+            disabled={submitting}
+            loading={submitting}
+            style={styles.submitButton}
+          />
+        </View>
+      </View>
+    </Modal>
+  );
 }
 
 const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        backgroundColor: '#f9fafb',
-    },
-    header: {
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        padding: 20,
-        paddingTop: Platform.OS === 'ios' ? 60 : 20,
-        backgroundColor: '#fff',
-        borderBottomWidth: 1,
-        borderBottomColor: '#e5e7eb',
-    },
-    headerTitle: {
-        fontSize: 20,
-        fontWeight: '600',
-        color: '#111827',
-    },
-    closeButton: {
-        padding: 4,
-    },
-    content: {
-        flex: 1,
-        padding: 20,
-    },
-    field: {
-        marginBottom: 20,
-    },
-    label: {
-        fontSize: 14,
-        fontWeight: '600',
-        color: '#374151',
-        marginBottom: 8,
-    },
-    input: {
-        backgroundColor: '#fff',
-        borderWidth: 1,
-        borderColor: '#d1d5db',
-        borderRadius: 8,
-        padding: 12,
-        fontSize: 16,
-        color: '#111827',
-    },
-    textArea: {
-        height: 80,
-        textAlignVertical: 'top',
-    },
-    row: {
-        flexDirection: 'row',
-        gap: 12,
-    },
-    flex1: {
-        flex: 1,
-    },
-    typeScroll: {
-        flexGrow: 0,
-    },
-    typeButton: {
-        paddingHorizontal: 16,
-        paddingVertical: 8,
-        borderRadius: 8,
-        borderWidth: 1,
-        borderColor: '#d1d5db',
-        backgroundColor: '#fff',
-        marginRight: 8,
-    },
-    typeButtonActive: {
-        backgroundColor: '#2563eb',
-        borderColor: '#2563eb',
-    },
-    typeButtonText: {
-        fontSize: 14,
-        color: '#374151',
-    },
-    typeButtonTextActive: {
-        color: '#fff',
-        fontWeight: '600',
-    },
-    dateButton: {
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        backgroundColor: '#fff',
-        borderWidth: 1,
-        borderColor: '#d1d5db',
-        borderRadius: 8,
-        padding: 12,
-    },
-    dateText: {
-        fontSize: 16,
-        color: '#111827',
-    },
-    datePlaceholder: {
-        fontSize: 16,
-        color: '#9ca3af',
-    },
-    priorityContainer: {
-        flexDirection: 'row',
-        gap: 12,
-    },
-    priorityButton: {
-        flex: 1,
-        paddingVertical: 12,
-        borderRadius: 8,
-        borderWidth: 1,
-        borderColor: '#d1d5db',
-        backgroundColor: '#fff',
-        alignItems: 'center',
-    },
-    priorityButtonText: {
-        fontSize: 14,
-        color: '#374151',
-        fontWeight: '500',
-    },
-    priorityButtonTextActive: {
-        color: '#fff',
-        fontWeight: '600',
-    },
-    footer: {
-        padding: 20,
-        paddingBottom: Platform.OS === 'ios' ? 40 : 20,
-        backgroundColor: '#fff',
-        borderTopWidth: 1,
-        borderTopColor: '#e5e7eb',
-    },
-    submitButton: {
-        backgroundColor: '#2563eb',
-        borderRadius: 8,
-        padding: 16,
-        alignItems: 'center',
-    },
-    submitButtonDisabled: {
-        opacity: 0.6,
-    },
-    submitButtonText: {
-        fontSize: 16,
-        fontWeight: '600',
-        color: '#fff',
-    },
-    datePickerContainer: {
-        backgroundColor: '#fff',
-        borderRadius: 8,
-        borderWidth: 1,
-        borderColor: '#d1d5db',
-        marginTop: 8,
-        overflow: 'hidden',
-    },
+  container: {
+    flex: 1,
+  },
+  header: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    padding: 20,
+    paddingTop: Platform.OS === "ios" ? 60 : 20,
+    borderBottomWidth: 1,
+  },
+  closeButton: {
+    padding: 4,
+  },
+  content: {
+    flex: 1,
+    padding: 20,
+  },
+  field: {
+    marginBottom: 20,
+  },
+  input: {
+    borderWidth: 1,
+    borderRadius: 8,
+    padding: 12,
+    fontSize: 16,
+    marginTop: 8,
+  },
+  textArea: {
+    height: 80,
+    textAlignVertical: "top",
+  },
+  row: {
+    flexDirection: "row",
+    gap: 12,
+  },
+  flex1: {
+    flex: 1,
+  },
+  typeScroll: {
+    flexGrow: 0,
+    marginTop: 8,
+  },
+  typeButton: {
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+    borderRadius: 8,
+    borderWidth: 1,
+    marginRight: 8,
+  },
+  dateButton: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    borderWidth: 1,
+    borderRadius: 8,
+    padding: 12,
+    marginTop: 8,
+  },
+  priorityContainer: {
+    flexDirection: "row",
+    gap: 12,
+    marginTop: 8,
+  },
+  priorityButton: {
+    flex: 1,
+    paddingVertical: 12,
+    borderRadius: 8,
+    borderWidth: 1,
+    alignItems: "center",
+  },
+  footer: {
+    padding: 20,
+    paddingBottom: Platform.OS === "ios" ? 40 : 20,
+    borderTopWidth: 1,
+  },
+  submitButton: {
+    width: "100%",
+  },
+  datePickerContainer: {
+    borderRadius: 8,
+    borderWidth: 1,
+    marginTop: 8,
+    overflow: "hidden",
+  },
 });

apps/mobile/src/components/GoalProgressCard.tsx

@@ -1,293 +1,333 @@
-import React from 'react';
-import { View, Text, StyleSheet, TouchableOpacity, Alert } from 'react-native';
-import { Ionicons } from '@expo/vector-icons';
-import { LinearGradient } from 'expo-linear-gradient';
-import type { FitnessGoal } from '../services/fitnessGoals';
-import { theme } from '../styles/theme';
+import React, { useEffect, useRef } from "react";
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  Alert,
+  Animated,
+} from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+import type { FitnessGoal } from "../services/fitnessGoals";
+import { useTheme } from "../contexts/ThemeContext";
+import { MinimalCard } from "./MinimalCard";
+import { Badge } from "./Badge";
+import { ProgressBar } from "./ProgressBar";
+import { IconContainer } from "./IconContainer";
 
 interface GoalProgressCardProps {
-    goal: FitnessGoal;
-    onPress?: () => void;
-    onComplete?: () => void;
-    onDelete?: () => void;
+  goal: FitnessGoal;
+  onPress?: () => void;
+  onComplete?: () => void;
+  onDelete?: () => void;
 }
 
-export function GoalProgressCard({ goal, onPress, onComplete, onDelete }: GoalProgressCardProps) {
-    const isCompleted = goal.status === 'completed';
-    const progress = goal.progress || 0;
+export function GoalProgressCard({
+  goal,
+  onPress,
+  onComplete,
+  onDelete,
+}: GoalProgressCardProps) {
+  const { colors, typography } = useTheme();
+  const isCompleted = goal.status === "completed";
+  const progress = (goal.progress || 0) / 100; // Convert to 0-1 scale
+  const scaleAnim = useRef(new Animated.Value(1)).current;
 
-    // Calculate days remaining
-    const daysRemaining = goal.targetDate
-        ? Math.ceil((new Date(goal.targetDate).getTime() - Date.now()) / (1000 * 60 * 60 * 24))
-        : null;
+  // Celebration animation when goal is completed
+  useEffect(() => {
+    if (isCompleted) {
+      Animated.sequence([
+        Animated.spring(scaleAnim, {
+          toValue: 1.05,
+          friction: 3,
+          tension: 40,
+          useNativeDriver: true,
+        }),
+        Animated.spring(scaleAnim, {
+          toValue: 1,
+          friction: 3,
+          tension: 40,
+          useNativeDriver: true,
+        }),
+      ]).start();
+    }
+  }, [isCompleted]);
 
-    const getGoalTypeIcon = (type: string) => {
-        switch (type) {
-            case 'weight_target': return 'scale-outline';
-            case 'strength_milestone': return 'barbell-outline';
-            case 'endurance_target': return 'bicycle-outline';
-            case 'flexibility_goal': return 'body-outline';
-            case 'habit_building': return 'calendar-outline';
-            default: return 'flag-outline';
-        }
-    };
+  const handleComplete = () => {
+    if (onComplete) {
+      // Trigger celebration animation
+      Animated.sequence([
+        Animated.spring(scaleAnim, {
+          toValue: 1.1,
+          friction: 3,
+          tension: 40,
+          useNativeDriver: true,
+        }),
+        Animated.spring(scaleAnim, {
+          toValue: 1,
+          friction: 3,
+          tension: 40,
+          useNativeDriver: true,
+        }),
+      ]).start(() => {
+        onComplete();
+      });
+    }
+  };
 
-    const getPriorityGradient = (priority: string): readonly [string, string] => {
-        switch (priority) {
-            case 'high': return theme.gradients.danger;
-            case 'medium': return theme.gradients.warning;
-            case 'low': return theme.gradients.success;
-            default: return theme.gradients.primary;
-        }
-    };
+  // Calculate days remaining
+  const daysRemaining = goal.targetDate
+    ? Math.ceil(
+        (new Date(goal.targetDate).getTime() - Date.now()) /
+          (1000 * 60 * 60 * 24),
+      )
+    : null;
 
-    const handleDelete = () => {
-        Alert.alert(
-            'Delete Goal',
-            'Are you sure you want to delete this goal?',
-            [
-                { text: 'Cancel', style: 'cancel' },
-                { text: 'Delete', style: 'destructive', onPress: onDelete },
-            ]
-        );
-    };
+  const getGoalTypeIcon = (type: string) => {
+    switch (type) {
+      case "weight_target":
+        return "scale-outline";
+      case "strength_milestone":
+        return "barbell-outline";
+      case "endurance_target":
+        return "bicycle-outline";
+      case "flexibility_goal":
+        return "body-outline";
+      case "habit_building":
+        return "calendar-outline";
+      default:
+        return "flag-outline";
+    }
+  };
 
-    return (
-        <TouchableOpacity
-            onPress={onPress}
-            activeOpacity={0.7}
+  const getPriorityColor = (priority: string) => {
+    switch (priority) {
+      case "high":
+        return colors.danger;
+      case "medium":
+        return colors.warning;
+      case "low":
+        return colors.success;
+      default:
+        return colors.primary;
+    }
+  };
+
+  const handleDelete = () => {
+    Alert.alert("Delete Goal", "Are you sure you want to delete this goal?", [
+      { text: "Cancel", style: "cancel" },
+      { text: "Delete", style: "destructive", onPress: onDelete },
+    ]);
+  };
+
+  return (
+    <Animated.View style={{ transform: [{ scale: scaleAnim }] }}>
+      <TouchableOpacity onPress={onPress} activeOpacity={0.85}>
+        <MinimalCard
+          variant="elevated"
+          style={[
+            styles.card,
+            isCompleted && {
+              backgroundColor: colors.surfaceElevated,
+              opacity: 0.8,
+            },
+          ]}
+          padding={20}
         >
-            <LinearGradient
-                colors={isCompleted
-                    ? ['rgba(16, 185, 129, 0.05)', 'rgba(5, 150, 105, 0.02)'] as const
-                    : ['rgba(255, 255, 255, 1)', 'rgba(249, 250, 251, 1)'] as const
+          {/* Header */}
+          <View style={styles.header}>
+            <View style={styles.titleRow}>
+              <IconContainer
+                variant="colored"
+                backgroundColor={
+                  isCompleted ? colors.success : getPriorityColor(goal.priority)
                 }
-                style={[
-                    styles.card,
-                    theme.shadows.medium,
-                    isCompleted && styles.cardCompleted
-                ]}
-            >
-                {/* Priority Accent Bar */}
-                <LinearGradient
-                    colors={getPriorityGradient(goal.priority)}
-                    start={{ x: 0, y: 0 }}
-                    end={{ x: 0, y: 1 }}
-                    style={styles.priorityAccent}
+              >
+                <Ionicons
+                  name={getGoalTypeIcon(goal.goalType) as any}
+                  size={20}
+                  color={colors.white}
                 />
+              </IconContainer>
 
-                <View style={styles.header}>
-                    <View style={styles.titleRow}>
-                        <LinearGradient
-                            colors={isCompleted ? theme.gradients.success : getPriorityGradient(goal.priority)}
-                            style={styles.iconContainer}
-                        >
-                            <Ionicons
-                                name={getGoalTypeIcon(goal.goalType) as any}
-                                size={20}
-                                color="#fff"
-                            />
-                        </LinearGradient>
-                        <View style={styles.titleContainer}>
-                            <Text style={[styles.title, isCompleted && styles.titleCompleted]}>
-                                {goal.title}
-                            </Text>
-                            {goal.description && (
-                                <Text style={styles.description} numberOfLines={2}>
-                                    {goal.description}
-                                </Text>
-                            )}
-                        </View>
-                    </View>
-
-                    <View style={styles.actions}>
-                        {!isCompleted && onComplete && (
-                            <TouchableOpacity onPress={onComplete} style={styles.actionButton}>
-                                <Ionicons name="checkmark-circle-outline" size={24} color={theme.colors.success} />
-                            </TouchableOpacity>
-                        )}
-                        {onDelete && (
-                            <TouchableOpacity onPress={handleDelete} style={styles.actionButton}>
-                                <Ionicons name="trash-outline" size={22} color={theme.colors.danger} />
-                            </TouchableOpacity>
-                        )}
-                    </View>
-                </View>
-
-                {goal.targetValue && (
-                    <View style={styles.progressSection}>
-                        <View style={styles.progressInfo}>
-                            <Text style={styles.progressText}>
-                                {goal.currentValue || 0} / {goal.targetValue} {goal.unit || ''}
-                            </Text>
-                            <Text style={[styles.progressPercentage, isCompleted && { color: theme.colors.success }]}>
-                                {progress.toFixed(0)}%
-                            </Text>
-                        </View>
-
-                        <View style={styles.progressBarContainer}>
-                            <LinearGradient
-                                colors={isCompleted ? theme.gradients.success : getPriorityGradient(goal.priority)}
-                                start={{ x: 0, y: 0 }}
-                                end={{ x: 1, y: 0 }}
-                                style={[
-                                    styles.progressBar,
-                                    { width: `${Math.min(progress, 100)}%` }
-                                ]}
-                            />
-                        </View>
-                    </View>
+              <View style={styles.titleContainer}>
+                <Text
+                  style={[
+                    typography.h3,
+                    { color: colors.textPrimary },
+                    isCompleted && {
+                      color: colors.textSecondary,
+                      textDecorationLine: "line-through",
+                    },
+                  ]}
+                >
+                  {goal.title}
+                </Text>
+                {goal.description && (
+                  <Text
+                    style={[
+                      typography.caption,
+                      { color: colors.textTertiary, marginTop: 2 },
+                    ]}
+                    numberOfLines={2}
+                  >
+                    {goal.description}
+                  </Text>
                 )}
+              </View>
+            </View>
 
-                <View style={styles.footer}>
-                    <LinearGradient
-                        colors={getPriorityGradient(goal.priority)}
-                        style={styles.priorityBadge}
-                    >
-                        <Text style={styles.priorityText}>{goal.priority.toUpperCase()}</Text>
-                    </LinearGradient>
+            {/* Action Buttons */}
+            <View style={styles.actions}>
+              {!isCompleted && onComplete && (
+                <TouchableOpacity
+                  onPress={handleComplete}
+                  style={styles.actionButton}
+                >
+                  <Ionicons
+                    name="checkmark-circle-outline"
+                    size={24}
+                    color={colors.success}
+                  />
+                </TouchableOpacity>
+              )}
+              {onDelete && (
+                <TouchableOpacity
+                  onPress={handleDelete}
+                  style={styles.actionButton}
+                >
+                  <Ionicons
+                    name="trash-outline"
+                    size={22}
+                    color={colors.danger}
+                  />
+                </TouchableOpacity>
+              )}
+            </View>
+          </View>
 
-                    {daysRemaining !== null && !isCompleted && (
-                        <Text style={[styles.daysRemaining, daysRemaining < 0 && styles.overdue]}>
-                            {daysRemaining < 0
-                                ? `${Math.abs(daysRemaining)} days overdue`
-                                : `${daysRemaining} days remaining`
-                            }
-                        </Text>
-                    )}
+          {/* Progress Section */}
+          {goal.targetValue && (
+            <View style={styles.progressSection}>
+              <View style={styles.progressInfo}>
+                <Text
+                  style={[typography.caption, { color: colors.textSecondary }]}
+                >
+                  {goal.currentValue || 0} / {goal.targetValue}{" "}
+                  {goal.unit || ""}
+                </Text>
+                <Text
+                  style={[
+                    typography.bodyEmphasis,
+                    {
+                      color: isCompleted ? colors.success : colors.primary,
+                    },
+                  ]}
+                >
+                  {(progress * 100).toFixed(0)}%
+                </Text>
+              </View>
 
-                    {isCompleted && goal.completedDate && (
-                        <Text style={styles.completedDate}>
-                            Completed {new Date(goal.completedDate).toLocaleDateString()}
-                        </Text>
-                    )}
-                </View>
-            </LinearGradient>
-        </TouchableOpacity>
-    );
+              <ProgressBar
+                progress={progress}
+                color={
+                  isCompleted ? colors.success : getPriorityColor(goal.priority)
+                }
+              />
+            </View>
+          )}
+
+          {/* Footer */}
+          <View style={styles.footer}>
+            {isCompleted ? (
+              <Badge variant="success" label="COMPLETED" />
+            ) : (
+              <View>
+                {goal.priority === "high" && (
+                  <Badge variant="danger" label={goal.priority.toUpperCase()} />
+                )}
+                {goal.priority === "medium" && (
+                  <Badge
+                    variant="warning"
+                    label={goal.priority.toUpperCase()}
+                  />
+                )}
+                {goal.priority === "low" && (
+                  <Badge
+                    variant="success"
+                    label={goal.priority.toUpperCase()}
+                  />
+                )}
+              </View>
+            )}
+
+            {daysRemaining !== null && !isCompleted && (
+              <Text
+                style={[
+                  typography.caption,
+                  {
+                    color:
+                      daysRemaining < 0 ? colors.danger : colors.textTertiary,
+                  },
+                ]}
+              >
+                {daysRemaining < 0
+                  ? `${Math.abs(daysRemaining)} days overdue`
+                  : `${daysRemaining} days remaining`}
+              </Text>
+            )}
+
+            {isCompleted && goal.completedDate && (
+              <Text style={[typography.caption, { color: colors.success }]}>
+                Completed {new Date(goal.completedDate).toLocaleDateString()}
+              </Text>
+            )}
+          </View>
+        </MinimalCard>
+      </TouchableOpacity>
+    </Animated.View>
+  );
 }
 
 const styles = StyleSheet.create({
-    card: {
-        borderRadius: theme.borderRadius.xl,
-        padding: 16,
-        marginBottom: 12,
-        borderWidth: 1,
-        borderColor: 'rgba(59, 130, 246, 0.1)',
-        overflow: 'hidden',
-    },
-    cardCompleted: {
-        borderColor: 'rgba(16, 185, 129, 0.2)',
-    },
-    priorityAccent: {
-        position: 'absolute',
-        left: 0,
-        top: 0,
-        bottom: 0,
-        width: 4,
-    },
-    header: {
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-        alignItems: 'flex-start',
-        marginBottom: 12,
-        marginLeft: 8,
-    },
-    titleRow: {
-        flexDirection: 'row',
-        alignItems: 'flex-start',
-        flex: 1,
-    },
-    iconContainer: {
-        width: 40,
-        height: 40,
-        borderRadius: 20,
-        justifyContent: 'center',
-        alignItems: 'center',
-        marginRight: 12,
-    },
-    titleContainer: {
-        flex: 1,
-    },
-    title: {
-        fontSize: theme.typography.fontSize.lg,
-        fontWeight: theme.typography.fontWeight.semibold,
-        color: theme.colors.gray900,
-        marginBottom: 4,
-    },
-    titleCompleted: {
-        color: theme.colors.gray600,
-        textDecorationLine: 'line-through',
-    },
-    description: {
-        fontSize: theme.typography.fontSize.sm,
-        color: theme.colors.gray600,
-        lineHeight: 18,
-    },
-    actions: {
-        flexDirection: 'row',
-        gap: 8,
-    },
-    actionButton: {
-        padding: 4,
-    },
-    progressSection: {
-        marginBottom: 12,
-        marginLeft: 8,
-    },
-    progressInfo: {
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-        marginBottom: 8,
-    },
-    progressText: {
-        fontSize: theme.typography.fontSize.sm,
-        fontWeight: theme.typography.fontWeight.medium,
-        color: theme.colors.gray700,
-    },
-    progressPercentage: {
-        fontSize: theme.typography.fontSize.sm,
-        fontWeight: theme.typography.fontWeight.semibold,
-        color: theme.colors.primary,
-    },
-    progressBarContainer: {
-        height: 8,
-        backgroundColor: theme.colors.gray200,
-        borderRadius: 4,
-        overflow: 'hidden',
-    },
-    progressBar: {
-        height: '100%',
-        borderRadius: 4,
-    },
-    footer: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        marginLeft: 8,
-    },
-    priorityBadge: {
-        paddingHorizontal: 10,
-        paddingVertical: 5,
-        borderRadius: theme.borderRadius.md,
-    },
-    priorityText: {
-        fontSize: theme.typography.fontSize.xs,
-        fontWeight: theme.typography.fontWeight.semibold,
-        color: theme.colors.white,
-    },
-    daysRemaining: {
-        fontSize: theme.typography.fontSize.xs,
-        color: theme.colors.gray600,
-        fontWeight: theme.typography.fontWeight.medium,
-    },
-    overdue: {
-        color: theme.colors.danger,
-        fontWeight: theme.typography.fontWeight.semibold,
-    },
-    completedDate: {
-        fontSize: theme.typography.fontSize.xs,
-        color: theme.colors.success,
-        fontWeight: theme.typography.fontWeight.medium,
-    },
+  card: {
+    marginBottom: 16,
+    borderRadius: 20,
+  },
+  header: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "flex-start",
+    marginBottom: 16,
+  },
+  titleRow: {
+    flexDirection: "row",
+    alignItems: "flex-start",
+    flex: 1,
+  },
+  titleContainer: {
+    flex: 1,
+    marginLeft: 14,
+  },
+  actions: {
+    flexDirection: "row",
+    gap: 12,
+  },
+  actionButton: {
+    padding: 6,
+  },
+  progressSection: {
+    marginBottom: 16,
+  },
+  progressInfo: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    marginBottom: 10,
+  },
+  footer: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+  },
 });

apps/mobile/src/components/GoalTypeBreakdownChart.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { View, Text, StyleSheet, Dimensions } from "react-native";
 import { PieChart } from "react-native-chart-kit";
-import { theme } from "../styles/theme";
+import { useTheme } from "../contexts/ThemeContext";
 
 interface GoalTypeData {
   goalType: string;
@@ -17,37 +17,40 @@ export function GoalTypeBreakdownChart({
   data,
   title = "Goals by Type",
 }: GoalTypeBreakdownChartProps) {
+  const { colors, typography } = useTheme();
   const screenWidth = Dimensions.get("window").width;
 
-  // Color palette for different goal types
-  const colors = [
-    "#3b82f6", // Blue
-    "#10b981", // Green
-    "#f59e0b", // Orange
-    "#8b5cf6", // Purple
-    "#ec4899", // Pink
-    "#06b6d4", // Cyan
+  const chartColors = [
+    colors.primary,
+    colors.success,
+    colors.warning,
+    colors.accent,
+    colors.secondary,
+    colors.info,
   ];
 
-  // Prepare chart data
   const chartData = data.map((item, index) => ({
-    name: item.goalType,
+    name: item.goalType
+      .replace(/_/g, " ")
+      .replace(/\b\w/g, (l) => l.toUpperCase()),
     count: item.count,
-    color: colors[index % colors.length],
-    legendFontColor: theme.colors.gray600,
+    color: chartColors[index % chartColors.length],
+    legendFontColor: colors.textSecondary,
     legendFontSize: 12,
   }));
 
-  const chartConfig = {
-    color: (opacity = 1) => `rgba(59, 130, 246, ${opacity})`,
-  };
+  const totalGoals = data.reduce((sum, item) => sum + item.count, 0);
 
   if (data.length === 0) {
     return (
       <View style={styles.container}>
-        <Text style={styles.title}>{title}</Text>
+        <Text style={[typography.h4, { color: colors.textPrimary }]}>
+          {title}
+        </Text>
         <View style={styles.emptyState}>
-          <Text style={styles.emptyText}>No goals yet</Text>
+          <Text style={[typography.body, { color: colors.textTertiary }]}>
+            No goals yet
+          </Text>
         </View>
       </View>
     );
@@ -55,46 +58,123 @@ export function GoalTypeBreakdownChart({
 
   return (
     <View style={styles.container}>
-      <Text style={styles.title}>{title}</Text>
+      <Text
+        style={[typography.h4, { color: colors.textPrimary, marginBottom: 16 }]}
+      >
+        {title}
+      </Text>
+
+      {/* Summary Stats */}
+      <View style={styles.summaryRow}>
+        <View style={styles.summaryItem}>
+          <Text
+            style={[
+              typography.statLarge,
+              { color: colors.primary, fontSize: 32 },
+            ]}
+          >
+            {totalGoals}
+          </Text>
+          <Text style={[typography.caption, { color: colors.textTertiary }]}>
+            Total Goals
+          </Text>
+        </View>
+        <View style={styles.summaryItem}>
+          <Text
+            style={[
+              typography.statLarge,
+              { color: colors.success, fontSize: 32 },
+            ]}
+          >
+            {data.length}
+          </Text>
+          <Text style={[typography.caption, { color: colors.textTertiary }]}>
+            Types
+          </Text>
+        </View>
+      </View>
+
       <View style={styles.chartContainer}>
         <PieChart
           data={chartData}
-          width={screenWidth - 60}
-          height={200}
-          chartConfig={chartConfig}
+          width={screenWidth - 80}
+          height={160}
+          chartConfig={{
+            color: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`,
+          }}
           accessor="count"
           backgroundColor="transparent"
           paddingLeft="15"
           absolute
         />
       </View>
+
+      {/* Legend */}
+      <View style={styles.legendGrid}>
+        {data.map((item, index) => (
+          <View key={item.goalType} style={styles.legendItem}>
+            <View
+              style={[
+                styles.legendDot,
+                { backgroundColor: chartColors[index % chartColors.length] },
+              ]}
+            />
+            <Text
+              style={[
+                typography.caption,
+                { color: colors.textSecondary, flex: 1 },
+              ]}
+              numberOfLines={1}
+            >
+              {item.goalType
+                .replace(/_/g, " ")
+                .replace(/\b\w/g, (l) => l.toUpperCase())}
+            </Text>
+            <Text
+              style={[typography.bodyEmphasis, { color: colors.textPrimary }]}
+            >
+              {item.count}
+            </Text>
+          </View>
+        ))}
+      </View>
     </View>
   );
 }
 
 const styles = StyleSheet.create({
   container: {
-    backgroundColor: theme.colors.white,
-    borderRadius: theme.borderRadius.xl,
-    padding: 16,
-    marginBottom: 16,
-    ...theme.shadows.medium,
+    borderRadius: 16,
+    padding: 4,
   },
-  title: {
-    fontSize: theme.typography.fontSize.lg,
-    fontWeight: theme.typography.fontWeight.bold,
-    color: theme.colors.gray700,
-    marginBottom: 12,
+  summaryRow: {
+    flexDirection: "row",
+    justifyContent: "space-around",
+    marginBottom: 16,
+    paddingVertical: 12,
+  },
+  summaryItem: {
+    alignItems: "center",
   },
   chartContainer: {
     alignItems: "center",
+    marginBottom: 16,
+  },
+  legendGrid: {
+    gap: 10,
+  },
+  legendItem: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 10,
+  },
+  legendDot: {
+    width: 12,
+    height: 12,
+    borderRadius: 6,
   },
   emptyState: {
-    paddingVertical: 40,
+    paddingVertical: 32,
     alignItems: "center",
   },
-  emptyText: {
-    fontSize: theme.typography.fontSize.sm,
-    color: theme.colors.gray400,
-  },
 });

apps/mobile/src/components/IconContainer.tsx

@@ -0,0 +1,77 @@
+import React from "react";
+import { View, StyleSheet, ViewStyle, StyleProp } from "react-native";
+import { useTheme } from "../contexts/ThemeContext";
+
+type IconContainerVariant = "plain" | "subtle" | "colored";
+type IconContainerSize = "sm" | "md" | "lg" | "xl";
+
+interface IconContainerProps {
+  children: React.ReactNode;
+  variant?: IconContainerVariant;
+  size?: IconContainerSize;
+  backgroundColor?: string;
+  style?: StyleProp<ViewStyle>;
+}
+
+export function IconContainer({
+  children,
+  variant = "subtle",
+  size = "md",
+  backgroundColor,
+  style,
+}: IconContainerProps) {
+  const { colors } = useTheme();
+
+  const sizeStyles: Record<IconContainerSize, ViewStyle> = {
+    sm: {
+      width: 36,
+      height: 36,
+      borderRadius: 10,
+    },
+    md: {
+      width: 48,
+      height: 48,
+      borderRadius: 14,
+    },
+    lg: {
+      width: 56,
+      height: 56,
+      borderRadius: 16,
+    },
+    xl: {
+      width: 64,
+      height: 64,
+      borderRadius: 18,
+    },
+  };
+
+  const getBackgroundColor = (): string | undefined => {
+    if (variant === "colored" && backgroundColor) {
+      return backgroundColor;
+    }
+    if (variant === "subtle") {
+      return colors.surfaceElevated;
+    }
+    return "transparent";
+  };
+
+  return (
+    <View
+      style={[
+        styles.container,
+        sizeStyles[size],
+        { backgroundColor: getBackgroundColor() },
+        style,
+      ]}
+    >
+      {children}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: "center",
+    justifyContent: "center",
+  },
+});

apps/mobile/src/components/ListItem.tsx

@@ -0,0 +1,95 @@
+import React from "react";
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  ViewStyle,
+  StyleProp,
+} from "react-native";
+import { useTheme } from "../contexts/ThemeContext";
+
+interface ListItemProps {
+  title: string;
+  subtitle?: string;
+  leftIcon?: React.ReactNode;
+  rightElement?: React.ReactNode;
+  onPress?: () => void;
+  style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * ListItem - Clean list item with optional icon and trailing element
+ *
+ * Usage:
+ * - Settings lists
+ * - Navigation items
+ * - Selectable options
+ *
+ * Features:
+ * - Optional left icon (wrap in IconContainer)
+ * - Optional subtitle for additional context
+ * - Optional right element (arrow, badge, switch, etc.)
+ * - Optional onPress for touchable items
+ */
+export function ListItem({
+  title,
+  subtitle,
+  leftIcon,
+  rightElement,
+  onPress,
+  style,
+}: ListItemProps) {
+  const { colors, typography } = useTheme();
+
+  const content = (
+    <View style={[styles.container, style]}>
+      {leftIcon && <View style={styles.leftIcon}>{leftIcon}</View>}
+      <View style={styles.textContainer}>
+        <Text style={[typography.h3, { color: colors.textPrimary }]}>
+          {title}
+        </Text>
+        {subtitle && (
+          <Text
+            style={[
+              typography.caption,
+              { color: colors.textTertiary, marginTop: 2 },
+            ]}
+          >
+            {subtitle}
+          </Text>
+        )}
+      </View>
+      {rightElement && <View style={styles.rightElement}>{rightElement}</View>}
+    </View>
+  );
+
+  if (onPress) {
+    return (
+      <TouchableOpacity onPress={onPress} activeOpacity={0.7}>
+        {content}
+      </TouchableOpacity>
+    );
+  }
+
+  return content;
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+    backgroundColor: "transparent",
+  },
+  leftIcon: {
+    marginRight: 12,
+  },
+  textContainer: {
+    flex: 1,
+  },
+  rightElement: {
+    marginLeft: 12,
+  },
+});

apps/mobile/src/components/MinimalButton.tsx

@@ -0,0 +1,152 @@
+import React from "react";
+import {
+  TouchableOpacity,
+  Text,
+  StyleSheet,
+  ActivityIndicator,
+  ViewStyle,
+  TextStyle,
+  StyleProp,
+} from "react-native";
+import { useTheme } from "../contexts/ThemeContext";
+import { fontSize, fontWeight } from "../styles/typography";
+
+type ButtonVariant =
+  | "primary"
+  | "secondary"
+  | "tertiary"
+  | "danger"
+  | "success";
+type ButtonSize = "sm" | "md" | "lg" | "xl";
+
+interface MinimalButtonProps {
+  title: string;
+  onPress: () => void;
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  loading?: boolean;
+  disabled?: boolean;
+  style?: StyleProp<ViewStyle>;
+  textStyle?: StyleProp<TextStyle>;
+  fullWidth?: boolean;
+}
+
+export function MinimalButton({
+  title,
+  onPress,
+  variant = "primary",
+  size = "md",
+  loading = false,
+  disabled = false,
+  style,
+  textStyle,
+  fullWidth = false,
+}: MinimalButtonProps) {
+  const { colors } = useTheme();
+
+  const isDisabled = disabled || loading;
+
+  const getButtonStyle = (): ViewStyle => {
+    const baseStyle: ViewStyle = {
+      borderRadius: 14,
+      alignItems: "center",
+      justifyContent: "center",
+      opacity: isDisabled ? 0.5 : 1,
+    };
+
+    const sizeStyles: Record<
+      ButtonSize,
+      { paddingVertical: number; paddingHorizontal: number }
+    > = {
+      sm: { paddingVertical: 12, paddingHorizontal: 20 },
+      md: { paddingVertical: 16, paddingHorizontal: 28 },
+      lg: { paddingVertical: 18, paddingHorizontal: 36 },
+      xl: { paddingVertical: 20, paddingHorizontal: 44 },
+    };
+
+    const variantStyles: Record<ButtonVariant, ViewStyle> = {
+      primary: {
+        backgroundColor: colors.primary,
+        shadowColor: colors.primary,
+        shadowOffset: { width: 0, height: 4 },
+        shadowOpacity: 0.3,
+        shadowRadius: 8,
+        elevation: 4,
+      },
+      secondary: {
+        backgroundColor: "transparent",
+        borderWidth: 2,
+        borderColor: colors.primary,
+      },
+      tertiary: {
+        backgroundColor: "transparent",
+      },
+      danger: {
+        backgroundColor: colors.danger,
+        shadowColor: colors.danger,
+        shadowOffset: { width: 0, height: 4 },
+        shadowOpacity: 0.3,
+        shadowRadius: 8,
+        elevation: 4,
+      },
+      success: {
+        backgroundColor: colors.success,
+        shadowColor: colors.success,
+        shadowOffset: { width: 0, height: 4 },
+        shadowOpacity: 0.3,
+        shadowRadius: 8,
+        elevation: 4,
+      },
+    };
+
+    return {
+      ...baseStyle,
+      ...sizeStyles[size],
+      ...variantStyles[variant],
+      ...(fullWidth && { width: "100%" }),
+    };
+  };
+
+  const getTextStyle = (): TextStyle => {
+    const baseTextStyle: TextStyle = {
+      fontSize: size === "sm" ? fontSize.sm : fontSize.md,
+      fontWeight: fontWeight.bold,
+      letterSpacing: 0.5,
+    };
+
+    const variantTextStyles: Record<ButtonVariant, TextStyle> = {
+      primary: { color: colors.white },
+      secondary: { color: colors.primary },
+      tertiary: { color: colors.primary },
+      danger: { color: colors.white },
+      success: { color: colors.white },
+    };
+
+    return {
+      ...baseTextStyle,
+      ...variantTextStyles[variant],
+    };
+  };
+
+  return (
+    <TouchableOpacity
+      style={[getButtonStyle(), style]}
+      onPress={onPress}
+      disabled={isDisabled}
+      activeOpacity={0.85}
+    >
+      {loading ? (
+        <ActivityIndicator
+          size="small"
+          color={
+            variant === "secondary" || variant === "tertiary"
+              ? colors.primary
+              : colors.white
+          }
+        />
+      ) : (
+        <Text style={[getTextStyle(), textStyle]}>{title}</Text>
+      )}
+    </TouchableOpacity>
+  );
+}

apps/mobile/src/components/MinimalCard.tsx

@@ -0,0 +1,84 @@
+import React from "react";
+import {
+  View,
+  StyleSheet,
+  TouchableOpacity,
+  ViewStyle,
+  StyleProp,
+} from "react-native";
+import { useTheme } from "../contexts/ThemeContext";
+
+type CardVariant = "default" | "elevated" | "bordered" | "gradient";
+
+interface MinimalCardProps {
+  children: React.ReactNode;
+  variant?: CardVariant;
+  onPress?: () => void;
+  style?: StyleProp<ViewStyle>;
+  padding?: number;
+}
+
+export function MinimalCard({
+  children,
+  variant = "default",
+  onPress,
+  style,
+  padding = 20,
+}: MinimalCardProps) {
+  const { colors } = useTheme();
+
+  const cardStyles = [
+    styles.base,
+    {
+      backgroundColor: colors.surface,
+      padding: padding,
+    },
+    variant === "default" && styles.default,
+    variant === "elevated" && {
+      ...styles.elevated,
+      backgroundColor: colors.surfaceElevated,
+    },
+    variant === "bordered" && {
+      borderWidth: 1,
+      borderColor: colors.border,
+    },
+    variant === "gradient" && {
+      backgroundColor: colors.surfaceElevated,
+    },
+    style,
+  ];
+
+  if (onPress) {
+    return (
+      <TouchableOpacity
+        style={cardStyles}
+        onPress={onPress}
+        activeOpacity={0.85}
+      >
+        {children}
+      </TouchableOpacity>
+    );
+  }
+
+  return <View style={cardStyles}>{children}</View>;
+}
+
+const styles = StyleSheet.create({
+  base: {
+    borderRadius: 20,
+  },
+  default: {
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.08,
+    shadowRadius: 8,
+    elevation: 3,
+  },
+  elevated: {
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.12,
+    shadowRadius: 16,
+    elevation: 6,
+  },
+});

apps/mobile/src/components/ProgressBar.tsx

@@ -0,0 +1,67 @@
+import React from "react";
+import { View, StyleSheet, ViewStyle, StyleProp } from "react-native";
+import { useTheme } from "../contexts/ThemeContext";
+
+interface ProgressBarProps {
+  progress: number;
+  color?: string;
+  backgroundColor?: string;
+  height?: number;
+  borderRadius?: number;
+  style?: StyleProp<ViewStyle>;
+  animated?: boolean;
+}
+
+export function ProgressBar({
+  progress,
+  color,
+  backgroundColor,
+  height = 10,
+  borderRadius = 999,
+  style,
+}: ProgressBarProps) {
+  const { colors } = useTheme();
+
+  const clampedProgress = Math.min(Math.max(progress, 0), 1);
+
+  const trackColor = backgroundColor || colors.surfaceElevated;
+  const fillColor = color || colors.primary;
+
+  return (
+    <View
+      style={[
+        styles.track,
+        {
+          height,
+          borderRadius,
+          backgroundColor: trackColor,
+        },
+        style,
+      ]}
+    >
+      <View
+        style={[
+          styles.fill,
+          {
+            width: `${clampedProgress * 100}%`,
+            height,
+            borderRadius,
+            backgroundColor: fillColor,
+          },
+        ]}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  track: {
+    width: "100%",
+    overflow: "hidden",
+  },
+  fill: {
+    position: "absolute",
+    left: 0,
+    top: 0,
+  },
+});

apps/mobile/src/components/SectionHeader.tsx

@@ -0,0 +1,67 @@
+import React from "react";
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  ViewStyle,
+  StyleProp,
+} from "react-native";
+import { useTheme } from "../contexts/ThemeContext";
+
+interface SectionHeaderProps {
+  title: string;
+  subtitle?: string;
+  actionLabel?: string;
+  onActionPress?: () => void;
+  style?: StyleProp<ViewStyle>;
+}
+
+export function SectionHeader({
+  title,
+  subtitle,
+  actionLabel,
+  onActionPress,
+  style,
+}: SectionHeaderProps) {
+  const { colors, typography } = useTheme();
+
+  return (
+    <View style={[styles.container, style]}>
+      <View style={styles.textContainer}>
+        <Text style={[typography.h2, { color: colors.textPrimary }]}>
+          {title}
+        </Text>
+        {subtitle && (
+          <Text
+            style={[
+              typography.caption,
+              { color: colors.textTertiary, marginTop: 4 },
+            ]}
+          >
+            {subtitle}
+          </Text>
+        )}
+      </View>
+      {actionLabel && onActionPress && (
+        <TouchableOpacity onPress={onActionPress} activeOpacity={0.7}>
+          <Text style={[typography.bodyEmphasis, { color: colors.primary }]}>
+            {actionLabel}
+          </Text>
+        </TouchableOpacity>
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    marginBottom: 16,
+  },
+  textContainer: {
+    flex: 1,
+  },
+});

apps/mobile/src/components/WeeklyProgressChart.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { View, Text, StyleSheet, Dimensions } from "react-native";
 import { LineChart } from "react-native-chart-kit";
-import { theme } from "../styles/theme";
+import { useTheme } from "../contexts/ThemeContext";
 import type { WeeklyTrendData } from "../api/types";
 
 interface WeeklyProgressChartProps {
@@ -13,28 +13,26 @@ export function WeeklyProgressChart({
   weeklyData,
   title = "Weekly Progress",
 }: WeeklyProgressChartProps) {
+  const { colors, typography } = useTheme();
   const screenWidth = Dimensions.get("window").width;
 
-  // Prepare chart data
-  const labels = weeklyData.map((week) => week.weekLabel);
-  const checkInsData = weeklyData.map((week) => week.checkIns);
-  const goalsCompletedData = weeklyData.map((week) => week.goalsCompleted);
-  const avgProgressData = weeklyData.map((week) => week.averageProgress);
+  const labels = weeklyData.map((week: WeeklyTrendData) => week.weekLabel);
+  const checkInsData = weeklyData.map((week: WeeklyTrendData) => week.checkIns);
+  const goalsCompletedData = weeklyData.map(
+    (week: WeeklyTrendData) => week.goalsCompleted,
+  );
 
   const chartConfig = {
-    backgroundColor: theme.colors.white,
-    backgroundGradientFrom: theme.colors.white,
-    backgroundGradientTo: theme.colors.white,
+    backgroundColor: colors.surface,
+    backgroundGradientFrom: colors.surface,
+    backgroundGradientTo: colors.surface,
     decimalPlaces: 0,
-    color: (opacity = 1) => `rgba(59, 130, 246, ${opacity})`,
-    labelColor: (opacity = 1) => `rgba(107, 114, 128, ${opacity})`,
-    style: {
-      borderRadius: theme.borderRadius.lg,
-    },
+    color: (opacity = 1) => `rgba(0, 102, 255, ${opacity})`,
+    labelColor: (opacity = 1) => colors.textTertiary,
     propsForDots: {
-      r: "4",
+      r: "5",
       strokeWidth: "2",
-      stroke: theme.colors.primary,
+      stroke: colors.primary,
     },
   };
 
@@ -43,31 +41,40 @@ export function WeeklyProgressChart({
     datasets: [
       {
         data: checkInsData,
-        color: (opacity = 1) => `rgba(59, 130, 246, ${opacity})`, // Blue for check-ins
-        strokeWidth: 2,
+        color: () => colors.primary,
+        strokeWidth: 3,
       },
       {
         data: goalsCompletedData,
-        color: (opacity = 1) => `rgba(16, 185, 129, ${opacity})`, // Green for goals
-        strokeWidth: 2,
+        color: () => colors.success,
+        strokeWidth: 3,
       },
     ],
-    legend: ["Check-ins", "Goals Completed"],
+    legend: ["Check-ins", "Goals"],
   };
 
   return (
     <View style={styles.container}>
-      <Text style={styles.title}>{title}</Text>
+      {title && (
+        <Text
+          style={[
+            typography.h4,
+            { color: colors.textPrimary, marginBottom: 16 },
+          ]}
+        >
+          {title}
+        </Text>
+      )}
       <View style={styles.chartContainer}>
         <LineChart
           data={data}
-          width={screenWidth - 60}
-          height={220}
+          width={screenWidth - 80}
+          height={180}
           chartConfig={chartConfig}
           bezier
           style={styles.chart}
           withInnerLines={true}
-          withOuterLines={true}
+          withOuterLines={false}
           withVerticalLabels={true}
           withHorizontalLabels={true}
           fromZero={true}
@@ -75,12 +82,20 @@ export function WeeklyProgressChart({
       </View>
       <View style={styles.legend}>
         <View style={styles.legendItem}>
-          <View style={[styles.legendDot, { backgroundColor: "#3b82f6" }]} />
-          <Text style={styles.legendText}>Check-ins</Text>
+          <View
+            style={[styles.legendDot, { backgroundColor: colors.primary }]}
+          />
+          <Text style={[typography.caption, { color: colors.textSecondary }]}>
+            Check-ins
+          </Text>
         </View>
         <View style={styles.legendItem}>
-          <View style={[styles.legendDot, { backgroundColor: "#10b981" }]} />
-          <Text style={styles.legendText}>Goals Completed</Text>
+          <View
+            style={[styles.legendDot, { backgroundColor: colors.success }]}
+          />
+          <Text style={[typography.caption, { color: colors.textSecondary }]}>
+            Goals
+          </Text>
         </View>
       </View>
     </View>
@@ -89,17 +104,8 @@ export function WeeklyProgressChart({
 
 const styles = StyleSheet.create({
   container: {
-    backgroundColor: theme.colors.white,
-    borderRadius: theme.borderRadius.xl,
-    padding: 16,
-    marginBottom: 16,
-    ...theme.shadows.medium,
-  },
-  title: {
-    fontSize: theme.typography.fontSize.lg,
-    fontWeight: theme.typography.fontWeight.bold,
-    color: theme.colors.gray700,
-    marginBottom: 12,
+    borderRadius: 16,
+    padding: 4,
   },
   chartContainer: {
     alignItems: "center",
@@ -107,26 +113,22 @@ const styles = StyleSheet.create({
   },
   chart: {
     marginVertical: 8,
-    borderRadius: theme.borderRadius.lg,
+    borderRadius: 12,
   },
   legend: {
     flexDirection: "row",
     justifyContent: "center",
-    gap: 20,
+    gap: 24,
     paddingTop: 8,
   },
   legendItem: {
     flexDirection: "row",
     alignItems: "center",
-    gap: 6,
+    gap: 8,
   },
   legendDot: {
     width: 10,
     height: 10,
     borderRadius: 5,
   },
-  legendText: {
-    fontSize: theme.typography.fontSize.sm,
-    color: theme.colors.gray500,
-  },
 });

apps/mobile/src/config/api.ts

@@ -35,6 +35,7 @@ export const API_ENDPOINTS = {
   USERS: {
     LIST: "/api/users",
     STATISTICS: "/api/users/statistics",
+    GYM: "/api/users/gym",
   },
   GYMS: "/api/gyms",
   ATTENDANCE: {

apps/mobile/src/contexts/ThemeContext.tsx

@@ -0,0 +1,129 @@
+import React, {
+  createContext,
+  useContext,
+  useState,
+  useEffect,
+  ReactNode,
+} from "react";
+import { useColorScheme } from "react-native";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import { ColorScheme, lightColors, darkColors } from "../styles/colors";
+import {
+  TypographyPresets,
+  createTypographyPresets,
+} from "../styles/typography";
+
+type ThemeMode = "light" | "dark" | "system";
+type ActiveTheme = "light" | "dark";
+
+interface ThemeContextType {
+  // Current active theme
+  theme: ActiveTheme;
+
+  // User's theme preference
+  themeMode: ThemeMode;
+
+  // Active color scheme
+  colors: ColorScheme;
+
+  // Typography presets
+  typography: TypographyPresets;
+
+  // Theme actions
+  setTheme: (mode: ThemeMode) => void;
+  toggleTheme: () => void;
+}
+
+const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
+
+const THEME_STORAGE_KEY = "@fitai:theme";
+
+interface ThemeProviderProps {
+  children: ReactNode;
+}
+
+export function ThemeProvider({ children }: ThemeProviderProps) {
+  const systemColorScheme = useColorScheme();
+  const [themeMode, setThemeMode] = useState<ThemeMode>("system");
+  const [isLoading, setIsLoading] = useState(true);
+
+  // Determine active theme based on mode and system preference
+  const getActiveTheme = (): ActiveTheme => {
+    if (themeMode === "system") {
+      return systemColorScheme === "dark" ? "dark" : "light";
+    }
+    return themeMode;
+  };
+
+  const activeTheme = getActiveTheme();
+  const colors = activeTheme === "dark" ? darkColors : lightColors;
+  const typography = createTypographyPresets(
+    colors.textPrimary,
+    colors.textSecondary,
+    colors.textTertiary,
+  );
+
+  // Load saved theme preference on mount
+  useEffect(() => {
+    const loadTheme = async () => {
+      try {
+        const savedTheme = await AsyncStorage.getItem(THEME_STORAGE_KEY);
+        if (savedTheme && ["light", "dark", "system"].includes(savedTheme)) {
+          setThemeMode(savedTheme as ThemeMode);
+        }
+      } catch (error) {
+        console.error("Failed to load theme preference:", error);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    loadTheme();
+  }, []);
+
+  // Save theme preference when it changes
+  const setTheme = async (mode: ThemeMode) => {
+    try {
+      setThemeMode(mode);
+      await AsyncStorage.setItem(THEME_STORAGE_KEY, mode);
+    } catch (error) {
+      console.error("Failed to save theme preference:", error);
+    }
+  };
+
+  // Toggle between light and dark (sets explicit mode, not system)
+  const toggleTheme = () => {
+    const newMode = activeTheme === "dark" ? "light" : "dark";
+    setTheme(newMode);
+  };
+
+  // Don't render children until theme is loaded
+  if (isLoading) {
+    return null;
+  }
+
+  const value: ThemeContextType = {
+    theme: activeTheme,
+    themeMode,
+    colors,
+    typography,
+    setTheme,
+    toggleTheme,
+  };
+
+  return (
+    <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>
+  );
+}
+
+/**
+ * Hook to access theme context
+ * @throws Error if used outside ThemeProvider
+ */
+export function useTheme() {
+  const context = useContext(ThemeContext);
+  if (context === undefined) {
+    throw new Error("useTheme must be used within a ThemeProvider");
+  }
+  return context;
+}

apps/mobile/src/styles/colors.ts

@@ -0,0 +1,167 @@
+/**
+ * FitAI Color System - BOLD MODERN
+ * Electric Blue palette with high-energy fitness app aesthetics
+ */
+
+export interface ColorScheme {
+  // Primary Colors
+  primary: string;
+  primaryDark: string;
+  primaryLight: string;
+
+  // Accent Colors
+  accent: string;
+  secondary: string;
+  terracotta: string;
+  sand: string;
+
+  // Status Colors
+  success: string;
+  warning: string;
+  danger: string;
+  info: string;
+
+  // Activity Ring Colors
+  calories: string;
+  water: string;
+  workouts: string;
+
+  // Neutrals
+  background: string;
+  surface: string;
+  surfaceElevated: string;
+
+  // Text
+  textPrimary: string;
+  textSecondary: string;
+  textTertiary: string;
+
+  // Borders
+  border: string;
+  borderLight: string;
+
+  // Overlays
+  overlay: string;
+  overlayLight: string;
+
+  // Gradients (as arrays)
+  primaryGradient: string[];
+  cardGradient: string[];
+
+  // Legacy compatibility
+  white: string;
+  black: string;
+}
+
+/**
+ * Light Mode - Bold & Energetic
+ */
+export const lightColors: ColorScheme = {
+  // Primary Colors - Electric Blue
+  primary: "#0066FF",
+  primaryDark: "#0052CC",
+  primaryLight: "#3385FF",
+
+  // Accent Colors
+  accent: "#7B2CBF", // Purple
+  secondary: "#FF3B7A", // Hot Pink
+  terracotta: "#FF6B35", // Neon Orange
+  sand: "#FFD60A", // Electric Yellow
+
+  // Status Colors - Vibrant
+  success: "#00D26A",
+  warning: "#FFB800",
+  danger: "#FF3B3B",
+  info: "#00B8D9",
+
+  // Activity Ring Colors
+  calories: "#FF6B35", // Orange for calories
+  water: "#00B8D9", // Cyan for water
+  workouts: "#0066FF", // Blue for workouts
+
+  // Neutrals - Bold dark on light
+  background: "#F5F5F7",
+  surface: "#FFFFFF",
+  surfaceElevated: "#FFFFFF",
+
+  // Text - High contrast dark
+  textPrimary: "#1A1A1A",
+  textSecondary: "#4A4A4A",
+  textTertiary: "#8E8E93",
+
+  // Borders
+  border: "#E5E5EA",
+  borderLight: "#F0F0F5",
+
+  // Overlays
+  overlay: "rgba(0, 0, 0, 0.5)",
+  overlayLight: "rgba(0, 0, 0, 0.03)",
+
+  // Gradients
+  primaryGradient: ["#0066FF", "#0052CC"],
+  cardGradient: ["#FFFFFF", "#F8F8FA"],
+
+  // Legacy
+  white: "#FFFFFF",
+  black: "#1A1A1A",
+};
+
+/**
+ * Dark Mode - Premium & Immersive
+ */
+export const darkColors: ColorScheme = {
+  // Primary Colors - Electric Blue (brighter on dark)
+  primary: "#0A84FF",
+  primaryDark: "#0066FF",
+  primaryLight: "#5AC8FA",
+
+  // Accent Colors
+  accent: "#BF5AF2", // Purple
+  secondary: "#FF375F", // Hot Pink
+  terracotta: "#FF9500", // Orange
+  sand: "#FFD60A", // Yellow
+
+  // Status Colors
+  success: "#30D158",
+  warning: "#FFD60A",
+  danger: "#FF453A",
+  info: "#64D2FF",
+
+  // Activity Ring Colors (even brighter for dark mode)
+  calories: "#FF9500",
+  water: "#64D2FF",
+  workouts: "#0A84FF",
+
+  // Neutrals - Dark backgrounds
+  background: "#000000",
+  surface: "#1C1C1E",
+  surfaceElevated: "#2C2C2E",
+
+  // Text - Bright on dark
+  textPrimary: "#FFFFFF",
+  textSecondary: "#EBEBF5",
+  textTertiary: "#8E8E93",
+
+  // Borders
+  border: "#38383A",
+  borderLight: "#48484A",
+
+  // Overlays
+  overlay: "rgba(0, 0, 0, 0.6)",
+  overlayLight: "rgba(255, 255, 255, 0.05)",
+
+  // Gradients
+  primaryGradient: ["#0A84FF", "#0066FF"],
+  cardGradient: ["#1C1C1E", "#2C2C2E"],
+
+  // Legacy
+  white: "#FFFFFF",
+  black: "#000000",
+};
+
+/**
+ * Get color scheme based on theme mode
+ */
+export const getColors = (mode: "light" | "dark"): ColorScheme => {
+  return mode === "dark" ? darkColors : lightColors;
+};

apps/mobile/src/styles/theme.ts

@@ -1,191 +1,159 @@
 /**
- * Modern Design System Theme
- * Centralized theme configuration with gradients, colors, shadows, and spacing
+ * FitAI Design System Theme
+ * Minimalist theme with light/dark mode support
+ * @deprecated Use useTheme() hook instead for dynamic theming
  */
 
+import { lightColors, darkColors } from "./colors";
+import { typography as typographySystem } from "./typography";
+
+/**
+ * Legacy theme object for backward compatibility
+ * New components should use useTheme() hook instead
+ */
 export const theme = {
-    // Color Palette
-    colors: {
-        // Primary colors
-        primary: '#3b82f6',
-        primaryDark: '#2563eb',
-        primaryLight: '#60a5fa',
-        secondary: '#8b5cf6',
+  // Color Palette (light mode - for legacy components)
+  colors: {
+    ...lightColors,
 
-        // Accent colors
-        purple: '#8b5cf6',
-        purpleDark: '#7c3aed',
-        pink: '#ec4899',
+    // Legacy color mappings (deprecated - use new colors instead)
+    secondary: "#8b5cf6", // Old purple - deprecated
+    purple: "#A9B4A0", // Mapped to accent
+    purpleDark: "#5A7A6E",
+    pink: "#C1876B", // Mapped to terracotta
+    successLight: "#8DB76A",
+    gray50: "#F2EFE9",
+    gray100: "#E8E4DF",
+    gray200: "#E8E4DF",
+    gray300: "#B8BFB5",
+    gray400: "#8B9A8F",
+    gray500: "#5C6B61",
+    gray600: "#5C6B61",
+    gray700: "#2C3731",
+    gray800: "#2C3731",
+    gray900: "#2C3731",
+  },
 
-        // Success
-        success: '#10b981',
-        successDark: '#059669',
-        successLight: '#34d399',
+  // Typography (updated to new system)
+  typography: typographySystem,
 
-        // Warning
-        warning: '#f59e0b',
-        warningDark: '#d97706',
+  // Spacing Scale (updated for minimalism)
+  spacing: {
+    xs: 4,
+    sm: 8,
+    md: 12,
+    lg: 16,
+    xl: 24, // Increased from 20
+    "2xl": 32, // Increased from 24
+    "3xl": 40, // Increased from 32
+    "4xl": 48, // New
+    "5xl": 64, // New
+  },
 
-        // Danger
-        danger: '#ef4444',
-        dangerDark: '#dc2626',
+  // Border Radius (reduced for minimalism)
+  borderRadius: {
+    sm: 4,
+    md: 6,
+    lg: 10,
+    xl: 12, // Reduced from 16
+    "2xl": 16, // Reduced from 20
+    "3xl": 20, // Reduced from 24
+    full: 9999,
+  },
 
-        // Neutrals
-        white: '#ffffff',
-        black: '#000000',
-        gray50: '#f9fafb',
-        gray100: '#f3f4f6',
-        gray200: '#e5e7eb',
-        gray300: '#d1d5db',
-        gray400: '#9ca3af',
-        gray500: '#6b7280',
-        gray600: '#4b5563',
-        gray700: '#374151',
-        gray800: '#1f2937',
-        gray900: '#111827',
-
-        // Backgrounds
-        background: '#f5f5f5',
-        backgroundDark: '#0f172a',
-        surface: '#ffffff',
-        surfaceDark: '#1e293b',
+  // Shadow System (simplified)
+  shadows: {
+    subtle: {
+      shadowColor: "#000",
+      shadowOffset: { width: 0, height: 1 },
+      shadowOpacity: 0.05,
+      shadowRadius: 3,
+      elevation: 1,
     },
-
-    // Gradient Definitions
-    gradients: {
-        primary: ['#3b82f6', '#8b5cf6'] as const,
-        primaryVertical: ['#3b82f6', '#2563eb'] as const,
-        success: ['#10b981', '#059669'] as const,
-        warning: ['#f59e0b', '#d97706'] as const,
-        danger: ['#ef4444', '#ec4899'] as const,
-        purple: ['#8b5cf6', '#7c3aed'] as const,
-        ocean: ['#06b6d4', '#3b82f6'] as const,
-        sunset: ['#f59e0b', '#ef4444'] as const,
-        forest: ['#10b981', '#059669'] as const,
-        lavender: ['#a78bfa', '#ec4899'] as const,
-        dark: ['#1e293b', '#0f172a'] as const,
+    medium: {
+      shadowColor: "#000",
+      shadowOffset: { width: 0, height: 2 },
+      shadowOpacity: 0.08,
+      shadowRadius: 8,
+      elevation: 2,
     },
-
-    // Shadow System
-    shadows: {
-        subtle: {
-            shadowColor: '#000',
-            shadowOffset: { width: 0, height: 1 },
-            shadowOpacity: 0.05,
-            shadowRadius: 2,
-            elevation: 2,
-        },
-        medium: {
-            shadowColor: '#000',
-            shadowOffset: { width: 0, height: 2 },
-            shadowOpacity: 0.1,
-            shadowRadius: 4,
-            elevation: 3,
-        },
-        strong: {
-            shadowColor: '#000',
-            shadowOffset: { width: 0, height: 4 },
-            shadowOpacity: 0.15,
-            shadowRadius: 8,
-            elevation: 5,
-        },
-        glow: {
-            shadowColor: '#3b82f6',
-            shadowOffset: { width: 0, height: 4 },
-            shadowOpacity: 0.3,
-            shadowRadius: 12,
-            elevation: 8,
-        },
-        glowDanger: {
-            shadowColor: '#ef4444',
-            shadowOffset: { width: 0, height: 4 },
-            shadowOpacity: 0.3,
-            shadowRadius: 12,
-            elevation: 8,
-        },
+    strong: {
+      shadowColor: "#000",
+      shadowOffset: { width: 0, height: 4 },
+      shadowOpacity: 0.12,
+      shadowRadius: 16,
+      elevation: 4,
     },
-
-    // Typography
-    typography: {
-        // Font sizes
-        fontSize: {
-            xs: 12,
-            sm: 14,
-            base: 16,
-            lg: 18,
-            xl: 20,
-            '2xl': 24,
-            '3xl': 28,
-            '4xl': 32,
-            '5xl': 36,
-        },
-        // Font weights
-        fontWeight: {
-            normal: '400' as const,
-            medium: '500' as const,
-            semibold: '600' as const,
-            bold: '700' as const,
-            extrabold: '800' as const,
-        },
-        // Line heights
-        lineHeight: {
-            tight: 1.2,
-            normal: 1.5,
-            relaxed: 1.75,
-        },
+    // Legacy glow shadows (deprecated - avoid in new designs)
+    glow: {
+      shadowColor: "#6B9080",
+      shadowOffset: { width: 0, height: 4 },
+      shadowOpacity: 0.2,
+      shadowRadius: 12,
+      elevation: 6,
     },
-
-    // Spacing Scale
-    spacing: {
-        xs: 4,
-        sm: 8,
-        md: 12,
-        lg: 16,
-        xl: 20,
-        '2xl': 24,
-        '3xl': 32,
-        '4xl': 40,
-        '5xl': 48,
+    glowDanger: {
+      shadowColor: "#B66B6B",
+      shadowOffset: { width: 0, height: 4 },
+      shadowOpacity: 0.2,
+      shadowRadius: 12,
+      elevation: 6,
     },
+  },
 
-    // Border Radius
-    borderRadius: {
-        sm: 4,
-        md: 8,
-        lg: 12,
-        xl: 16,
-        '2xl': 20,
-        '3xl': 24,
-        full: 9999,
+  // Animation Timing (simplified)
+  animation: {
+    duration: {
+      fast: 200,
+      normal: 300,
+      slow: 500,
     },
+  },
 
-    // Animation Timing
-    animation: {
-        duration: {
-            fast: 150,
-            normal: 250,
-            slow: 350,
-        },
-        easing: {
-            easeIn: 'ease-in',
-            easeOut: 'ease-out',
-            easeInOut: 'ease-in-out',
-        },
-    },
+  // Gradients (kept for legacy compatibility - should be avoided in new designs)
+  gradients: {
+    primary: ["#6B9080", "#8AAE9E"] as const,
+    success: ["#7BA05B", "#8DB76A"] as const,
+    warning: ["#D4A574", "#E0B886"] as const,
+    danger: ["#B66B6B", "#C87D7D"] as const,
+    // Legacy gradients (deprecated)
+    purple: ["#8b5cf6", "#7c3aed"] as const,
+    ocean: ["#06b6d4", "#3b82f6"] as const,
+    sunset: ["#f59e0b", "#ef4444"] as const,
+    forest: ["#10b981", "#059669"] as const,
+    lavender: ["#a78bfa", "#ec4899"] as const,
+    dark: ["#1e293b", "#0f172a"] as const,
+    primaryVertical: ["#6B9080", "#5A7A6E"] as const,
+  },
+};
 
-    // Glassmorphism
-    glass: {
-        light: {
-            backgroundColor: 'rgba(255, 255, 255, 0.7)',
-            borderWidth: 1,
-            borderColor: 'rgba(255, 255, 255, 0.3)',
-        },
-        dark: {
-            backgroundColor: 'rgba(0, 0, 0, 0.3)',
-            borderWidth: 1,
-            borderColor: 'rgba(255, 255, 255, 0.1)',
-        },
-    },
+/**
+ * Dark theme object
+ * @deprecated Use useTheme() hook instead
+ */
+export const darkTheme = {
+  ...theme,
+  colors: {
+    ...darkColors,
+
+    // Legacy color mappings
+    secondary: "#8b5cf6", // Old purple - deprecated
+    purple: "#B5C2B0", // Mapped to dark accent
+    purpleDark: "#6B9080",
+    pink: "#D4A285", // Mapped to dark terracotta
+    successLight: "#8DB76A",
+    gray50: "#2F3432",
+    gray100: "#3A3F3C",
+    gray200: "#3A3F3C",
+    gray300: "#7A8379",
+    gray400: "#7A8379",
+    gray500: "#B8BFB5",
+    gray600: "#B8BFB5",
+    gray700: "#E8E6E1",
+    gray800: "#E8E6E1",
+    gray900: "#E8E6E1",
+  },
 };
 
 export type Theme = typeof theme;
+export type DarkTheme = typeof darkTheme;

apps/mobile/src/styles/typography.ts

@@ -0,0 +1,174 @@
+/**
+ * FitAI Typography System - BOLD MODERN
+ * High-impact typography with clear hierarchy using system fonts
+ */
+
+import { TextStyle } from "react-native";
+
+/**
+ * Font Sizes - Larger for bold impact
+ */
+export const fontSize = {
+  xs: 12,
+  sm: 14,
+  base: 16,
+  md: 18, // Body emphasis
+  lg: 22,
+  xl: 26,
+  "2xl": 32,
+  "3xl": 40,
+  "4xl": 52,
+  "5xl": 64,
+} as const;
+
+/**
+ * Font Weights - Emphasize bold
+ */
+export const fontWeight = {
+  regular: "400" as TextStyle["fontWeight"],
+  medium: "500" as TextStyle["fontWeight"],
+  semibold: "600" as TextStyle["fontWeight"],
+  bold: "700" as TextStyle["fontWeight"],
+  extrabold: "800" as TextStyle["fontWeight"],
+} as const;
+
+/**
+ * Line Heights
+ */
+export const lineHeight = {
+  tight: 1.15,
+  normal: 1.4,
+  relaxed: 1.6,
+} as const;
+
+/**
+ * Letter Spacing
+ */
+export const letterSpacing = {
+  tight: -1,
+  normal: 0,
+  wide: 0.5,
+  wider: 1.5,
+} as const;
+
+/**
+ * Typography Presets
+ * Ready-to-use text styles for common use cases
+ */
+export interface TypographyPresets {
+  h1: TextStyle;
+  h2: TextStyle;
+  h3: TextStyle;
+  h4: TextStyle;
+  body: TextStyle;
+  bodyEmphasis: TextStyle;
+  label: TextStyle;
+  stat: TextStyle;
+  statLarge: TextStyle;
+  caption: TextStyle;
+  button: TextStyle;
+}
+
+export const createTypographyPresets = (
+  textPrimary: string,
+  textSecondary: string,
+  textTertiary: string,
+): TypographyPresets => ({
+  // Display Text (Screen Titles) - Extra Bold
+  h1: {
+    fontSize: fontSize["4xl"],
+    fontWeight: fontWeight.extrabold,
+    letterSpacing: letterSpacing.tight,
+    lineHeight: fontSize["4xl"] * lineHeight.tight,
+    color: textPrimary,
+  },
+
+  // Section Headers - Bold
+  h2: {
+    fontSize: fontSize["2xl"],
+    fontWeight: fontWeight.bold,
+    letterSpacing: -0.5,
+    color: textPrimary,
+  },
+
+  // Card Titles - Semibold
+  h3: {
+    fontSize: fontSize.lg,
+    fontWeight: fontWeight.semibold,
+    letterSpacing: -0.3,
+    color: textPrimary,
+  },
+
+  // Small Headers
+  h4: {
+    fontSize: fontSize.md,
+    fontWeight: fontWeight.semibold,
+    color: textPrimary,
+  },
+
+  // Body Text
+  body: {
+    fontSize: fontSize.base,
+    fontWeight: fontWeight.regular,
+    lineHeight: fontSize.base * lineHeight.normal,
+    color: textSecondary,
+  },
+
+  // Emphasized Body
+  bodyEmphasis: {
+    fontSize: fontSize.md,
+    fontWeight: fontWeight.medium,
+    lineHeight: fontSize.md * lineHeight.normal,
+    color: textPrimary,
+  },
+
+  // Labels (uppercase, spaced)
+  label: {
+    fontSize: fontSize.xs,
+    fontWeight: fontWeight.semibold,
+    letterSpacing: letterSpacing.wider,
+    textTransform: "uppercase",
+    color: textTertiary,
+  },
+
+  // Stats/Numbers - Bold Large
+  stat: {
+    fontSize: fontSize["3xl"],
+    fontWeight: fontWeight.bold,
+    letterSpacing: -1,
+    color: textPrimary,
+  },
+
+  // Large Stats (Hero numbers)
+  statLarge: {
+    fontSize: fontSize["5xl"],
+    fontWeight: fontWeight.extrabold,
+    letterSpacing: -2,
+    lineHeight: fontSize["5xl"] * lineHeight.tight,
+    color: textPrimary,
+  },
+
+  // Caption/Small text
+  caption: {
+    fontSize: fontSize.xs,
+    fontWeight: fontWeight.regular,
+    color: textTertiary,
+  },
+
+  // Button Text
+  button: {
+    fontSize: fontSize.base,
+    fontWeight: fontWeight.bold,
+    letterSpacing: 0.5,
+  },
+});
+
+/**
+ * Typography utility object
+ */
+export const typography = {
+  fontSize,
+  fontWeight,
+  lineHeight,
+  letterSpacing,
+};

apps/mobile/src/utils/activityFeed.ts

@@ -0,0 +1,220 @@
+/**
+ * Activity Feed Utilities
+ *
+ * Combines multiple data sources (check-ins, goals, nutrition) into a unified activity feed
+ */
+
+import type { AttendanceStatistics } from "../api/types";
+import type { FitnessGoal } from "../services/fitnessGoals";
+
+export enum ActivityType {
+  GYM_CHECKIN = "gym_checkin",
+  GOAL_COMPLETED = "goal_completed",
+  GOAL_CREATED = "goal_created",
+  NUTRITION_MILESTONE = "nutrition_milestone",
+}
+
+export interface ActivityItem {
+  id: string;
+  type: ActivityType;
+  title: string;
+  timestamp: Date;
+  duration?: number; // in minutes
+  metadata?: Record<string, any>;
+}
+
+/**
+ * Convert attendance check-ins to activity items
+ */
+export function checkInsToActivities(
+  attendance: AttendanceStatistics,
+): ActivityItem[] {
+  return attendance.recentCheckIns.map((checkIn) => {
+    const checkInDate = new Date(checkIn.checkInTime);
+
+    return {
+      id: `checkin-${checkIn.id}`,
+      type: ActivityType.GYM_CHECKIN,
+      title: "Gym Check-in",
+      timestamp: checkInDate,
+      duration: checkIn.duration || undefined,
+      metadata: {
+        checkOutTime: checkIn.checkOutTime,
+      },
+    };
+  });
+}
+
+/**
+ * Convert completed goals to activity items
+ */
+export function completedGoalsToActivities(
+  goals: FitnessGoal[],
+): ActivityItem[] {
+  return goals
+    .filter((goal) => goal.status === "completed" && goal.completedDate)
+    .map((goal) => {
+      const completedDate = new Date(goal.completedDate!);
+
+      return {
+        id: `goal-completed-${goal.id}`,
+        type: ActivityType.GOAL_COMPLETED,
+        title: goal.title,
+        timestamp: completedDate,
+        metadata: {
+          goalType: goal.goalType,
+          priority: goal.priority,
+          targetValue: goal.targetValue,
+          unit: goal.unit,
+        },
+      };
+    });
+}
+
+/**
+ * Convert recently created goals to activity items
+ */
+export function newGoalsToActivities(
+  goals: FitnessGoal[],
+  daysBack: number = 7,
+): ActivityItem[] {
+  const cutoffDate = new Date();
+  cutoffDate.setDate(cutoffDate.getDate() - daysBack);
+
+  return goals
+    .filter((goal) => {
+      const createdDate = new Date(goal.createdAt);
+      return goal.status === "active" && createdDate > cutoffDate;
+    })
+    .map((goal) => {
+      const createdDate = new Date(goal.createdAt);
+
+      return {
+        id: `goal-created-${goal.id}`,
+        type: ActivityType.GOAL_CREATED,
+        title: goal.title,
+        timestamp: createdDate,
+        metadata: {
+          goalType: goal.goalType,
+          priority: goal.priority,
+        },
+      };
+    });
+}
+
+/**
+ * Combine and sort all activities by timestamp (most recent first)
+ */
+export function combineActivities(
+  ...activityGroups: ActivityItem[][]
+): ActivityItem[] {
+  const allActivities = activityGroups.flat();
+
+  return allActivities.sort(
+    (a, b) => b.timestamp.getTime() - a.timestamp.getTime(),
+  );
+}
+
+/**
+ * Get recent activities limited to a specific count
+ */
+export function getRecentActivities(
+  activities: ActivityItem[],
+  limit: number = 5,
+): ActivityItem[] {
+  return activities.slice(0, limit);
+}
+
+/**
+ * Format activity timestamp for display
+ */
+export function formatActivityTime(timestamp: Date): string {
+  const now = new Date();
+  const diffMs = now.getTime() - timestamp.getTime();
+  const diffMins = Math.floor(diffMs / 60000);
+  const diffHours = Math.floor(diffMs / 3600000);
+  const diffDays = Math.floor(diffMs / 86400000);
+
+  // Today
+  if (diffDays === 0) {
+    if (diffMins < 60) {
+      return diffMins <= 1 ? "Just now" : `${diffMins}m ago`;
+    }
+    return `Today, ${timestamp.toLocaleTimeString([], {
+      hour: "2-digit",
+      minute: "2-digit",
+    })}`;
+  }
+
+  // Yesterday
+  if (diffDays === 1) {
+    return `Yesterday, ${timestamp.toLocaleTimeString([], {
+      hour: "2-digit",
+      minute: "2-digit",
+    })}`;
+  }
+
+  // This week (within 7 days)
+  if (diffDays < 7) {
+    return `${diffDays}d ago`;
+  }
+
+  // Older
+  return timestamp.toLocaleDateString();
+}
+
+/**
+ * Format duration in minutes to human-readable string
+ */
+export function formatDuration(minutes?: number): string | undefined {
+  if (!minutes) return undefined;
+
+  if (minutes < 60) {
+    return `${minutes}m`;
+  }
+
+  const hours = Math.floor(minutes / 60);
+  const mins = minutes % 60;
+
+  if (mins === 0) {
+    return `${hours}h`;
+  }
+
+  return `${hours}h ${mins}m`;
+}
+
+/**
+ * Get icon name for activity type
+ */
+export function getActivityIcon(type: ActivityType): string {
+  switch (type) {
+    case ActivityType.GYM_CHECKIN:
+      return "barbell";
+    case ActivityType.GOAL_COMPLETED:
+      return "trophy";
+    case ActivityType.GOAL_CREATED:
+      return "flag";
+    case ActivityType.NUTRITION_MILESTONE:
+      return "restaurant";
+    default:
+      return "checkmark-circle";
+  }
+}
+
+/**
+ * Get activity title prefix/emoji
+ */
+export function getActivityEmoji(type: ActivityType): string {
+  switch (type) {
+    case ActivityType.GYM_CHECKIN:
+      return "💪";
+    case ActivityType.GOAL_COMPLETED:
+      return "🏆";
+    case ActivityType.GOAL_CREATED:
+      return "🎯";
+    case ActivityType.NUTRITION_MILESTONE:
+      return "🍽️";
+    default:
+      return "✅";
+  }
+}