Refactor API calls to use new query functions and update components accordingly

- Replaced direct server client calls with new query functions in ImagesPage, OverviewPage, PlaygroundPage, ProjectImagesPage, ProjectSettingsPage, ProjectsPage, ProfilePage, SecurityPage, TemplatesPage, and AuditPage.
- Updated props in various components to use `data` instead of `initialData` for consistency.
- Created new query functions for admin, images, projects, templates, billing, audits, and usage.
- Adjusted types in API response handling to improve type safety and clarity.
- Enhanced pagination and search capabilities in the new query functions.

Author: suxrobGM

apps/web/eslint.config.mjs

@@ -1,6 +1,6 @@
-import { defineConfig, globalIgnores } from "eslint/config";
 import nextVitals from "eslint-config-next/core-web-vitals";
 import nextTs from "eslint-config-next/typescript";
+import { defineConfig, globalIgnores } from "eslint/config";
 
 const eslintConfig = defineConfig([
   ...nextVitals,
@@ -13,6 +13,14 @@ const eslintConfig = defineConfig([
     "build/**",
     "next-env.d.ts",
   ]),
+  {
+    settings: {
+      // Fix for ESLint 10+: eslint-plugin-react uses context.getFilename() (legacy API)
+      // which was removed in ESLint 10 flat config. Declaring the version explicitly
+      // prevents the plugin from trying to auto-detect it and failing.
+      react: { version: "19" },
+    },
+  },
 ]);
 
 export default eslintConfig;

apps/web/src/app/(admin)/admin/images/page.tsx

@@ -1,21 +1,13 @@
 import type { ReactElement } from "react";
 import { AdminImageList } from "@/components/features/admin";
-import { getServerClient } from "@/lib/api/server";
+import { getAdminImages } from "@/lib/api/queries";
 
 interface PageProps {
   searchParams: Promise<{ userId?: string; projectId?: string }>;
 }
 
 export default async function AdminImagesPage(props: PageProps): Promise<ReactElement> {
   const { userId, projectId } = await props.searchParams;
-  const client = await getServerClient();
-  const { data } = await client.api.admin.images.get({
-    query: {
-      page: 1,
-      limit: 20,
-      ...(userId && { userId }),
-      ...(projectId && { projectId }),
-    },
-  });
-  return <AdminImageList initialData={data} initialUserId={userId} initialProjectId={projectId} />;
+  const data = await getAdminImages({ page: 1, limit: 20, userId, projectId });
+  return <AdminImageList data={data} userId={userId} projectId={projectId} />;
 }

apps/web/src/app/(admin)/admin/layout.tsx

@@ -2,21 +2,14 @@ import { Suspense, type PropsWithChildren, type ReactElement } from "react";
 import { isAdminRole } from "@ogstack/shared";
 import { redirect } from "next/navigation";
 import { AppShell } from "@/components/layout/app-shell";
-import { getServerClient } from "@/lib/api/server";
+import { getCurrentUser } from "@/lib/api/queries";
 import { ROUTES } from "@/lib/constants";
 import { AuthProvider } from "@/providers/auth-provider";
 import { ConfirmProvider } from "@/providers/confirm-provider";
 
