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

@@ -1,142 +0,0 @@
-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";
-
-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");
-
-    const allUsers = await database.getAllUsers();
-    const allClients = await database.getAllClients();
-
-    const paymentsRaw = 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/stats/route.ts

@@ -2,7 +2,6 @@ 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 {
@@ -52,7 +51,7 @@ export async function GET(req: Request) {
       revenueGrowth: 0,
     };
 
-    return successResponse({ stats });
+    return NextResponse.json(stats);
   } catch (error) {
     console.error("Dashboard stats error:", error);
     return new NextResponse("Internal Server Error", { status: 500 });

apps/admin/src/app/layout.tsx

@@ -10,7 +10,6 @@ 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"] });
 
@@ -26,7 +25,6 @@ export default function RootLayout({
 }) {
   return (
     <ClerkProvider>
-      <QueryProvider>
       <html lang="en">
         <body className={inter.className}>
           <div className="flex min-h-screen bg-slate-50">
@@ -36,7 +34,6 @@ export default function RootLayout({
           <Toaster richColors position="top-right" />
         </body>
       </html>
-      </QueryProvider>
     </ClerkProvider>
   );
 }

apps/admin/src/app/page.tsx

@@ -1,52 +1,69 @@
 "use client";
 
+import { useEffect, useState } from "react";
 import { Users, CreditCard, CalendarCheck, TrendingUp } from "lucide-react";
 import { StatsCard } from "@/components/ui/StatsCard";
-import { StatsCardSkeleton } from "@/components/ui/skeleton";
 import { UserManagement } from "@/components/users/UserManagement";
 import { AnalyticsDashboard } from "@/components/analytics/AnalyticsDashboard";
-import { useDashboardStats } from "@/hooks/use-api";
+import axios from "axios";
+
+interface DashboardStats {
+  totalUsers: number;
+  activeClients: number;
+  totalRevenue: number;
+  revenueGrowth: number;
+}
 
 export default function Home() {
-  const { data: stats, isLoading } = useDashboardStats();
+  const [stats, setStats] = useState<DashboardStats>({
+    totalUsers: 0,
+    activeClients: 0,
+    totalRevenue: 0,
+    revenueGrowth: 0,
+  });
+  const [loading, setLoading] = useState(true);
+
+  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);
+      }
+    };
+
+    fetchStats();
+  }, []);
 
   const formatCurrency = (value: number) => {
     return new Intl.NumberFormat("en-US", {
       style: "currency",
       currency: "USD",
-    }).format(value || 0);
+    }).format(value);
   };
 
   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">
+        <p className="text-slate-500 mt-2">Welcome back, here's what's happening today.</p>
-          Welcome back, here's what's happening today.
-        </p>
       </div>
 
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
-        {isLoading ? (
-          <>
-            <StatsCardSkeleton />
-            <StatsCardSkeleton />
-            <StatsCardSkeleton />
-            <StatsCardSkeleton />
-          </>
-        ) : (
-          <>
         <StatsCard
           title="Total Users"
-              value={stats?.totalUsers ?? 0}
+          value={loading ? "..." : stats.totalUsers}
-              change="+12%"
+          change="+12%" // Placeholder for now as we don't track historical growth yet
           trend="up"
           icon={Users}
           color="blue"
         />
         <StatsCard
           title="Active Clients"
-              value={stats?.activeClients ?? 0}
+          value={loading ? "..." : stats.activeClients}
           change="+5%"
           trend="up"
           icon={CalendarCheck}
@@ -54,35 +71,29 @@ export default function Home() {
         />
         <StatsCard
           title="Revenue"
-              value={formatCurrency(stats?.totalRevenue ?? 0)}
+          value={loading ? "..." : formatCurrency(stats.totalRevenue)}
-              change={`${(stats?.revenueGrowth ?? 0) > 0 ? "+" : ""}${stats?.revenueGrowth ?? 0}%`}
+          change={`${stats.revenueGrowth > 0 ? "+" : ""}${stats.revenueGrowth}%`}
-              trend={(stats?.revenueGrowth ?? 0) >= 0 ? "up" : "down"}
+          trend={stats.revenueGrowth >= 0 ? "up" : "down"}
           icon={CreditCard}
           color="purple"
         />
         <StatsCard
           title="Growth"
-              value="24%"
+          value="24%" // Placeholder
           change="-2%"
           trend="down"
           icon={TrendingUp}
           color="orange"
         />
-          </>
-        )}
       </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">
+          <h3 className="text-xl font-bold text-slate-900 mb-6">Recent Activity</h3>
-            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">
+          <h3 className="text-xl font-bold text-slate-900 mb-6">Quick Analytics</h3>
-            Quick Analytics
-          </h3>
           <AnalyticsDashboard />
         </div>
       </div>

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

@@ -1,40 +1,86 @@
 "use client";
 
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useUser } from "@clerk/nextjs";
 import log from "@/lib/logger";
 import { toast } from "@/lib/toast";
