scan food

integrate barcode scan with openfoodfacts and meal type selection
hydration calories persistance
2026-03-31 16:55:55 +02:00 · 2026-03-31 16:36:18 +02:00 · 2026-03-31 16:17:08 +02:00 · 2026-03-31 15:57:23 +02:00 · 2026-03-31 13:48:39 +02:00 · 2026-03-30 20:24:13 +02:00
49 changed files with 3121 additions and 1543 deletions
@@ -0,0 +1,156 @@
+import { NextResponse } from "next/server";
+import { auth } from "@clerk/nextjs/server";
+import { getUserMembershipContext } from "@/lib/membership/access";
+import log from "@/lib/logger";
+
+interface OpenFoodFactsProduct {
+  product_name?: string;
+  product_name_en?: string;
+  brands?: string;
+  image_url?: string;
+  image_front_url?: string;
+  serving_size?: string;
+  nutriments?: {
+    [key: string]: number | string | undefined;
+    "energy-kcal_serving"?: number;
+    "energy-kcal_100g"?: number;
+    proteins_serving?: number;
+    proteins_100g?: number;
+    carbohydrates_serving?: number;
+    carbohydrates_100g?: number;
+    fat_serving?: number;
+    fat_100g?: number;
+  };
+}
+
+interface OpenFoodFactsResponse {
+  status: number;
+  code: string;
+  product?: OpenFoodFactsProduct;
+}
+
+function normalizeBarcode(rawCode: string): string {
+  return rawCode.replace(/\D/g, "").trim();
+}
+
+function isSupportedBarcode(code: string): boolean {
+  return [8, 12, 13].includes(code.length);
+}
+
+function getNumber(value: unknown): number | undefined {
+  if (typeof value === "number" && Number.isFinite(value)) return value;
+  if (typeof value === "string") {
+    const parsed = Number(value);
+    if (Number.isFinite(parsed)) return parsed;
+  }
+  return undefined;
+}
+
+function buildProductPayload(code: string, product: OpenFoodFactsProduct) {
+  const caloriesPerServing =
+    getNumber(product.nutriments?.["energy-kcal_serving"]) ??
+    getNumber(product.nutriments?.["energy-kcal_100g"]) ??
+    0;
+
+  const protein =
+    getNumber(product.nutriments?.proteins_serving) ??
+    getNumber(product.nutriments?.proteins_100g);
+  const carbs =
+    getNumber(product.nutriments?.carbohydrates_serving) ??
+    getNumber(product.nutriments?.carbohydrates_100g);
+  const fat =
+    getNumber(product.nutriments?.fat_serving) ??
+    getNumber(product.nutriments?.fat_100g);
+
+  return {
+    barcode: code,
+    name: product.product_name || product.product_name_en || "Unknown Product",
+    brand: product.brands || null,
+    imageUrl: product.image_url || product.image_front_url || null,
+    servingSize: product.serving_size || "1 serving",
+    caloriesPerServing: Math.max(0, Math.round(caloriesPerServing)),
+    macros: {
+      protein: protein ?? null,
+      carbs: carbs ?? null,
+      fat: fat ?? null,
+    },
+    source: "openfoodfacts" as const,
+  };
+}
+
+export async function GET(
+  _request: Request,
+  { params }: { params: Promise<{ code: string }> },
+) {
+  try {
+    const { userId } = await auth();
+    if (!userId) {
+      return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+    }
+
+    const { features, membershipType } = await getUserMembershipContext(userId);
+    if (!features.nutritionTracking) {
+      return NextResponse.json(
+        {
+          error:
+            "Barcode food scan is available on Premium and VIP memberships",
+          membershipType,
+        },
+        { status: 403 },
+      );
+    }
+
+    const { code: rawCode } = await params;
+    const code = normalizeBarcode(rawCode);
+
+    if (!isSupportedBarcode(code)) {
+      return NextResponse.json(
+        { error: "Invalid barcode. Use EAN-8, UPC-A, or EAN-13 formats." },
+        { status: 400 },
+      );
+    }
+
+    const response = await fetch(
+      `https://world.openfoodfacts.org/api/v2/product/${code}.json`,
+      {
+        headers: {
+          "User-Agent": "FitAI/1.0 (fitai.app)",
+        },
+        cache: "no-store",
+      },
+    );
+
+    if (!response.ok) {
+      log.warn("OpenFoodFacts lookup failed", {
+        status: response.status,
+        barcode: code,
+      });
+      return NextResponse.json(
+        { error: "Food lookup service unavailable. Please try again." },
+        { status: 503 },
+      );
+    }
+
+    const payload = (await response.json()) as OpenFoodFactsResponse;
+    if (payload.status !== 1 || !payload.product) {
+      return NextResponse.json(
+        { error: "Product not found in OpenFoodFacts" },
+        { status: 404 },
+      );
+    }
+
+    return NextResponse.json({
+      success: true,
+      data: buildProductPayload(code, payload.product),
+      meta: {
+        timestamp: new Date().toISOString(),
+      },
+    });
+  } catch (error) {
+    log.error("Failed barcode food lookup", error);
+    return NextResponse.json(
+      { error: "Failed to lookup food barcode" },
+      { status: 500 },
+    );
+  }
+}
@@ -3,6 +3,7 @@ import { NextRequest, NextResponse } from "next/server";
 import { getDatabase } from "@/lib/database";
 import { ensureUserSynced } from "@/lib/sync-user";
 import log from "@/lib/logger";