-async function getUser() {
-  const client = await getServerClient();
-  const { data, error } = await client.api.users.me.get();
-  if (error) return null;
-  return data;
-}
-
 async function AdminAuthenticatedShell(props: PropsWithChildren): Promise<ReactElement> {
   const { children } = props;
-  const user = await getUser();
+  const user = await getCurrentUser();
 
   if (!user) {
     redirect(ROUTES.login);
@@ -27,7 +20,7 @@ async function AdminAuthenticatedShell(props: PropsWithChildren): Promise<ReactE
   }
 
   return (
-    <AuthProvider initialUser={user}>
+    <AuthProvider user={user}>
       <AppShell variant="admin">{children}</AppShell>
     </AuthProvider>
   );

apps/web/src/app/(admin)/admin/overview/page.tsx

@@ -1,11 +1,10 @@
 import type { ReactElement } from "react";
 import { notFound } from "next/navigation";
 import { AdminOverview } from "@/components/features/admin";
-import { getServerClient } from "@/lib/api/server";
+import { getAdminStats } from "@/lib/api/queries";
 
 export default async function AdminOverviewPage(): Promise<ReactElement> {
-  const client = await getServerClient();
-  const { data } = await client.api.admin.stats.get();
+  const data = await getAdminStats();
   if (!data) notFound();
   return <AdminOverview stats={data} />;
 }

apps/web/src/app/(admin)/admin/users/[id]/page.tsx

@@ -9,16 +9,15 @@ import {
   AdminUserUsage,
 } from "@/components/features/admin";
 import { PageHeader } from "@/components/ui/layout/page-header";
-import { getServerClient } from "@/lib/api/server";
+import { getAdminUser } from "@/lib/api/queries";
 
 interface PageProps {
   params: Promise<{ id: string }>;
 }
 
 export default async function AdminUserDetailPage(props: PageProps): Promise<ReactElement> {
   const { id } = await props.params;
-  const client = await getServerClient();
-  const { data: user } = await client.api.admin.users({ id }).get();
+  const user = await getAdminUser(id);
 
   if (!user) notFound();
 

apps/web/src/app/(admin)/admin/users/page.tsx

@@ -1,9 +1,8 @@
 import type { ReactElement } from "react";
 import { AdminUserList } from "@/components/features/admin";
-import { getServerClient } from "@/lib/api/server";
+import { getAdminUsers } from "@/lib/api/queries";
 
 export default async function AdminUsersPage(): Promise<ReactElement> {
-  const client = await getServerClient();
-  const { data } = await client.api.admin.users.get({ query: { page: 1, limit: 20 } });
-  return <AdminUserList initialData={data} />;
+  const data = await getAdminUsers({ page: 1, limit: 20 });
+  return <AdminUserList data={data} />;
 }

apps/web/src/app/(auth)/layout.tsx

@@ -10,7 +10,7 @@ export default function AuthLayout(props: PropsWithChildren): ReactElement {
 
   return (
     <QueryProvider>
-      <AuthProvider initialUser={null}>
+      <AuthProvider user={null}>
         {siteKey && (
           <Script
             src={`https://www.google.com/recaptcha/enterprise.js?render=${siteKey}`}

apps/web/src/app/(dashboard)/analytics/page.tsx

@@ -9,7 +9,7 @@ import { PeriodSummary } from "@/components/features/analytics/period-summary";
 import { TemplateBreakdown } from "@/components/features/analytics/template-breakdown";
 import { TopProjects, type TopProject } from "@/components/features/analytics/top-projects";
 import { PageHeader } from "@/components/ui/layout/page-header";
-import { getServerClient } from "@/lib/api/server";
+import { getImages, getUsageDaily, getUsageHistory, getUsageStats } from "@/lib/api/queries";
 import type { ImageItem } from "@/types/api";
 import { formatPeriod } from "@/utils/formatters";
 
@@ -80,23 +80,18 @@ export default async function AnalyticsPage(props: AnalyticsPageProps): Promise<
   const range = parseRange(params.range);
   const useDaily = range === "30d";
 
-  const client = await getServerClient();
-
   const dateRange = rangeToDateRange(range);
 
-  const [usageRes, imagesRes, dailyRes, historyRes] = await Promise.all([
-    client.api.usage.stats.get({ query: {} }),
-    client.api.images.get({ query: { page: 1, limit: 100 } }),
-    useDaily ? client.api.usage.daily.get({ query: dateRange }) : Promise.resolve({ data: null }),
-    !useDaily
-      ? client.api.usage.history.get({ query: dateRange })
-      : Promise.resolve({ data: null }),
+  const [usage, imagesData, dailyData, historyData] = await Promise.all([
+    getUsageStats(),
+    getImages({ page: 1, limit: 100 }),
+    useDaily ? getUsageDaily(dateRange) : Promise.resolve(null),
+    !useDaily ? getUsageHistory(dateRange) : Promise.resolve(null),
   ]);
 
-  const usage = usageRes.data;
-  const images = imagesRes.data?.items ?? [];
-  const daily = dailyRes.data ?? [];
-  const history = historyRes.data ?? [];
+  const images = imagesData?.items ?? [];
+  const daily = dailyData ?? [];
+  const history = historyData ?? [];
 
   const points = useDaily
     ? daily.map((d) => {

apps/web/src/app/(dashboard)/api-keys/page.tsx

@@ -1,14 +1,12 @@
 import type { ReactElement } from "react";
 import { ApiKeyList } from "@/components/features/api-keys/api-key-list";
-import { getServerClient } from "@/lib/api/server";
+import { getApiKeys, getProjects } from "@/lib/api/queries";
 
 export default async function ApiKeysPage(): Promise<ReactElement> {
-  const client = await getServerClient();
-
-  const [projectsRes, keysRes] = await Promise.all([
-    client.api.projects.get({ query: { page: 1, limit: 100 } }),
-    client.api.keys.get({ query: {} }),
+  const [projectsData, keys] = await Promise.all([
+    getProjects({ page: 1, limit: 100 }),
+    getApiKeys(),
   ]);
 
-  return <ApiKeyList projects={projectsRes.data?.items ?? []} initialData={keysRes.data ?? null} />;
+  return <ApiKeyList projects={projectsData?.items ?? []} data={keys ?? null} />;
 }

apps/web/src/app/(dashboard)/audits/[id]/page.tsx

@@ -4,27 +4,22 @@ import { notFound } from "next/navigation";
 import { AuditReport } from "@/components/features/audit";
 import type { AuditViewer } from "@/components/features/audit/ai-recommendations";
 import { PageHeader } from "@/components/ui/layout/page-header";
-import { getServerClient } from "@/lib/api/server";
+import { getAudit, getCurrentUser } from "@/lib/api/queries";
 
 interface PageProps {
   params: Promise<{ id: string }>;
 }
 
 export default async function DashboardAuditReportPage(props: PageProps): Promise<ReactElement> {
   const { id } = await props.params;
-  const client = await getServerClient();
 
-  const [reportRes, userRes] = await Promise.all([
-    client.api.audits({ id }).get(),
-    client.api.users.me.get(),
-  ]);
+  const [report, user] = await Promise.all([getAudit(id), getCurrentUser()]);
 
-  if (reportRes.error || !reportRes.data) {
+  if (!report) {
     notFound();
   }
 
-  const report = reportRes.data;
-  const viewer: AuditViewer = userRes.data ? "authenticated" : "anonymous";
+  const viewer: AuditViewer = user ? "authenticated" : "anonymous";
 
   return (
     <>