-import {
+
-  useUsers,
+interface User {
-  useRecommendations,
+  id: string;
-  useGenerateRecommendations,
+  firstName: string;
-  useApproveRecommendation,
+  lastName: string;
-  useUpdateRecommendation,
+  email: string;
-  type Recommendation,
+}
-} from "@/hooks/use-api";
+
+interface Recommendation {
+  id: string;
+  userId: string;
+  content: string;
+  recommendationText: string;
+  activityPlan: string;
+  dietPlan: string;
+  status: string;
+  createdAt: Date;
+}
 
 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);
 
-  const { data: users = [], isLoading: usersLoading } = useUsers();
+  useEffect(() => {
-  const { data: allRecommendations = [], isLoading: recsLoading } =
+    fetchData();
-    useRecommendations();
+  }, []);
-  const pendingRecommendations = allRecommendations.filter(
-    (r) => r.status === "pending",
-  );
 
-  const generateRec = useGenerateRecommendations();
+  const fetchData = async () => {
-  const approveRec = useApproveRecommendation();
+    try {
-  const updateRec = useUpdateRecommendation();
+      // 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 handleGenerate = async (userId: string) => {
+    setGenerating(userId);
     try {
-      await generateRec.mutateAsync(userId);
+      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
+      }
     } catch (error) {
       log.error("Failed to generate recommendation", error);
       toast.error("Failed to generate recommendation.");
+    } finally {
+      setGenerating(null);
     }
   };
 
@@ -43,11 +89,25 @@ export default function RecommendationsPage() {
     status: "approved" | "rejected",
   ) => {
     try {
-      await approveRec.mutateAsync({
+      const res = await fetch("/api/recommendations/approve", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
           recommendationId,
-        approved: status === "approved",
+          status,
+          approvedBy: user?.id || "admin",
+        }),
       });
+
+      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
+      }
     } catch (error) {
       log.error("Failed to approve recommendation", error);
       toast.error("Error processing request");
@@ -64,24 +124,38 @@ export default function RecommendationsPage() {
       newActivityPlan === null ||
       newDietPlan === null
     ) {
+      // User cancelled one of the prompts
       return;
     }
 
     try {
-      await updateRec.mutateAsync({
+      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,
+        }),
       });
+
+      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
+      }
     } catch (error) {
       log.error("Failed to update recommendation", error);
       toast.error("Failed to update recommendation.");
     }
   };
 