+import { getUserMembershipContext } from "@/lib/membership/access";

 export async function POST(req: NextRequest) {
  try {
@@ -11,6 +12,18 @@ export async function POST(req: NextRequest) {

    const db = await getDatabase();
    await ensureUserSynced(userId, db);
+    const { features, membershipType } = await getUserMembershipContext(userId);
+
+    if (!features.hydrationTracking) {
+      return NextResponse.json(
+        {
+          error:
+            "Hydration tracking is available on Premium and VIP memberships",
+          membershipType,
+        },
+        { status: 403 },
+      );
+    }

    const body = await req.json();
    const { date, entries, totalWater, waterGoal } = body;
@@ -58,6 +71,18 @@ export async function GET(req: NextRequest) {

    const db = await getDatabase();
    await ensureUserSynced(userId, db);
+    const { features, membershipType } = await getUserMembershipContext(userId);
+
+    if (!features.hydrationTracking) {
+      return NextResponse.json(
+        {
+          error:
+            "Hydration tracking is available on Premium and VIP memberships",
+          membershipType,
+        },
+        { status: 403 },
+      );
+    }

    const url = new URL(req.url);
    const date = url.searchParams.get("date");
@@ -100,6 +125,18 @@ export async function DELETE(req: NextRequest) {

    const db = await getDatabase();
    await ensureUserSynced(userId, db);
+    const { features, membershipType } = await getUserMembershipContext(userId);
+
+    if (!features.hydrationTracking) {
+      return NextResponse.json(
+        {
+          error:
+            "Hydration tracking is available on Premium and VIP memberships",
+          membershipType,
+        },
+        { status: 403 },
+      );
+    }

    const url = new URL(req.url);
    const id = url.searchParams.get("id");
@@ -0,0 +1,32 @@
+import { NextResponse } from "next/server";
+import { auth } from "@clerk/nextjs/server";
+import { MEMBERSHIP_FEATURES } from "@/lib/membership/features";
+import { getUserMembershipContext } from "@/lib/membership/access";
+
+export async function GET() {
+  try {
+    const { userId } = await auth();
+    if (!userId) {
+      return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+    }
+
+    const { membershipType, features } = await getUserMembershipContext(userId);
+
+    return NextResponse.json({
+      success: true,
+      data: {
+        membershipType,
+        currentFeatures: features,
+        plans: MEMBERSHIP_FEATURES,
+      },
+      meta: {
+        timestamp: new Date().toISOString(),
+      },
+    });
+  } catch {
+    return NextResponse.json(
+      { error: "Failed to load membership features" },
+      { status: 500 },
+    );
+  }
+}
@@ -3,6 +3,7 @@ import { NextRequest, NextResponse } from "next/server";
 import { getDatabase } from "@/lib/database";
 import { ensureUserSynced } from "@/lib/sync-user";
 import log from "@/lib/logger";
+import { getUserMembershipContext } from "@/lib/membership/access";

 export async function POST(req: NextRequest) {
  try {
@@ -11,6 +12,18 @@ export async function POST(req: NextRequest) {

    const db = await getDatabase();
    await ensureUserSynced(userId, db);
+    const { features, membershipType } = await getUserMembershipContext(userId);
+
+    if (!features.nutritionTracking) {
+      return NextResponse.json(
+        {
+          error:
+            "Nutrition tracking is available on Premium and VIP memberships",
+          membershipType,
+        },
+        { status: 403 },
+      );
+    }

    const body = await req.json();
    const {
@@ -59,6 +72,18 @@ export async function GET(req: NextRequest) {

    const db = await getDatabase();
    await ensureUserSynced(userId, db);
+    const { features, membershipType } = await getUserMembershipContext(userId);
+
+    if (!features.nutritionTracking) {
+      return NextResponse.json(
+        {
+          error:
+            "Nutrition tracking is available on Premium and VIP memberships",
+          membershipType,
+        },
+        { status: 403 },
+      );
+    }

    const url = new URL(req.url);
    const date = url.searchParams.get("date");
@@ -88,6 +113,18 @@ export async function DELETE(req: NextRequest) {

    const db = await getDatabase();
    await ensureUserSynced(userId, db);
+    const { features, membershipType } = await getUserMembershipContext(userId);
+
+    if (!features.nutritionTracking) {
+      return NextResponse.json(
+        {
+          error:
+            "Nutrition tracking is available on Premium and VIP memberships",
+          membershipType,
+        },
+        { status: 403 },
+      );
+    }

    const url = new URL(req.url);
    const id = url.searchParams.get("id");
@@ -3,6 +3,7 @@ import { NextRequest, NextResponse } from "next/server";
 import { getDatabase } from "@/lib/database";
 import { ensureUserSynced } from "@/lib/sync-user";
 import log from "@/lib/logger";
+import { getUserMembershipContext } from "@/lib/membership/access";

 export async function POST(req: NextRequest) {
  try {
@@ -11,6 +12,18 @@ export async function POST(req: NextRequest) {

    const db = await getDatabase();
    await ensureUserSynced(userId, db);
+    const { features, membershipType } = await getUserMembershipContext(userId);
+
+    if (!features.nutritionTracking) {
+      return NextResponse.json(
+        {
+          error:
+            "Nutrition tracking is available on Premium and VIP memberships",
+          membershipType,
+        },
+        { status: 403 },
+      );
+    }

    const body = await req.json();
    const { date, meals, totalCalories, calorieGoal } = body;
@@ -58,6 +71,18 @@ export async function GET(req: NextRequest) {

    const db = await getDatabase();
    await ensureUserSynced(userId, db);
+    const { features, membershipType } = await getUserMembershipContext(userId);
+
+    if (!features.nutritionTracking) {
+      return NextResponse.json(
+        {
+          error:
+            "Nutrition tracking is available on Premium and VIP memberships",
+          membershipType,
+        },
+        { status: 403 },
+      );
+    }

    const url = new URL(req.url);
    const date = url.searchParams.get("date");
@@ -100,6 +125,18 @@ export async function DELETE(req: NextRequest) {

    const db = await getDatabase();
    await ensureUserSynced(userId, db);
+    const { features, membershipType } = await getUserMembershipContext(userId);
+
+    if (!features.nutritionTracking) {
+      return NextResponse.json(
+        {
+          error:
+            "Nutrition tracking is available on Premium and VIP memberships",
+          membershipType,
+        },
+        { status: 403 },
+      );
+    }

    const url = new URL(req.url);
    const id = url.searchParams.get("id");
@@ -5,6 +5,7 @@ import { buildAIContext } from "@/lib/ai/ai-context";
 import { buildEnhancedPrompt, buildBasicPrompt } from "@/lib/ai/prompt-builder";
 import log from "@/lib/logger";
 import { ensureUserSynced } from "@/lib/sync-user";
+import { getUserMembershipContext } from "@/lib/membership/access";

 export async function POST(req: Request) {
  try {
@@ -49,6 +50,41 @@ export async function POST(req: Request) {
      return NextResponse.json({ error: "User not found" }, { status: 404 });
    }

+    const { membershipType, features } = await getUserMembershipContext(userId);
+
+    if (features.recommendationsPerMonth === 1) {
+      const currentMonth = new Date();
+      const monthStart = new Date(
+        currentMonth.getFullYear(),
+        currentMonth.getMonth(),
+        1,
+      );
+      const monthEnd = new Date(
+        currentMonth.getFullYear(),
+        currentMonth.getMonth() + 1,
+        1,
+      );
+
+      const existingRecommendations =
+        await db.getRecommendationsByUserId(userId);
+      const recommendationsThisMonth = existingRecommendations.filter(
+        (recommendation) =>
+          recommendation.generatedAt >= monthStart &&
+          recommendation.generatedAt < monthEnd,
+      ).length;
+
+      if (recommendationsThisMonth >= 1) {
+        return NextResponse.json(
+          {
+            error:
+              "Basic membership includes 1 recommendation per month. Upgrade to Premium or VIP for unlimited recommendations.",
+            membershipType,
+          },
+          { status: 403 },
+        );
+      }
+    }
+
    if (currentUser.role !== "superAdmin") {
      if (!currentUser.gymId || targetUser.gymId !== currentUser.gymId) {
        return NextResponse.json(
@@ -17,6 +17,7 @@ import {
 import { Button } from "@/components/ui/button";
 import { useUser } from "@clerk/nextjs";
 import log from "@/lib/logger";
+import { MEMBERSHIP_FEATURES } from "@/lib/membership/features";

 interface Backup {
  name: string;
@@ -558,6 +559,109 @@ export default function SettingsPage() {
                    </div>
                  </div>
                )}
+
+                {/* Membership Feature Access */}
+                <div className="mt-6">
+                  <h5 className="text-sm font-medium text-slate-700 mb-2">
+                    Membership Feature Access
+                  </h5>
+                  <div className="overflow-x-auto border rounded-lg">
+                    <table className="w-full text-left text-sm">
+                      <thead className="bg-slate-50 border-b">
+                        <tr>
+                          <th className="px-4 py-3 font-semibold text-slate-900">
+                            Feature
+                          </th>
+                          <th className="px-4 py-3 font-semibold text-slate-900">
+                            Basic
+                          </th>
+                          <th className="px-4 py-3 font-semibold text-slate-900">
+                            Premium
+                          </th>
+                          <th className="px-4 py-3 font-semibold text-slate-900">
+                            VIP
+                          </th>
+                        </tr>
+                      </thead>
+                      <tbody className="divide-y">
+                        <tr>
+                          <td className="px-4 py-3 text-slate-700">
+                            Recommendations per month
+                          </td>
+                          <td className="px-4 py-3 text-slate-700">
+                            {MEMBERSHIP_FEATURES.basic.recommendationsPerMonth}
+                          </td>
+                          <td className="px-4 py-3 text-slate-700">
+                            Unlimited
+                          </td>
+                          <td className="px-4 py-3 text-slate-700">
+                            Unlimited
+                          </td>
+                        </tr>
+                        <tr>
+                          <td className="px-4 py-3 text-slate-700">
+                            Nutrition tracking
+                          </td>
+                          <td className="px-4 py-3 text-slate-700">
+                            {MEMBERSHIP_FEATURES.basic.nutritionTracking
+                              ? "Yes"
+                              : "No"}
+                          </td>
+                          <td className="px-4 py-3 text-slate-700">
+                            {MEMBERSHIP_FEATURES.premium.nutritionTracking
+                              ? "Yes"
+                              : "No"}
+                          </td>
+                          <td className="px-4 py-3 text-slate-700">
+                            {MEMBERSHIP_FEATURES.vip.nutritionTracking
+                              ? "Yes"
+                              : "No"}
+                          </td>
+                        </tr>
+                        <tr>
+                          <td className="px-4 py-3 text-slate-700">
+                            Hydration tracking
+                          </td>
+                          <td className="px-4 py-3 text-slate-700">
+                            {MEMBERSHIP_FEATURES.basic.hydrationTracking
+                              ? "Yes"
+                              : "No"}
+                          </td>
+                          <td className="px-4 py-3 text-slate-700">
+                            {MEMBERSHIP_FEATURES.premium.hydrationTracking
+                              ? "Yes"
+                              : "No"}
+                          </td>
+                          <td className="px-4 py-3 text-slate-700">
+                            {MEMBERSHIP_FEATURES.vip.hydrationTracking
+                              ? "Yes"
+                              : "No"}
+                          </td>
+                        </tr>
+                        <tr>
+                          <td className="px-4 py-3 text-slate-700">
+                            Advanced statistics
+                          </td>
+                          <td className="px-4 py-3 text-slate-700">
+                            {MEMBERSHIP_FEATURES.basic.advancedStatistics
+                              ? "Yes"
+                              : "No"}
+                          </td>
+                          <td className="px-4 py-3 text-slate-700">
+                            {MEMBERSHIP_FEATURES.premium.advancedStatistics
+                              ? "Yes"
+                              : "No"}
+                          </td>
+                          <td className="px-4 py-3 text-slate-700">
+                            {MEMBERSHIP_FEATURES.vip.advancedStatistics
+                              ? "Yes"
+                              : "No"}
+                          </td>
+                        </tr>
+                      </tbody>
+                    </table>
+                  </div>
+                </div>
              </div>
            ) : (
              <div className="flex items-center justify-center h-64 bg-slate-50 rounded-lg">
@@ -0,0 +1,26 @@
+import { getDatabase } from "@/lib/database";
+import { getMembershipFeatures } from "./features";
+
+export async function getUserMembershipContext(userId: string): Promise<{
+  membershipType: "basic" | "premium" | "vip";
+  features: ReturnType<typeof getMembershipFeatures>;
+}> {
+  const db = await getDatabase();
+  const user = await db.getUserById(userId);
+
+  if (!user || user.role !== "client") {
+    const membershipType = "vip" as const;
+    return {
+      membershipType,
+      features: getMembershipFeatures(membershipType),
+    };
+  }
+
+  const client = await db.getClientByUserId(userId);
+  const membershipType = client?.membershipType ?? "basic";
+
+  return {
+    membershipType,
+    features: getMembershipFeatures(membershipType),
+  };
+}
@@ -0,0 +1,35 @@
+import type { MembershipType } from "@/lib/validation/schemas";
+
+export interface MembershipFeatures {
+  recommendationsPerMonth: number;
+  hydrationTracking: boolean;
+  nutritionTracking: boolean;
+  advancedStatistics: boolean;
+}
+
+export const MEMBERSHIP_FEATURES: Record<MembershipType, MembershipFeatures> = {
+  basic: {
+    recommendationsPerMonth: 1,
+    hydrationTracking: false,
+    nutritionTracking: false,
+    advancedStatistics: false,
+  },
+  premium: {
+    recommendationsPerMonth: -1,
+    hydrationTracking: true,
+    nutritionTracking: true,
+    advancedStatistics: true,
+  },
+  vip: {
+    recommendationsPerMonth: -1,
+    hydrationTracking: true,
+    nutritionTracking: true,
+    advancedStatistics: true,
+  },
+};
+
+export function getMembershipFeatures(
+  membershipType: MembershipType,
+): MembershipFeatures {
+  return MEMBERSHIP_FEATURES[membershipType];
+}
@@ -34,7 +34,6 @@ export default clerkMiddleware(async (auth, req) => {
  // For API routes, let the route handler check auth
  // This allows API routes to handle both web sessions and mobile Bearer tokens
  if (isApiRoute(req)) {
-    log.debug("API route, auth will be checked in handler");
    return;
  }

@@ -1,11 +1,19 @@
-import 'react-native-gesture-handler/jestSetup'
+try {
+  require("react-native-gesture-handler/jestSetup");
+} catch {
+  // Package may be absent in minimal test environments
+}

-jest.mock('react-native-reanimated', () => {
-  const Reanimated = require('react-native-reanimated/mock')
-  Reanimated.default.call = () => {}
-  return Reanimated
-})
+jest.mock(
+  "react-native-reanimated",
+  () => {
+    const Reanimated = require("react-native-reanimated/mock");
+    Reanimated.default.call = () => {};
+    return Reanimated;
+  },
+  { virtual: true },
+);

-jest.mock('@expo/vector-icons', () => ({
-  Ionicons: 'Ionicons',
-}))
+jest.mock("@expo/vector-icons", () => ({
+  Ionicons: "Ionicons",
+}));
@@ -0,0 +1,55 @@
+import { beforeEach, describe, expect, it, jest } from "@jest/globals";
+import { gymsApi } from "../gyms";
+import { apiClient, withAuth } from "../client";
+
+jest.mock("../client", () => ({
+  apiClient: {
+    get: jest.fn(),
+    patch: jest.fn(),
+  },
+  withAuth: jest.fn((token?: string | null) =>
+    token ? { headers: { Authorization: `Bearer ${token}` } } : {},
+  ),
+}));
+
+describe("gymsApi", () => {
+  const getMock = apiClient.get as any;
+  const patchMock = apiClient.patch as any;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("returns array payload from getGyms", async () => {
+    getMock.mockResolvedValue({
+      data: [{ id: "gym_1", name: "Gym One" }],
+    });
+
+    const result = await gymsApi.getGyms("token_1");
+
+    expect(result).toEqual([{ id: "gym_1", name: "Gym One" }]);
+    expect(withAuth).toHaveBeenCalledWith("token_1");
+  });
+
+  it("returns nested data payload from getGyms", async () => {
+    getMock.mockResolvedValue({
+      data: { data: [{ id: "gym_2", name: "Gym Two" }] },
+    });
+
+    const result = await gymsApi.getGyms(null);
+
+    expect(result).toEqual([{ id: "gym_2", name: "Gym Two" }]);
+  });
+
+  it("patches selected gym for current user", async () => {
+    patchMock.mockResolvedValue({});
+
+    await gymsApi.updateUserGym("gym_2", "token_2");
+
+    expect(apiClient.patch).toHaveBeenCalledWith(
+      "/api/users/gym",
+      { gymId: "gym_2" },
+      expect.any(Object),
+    );
+  });
+});
@@ -0,0 +1,120 @@
+import { beforeEach, describe, expect, it, jest } from "@jest/globals";
+import {
+  deleteNotification,
+  fetchNotifications,
+  fetchUnreadCount,
+  markAllAsRead,
+  markAsRead,
+  savePushToken,
+} from "../notifications";
+import { apiClient, withAuth } from "../client";
+
+jest.mock("../client", () => ({
+  apiClient: {
+    get: jest.fn(),
+    put: jest.fn(),
+    post: jest.fn(),
+    delete: jest.fn(),
+  },
+  withAuth: jest.fn((token?: string | null) =>
+    token ? { headers: { Authorization: `Bearer ${token}` } } : {},
+  ),
+}));
+
+describe("notifications api", () => {
+  const getMock = apiClient.get as any;
+  const putMock = apiClient.put as any;
+  const postMock = apiClient.post as any;
+  const deleteMock = apiClient.delete as any;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("returns notifications and normalizes createdAt", async () => {
+    getMock.mockResolvedValue({
+      data: {
+        success: true,
+        data: [
+          {
+            id: "n_1",
+            userId: "u_1",
+            title: "Hi",
+            message: "Welcome",
+            type: "system",
+            read: false,
+            createdAt: "2026-03-29T10:00:00.000Z",
+          },
+        ],
+      },
+    });
+
+    const result = await fetchNotifications("token_1");
+
+    expect(result).toHaveLength(1);
+    expect(result[0].createdAt).toBeInstanceOf(Date);
+    expect(withAuth).toHaveBeenCalledWith("token_1");
+  });
+
+  it("returns unread count from response wrapper", async () => {
+    getMock.mockResolvedValue({
+      data: {
+        success: true,
+        data: { count: 3 },
+      },
+    });
+
+    const count = await fetchUnreadCount(null);
+    expect(count).toBe(3);
+  });
+
+  it("marks notification as read", async () => {
+    putMock.mockResolvedValue({
+      data: {
+        success: true,
+        data: {
+          id: "n_1",
+          userId: "u_1",
+          title: "Hi",
+          message: "Welcome",
+          type: "system",
+          read: true,
+          createdAt: "2026-03-29T10:00:00.000Z",
+        },
+      },
+    });
+
+    const result = await markAsRead("n_1", "token_1");
+
+    expect(result.read).toBe(true);
+    expect(putMock).toHaveBeenCalledWith(
+      "/api/notifications/n_1",
+      {},
+      expect.any(Object),
+    );
+  });
+
+  it("calls mark-all, delete and save-token endpoints", async () => {
+    postMock.mockResolvedValue({});
+    deleteMock.mockResolvedValue({});
+
+    await markAllAsRead("token_1");
+    await deleteNotification("n_2", "token_1");
+    await savePushToken("expo-token", "android", "token_1");
+
+    expect(postMock).toHaveBeenCalledWith(
+      "/api/notifications/mark-all-read",
+      {},
+      expect.any(Object),
+    );
+    expect(deleteMock).toHaveBeenCalledWith(
+      "/api/notifications/n_2",
+      expect.any(Object),
+    );
+    expect(postMock).toHaveBeenCalledWith(
+      "/api/notifications/save-token",
+      { expoPushToken: "expo-token", deviceType: "android" },
+      expect.any(Object),
+    );
+  });
+});
@@ -0,0 +1,71 @@
+import { beforeEach, describe, expect, it, jest } from "@jest/globals";
+import {
+  approveRecommendation,
+  generateRecommendation,
+  getRecommendations,
+} from "../recommendations";
+import { apiClient, withAuth } from "../client";
+
+jest.mock("../client", () => ({
+  apiClient: {
+    get: jest.fn(),
+    post: jest.fn(),
+  },
+  withAuth: jest.fn((token?: string | null) =>
+    token ? { headers: { Authorization: `Bearer ${token}` } } : {},
+  ),
+}));
+
+describe("recommendations api", () => {
+  const getMock = apiClient.get as any;
+  const postMock = apiClient.post as any;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("returns normalized list from standardized response", async () => {
+    getMock.mockResolvedValue({
+      data: {
+        success: true,
+        data: [{ id: "rec_1", status: "pending" }],
+      },
+    });
+
+    const result = await getRecommendations("user_1", "token_1");
+
+    expect(result).toEqual([{ id: "rec_1", status: "pending" }]);
+    expect(withAuth).toHaveBeenCalledWith("token_1");
+  });
+
+  it("returns recommendation from standardized response for generate", async () => {
+    postMock.mockResolvedValue({
+      data: {
+        success: true,
+        data: { id: "rec_2", status: "pending" },
+      },
+    });
+
+    const result = await generateRecommendation({ userId: "user_1" }, null);
+
+    expect(result).toEqual({ id: "rec_2", status: "pending" });
+  });
+
+  it("sends approval payload without approvedBy", async () => {
+    postMock.mockResolvedValue({
+      data: {
+        success: true,
+        data: { id: "rec_3", status: "approved" },
+      },
+    });
+
+    const result = await approveRecommendation("rec_3", "token_3");
+
+    expect(result).toEqual({ id: "rec_3", status: "approved" });
+    expect(apiClient.post).toHaveBeenCalledWith(
+      "/api/recommendations/approve",
+      { recommendationId: "rec_3", status: "approved" },
+      expect.any(Object),
+    );
+  });
+});
@@ -1,18 +1,52 @@
-import axios from 'axios';
-import { API_BASE_URL } from '../config/api';
+import axios, { type AxiosRequestConfig } from "axios";
+import { API_BASE_URL } from "../config/api";
+import log from "../utils/logger";

 export const apiClient = axios.create({
-    baseURL: API_BASE_URL,
-    headers: {
-        'Content-Type': 'application/json',
-    },
+  baseURL: API_BASE_URL,
+  timeout: 15000,
+  headers: {
+    "Content-Type": "application/json",
+  },
 });

+apiClient.interceptors.response.use(
+  (response) => response,
+  (error) => {
+    if (axios.isAxiosError(error)) {
+      const status = error.response?.status;
+      if (status === 401) {
+        log.warn("API unauthorized response", { url: error.config?.url });
+      } else if (status === 403) {
+        log.warn("API forbidden response", { url: error.config?.url });
+      } else if (status && status >= 500) {
+        log.error("API server error", error, {
+          status,
+          url: error.config?.url,
+        });
+      }
+    }
+    return Promise.reject(error);
+  },
+);
+
+export function withAuth(token?: string | null): AxiosRequestConfig {
+  if (!token) {
+    return {};
+  }
+
+  return {
+    headers: {
+      Authorization: `Bearer ${token}`,
+    },
+  };
+}
+
 // Helper to set the auth token for a request
 export const setAuthToken = (token: string) => {
-    if (token) {
-        apiClient.defaults.headers.common['Authorization'] = `Bearer ${token}`;
-    } else {
-        delete apiClient.defaults.headers.common['Authorization'];
-    }
+  if (token) {
+    apiClient.defaults.headers.common.Authorization = `Bearer ${token}`;
+  } else {
+    delete apiClient.defaults.headers.common.Authorization;
+  }
 };
@@ -0,0 +1,35 @@
+import { apiClient, withAuth } from "./client";
+import { API_ENDPOINTS } from "../config/api";
+
+export interface ScannedFoodProduct {
+  barcode: string;
+  name: string;
+  brand: string | null;
+  imageUrl: string | null;
+  servingSize: string;
+  caloriesPerServing: number;
+  macros: {
+    protein: number | null;
+    carbs: number | null;
+    fat: number | null;
+  };
+  source: "openfoodfacts";
+}
+
+interface FoodLookupResponse {
+  success: boolean;
+  data: ScannedFoodProduct;
+}
+
+export async function lookupFoodByBarcode(
+  barcode: string,
+  token: string | null,
+): Promise<ScannedFoodProduct> {
+  const normalized = barcode.replace(/\D/g, "");
+  const response = await apiClient.get<FoodLookupResponse>(
+    API_ENDPOINTS.FOOD.LOOKUP_BARCODE(normalized),
+    withAuth(token),
+  );
+
+  return response.data.data;
+}
@@ -0,0 +1,56 @@
+import { isAxiosError } from "axios";
+import { API_ENDPOINTS } from "../config/api";
+import { apiClient, withAuth } from "./client";
+
+export interface Gym {
+  id: string;
+  name: string;
+  location?: string;
+}
+
+export const gymsApi = {
+  getGyms: async (token: string | null): Promise<Gym[]> => {
+    try {
+      const response = await apiClient.get<Gym[] | { data?: Gym[] }>(
+        API_ENDPOINTS.GYMS,
+        withAuth(token),
+      );
+
+      const payload = response.data;
+      if (Array.isArray(payload)) {
+        return payload;
+      }
+
+      if (payload && Array.isArray(payload.data)) {
+        return payload.data;
+      }
+
+      return [];
+    } catch (error) {
+      if (isAxiosError(error) && error.response) {
+        throw new Error(`Failed to fetch gyms: ${error.response.status}`);
+      }
+      throw new Error("Failed to fetch gyms");
+    }
+  },
+
+  updateUserGym: async (
+    gymId: string | null,
+    token: string | null,
+  ): Promise<void> => {
+    try {
+      await apiClient.patch(
+        API_ENDPOINTS.USERS.GYM,
+        { gymId },
+        withAuth(token),
+      );
+    } catch (error) {
+      if (isAxiosError(error) && error.response) {
+        throw new Error(
+          `Failed to update gym selection: ${error.response.status}`,
+        );
+      }
+      throw new Error("Failed to update gym selection");
+    }
+  },
+};
@@ -0,0 +1,14 @@
+import { ApiError, handleResponse } from "./responses";
+import { type ApiResponse } from "./types";
+
+export function parseApiData<T>(payload: unknown): T {
+  if (Array.isArray(payload)) {
+    return payload as T;
+  }
+
+  if (payload && typeof payload === "object" && "success" in payload) {
+    return handleResponse(payload as ApiResponse<T>);
+  }
+
+  throw new ApiError("Invalid response format");
+}
@@ -13,3 +13,7 @@ export * from "./recommendations";
 export * from "./nutrition";
 export * from "./hydration";
 export * from "./client";
+export * from "./helpers";
+export * from "./membership";
+export * from "./food";
+export * from "./gyms";
@@ -0,0 +1,128 @@
+import { apiClient, withAuth } from "./client";
+import { API_ENDPOINTS } from "../config/api";
+
+export type MembershipType = "basic" | "premium" | "vip";
+
+export interface MembershipFeatures {
+  recommendationsPerMonth: number;
+  hydrationTracking: boolean;
+  nutritionTracking: boolean;
+  advancedStatistics: boolean;
+}
+
+const MEMBERSHIP_FEATURES: Record<MembershipType, MembershipFeatures> = {
+  basic: {
+    recommendationsPerMonth: 1,
+    hydrationTracking: false,
+    nutritionTracking: false,
+    advancedStatistics: false,
+  },
+  premium: {
+    recommendationsPerMonth: -1,
+    hydrationTracking: true,
+    nutritionTracking: true,
+    advancedStatistics: true,
+  },
+  vip: {
+    recommendationsPerMonth: -1,
+    hydrationTracking: true,
+    nutritionTracking: true,
+    advancedStatistics: true,
+  },
+};
+
+interface UsersListResponse {
+  success?: boolean;
+  data?: {
+    users?: Array<{
+      id: string;
+      role: string;
+      client?: {
+        membershipType?: MembershipType;
+      } | null;
+    }>;
+  };
+  users?: Array<{
+    id: string;
+    role: string;
+    client?: {
+      membershipType?: MembershipType;
+    } | null;
+  }>;
+}
+
+interface MembershipFeaturesResponse {
+  success: boolean;
+  data: {
+    membershipType: MembershipType;
+    currentFeatures: MembershipFeatures;
+    plans: Record<MembershipType, MembershipFeatures>;
+  };
+}
+
+function isMembershipType(value: unknown): value is MembershipType {
+  return value === "basic" || value === "premium" || value === "vip";
+}
+
+export async function getCurrentMembershipType(
+  userId: string,
+  token: string | null,
+): Promise<MembershipType> {
+  if (!token || !userId) {
+    return "basic";
+  }
+
+  const response = await apiClient.get<UsersListResponse>(
+    API_ENDPOINTS.USERS.LIST,
+    withAuth(token),
+  );
+
+  const payload = response.data;
+  const users = payload.data?.users ?? payload.users ?? [];
+  const currentUser = users.find((user) => user.id === userId);
+
+  if (!currentUser || currentUser.role !== "client") {
+    return "vip";
+  }
+
+  const membershipType = currentUser.client?.membershipType;
+  return isMembershipType(membershipType) ? membershipType : "basic";
+}
+
+export function getMembershipFeatures(
+  membershipType: MembershipType,
+): MembershipFeatures {
+  return MEMBERSHIP_FEATURES[membershipType];
+}
+
+export async function getCurrentMembershipFeaturesFromServer(
+  token: string | null,
+): Promise<{
+  membershipType: MembershipType;
+  features: MembershipFeatures;
+}> {
+  if (!token) {
+    return {
+      membershipType: "basic",
+      features: MEMBERSHIP_FEATURES.basic,
+    };
+  }
+
+  const response = await apiClient.get<MembershipFeaturesResponse>(
+    API_ENDPOINTS.MEMBERSHIP.FEATURES,
+    withAuth(token),
+  );
+
+  const data = response.data?.data;
+  if (!data) {
+    return {
+      membershipType: "basic",
+      features: MEMBERSHIP_FEATURES.basic,
+    };
+  }
+
+  return {
+    membershipType: data.membershipType,
+    features: data.currentFeatures,
+  };
+}
@@ -1,4 +1,6 @@
-import { API_BASE_URL } from "../config/api";
+import { isAxiosError } from "axios";
+import { apiClient, withAuth } from "./client";
+import { parseApiData } from "./helpers";

 export interface Notification {
  id: string;
@@ -10,81 +12,46 @@ export interface Notification {
  createdAt: Date;
 }

-interface ApiResponse<T> {
-  success: boolean;
-  data: T;
-  meta?: {
-    timestamp: string;
-    count?: number;
-  };
-}
-
 /**
 * Fetch all notifications for the authenticated user
 */
 export async function fetchNotifications(
  token: string | null,
 ): Promise<Notification[]> {
-  const headers: Record<string, string> = {
-    "Content-Type": "application/json",
-  };
-
-  if (token) {
-    headers["Authorization"] = `Bearer ${token}`;
-  }
-
-  const response = await fetch(`${API_BASE_URL}/api/notifications`, {
-    method: "GET",
-    headers,
-  });
-
-  if (!response.ok) {
-    const errorText = await response.text();
-    throw new Error(
-      `Failed to fetch notifications: ${response.status} - ${errorText}`,
-    );
-  }
-
-  const result: ApiResponse<Notification[]> = await response.json();
-
-  if (result.success && result.data) {
-    // Convert date strings to Date objects
-    return result.data.map((notification) => ({
+  try {
+    const response = await apiClient.get("/api/notifications", withAuth(token));
+    const notifications = parseApiData<Notification[]>(response.data);
+    return notifications.map((notification) => ({
      ...notification,
      createdAt: new Date(notification.createdAt),
    }));
+  } catch (error) {
+    if (isAxiosError(error) && error.response) {
+      throw new Error(
+        `Failed to fetch notifications: ${error.response.status}`,
+      );
+    }
+    throw new Error("Failed to fetch notifications");
  }
-
-  return [];
 }

 /**
 * Get unread notification count
 */
 export async function fetchUnreadCount(token: string | null): Promise<number> {
-  const headers: Record<string, string> = {
-    "Content-Type": "application/json",
-  };
-
-  if (token) {
-    headers["Authorization"] = `Bearer ${token}`;
+  try {
+    const response = await apiClient.get(
+      "/api/notifications/unread-count",
+      withAuth(token),
+    );
+    const data = parseApiData<{ count: number }>(response.data);
+    return data.count;
+  } catch (error) {
+    if (isAxiosError(error) && error.response) {
+      throw new Error(`Failed to fetch unread count: ${error.response.status}`);
+    }
+    throw new Error("Failed to fetch unread count");
  }
-
-  const response = await fetch(
-    `${API_BASE_URL}/api/notifications/unread-count`,
-    {
-      method: "GET",
-      headers,
-    },
-  );
-
-  if (!response.ok) {
-    throw new Error(`Failed to fetch unread count: ${response.status}`);
-  }
-
-  const result: ApiResponse<{ count: number }> = await response.json();
-
-  return result.success && result.data ? result.data.count : 0;
 }

 /**
@@ -94,62 +61,44 @@ export async function markAsRead(
  notificationId: string,
  token: string | null,
 ): Promise<Notification> {
-  const headers: Record<string, string> = {
-    "Content-Type": "application/json",
-  };
-
-  if (token) {
-    headers["Authorization"] = `Bearer ${token}`;
-  }
-
-  const response = await fetch(
-    `${API_BASE_URL}/api/notifications/${notificationId}`,
-    {
-      method: "PUT",
-      headers,
-    },
-  );
-
-  if (!response.ok) {
-    throw new Error(`Failed to mark notification as read: ${response.status}`);
-  }
-
-  const result: ApiResponse<Notification> = await response.json();
-
-  if (result.success && result.data) {
+  try {
+    const response = await apiClient.put(
+      `/api/notifications/${notificationId}`,
+      {},
+      withAuth(token),
+    );
+    const notification = parseApiData<Notification>(response.data);
    return {
-      ...result.data,
-      createdAt: new Date(result.data.createdAt),
+      ...notification,
+      createdAt: new Date(notification.createdAt),
    };
+  } catch (error) {
+    if (isAxiosError(error) && error.response) {
+      throw new Error(
+        `Failed to mark notification as read: ${error.response.status}`,
+      );
+    }
+    throw new Error("Failed to mark notification as read");
  }
-
-  throw new Error("Invalid response format");
 }

 /**
 * Mark all notifications as read
 */
 export async function markAllAsRead(token: string | null): Promise<void> {
-  const headers: Record<string, string> = {
-    "Content-Type": "application/json",
-  };
-
-  if (token) {
-    headers["Authorization"] = `Bearer ${token}`;
-  }
-
-  const response = await fetch(
-    `${API_BASE_URL}/api/notifications/mark-all-read`,
-    {
-      method: "POST",
-      headers,
-    },
-  );
-
-  if (!response.ok) {
-    throw new Error(
-      `Failed to mark all notifications as read: ${response.status}`,
+  try {
+    await apiClient.post(
+      "/api/notifications/mark-all-read",
+      {},
+      withAuth(token),
    );
+  } catch (error) {
+    if (isAxiosError(error) && error.response) {
+      throw new Error(
+        `Failed to mark all notifications as read: ${error.response.status}`,
+      );
+    }
+    throw new Error("Failed to mark all notifications as read");
  }
 }

@@ -160,24 +109,18 @@ export async function deleteNotification(
  notificationId: string,
  token: string | null,
 ): Promise<void> {
-  const headers: Record<string, string> = {
-    "Content-Type": "application/json",
-  };
-
-  if (token) {
-    headers["Authorization"] = `Bearer ${token}`;
-  }
-
-  const response = await fetch(
-    `${API_BASE_URL}/api/notifications/${notificationId}`,
-    {
-      method: "DELETE",
-      headers,
-    },
-  );
-
-  if (!response.ok) {
-    throw new Error(`Failed to delete notification: ${response.status}`);
+  try {
+    await apiClient.delete(
+      `/api/notifications/${notificationId}`,
+      withAuth(token),
+    );
+  } catch (error) {
+    if (isAxiosError(error) && error.response) {
+      throw new Error(
+        `Failed to delete notification: ${error.response.status}`,
+      );
+    }
+    throw new Error("Failed to delete notification");
  }
 }

@@ -189,21 +132,16 @@ export async function savePushToken(
  deviceType: "ios" | "android",
  token: string | null,
 ): Promise<void> {
-  const headers: Record<string, string> = {
-    "Content-Type": "application/json",
-  };
-
-  if (token) {
-    headers["Authorization"] = `Bearer ${token}`;
-  }
-
-  const response = await fetch(`${API_BASE_URL}/api/notifications/save-token`, {
-    method: "POST",
-    headers,
-    body: JSON.stringify({ expoPushToken, deviceType }),
-  });
-
-  if (!response.ok) {
-    throw new Error(`Failed to save push token: ${response.status}`);
+  try {
+    await apiClient.post(
+      "/api/notifications/save-token",
+      { expoPushToken, deviceType },
+      withAuth(token),
+    );
+  } catch (error) {
+    if (isAxiosError(error) && error.response) {
+      throw new Error(`Failed to save push token: ${error.response.status}`);
+    }
+    throw new Error("Failed to save push token");
  }
 }
@@ -1,4 +1,7 @@
-import { API_BASE_URL, API_ENDPOINTS } from "../config/api";
+import { isAxiosError } from "axios";
+import { apiClient, withAuth } from "./client";
+import { API_ENDPOINTS } from "../config/api";
+import { parseApiData } from "./helpers";

 export interface Recommendation {
  id: string;
@@ -32,33 +35,20 @@ export async function getRecommendations(
  userId: string,
  token: string | null,
 ): Promise<Recommendation[]> {
-  const headers: any = {
-    "Content-Type": "application/json",
-  };
-
-  if (token) {
-    headers["Authorization"] = `Bearer ${token}`;
+  try {
+    const response = await apiClient.get(API_ENDPOINTS.RECOMMENDATIONS, {
+      params: { userId },
+      ...withAuth(token),
+    });
+    return parseApiData<Recommendation[]>(response.data);
+  } catch (error) {
+    if (isAxiosError(error) && error.response) {
+      throw new Error(
+        `Failed to fetch recommendations: ${error.response.status}`,
+      );
+    }
+    throw error;
  }
-
-  const response = await fetch(
-    `${API_BASE_URL}${API_ENDPOINTS.RECOMMENDATIONS}?userId=${userId}`,
-    { headers },
-  );
-
-  if (!response.ok) {
-    throw new Error(`Failed to fetch recommendations: ${response.status}`);
-  }
-
-  const result = await response.json();
-
-  // Handle standardized API response format
-  // API returns: { success: true, data: [...], meta: {...} }
-  if (result.success && result.data) {
-    return Array.isArray(result.data) ? result.data : [];
-  }
-
-  // Fallback for legacy format (direct array)
-  return Array.isArray(result) ? result : [];
 }

 /**
@@ -72,36 +62,21 @@ export async function generateRecommendation(
  data: GenerateRecommendationRequest,
  token: string | null,
 ): Promise<Recommendation> {
-  const headers: any = {
-    "Content-Type": "application/json",
-  };
-
-  if (token) {
-    headers["Authorization"] = `Bearer ${token}`;
+  try {
+    const response = await apiClient.post(
+      `${API_ENDPOINTS.RECOMMENDATIONS}/generate`,
+      data,
+      withAuth(token),
+    );
+    return parseApiData<Recommendation>(response.data);
+  } catch (error) {
+    if (isAxiosError(error) && error.response) {
+      throw new Error(
+        `Failed to generate recommendation: ${error.response.status}`,
+      );
+    }
+    throw error;
  }
-
-  const response = await fetch(
-    `${API_BASE_URL}${API_ENDPOINTS.RECOMMENDATIONS}/generate`,
-    {
-      method: "POST",
-      headers,
-      body: JSON.stringify(data),
-    },
-  );
-
-  if (!response.ok) {
-    throw new Error(`Failed to generate recommendation: ${response.status}`);
-  }
-
-  const result = await response.json();
-
-  // Handle standardized API response format
-  if (result.success && result.data) {
-    return result.data;
-  }
-
-  // Fallback for legacy format
-  return result;
 }

 /**
@@ -109,46 +84,28 @@ export async function generateRecommendation(
 *
 * @param recommendationId - Recommendation ID
 * @param token - Auth token
- * @param approvedBy - User ID of the approver (optional)
 * @returns The approved recommendation
 */
 export async function approveRecommendation(
  recommendationId: string,
  token: string | null,
-  approvedBy?: string,
 ): Promise<Recommendation> {
-  const headers: any = {
-    "Content-Type": "application/json",
-  };
-
-  if (token) {
-    headers["Authorization"] = `Bearer ${token}`;
-  }
-
-  const response = await fetch(
-    `${API_BASE_URL}${API_ENDPOINTS.RECOMMENDATIONS}/approve`,
-    {
-      method: "POST",
-      headers,
-      body: JSON.stringify({
+  try {
+    const response = await apiClient.post(
+      `${API_ENDPOINTS.RECOMMENDATIONS}/approve`,
+      {
        recommendationId,
        status: "approved",
-        approvedBy,
-      }),
-    },
-  );
-
-  if (!response.ok) {
-    throw new Error(`Failed to approve recommendation: ${response.status}`);
+      },
+      withAuth(token),
+    );
+    return parseApiData<Recommendation>(response.data);
+  } catch (error) {
+    if (isAxiosError(error) && error.response) {
+      throw new Error(
+        `Failed to approve recommendation: ${error.response.status}`,
+      );
+    }
+    throw error;
  }
-
-  const result = await response.json();
-
-  // Handle standardized API response format
-  if (result.success && result.data) {
-    return result.data;
-  }
-
-  // Fallback for legacy format
-  return result;
 }
@@ -12,17 +12,20 @@ import {
 import { useUser, useAuth } from "@clerk/clerk-expo";
 import { useRouter } from "expo-router";
 import { fitnessProfileApi } from "@/api/fitnessProfile";
-import { API_BASE_URL } from "@/config/api";
+import { gymsApi, type Gym } from "@/api/gyms";
+import { useTheme } from "../../contexts/ThemeContext";
+import { Input } from "../../components/Input";
+import { MinimalButton } from "../../components/MinimalButton";
+import { MinimalCard } from "../../components/MinimalCard";
 import log from "../../utils/logger";

 export default function OnboardingScreen() {
  const { user } = useUser();
  const { getToken } = useAuth();
  const router = useRouter();
+  const { colors, typography } = useTheme();
  const [isSubmitting, setIsSubmitting] = useState(false);
-  const [gyms, setGyms] = useState<
-    Array<{ id: string; name: string; location?: string }>
-  >([]);
+  const [gyms, setGyms] = useState<Gym[]>([]);
  const [gymsLoading, setGymsLoading] = useState<boolean>(false);
  const [selectedGymId, setSelectedGymId] = useState<string | null>(null);

@@ -31,13 +34,8 @@ export default function OnboardingScreen() {
      try {
        setGymsLoading(true);
        const token = await getToken();
-        const res = await fetch(`${API_BASE_URL}/api/gyms`, {
-          headers: token ? { Authorization: `Bearer ${token}` } : undefined,
-        });
-        const data = await res.json();
-        if (Array.isArray(data)) {
-          setGyms(data);
-        }
+        const data = await gymsApi.getGyms(token);
+        setGyms(data);
      } catch (e) {
        log.error("Failed to fetch gyms", e);
      } finally {
@@ -82,14 +80,7 @@ export default function OnboardingScreen() {
      // If gym was selected or cleared, patch user's gym selection first
      // selectedGymId: string gym id, or null to proceed without gym
      try {
-        await fetch(`${API_BASE_URL}/api/users/gym`, {
-          method: "PATCH",
-          headers: {
-            "Content-Type": "application/json",
-            Authorization: `Bearer ${token}`,
-          },
-          body: JSON.stringify({ gymId: selectedGymId }),
-        });
+        await gymsApi.updateUserGym(selectedGymId, token);
      } catch (e) {
        log.warn("Failed to update gym selection", { gymId: selectedGymId });
      }
@@ -148,24 +139,53 @@ export default function OnboardingScreen() {
  const progress = calculateProgress();

  return (
-    <ScrollView style={styles.container}>
-      <Text style={styles.title}>Set Up Your Fitness Profile</Text>
-      <Text style={styles.subtitle}>
+    <ScrollView
+      style={[styles.container, { backgroundColor: colors.background }]}
+    >
+      <Text
+        style={[typography.h2, { color: colors.textPrimary }, styles.title]}
+      >
+        Set Up Your Fitness Profile
+      </Text>
+      <Text
+        style={[
+          typography.body,
+          { color: colors.textSecondary },
+          styles.subtitle,
+        ]}
+      >
        Help us personalize your fitness journey
      </Text>

      {/* Progress indicator */}
      <View style={styles.progressContainer}>
-        <View style={styles.progressBarBackground}>
-          <View style={[styles.progressBarFill, { width: `${progress}%` }]} />
+        <View
+          style={[
+            styles.progressBarBackground,
+            { backgroundColor: colors.borderLight },
+          ]}
+        >
+          <View
+            style={[
+              styles.progressBarFill,
+              { width: `${progress}%`, backgroundColor: colors.primary },
+            ]}
+          />
        </View>
-        <Text style={styles.progressText}>{progress}% Complete</Text>
+        <Text
+          style={[
+            typography.caption,
+            { color: colors.textTertiary },
+            styles.progressText,
+          ]}
+        >
+          {progress}% Complete
+        </Text>
      </View>

      <View style={styles.form}>
-        <Text style={styles.label}>Height (cm)</Text>
-        <TextInput
-          style={styles.input}
+        <Input
+          label="Height (cm)"
          value={fitnessProfile.height}
          onChangeText={(value) =>
            setFitnessProfile({ ...fitnessProfile, height: value })
@@ -174,9 +194,8 @@ export default function OnboardingScreen() {
          placeholder="Enter height in cm"
        />

-        <Text style={styles.label}>Weight (kg)</Text>
-        <TextInput
-          style={styles.input}
+        <Input
+          label="Weight (kg)"
          value={fitnessProfile.weight}
          onChangeText={(value) =>
            setFitnessProfile({ ...fitnessProfile, weight: value })
@@ -185,9 +204,8 @@ export default function OnboardingScreen() {
          placeholder="Enter weight in kg"
        />

-        <Text style={styles.label}>Age</Text>
-        <TextInput
-          style={styles.input}
+        <Input
+          label="Age"
          value={fitnessProfile.age}
          onChangeText={(value) =>
            setFitnessProfile({ ...fitnessProfile, age: value })
@@ -196,9 +214,9 @@ export default function OnboardingScreen() {
          placeholder="Enter your age"
        />

-        <Text style={styles.label}>Fitness Goals</Text>
-        <TextInput
-          style={[styles.input, styles.textArea]}
+        <Input
+          label="Fitness Goals"
+          style={styles.textArea}
          value={fitnessProfile.goals}
          onChangeText={(value) =>
            setFitnessProfile({ ...fitnessProfile, goals: value })
@@ -208,33 +226,48 @@ export default function OnboardingScreen() {
          placeholder="What are your fitness goals?"
        />

-        <Text style={styles.label}>Fitness Level</Text>
+        <Text
+          style={[typography.h4, { color: colors.textPrimary }, styles.label]}
+        >
+          Fitness Level
+        </Text>
        <View style={styles.buttonGroup}>
          {["beginner", "intermediate", "advanced"].map((level) => (
            <TouchableOpacity
              key={level}
              style={[
-                styles.levelButton,
-                fitnessProfile.fitnessLevel === level && styles.selectedButton,
+                styles.segmentButton,
+                {
+                  backgroundColor:
+                    fitnessProfile.fitnessLevel === level
+                      ? colors.primary
+                      : colors.surface,
+                  borderColor: colors.border,
+                },
              ]}
              onPress={() => handleLevelSelect(level)}
            >
              <Text
                style={[
-                  styles.levelButtonText,
-                  fitnessProfile.fitnessLevel === level &&
-                    styles.selectedButtonText,
+                  typography.caption,
+                  {
+                    color:
+                      fitnessProfile.fitnessLevel === level
+                        ? colors.white
+                        : colors.textSecondary,
+                    textTransform: "capitalize",
+                  },
                ]}
              >
-                {level.charAt(0).toUpperCase() + level.slice(1)}
+                {level}
              </Text>
            </TouchableOpacity>
          ))}
        </View>

-        <Text style={styles.label}>Medical Conditions</Text>
-        <TextInput
-          style={[styles.input, styles.textArea]}
+        <Input
+          label="Medical Conditions"
+          style={styles.textArea}
          value={fitnessProfile.medicalConditions}
          onChangeText={(value) =>
            setFitnessProfile({ ...fitnessProfile, medicalConditions: value })
@@ -244,9 +277,9 @@ export default function OnboardingScreen() {
          placeholder="Any medical conditions we should know about?"
        />

-        <Text style={styles.label}>Dietary Restrictions</Text>
-        <TextInput
-          style={[styles.input, styles.textArea]}
+        <Input
+          label="Dietary Restrictions"
+          style={styles.textArea}
          value={fitnessProfile.dietaryRestrictions}
          onChangeText={(value) =>
            setFitnessProfile({
@@ -259,34 +292,47 @@ export default function OnboardingScreen() {
          placeholder="Any dietary restrictions?"
        />

-        <Text style={styles.label}>Preferred Workout Time</Text>
+        <Text
+          style={[typography.h4, { color: colors.textPrimary }, styles.label]}
+        >
+          Preferred Workout Time
+        </Text>
        <View style={styles.buttonGroup}>
          {["morning", "afternoon", "evening"].map((time) => (
            <TouchableOpacity
              key={time}
              style={[
-                styles.timeButton,
-                fitnessProfile.preferredWorkoutTime === time &&
-                  styles.selectedButton,
+                styles.segmentButton,
+                {
+                  backgroundColor:
+                    fitnessProfile.preferredWorkoutTime === time
+                      ? colors.primary
+                      : colors.surface,
+                  borderColor: colors.border,
+                },
              ]}
              onPress={() => handleTimeSelect(time)}
            >
              <Text
                style={[
-                  styles.timeButtonText,
-                  fitnessProfile.preferredWorkoutTime === time &&
-                    styles.selectedButtonText,
+                  typography.caption,
+                  {
+                    color:
+                      fitnessProfile.preferredWorkoutTime === time
+                        ? colors.white
+                        : colors.textSecondary,
+                    textTransform: "capitalize",
+                  },
                ]}
              >
-                {time.charAt(0).toUpperCase() + time.slice(1)}
+                {time}
              </Text>
            </TouchableOpacity>
          ))}
        </View>

-        <Text style={styles.label}>Workouts per Week</Text>
-        <TextInput
-          style={styles.input}
+        <Input
+          label="Workouts per Week"
          value={fitnessProfile.workoutFrequency}
          onChangeText={(value) =>
            setFitnessProfile({ ...fitnessProfile, workoutFrequency: value })
@@ -295,7 +341,11 @@ export default function OnboardingScreen() {
          placeholder="Number of workouts per week"
        />

-        <Text style={styles.label}>Select a Gym</Text>
+        <Text
+          style={[typography.h4, { color: colors.textPrimary }, styles.label]}
+        >
+          Select a Gym
+        </Text>
        {gymsLoading ? (
          <ActivityIndicator />
        ) : (
@@ -307,15 +357,24 @@ export default function OnboardingScreen() {
            <View style={{ flexDirection: "row" }}>
              <TouchableOpacity
                style={[
-                  styles.levelButton,
-                  selectedGymId === null && styles.selectedButton,
+                  styles.segmentButton,
+                  {
+                    backgroundColor:
+                      selectedGymId === null ? colors.primary : colors.surface,
+                    borderColor: colors.border,
+                  },
                ]}
                onPress={() => setSelectedGymId(null)}
              >
                <Text
                  style={[
-                    styles.levelButtonText,
-                    selectedGymId === null && styles.selectedButtonText,
+                    typography.caption,
+                    {
+                      color:
+                        selectedGymId === null
+                          ? colors.white
+                          : colors.textSecondary,
+                    },
                  ]}
                >
                  Proceed without gym
@@ -325,15 +384,26 @@ export default function OnboardingScreen() {
                <TouchableOpacity
                  key={gym.id}
                  style={[
-                    styles.levelButton,
-                    selectedGymId === gym.id && styles.selectedButton,
+                    styles.segmentButton,
+                    {
+                      backgroundColor:
+                        selectedGymId === gym.id
+                          ? colors.primary
+                          : colors.surface,
+                      borderColor: colors.border,
+                    },
                  ]}
                  onPress={() => setSelectedGymId(gym.id)}
                >
                  <Text
                    style={[
-                      styles.levelButtonText,
-                      selectedGymId === gym.id && styles.selectedButtonText,
+                      typography.caption,
+                      {
+                        color:
+                          selectedGymId === gym.id
+                            ? colors.white
+                            : colors.textSecondary,
+                      },
                    ]}
                  >
                    {gym.name}
@@ -344,17 +414,14 @@ export default function OnboardingScreen() {
          </ScrollView>
        )}

-        <TouchableOpacity
-          style={styles.submitButton}
+        <MinimalButton
+          title="Complete Setup"
          onPress={handleSubmit}
+          loading={isSubmitting}
          disabled={isSubmitting}
-        >
-          {isSubmitting ? (
-            <ActivityIndicator color="white" />
-          ) : (
-            <Text style={styles.submitButtonText}>Complete Setup</Text>
-          )}
-        </TouchableOpacity>
+          fullWidth
+          size="lg"
+        />
      </View>
    </ScrollView>
  );
@@ -363,18 +430,13 @@ export default function OnboardingScreen() {
 const styles = StyleSheet.create({
  container: {
    flex: 1,
-    backgroundColor: "#f5f5f5",
  },
  title: {
-    fontSize: 24,
-    fontWeight: "bold",
    textAlign: "center",
    marginTop: 40,
    marginBottom: 8,
  },
  subtitle: {
-    fontSize: 16,
-    color: "#666",
    textAlign: "center",
    marginBottom: 32,
  },
@@ -382,91 +444,39 @@ const styles = StyleSheet.create({
    padding: 20,
  },
  label: {
-    fontSize: 14,
-    fontWeight: "600",
-    color: "#374151",
-    marginBottom: 4,
-  },
-  input: {
-    borderWidth: 1,
-    borderColor: "#ddd",
-    borderRadius: 8,
-    padding: 12,
-    marginBottom: 16,
-    backgroundColor: "white",
+    marginBottom: 8,
  },
  textArea: {
-    height: 80,
+    minHeight: 80,
    textAlignVertical: "top",
+    marginBottom: 16,
  },
  buttonGroup: {
    flexDirection: "row",
-    justifyContent: "space-between",
+    flexWrap: "wrap",
+    gap: 8,
    marginBottom: 16,
  },
-  levelButton: {
-    flex: 1,
-    backgroundColor: "#f3f4f6",
+  segmentButton: {
+    minWidth: 100,
    padding: 10,
-    borderRadius: 8,
-    marginHorizontal: 4,
+    borderRadius: 10,
+    borderWidth: 1,
    alignItems: "center",
  },
-  timeButton: {
-    flex: 1,
-    backgroundColor: "#f3f4f6",
-    padding: 10,
-    borderRadius: 8,
-    marginHorizontal: 4,
-    alignItems: "center",
-  },
-  selectedButton: {
-    backgroundColor: "#3b82f6",
-  },
-  levelButtonText: {
-    color: "#374151",
-    fontSize: 14,
-    fontWeight: "500",
-  },
-  timeButtonText: {
-    color: "#374151",
-    fontSize: 14,
-    fontWeight: "500",
-  },
-  selectedButtonText: {
-    color: "white",
-  },
-  submitButton: {
-    backgroundColor: "#3b82f6",
-    padding: 16,
-    borderRadius: 8,
-    alignItems: "center",
-    marginTop: 24,
-  },
-  submitButtonText: {
-    color: "white",
-    fontSize: 16,
-    fontWeight: "600",
-  },
  progressContainer: {
    paddingHorizontal: 20,
    marginBottom: 16,
  },
  progressBarBackground: {
    height: 8,
-    backgroundColor: "#e5e7eb",
    borderRadius: 4,
    overflow: "hidden",
    marginBottom: 8,
  },
  progressBarFill: {
    height: "100%",
-    backgroundColor: "#3b82f6",
    borderRadius: 4,
  },
-  progressText: {
-    fontSize: 12,
-    color: "#6b7280",
-    textAlign: "center",
-  },
+  progressText: { textAlign: "center" },
 });
@@ -4,7 +4,6 @@ import { useRouter } from "expo-router";
 import {
  View,
  Text,
-  TextInput,
  TouchableOpacity,
  StyleSheet,
  ActivityIndicator,
@@ -13,6 +12,9 @@ import {
  ScrollView,
 } from "react-native";
 import { OAuthButtons } from "../../components/auth/OAuthButtons";
+import { Input } from "../../components/Input";
+import { MinimalButton } from "../../components/MinimalButton";
+import { useTheme } from "../../contexts/ThemeContext";
 import { getErrorMessage, getClerkErrorCode } from "../../utils/error-helpers";
 import log from "../../utils/logger";

@@ -25,6 +27,7 @@ export default function SignInScreen() {
  const [password, setPassword] = useState("");
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");
+  const { colors, typography } = useTheme();

  // Redirect if already signed in
  useEffect(() => {
@@ -77,8 +80,15 @@ export default function SignInScreen() {
  if (isSignedIn) {
    return (
      <View style={[styles.container, styles.centerContent]}>
-        <ActivityIndicator size="large" color="#2563eb" />
-        <Text style={styles.loadingText}>Redirecting...</Text>
+        <ActivityIndicator size="large" color={colors.primary} />
+        <Text
+          style={[
+            typography.body,
+            { color: colors.textSecondary, marginTop: 12 },
+          ]}
+        >
+          Redirecting...
+        </Text>
      </View>
    );
  }
@@ -86,19 +96,33 @@ export default function SignInScreen() {
  return (
    <KeyboardAvoidingView
      behavior={Platform.OS === "ios" ? "padding" : "height"}
-      style={styles.container}
+      style={[styles.container, { backgroundColor: colors.background }]}
    >
      <ScrollView
        contentContainerStyle={styles.scrollContent}
        keyboardShouldPersistTaps="handled"
      >
        <View style={styles.content}>
-          <Text style={styles.title}>Welcome Back</Text>
-          <Text style={styles.subtitle}>Sign in to continue to FitAI</Text>
+          <Text
+            style={[typography.h1, { color: colors.textPrimary }, styles.title]}
+          >
+            Welcome Back
+          </Text>
+          <Text
+            style={[
+              typography.body,
+              { color: colors.textSecondary },
+              styles.subtitle,
+            ]}
+          >
+            Sign in to continue to FitAI
+          </Text>

          {error ? (
            <View style={styles.errorContainer}>
-              <Text style={styles.errorText}>{error}</Text>
+              <Text style={[typography.caption, { color: colors.danger }]}>
+                {error}
+              </Text>
            </View>
          ) : null}

@@ -112,13 +136,11 @@ export default function SignInScreen() {

          <View style={styles.form}>
            <View style={styles.inputContainer}>
-              <Text style={styles.label}>Email</Text>
-              <TextInput
-                style={styles.input}
+              <Input
+                label="Email"
                autoCapitalize="none"
                value={emailAddress}
                placeholder="Enter your email"
-                placeholderTextColor="#999"
                onChangeText={setEmailAddress}
                keyboardType="email-address"
                autoComplete="email"
@@ -127,12 +149,10 @@ export default function SignInScreen() {
            </View>

            <View style={styles.inputContainer}>
-              <Text style={styles.label}>Password</Text>
-              <TextInput
-                style={styles.input}
+              <Input
+                label="Password"
                value={password}
                placeholder="Enter your password"
-                placeholderTextColor="#999"
                secureTextEntry={true}
                onChangeText={setPassword}
                autoComplete="password"
@@ -140,26 +160,29 @@ export default function SignInScreen() {
              />
            </View>

-            <TouchableOpacity
-              style={[styles.button, loading && styles.buttonDisabled]}
+            <MinimalButton
+              title="Sign In"
              onPress={onSignInPress}
+              loading={loading}
              disabled={loading || !emailAddress || !password}
-            >
-              {loading ? (
-                <ActivityIndicator color="#fff" />
-              ) : (
-                <Text style={styles.buttonText}>Sign In</Text>
-              )}
-            </TouchableOpacity>
+              fullWidth
+              size="lg"
+            />
          </View>

          <View style={styles.footer}>
-            <Text style={styles.footerText}>Don't have an account? </Text>
+            <Text style={[typography.caption, { color: colors.textSecondary }]}>
+              Don't have an account?{" "}
+            </Text>
            <TouchableOpacity
              onPress={() => router.push("/(auth)/sign-up")}
              disabled={loading}
            >
-              <Text style={styles.linkText}>Sign Up</Text>
+              <Text
+                style={[typography.bodyEmphasis, { color: colors.primary }]}
+              >
+                Sign Up
+              </Text>
            </TouchableOpacity>
          </View>
        </View>
@@ -171,17 +194,11 @@ export default function SignInScreen() {
 const styles = StyleSheet.create({
  container: {
    flex: 1,
-    backgroundColor: "#f5f5f5",
  },
  centerContent: {
    justifyContent: "center",
    alignItems: "center",
  },
-  loadingText: {
-    marginTop: 12,
-    fontSize: 16,
-    color: "#666",
-  },
  scrollContent: {
    flexGrow: 1,
    justifyContent: "center",
@@ -193,27 +210,18 @@ const styles = StyleSheet.create({
    paddingVertical: 40,
  },
  title: {
-    fontSize: 32,
-    fontWeight: "bold",
-    color: "#1a1a1a",
    marginBottom: 8,
  },
  subtitle: {
-    fontSize: 16,
-    color: "#666",
    marginBottom: 32,
  },
  errorContainer: {
-    backgroundColor: "#fee",
+    backgroundColor: "rgba(255, 59, 59, 0.08)",
    padding: 12,
-    borderRadius: 8,
+    borderRadius: 12,
    marginBottom: 16,
    borderLeftWidth: 4,
-    borderLeftColor: "#f44",
-  },
-  errorText: {
-    color: "#c00",
-    fontSize: 14,
+    borderLeftColor: "#FF3B3B",
  },
  form: {
    marginBottom: 24,
@@ -221,51 +229,11 @@ const styles = StyleSheet.create({
  inputContainer: {
    marginBottom: 20,
  },
-  label: {
-    fontSize: 14,
-    fontWeight: "600",
-    color: "#333",
-    marginBottom: 8,
-  },
-  input: {
-    backgroundColor: "#fff",
-    borderWidth: 1,
-    borderColor: "#ddd",
-    borderRadius: 8,
-    paddingHorizontal: 16,
-    paddingVertical: 12,
-    fontSize: 16,
-    color: "#1a1a1a",
-  },
-  button: {
-    backgroundColor: "#2563eb",
-    paddingVertical: 16,
-    borderRadius: 8,
-    alignItems: "center",
-    marginTop: 8,
-  },
-  buttonDisabled: {
-    backgroundColor: "#93c5fd",
-  },
-  buttonText: {
-    color: "#fff",
-    fontSize: 16,
-    fontWeight: "600",
-  },
  footer: {
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
  },
-  footerText: {
-    fontSize: 14,
-    color: "#666",
-  },
-  linkText: {
-    fontSize: 14,
-    color: "#2563eb",
-    fontWeight: "600",
-  },
  dividerContainer: {
    flexDirection: "row",
    alignItems: "center",
@@ -274,11 +242,11 @@ const styles = StyleSheet.create({
  dividerLine: {
    flex: 1,
    height: 1,
-    backgroundColor: "#ddd",
+    backgroundColor: "#E5E5EA",
  },
  dividerText: {
    marginHorizontal: 10,
-    color: "#666",
+    color: "#8E8E93",
    fontSize: 14,
  },
 });
@@ -4,7 +4,6 @@ import { useRouter } from "expo-router";
 import {
  View,
  Text,
-  TextInput,
  TouchableOpacity,
  StyleSheet,
  ActivityIndicator,
@@ -13,6 +12,9 @@ import {
  ScrollView,
 } from "react-native";
 import { OAuthButtons } from "../../components/auth/OAuthButtons";
+import { Input } from "../../components/Input";
+import { MinimalButton } from "../../components/MinimalButton";
+import { useTheme } from "../../contexts/ThemeContext";
 import { getErrorMessage, getClerkErrorCode } from "../../utils/error-helpers";
 import log from "../../utils/logger";

@@ -29,6 +31,7 @@ export default function SignUpScreen() {
  const [code, setCode] = useState("");
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");
+  const { colors, typography } = useTheme();

  // Redirect if already signed in
  useEffect(() => {
@@ -101,8 +104,15 @@ export default function SignUpScreen() {
  if (isSignedIn) {
    return (
      <View style={[styles.container, styles.centerContent]}>
-        <ActivityIndicator size="large" color="#2563eb" />
-        <Text style={styles.loadingText}>Redirecting...</Text>
+        <ActivityIndicator size="large" color={colors.primary} />
+        <Text
+          style={[
+            typography.body,
+            { color: colors.textSecondary, marginTop: 12 },
+          ]}
+        >
+          Redirecting...
+        </Text>
      </View>
    );
  }
@@ -118,42 +128,53 @@ export default function SignUpScreen() {
          keyboardShouldPersistTaps="handled"
        >
          <View style={styles.content}>
-            <Text style={styles.title}>Verify Email</Text>
-            <Text style={styles.subtitle}>
+            <Text
+              style={[
+                typography.h1,
+                { color: colors.textPrimary },
+                styles.title,
+              ]}
+            >
+              Verify Email
+            </Text>
+            <Text
+              style={[
+                typography.body,
+                { color: colors.textSecondary },
+                styles.subtitle,
+              ]}
+            >
              Enter the verification code sent to {emailAddress}
            </Text>

            {error ? (
              <View style={styles.errorContainer}>
-                <Text style={styles.errorText}>{error}</Text>
+                <Text style={[typography.caption, { color: colors.danger }]}>
+                  {error}
+                </Text>
              </View>
            ) : null}

            <View style={styles.form}>
              <View style={styles.inputContainer}>
-                <Text style={styles.label}>Verification Code</Text>
-                <TextInput
-                  style={styles.input}
+                <Input
+                  label="Verification Code"
                  value={code}
                  placeholder="Enter verification code"
-                  placeholderTextColor="#999"
                  onChangeText={setCode}
                  keyboardType="number-pad"
                  editable={!loading}
                />
              </View>

-              <TouchableOpacity
-                style={[styles.button, loading && styles.buttonDisabled]}
+              <MinimalButton
+                title="Verify Email"
                onPress={onVerifyPress}
+                loading={loading}
                disabled={loading || !code}
-              >
-                {loading ? (
-                  <ActivityIndicator color="#fff" />
-                ) : (
-                  <Text style={styles.buttonText}>Verify Email</Text>
-                )}
-              </TouchableOpacity>
+                fullWidth
+                size="lg"
+              />
            </View>
          </View>
        </ScrollView>
@@ -164,19 +185,33 @@ export default function SignUpScreen() {
  return (
    <KeyboardAvoidingView
      behavior={Platform.OS === "ios" ? "padding" : "height"}
-      style={styles.container}
+      style={[styles.container, { backgroundColor: colors.background }]}
    >
      <ScrollView
        contentContainerStyle={styles.scrollContent}
        keyboardShouldPersistTaps="handled"
      >
        <View style={styles.content}>
-          <Text style={styles.title}>Create Account</Text>
-          <Text style={styles.subtitle}>Sign up to get started with FitAI</Text>
+          <Text
+            style={[typography.h1, { color: colors.textPrimary }, styles.title]}
+          >
+            Create Account
+          </Text>
+          <Text
+            style={[
+              typography.body,
+              { color: colors.textSecondary },
+              styles.subtitle,
+            ]}
+          >
+            Sign up to get started with FitAI
+          </Text>

          {error ? (
            <View style={styles.errorContainer}>
-              <Text style={styles.errorText}>{error}</Text>
+              <Text style={[typography.caption, { color: colors.danger }]}>
+                {error}
+              </Text>
            </View>
          ) : null}

@@ -190,12 +225,10 @@ export default function SignUpScreen() {

          <View style={styles.form}>
            <View style={styles.inputContainer}>
-              <Text style={styles.label}>First Name</Text>
-              <TextInput
-                style={styles.input}
+              <Input
+                label="First Name"
                value={firstName}
                placeholder="Enter your first name"
-                placeholderTextColor="#999"
                onChangeText={setFirstName}
                autoComplete="given-name"
                editable={!loading}
@@ -203,12 +236,10 @@ export default function SignUpScreen() {
            </View>

            <View style={styles.inputContainer}>
-              <Text style={styles.label}>Last Name</Text>
-              <TextInput
-                style={styles.input}
+              <Input
+                label="Last Name"
                value={lastName}
                placeholder="Enter your last name"
-                placeholderTextColor="#999"
                onChangeText={setLastName}
                autoComplete="family-name"
                editable={!loading}
@@ -216,13 +247,11 @@ export default function SignUpScreen() {
            </View>

            <View style={styles.inputContainer}>
-              <Text style={styles.label}>Email</Text>
-              <TextInput
-                style={styles.input}
+              <Input
+                label="Email"
                autoCapitalize="none"
                value={emailAddress}
                placeholder="Enter your email"
-                placeholderTextColor="#999"
                onChangeText={setEmailAddress}
                keyboardType="email-address"
                autoComplete="email"
@@ -231,42 +260,51 @@ export default function SignUpScreen() {
            </View>

            <View style={styles.inputContainer}>
-              <Text style={styles.label}>Password</Text>
-              <TextInput
-                style={styles.input}
+              <Input
+                label="Password"
                value={password}
                placeholder="Create a password"
-                placeholderTextColor="#999"
                secureTextEntry={true}
                onChangeText={setPassword}
                autoComplete="password-new"
                editable={!loading}
              />
-              <Text style={styles.hint}>Must be at least 8 characters</Text>
+              <Text
+                style={[
+                  typography.caption,
+                  { color: colors.textTertiary },
+                  styles.hint,
+                ]}
+              >
+                Must be at least 8 characters
+              </Text>
            </View>

-            <TouchableOpacity
-              style={[styles.button, loading && styles.buttonDisabled]}
+            <MinimalButton
+              title="Sign Up"
              onPress={onSignUpPress}
+              loading={loading}
              disabled={
                loading || !emailAddress || !password || !firstName || !lastName
              }
-            >
-              {loading ? (
-                <ActivityIndicator color="#fff" />
-              ) : (
-                <Text style={styles.buttonText}>Sign Up</Text>
-              )}
-            </TouchableOpacity>
+              fullWidth
+              size="lg"
+            />
          </View>

          <View style={styles.footer}>
-            <Text style={styles.footerText}>Already have an account? </Text>
+            <Text style={[typography.caption, { color: colors.textSecondary }]}>
+              Already have an account?{" "}
+            </Text>
            <TouchableOpacity
              onPress={() => router.push("/(auth)/sign-in")}
              disabled={loading}
            >
-              <Text style={styles.linkText}>Sign In</Text>
+              <Text
+                style={[typography.bodyEmphasis, { color: colors.primary }]}
+              >
+                Sign In
+              </Text>
            </TouchableOpacity>
          </View>
        </View>
@@ -278,17 +316,11 @@ export default function SignUpScreen() {
 const styles = StyleSheet.create({
  container: {
    flex: 1,
-    backgroundColor: "#f5f5f5",
  },
  centerContent: {
    justifyContent: "center",
    alignItems: "center",
  },
-  loadingText: {
-    marginTop: 12,
-    fontSize: 16,
-    color: "#666",
-  },
  scrollContent: {
    flexGrow: 1,
    justifyContent: "center",
@@ -300,27 +332,18 @@ const styles = StyleSheet.create({
    paddingVertical: 40,
  },
  title: {
-    fontSize: 32,
-    fontWeight: "bold",
-    color: "#1a1a1a",
    marginBottom: 8,
  },
  subtitle: {
-    fontSize: 16,
-    color: "#666",
    marginBottom: 32,
  },
  errorContainer: {
-    backgroundColor: "#fee",
+    backgroundColor: "rgba(255, 59, 59, 0.08)",
    padding: 12,
-    borderRadius: 8,
+    borderRadius: 12,
    marginBottom: 16,
    borderLeftWidth: 4,
-    borderLeftColor: "#f44",
-  },
-  errorText: {
-    color: "#c00",
-    fontSize: 14,
+    borderLeftColor: "#FF3B3B",
  },
  form: {
    marginBottom: 24,
@@ -328,56 +351,14 @@ const styles = StyleSheet.create({
  inputContainer: {
    marginBottom: 20,
  },
-  label: {
-    fontSize: 14,
-    fontWeight: "600",
-    color: "#333",
-    marginBottom: 8,
-  },
-  input: {
-    backgroundColor: "#fff",
-    borderWidth: 1,
-    borderColor: "#ddd",
-    borderRadius: 8,
-    paddingHorizontal: 16,
-    paddingVertical: 12,
-    fontSize: 16,
-    color: "#1a1a1a",
-  },
  hint: {
-    fontSize: 12,
-    color: "#999",
    marginTop: 4,
  },
-  button: {
-    backgroundColor: "#2563eb",
-    paddingVertical: 16,
-    borderRadius: 8,
-    alignItems: "center",
-    marginTop: 8,
-  },
-  buttonDisabled: {
-    backgroundColor: "#93c5fd",
-  },
-  buttonText: {
-    color: "#fff",
-    fontSize: 16,
-    fontWeight: "600",
-  },
  footer: {
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
  },
-  footerText: {
-    fontSize: 14,
-    color: "#666",
-  },
-  linkText: {
-    fontSize: 14,
-    color: "#2563eb",
-    fontWeight: "600",
-  },
  dividerContainer: {
    flexDirection: "row",
    alignItems: "center",
@@ -386,11 +367,11 @@ const styles = StyleSheet.create({
  dividerLine: {
    flex: 1,
    height: 1,
-    backgroundColor: "#ddd",
+    backgroundColor: "#E5E5EA",
  },
  dividerText: {
    marginHorizontal: 10,
-    color: "#666",
+    color: "#8E8E93",
    fontSize: 14,
  },
 });
@@ -80,7 +80,7 @@ export default function TabLayout() {
      <Tabs.Screen
        name="recommendations"
        options={{
-          title: "AI",
+          title: "Plans",
        }}
      />
      <Tabs.Screen
@@ -7,6 +7,8 @@ import {
  Image,
  Animated,
  TouchableOpacity,
+  Alert,
+  AppState,
 } from "react-native";
 import { useUser } from "@clerk/clerk-expo";
 import { useState, useCallback, useEffect, useRef, useMemo } from "react";
@@ -24,6 +26,7 @@ import { TrackMealModal } from "../../components/TrackMealModal";
 import { AddWaterModal } from "../../components/AddWaterModal";
 import { ScanFoodModal } from "../../components/ScanFoodModal";
 import { ActivityRing } from "../../components/ActivityRing";
+import { useMembership } from "../../hooks/useMembership";
 import {
  checkInsToActivities,
  completedGoalsToActivities,
@@ -40,10 +43,39 @@ import {
 const CALORIE_GOAL = 2000;
 const WATER_GOAL = 2000;
 const WORKOUT_GOAL = 3;
+const MOTIVATION_KEY_PREFIX = "home-motivation";
+const HOME_METRICS_KEY_PREFIX = "home-metrics";
+
+const getLocalDateKey = () => {
+  const now = new Date();
+  const year = now.getFullYear();
+  const month = String(now.getMonth() + 1).padStart(2, "0");
+  const day = String(now.getDate()).padStart(2, "0");
+  return `${year}-${month}-${day}`;
+};
+
+const getMillisecondsUntilNextMidnight = () => {
+  const now = new Date();
+  const nextMidnight = new Date(now);
+  nextMidnight.setHours(24, 0, 0, 0);
+  return Math.max(1000, nextMidnight.getTime() - now.getTime());
+};
+
+const getRandomMotivation = () => {
+  const messages = [
+    "Let's crush it today! 💪",
+    "Ready to level up? 🔥",
+    "You've got this! ⚡",
+    "Time to shine! ✨",
+    "Let's make it happen! 🚀",
+  ];
+  return messages[Math.floor(Math.random() * messages.length)];
+};

 export default function HomeScreen() {
  const { user } = useUser();
  const { colors, typography } = useTheme();
+  const { features, membershipType } = useMembership();
  const { refetchStatistics, forceRefresh, statistics, loading } =
    useStatistics();
  const { goals, refetchGoals } = useFitnessGoals();
@@ -53,15 +85,108 @@ export default function HomeScreen() {
  const [scanFoodModalVisible, setScanFoodModalVisible] = useState(false);
  const [calories, setCalories] = useState(0);
  const [waterIntake, setWaterIntake] = useState(0);
+  const [motivationalMessage, setMotivationalMessage] = useState(
+    "Let's crush it today! 💪",
+  );

  const caloriesBounce = useRef(new Animated.Value(1)).current;
  const waterBounce = useRef(new Animated.Value(1)).current;
+  const caloriesRef = useRef(0);
+  const waterRef = useRef(0);
+  const currentDateRef = useRef(getLocalDateKey());
+  const midnightResetTimerRef = useRef<ReturnType<typeof setTimeout> | null>(
+    null,
+  );
+
+  useEffect(() => {
+    caloriesRef.current = calories;
+  }, [calories]);
+
+  useEffect(() => {
+    waterRef.current = waterIntake;
+  }, [waterIntake]);
+
+  const getMetricsStorageKey = useCallback(
+    () => `${HOME_METRICS_KEY_PREFIX}_${user?.id || "guest"}`,
+    [user?.id],
+  );
+
+  const persistDailyMetrics = useCallback(
+    async (nextCalories: number, nextWaterIntake: number, dateKey?: string) => {
+      if (!user?.id) return;
+
+      const targetDate = dateKey || currentDateRef.current;
+      await AsyncStorage.setItem(
+        getMetricsStorageKey(),
+        JSON.stringify({
+          date: targetDate,
+          calories: nextCalories,
+          waterIntake: nextWaterIntake,
+        }),
+      );
+    },
+    [getMetricsStorageKey, user?.id],
+  );
+
+  const reconcileDailyMetrics = useCallback(async () => {
+    const today = getLocalDateKey();
+    currentDateRef.current = today;
+
+    if (!user?.id) {
+      setCalories(0);
+      setWaterIntake(0);
+      return;
+    }
+
+    const stored = await AsyncStorage.getItem(getMetricsStorageKey());
+    if (!stored) {
+      setCalories(0);
+      setWaterIntake(0);
+      await persistDailyMetrics(0, 0, today);
+      return;
+    }
+
+    try {
+      const parsed = JSON.parse(stored) as {
+        date?: string;
+        calories?: number;
+        waterIntake?: number;
+      };
+
+      if (parsed.date === today) {
+        const nextCalories = Number(parsed.calories) || 0;
+        const nextWater = Number(parsed.waterIntake) || 0;
+        setCalories(nextCalories);
+        setWaterIntake(nextWater);
+      } else {
+        setCalories(0);
+        setWaterIntake(0);
+        await persistDailyMetrics(0, 0, today);
+      }
+    } catch {
+      setCalories(0);
+      setWaterIntake(0);
+      await persistDailyMetrics(0, 0, today);
+    }
+  }, [getMetricsStorageKey, persistDailyMetrics, user?.id]);
+
+  const scheduleMidnightReset = useCallback(() => {
+    if (midnightResetTimerRef.current) {
+      clearTimeout(midnightResetTimerRef.current);
+    }
+
+    midnightResetTimerRef.current = setTimeout(() => {
+      void reconcileDailyMetrics();
+      scheduleMidnightReset();
+    }, getMillisecondsUntilNextMidnight() + 50);
+  }, [reconcileDailyMetrics]);

  useFocusEffect(
    useCallback(() => {
+      void reconcileDailyMetrics();
      refetchStatistics();
      refetchGoals();
-    }, [refetchStatistics, refetchGoals]),
+    }, [reconcileDailyMetrics, refetchStatistics, refetchGoals]),
  );

  const onRefresh = useCallback(async () => {
@@ -77,23 +202,16 @@ export default function HomeScreen() {
    return "Good Evening";
  };

-  const getMotivationalMessage = () => {
-    const messages = [
-      "Let's crush it today! 💪",
-      "Ready to level up? 🔥",
-      "You've got this! ⚡",
-      "Time to shine! ✨",
-      "Let's make it happen! 🚀",
-    ];
-    return messages[Math.floor(Math.random() * messages.length)];
-  };
-
  const handleSaveMeal = (meal: {
    type: string;
    name: string;
    calories: number;
  }) => {
-    setCalories((prev) => prev + meal.calories);
+    setCalories((prev) => {
+      const next = prev + meal.calories;
+      void persistDailyMetrics(next, waterRef.current);
+      return next;
+    });
    setTrackMealModalVisible(false);
    Animated.sequence([
      Animated.timing(caloriesBounce, {
@@ -110,7 +228,11 @@ export default function HomeScreen() {
  };

  const handleAddWater = (amount: number) => {
-    setWaterIntake((prev) => prev + amount);
+    setWaterIntake((prev) => {
+      const next = prev + amount;
+      void persistDailyMetrics(caloriesRef.current, next);
+      return next;
+    });
    setAddWaterModalVisible(false);
    Animated.sequence([
      Animated.timing(waterBounce, {
@@ -126,59 +248,81 @@ export default function HomeScreen() {
    ]).start();
  };

-  const handleResetCalories = () => setCalories(0);
-  const handleResetWater = () => setWaterIntake(0);
+  const handleResetCalories = () => {
+    setCalories(0);
+    void persistDailyMetrics(0, waterRef.current);
+  };
+
+  const handleResetWater = () => {
+    setWaterIntake(0);
+    void persistDailyMetrics(caloriesRef.current, 0);
+  };
+
  const handleAddScannedFood = (scannedCalories: number) => {
-    setCalories((prev) => prev + scannedCalories);
+    setCalories((prev) => {
+      const next = prev + scannedCalories;
+      void persistDailyMetrics(next, waterRef.current);
+      return next;
+    });
    setScanFoodModalVisible(false);
  };

-  const resetAllCounters = async () => {
-    setCalories(0);
-    setWaterIntake(0);
-    const today = new Date().toDateString();
-    await AsyncStorage.setItem("lastResetDate", today);
-    await AsyncStorage.removeItem(`calories_${today}`);
-    await AsyncStorage.removeItem(`water_${today}`);
-  };
-
  useEffect(() => {
-    const loadPersistedData = async () => {
-      const today = new Date().toDateString();
-      const storedCalories = await AsyncStorage.getItem(`calories_${today}`);
-      const storedWater = await AsyncStorage.getItem(`water_${today}`);
-      if (storedCalories) setCalories(parseInt(storedCalories, 10));
-      if (storedWater) setWaterIntake(parseInt(storedWater, 10));
+    const loadDailyMotivation = async () => {
+      const today = new Date().toISOString().split("T")[0];
+      const storageKey = `${MOTIVATION_KEY_PREFIX}_${user?.id || "guest"}`;
+      const storedValue = await AsyncStorage.getItem(storageKey);
+
+      if (storedValue) {
+        try {
+          const parsed = JSON.parse(storedValue) as {
+            date: string;
+            message: string;
+          };
+
+          if (parsed.date === today && parsed.message) {
+            setMotivationalMessage(parsed.message);
+            return;
+          }
+        } catch {
+          // Ignore invalid local value and regenerate
+        }
+      }
+
+      const nextMessage = getRandomMotivation();
+      setMotivationalMessage(nextMessage);
+      await AsyncStorage.setItem(
+        storageKey,
+        JSON.stringify({ date: today, message: nextMessage }),
+      );
    };
-    loadPersistedData();
-  }, []);
+
+    loadDailyMotivation();
+  }, [user?.id]);

  useEffect(() => {
-    const persistCalories = async () => {
-      const today = new Date().toDateString();
-      await AsyncStorage.setItem(`calories_${today}`, calories.toString());
-    };
-    persistCalories();
-  }, [calories]);
+    void reconcileDailyMetrics();
+  }, [reconcileDailyMetrics]);

  useEffect(() => {
-    const persistWater = async () => {
-      const today = new Date().toDateString();
-      await AsyncStorage.setItem(`water_${today}`, waterIntake.toString());
-    };
-    persistWater();
-  }, [waterIntake]);
+    const appStateSubscription = AppState.addEventListener(
+      "change",
+      (state) => {
+        if (state === "active") {
+          void reconcileDailyMetrics();
+        }
+      },
+    );

-  useEffect(() => {
-    const checkAndResetIfNeeded = async () => {
-      const lastResetDate = await AsyncStorage.getItem("lastResetDate");
-      const today = new Date().toDateString();
-      if (lastResetDate !== today) {
-        await resetAllCounters();
+    scheduleMidnightReset();
+
+    return () => {
+      appStateSubscription.remove();
+      if (midnightResetTimerRef.current) {
+        clearTimeout(midnightResetTimerRef.current);
      }
    };
-    checkAndResetIfNeeded();
-  }, []);
+  }, [reconcileDailyMetrics, scheduleMidnightReset]);

  const checkInsThisWeek = statistics?.attendance.checkInsThisWeek || 0;
  const currentStreak = statistics?.attendance.currentStreak || 0;
@@ -235,7 +379,7 @@ export default function HomeScreen() {
              {user?.firstName || "Champion"}
            </Text>
            <Text style={[typography.body, { color: colors.textSecondary }]}>
-              {getMotivationalMessage()}
+              {motivationalMessage}
            </Text>
          </View>
          <TouchableOpacity activeOpacity={0.8}>
@@ -386,7 +530,16 @@ export default function HomeScreen() {
            </TouchableOpacity>

            <TouchableOpacity
-              onPress={() => setTrackMealModalVisible(true)}
+              onPress={() => {
+                if (!features.nutritionTracking) {
+                  Alert.alert(
+                    "Premium Feature",
+                    "Meal tracking is available on Premium and VIP plans.",
+                  );
+                  return;
+                }
+                setTrackMealModalVisible(true);
+              }}
              activeOpacity={0.85}
              style={[
                styles.quickActionCard,
@@ -417,7 +570,16 @@ export default function HomeScreen() {
            </TouchableOpacity>

            <TouchableOpacity
-              onPress={() => setAddWaterModalVisible(true)}
+              onPress={() => {
+                if (!features.hydrationTracking) {
+                  Alert.alert(
+                    "Premium Feature",
+                    "Hydration tracking is available on Premium and VIP plans.",
+                  );
+                  return;
+                }
+                setAddWaterModalVisible(true);
+              }}
              activeOpacity={0.85}
              style={[styles.quickActionCard, { backgroundColor: colors.info }]}
            >
@@ -479,6 +641,23 @@ export default function HomeScreen() {

        {/* Today's Progress */}
        <View style={styles.section}>
+          {!features.nutritionTracking || !features.hydrationTracking ? (
+            <MinimalCard
+              variant="bordered"
+              style={[styles.progressCard, { marginBottom: 12 }]}
+            >
+              <Text
+                style={[
+                  typography.body,
+                  { color: colors.textSecondary, textAlign: "center" },
+                ]}
+              >
+                {membershipType === "basic"
+                  ? "Upgrade to Premium or VIP to unlock nutrition and hydration tracking."
+                  : "Some advanced tracking features are unavailable on your plan."}
+              </Text>
+            </MinimalCard>
+          ) : null}
          <SectionHeader
            title="Today's Progress"
            subtitle="Track your daily goals"
@@ -18,8 +18,9 @@ import { ListItem } from "../../components/ListItem";
 import { MinimalButton } from "../../components/MinimalButton";
 import { Badge } from "../../components/Badge";
 import { IconContainer } from "../../components/IconContainer";
-import { API_BASE_URL, API_ENDPOINTS } from "../../config/api";
 import { fitnessProfileApi, FitnessProfile } from "../../api/fitnessProfile";
+import { gymsApi, type Gym } from "../../api/gyms";
+import { useMembership } from "../../hooks/useMembership";
 import log from "../../utils/logger";

 export default function ProfileScreen() {
@@ -28,10 +29,9 @@ export default function ProfileScreen() {
  const router = useRouter();
  const { colors, typography, theme: activeTheme, setTheme } = useTheme();
  const { getToken } = useAuth();
+  const { membershipType } = useMembership();

-  const [gyms, setGyms] = useState<
-    Array<{ id: string; name: string; location?: string }>
-  >([]);
+  const [gyms, setGyms] = useState<Gym[]>([]);
  const [gymsLoading, setGymsLoading] = useState(false);
  const [selectedGymId, setSelectedGymId] = useState<string | null>(null);
  const [currentGymId, setCurrentGymId] = useState<string | null>(null);
@@ -76,51 +76,14 @@ export default function ProfileScreen() {
    try {
      setGymsLoading(true);
      const token = await getToken();
-      const url = `${API_BASE_URL}${API_ENDPOINTS.GYMS}`;
-      log.debug("Loading gyms", { url });
-      const res = await fetch(url, {
-        headers: token ? { Authorization: `Bearer ${token}` } : undefined,
-      });
-      const contentType = res.headers.get("content-type") || "";
-      if (!res.ok) {
-        const text = await res.text().catch(() => "");
-        log.error(
-          "Failed to fetch gyms - non-OK response",
-          new Error(text.slice(0, 200)),
-          { status: res.status },
-        );
-        setGyms([]);
-        return;
-      }
-      if (!contentType.includes("application/json")) {
-        const text = await res.text().catch(() => "");
-        log.error(
-          "Failed to fetch gyms - expected JSON",
-          new Error(text.slice(0, 200)),
-          { contentType },
-        );
-        setGyms([]);
-        return;
-      }
-      let data: any = null;
-      try {
-        data = await res.json();
-      } catch (e) {
-        const text = await res.text().catch(() => "");
-        log.error("Failed to parse gyms JSON", e, {
-          bodyPreview: text?.slice(0, 200),
-        });
-        setGyms([]);
-        return;
-      }
-      const list = Array.isArray(data) ? data : [];
+      const list = await gymsApi.getGyms(token);
      setGyms(list);
      const gid =
        currentGymId ??
        ((user?.publicMetadata as any)?.gymId as string | undefined) ??
        null;
      if (gid) {
-        const g = list.find((x: any) => x.id === gid);
+        const g = list.find((x) => x.id === gid);
        setCurrentGymId(gid);
        setCurrentGymName(g?.name ?? null);
        if (selectedGymId === null) setSelectedGymId(gid);
@@ -136,42 +99,7 @@ export default function ProfileScreen() {
  const handleApplyGym = async () => {
    try {
      const token = await getToken();
-      const url = `${API_BASE_URL}${API_ENDPOINTS.USERS.GYM}`;
-      log.debug("Updating gym selection", {
-        url,
-        gymId: selectedGymId,
-        token: token ? "present" : "missing",
-      });
-      const res = await fetch(url, {
-        method: "PATCH",
-        headers: {
-          "Content-Type": "application/json",
-          ...(token ? { Authorization: `Bearer ${token}` } : {}),
-        },
-        body: JSON.stringify({ gymId: selectedGymId }),
-      });
-      const contentType = res.headers.get("content-type") || "";
-      if (!res.ok) {
-        const text = await res.text().catch(() => "");
-        log.error(
-          "Failed to update gym selection - non-OK response",
-          new Error(text.slice(0, 200)),
-          { status: res.status },
-        );
-        Alert.alert("Error", "Failed to update gym selection");
-        return;
-      }
-      if (contentType.includes("application/json")) {
-        try {
-          const data = await res.json();
-          log.debug("Gym selection updated", { data });
-        } catch (e) {
-          const text = await res.text().catch(() => "");
-          log.error("Failed to parse update response JSON", e, {
-            bodyPreview: text?.slice(0, 200),
-          });
-        }
-      }
+      await gymsApi.updateUserGym(selectedGymId, token);
      setCurrentGymId(selectedGymId);
      setCurrentGymName(
        selectedGymId
@@ -277,8 +205,8 @@ export default function ProfileScreen() {
          {user?.primaryEmailAddress?.emailAddress}
        </Text>
        <Badge
-          label="Premium Member"
-          variant="success"
+          label={`${membershipType.toUpperCase()} Member`}
+          variant={membershipType === "basic" ? "neutral" : "success"}
          style={{ marginTop: 12 }}
        />
      </MinimalCard>
@@ -21,6 +21,7 @@ import { IconContainer } from "../../components/IconContainer";
 import { useRecommendations } from "../../contexts/RecommendationsContext";
 import { useNotifications } from "../../contexts/NotificationsContext";
 import { NotificationsModal } from "../../components/NotificationsModal";
+import { useMembership } from "../../hooks/useMembership";
 import type { Recommendation } from "../../api/recommendations";
 import log from "../../utils/logger";

@@ -33,6 +34,7 @@ export default function RecommendationsScreen() {
    refetchRecommendations,
    generateNewRecommendation,
  } = useRecommendations();
+  const { membershipType, features } = useMembership();
  const { unreadCount, refetchNotifications } = useNotifications();
  const [generating, setGenerating] = useState(false);
  const [refreshing, setRefreshing] = useState(false);
@@ -69,6 +71,17 @@ export default function RecommendationsScreen() {
  const handleGenerateRecommendation = async () => {
    if (!user?.id) return;

+    if (
+      features.recommendationsPerMonth === 1 &&
+      allRecommendations.length >= 1
+    ) {
+      Alert.alert(
+        "Basic Plan Limit",
+        "Basic plan includes 1 recommendation per month. Upgrade to Premium or VIP for unlimited recommendations.",
+      );
+      return;
+    }
+
    Alert.alert(
      "Generate AI Recommendation",
      "Generate a personalized fitness and nutrition plan based on your profile and goals?",
@@ -180,7 +193,11 @@ export default function RecommendationsScreen() {
        {/* Generate Button */}
        <View style={styles.section}>
          <MinimalButton
-            title="Generate New Plan"
+            title={
+              features.recommendationsPerMonth === 1
+                ? "Generate Monthly Plan"
+                : "Generate New Plan"
+            }
            onPress={handleGenerateRecommendation}
            variant="primary"
            size="lg"
@@ -189,6 +206,20 @@ export default function RecommendationsScreen() {
            disabled={generating}
            textStyle={{ fontSize: 16 }}
          />
+          <Text
+            style={[
+              typography.caption,
+              {
+                color: colors.textTertiary,
+                marginTop: 8,
+                textAlign: "center",
+              },
+            ]}
+          >
+            {membershipType === "basic"
+              ? `Basic plan: ${Math.max(0, 1 - allRecommendations.length)} recommendation left this month`
+              : `${membershipType.toUpperCase()} plan: unlimited recommendations`}
+          </Text>
        </View>

        {/* Recommendations List */}
@@ -4,12 +4,15 @@ 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 { QueryClientProvider } from "@tanstack/react-query";
 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";
 import { NotificationsProvider } from "../contexts/NotificationsContext";
+import { MembershipProvider } from "../contexts/MembershipContext";
+import { queryClient } from "../lib/query-client";
 import log from "../utils/logger";

 // Wrapper to use notification permissions hook after ClerkLoaded
@@ -172,21 +175,25 @@ export default function RootLayout() {

  return (
    <SafeAreaProvider>
-      <ClerkProvider tokenCache={tokenCache} publishableKey={publishableKey}>
-        <ClerkLoaded>
-          <ThemeProvider>
-            <NotificationsProvider>
-              <StatisticsProvider>
-                <FitnessGoalsProvider>
-                  <RecommendationsProvider>
-                    <AppContent />
-                  </RecommendationsProvider>
-                </FitnessGoalsProvider>
-              </StatisticsProvider>
-            </NotificationsProvider>
-          </ThemeProvider>
-        </ClerkLoaded>
-      </ClerkProvider>
+      <QueryClientProvider client={queryClient}>
+        <ClerkProvider tokenCache={tokenCache} publishableKey={publishableKey}>
+          <ClerkLoaded>
+            <ThemeProvider>
+              <NotificationsProvider>
+                <StatisticsProvider>
+                  <MembershipProvider>
+                    <FitnessGoalsProvider>
+                      <RecommendationsProvider>
+                        <AppContent />
+                      </RecommendationsProvider>
+                    </FitnessGoalsProvider>
+                  </MembershipProvider>
+                </StatisticsProvider>
+              </NotificationsProvider>
+            </ThemeProvider>
+          </ClerkLoaded>
+        </ClerkProvider>
+      </QueryClientProvider>
    </SafeAreaProvider>
  );
 }
@@ -1,269 +1,193 @@
-import React, { useState } from 'react';
+import React, { useState } from "react";
 import {
-    View,
-    Text,
-    StyleSheet,
-    ScrollView,
-    TouchableOpacity,
-    TextInput,
-    Alert,
-    Platform,
-} from 'react-native';
-import { useRouter, Stack } from 'expo-router';
-import { useUser } from '@clerk/clerk-expo';
-import { Ionicons } from '@expo/vector-icons';
-import { LinearGradient } from 'expo-linear-gradient';
-import { theme } from '../styles/theme';
+  View,
+  Text,
+  StyleSheet,
+  ScrollView,
+  TouchableOpacity,
+  Alert,
+  ActivityIndicator,
+} from "react-native";
+import { Stack, useRouter } from "expo-router";
+import { Ionicons } from "@expo/vector-icons";
+import { useUser } from "@clerk/clerk-expo";
+import { useTheme } from "../contexts/ThemeContext";
+import { MinimalCard } from "../components/MinimalCard";
+import { Input } from "../components/Input";
+import { MinimalButton } from "../components/MinimalButton";

 export default function PersonalDetailsScreen() {
-    const router = useRouter();
-    const { user } = useUser();
-    const [loading, setLoading] = useState(false);
+  const router = useRouter();
+  const { user } = useUser();
+  const { colors, typography } = useTheme();
+  const [loading, setLoading] = useState(false);

-    // Initialize with current user data
-    const [formData, setFormData] = useState({
-        firstName: user?.firstName || '',
-        lastName: user?.lastName || '',
-        email: user?.primaryEmailAddress?.emailAddress || '',
-        phone: user?.primaryPhoneNumber?.phoneNumber || '',
-    });
+  const [formData, setFormData] = useState({
+    firstName: user?.firstName || "",
+    lastName: user?.lastName || "",
+    email: user?.primaryEmailAddress?.emailAddress || "",
+    phone: user?.primaryPhoneNumber?.phoneNumber || "",
+  });

-    const handleSave = async () => {
-        setLoading(true);
-        try {
-            // Update user profile via Clerk
-            await user?.update({
-                firstName: formData.firstName,
-                lastName: formData.lastName,
-            });
+  const updateField = (field: "firstName" | "lastName", value: string) => {
+    setFormData((prev) => ({ ...prev, [field]: value }));
+  };

-            Alert.alert('Success', 'Personal details updated successfully', [
-                { text: 'OK', onPress: () => router.back() },
-            ]);
-        } catch (error) {
-            console.error('Error updating personal details:', error);
-            Alert.alert('Error', 'Failed to update personal details. Please try again.');
-        } finally {
-            setLoading(false);
-        }
-    };
+  const handleSave = async () => {
+    setLoading(true);
+    try {
+      await user?.update({
+        firstName: formData.firstName,
+        lastName: formData.lastName,
+      });

-    const updateField = (field: string, value: string) => {
-        setFormData(prev => ({ ...prev, [field]: value }));
-    };
+      Alert.alert("Success", "Personal details updated successfully", [
+        { text: "OK", onPress: () => router.back() },
+      ]);
+    } catch {
+      Alert.alert(
+        "Error",
+        "Failed to update personal details. Please try again.",
+      );
+    } finally {
+      setLoading(false);
+    }
+  };

-    return (
-        <>
-            <Stack.Screen options={{ headerShown: false }} />
-            <View style={styles.container}>
-                {/* Header */}
-                <LinearGradient
-                    colors={theme.gradients.primary}
-                    style={styles.header}
-                >
-                    <TouchableOpacity
-                        style={styles.backButton}
-                        onPress={() => router.back()}
-                    >
-                        <Ionicons name="arrow-back" size={24} color="#fff" />
-                    </TouchableOpacity>
-                    <Text style={styles.headerTitle}>Personal Details</Text>
-                    <View style={{ width: 40 }} />
-                </LinearGradient>
+  return (
+    <>
+      <Stack.Screen options={{ headerShown: false }} />
+      <View style={[styles.container, { backgroundColor: colors.background }]}>
+        <View
+          style={[styles.header, { borderBottomColor: colors.borderLight }]}
+        >
+          <TouchableOpacity
+            style={[
+              styles.backButton,
+              { backgroundColor: colors.surfaceElevated },
+            ]}
+            onPress={() => router.back()}
+            activeOpacity={0.8}
+          >
+            <Ionicons name="arrow-back" size={20} color={colors.textPrimary} />
+          </TouchableOpacity>
+          <Text style={[typography.h3, { color: colors.textPrimary }]}>
+            Personal Details
+          </Text>
+          <View style={styles.backButtonPlaceholder} />
+        </View>

-                <ScrollView
-                    style={styles.content}
-                    contentContainerStyle={styles.scrollContent}
-                    showsVerticalScrollIndicator={false}
-                >
-                    {/* First Name */}
-                    <View style={styles.field}>
-                        <Text style={styles.label}>First Name *</Text>
-                        <View style={styles.inputContainer}>
-                            <Ionicons name="person-outline" size={20} color={theme.colors.gray400} style={styles.inputIcon} />
-                            <TextInput
-                                style={styles.input}
-                                value={formData.firstName}
-                                onChangeText={(value) => updateField('firstName', value)}
-                                placeholder="Enter first name"
-                                placeholderTextColor={theme.colors.gray400}
-                            />
-                        </View>
-                    </View>
+        <ScrollView
+          style={styles.content}
+          contentContainerStyle={styles.scrollContent}
+          showsVerticalScrollIndicator={false}
+        >
+          <MinimalCard variant="elevated" style={styles.card}>
+            <Input
+              label="First Name"
+              value={formData.firstName}
+              onChangeText={(value) => updateField("firstName", value)}
+              placeholder="Enter first name"
+            />

-                    {/* Last Name */}
-                    <View style={styles.field}>
-                        <Text style={styles.label}>Last Name *</Text>
-                        <View style={styles.inputContainer}>
-                            <Ionicons name="person-outline" size={20} color={theme.colors.gray400} style={styles.inputIcon} />
-                            <TextInput
-                                style={styles.input}
-                                value={formData.lastName}
-                                onChangeText={(value) => updateField('lastName', value)}
-                                placeholder="Enter last name"
-                                placeholderTextColor={theme.colors.gray400}
-                            />
-                        </View>
-                    </View>
+            <Input
+              label="Last Name"
+              value={formData.lastName}
+              onChangeText={(value) => updateField("lastName", value)}
+              placeholder="Enter last name"
+            />

-                    {/* Email (Read-only) */}
-                    <View style={styles.field}>
-                        <Text style={styles.label}>Email</Text>
-                        <View style={[styles.inputContainer, styles.disabledInput]}>
-                            <Ionicons name="mail-outline" size={20} color={theme.colors.gray400} style={styles.inputIcon} />
-                            <TextInput
-                                style={[styles.input, styles.disabledText]}
-                                value={formData.email}
-                                editable={false}
-                                placeholderTextColor={theme.colors.gray400}
-                            />
-                            <Ionicons name="lock-closed-outline" size={16} color={theme.colors.gray400} />
-                        </View>
-                        <Text style={styles.helperText}>Email cannot be changed here</Text>
-                    </View>
-
-                    {/* Phone (Read-only for now) */}
-                    <View style={styles.field}>
-                        <Text style={styles.label}>Phone Number</Text>
-                        <View style={[styles.inputContainer, styles.disabledInput]}>
-                            <Ionicons name="call-outline" size={20} color={theme.colors.gray400} style={styles.inputIcon} />
-                            <TextInput
-                                style={[styles.input, styles.disabledText]}
-                                value={formData.phone || 'Not set'}
-                                editable={false}
-                                placeholderTextColor={theme.colors.gray400}
-                            />
-                            <Ionicons name="lock-closed-outline" size={16} color={theme.colors.gray400} />
-                        </View>
-                        <Text style={styles.helperText}>Phone number cannot be changed here</Text>
-                    </View>
-                </ScrollView>
-
-                {/* Save Button */}
-                <View style={styles.footer}>
-                    <TouchableOpacity
-                        style={[styles.saveButton, loading && styles.saveButtonDisabled]}
-                        onPress={handleSave}
-                        disabled={loading}
-                    >
-                        <LinearGradient
-                            colors={theme.gradients.primary}
-                            style={styles.saveButtonGradient}
-                        >
-                            <Ionicons name="checkmark-circle" size={20} color="#fff" />
-                            <Text style={styles.saveButtonText}>
-                                {loading ? 'Saving...' : 'Save Changes'}
-                            </Text>
-                        </LinearGradient>
-                    </TouchableOpacity>
-                </View>
+            <View style={styles.readOnlyField}>
+              <Text style={[typography.h4, { color: colors.textPrimary }]}>
+                Email
+              </Text>
+              <Text style={[typography.body, { color: colors.textSecondary }]}>
+                {formData.email || "Not set"}
+              </Text>
+              <Text
+                style={[typography.caption, { color: colors.textTertiary }]}
+              >
+                Read-only in app settings
+              </Text>
            </View>
-        </>
-    );
+
+            <View style={styles.readOnlyField}>
+              <Text style={[typography.h4, { color: colors.textPrimary }]}>
+                Phone Number
+              </Text>
+              <Text style={[typography.body, { color: colors.textSecondary }]}>
+                {formData.phone || "Not set"}
+              </Text>
+              <Text
+                style={[typography.caption, { color: colors.textTertiary }]}
+              >
+                Read-only in app settings
+              </Text>
+            </View>
+          </MinimalCard>
+
+          <MinimalButton
+            title="Save Changes"
+            onPress={handleSave}
+            loading={loading}
+            disabled={loading}
+            fullWidth
+            size="lg"
+            style={{ marginTop: 16 }}
+          />
+
+          {loading ? (
+            <View style={styles.loadingRow}>
+              <ActivityIndicator size="small" color={colors.primary} />
+            </View>
+          ) : null}
+        </ScrollView>
+      </View>
+    </>
+  );
 }

 const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        backgroundColor: theme.colors.background,
-    },
-    header: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        paddingTop: Platform.OS === 'ios' ? 60 : 40,
-        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',
-    },
-    content: {
-        flex: 1,
-    },
-    scrollContent: {
-        padding: 20,
-        paddingBottom: 100,
-    },
-    field: {
-        marginBottom: 24,
-    },
-    label: {
-        fontSize: theme.typography.fontSize.sm,
-        fontWeight: theme.typography.fontWeight.semibold,
-        color: theme.colors.gray700,
-        marginBottom: 8,
-    },
-    inputContainer: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        backgroundColor: '#fff',
-        borderRadius: theme.borderRadius.lg,
-        borderWidth: 1,
-        borderColor: theme.colors.gray200,
-        paddingHorizontal: 16,
-        ...theme.shadows.subtle,
-    },
-    inputIcon: {
-        marginRight: 12,
-    },
-    input: {
-        flex: 1,
-        paddingVertical: 16,
-        fontSize: theme.typography.fontSize.base,
-        color: theme.colors.gray900,
-    },
-    disabledInput: {
-        backgroundColor: theme.colors.gray50,
-    },
-    disabledText: {
-        color: theme.colors.gray500,
-    },
-    helperText: {
-        fontSize: theme.typography.fontSize.xs,
-        color: theme.colors.gray500,
-        marginTop: 6,
-        marginLeft: 4,
-    },
-    footer: {
-        position: 'absolute',
-        bottom: 0,
-        left: 0,
-        right: 0,
-        padding: 20,
-        paddingBottom: Platform.OS === 'ios' ? 40 : 20,
-        backgroundColor: '#fff',
-        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',
-    },
+  container: {
+    flex: 1,
+  },
+  header: {
+    paddingTop: 56,
+    paddingBottom: 12,
+    paddingHorizontal: 20,
+    borderBottomWidth: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+  },
+  backButton: {
+    width: 36,
+    height: 36,
+    borderRadius: 10,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  backButtonPlaceholder: {
+    width: 36,
+    height: 36,
+  },
+  content: {
+    flex: 1,
+  },
+  scrollContent: {
+    padding: 20,
+    paddingBottom: 80,
+  },
+  card: {
+    borderRadius: 16,
+  },
+  readOnlyField: {
+    marginTop: 8,
+    marginBottom: 12,
+    gap: 4,
+  },
+  loadingRow: {
+    marginTop: 16,
+    alignItems: "center",
+  },
 });
@@ -1,5 +1,12 @@
 import React from "react";
-import { View, Text, TextInput, StyleSheet, TextInputProps } from "react-native";
+import {
+  View,
+  Text,
+  TextInput,
+  StyleSheet,
+  TextInputProps,
+} from "react-native";
+import { useTheme } from "../contexts/ThemeContext";

 interface InputProps extends TextInputProps {
  label: string;
@@ -7,15 +14,39 @@ interface InputProps extends TextInputProps {
 }

 export function Input({ label, error, style, ...props }: InputProps) {
+  const { colors, typography } = useTheme();
+
  return (
    <View style={styles.container}>
-      <Text style={styles.label}>{label}</Text>
+      <Text
+        style={[typography.h4, { color: colors.textPrimary }, styles.label]}
+      >
+        {label}
+      </Text>
      <TextInput
-        style={[styles.input, error && styles.inputError, style]}
-        placeholderTextColor="#9ca3af"
+        style={[
+          styles.input,
+          {
+            backgroundColor: colors.surface,
+            borderColor: error ? colors.danger : colors.border,
+            color: colors.textPrimary,
+          },
+          style,
+        ]}
+        placeholderTextColor={colors.textTertiary}
        {...props}
      />
-      {error && <Text style={styles.errorText}>{error}</Text>}
+      {error && (
+        <Text
+          style={[
+            typography.caption,
+            styles.errorText,
+            { color: colors.danger },
+          ]}
+        >
+          {error}
+        </Text>
+      )}
    </View>
  );
 }
@@ -25,27 +56,16 @@ const styles = StyleSheet.create({
    marginBottom: 16,
  },
  label: {
-    fontSize: 14,
-    fontWeight: "600",
-    color: "#374151",
    marginBottom: 8,
  },
  input: {
-    backgroundColor: "white",
    borderWidth: 1,
-    borderColor: "#e5e7eb",
-    borderRadius: 8,
+    borderRadius: 12,
    paddingHorizontal: 16,
-    paddingVertical: 12,
+    paddingVertical: 14,
    fontSize: 16,
-    color: "#1f2937",
-  },
-  inputError: {
-    borderColor: "#ef4444",
  },
  errorText: {
-    fontSize: 12,
-    color: "#ef4444",
    marginTop: 4,
  },
 });
@@ -1,6 +1,7 @@
 import React from "react";
 import { View, Text, StyleSheet } from "react-native";
 import { Picker as RNPicker } from "@react-native-picker/picker";
+import { useTheme } from "../contexts/ThemeContext";

 interface PickerProps {
  label: string;
@@ -10,23 +11,57 @@ interface PickerProps {
  error?: string;
 }

-export function Picker({ label, value, onValueChange, items, error }: PickerProps) {
+export function Picker({
+  label,
+  value,
+  onValueChange,
+  items,
+  error,
+}: PickerProps) {
+  const { colors, typography } = useTheme();
+
  return (
    <View style={styles.container}>
-      <Text style={styles.label}>{label}</Text>
-      <View style={[styles.pickerWrapper, error && styles.pickerError]}>
+      <Text
+        style={[typography.h4, { color: colors.textPrimary }, styles.label]}
+      >
+        {label}
+      </Text>
+      <View
+        style={[
+          styles.pickerWrapper,
+          {
+            backgroundColor: colors.surface,
+            borderColor: error ? colors.danger : colors.border,
+          },
+        ]}
+      >
        <RNPicker
          selectedValue={value}
          onValueChange={onValueChange}
-          style={styles.picker}
+          style={[styles.picker, { color: colors.textPrimary }]}
        >
          <RNPicker.Item label="Select..." value="" />
          {items.map((item) => (
-            <RNPicker.Item key={item.value} label={item.label} value={item.value} />
+            <RNPicker.Item
+              key={item.value}
+              label={item.label}
+              value={item.value}
+            />
          ))}
        </RNPicker>
      </View>
-      {error && <Text style={styles.errorText}>{error}</Text>}
+      {error && (
+        <Text
+          style={[
+            typography.caption,
+            styles.errorText,
+            { color: colors.danger },
+          ]}
+        >
+          {error}
+        </Text>
+      )}
    </View>
  );
 }
@@ -36,27 +71,17 @@ const styles = StyleSheet.create({
    marginBottom: 16,
  },
  label: {
-    fontSize: 14,
-    fontWeight: "600",
-    color: "#374151",
    marginBottom: 8,
  },
  pickerWrapper: {
-    backgroundColor: "white",
    borderWidth: 1,
-    borderColor: "#e5e7eb",
-    borderRadius: 8,
+    borderRadius: 12,
    overflow: "hidden",
  },
-  pickerError: {
-    borderColor: "#ef4444",
-  },
  picker: {
    height: 50,
  },
  errorText: {
-    fontSize: 12,
-    color: "#ef4444",
    marginTop: 4,
  },
 });
@@ -44,6 +44,12 @@ export const API_ENDPOINTS = {
    HISTORY: "/api/attendance/history",
  },
  RECOMMENDATIONS: "/api/recommendations",
+  MEMBERSHIP: {
+    FEATURES: "/api/membership/features",
+  },
+  FOOD: {
+    LOOKUP_BARCODE: (code: string) => `/api/food/barcode/${code}`,
+  },
  NUTRITION: {
    BASE: "/api/nutrition",
    MEALS: "/api/nutrition/meals",
@@ -3,6 +3,7 @@ import React, {
  useContext,
  useState,
  useCallback,
+  useEffect,
  useRef,
 } from "react";
 import { useUser, useAuth } from "@clerk/clerk-expo";
@@ -168,12 +169,22 @@ export function FitnessGoalsProvider({

  const clearCache = useCallback(() => {
    setGoals([]);
+    setLoading(false);
    setLastFetchTime(0);
    setError(null);
    fetchInProgress.current = false;
    log.debug("Fitness goals cache cleared");
  }, []);

+  useEffect(() => {
+    clearCache();
+    if (user?.id) {
+      log.debug("Fitness goals cache reset for user", { userId: user.id });
+    } else {
+      log.debug("Fitness goals cache reset on sign-out");
+    }
+  }, [user?.id, clearCache]);
+
  return (
    <FitnessGoalsContext.Provider
      value={{
@@ -74,6 +74,18 @@ export function HydrationProvider({ children }: { children: React.ReactNode }) {
    fetchTodayHydration();
  }, [fetchTodayHydration]);

+  useEffect(() => {
+    setHydration(null);
+    setError(null);
+    setLoading(false);
+    setWaterGoal(2000);
+    if (user?.id) {
+      log.debug("Hydration state reset for user", { userId: user.id });
+    } else {
+      log.debug("Hydration state reset on sign-out");
+    }
+  }, [user?.id]);
+
  const addWater = useCallback(
    async (amount: number) => {
      if (!user?.id) return;
@@ -0,0 +1,96 @@
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+  type ReactNode,
+} from "react";
+import { useAuth, useUser } from "@clerk/clerk-expo";
+import {
+  getCurrentMembershipFeaturesFromServer,
+  type MembershipFeatures,
+  type MembershipType,
+} from "../api/membership";
+import log from "../utils/logger";
+
+const BASIC_FEATURES: MembershipFeatures = {
+  recommendationsPerMonth: 1,
+  hydrationTracking: false,
+  nutritionTracking: false,
+  advancedStatistics: false,
+};
+
+interface MembershipContextValue {
+  membershipType: MembershipType;
+  features: MembershipFeatures;
+  loading: boolean;
+  refreshMembership: () => Promise<void>;
+}
+
+const MembershipContext = createContext<MembershipContextValue | undefined>(
+  undefined,
+);
+
+export function MembershipProvider({ children }: { children: ReactNode }) {
+  const { user } = useUser();
+  const { getToken, isSignedIn } = useAuth();
+  const [membershipType, setMembershipType] = useState<MembershipType>("basic");
+  const [features, setFeatures] = useState<MembershipFeatures>(BASIC_FEATURES);
+  const [loading, setLoading] = useState(true);
+
+  const loadMembership = useCallback(async () => {
+    if (!isSignedIn || !user?.id) {
+      setMembershipType("basic");
+      setFeatures(BASIC_FEATURES);
+      setLoading(false);
+      return;
+    }
+
+    try {
+      setLoading(true);
+      const token = await getToken();
+      const result = await getCurrentMembershipFeaturesFromServer(token);
+      setMembershipType(result.membershipType);
+      setFeatures(result.features);
+    } catch (error) {
+      log.error("Failed to load membership", error, { userId: user.id });
+      setMembershipType("basic");
+      setFeatures(BASIC_FEATURES);
+    } finally {
+      setLoading(false);
+    }
+  }, [isSignedIn, user?.id]);
+
+  useEffect(() => {
+    loadMembership();
+  }, [loadMembership]);
+
+  const value = useMemo(
+    () => ({
+      membershipType,
+      features,
+      loading,
+      refreshMembership: loadMembership,
+    }),
+    [membershipType, features, loading, loadMembership],
+  );
+
+  return (
+    <MembershipContext.Provider value={value}>
+      {children}
+    </MembershipContext.Provider>
+  );
+}
+
+export function useMembershipContext(): MembershipContextValue {
+  const context = useContext(MembershipContext);
+  if (!context) {
+    throw new Error(
+      "useMembershipContext must be used within MembershipProvider",
+    );
+  }
+
+  return context;
+}
@@ -6,7 +6,7 @@ import React, {
  useCallback,
  useRef,
 } from "react";
-import { useAuth } from "@clerk/clerk-expo";
+import { useAuth, useUser } from "@clerk/clerk-expo";
 import {
  fetchNotifications,
  fetchUnreadCount,
@@ -37,6 +37,7 @@ export function NotificationsProvider({
  children: React.ReactNode;
 }) {
  const { getToken, isSignedIn } = useAuth();
+  const { user } = useUser();
  const [notifications, setNotifications] = useState<Notification[]>([]);
  const [unreadCount, setUnreadCount] = useState(0);
  const [loading, setLoading] = useState(false);
@@ -160,6 +161,19 @@ export function NotificationsProvider({
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [isSignedIn]); // Only run when sign-in state changes

+  useEffect(() => {
+    setNotifications([]);
+    setUnreadCount(0);
+    setLoading(false);
+    fetchInProgressRef.current = false;
+    lastFetchTimeRef.current = 0;
+    if (user?.id) {
+      log.debug("Notifications state reset for user", { userId: user.id });
+    } else {
+      log.debug("Notifications state reset on sign-out");
+    }
+  }, [user?.id]);
+
  // Periodic refresh every 30 seconds
  useEffect(() => {
    if (!isSignedIn) return;
@@ -88,6 +88,19 @@ export function NutritionProvider({ children }: { children: React.ReactNode }) {
    fetchTodayNutrition();
  }, [fetchTodayNutrition]);

+  useEffect(() => {
+    setNutrition(null);
+    setMeals([]);
+    setError(null);
+    setLoading(false);
+    setCalorieGoal(2000);
+    if (user?.id) {
+      log.debug("Nutrition state reset for user", { userId: user.id });
+    } else {
+      log.debug("Nutrition state reset on sign-out");
+    }
+  }, [user?.id]);
+
  const addMeal = useCallback(
    async (data: Omit<MealEntry, "id" | "createdAt" | "dailyNutritionId">) => {
      if (!user?.id) return;
@@ -3,6 +3,7 @@ import React, {
  useContext,
  useState,
  useCallback,
+  useEffect,
  useRef,
 } from "react";
 import { useUser, useAuth } from "@clerk/clerk-expo";
@@ -108,12 +109,22 @@ export function RecommendationsProvider({

  const clearCache = useCallback(() => {
    setRecommendations([]);
+    setLoading(false);
    setLastFetchTime(0);
    setError(null);
    fetchInProgress.current = false;
    log.debug("Recommendations cache cleared");
  }, []);

+  useEffect(() => {
+    clearCache();
+    if (user?.id) {
+      log.debug("Recommendations cache reset for user", { userId: user.id });
+    } else {
+      log.debug("Recommendations cache reset on sign-out");
+    }
+  }, [user?.id, clearCache]);
+
  return (
    <RecommendationsContext.Provider
      value={{
@@ -1,4 +1,10 @@
-import React, { createContext, useContext, useState, useCallback } from "react";
+import React, {
+  createContext,
+  useContext,
+  useState,
+  useCallback,
+  useEffect,
+} from "react";
 import { useUser, useAuth } from "@clerk/clerk-expo";
 import { getUserStatistics } from "../api/statistics";
 import type { UserStatisticsResponse } from "../api/types";
@@ -75,11 +81,21 @@ export function StatisticsProvider({

  const clearCache = useCallback(() => {
    setStatistics(null);
+    setLoading(false);
    setLastFetchTime(0);
    setError(null);
    log.debug("Statistics cache cleared");
  }, []);

+  useEffect(() => {
+    clearCache();
+    if (user?.id) {
+      log.debug("Statistics cache reset for user", { userId: user.id });
+    } else {
+      log.debug("Statistics cache reset on sign-out");
+    }
+  }, [user?.id, clearCache]);
+
  const forceRefresh = useCallback(async () => {
    if (!user?.id) return;

@@ -0,0 +1,5 @@
+import { useMembershipContext } from "../contexts/MembershipContext";
+
+export function useMembership() {
+  return useMembershipContext();
+}
@@ -0,0 +1,18 @@
+import { QueryClient } from "@tanstack/react-query";
+
+export const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 30000,
+      gcTime: 5 * 60 * 1000,
+      retry: 1,
+      refetchOnWindowFocus: false,
+      refetchOnReconnect: true,
+    },
+  },
+});
+
+export const userScopedKey = (
+  resource: string,
+  userId: string,
+): [string, string] => [resource, userId];
@@ -1,4 +1,6 @@
-import { API_BASE_URL, API_ENDPOINTS } from "../config/api";
+import { isAxiosError } from "axios";
+import { apiClient, withAuth } from "../api/client";
+import { API_ENDPOINTS } from "../config/api";
 import log from "../utils/logger";

 export interface FitnessGoal {
@@ -41,38 +43,21 @@ export interface CreateGoalData {
 }

 export class FitnessGoalsService {
-  private async getAuthHeaders(token: string | null): Promise<any> {
-    const headers: any = {
-      "Content-Type": "application/json",
-    };
-
-    if (token) {
-      headers["Authorization"] = `Bearer ${token}`;
-    }
-
-    return headers;
-  }
-
  async getGoals(
    userId: string,
    token: string | null,
    status?: string,
  ): Promise<FitnessGoal[]> {
    try {
-      const headers = await this.getAuthHeaders(token);
-      let url = `${API_BASE_URL}${API_ENDPOINTS.FITNESS_GOALS.LIST}?userId=${userId}`;
+      const response = await apiClient.get(API_ENDPOINTS.FITNESS_GOALS.LIST, {
+        params: {
+          userId,
+          ...(status && status !== "all" ? { status } : {}),
+        },
+        ...withAuth(token),
+      });

-      if (status && status !== "all") {
-        url += `&status=${status}`;
-      }
-
-      const response = await fetch(url, { headers });
-
-      if (!response.ok) {
-        throw new Error(`Failed to fetch goals: ${response.status}`);
-      }
-
-      const result = await response.json();
+      const result = response.data;

      // Handle standardized API response format
      // API returns: { success: true, data: [...], meta: {...} }
@@ -83,6 +68,9 @@ export class FitnessGoalsService {
      // Fallback for legacy format (direct array)
      return Array.isArray(result) ? result : [];
    } catch (error) {
+      if (isAxiosError(error) && error.response) {
+        throw new Error(`Failed to fetch goals: ${error.response.status}`);
+      }
      log.error("Failed to fetch fitness goals", error);
      throw error;
    }
@@ -93,22 +81,13 @@ export class FitnessGoalsService {
    token: string | null,
  ): Promise<FitnessGoal> {
    try {
-      const headers = await this.getAuthHeaders(token);
-      const response = await fetch(
-        `${API_BASE_URL}${API_ENDPOINTS.FITNESS_GOALS.CREATE}`,
-        {
-          method: "POST",
-          headers,
-          body: JSON.stringify(goalData),
-        },
+      const response = await apiClient.post(
+        API_ENDPOINTS.FITNESS_GOALS.CREATE,
+        goalData,
+        withAuth(token),
      );

-      if (!response.ok) {
-        const error = await response.json();
-        throw new Error(error.error || "Failed to create goal");
-      }
-
-      const result = await response.json();
+      const result = response.data;

      // Handle standardized API response format
      if (result.success && result.data) {
@@ -118,6 +97,14 @@ export class FitnessGoalsService {
      // Fallback for legacy format
      return result;
    } catch (error) {
+      if (isAxiosError(error)) {
+        const message =
+          (error.response?.data as { error?: string } | undefined)?.error ||
+          (error.response
+            ? `Failed to create goal: ${error.response.status}`
+            : "Failed to create goal");
+        throw new Error(message);
+      }
      log.error("Failed to create fitness goal", error);
      throw error;
    }
@@ -129,21 +116,13 @@ export class FitnessGoalsService {
    token: string | null,
  ): Promise<FitnessGoal> {
    try {
-      const headers = await this.getAuthHeaders(token);
-      const response = await fetch(
-        `${API_BASE_URL}${API_ENDPOINTS.FITNESS_GOALS.UPDATE(id)}`,
-        {
-          method: "PUT",
-          headers,
-          body: JSON.stringify(updates),
-        },
+      const response = await apiClient.put(
+        API_ENDPOINTS.FITNESS_GOALS.UPDATE(id),
+        updates,
+        withAuth(token),
      );

-      if (!response.ok) {
-        throw new Error("Failed to update goal");
-      }
-
-      const result = await response.json();
+      const result = response.data;

      // Handle standardized API response format
      if (result.success && result.data) {
@@ -153,6 +132,9 @@ export class FitnessGoalsService {
      // Fallback for legacy format
      return result;
    } catch (error) {
+      if (isAxiosError(error) && error.response) {
+        throw new Error(`Failed to update goal: ${error.response.status}`);
+      }
      log.error("Failed to update fitness goal", error);
      throw error;
    }
@@ -168,20 +150,13 @@ export class FitnessGoalsService {

  async completeGoal(id: string, token: string | null): Promise<FitnessGoal> {
    try {
-      const headers = await this.getAuthHeaders(token);
-      const response = await fetch(
-        `${API_BASE_URL}${API_ENDPOINTS.FITNESS_GOALS.COMPLETE(id)}`,
-        {
-          method: "POST",
-          headers,
-        },
+      const response = await apiClient.post(
+        API_ENDPOINTS.FITNESS_GOALS.COMPLETE(id),
+        {},
+        withAuth(token),
      );

-      if (!response.ok) {
-        throw new Error("Failed to complete goal");
-      }
-
-      const result = await response.json();
+      const result = response.data;

      // Note: Complete endpoint returns direct object (legacy format)
      // Handle standardized API response format (if migrated)
@@ -192,6 +167,9 @@ export class FitnessGoalsService {
      // Fallback for legacy format (current implementation)
      return result;
    } catch (error) {
+      if (isAxiosError(error) && error.response) {
+        throw new Error(`Failed to complete goal: ${error.response.status}`);
+      }
      log.error("Failed to complete fitness goal", error);
      throw error;
    }
@@ -199,22 +177,17 @@ export class FitnessGoalsService {

  async deleteGoal(id: string, token: string | null): Promise<void> {
    try {
-      const headers = await this.getAuthHeaders(token);
-      const response = await fetch(
-        `${API_BASE_URL}${API_ENDPOINTS.FITNESS_GOALS.DELETE(id)}`,
-        {
-          method: "DELETE",
-          headers,
-        },
+      await apiClient.delete(
+        API_ENDPOINTS.FITNESS_GOALS.DELETE(id),
+        withAuth(token),
      );

-      if (!response.ok) {
-        throw new Error("Failed to delete goal");
-      }
-
      // DELETE endpoint returns: { success: true, data: { deleted: true }, meta: {...} }
      // No need to parse the result for void return type
    } catch (error) {
+      if (isAxiosError(error) && error.response) {
+        throw new Error(`Failed to delete goal: ${error.response.status}`);
+      }
      log.error("Failed to delete fitness goal", error);
      throw error;
    }
@@ -0,0 +1,68 @@
+# Release Hardening Checklist
+
+This checklist is the final validation gate before shipping security and mobile API changes.
+
+## 1) Pre-Release Validation
+
+- [ ] Confirm target branch is up to date with `master`
+- [ ] Verify no unintended files are staged (`git status --short`)
+- [ ] Confirm release notes summarize risky changes (authz, API contracts, caching)
+
+## 2) Automated Checks
+
+Run from repository root:
+
+```bash
+npm run typecheck:admin
+npm run typecheck:mobile
+npm run test:admin
+```
+
+Run mobile API-focused tests:
+
+```bash
+cd apps/mobile
+npm run test -- src/api/__tests__/gyms.test.ts src/api/__tests__/recommendations.test.ts src/api/__tests__/notifications.test.ts
+```
+
+## 3) Admin Security Spot Checks
+
+- [ ] Verify non-admin receives `403` on privileged routes
+- [ ] Verify unauthenticated requests receive `401`
+- [ ] Verify cross-gym actions are denied for non-superAdmin
+- [ ] Verify `DELETE /api/users` blocks self-delete for admin users
+- [ ] Verify recommendation approval derives approver from auth context (not request body)
+
+## 4) Mobile Functional Smoke Checks
+
+- [ ] Sign in as User A and load tabs/profile data
+- [ ] Sign out and sign in as User B
+- [ ] Confirm no User A data remains in goals, hydration, nutrition, stats, recommendations, notifications
+- [ ] Confirm onboarding gym selection and profile save flow still succeed
+- [ ] Confirm notifications load and unread count updates after read/delete actions
+
+## 5) Rollback Plan
+
+If release incidents occur:
+
+1. Revert the release commit(s) from newest to oldest.
+2. Redeploy reverted build.
+3. Validate authentication and onboarding flows.
+4. Post incident note with root cause and follow-up action.
+
+Suggested rollback command pattern:
+
+```bash
+git revert <latest_commit_sha>
+git revert <previous_commit_sha>
+```
+
+## 6) Deployment Record
+
+Capture this in PR/release notes:
+
+- Release date/time:
+- Release owner:
+- Commits included:
+- Validation commands run:
+- Known caveats (if any):
@@ -18,6 +18,35 @@ export type GymStatus = (typeof GYM_STATUSES)[number];
 export const MEMBERSHIP_TYPES = ["basic", "premium", "vip"] as const;
 export type MembershipType = (typeof MEMBERSHIP_TYPES)[number];

+export const MEMBERSHIP_FEATURES = {
+  basic: {
+    recommendationsPerMonth: 1,
+    hydrationTracking: false,
+    nutritionTracking: false,
+    advancedStatistics: false,
+  },
+  premium: {
+    recommendationsPerMonth: -1,
+    hydrationTracking: true,
+    nutritionTracking: true,
+    advancedStatistics: true,
+  },
+  vip: {
+    recommendationsPerMonth: -1,
+    hydrationTracking: true,
+    nutritionTracking: true,
+    advancedStatistics: true,
+  },
+} as const;
+
+export type MembershipFeatures = (typeof MEMBERSHIP_FEATURES)[MembershipType];
+
+export function getMembershipFeatures(
+  membershipType: MembershipType,
+): MembershipFeatures {
+  return MEMBERSHIP_FEATURES[membershipType];
+}
+
 // Membership Statuses
 export const MEMBERSHIP_STATUSES = ["active", "inactive", "suspended"] as const;
 export type MembershipStatus = (typeof MEMBERSHIP_STATUSES)[number];
@@ -0,0 +1,2 @@
+lets define membership plans, for now we dont use payment method.
+we will have 3 tiers: basic, premium and vip
Author	SHA1	Message	Date
dimitar	21afb085e3	scan food	2026-03-31 16:55:55 +02:00
dimitar	ca64a100b6	integrate barcode scan with openfoodfacts and meal type selection	2026-03-31 16:36:18 +02:00
dimitar	3c3dfb6cd6	hydration calories persistance	2026-03-31 16:17:08 +02:00
dimitar	871f33bf5a	dfg	2026-03-31 15:57:23 +02:00
dimitar	c5dde63355	dbs	2026-03-31 13:48:39 +02:00
dimitar	cd13333b52	stabilize membership loading and home motivational message	2026-03-30 20:24:13 +02:00
dimitar	a620921202	Merge branch 'uifix'	2026-03-29 20:08:39 +02:00
dimitar	ed14c57749	normalize mobile auth and profile ui to theme components	2026-03-29 20:07:33 +02:00
dimitar	7ada05da6a	db up	2026-03-29 19:54:17 +02:00
dimitar	50ece15089	add membership features endpoint and use it in mobile	2026-03-29 19:51:36 +02:00
dimitar	091cb5ba85	Merge branch 'planDef'	2026-03-29 16:26:38 +02:00
dimitar	ebfd633a11	enforce membership feature access in api and surface plans in admin	2026-03-29 16:22:45 +02:00
dimitar	1f4800c055	membership	2026-03-29 16:05:10 +02:00
dimitar	0ddac10c59	Merge branch 'phase-9-release-hardening'	2026-03-29 15:54:11 +02:00
dimitar	573690ab02	Merge branch 'phase-8-api-contract-tightening'	2026-03-29 15:54:00 +02:00
dimitar	efbfa58c10	Merge branch 'phase-7-query-cache-consolidation'	2026-03-29 15:53:47 +02:00
dimitar	7ad1e5133e	Merge branch 'phase-6-coverage-expansion'	2026-03-29 15:53:27 +02:00
dimitar	9c3d3f5b72	add release hardening checklist for admin and mobile	2026-03-29 15:49:47 +02:00
dimitar	ff9f3d582a	standardize mobile api response parsing with shared helper	2026-03-29 15:48:58 +02:00
dimitar	60d7a7963d	initialize react-query provider for mobile app	2026-03-29 15:46:59 +02:00
dimitar	0eede3fa91	add mobile notifications api unit tests	2026-03-29 15:46:16 +02:00
dimitar	b1f84722af	Merge branch 'nextPhase'	2026-03-29 15:41:09 +02:00
dimitar	34e88bdde5	reset mobile context caches on user identity changes	2026-03-29 15:38:51 +02:00
dimitar	aa662a9b74	add mobile api unit tests for gyms and recommendations	2026-03-29 15:34:43 +02:00
dimitar	80110acbf7	standardize mobile api transport for gyms and core services	2026-03-29 15:31:06 +02:00
dimitar	c36cad9c54	Merge branch 'testRep'	2026-03-29 11:27:14 +02:00