-  if (usersLoading || recsLoading) {
+  if (loading) {
     return (
       <div className="flex items-center justify-center h-screen">
         <div className="text-xl">Loading...</div>
@@ -141,10 +215,10 @@ export default function RecommendationsPage() {
                   </div>
                   <button
                     onClick={() => handleGenerate(user.id)}
-                    disabled={generateRec.isPending}
+                    disabled={generating === user.id}
                     className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 disabled:opacity-50"
                   >
-                    {generateRec.isPending ? "Generating..." : "Generate"}
+                    {generating === user.id ? "Generating..." : "Generate"}
                   </button>
                 </li>
               ))}

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

@@ -1,34 +1,75 @@
-"use client";
+'use client'
 
-import { UserGrowthChart } from "@/components/charts/UserGrowthChart";
+import { useState, useEffect } from 'react'
-import { MembershipDistributionChart } from "@/components/charts/MembershipDistributionChart";
+import { UserGrowthChart } from '@/components/charts/UserGrowthChart'
-import { RevenueChart } from "@/components/charts/RevenueChart";
+import { MembershipDistributionChart } from '@/components/charts/MembershipDistributionChart'
-import { Card, CardHeader, CardContent } from "@/components/ui/card";
+import { RevenueChart } from '@/components/charts/RevenueChart'
-import { useAnalytics } from "@/hooks/use-api";
+import { Card, CardHeader, CardContent } from '@/components/ui/card'
+
+interface ChartData {
+  label: string
+  value: number
+  color?: string
+}
 
 export function AnalyticsDashboard() {
-  const { data: analytics, isLoading } = useAnalytics(6);
+  const [userGrowthData, setUserGrowthData] = useState<ChartData[]>([])
+  const [membershipData, setMembershipData] = useState<ChartData[]>([])
+  const [revenueData, setRevenueData] = useState<ChartData[]>([])
+  const [loading, setLoading] = useState(true)
 
-  const userGrowthData = analytics?.userGrowth ?? [];
+  useEffect(() => {
-  const membershipData = analytics?.membershipDistribution ?? [];
+    fetchAnalyticsData()
-  const revenueData = analytics?.revenue ?? [];
+  }, [])
 
-  const totalUsers =
+  const fetchAnalyticsData = async () => {
-    userGrowthData.length > 0
+    setLoading(true)
-      ? userGrowthData[userGrowthData.length - 1].value
+    try {
-      : 0;
+      // Mock data for demonstration - replace with real API calls
-  const totalRevenue = revenueData.reduce((sum, item) => sum + item.value, 0);
+      const mockUserGrowth = [
-  const activeMembers = membershipData.reduce(
+        { label: 'Jan', value: 45 },
-    (sum, item) => sum + item.value,
+        { label: 'Feb', value: 52 },
-    0,
+        { label: 'Mar', value: 61 },
-  );
+        { label: 'Apr', value: 58 },
+        { label: 'May', value: 67 },
+        { label: 'Jun', value: 74 },
+      ]
 
-  if (isLoading) {
+      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) {
     return (
       <div className="flex justify-center items-center h-64">
         <div className="text-lg">Loading analytics...</div>
       </div>
-    );
+    )
   }
 
   return (
@@ -40,9 +81,7 @@ export function AnalyticsDashboard() {
         <Card>
           <CardContent>
             <div className="text-center">
-              <div className="text-3xl font-bold text-blue-600">
+              <div className="text-3xl font-bold text-blue-600">{totalUsers}</div>
-                {totalUsers}
-              </div>
               <div className="text-gray-600">Total Users</div>
             </div>
           </CardContent>
@@ -51,9 +90,7 @@ export function AnalyticsDashboard() {
         <Card>
           <CardContent>
             <div className="text-center">
-              <div className="text-3xl font-bold text-green-600">
+              <div className="text-3xl font-bold text-green-600">${totalRevenue.toLocaleString()}</div>
-                ${totalRevenue.toLocaleString()}
-              </div>
               <div className="text-gray-600">Total Revenue</div>
             </div>
           </CardContent>
@@ -62,9 +99,7 @@ export function AnalyticsDashboard() {
         <Card>
           <CardContent>
             <div className="text-center">
-              <div className="text-3xl font-bold text-purple-600">
+              <div className="text-3xl font-bold text-purple-600">{activeMembers}</div>
-                {activeMembers}
-              </div>
               <div className="text-gray-600">Active Members</div>
             </div>
           </CardContent>
@@ -98,14 +133,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/providers/QueryProvider.tsx

@@ -1,26 +0,0 @@
-"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/Sidebar.tsx

@@ -13,18 +13,40 @@ import {
   Brain,
 } from "lucide-react";
 import { UserButton, useUser } from "@clerk/nextjs";
-import { usePendingRecommendationsCount } from "@/hooks/use-api";
+
+interface Recommendation {
+  id: string;
+  status: string;
+}
 
 export function Sidebar() {
   const pathname = usePathname();
   const { user } = useUser();
-  const { data: pendingCount = 0 } = usePendingRecommendationsCount();
+  const [pendingCount, setPendingCount] = useState(0);
   const [mounted, setMounted] = useState(false);
 
   useEffect(() => {
     setMounted(true);
   }, []);
 
+  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 menuItems = [
     { icon: LayoutDashboard, label: "Dashboard", href: "/" },
     { icon: Users, label: "Users", href: "/users" },

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

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

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

@@ -1,23 +1,43 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useEffect } from "react";
-import { UserGrid, type User } from "@/components/users/UserGrid";
+import { UserGrid } from "@/components/users/UserGrid";
+// import { Button } from "@/components/ui/button";
 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,
+interface User {
-  useGyms,
+  id: string;
-  useUpdateUser,
+  email: string;
-  useDeleteUser,
+  firstName: string;
-  useSendInvitation,
+  lastName: string;
-} from "@/hooks/use-api";
+  role: string;
+  phone?: string;
+  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() {
   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);
@@ -32,17 +52,68 @@ export function UserManagement() {
     gymId: string;
   } | null>(null);
 
-  const {
+  // Active gyms for dropdown
-    data: users = [],
+  const [gyms, setGyms] = useState<Array<{ id: string; name: string }>>([]);
-    isLoading,
+
-    refetch,
+  // Load gyms when modal opens or refreshes
-  } = useUsers({
+  useEffect(() => {
-    role: filter !== "all" ? filter : undefined,
+    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 { data: gyms = [] } = useGyms();
+      const responseData = await response.json();
-  const updateUser = useUpdateUser();
+      const data = responseData.data || responseData; // Handle both old and new API response formats
-  const deleteUser = useDeleteUser();
+      log.debug("Received users data", {
-  const sendInvitation = useSendInvitation();
+        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 handleUserSelect = (user: User | null) => {
     setSelectedUser(user);
@@ -73,12 +144,17 @@ export function UserManagement() {
       return;
 
     try {
-      const deletePromises = users.map((u) =>
+      const response = await fetch("/api/users", {
-        fetch(`/api/users?id=${u.id}`, { method: "DELETE" }),
+        method: "DELETE",
-      );
+        headers: { "Content-Type": "application/json" },
-      await Promise.all(deletePromises);
+        body: JSON.stringify({ ids: users.map((u) => u.id) }),
-      refetch();
+      });
+      if (response.ok) {
+        fetchUsers();
         toast.success("Users deleted successfully");
+      } else {
+        toast.error("Error deleting users");
+      }
     } catch (error) {
       log.error("Failed to delete users", error);
     }
@@ -120,7 +196,7 @@ export function UserManagement() {
   };
 
   const handleRefresh = () => {
-    refetch();
+    fetchUsers();
   };
 
   const handleSaveEdit = async () => {
@@ -128,6 +204,7 @@ export function UserManagement() {
 
     try {
       if (selectedUser) {
+        // Update existing user
         const payload = {
           id: selectedUser.id,
           email: editForm.email,
@@ -137,21 +214,80 @@ export function UserManagement() {
           phone: editForm.phone,
           gymId: editForm.gymId === "" ? null : editForm.gymId,
         };
-
+        log.debug("Updating user", payload);
-        await updateUser.mutateAsync(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);
-        refetch();
+          // Still re-fetch from server to ensure consistency
+          log.debug("Re-fetching users after successful edit");
+          fetchUsers();
           toast.success("User updated successfully");
         } else {
-        await sendInvitation.mutateAsync({
+          const errText = await response.text().catch(() => "");
-          email: editForm.email,
+          log.error("User update failed", new Error(errText), {
-          role: editForm.role,
+            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);
-        refetch();
+          fetchUsers();
           toast.success("Invitation sent successfully!");
+        } else {
+          const errorData = await response.json();
+          toast.error(`Error sending invitation: ${errorData.error}`);
+        }
       }
     } catch (error) {
       console.error(error);
@@ -163,11 +299,17 @@ export function UserManagement() {
     if (!selectedUser) return;
 
     try {
-      await deleteUser.mutateAsync(selectedUser.id);
+      const response = await fetch(`/api/users?id=${selectedUser.id}`, {
+        method: "DELETE",
+      });
+      if (response.ok) {
         setIsDeleting(false);
         setSelectedUser(null);
-      refetch();
+        fetchUsers();
         toast.success("User deleted successfully");
+      } else {
+        toast.error("Error deleting user");
+      }
     } catch (error) {
       log.error("Failed to delete user", error);
     }
@@ -255,7 +397,7 @@ export function UserManagement() {
             onEditUser={handleEditUser}
             onDeleteUser={handleDeleteUser}
             onBulkDelete={handleBulkDelete}
-            loading={isLoading}
+            loading={loading}
           />
         </CardContent>
       </Card>
@@ -449,9 +591,7 @@ export function UserManagement() {
                   </p>
                   <p>
                     <span className="font-medium">Joined:</span>{" "}
-                    {selectedUser.createdAt
+                    {new Date(selectedUser.createdAt).toLocaleDateString()}
-                      ? new Date(selectedUser.createdAt).toLocaleDateString()
-                      : "N/A"}
                   </p>
                 </div>
               </div>
@@ -513,7 +653,7 @@ export function UserManagement() {
       <CreateUserModal
         open={createModalOpen}
         onOpenChange={setCreateModalOpen}
-        onSuccess={() => refetch()}
+        onSuccess={() => fetchUsers()}
       />
     </div>
   );

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

@@ -1,380 +0,0 @@
-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;
-}
-
-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) {
-  return useQuery({
-    queryKey: ["analytics", months],
-    queryFn: () =>
-      fetchApi<{ data: { analytics: AnalyticsData } }>(
-        `/api/admin/analytics?months=${months}`,
-      ).then((res) => res.data?.analytics),
-  });
-}