remove attendance tab and screen from mobile navigation

apps/admin/src/app/api/food/barcode/[code]/route.ts

@@ -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 },
+    );
+  }
+}

apps/admin/src/app/api/membership/features/route.ts

@@ -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 },
+    );
+  }
+}

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

@@ -4,6 +4,101 @@ import { getDatabase } from "@/lib/database";
 import log from "@/lib/logger";
 import { ensureUserSynced } from "@/lib/sync-user";
 
+const AI_LINK_PREFIX = "[AI_LINKED]";
+
+type GoalType =
+  | "weight_target"
+  | "strength_milestone"
+  | "endurance_target"
+  | "flexibility_goal"
+  | "habit_building"
+  | "custom";
+
+interface ParsedPlanItem {
+  id: string;
+  title: string;
+  description: string;
+  goalType: GoalType;
+}
+
+function inferGoalType(text: string): GoalType {
+  const normalized = text.toLowerCase();
+
+  if (
+    normalized.includes("strength") ||
+    normalized.includes("bench") ||
+    normalized.includes("squat") ||
+    normalized.includes("deadlift") ||
+    normalized.includes("weights")
+  ) {
+    return "strength_milestone";
+  }
+
+  if (
+    normalized.includes("run") ||
+    normalized.includes("cardio") ||
+    normalized.includes("endurance") ||
+    normalized.includes("cycle")
+  ) {
+    return "endurance_target";
+  }
+
+  if (
+    normalized.includes("stretch") ||
+    normalized.includes("mobility") ||
+    normalized.includes("yoga") ||
+    normalized.includes("flexibility")
+  ) {
+    return "flexibility_goal";
+  }
+
+  if (
+    normalized.includes("daily") ||
+    normalized.includes("routine") ||
+    normalized.includes("habit")
+  ) {
+    return "habit_building";
+  }
+
+  return "custom";
+}
+
+function parseActivityPlanToItems(activityPlan: string): ParsedPlanItem[] {
+  const lines = activityPlan
+    .replace(/\r\n/g, "\n")
+    .split(/\n+/)
+    .flatMap((line) => line.split(/(?<=[.!?])\s+(?=[A-Z0-9])/g))
+    .map((line) => line.trim())
+    .filter(Boolean)
+    .map((line) => line.replace(/^[-*•\d.)\s]+/, "").trim())
+    .filter((line) => line.length > 10)
+    .slice(0, 8);
+
+  const uniqueLines = Array.from(new Set(lines));
+
+  return uniqueLines.map((line) => ({
+    id: crypto.randomUUID(),
+    title: line.length > 72 ? `${line.slice(0, 69)}...` : line,
+    description: line,
+    goalType: inferGoalType(line),
+  }));
+}
+
+function getDefaultPlanItems(): ParsedPlanItem[] {
+  const defaults = [
+    "Complete 3 strength sessions this week with progressive overload.",
+    "Add 2 cardio sessions of 25-30 minutes for endurance.",
+    "Do a 10-minute mobility routine daily after training.",
+  ];
+
+  return defaults.map((line) => ({
+    id: crypto.randomUUID(),
+    title: line.length > 72 ? `${line.slice(0, 69)}...` : line,
+    description: line,
+    goalType: inferGoalType(line),
+  }));
+}
+
 export async function POST(req: Request) {
   try {
     const { userId: clerkUserId } = await auth();
@@ -94,8 +189,103 @@ export async function POST(req: Request) {
       );
     }
 
-    // If approved, create a notification for the user
+    let pausedGoalsCount = 0;
+    let createdGoalsCount = 0;
+
+    // If approved, regenerate linked AI goals and create a notification for the user
     if (status === "approved") {
+      try {
+        const existingActiveGoals = await db.getFitnessGoalsByUserId(
+          updatedRecommendation.userId,
+          "active",
+        );
+
+        const linkedGoals = existingActiveGoals.filter((goal) =>
+          goal.notes?.startsWith(AI_LINK_PREFIX),
+        );
+
+        pausedGoalsCount = linkedGoals.length;
+
+        await Promise.all(
+          linkedGoals.map((goal) =>
+            db.updateFitnessGoal(goal.id, {
+              status: "paused",
+              notes: `${goal.notes || ""}\nPaused due to recommendation approval on ${new Date().toISOString()}`,
+            }),
+          ),
+        );
+
+        let planItems = parseActivityPlanToItems(
+          updatedRecommendation.activityPlan || "",
+        );
+
+        if (
+          planItems.length === 0 &&
+          updatedRecommendation.recommendationText
+        ) {
+          planItems = parseActivityPlanToItems(
+            updatedRecommendation.recommendationText,
+          );
+        }
+
+        if (planItems.length === 0) {
+          planItems = getDefaultPlanItems();
+        }
+
+        const fitnessProfileId =
+          updatedRecommendation.fitnessProfileId ||
+          (await db.getFitnessProfileByUserId(updatedRecommendation.userId))
+            ?.id;
+
+        if (!fitnessProfileId) {
+          log.warn("No fitness profile available for AI goal creation", {
+            recommendationId,
+            userId: updatedRecommendation.userId,
+          });
+        } else {
+          const createdGoals = await Promise.all(
+            planItems.map((item) =>
+              db.createFitnessGoal({
+                id: crypto.randomUUID(),
+                userId: updatedRecommendation.userId,
+                fitnessProfileId,
+                goalType: item.goalType,
+                title: item.title,
+                description: item.description,
+                targetValue: undefined,
+                currentValue: 0,
+                unit: undefined,
+                startDate: new Date(),
+                targetDate: undefined,
+                completedDate: undefined,
+                status: "active",
+                progress: 0,
+                priority: "medium",
+                notes: `${AI_LINK_PREFIX} recommendationId=${updatedRecommendation.id}; itemId=${item.id}`,
+              }),
+            ),
+          );
+
+          createdGoalsCount = createdGoals.length;
+        }
+
+        log.info("Regenerated linked AI goals from approved recommendation", {
+          recommendationId: updatedRecommendation.id,
+          userId: updatedRecommendation.userId,
+          pausedGoals: pausedGoalsCount,
+          createdGoals: createdGoalsCount,
+        });
+      } catch (goalConversionError) {
+        log.error(
+          "Failed to regenerate linked goals for approved recommendation",
+          goalConversionError,
+          {
+            recommendationId,
+            userId: updatedRecommendation.userId,
+          },
+        );
+      }
+
       try {
         await db.createNotification({
           id: crypto.randomUUID(),
@@ -122,6 +312,8 @@ export async function POST(req: Request) {
       data: updatedRecommendation,
       meta: {
         timestamp: new Date().toISOString(),
+        pausedGoals: pausedGoalsCount,
+        createdGoals: createdGoalsCount,
       },
     });
   } catch (error) {

apps/admin/src/app/api/recommendations/generate-self/route.ts

@@ -0,0 +1,455 @@
+import { NextResponse } from "next/server";
+import { auth } from "@clerk/nextjs/server";
+import { getDatabase } from "@/lib/database";
+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";
+
+const AI_LINK_PREFIX = "[AI_LINKED]";
+
+interface ParsedPlanItem {
+  id: string;
+  title: string;
+  description: string;
+  goalType:
+    | "weight_target"
+    | "strength_milestone"
+    | "endurance_target"
+    | "flexibility_goal"
+    | "habit_building"
+    | "custom";
+}
+
+interface GeneratedPlanContent {
+  recommendationText?: string;
+  activityPlan?: string;
+  dietPlan?: string;
+}
+
+function buildFallbackPlan(profile: {
+  activityLevel?: string;
+  fitnessGoals?: string[] | string;
+  medicalConditions?: string;
+}): GeneratedPlanContent {
+  const goals = Array.isArray(profile.fitnessGoals)
+    ? profile.fitnessGoals
+    : typeof profile.fitnessGoals === "string" && profile.fitnessGoals
+      ? [profile.fitnessGoals]
+      : ["general fitness"];
+
+  const primaryGoal = goals[0] || "general fitness";
+  const activityLevel = profile.activityLevel || "moderate";
+  const hasMedicalNotes = Boolean(profile.medicalConditions?.trim());
+
+  return {
+    recommendationText:
+      `Personalized starter plan focused on ${primaryGoal} with ${activityLevel} activity pacing.` +
+      (hasMedicalNotes
+        ? " Medical notes detected, so keep intensity conservative and progress gradually."
+        : ""),
+    activityPlan:
+      "- 3 strength sessions per week (full-body, 35-45 min)\n" +
+      "- 2 cardio sessions per week (20-30 min brisk walk/run/cycle)\n" +
+      "- 10 minutes daily mobility/stretching after workouts\n" +
+      "- 1 full recovery day each week",
+    dietPlan:
+      "- Build meals around lean protein, vegetables, whole grains, and hydration\n" +
+      "- Keep portions consistent and avoid skipping meals\n" +
+      "- Track intake daily and adjust calories based on weekly progress",
+  };
+}
+
+function inferGoalType(text: string): ParsedPlanItem["goalType"] {
+  const normalized = text.toLowerCase();
+
+  if (
+    normalized.includes("strength") ||
+    normalized.includes("bench") ||
+    normalized.includes("squat") ||
+    normalized.includes("deadlift") ||
+    normalized.includes("weights")
+  ) {
+    return "strength_milestone";
+  }
+
+  if (
+    normalized.includes("run") ||
+    normalized.includes("cardio") ||
+    normalized.includes("endurance") ||
+    normalized.includes("cycle")
+  ) {
+    return "endurance_target";
+  }
+
+  if (
+    normalized.includes("stretch") ||
+    normalized.includes("mobility") ||
+    normalized.includes("yoga") ||
+    normalized.includes("flexibility")
+  ) {
+    return "flexibility_goal";
+  }
+
+  if (
+    normalized.includes("daily") ||
+    normalized.includes("routine") ||
+    normalized.includes("habit")
+  ) {
+    return "habit_building";
+  }
+
+  return "custom";
+}
+
+function parseActivityPlanToItems(activityPlan: string): ParsedPlanItem[] {
+  const lines = activityPlan
+    .replace(/\r\n/g, "\n")
+    .split(/\n+/)
+    .flatMap((line) => line.split(/(?<=[.!?])\s+(?=[A-Z0-9])/g))
+    .map((line) => line.trim())
+    .filter(Boolean)
+    .map((line) => line.replace(/^[-*•\d.)\s]+/, "").trim())
+    .filter((line) => line.length > 10)
+    .slice(0, 8);
+
+  const uniqueLines = Array.from(new Set(lines));
+
+  return uniqueLines.map((line) => ({
+    id: crypto.randomUUID(),
+    title: line.length > 72 ? `${line.slice(0, 69)}...` : line,
+    description: line,
+    goalType: inferGoalType(line),
+  }));
+}
+
+function getDefaultPlanItems(): ParsedPlanItem[] {
+  const defaults = [
+    "Complete 3 strength sessions this week with progressive overload.",
+    "Add 2 cardio sessions of 25-30 minutes for endurance.",
+    "Do a 10-minute mobility routine daily after training.",
+  ];
+
+  return defaults.map((line) => ({
+    id: crypto.randomUUID(),
+    title: line.length > 72 ? `${line.slice(0, 69)}...` : line,
+    description: line,
+    goalType: inferGoalType(line),
+  }));
+}
+
+function parseJsonPayload(content: string): GeneratedPlanContent {
+  let cleanResponse = content.trim();
+
+  if (cleanResponse.startsWith("```json")) {
+    cleanResponse = cleanResponse
+      .replace(/^```json\s*/, "")
+      .replace(/\s*```$/, "");
+  } else if (cleanResponse.startsWith("```")) {
+    cleanResponse = cleanResponse.replace(/^```\s*/, "").replace(/\s*```$/, "");
+  }
+
+  const firstBrace = cleanResponse.indexOf("{");
+  const lastBrace = cleanResponse.lastIndexOf("}");
+  if (firstBrace !== -1 && lastBrace !== -1) {
+    cleanResponse = cleanResponse.substring(firstBrace, lastBrace + 1);
+  }
+
+  return JSON.parse(cleanResponse) as GeneratedPlanContent;
+}
+
+async function generateWithOpenAI(
+  openaiApiKey: string,
+  prompt: string,
+): Promise<GeneratedPlanContent> {
+  const response = await fetch("https://api.openai.com/v1/chat/completions", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: `Bearer ${openaiApiKey}`,
+    },
+    body: JSON.stringify({
+      model: "gpt-4o-mini",
+      messages: [
+        {
+          role: "system",
+          content:
+            'You are a professional fitness trainer and nutritionist. Always respond with valid JSON only, no markdown or code blocks. The response must have this exact structure: {"recommendationText": "string", "activityPlan": "string", "dietPlan": "string"}',
+        },
+        {
+          role: "user",
+          content: prompt,
+        },
+      ],
+      temperature: 0.7,
+      max_tokens: 1500,
+      response_format: { type: "json_object" },
+    }),
+  });
+
+  if (!response.ok) {
+    const errorText = await response.text();
+    throw new Error(`OpenAI failed: ${response.status} ${errorText}`);
+  }
+
+  const data = await response.json();
+  return parseJsonPayload(data.choices[0].message.content as string);
+}
+
+async function generateWithDeepSeek(
+  deepseekApiKey: string,
+  prompt: string,
+): Promise<GeneratedPlanContent> {
+  const response = await fetch("https://api.deepseek.com/v1/chat/completions", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: `Bearer ${deepseekApiKey}`,
+    },
+    body: JSON.stringify({
+      model: "deepseek-chat",
+      messages: [
+        {
+          role: "system",
+          content:
+            "You are a professional fitness trainer and nutritionist. Always respond with valid JSON only, no markdown or code blocks.",
+        },
+        {
+          role: "user",
+          content: prompt,
+        },
+      ],
+      temperature: 0.7,
+      max_tokens: 1200,
+    }),
+  });
+
+  if (!response.ok) {
+    const errorText = await response.text();
+    throw new Error(`DeepSeek failed: ${response.status} ${errorText}`);
+  }
+
+  const data = await response.json();
+  return parseJsonPayload(data.choices[0].message.content as string);
+}
+
+async function generateWithOllama(
+  prompt: string,
+): Promise<GeneratedPlanContent> {
+  const response = await fetch("http://localhost:11434/api/generate", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({
+      model: "gemma3:latest",
+      prompt,
+      stream: false,
+      format: "json",
+    }),
+  });
+
+  if (!response.ok) {
+    const errorText = await response.text();
+    throw new Error(`Ollama failed: ${response.status} ${errorText}`);
+  }
+
+  const data = await response.json();
+  return parseJsonPayload(data.response as string);
+}
+
+export async function POST() {
+  try {
+    const { userId } = await auth();
+    if (!userId) {
+      return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+    }
+
+    const db = await getDatabase();
+    const currentUser = await ensureUserSynced(userId, db);
+
+    if (!currentUser) {
+      return NextResponse.json({ error: "Forbidden" }, { status: 403 });
+    }
+
+    const { membershipType, features } = await getUserMembershipContext(userId);
+
+    if (membershipType === "basic") {
+      return NextResponse.json(
+        {
+          error:
+            "AI plan generation is available on Premium and VIP memberships",
+          membershipType,
+        },
+        { status: 403 },
+      );
+    }
+
+    if (features.recommendationsPerMonth > 0) {
+      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 >= features.recommendationsPerMonth) {
+        return NextResponse.json(
+          {
+            error: `Your ${membershipType} plan includes ${features.recommendationsPerMonth} AI recommendation(s) per month`,
+            membershipType,
+          },
+          { status: 403 },
+        );
+      }
+    }
+
+    const profile = await db.getFitnessProfileByUserId(userId);
+    if (!profile) {
+      return NextResponse.json(
+        { error: "Complete your fitness profile before generating a plan" },
+        { status: 404 },
+      );
+    }
+
+    let prompt: string;
+    try {
+      const context = await buildAIContext(userId);
+      prompt = buildEnhancedPrompt(context);
+    } catch (error) {
+      log.warn("Failed to build AI context for self-generate", {
+        userId,
+        error: error instanceof Error ? error.message : String(error),
+      });
+      prompt = buildBasicPrompt(profile);
+    }
+
+    const openaiApiKey = process.env.OPENAI_API_KEY;
+    const deepseekApiKey = process.env.DEEPSEEK_API_KEY;
+
+    let parsedResponse: GeneratedPlanContent;
+    let usedFallbackPlan = false;
+
+    try {
+      if (openaiApiKey) {
+        parsedResponse = await generateWithOpenAI(openaiApiKey, prompt);
+      } else if (deepseekApiKey) {
+        parsedResponse = await generateWithDeepSeek(deepseekApiKey, prompt);
+      } else {
+        parsedResponse = await generateWithOllama(prompt);
+      }
+    } catch (providerError) {
+      log.error("Self-generate provider failed", providerError, {
+        userId,
+        hasOpenAI: Boolean(openaiApiKey),
+        hasDeepSeek: Boolean(deepseekApiKey),
+      });
+
+      parsedResponse = buildFallbackPlan({
+        activityLevel: profile.activityLevel,
+        fitnessGoals: profile.fitnessGoals,
+        medicalConditions: profile.medicalConditions,
+      });
+      usedFallbackPlan = true;
+    }
+
+    const recommendation = await db.createRecommendation({
+      id: crypto.randomUUID(),
+      userId,
+      fitnessProfileId: profile.id,
+      recommendationText: parsedResponse.recommendationText || "",
+      activityPlan: parsedResponse.activityPlan || "",
+      dietPlan: parsedResponse.dietPlan || "",
+      status: "approved",
+      generatedAt: new Date(),
+      updatedAt: new Date(),
+    });
+
+    const existingActiveGoals = await db.getFitnessGoalsByUserId(
+      userId,
+      "active",
+    );
+    const linkedGoals = existingActiveGoals.filter((goal) =>
+      goal.notes?.startsWith(AI_LINK_PREFIX),
+    );
+
+    await Promise.all(
+      linkedGoals.map((goal) =>
+        db.updateFitnessGoal(goal.id, {
+          status: "paused",
+          notes: `${goal.notes || ""}\nPaused due to new AI plan generation on ${new Date().toISOString()}`,
+        }),
+      ),
+    );
+
+    let planItems = parseActivityPlanToItems(parsedResponse.activityPlan || "");
+
+    if (planItems.length === 0 && parsedResponse.recommendationText) {
+      planItems = parseActivityPlanToItems(parsedResponse.recommendationText);
+    }
+
+    if (planItems.length === 0) {
+      planItems = getDefaultPlanItems();
+    }
+
+    log.debug("AI plan parsed into goal items", {
+      recommendationId: recommendation.id,
+      userId,
+      parsedItems: planItems.length,
+    });
+
+    const createdGoals = await Promise.all(
+      planItems.map((item) =>
+        db.createFitnessGoal({
+          id: crypto.randomUUID(),
+          userId,
+          fitnessProfileId: profile.id,
+          goalType: item.goalType,
+          title: item.title,
+          description: item.description,
+          targetValue: undefined,
+          currentValue: 0,
+          unit: undefined,
+          startDate: new Date(),
+          targetDate: undefined,
+          completedDate: undefined,
+          status: "active",
+          progress: 0,
+          priority: "medium",
+          notes: `${AI_LINK_PREFIX} recommendationId=${recommendation.id}; itemId=${item.id}`,
+        }),
+      ),
+    );
+
+    return NextResponse.json({
+      success: true,
+      data: recommendation,
+      meta: {
+        timestamp: new Date().toISOString(),
+        createdGoals: createdGoals.length,
+        pausedGoals: linkedGoals.length,
+        usedFallbackPlan,
+      },
+    });
+  } catch (error) {
+    log.error("Failed to self-generate recommendation", error);
+    return NextResponse.json(
+      { error: "Internal server error" },
+      { status: 500 },
+    );
+  }
+}

apps/admin/src/middleware.ts

@@ -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;
   }
 

apps/mobile/android/.gitignore

@@ -1,16 +0,0 @@
-# OSX
-#
-.DS_Store
-
-# Android/IntelliJ
-#
-build/
-.idea
-.gradle
-local.properties
-*.iml
-*.hprof
-.cxx/
-
-# Bundle artifacts
-*.jsbundle

apps/mobile/android/app/build.gradle

@@ -1,182 +0,0 @@
-apply plugin: "com.android.application"
-apply plugin: "org.jetbrains.kotlin.android"
-apply plugin: "com.facebook.react"
-
-def projectRoot = rootDir.getAbsoluteFile().getParentFile().getAbsolutePath()
-
-/**
- * This is the configuration block to customize your React Native Android app.
- * By default you don't need to apply any configuration, just uncomment the lines you need.
- */
-react {
-    entryFile = file(["node", "-e", "require('expo/scripts/resolveAppEntry')", projectRoot, "android", "absolute"].execute(null, rootDir).text.trim())
-    reactNativeDir = new File(["node", "--print", "require.resolve('react-native/package.json')"].execute(null, rootDir).text.trim()).getParentFile().getAbsoluteFile()
-    hermesCommand = new File(["node", "--print", "require.resolve('react-native/package.json')"].execute(null, rootDir).text.trim()).getParentFile().getAbsolutePath() + "/sdks/hermesc/%OS-BIN%/hermesc"
-    codegenDir = new File(["node", "--print", "require.resolve('@react-native/codegen/package.json', { paths: [require.resolve('react-native/package.json')] })"].execute(null, rootDir).text.trim()).getParentFile().getAbsoluteFile()
-
-    enableBundleCompression = (findProperty('android.enableBundleCompression') ?: false).toBoolean()
-    // Use Expo CLI to bundle the app, this ensures the Metro config
-    // works correctly with Expo projects.
-    cliFile = new File(["node", "--print", "require.resolve('@expo/cli', { paths: [require.resolve('expo/package.json')] })"].execute(null, rootDir).text.trim())
-    bundleCommand = "export:embed"
-
-    /* Folders */
-     //   The root of your project, i.e. where "package.json" lives. Default is '../..'
-    // root = file("../../")
-    //   The folder where the react-native NPM package is. Default is ../../node_modules/react-native
-    // reactNativeDir = file("../../node_modules/react-native")
-    //   The folder where the react-native Codegen package is. Default is ../../node_modules/@react-native/codegen
-    // codegenDir = file("../../node_modules/@react-native/codegen")
-
-    /* Variants */
-    //   The list of variants to that are debuggable. For those we're going to
-    //   skip the bundling of the JS bundle and the assets. By default is just 'debug'.
-    //   If you add flavors like lite, prod, etc. you'll have to list your debuggableVariants.
-    // debuggableVariants = ["liteDebug", "prodDebug"]
-
-    /* Bundling */
-    //   A list containing the node command and its flags. Default is just 'node'.
-    // nodeExecutableAndArgs = ["node"]
-
-    //
-    //   The path to the CLI configuration file. Default is empty.
-    // bundleConfig = file(../rn-cli.config.js)
-    //
-    //   The name of the generated asset file containing your JS bundle
-    // bundleAssetName = "MyApplication.android.bundle"
-    //
-    //   The entry file for bundle generation. Default is 'index.android.js' or 'index.js'
-    // entryFile = file("../js/MyApplication.android.js")
-    //
-    //   A list of extra flags to pass to the 'bundle' commands.
-    //   See https://github.com/react-native-community/cli/blob/main/docs/commands.md#bundle
-    // extraPackagerArgs = []
-
-    /* Hermes Commands */
-    //   The hermes compiler command to run. By default it is 'hermesc'
-    // hermesCommand = "$rootDir/my-custom-hermesc/bin/hermesc"
-    //
-    //   The list of flags to pass to the Hermes compiler. By default is "-O", "-output-source-map"
-    // hermesFlags = ["-O", "-output-source-map"]
-
-    /* Autolinking */
-    autolinkLibrariesWithApp()
-}
-
-/**
- * Set this to true in release builds to optimize the app using [R8](https://developer.android.com/topic/performance/app-optimization/enable-app-optimization).
- */
-def enableMinifyInReleaseBuilds = (findProperty('android.enableMinifyInReleaseBuilds') ?: false).toBoolean()
-
-/**
- * The preferred build flavor of JavaScriptCore (JSC)
- *
- * For example, to use the international variant, you can use:
- * `def jscFlavor = 'org.webkit:android-jsc-intl:+'`
- *
- * The international variant includes ICU i18n library and necessary data
- * allowing to use e.g. `Date.toLocaleString` and `String.localeCompare` that
- * give correct results when using with locales other than en-US. Note that
- * this variant is about 6MiB larger per architecture than default.
- */
-def jscFlavor = 'io.github.react-native-community:jsc-android:2026004.+'
-
-android {
-    ndkVersion rootProject.ext.ndkVersion
-
-    buildToolsVersion rootProject.ext.buildToolsVersion
-    compileSdk rootProject.ext.compileSdkVersion
-
-    namespace "com.fitai"
-    defaultConfig {
-        applicationId "com.fitai"
-        minSdkVersion rootProject.ext.minSdkVersion
-        targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 1
-        versionName "1.0"
-
-        buildConfigField "String", "REACT_NATIVE_RELEASE_LEVEL", "\"${findProperty('reactNativeReleaseLevel') ?: 'stable'}\""
-    }
-    signingConfigs {
-        debug {
-            storeFile file('debug.keystore')
-            storePassword 'android'
-            keyAlias 'androiddebugkey'
-            keyPassword 'android'
-        }
-    }
-    buildTypes {
-        debug {
-            signingConfig signingConfigs.debug
-        }
-        release {
-            // Caution! In production, you need to generate your own keystore file.
-            // see https://reactnative.dev/docs/signed-apk-android.
-            signingConfig signingConfigs.debug
-            def enableShrinkResources = findProperty('android.enableShrinkResourcesInReleaseBuilds') ?: 'false'
-            shrinkResources enableShrinkResources.toBoolean()
-            minifyEnabled enableMinifyInReleaseBuilds
-            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
-            def enablePngCrunchInRelease = findProperty('android.enablePngCrunchInReleaseBuilds') ?: 'true'
-            crunchPngs enablePngCrunchInRelease.toBoolean()
-        }
-    }
-    packagingOptions {
-        jniLibs {
-            def enableLegacyPackaging = findProperty('expo.useLegacyPackaging') ?: 'false'
-            useLegacyPackaging enableLegacyPackaging.toBoolean()
-        }
-    }
-    androidResources {
-        ignoreAssetsPattern '!.svn:!.git:!.ds_store:!*.scc:!CVS:!thumbs.db:!picasa.ini:!*~'
-    }
-}
-
-// Apply static values from `gradle.properties` to the `android.packagingOptions`
-// Accepts values in comma delimited lists, example:
-// android.packagingOptions.pickFirsts=/LICENSE,**/picasa.ini
-["pickFirsts", "excludes", "merges", "doNotStrip"].each { prop ->
-    // Split option: 'foo,bar' -> ['foo', 'bar']
-    def options = (findProperty("android.packagingOptions.$prop") ?: "").split(",");
-    // Trim all elements in place.
-    for (i in 0..<options.size()) options[i] = options[i].trim();
-    // `[] - ""` is essentially `[""].filter(Boolean)` removing all empty strings.
-    options -= ""
-
-    if (options.length > 0) {
-        println "android.packagingOptions.$prop += $options ($options.length)"
-        // Ex: android.packagingOptions.pickFirsts += '**/SCCS/**'
-        options.each {
-            android.packagingOptions[prop] += it
-        }
-    }
-}
-
-dependencies {
-    // The version of react-native is set by the React Native Gradle Plugin
-    implementation("com.facebook.react:react-android")
-
-    def isGifEnabled = (findProperty('expo.gif.enabled') ?: "") == "true";
-    def isWebpEnabled = (findProperty('expo.webp.enabled') ?: "") == "true";
-    def isWebpAnimatedEnabled = (findProperty('expo.webp.animated') ?: "") == "true";
-
-    if (isGifEnabled) {
-        // For animated gif support
-        implementation("com.facebook.fresco:animated-gif:${expoLibs.versions.fresco.get()}")
-    }
-
-    if (isWebpEnabled) {
-        // For webp support
-        implementation("com.facebook.fresco:webpsupport:${expoLibs.versions.fresco.get()}")
-        if (isWebpAnimatedEnabled) {
-            // Animated webp support
-            implementation("com.facebook.fresco:animated-webp:${expoLibs.versions.fresco.get()}")
-        }
-    }
-
-    if (hermesEnabled.toBoolean()) {
-        implementation("com.facebook.react:hermes-android")
-    } else {
-        implementation jscFlavor
-    }
-}

apps/mobile/android/app/proguard-rules.pro

@@ -1,14 +0,0 @@
-# Add project specific ProGuard rules here.
-# By default, the flags in this file are appended to flags specified
-# in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt
-# You can edit the include path and order by changing the proguardFiles
-# directive in build.gradle.
-#
-# For more details, see
-#   http://developer.android.com/guide/developing/tools/proguard.html
-
-# react-native-reanimated
--keep class com.swmansion.reanimated.** { *; }
--keep class com.facebook.react.turbomodule.** { *; }
-
-# Add any project specific keep options here:

apps/mobile/android/app/src/debug/AndroidManifest.xml

@@ -1,7 +0,0 @@
-<manifest xmlns:android="http://schemas.android.com/apk/res/android"
-    xmlns:tools="http://schemas.android.com/tools">
-
-    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
-
-    <application android:usesCleartextTraffic="true" tools:targetApi="28" tools:ignore="GoogleAppIndexingWarning" tools:replace="android:usesCleartextTraffic" />
-</manifest>

apps/mobile/android/app/src/debugOptimized/AndroidManifest.xml

@@ -1,7 +0,0 @@
-<manifest xmlns:android="http://schemas.android.com/apk/res/android"
-    xmlns:tools="http://schemas.android.com/tools">
-
-    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
-
-    <application android:usesCleartextTraffic="true" tools:targetApi="28" tools:ignore="GoogleAppIndexingWarning" tools:replace="android:usesCleartextTraffic" />
-</manifest>

apps/mobile/android/app/src/main/AndroidManifest.xml

@@ -1,29 +0,0 @@
-<manifest xmlns:android="http://schemas.android.com/apk/res/android">
-
-  <uses-permission android:name="android.permission.INTERNET"/>
-  <!-- OPTIONAL PERMISSIONS, REMOVE WHATEVER YOU DO NOT NEED -->
-  <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
-  <uses-permission android:name="android.permission.VIBRATE"/>
-  <!-- These require runtime permissions on M -->
-  <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
-  <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
-  <!-- END OPTIONAL PERMISSIONS -->
-
-  <queries>
-    <!-- Support checking for http(s) links via the Linking API -->
-    <intent>
-      <action android:name="android.intent.action.VIEW" />
-      <category android:name="android.intent.category.BROWSABLE" />
-      <data android:scheme="https" />
-    </intent>
-  </queries>
-
-  <application android:name=".MainApplication" android:label="@string/app_name" android:icon="@mipmap/ic_launcher" android:roundIcon="@mipmap/ic_launcher_round" android:allowBackup="false" android:theme="@style/AppTheme" android:supportsRtl="true">
-    <activity android:name=".MainActivity" android:configChanges="keyboard|keyboardHidden|orientation|screenSize|screenLayout|uiMode" android:launchMode="singleTask" android:windowSoftInputMode="adjustResize" android:theme="@style/Theme.App.SplashScreen" android:exported="true">
-      <intent-filter>
-        <action android:name="android.intent.action.MAIN"/>
-        <category android:name="android.intent.category.LAUNCHER"/>
-      </intent-filter>
-    </activity>
-  </application>
-</manifest>

apps/mobile/android/app/src/main/java/com/anonymous/fitai/MainActivity.kt

@@ -1,61 +0,0 @@
-package com.anonymous.fitai
-
-import android.os.Build
-import android.os.Bundle
-
-import com.facebook.react.ReactActivity
-import com.facebook.react.ReactActivityDelegate
-import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.fabricEnabled
-import com.facebook.react.defaults.DefaultReactActivityDelegate
-
-import expo.modules.ReactActivityDelegateWrapper
-
-class MainActivity : ReactActivity() {
-  override fun onCreate(savedInstanceState: Bundle?) {
-    // Set the theme to AppTheme BEFORE onCreate to support
-    // coloring the background, status bar, and navigation bar.
-    // This is required for expo-splash-screen.
-    setTheme(R.style.AppTheme);
-    super.onCreate(null)
-  }
-
-  /**
-   * Returns the name of the main component registered from JavaScript. This is used to schedule
-   * rendering of the component.
-   */
-  override fun getMainComponentName(): String = "main"
-
-  /**
-   * Returns the instance of the [ReactActivityDelegate]. We use [DefaultReactActivityDelegate]
-   * which allows you to enable New Architecture with a single boolean flags [fabricEnabled]
-   */
-  override fun createReactActivityDelegate(): ReactActivityDelegate {
-    return ReactActivityDelegateWrapper(
-          this,
-          BuildConfig.IS_NEW_ARCHITECTURE_ENABLED,
-          object : DefaultReactActivityDelegate(
-              this,
-              mainComponentName,
-              fabricEnabled
-          ){})
-  }
-
-  /**
-    * Align the back button behavior with Android S
-    * where moving root activities to background instead of finishing activities.
-    * @see <a href="https://developer.android.com/reference/android/app/Activity#onBackPressed()">onBackPressed</a>
-    */
-  override fun invokeDefaultOnBackPressed() {
-      if (Build.VERSION.SDK_INT <= Build.VERSION_CODES.R) {
-          if (!moveTaskToBack(false)) {
-              // For non-root activities, use the default implementation to finish them.
-              super.invokeDefaultOnBackPressed()
-          }
-          return
-      }
-
-      // Use the default back button implementation on Android S
-      // because it's doing more than [Activity.moveTaskToBack] in fact.
-      super.invokeDefaultOnBackPressed()
-  }
-}

apps/mobile/android/app/src/main/java/com/anonymous/fitai/MainApplication.kt

@@ -1,56 +0,0 @@
-package com.anonymous.fitai
-
-import android.app.Application
-import android.content.res.Configuration
-
-import com.facebook.react.PackageList
-import com.facebook.react.ReactApplication
-import com.facebook.react.ReactNativeApplicationEntryPoint.loadReactNative
-import com.facebook.react.ReactNativeHost
-import com.facebook.react.ReactPackage
-import com.facebook.react.ReactHost
-import com.facebook.react.common.ReleaseLevel
-import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint
-import com.facebook.react.defaults.DefaultReactNativeHost
-
-import expo.modules.ApplicationLifecycleDispatcher
-import expo.modules.ReactNativeHostWrapper
-
-class MainApplication : Application(), ReactApplication {
-
-  override val reactNativeHost: ReactNativeHost = ReactNativeHostWrapper(
-      this,
-      object : DefaultReactNativeHost(this) {
-        override fun getPackages(): List<ReactPackage> =
-            PackageList(this).packages.apply {
-              // Packages that cannot be autolinked yet can be added manually here, for example:
-              // add(MyReactNativePackage())
-            }
-
-          override fun getJSMainModuleName(): String = ".expo/.virtual-metro-entry"
-
-          override fun getUseDeveloperSupport(): Boolean = BuildConfig.DEBUG
-
-          override val isNewArchEnabled: Boolean = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED
-      }
-  )
-
-  override val reactHost: ReactHost
-    get() = ReactNativeHostWrapper.createReactHost(applicationContext, reactNativeHost)
-
-  override fun onCreate() {
-    super.onCreate()
-    DefaultNewArchitectureEntryPoint.releaseLevel = try {
-      ReleaseLevel.valueOf(BuildConfig.REACT_NATIVE_RELEASE_LEVEL.uppercase())
-    } catch (e: IllegalArgumentException) {
-      ReleaseLevel.STABLE
-    }
-    loadReactNative(this)
-    ApplicationLifecycleDispatcher.onApplicationCreate(this)
-  }
-
-  override fun onConfigurationChanged(newConfig: Configuration) {
-    super.onConfigurationChanged(newConfig)
-    ApplicationLifecycleDispatcher.onConfigurationChanged(this, newConfig)
-  }
-}

apps/mobile/android/app/src/main/res/drawable/ic_launcher_background.xml

@@ -1,6 +0,0 @@
-<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
-  <item android:drawable="@color/splashscreen_background"/>
-  <item>
-    <bitmap android:gravity="center" android:src="@drawable/splashscreen_logo"/>
-  </item>
-</layer-list>

apps/mobile/android/app/src/main/res/drawable/rn_edit_text_material.xml

@@ -1,37 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Copyright (C) 2014 The Android Open Source Project
-
-     Licensed under the Apache License, Version 2.0 (the "License");
-     you may not use this file except in compliance with the License.
-     You may obtain a copy of the License at
-
-          http://www.apache.org/licenses/LICENSE-2.0
-
-     Unless required by applicable law or agreed to in writing, software
-     distributed under the License is distributed on an "AS IS" BASIS,
-     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-     See the License for the specific language governing permissions and
-     limitations under the License.
--->
-<inset xmlns:android="http://schemas.android.com/apk/res/android"
-       android:insetLeft="@dimen/abc_edit_text_inset_horizontal_material"
-       android:insetRight="@dimen/abc_edit_text_inset_horizontal_material"
-       android:insetTop="@dimen/abc_edit_text_inset_top_material"
-       android:insetBottom="@dimen/abc_edit_text_inset_bottom_material"
-       >
-
-    <selector>
-        <!--
-          This file is a copy of abc_edit_text_material (https://bit.ly/3k8fX7I).
-          The item below with state_pressed="false" and state_focused="false" causes a NullPointerException.
-          NullPointerException:tempt to invoke virtual method 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable$ConstantState.newDrawable(android.content.res.Resources)'
-
-          <item android:state_pressed="false" android:state_focused="false" android:drawable="@drawable/abc_textfield_default_mtrl_alpha"/>
-
-          For more info, see https://bit.ly/3CdLStv (react-native/pull/29452) and https://bit.ly/3nxOMoR.
-        -->
-        <item android:state_enabled="false" android:drawable="@drawable/abc_textfield_default_mtrl_alpha"/>
-        <item android:drawable="@drawable/abc_textfield_activated_mtrl_alpha"/>
-    </selector>
-
-</inset>

apps/mobile/android/app/src/main/res/values/colors.xml

@@ -1,4 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
-<resources>
-  <color name="splashscreen_background">#FFFFFF</color>
-</resources>

apps/mobile/android/app/src/main/res/values/strings.xml

@@ -1,3 +0,0 @@
-<resources>
-    <string name="app_name">FitAI</string>
-</resources>

apps/mobile/android/app/src/main/res/values/styles.xml

@@ -1,8 +0,0 @@
-<resources>
-  <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
-    <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
-  </style>
-  <style name="Theme.App.SplashScreen" parent="AppTheme">
-    <item name="android:windowBackground">@drawable/splashscreen_logo</item>
-  </style>
-</resources>

apps/mobile/android/build.gradle

@@ -1,24 +0,0 @@
-// Top-level build file where you can add configuration options common to all sub-projects/modules.
-
-buildscript {
-  repositories {
-    google()
-    mavenCentral()
-  }
-  dependencies {
-    classpath('com.android.tools.build:gradle')
-    classpath('com.facebook.react:react-native-gradle-plugin')
-    classpath('org.jetbrains.kotlin:kotlin-gradle-plugin')
-  }
-}
-
-allprojects {
-  repositories {
-    google()
-    mavenCentral()
-    maven { url 'https://www.jitpack.io' }
-  }
-}
-
-apply plugin: "expo-root-project"
-apply plugin: "com.facebook.react.rootproject"

apps/mobile/android/gradle.properties

@@ -1,61 +0,0 @@
-# Project-wide Gradle settings.
-
-# IDE (e.g. Android Studio) users:
-# Gradle settings configured through the IDE *will override*
-# any settings specified in this file.
-
-# For more details on how to configure your build environment visit
-# http://www.gradle.org/docs/current/userguide/build_environment.html
-
-# Specifies the JVM arguments used for the daemon process.
-# The setting is particularly useful for tweaking memory settings.
-# Default value: -Xmx512m -XX:MaxMetaspaceSize=256m
-org.gradle.jvmargs=-Xmx2048m -XX:MaxMetaspaceSize=512m
-
-# When configured, Gradle will run in incubating parallel mode.
-# This option should only be used with decoupled projects. More details, visit
-# http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects
-org.gradle.parallel=true
-
-# AndroidX package structure to make it clearer which packages are bundled with the
-# Android operating system, and which are packaged with your app's APK
-# https://developer.android.com/topic/libraries/support-library/androidx-rn
-android.useAndroidX=true
-
-# Enable AAPT2 PNG crunching
-android.enablePngCrunchInReleaseBuilds=true
-
-# Use this property to specify which architecture you want to build.
-# You can also override it from the CLI using
-# ./gradlew <task> -PreactNativeArchitectures=x86_64
-reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64
-
-# Use this property to enable support to the new architecture.
-# This will allow you to use TurboModules and the Fabric render in
-# your application. You should enable this flag either if you want
-# to write custom TurboModules/Fabric components OR use libraries that
-# are providing them.
-newArchEnabled=true
-
-# Use this property to enable or disable the Hermes JS engine.
-# If set to false, you will be using JSC instead.
-hermesEnabled=true
-
-# Use this property to enable edge-to-edge display support.
-# This allows your app to draw behind system bars for an immersive UI.
-# Note: Only works with ReactActivity and should not be used with custom Activity.
-edgeToEdgeEnabled=true
-
-# Enable GIF support in React Native images (~200 B increase)
-expo.gif.enabled=true
-# Enable webp support in React Native images (~85 KB increase)
-expo.webp.enabled=true
-# Enable animated webp support (~3.4 MB increase)
-# Disabled by default because iOS doesn't support animated webp
-expo.webp.animated=false
-
-# Enable network inspector
-EX_DEV_CLIENT_NETWORK_INSPECTOR=true
-
-# Use legacy packaging to compress native libraries in the resulting APK.
-expo.useLegacyPackaging=false

apps/mobile/android/settings.gradle

@@ -1,39 +0,0 @@
-pluginManagement {
-  def reactNativeGradlePlugin = new File(
-    providers.exec {
-      workingDir(rootDir)
-      commandLine("node", "--print", "require.resolve('@react-native/gradle-plugin/package.json', { paths: [require.resolve('react-native/package.json')] })")
-    }.standardOutput.asText.get().trim()
-  ).getParentFile().absolutePath
-  includeBuild(reactNativeGradlePlugin)
-  
-  def expoPluginsPath = new File(
-    providers.exec {
-      workingDir(rootDir)
-      commandLine("node", "--print", "require.resolve('expo-modules-autolinking/package.json', { paths: [require.resolve('expo/package.json')] })")
-    }.standardOutput.asText.get().trim(),
-    "../android/expo-gradle-plugin"
-  ).absolutePath
-  includeBuild(expoPluginsPath)
-}
-
-plugins {
-  id("com.facebook.react.settings")
-  id("expo-autolinking-settings")
-}
-
-extensions.configure(com.facebook.react.ReactSettingsExtension) { ex ->
-  if (System.getenv('EXPO_USE_COMMUNITY_AUTOLINKING') == '1') {
-    ex.autolinkLibrariesFromCommand()
-  } else {
-    ex.autolinkLibrariesFromCommand(expoAutolinking.rnConfigCommand)
-  }
-}
-expoAutolinking.useExpoModules()
-
-rootProject.name = 'FitAI'
-
-expoAutolinking.useExpoVersionCatalog()
-
-include ':app'
-includeBuild(expoAutolinking.reactNativeGradlePlugin)

apps/mobile/app.json

@@ -16,7 +16,8 @@
       "supportsTablet": true,
       "infoPlist": {
         "NSCameraUsageDescription": "This app uses the camera to scan food barcodes and identify nutritional information.",
-        "NSUserNotificationsUsageDescription": "This app uses notifications to keep you updated on your fitness progress, recommendation approvals, and important reminders."
+        "NSUserNotificationsUsageDescription": "This app uses notifications to keep you updated on your fitness progress, recommendation approvals, and important reminders.",
+        "NSMotionUsageDescription": "This app uses motion data to track your daily steps and activity progress."
       }
     },
     "android": {
@@ -27,7 +28,8 @@
       "permissions": [
         "CAMERA",
         "POST_NOTIFICATIONS",
-        "android.permission.CAMERA"
+        "android.permission.CAMERA",
+        "android.permission.ACTIVITY_RECOGNITION"
       ],
       "package": "com.anonymous.fitai"
     },

apps/mobile/ios/FitAI.xcodeproj/project.xcworkspace/contents.xcworkspacedata

@@ -1,7 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<Workspace
-   version = "1.0">
-   <FileRef
-      location = "self:">
-   </FileRef>
-</Workspace>

apps/mobile/ios/FitAI.xcodeproj/project.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist

@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
-<plist version="1.0">
-<dict>
-	<key>IDEDidComputeMac32BitWarning</key>
-	<true/>
-</dict>
-</plist>

apps/mobile/package-lock.json

@@ -32,6 +32,7 @@
         "expo-notifications": "~0.32.0",
         "expo-router": "~6.0.14",
         "expo-secure-store": "~15.0.7",
+        "expo-sensors": "~14.1.4",
         "expo-status-bar": "^3.0.8",
         "expo-web-browser": "^15.0.10",
         "react": "19.1.0",
@@ -7604,6 +7605,19 @@
         "expo": "*"
       }
     },
+    "node_modules/expo-sensors": {
+      "version": "14.1.4",
+      "resolved": "https://registry.npmjs.org/expo-sensors/-/expo-sensors-14.1.4.tgz",
+      "integrity": "sha512-KHROi5C8dhXedMwx7fZ5eyv9p382F5XOIex4a+GpdOTL3OY4xyk08kt7x64FtMeeoT87gYD3mb9LrBpHyNubkg==",
+      "license": "MIT",
+      "dependencies": {
+        "invariant": "^2.2.4"
+      },
+      "peerDependencies": {
+        "expo": "*",
+        "react-native": "*"
+      }
+    },
     "node_modules/expo-server": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/expo-server/-/expo-server-1.0.4.tgz",

apps/mobile/package.json

@@ -38,6 +38,7 @@
     "expo-notifications": "~0.32.0",
     "expo-router": "~6.0.14",
     "expo-secure-store": "~15.0.7",
+    "expo-sensors": "~14.1.4",
     "expo-status-bar": "^3.0.8",
     "expo-web-browser": "^15.0.10",
     "react": "19.1.0",

apps/mobile/src/api/food.ts

@@ -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;
+}

apps/mobile/src/api/index.ts

@@ -15,4 +15,5 @@ export * from "./hydration";
 export * from "./client";
 export * from "./helpers";
 export * from "./membership";
+export * from "./food";
 export * from "./gyms";

apps/mobile/src/api/membership.ts

@@ -51,6 +51,15 @@ interface UsersListResponse {
   }>;
 }
 
+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";
 }
@@ -85,3 +94,35 @@ export function getMembershipFeatures(
 ): 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,
+  };
+}

apps/mobile/src/api/recommendations.ts

@@ -18,6 +18,16 @@ export interface Recommendation {
   updatedAt: string;
 }
 
+interface RecommendationMeta {
+  usedFallbackPlan?: boolean;
+}
+
+interface RecommendationApiEnvelope {
+  success?: boolean;
+  data?: Recommendation;
+  meta?: RecommendationMeta;
+}
+
 export interface GenerateRecommendationRequest {
   userId: string;
   useExternalModel?: boolean;
@@ -109,3 +119,36 @@ export async function approveRecommendation(
     throw error;
   }
 }
+
+/**
+ * Generate AI recommendation for the authenticated client user
+ */
+export async function generateSelfRecommendation(
+  token: string | null,
+): Promise<Recommendation> {
+  try {
+    const response = await apiClient.post<RecommendationApiEnvelope>(
+      `${API_ENDPOINTS.RECOMMENDATIONS}/generate-self`,
+      {},
+      withAuth(token),
+    );
+    return parseApiData<Recommendation>(response.data);
+  } catch (error) {
+    if (isAxiosError(error)) {
+      const responseError = error.response?.data as
+        | { error?: string }
+        | undefined;
+
+      if (responseError?.error) {
+        throw new Error(responseError.error);
+      }
+
+      if (error.response) {
+        throw new Error(
+          `Failed to generate recommendation: ${error.response.status}`,
+        );
+      }
+    }
+    throw error;
+  }
+}

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

@@ -13,12 +13,17 @@ import { useUser, useAuth } from "@clerk/clerk-expo";
 import { useRouter } from "expo-router";
 import { fitnessProfileApi } from "@/api/fitnessProfile";
 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<Gym[]>([]);
   const [gymsLoading, setGymsLoading] = useState<boolean>(false);
@@ -134,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 })
@@ -160,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 })
@@ -171,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 })
@@ -182,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 })
@@ -194,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 })
@@ -230,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({
@@ -245,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 })
@@ -281,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 />
         ) : (
@@ -293,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
@@ -311,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}
@@ -330,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>
   );
@@ -349,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,
   },
@@ -368,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" },
 });

apps/mobile/src/app/(auth)/sign-in.tsx

@@ -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,
   },
 });

apps/mobile/src/app/(auth)/sign-up.tsx

@@ -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,
   },
 });

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

@@ -80,13 +80,7 @@ export default function TabLayout() {
       <Tabs.Screen
         name="recommendations"
         options={{
-          title: "AI",
-        }}
-      />
-      <Tabs.Screen
-        name="attendance"
-        options={{
-          title: "Attendance",
+          title: "Plans",
         }}
       />
       <Tabs.Screen

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

@@ -1,348 +0,0 @@
-import {
-  View,
-  Text,
-  StyleSheet,
-  TouchableOpacity,
-  ActivityIndicator,
-  ScrollView,
-  Alert,
-} from "react-native";
-import { useState, useEffect } from "react";
-import { useAuth } from "@clerk/clerk-expo";
-import { Ionicons } from "@expo/vector-icons";
-import { useTheme } from "../../contexts/ThemeContext";
-import { MinimalCard } from "../../components/MinimalCard";
-import { SectionHeader } from "../../components/SectionHeader";
-import { MinimalButton } from "../../components/MinimalButton";
-import { Badge } from "../../components/Badge";
-import { IconContainer } from "../../components/IconContainer";
-import { attendanceApi, Attendance } from "../../api/attendance";
-import { AttendanceCalendar } from "../../components/AttendanceCalendar";
-import { useStatistics } from "../../contexts/StatisticsContext";
-import { getErrorMessage } from "../../utils/error-helpers";
-import log from "../../utils/logger";
-
-export default function AttendanceScreen() {
-  const { getToken, userId } = useAuth();
-  const { colors, typography } = useTheme();
-  const { clearCache: clearStatisticsCache } = useStatistics();
-  const [loading, setLoading] = useState(true);
-  const [activeCheckIn, setActiveCheckIn] = useState<Attendance | null>(null);
-  const [history, setHistory] = useState<Attendance[]>([]);
-
-  const fetchAttendance = async () => {
-    try {
-      setLoading(true);
-      const token = await getToken();
-      if (!token) return;
-
-      log.debug("Fetching attendance history");
-      const data = await attendanceApi.getHistory(token);
-      setHistory(data);
-
-      // Check if there's an active check-in (latest one has no checkOutTime)
-      if (data.length > 0 && !data[0].checkOutTime) {
-        setActiveCheckIn(data[0]);
-      } else {
-        setActiveCheckIn(null);
-      }
-    } catch (error) {
-      log.error("Failed to fetch attendance", error);
-      Alert.alert("Error", "Failed to load attendance data");
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  useEffect(() => {
-    fetchAttendance();
-  }, []);
-
-  const handleCheckIn = async () => {
-    try {
-      const token = await getToken();
-      if (!token) return;
-
-      await attendanceApi.checkIn("gym", token);
-      clearStatisticsCache();
-      fetchAttendance();
-      Alert.alert("Success", "Checked in successfully!");
-    } catch (error: unknown) {
-      log.error("Failed to check in", error);
-      Alert.alert("Error", getErrorMessage(error, "Failed to check in"));
-    }
-  };
-
-  const handleCheckOut = async () => {
-    try {
-      const token = await getToken();
-      if (!token) return;
-
-      await attendanceApi.checkOut(token);
-      clearStatisticsCache();
-      fetchAttendance();
-      Alert.alert("Success", "Checked out successfully!");
-    } catch (error: unknown) {
-      log.error("Failed to check out", error);
-      Alert.alert("Error", getErrorMessage(error, "Failed to check out"));
-    }
-  };
-
-  if (loading && !history.length) {
-    return (
-      <View style={[styles.centered, { backgroundColor: colors.background }]}>
-        <ActivityIndicator size="large" color={colors.primary} />
-      </View>
-    );
-  }
-
-  return (
-    <ScrollView
-      style={[styles.container, { backgroundColor: colors.background }]}
-      contentContainerStyle={styles.content}
-    >
-      {/* Header */}
-      <View style={styles.header}>
-        <Text
-          style={[typography.h1, { color: colors.textPrimary, fontSize: 32 }]}
-        >
-          Attendance
-        </Text>
-        <Text
-          style={[
-            typography.body,
-            { color: colors.textSecondary, marginTop: 8 },
-          ]}
-        >
-          {activeCheckIn
-            ? "You're crushing it today!"
-            : history.length === 0
-              ? "Ready to start your fitness journey?"
-              : "Track your gym visits and build streaks!"}
-        </Text>
-      </View>
-
-      {/* Check In/Out Section */}
-      <View style={styles.section}>
-        {activeCheckIn ? (
-          <MinimalCard variant="bordered" style={styles.activeCard}>
-            <View style={styles.activeHeader}>
-              <View style={styles.activeHeaderLeft}>
-                <IconContainer
-                  variant="colored"
-                  backgroundColor={`${colors.success}20`}
-                  size="lg"
-                >
-                  <Ionicons
-                    name="checkmark-circle"
-                    size={28}
-                    color={colors.success}
-                  />
-                </IconContainer>
-                <View style={{ marginLeft: 12 }}>
-                  <Text style={[typography.h3, { color: colors.textPrimary }]}>
-                    ✅ Currently Checked In
-                  </Text>
-                  <Text
-                    style={[
-                      typography.caption,
-                      { color: colors.textTertiary, marginTop: 2 },
-                    ]}
-                  >
-                    Since{" "}
-                    {new Date(activeCheckIn.checkInTime).toLocaleTimeString(
-                      [],
-                      {
-                        hour: "2-digit",
-                        minute: "2-digit",
-                      },
-                    )}
-                  </Text>
-                </View>
-              </View>
-            </View>
-            <MinimalButton
-              title="Check Out"
-              onPress={handleCheckOut}
-              variant="danger"
-              size="lg"
-              style={{ marginTop: 16 }}
-            />
-          </MinimalCard>
-        ) : (
-          <MinimalButton
-            title="💪 Check In"
-            onPress={handleCheckIn}
-            variant="primary"
-            size="lg"
-          />
-        )}
-      </View>
-
-      {/* Attendance Calendar */}
-      <View style={styles.section}>
-        <SectionHeader title="📅 Calendar" />
-        <MinimalCard variant="default" style={{ borderRadius: 20 }}>
-          <AttendanceCalendar attendanceRecords={history} />
-        </MinimalCard>
-      </View>
-
-      {/* Recent History */}
-      <View style={styles.section}>
-        <SectionHeader title="📊 Recent History" />
-        {history.length === 0 ? (
-          <MinimalCard variant="default" style={{ borderRadius: 20 }}>
-            <View style={styles.emptyState}>
-              <Text style={{ fontSize: 64 }}>📍</Text>
-              <Text
-                style={[
-                  typography.bodyEmphasis,
-                  { color: colors.textPrimary, marginTop: 16 },
-                ]}
-              >
-                No attendance history yet
-              </Text>
-              <Text
-                style={[
-                  typography.body,
-                  {
-                    color: colors.textSecondary,
-                    marginTop: 8,
-                    textAlign: "center",
-                  },
-                ]}
-              >
-                Check in to start building your streak! 🔥
-              </Text>
-            </View>
-          </MinimalCard>
-        ) : (
-          <View style={styles.historyList}>
-            {history.slice(0, 10).map((record, index) => {
-              const checkIn = new Date(record.checkInTime);
-              const checkOut = record.checkOutTime
-                ? new Date(record.checkOutTime)
-                : null;
-              const duration = checkOut
-                ? Math.round((checkOut.getTime() - checkIn.getTime()) / 60000)
-                : null;
-
-              return (
-                <MinimalCard
-                  key={index}
-                  variant="bordered"
-                  style={{ borderRadius: 16 }}
-                >
-                  <View style={styles.historyItem}>
-                    <View style={styles.historyLeft}>
-                      <IconContainer
-                        variant="colored"
-                        backgroundColor={
-                          checkOut ? `${colors.success}20` : `${colors.info}20`
-                        }
-                      >
-                        <Ionicons
-                          name={checkOut ? "checkmark-done" : "time"}
-                          size={20}
-                          color={checkOut ? colors.success : colors.info}
-                        />
-                      </IconContainer>
-                      <View style={{ marginLeft: 12, flex: 1 }}>
-                        <Text
-                          style={[typography.h3, { color: colors.textPrimary }]}
-                        >
-                          {checkIn.toLocaleDateString()}
-                        </Text>
-                        <Text
-                          style={[
-                            typography.caption,
-                            { color: colors.textTertiary, marginTop: 2 },
-                          ]}
-                        >
-                          {checkIn.toLocaleTimeString([], {
-                            hour: "2-digit",
-                            minute: "2-digit",
-                          })}
-                          {checkOut &&
-                            ` - ${checkOut.toLocaleTimeString([], {
-                              hour: "2-digit",
-                              minute: "2-digit",
-                            })}`}
-                        </Text>
-                      </View>
-                    </View>
-                    {duration && (
-                      <Badge
-                        label={`${duration}m`}
-                        variant="neutral"
-                        size="sm"
-                      />
-                    )}
-                  </View>
-                </MinimalCard>
-              );
-            })}
-          </View>
-        )}
-      </View>
-
-      {/* Bottom Spacer */}
-      <View style={{ height: 100 }} />
-    </ScrollView>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  centered: {
-    flex: 1,
-    justifyContent: "center",
-    alignItems: "center",
-  },
-  content: {
-    paddingBottom: 20,
-  },
-  header: {
-    paddingHorizontal: 24,
-    paddingTop: 60,
-    paddingBottom: 24,
-  },
-  section: {
-    paddingHorizontal: 24,
-    marginBottom: 24,
-  },
-  activeCard: {
-    padding: 20,
-    borderRadius: 20,
-  },
-  activeHeader: {
-    flexDirection: "row",
-    justifyContent: "space-between",
-    alignItems: "center",
-  },
-  activeHeaderLeft: {
-    flexDirection: "row",
-    alignItems: "center",
-    flex: 1,
-  },
-  emptyState: {
-    alignItems: "center",
-    paddingVertical: 40,
-    paddingHorizontal: 20,
-  },
-  historyList: {
-    gap: 12,
-  },
-  historyItem: {
-    flexDirection: "row",
-    justifyContent: "space-between",
-    alignItems: "center",
-  },
-  historyLeft: {
-    flexDirection: "row",
-    alignItems: "center",
-    flex: 1,
-  },
-});

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

@@ -22,6 +22,7 @@ import { GoalProgressCard } from "../../components/GoalProgressCard";
 import { GoalCreationModal } from "../../components/GoalCreationModal";
 import { WeeklyProgressChart } from "../../components/WeeklyProgressChart";
 import { GoalTypeBreakdownChart } from "../../components/GoalTypeBreakdownChart";
+import { useMembership } from "../../hooks/useMembership";
 import type { FitnessGoal, CreateGoalData } from "../../services/fitnessGoals";
 import { useStatistics } from "../../contexts/StatisticsContext";
 import { useFitnessGoals } from "../../contexts/FitnessGoalsContext";
@@ -45,15 +46,24 @@ export default function GoalsScreen() {
     deleteGoal,
     clearCache: clearGoalsCache,
   } = useFitnessGoals();
-  const { clearCache: clearRecommendationsCache } = useRecommendations();
+  const {
+    recommendations,
+    clearCache: clearRecommendationsCache,
+    refetchRecommendations,
+    generateSelfPlan,
+  } = useRecommendations();
+  const { membershipType, features } = useMembership();
   const [refreshing, setRefreshing] = useState(false);
   const [isModalVisible, setIsModalVisible] = useState(false);
   const [showAnalytics, setShowAnalytics] = useState(false);
+  const [isGeneratingPlan, setIsGeneratingPlan] = useState(false);
+  const [showFullPlan, setShowFullPlan] = useState(false);
 
   const loadData = useCallback(async () => {
     await refetchGoals();
+    await refetchRecommendations();
     await refetchStatistics();
-  }, [refetchGoals, refetchStatistics]);
+  }, [refetchGoals, refetchRecommendations, refetchStatistics]);
 
   const clearClerkCache = async () => {
     Alert.alert(
@@ -136,6 +146,76 @@ export default function GoalsScreen() {
         )
       : 0;
 
+  const latestApprovedRecommendation = [...recommendations]
+    .filter((rec) => rec.status === "approved")
+    .sort(
+      (a, b) =>
+        new Date(b.generatedAt).getTime() - new Date(a.generatedAt).getTime(),
+    )[0];
+
+  const isGoalAiAligned = (goal: FitnessGoal) => {
+    if (goal.notes?.startsWith("[AI_LINKED]")) return true;
+    if (!latestApprovedRecommendation?.activityPlan) return false;
+
+    const planText = latestApprovedRecommendation.activityPlan.toLowerCase();
+    const title = goal.title.toLowerCase();
+    const description = (goal.description || "").toLowerCase();
+
+    const content = `${title} ${description}`;
+
+    if (goal.goalType === "strength_milestone") {
+      return planText.includes("strength") || planText.includes("weight");
+    }
+    if (goal.goalType === "endurance_target") {
+      return (
+        planText.includes("cardio") ||
+        planText.includes("endurance") ||
+        planText.includes("run")
+      );
+    }
+    if (goal.goalType === "flexibility_goal") {
+      return planText.includes("stretch") || planText.includes("mobility");
+    }
+    if (goal.goalType === "habit_building") {
+      return planText.includes("habit") || planText.includes("daily");
+    }
+
+    return (
+      planText.includes(content.split(" ")[0] || "") ||
+      content
+        .split(" ")
+        .some((word) => word.length > 4 && planText.includes(word))
+    );
+  };
+
+  const handleGenerateAiPlan = async () => {
+    if (!features.recommendationsPerMonth || membershipType === "basic") {
+      Alert.alert(
+        "Premium Feature",
+        "AI plan generation is available on Premium and VIP memberships.",
+      );
+      return;
+    }
+
+    try {
+      setIsGeneratingPlan(true);
+      await generateSelfPlan();
+      await Promise.all([refetchRecommendations(), refetchGoals()]);
+      Alert.alert(
+        "Plan Ready",
+        "Your new activity plan is ready and active goals were added.",
+      );
+    } catch (error) {
+      const message =
+        error instanceof Error
+          ? error.message
+          : "Failed to generate AI activity plan.";
+      Alert.alert("Could not generate plan", message);
+    } finally {
+      setIsGeneratingPlan(false);
+    }
+  };
+
   return (
     <View style={[styles.container, { backgroundColor: colors.background }]}>
       <ScrollView
@@ -352,6 +432,89 @@ export default function GoalsScreen() {
 
         {/* Active Goals */}
         <View style={styles.section}>
+          <MinimalCard variant="elevated" style={styles.aiPlanCard}>
+            <View style={styles.aiPlanHeader}>
+              <View style={styles.aiPlanHeaderLeft}>
+                <View
+                  style={[
+                    styles.aiPlanIcon,
+                    { backgroundColor: `${colors.primary}15` },
+                  ]}
+                >
+                  <Ionicons name="sparkles" size={20} color={colors.primary} />
+                </View>
+                <View>
+                  <Text style={[typography.h3, { color: colors.textPrimary }]}>
+                    AI Activity Plan
+                  </Text>
+                  <Text
+                    style={[
+                      typography.caption,
+                      { color: colors.textTertiary, marginTop: 2 },
+                    ]}
+                  >
+                    {latestApprovedRecommendation
+                      ? `Generated ${new Date(latestApprovedRecommendation.generatedAt).toLocaleDateString()}`
+                      : "Generate a plan aligned to your fitness profile"}
+                  </Text>
+                </View>
+              </View>
+              <Badge
+                variant={membershipType === "basic" ? "neutral" : "success"}
+                label={membershipType.toUpperCase()}
+                size="sm"
+              />
+            </View>
+
+            {latestApprovedRecommendation ? (
+              <>
+                <Text
+                  style={[
+                    typography.body,
+                    { color: colors.textSecondary, marginTop: 14 },
+                  ]}
+                  numberOfLines={showFullPlan ? undefined : 4}
+                >
+                  {latestApprovedRecommendation.activityPlan}
+                </Text>
+                <TouchableOpacity
+                  onPress={() => setShowFullPlan((prev) => !prev)}
+                  style={styles.showPlanButton}
+                >
+                  <Text style={[typography.caption, { color: colors.primary }]}>
+                    {showFullPlan ? "Show less" : "View full plan"}
+                  </Text>
+                </TouchableOpacity>
+              </>
+            ) : (
+              <Text
+                style={[
+                  typography.body,
+                  { color: colors.textSecondary, marginTop: 14 },
+                ]}
+              >
+                No AI activity plan yet. Generate one to get personalized
+                guidance.
+              </Text>
+            )}
+
+            <MinimalButton
+              title={
+                membershipType === "basic"
+                  ? "Upgrade to Generate Plan"
+                  : latestApprovedRecommendation
+                    ? "Regenerate Plan"
+                    : "Generate Plan"
+              }
+              onPress={handleGenerateAiPlan}
+              disabled={isGeneratingPlan}
+              loading={isGeneratingPlan}
+              size="md"
+              fullWidth
+              style={{ marginTop: 14 }}
+            />
+          </MinimalCard>
+
           <SectionHeader
             title={`Active Goals (${activeGoals.length})`}
             subtitle="Keep pushing forward!"
@@ -386,6 +549,7 @@ export default function GoalsScreen() {
                 <GoalProgressCard
                   key={goal.id}
                   goal={goal}
+                  aiAligned={isGoalAiAligned(goal)}
                   onComplete={() => handleCompleteGoal(goal)}
                   onDelete={() => handleDeleteGoal(goal.id)}
                 />
@@ -509,6 +673,33 @@ const styles = StyleSheet.create({
     borderTopWidth: 1,
     borderTopColor: "rgba(0,0,0,0.05)",
   },
+  aiPlanCard: {
+    padding: 18,
+    marginBottom: 16,
+  },
+  aiPlanHeader: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+  },
+  aiPlanHeaderLeft: {
+    flexDirection: "row",
+    alignItems: "center",
+    flex: 1,
+    marginRight: 12,
+  },
+  aiPlanIcon: {
+    width: 40,
+    height: 40,
+    borderRadius: 12,
+    justifyContent: "center",
+    alignItems: "center",
+    marginRight: 12,
+  },
+  showPlanButton: {
+    marginTop: 8,
+    alignSelf: "flex-start",
+  },
   chartSection: {
     marginBottom: 20,
   },

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

@@ -8,8 +8,9 @@ import {
   Animated,
   TouchableOpacity,
   Alert,
+  AppState,
 } from "react-native";
-import { useUser } from "@clerk/clerk-expo";
+import { useAuth, useUser } from "@clerk/clerk-expo";
 import { useState, useCallback, useEffect, useRef, useMemo } from "react";
 import { useFocusEffect } from "@react-navigation/native";
 import AsyncStorage from "@react-native-async-storage/async-storage";
@@ -26,6 +27,8 @@ import { AddWaterModal } from "../../components/AddWaterModal";
 import { ScanFoodModal } from "../../components/ScanFoodModal";
 import { ActivityRing } from "../../components/ActivityRing";
 import { useMembership } from "../../hooks/useMembership";
+import { attendanceApi, type Attendance } from "../../api/attendance";
+import { useDailySteps } from "../../hooks/useDailySteps";
 import {
   checkInsToActivities,
   completedGoalsToActivities,
@@ -42,10 +45,46 @@ 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 { getToken } = useAuth();
   const { colors, typography } = useTheme();
+  const {
+    steps,
+    goal: stepsGoal,
+    loading: stepsLoading,
+    supported: stepsSupported,
+    permissionGranted: stepsPermissionGranted,
+  } = useDailySteps();
   const { features, membershipType } = useMembership();
   const { refetchStatistics, forceRefresh, statistics, loading } =
     useStatistics();
@@ -56,17 +95,177 @@ export default function HomeScreen() {
   const [scanFoodModalVisible, setScanFoodModalVisible] = useState(false);
   const [calories, setCalories] = useState(0);
   const [waterIntake, setWaterIntake] = useState(0);
+  const [activeWorkoutSession, setActiveWorkoutSession] =
+    useState<Attendance | null>(null);
+  const [workoutActionLoading, setWorkoutActionLoading] = useState(false);
+  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]);
+
+  const fetchActiveWorkoutSession = useCallback(async () => {
+    try {
+      const token = await getToken();
+      if (!token) {
+        setActiveWorkoutSession(null);
+        return;
+      }
+
+      const history = await attendanceApi.getHistory(token);
+      if (history.length > 0 && !history[0].checkOutTime) {
+        setActiveWorkoutSession(history[0]);
+      } else {
+        setActiveWorkoutSession(null);
+      }
+    } catch {
+      setActiveWorkoutSession(null);
+    }
+  }, [getToken]);
 
   useFocusEffect(
     useCallback(() => {
+      void reconcileDailyMetrics();
+      void fetchActiveWorkoutSession();
       refetchStatistics();
       refetchGoals();
-    }, [refetchStatistics, refetchGoals]),
+    }, [
+      fetchActiveWorkoutSession,
+      reconcileDailyMetrics,
+      refetchStatistics,
+      refetchGoals,
+    ]),
   );
 
+  const handleWorkoutAction = useCallback(async () => {
+    try {
+      setWorkoutActionLoading(true);
+      const token = await getToken();
+      if (!token) {
+        Alert.alert("Sign in required", "Please sign in to log your workout.");
+        return;
+      }
+
+      if (activeWorkoutSession) {
+        await attendanceApi.checkOut(token);
+        Alert.alert("Workout logged", "Session ended successfully.");
+      } else {
+        await attendanceApi.checkIn("gym", token);
+        Alert.alert("Workout started", "Session started successfully.");
+      }
+
+      await Promise.all([
+        fetchActiveWorkoutSession(),
+        forceRefresh(),
+        refetchStatistics(),
+      ]);
+    } catch (error: unknown) {
+      const message =
+        error instanceof Error
+          ? error.message
+          : "Unable to update workout session. Please try again.";
+      Alert.alert("Workout action failed", message);
+    } finally {
+      setWorkoutActionLoading(false);
+    }
+  }, [
+    activeWorkoutSession,
+    fetchActiveWorkoutSession,
+    forceRefresh,
+    getToken,
+    refetchStatistics,
+  ]);
+
   const onRefresh = useCallback(async () => {
     setRefreshing(true);
     await Promise.all([forceRefresh(), refetchGoals()]);
@@ -80,23 +279,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, {
@@ -113,7 +305,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, {
@@ -129,59 +325,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 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;
           };
 
-  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));
+          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;
@@ -238,7 +456,7 @@ export default function HomeScreen() {
               {user?.firstName || "Champion"}
             </Text>
             <Text style={[typography.body, { color: colors.textSecondary }]}>
-              {getMotivationalMessage()}
+              {motivationalMessage}
             </Text>
           </View>
           <TouchableOpacity activeOpacity={0.8}>
@@ -350,6 +568,57 @@ export default function HomeScreen() {
           </MinimalCard>
         </View>
 
+        {/* Steps */}
+        <View style={styles.section}>
+          <SectionHeader title="Steps" subtitle="Daily movement progress" />
+          <MinimalCard variant="bordered" style={styles.progressCard}>
+            <View style={styles.progressHeader}>
+              <View style={styles.progressLabelRow}>
+                <View
+                  style={[
+                    styles.progressIcon,
+                    { backgroundColor: `${colors.workouts}20` },
+                  ]}
+                >
+                  <Text style={{ fontSize: 20 }}>👣</Text>
+                </View>
+                <View style={{ marginLeft: 12 }}>
+                  <Text style={[typography.h4, { color: colors.textPrimary }]}>
+                    Steps
+                  </Text>
+                  <Text
+                    style={[typography.caption, { color: colors.textTertiary }]}
+                  >
+                    {stepsLoading
+                      ? "Loading steps..."
+                      : !stepsSupported
+                        ? "Step tracking not supported on this device"
+                        : !stepsPermissionGranted
+                          ? "Enable motion access in settings"
+                          : steps >= stepsGoal
+                            ? "Daily step goal reached!"
+                            : `${Math.max(0, stepsGoal - steps)} steps remaining`}
+                  </Text>
+                </View>
+              </View>
+              <Text
+                style={[typography.h3, { color: colors.workouts }]}
+                numberOfLines={1}
+                adjustsFontSizeToFit
+                minimumFontScale={0.7}
+              >
+                {stepsLoading ? "--" : `${steps}/${stepsGoal}`}
+              </Text>
+            </View>
+            <ProgressBar
+              progress={Math.min(steps / stepsGoal, 1)}
+              color={colors.workouts}
+              height={12}
+              style={{ marginTop: 16 }}
+            />
+          </MinimalCard>
+        </View>
+
         {/* Quick Actions */}
         <View style={styles.section}>
           <SectionHeader
@@ -358,11 +627,17 @@ export default function HomeScreen() {
           />
           <View style={styles.quickActionsGrid}>
             <TouchableOpacity
-              onPress={() => console.log("Log workout")}
+              onPress={handleWorkoutAction}
+              disabled={workoutActionLoading}
               activeOpacity={0.85}
               style={[
                 styles.quickActionCard,
-                { backgroundColor: colors.primary },
+                {
+                  backgroundColor: activeWorkoutSession
+                    ? colors.warning
+                    : colors.primary,
+                  opacity: workoutActionLoading ? 0.7 : 1,
+                },
               ]}
             >
               <View
@@ -371,12 +646,16 @@ export default function HomeScreen() {
                   { backgroundColor: "rgba(255,255,255,0.2)" },
                 ]}
               >
-                <Ionicons name="barbell" size={28} color={colors.white} />
+                <Ionicons
+                  name={activeWorkoutSession ? "stop-circle" : "barbell"}
+                  size={28}
+                  color={colors.white}
+                />
               </View>
               <Text
                 style={[typography.h4, { color: colors.white, marginTop: 12 }]}
               >
-                Workout
+                {activeWorkoutSession ? "End Workout" : "Start Workout"}
               </Text>
               <Text
                 style={[
@@ -384,7 +663,16 @@ export default function HomeScreen() {
                   { color: "rgba(255,255,255,0.7)", marginTop: 4 },
                 ]}
               >
-                Log your session
+                {activeWorkoutSession
+                  ? `In session since ${new Date(
+                      activeWorkoutSession.checkInTime,
+                    ).toLocaleTimeString([], {
+                      hour: "2-digit",
+                      minute: "2-digit",
+                    })}`
+                  : workoutActionLoading
+                    ? "Updating session..."
+                    : "Log your session"}
               </Text>
             </TouchableOpacity>
 
@@ -790,7 +1078,12 @@ const styles = StyleSheet.create({
     justifyContent: "space-between",
     alignItems: "center",
   },
-  progressLabelRow: { flexDirection: "row", alignItems: "center" },
+  progressLabelRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    flex: 1,
+    minWidth: 0,
+  },
   progressIcon: {
     width: 48,
     height: 48,

apps/mobile/src/app/_layout.tsx

@@ -11,6 +11,7 @@ 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";
 
@@ -180,11 +181,13 @@ export default function RootLayout() {
             <ThemeProvider>
               <NotificationsProvider>
                 <StatisticsProvider>
+                  <MembershipProvider>
                     <FitnessGoalsProvider>
                       <RecommendationsProvider>
                         <AppContent />
                       </RecommendationsProvider>
                     </FitnessGoalsProvider>
+                  </MembershipProvider>
                 </StatisticsProvider>
               </NotificationsProvider>
             </ThemeProvider>

apps/mobile/src/app/personal-details.tsx

@@ -1,162 +1,147 @@
-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';
+  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 { 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 || '',
+    firstName: user?.firstName || "",
+    lastName: user?.lastName || "",
+    email: user?.primaryEmailAddress?.emailAddress || "",
+    phone: user?.primaryPhoneNumber?.phoneNumber || "",
   });
 
+  const updateField = (field: "firstName" | "lastName", value: string) => {
+    setFormData((prev) => ({ ...prev, [field]: value }));
+  };
+
   const handleSave = async () => {
     setLoading(true);
     try {
-            // Update user profile via Clerk
       await user?.update({
         firstName: formData.firstName,
         lastName: formData.lastName,
       });
 
-            Alert.alert('Success', 'Personal details updated successfully', [
-                { text: 'OK', onPress: () => router.back() },
+      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.');
+    } catch {
+      Alert.alert(
+        "Error",
+        "Failed to update personal details. Please try again.",
+      );
     } finally {
       setLoading(false);
     }
   };
 
-    const updateField = (field: string, value: string) => {
-        setFormData(prev => ({ ...prev, [field]: value }));
-    };
-
   return (
     <>
       <Stack.Screen options={{ headerShown: false }} />
-            <View style={styles.container}>
-                {/* Header */}
-                <LinearGradient
-                    colors={theme.gradients.primary}
-                    style={styles.header}
+      <View style={[styles.container, { backgroundColor: colors.background }]}>
+        <View
+          style={[styles.header, { borderBottomColor: colors.borderLight }]}
         >
           <TouchableOpacity
-                        style={styles.backButton}
+            style={[
+              styles.backButton,
+              { backgroundColor: colors.surfaceElevated },
+            ]}
             onPress={() => router.back()}
+            activeOpacity={0.8}
           >
-                        <Ionicons name="arrow-back" size={24} color="#fff" />
+            <Ionicons name="arrow-back" size={20} color={colors.textPrimary} />
           </TouchableOpacity>
-                    <Text style={styles.headerTitle}>Personal Details</Text>
-                    <View style={{ width: 40 }} />
-                </LinearGradient>
+          <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}
+          <MinimalCard variant="elevated" style={styles.card}>
+            <Input
+              label="First Name"
               value={formData.firstName}
-                                onChangeText={(value) => updateField('firstName', value)}
+              onChangeText={(value) => updateField("firstName", value)}
               placeholder="Enter first name"
-                                placeholderTextColor={theme.colors.gray400}
             />
-                        </View>
-                    </View>
 
-                    {/* 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}
+            <Input
+              label="Last Name"
               value={formData.lastName}
-                                onChangeText={(value) => updateField('lastName', value)}
+              onChangeText={(value) => updateField("lastName", value)}
               placeholder="Enter last name"
-                                placeholderTextColor={theme.colors.gray400}
             />
-                        </View>
-                    </View>
 
-                    {/* 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}
+            <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 }]}
               >
-                        <LinearGradient
-                            colors={theme.gradients.primary}
-                            style={styles.saveButtonGradient}
-                        >
-                            <Ionicons name="checkmark-circle" size={20} color="#fff" />
-                            <Text style={styles.saveButtonText}>
-                                {loading ? 'Saving...' : 'Save Changes'}
+                Read-only in app settings
               </Text>
-                        </LinearGradient>
-                    </TouchableOpacity>
             </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>
     </>
   );
@@ -165,105 +150,44 @@ export default function PersonalDetailsScreen() {
 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,
+    paddingTop: 56,
+    paddingBottom: 12,
     paddingHorizontal: 20,
+    borderBottomWidth: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
   },
   backButton: {
-        width: 40,
-        height: 40,
-        borderRadius: 20,
-        backgroundColor: 'rgba(255, 255, 255, 0.2)',
-        justifyContent: 'center',
-        alignItems: 'center',
+    width: 36,
+    height: 36,
+    borderRadius: 10,
+    alignItems: "center",
+    justifyContent: "center",
   },
-    headerTitle: {
-        fontSize: theme.typography.fontSize['2xl'],
-        fontWeight: theme.typography.fontWeight.bold,
-        color: '#fff',
+  backButtonPlaceholder: {
+    width: 36,
+    height: 36,
   },
   content: {
     flex: 1,
   },
   scrollContent: {
     padding: 20,
-        paddingBottom: 100,
+    paddingBottom: 80,
   },
-    field: {
-        marginBottom: 24,
+  card: {
+    borderRadius: 16,
   },
-    label: {
-        fontSize: theme.typography.fontSize.sm,
-        fontWeight: theme.typography.fontWeight.semibold,
-        color: theme.colors.gray700,
-        marginBottom: 8,
+  readOnlyField: {
+    marginTop: 8,
+    marginBottom: 12,
+    gap: 4,
   },
-    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',
+  loadingRow: {
+    marginTop: 16,
+    alignItems: "center",
   },
 });

apps/mobile/src/components/AttendanceCalendar.tsx

@@ -1,303 +0,0 @@
-import React, { useState, useEffect } from "react";
-import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
-import { LinearGradient } from "expo-linear-gradient";
-import { Ionicons } from "@expo/vector-icons";
-import { theme } from "../styles/theme";
-
-interface AttendanceRecord {
-  id: string;
-  checkInTime: string;
-  checkOutTime?: string | null;
-  duration?: number | null;
-}
-
-interface AttendanceCalendarProps {
-  attendanceRecords: AttendanceRecord[];
-}
-
-export function AttendanceCalendar({
-  attendanceRecords,
-}: AttendanceCalendarProps) {
-  const [currentMonth, setCurrentMonth] = useState(new Date());
-  const [calendarDays, setCalendarDays] = useState<
-    Array<{ date: Date | null; hasAttendance: boolean; isToday: boolean }>
-  >([]);
-
-  useEffect(() => {
-    generateCalendar(currentMonth);
-  }, [currentMonth, attendanceRecords]);
-
-  const generateCalendar = (month: Date) => {
-    const year = month.getFullYear();
-    const monthIndex = month.getMonth();
-
-    // Get first day of month and number of days
-    const firstDay = new Date(year, monthIndex, 1);
-    const lastDay = new Date(year, monthIndex + 1, 0);
-    const daysInMonth = lastDay.getDate();
-    const startingDayOfWeek = firstDay.getDay();
-
-    // Create attendance lookup set
-    const attendanceDates = new Set(
-      attendanceRecords.map((record) =>
-        new Date(record.checkInTime).toDateString(),
-      ),
-    );
-
-    const today = new Date().toDateString();
-
-    // Build calendar array
-    const days: Array<{
-      date: Date | null;
-      hasAttendance: boolean;
-      isToday: boolean;
-    }> = [];
-
-    // Add empty cells for days before month starts
-    for (let i = 0; i < startingDayOfWeek; i++) {
-      days.push({ date: null, hasAttendance: false, isToday: false });
-    }
-
-    // Add days of the month
-    for (let day = 1; day <= daysInMonth; day++) {
-      const date = new Date(year, monthIndex, day);
-      const dateString = date.toDateString();
-      days.push({
-        date,
-        hasAttendance: attendanceDates.has(dateString),
-        isToday: dateString === today,
-      });
-    }
-
-    setCalendarDays(days);
-  };
-
-  const goToPreviousMonth = () => {
-    setCurrentMonth(
-      new Date(currentMonth.getFullYear(), currentMonth.getMonth() - 1),
-    );
-  };
-
-  const goToNextMonth = () => {
-    setCurrentMonth(
-      new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1),
-    );
-  };
-
-  const monthName = currentMonth.toLocaleDateString("en-US", {
-    month: "long",
-    year: "numeric",
-  });
-
-  return (
-    <View style={styles.container}>
-      <LinearGradient
-        colors={[theme.colors.white, theme.colors.gray50]}
-        style={[styles.card, theme.shadows.medium]}
-      >
-        {/* Header */}
-        <View style={styles.header}>
-          <Text style={styles.title}>Attendance Calendar</Text>
-        </View>
-
-        {/* Month Navigation */}
-        <View style={styles.monthNav}>
-          <TouchableOpacity
-            onPress={goToPreviousMonth}
-            style={styles.navButton}
-          >
-            <Ionicons
-              name="chevron-back"
-              size={20}
-              color={theme.colors.primary}
-            />
-          </TouchableOpacity>
-          <Text style={styles.monthText}>{monthName}</Text>
-          <TouchableOpacity onPress={goToNextMonth} style={styles.navButton}>
-            <Ionicons
-              name="chevron-forward"
-              size={20}
-              color={theme.colors.primary}
-            />
-          </TouchableOpacity>
-        </View>
-
-        {/* Day Headers */}
-        <View style={styles.dayHeaders}>
-          {["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"].map((day) => (
-            <Text key={day} style={styles.dayHeader}>
-              {day}
-            </Text>
-          ))}
-        </View>
-
-        {/* Calendar Grid */}
-        <View style={styles.calendarGrid}>
-          {calendarDays.map((day, index) => (
-            <View key={index} style={styles.dayCell}>
-              {day.date ? (
-                <View
-                  style={[
-                    styles.dayContent,
-                    day.isToday && styles.todayContent,
-                    day.hasAttendance && styles.attendanceContent,
-                  ]}
-                >
-                  <Text
-                    style={[
-                      styles.dayText,
-                      day.isToday && styles.todayText,
-                      day.hasAttendance && styles.attendanceText,
-                    ]}
-                  >
-                    {day.date.getDate()}
-                  </Text>
-                  {day.hasAttendance && <View style={styles.attendanceDot} />}
-                </View>
-              ) : (
-                <View style={styles.emptyCell} />
-              )}
-            </View>
-          ))}
-        </View>
-
-        {/* Legend */}
-        <View style={styles.legend}>
-          <View style={styles.legendItem}>
-            <View style={styles.legendDotAttendance} />
-            <Text style={styles.legendText}>Attended</Text>
-          </View>
-          <View style={styles.legendItem}>
-            <View style={styles.legendDotToday} />
-            <Text style={styles.legendText}>Today</Text>
-          </View>
-        </View>
-      </LinearGradient>
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    paddingHorizontal: 20,
-    marginBottom: 20,
-  },
-  card: {
-    borderRadius: theme.borderRadius["2xl"],
-    padding: 20,
-  },
-  header: {
-    marginBottom: 16,
-  },
-  title: {
-    fontSize: theme.typography.fontSize.xl,
-    fontWeight: theme.typography.fontWeight.bold,
-    color: theme.colors.gray800,
-  },
-  monthNav: {
-    flexDirection: "row",
-    justifyContent: "space-between",
-    alignItems: "center",
-    marginBottom: 16,
-    paddingHorizontal: 8,
-  },
-  navButton: {
-    padding: 8,
-  },
-  monthText: {
-    fontSize: theme.typography.fontSize.lg,
-    fontWeight: theme.typography.fontWeight.semibold,
-    color: theme.colors.gray700,
-  },
-  dayHeaders: {
-    flexDirection: "row",
-    marginBottom: 8,
-  },
-  dayHeader: {
-    flex: 1,
-    textAlign: "center",
-    fontSize: theme.typography.fontSize.xs,
-    fontWeight: theme.typography.fontWeight.semibold,
-    color: theme.colors.gray500,
-  },
-  calendarGrid: {
-    flexDirection: "row",
-    flexWrap: "wrap",
-  },
-  dayCell: {
-    width: `${100 / 7}%`,
-    aspectRatio: 1,
-    padding: 2,
-  },
-  dayContent: {
-    flex: 1,
-    justifyContent: "center",
-    alignItems: "center",
-    borderRadius: theme.borderRadius.md,
-    position: "relative",
-  },
-  todayContent: {
-    backgroundColor: theme.colors.primaryLight,
-    borderWidth: 1,
-    borderColor: theme.colors.primary,
-  },
-  attendanceContent: {
-    backgroundColor: theme.colors.successLight,
-  },
-  emptyCell: {
-    flex: 1,
-  },
-  dayText: {
-    fontSize: theme.typography.fontSize.sm,
-    color: theme.colors.gray700,
-    fontWeight: theme.typography.fontWeight.medium,
-  },
-  todayText: {
-    color: theme.colors.white,
-    fontWeight: theme.typography.fontWeight.bold,
-  },
-  attendanceText: {
-    color: theme.colors.white,
-    fontWeight: theme.typography.fontWeight.bold,
-  },
-  attendanceDot: {
-    position: "absolute",
-    bottom: 2,
-    width: 4,
-    height: 4,
-    borderRadius: 2,
-    backgroundColor: theme.colors.white,
-  },
-  legend: {
-    flexDirection: "row",
-    justifyContent: "center",
-    gap: 20,
-    marginTop: 16,
-    paddingTop: 16,
-    borderTopWidth: 1,
-    borderTopColor: theme.colors.gray200,
-  },
-  legendItem: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 6,
-  },
-  legendDotAttendance: {
-    width: 12,
-    height: 12,
-    borderRadius: 6,
-    backgroundColor: theme.colors.successLight,
-  },
-  legendDotToday: {
-    width: 12,
-    height: 12,
-    borderRadius: 6,
-    backgroundColor: theme.colors.primaryLight,
-    borderWidth: 1,
-    borderColor: theme.colors.primary,
-  },
-  legendText: {
-    fontSize: theme.typography.fontSize.xs,
-    color: theme.colors.gray600,
-  },
-});

apps/mobile/src/components/CustomTabBar.tsx

@@ -49,8 +49,6 @@ export function CustomTabBar({
               return focused ? "home" : "home-outline";
             case "goals":
               return focused ? "trophy" : "trophy-outline";
-            case "attendance":
-              return focused ? "calendar" : "calendar-outline";
             case "recommendations":
               return focused ? "sparkles" : "sparkles-outline";
             case "profile":
@@ -66,8 +64,6 @@ export function CustomTabBar({
               return "Home";
             case "goals":
               return "Goals";
-            case "attendance":
-              return "Attendance";
             case "recommendations":
               return "Plans";
             case "profile":

apps/mobile/src/components/GoalProgressCard.tsx

@@ -20,6 +20,7 @@ interface GoalProgressCardProps {
   onPress?: () => void;
   onComplete?: () => void;
   onDelete?: () => void;
+  aiAligned?: boolean;
 }
 
 export function GoalProgressCard({
@@ -27,6 +28,7 @@ export function GoalProgressCard({
   onPress,
   onComplete,
   onDelete,
+  aiAligned = false,
 }: GoalProgressCardProps) {
   const { colors, typography } = useTheme();
   const isCompleted = goal.status === "completed";
@@ -277,6 +279,10 @@ export function GoalProgressCard({
               </Text>
             )}
 
+            {aiAligned && !isCompleted && (
+              <Badge variant="info" label="AI-ALIGNED" size="sm" />
+            )}
+
             {isCompleted && goal.completedDate && (
               <Text style={[typography.caption, { color: colors.success }]}>
                 Completed {new Date(goal.completedDate).toLocaleDateString()}

apps/mobile/src/components/Input.tsx

@@ -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,
   },
 });

apps/mobile/src/components/Picker.tsx

@@ -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,
   },
 });

apps/mobile/src/components/ScanFoodModal.tsx

@@ -1,9 +1,24 @@
-import React, { useState, useEffect } from 'react';
-import { View, Text, StyleSheet, Modal, TouchableOpacity, TextInput, Alert } from 'react-native';
-import { CameraView, useCameraPermissions } from 'expo-camera';
-import { Ionicons } from '@expo/vector-icons';
-import { LinearGradient } from 'expo-linear-gradient';
-import { theme } from '../styles/theme';
+import React, { useEffect, useRef, useState } from "react";
+import {
+  ActivityIndicator,
+  Alert,
+  KeyboardAvoidingView,
+  Modal,
+  Platform,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  View,
+} from "react-native";
+import { CameraView, useCameraPermissions } from "expo-camera";
+import { useAuth } from "@clerk/clerk-expo";
+import { Ionicons } from "@expo/vector-icons";
+import { LinearGradient } from "expo-linear-gradient";
+import { addMealEntry } from "../api/nutrition";
+import { lookupFoodByBarcode, type ScannedFoodProduct } from "../api/food";
+import { theme } from "../styles/theme";
 
 interface ScanFoodModalProps {
   visible: boolean;
@@ -11,62 +26,133 @@ interface ScanFoodModalProps {
   onAddFood: (calories: number) => void;
 }
 
-// Mock food database
-const FOOD_DATABASE: { [key: string]: { name: string; calories: number; servingSize: string } } = {
-    '0123456789': { name: 'Apple', calories: 95, servingSize: '1 medium' },
-    '9876543210': { name: 'Banana', calories: 105, servingSize: '1 medium' },
-    '5555555555': { name: 'Protein Bar', calories: 200, servingSize: '1 bar' },
-    '1111111111': { name: 'Greek Yogurt', calories: 150, servingSize: '1 cup' },
-};
+const MEAL_TYPES = ["breakfast", "lunch", "dinner", "snack"] as const;
+type MealType = (typeof MEAL_TYPES)[number];
 
-export function ScanFoodModal({ visible, onClose, onAddFood }: ScanFoodModalProps) {
+export function ScanFoodModal({
+  visible,
+  onClose,
+  onAddFood,
+}: ScanFoodModalProps) {
   const [permission, requestPermission] = useCameraPermissions();
+  const { getToken } = useAuth();
   const [scanned, setScanned] = useState(false);
-    const [foodData, setFoodData] = useState<{ name: string; calories: number; servingSize: string } | null>(null);
-    const [servings, setServings] = useState('1');
+  const [isLookingUp, setIsLookingUp] = useState(false);
+  const [foodData, setFoodData] = useState<ScannedFoodProduct | null>(null);
+  const [notFound, setNotFound] = useState(false);
+  const [manualFoodName, setManualFoodName] = useState("Manual food entry");
+  const [manualCalories, setManualCalories] = useState("");
+  const [servings, setServings] = useState("1");
+  const [mealType, setMealType] = useState<MealType>("snack");
+  const lastScannedRef = useRef<{ code: string; ts: number } | null>(null);
 
   useEffect(() => {
-        if (visible) {
+    if (!visible) return;
     setScanned(false);
+    setIsLookingUp(false);
     setFoodData(null);
-            setServings('1');
-        }
+    setNotFound(false);
+    setManualFoodName("Manual food entry");
+    setManualCalories("");
+    setServings("1");
+    setMealType("snack");
   }, [visible]);
 
-    const handleBarCodeScanned = ({ data }: { data: string }) => {
+  const handleReset = () => {
+    setScanned(false);
+    setIsLookingUp(false);
+    setFoodData(null);
+    setNotFound(false);
+    setManualFoodName("Manual food entry");
+    setManualCalories("");
+    setServings("1");
+    setMealType("snack");
+  };
+
+  const handleBarCodeScanned = async ({ data }: { data: string }) => {
     if (scanned) return;
 
+    const normalized = data.replace(/\D/g, "");
+    const now = Date.now();
+    if (
+      lastScannedRef.current &&
+      lastScannedRef.current.code === normalized &&
+      now - lastScannedRef.current.ts < 2500
+    ) {
+      return;
+    }
+    lastScannedRef.current = { code: normalized, ts: now };
+
     setScanned(true);
+    setIsLookingUp(true);
+    setNotFound(false);
+    setFoodData(null);
 
-        // Look up food in database
-        const food = FOOD_DATABASE[data];
-
-        if (food) {
-            setFoodData(food);
+    try {
+      const token = await getToken();
+      const product = await lookupFoodByBarcode(normalized, token);
+      setFoodData(product);
+    } catch (error: any) {
+      const status = error?.response?.status;
+      if (status === 404) {
+        setNotFound(true);
+      } else if (status === 403) {
+        Alert.alert(
+          "Premium Feature",
+          "Barcode food scanning is available on Premium and VIP memberships.",
+        );
+        onClose();
       } else {
-            // Mock data for unknown barcodes
-            setFoodData({
-                name: 'Unknown Food',
-                calories: 150,
-                servingSize: '1 serving'
-            });
+        Alert.alert("Scan Failed", "Unable to lookup this barcode right now.");
+        setScanned(false);
+      }
+    } finally {
+      setIsLookingUp(false);
     }
   };
 
-    const handleConfirm = () => {
+  const getTotalCalories = () => {
     if (foodData) {
-            const totalCalories = foodData.calories * parseFloat(servings || '1');
+      return Math.round(
+        foodData.caloriesPerServing * parseFloat(servings || "1"),
+      );
+    }
+
+    const manual = parseInt(manualCalories || "0", 10);
+    return Number.isFinite(manual) && manual > 0 ? manual : 0;
+  };
+
+  const handleConfirm = async () => {
+    const totalCalories = getTotalCalories();
+    if (totalCalories <= 0) {
+      Alert.alert("Invalid calories", "Please enter a valid calorie amount.");
+      return;
+    }
+
+    try {
+      const token = await getToken();
+      await addMealEntry(
+        {
+          mealType,
+          foodName: foodData?.name || manualFoodName,
+          calories: totalCalories,
+          protein: foodData?.macros.protein ?? undefined,
+          carbs: foodData?.macros.carbs ?? undefined,
+          fats: foodData?.macros.fat ?? undefined,
+        },
+        token,
+      );
+
       onAddFood(totalCalories);
       onClose();
+    } catch {
+      Alert.alert(
+        "Could not save",
+        "Failed to add scanned food to nutrition diary.",
+      );
     }
   };
 
-    const handleRescan = () => {
-        setScanned(false);
-        setFoodData(null);
-        setServings('1');
-    };
-
   if (!permission) {
     return null;
   }
@@ -76,17 +162,28 @@ export function ScanFoodModal({ visible, onClose, onAddFood }: ScanFoodModalProp
       <Modal visible={visible} transparent animationType="slide">
         <View style={styles.permissionContainer}>
           <View style={styles.permissionContent}>
-                        <Ionicons name="camera-outline" size={64} color={theme.colors.primary} />
-                        <Text style={styles.permissionTitle}>Camera Permission Required</Text>
+            <Ionicons
+              name="camera-outline"
+              size={64}
+              color={theme.colors.primary}
+            />
+            <Text style={styles.permissionTitle}>
+              Camera Permission Required
+            </Text>
             <Text style={styles.permissionText}>
               We need access to your camera to scan food barcodes.
             </Text>
-                        <TouchableOpacity onPress={requestPermission} style={styles.permissionButtonContainer}>
+            <TouchableOpacity
+              onPress={requestPermission}
+              style={styles.permissionButtonContainer}
+            >
               <LinearGradient
                 colors={theme.gradients.primary}
                 style={styles.permissionButton}
               >
-                                <Text style={styles.permissionButtonText}>Grant Permission</Text>
+                <Text style={styles.permissionButtonText}>
+                  Grant Permission
+                </Text>
               </LinearGradient>
             </TouchableOpacity>
             <TouchableOpacity onPress={onClose} style={styles.cancelButton}>
@@ -98,10 +195,12 @@ export function ScanFoodModal({ visible, onClose, onAddFood }: ScanFoodModalProp
     );
   }
 
+  const showScanner = !foodData && !notFound;
+
   return (
     <Modal visible={visible} animationType="slide">
       <View style={styles.container}>
-                {!foodData ? (
+        {showScanner ? (
           <>
             <View style={styles.header}>
               <TouchableOpacity onPress={onClose} style={styles.closeButton}>
@@ -116,51 +215,108 @@ export function ScanFoodModal({ visible, onClose, onAddFood }: ScanFoodModalProp
               facing="back"
               onBarcodeScanned={scanned ? undefined : handleBarCodeScanned}
               barcodeScannerSettings={{
-                                barcodeTypes: ['ean13', 'ean8', 'upc_a', 'upc_e', 'code128', 'code39'],
+                barcodeTypes: [
+                  "ean13",
+                  "ean8",
+                  "upc_a",
+                  "upc_e",
+                  "code128",
+                  "code39",
+                ],
               }}
             >
               <View style={styles.scanOverlay}>
                 <View style={styles.scanFrame} />
-                                <Text style={styles.scanText}>Position barcode within frame</Text>
+                {isLookingUp ? (
+                  <View style={styles.lookupContainer}>
+                    <ActivityIndicator color="#fff" />
+                    <Text style={styles.scanText}>Looking up product...</Text>
+                  </View>
+                ) : (
+                  <Text style={styles.scanText}>
+                    Position barcode within frame
+                  </Text>
+                )}
               </View>
             </CameraView>
           </>
         ) : (
-                    <View style={styles.resultContainer}>
+          <KeyboardAvoidingView
+            behavior={Platform.OS === "ios" ? "padding" : "height"}
+            style={styles.resultContainer}
+          >
+            <View style={styles.resultSheet}>
               <View style={styles.resultHeader}>
-                            <TouchableOpacity onPress={onClose} style={styles.closeButton}>
-                                <Ionicons name="close" size={28} color={theme.colors.gray900} />
+                <TouchableOpacity
+                  onPress={handleReset}
+                  style={styles.closeButton}
+                >
+                  <Ionicons
+                    name="scan"
+                    size={24}
+                    color={theme.colors.gray700}
+                  />
                 </TouchableOpacity>
-                            <Text style={styles.resultTitle}>Food Details</Text>
-                            <View style={{ width: 28 }} />
+                <Text style={styles.resultTitle}>
+                  {notFound ? "Barcode Not Found" : "Food Details"}
+                </Text>
+                <View style={{ width: 24 }} />
               </View>
 
+              <ScrollView
+                style={styles.resultScroll}
+                contentContainerStyle={styles.resultScrollContent}
+                showsVerticalScrollIndicator={false}
+              >
                 <View style={styles.foodCard}>
+                  {!notFound && foodData ? (
+                    <>
                       <View style={styles.foodIconContainer}>
                         <LinearGradient
                           colors={theme.gradients.success}
                           style={styles.foodIcon}
                         >
-                                    <Ionicons name="restaurant" size={32} color="#fff" />
+                          <Ionicons name="restaurant" size={28} color="#fff" />
                         </LinearGradient>
                       </View>
 
                       <Text style={styles.foodName}>{foodData.name}</Text>
-                            <Text style={styles.servingSize}>{foodData.servingSize}</Text>
+                      <Text style={styles.servingMeta}>
+                        {[foodData.brand, foodData.servingSize]
+                          .filter(Boolean)
+                          .join(" • ")}
+                      </Text>
 
                       <View style={styles.caloriesBadge}>
-                                <Text style={styles.caloriesValue}>{foodData.calories}</Text>
-                                <Text style={styles.caloriesLabel}>kcal per serving</Text>
+                        <Text style={styles.caloriesValue}>
+                          {foodData.caloriesPerServing}
+                        </Text>
+                        <Text style={styles.caloriesLabel}>
+                          kcal per serving
+                        </Text>
                       </View>
 
                       <View style={styles.servingsContainer}>
-                                <Text style={styles.label}>Number of Servings</Text>
+                        <Text style={styles.label}>Servings</Text>
                         <View style={styles.servingsInput}>
                           <TouchableOpacity
-                                        onPress={() => setServings(String(Math.max(0.5, parseFloat(servings || '1') - 0.5)))}
+                            onPress={() =>
+                              setServings(
+                                String(
+                                  Math.max(
+                                    0.5,
+                                    parseFloat(servings || "1") - 0.5,
+                                  ),
+                                ),
+                              )
+                            }
                             style={styles.servingsButton}
                           >
-                                        <Ionicons name="remove" size={20} color={theme.colors.primary} />
+                            <Ionicons
+                              name="remove"
+                              size={20}
+                              color={theme.colors.primary}
+                            />
                           </TouchableOpacity>
                           <TextInput
                             style={styles.servingsValue}
@@ -169,37 +325,106 @@ export function ScanFoodModal({ visible, onClose, onAddFood }: ScanFoodModalProp
                             keyboardType="decimal-pad"
                           />
                           <TouchableOpacity
-                                        onPress={() => setServings(String(parseFloat(servings || '1') + 0.5))}
+                            onPress={() =>
+                              setServings(
+                                String(parseFloat(servings || "1") + 0.5),
+                              )
+                            }
                             style={styles.servingsButton}
                           >
-                                        <Ionicons name="add" size={20} color={theme.colors.primary} />
+                            <Ionicons
+                              name="add"
+                              size={20}
+                              color={theme.colors.primary}
+                            />
                           </TouchableOpacity>
                         </View>
                       </View>
-
-                            <View style={styles.totalCalories}>
-                                <Text style={styles.totalLabel}>Total Calories</Text>
-                                <Text style={styles.totalValue}>
-                                    {Math.round(foodData.calories * parseFloat(servings || '1'))} kcal
+                    </>
+                  ) : (
+                    <>
+                      <Text style={styles.servingMeta}>
+                        We could not find this product in OpenFoodFacts.
                       </Text>
+
+                      <Text style={styles.label}>Food Name</Text>
+                      <TextInput
+                        style={styles.input}
+                        value={manualFoodName}
+                        onChangeText={setManualFoodName}
+                        placeholder="Enter food name"
+                        placeholderTextColor={theme.colors.gray400}
+                      />
+
+                      <Text style={styles.label}>Calories</Text>
+                      <View style={styles.caloriesInputContainer}>
+                        <TextInput
+                          style={[styles.input, styles.caloriesInput]}
+                          value={manualCalories}
+                          onChangeText={setManualCalories}
+                          keyboardType="number-pad"
+                          placeholder="0"
+                          placeholderTextColor={theme.colors.gray400}
+                        />
+                        <Text style={styles.caloriesUnit}>kcal</Text>
                       </View>
+                    </>
+                  )}
+
+                  <View style={styles.mealTypeContainer}>
+                    <Text style={styles.label}>Meal Type</Text>
+                    <View style={styles.mealTypeRow}>
+                      {MEAL_TYPES.map((type) => {
+                        const active = mealType === type;
+                        return (
+                          <TouchableOpacity
+                            key={type}
+                            onPress={() => setMealType(type)}
+                            style={[
+                              styles.mealTypeChip,
+                              active && styles.mealTypeChipActive,
+                            ]}
+                          >
+                            <Text
+                              style={[
+                                styles.mealTypeText,
+                                active && styles.mealTypeTextActive,
+                              ]}
+                            >
+                              {type.charAt(0).toUpperCase() + type.slice(1)}
+                            </Text>
+                          </TouchableOpacity>
+                        );
+                      })}
+                    </View>
+                  </View>
+                </View>
+              </ScrollView>
+
+              <View style={styles.footerSummary}>
+                <Text style={styles.totalLabel}>Total Calories</Text>
+                <Text style={styles.totalValue}>{getTotalCalories()} kcal</Text>
               </View>
 
               <View style={styles.buttonRow}>
-                            <TouchableOpacity onPress={handleRescan} style={styles.rescanButton}>
-                                <Text style={styles.rescanButtonText}>Scan Again</Text>
+                <TouchableOpacity onPress={onClose} style={styles.rejectButton}>
+                  <Text style={styles.rejectButtonText}>Reject</Text>
                 </TouchableOpacity>
 
-                            <TouchableOpacity onPress={handleConfirm} style={styles.confirmButtonContainer}>
+                <TouchableOpacity
+                  onPress={handleConfirm}
+                  style={styles.confirmButtonContainer}
+                >
                   <LinearGradient
                     colors={theme.gradients.success}
                     style={styles.confirmButton}
                   >
-                                    <Text style={styles.confirmButtonText}>Add to Diary</Text>
+                    <Text style={styles.confirmButtonText}>Add to Count</Text>
                   </LinearGradient>
                 </TouchableOpacity>
               </View>
             </View>
+          </KeyboardAvoidingView>
         )}
       </View>
     </Modal>
@@ -209,106 +434,129 @@ export function ScanFoodModal({ visible, onClose, onAddFood }: ScanFoodModalProp
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-        backgroundColor: '#000',
+    backgroundColor: "#000",
   },
   header: {
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-        alignItems: 'center',
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
     padding: 20,
     paddingTop: 60,
-        backgroundColor: 'rgba(0, 0, 0, 0.8)',
+    backgroundColor: "rgba(0, 0, 0, 0.8)",
   },
   closeButton: {
     padding: 4,
   },
   title: {
     fontSize: 18,
-        fontWeight: '700',
-        color: '#fff',
+    fontWeight: "700",
+    color: "#fff",
   },
   camera: {
     flex: 1,
   },
   scanOverlay: {
     flex: 1,
-        justifyContent: 'center',
-        alignItems: 'center',
-        backgroundColor: 'rgba(0, 0, 0, 0.3)',
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: "rgba(0, 0, 0, 0.3)",
   },
   scanFrame: {
     width: 250,
     height: 250,
     borderWidth: 2,
-        borderColor: '#fff',
+    borderColor: "#fff",
     borderRadius: 20,
-        backgroundColor: 'transparent',
+    backgroundColor: "transparent",
   },
   scanText: {
-        color: '#fff',
+    color: "#fff",
     fontSize: 16,
-        fontWeight: '600',
+    fontWeight: "600",
+    marginTop: 16,
+    textAlign: "center",
+  },
+  lookupContainer: {
+    alignItems: "center",
     marginTop: 24,
-        textAlign: 'center',
   },
   resultContainer: {
     flex: 1,
+    backgroundColor: "rgba(0, 0, 0, 0.35)",
+    justifyContent: "flex-end",
+  },
+  resultSheet: {
     backgroundColor: theme.colors.background,
+    borderTopLeftRadius: 24,
+    borderTopRightRadius: 24,
+    maxHeight: "80%",
   },
   resultHeader: {
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        padding: 20,
-        paddingTop: 60,
-        backgroundColor: '#fff',
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    paddingHorizontal: 20,
+    paddingVertical: 14,
+    backgroundColor: "#fff",
+    borderTopLeftRadius: 24,
+    borderTopRightRadius: 24,
+    borderBottomWidth: 1,
+    borderBottomColor: theme.colors.gray100,
+  },
+  resultScroll: {
+    flexGrow: 0,
+  },
+  resultScrollContent: {
+    paddingBottom: 12,
   },
   resultTitle: {
     fontSize: 18,
-        fontWeight: '700',
+    fontWeight: "700",
     color: theme.colors.gray900,
   },
   foodCard: {
-        margin: 20,
-        padding: 24,
-        backgroundColor: '#fff',
-        borderRadius: 24,
-        alignItems: 'center',
+    marginHorizontal: 16,
+    marginTop: 12,
+    padding: 16,
+    backgroundColor: "#fff",
+    borderRadius: 16,
+    alignItems: "center",
     ...theme.shadows.medium,
   },
   foodIconContainer: {
-        marginBottom: 16,
+    marginBottom: 10,
   },
   foodIcon: {
-        width: 80,
-        height: 80,
-        borderRadius: 40,
-        justifyContent: 'center',
-        alignItems: 'center',
+    width: 64,
+    height: 64,
+    borderRadius: 32,
+    justifyContent: "center",
+    alignItems: "center",
   },
   foodName: {
-        fontSize: 24,
-        fontWeight: '700',
+    fontSize: 20,
+    fontWeight: "700",
     color: theme.colors.gray900,
-        marginBottom: 8,
-        textAlign: 'center',
+    marginBottom: 4,
+    textAlign: "center",
   },
-    servingSize: {
-        fontSize: 16,
+  servingMeta: {
+    fontSize: 14,
     color: theme.colors.gray600,
-        marginBottom: 24,
+    marginBottom: 12,
+    textAlign: "center",
   },
   caloriesBadge: {
     backgroundColor: theme.colors.gray50,
-        paddingHorizontal: 24,
-        paddingVertical: 16,
-        borderRadius: 16,
-        alignItems: 'center',
-        marginBottom: 32,
+    paddingHorizontal: 18,
+    paddingVertical: 10,
+    borderRadius: 12,
+    alignItems: "center",
+    marginBottom: 14,
   },
   caloriesValue: {
-        fontSize: 32,
-        fontWeight: '700',
+    fontSize: 26,
+    fontWeight: "700",
     color: theme.colors.primary,
   },
   caloriesLabel: {
@@ -317,19 +565,49 @@ const styles = StyleSheet.create({
     marginTop: 4,
   },
   servingsContainer: {
-        width: '100%',
-        marginBottom: 24,
+    width: "100%",
+    marginBottom: 14,
+  },
+  mealTypeContainer: {
+    width: "100%",
+    marginBottom: 6,
+  },
+  mealTypeRow: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: 8,
+  },
+  mealTypeChip: {
+    paddingHorizontal: 14,
+    paddingVertical: 8,
+    borderRadius: 18,
+    backgroundColor: theme.colors.gray100,
+    borderWidth: 1,
+    borderColor: theme.colors.gray200,
+  },
+  mealTypeChipActive: {
+    backgroundColor: theme.colors.primary,
+    borderColor: theme.colors.primary,
+  },
+  mealTypeText: {
+    fontSize: 13,
+    fontWeight: "600",
+    color: theme.colors.gray700,
+  },
+  mealTypeTextActive: {
+    color: "#fff",
   },
   label: {
     fontSize: 16,
-        fontWeight: '600',
+    fontWeight: "600",
     color: theme.colors.gray700,
     marginBottom: 12,
+    alignSelf: "flex-start",
   },
   servingsInput: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'center',
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
     gap: 16,
   },
   servingsButton: {
@@ -337,50 +615,84 @@ const styles = StyleSheet.create({
     height: 40,
     borderRadius: 20,
     backgroundColor: theme.colors.gray100,
-        justifyContent: 'center',
-        alignItems: 'center',
+    justifyContent: "center",
+    alignItems: "center",
   },
   servingsValue: {
     fontSize: 24,
-        fontWeight: '700',
+    fontWeight: "700",
     color: theme.colors.gray900,
-        textAlign: 'center',
+    textAlign: "center",
     minWidth: 60,
   },
+  input: {
+    width: "100%",
+    backgroundColor: theme.colors.gray50,
+    borderWidth: 1,
+    borderColor: theme.colors.gray200,
+    borderRadius: 16,
+    padding: 16,
+    fontSize: 16,
+    color: theme.colors.gray900,
+    marginBottom: 16,
+  },
+  caloriesInputContainer: {
+    width: "100%",
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  caloriesInput: {
+    flex: 1,
+    marginBottom: 0,
+    marginRight: 12,
+  },
+  caloriesUnit: {
+    fontSize: 16,
+    fontWeight: "600",
+    color: theme.colors.gray500,
+  },
   totalCalories: {
-        width: '100%',
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        paddingTop: 24,
+    display: "none",
+  },
+  footerSummary: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    paddingHorizontal: 20,
+    paddingTop: 10,
+    paddingBottom: 10,
     borderTopWidth: 1,
     borderTopColor: theme.colors.gray200,
+    backgroundColor: "#fff",
   },
   totalLabel: {
     fontSize: 16,
-        fontWeight: '600',
+    fontWeight: "600",
     color: theme.colors.gray700,
   },
   totalValue: {
     fontSize: 20,
-        fontWeight: '700',
+    fontWeight: "700",
     color: theme.colors.gray900,
   },
   buttonRow: {
-        flexDirection: 'row',
-        padding: 20,
+    flexDirection: "row",
+    paddingHorizontal: 20,
+    paddingTop: 8,
+    paddingBottom: 16,
     gap: 12,
+    backgroundColor: "#fff",
   },
-    rescanButton: {
+  rejectButton: {
     flex: 1,
     paddingVertical: 16,
     borderRadius: 20,
     backgroundColor: theme.colors.gray100,
-        alignItems: 'center',
+    alignItems: "center",
   },
-    rescanButtonText: {
+  rejectButtonText: {
     fontSize: 16,
-        fontWeight: '700',
+    fontWeight: "700",
     color: theme.colors.gray700,
   },
   confirmButtonContainer: {
@@ -389,30 +701,30 @@ const styles = StyleSheet.create({
   confirmButton: {
     paddingVertical: 16,
     borderRadius: 20,
-        alignItems: 'center',
+    alignItems: "center",
   },
   confirmButtonText: {
     fontSize: 16,
-        fontWeight: '700',
-        color: '#fff',
+    fontWeight: "700",
+    color: "#fff",
   },
   permissionContainer: {
     flex: 1,
-        justifyContent: 'center',
-        alignItems: 'center',
-        backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: "rgba(0, 0, 0, 0.5)",
   },
   permissionContent: {
-        backgroundColor: '#fff',
+    backgroundColor: "#fff",
     borderRadius: 24,
     padding: 32,
     margin: 20,
-        alignItems: 'center',
+    alignItems: "center",
     ...theme.shadows.strong,
   },
   permissionTitle: {
     fontSize: 20,
-        fontWeight: '700',
+    fontWeight: "700",
     color: theme.colors.gray900,
     marginTop: 16,
     marginBottom: 8,
@@ -420,29 +732,29 @@ const styles = StyleSheet.create({
   permissionText: {
     fontSize: 16,
     color: theme.colors.gray600,
-        textAlign: 'center',
+    textAlign: "center",
     marginBottom: 24,
   },
   permissionButtonContainer: {
-        width: '100%',
+    width: "100%",
     marginBottom: 12,
   },
   permissionButton: {
     paddingVertical: 16,
     borderRadius: 20,
-        alignItems: 'center',
+    alignItems: "center",
   },
   permissionButtonText: {
     fontSize: 16,
-        fontWeight: '700',
-        color: '#fff',
+    fontWeight: "700",
+    color: "#fff",
   },
   cancelButton: {
     paddingVertical: 12,
   },
   cancelButtonText: {
     fontSize: 16,
-        fontWeight: '600',
+    fontWeight: "600",
     color: theme.colors.gray600,
   },
 });

apps/mobile/src/config/api.ts

@@ -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",

apps/mobile/src/contexts/MembershipContext.tsx

@@ -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;
+}

apps/mobile/src/contexts/RecommendationsContext.tsx

@@ -10,6 +10,7 @@ import { useUser, useAuth } from "@clerk/clerk-expo";
 import {
   getRecommendations,
   generateRecommendation,
+  generateSelfRecommendation,
   type Recommendation,
   type GenerateRecommendationRequest,
 } from "../api/recommendations";
@@ -23,6 +24,7 @@ interface RecommendationsContextValue {
   generateNewRecommendation: (
     data: GenerateRecommendationRequest,
   ) => Promise<Recommendation>;
+  generateSelfPlan: () => Promise<Recommendation>;
   clearCache: () => void;
 }
 
@@ -107,6 +109,18 @@ export function RecommendationsProvider({
     [user?.id, getToken],
   );
 
+  const generateSelfPlan = useCallback(async (): Promise<Recommendation> => {
+    if (!user?.id) throw new Error("User not authenticated");
+
+    const token = await getToken();
+    const recommendation = await generateSelfRecommendation(token);
+
+    setRecommendations((prev) => [recommendation, ...prev]);
+    setLastFetchTime(Date.now());
+
+    return recommendation;
+  }, [user?.id, getToken]);
+
   const clearCache = useCallback(() => {
     setRecommendations([]);
     setLoading(false);
@@ -133,6 +147,7 @@ export function RecommendationsProvider({
         error,
         refetchRecommendations,
         generateNewRecommendation,
+        generateSelfPlan,
         clearCache,
       }}
     >

apps/mobile/src/hooks/useDailySteps.ts

@@ -0,0 +1,136 @@
+import { useAuth } from "@clerk/clerk-expo";
+import { Pedometer } from "expo-sensors";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { AppState } from "react-native";
+
+interface DailyStepsState {
+  steps: number;
+  goal: number;
+  loading: boolean;
+  supported: boolean;
+  permissionGranted: boolean;
+  refresh: () => Promise<void>;
+}
+
+const DEFAULT_DAILY_STEPS_GOAL = 8000;
+
+function startOfToday(): Date {
+  const now = new Date();
+  return new Date(now.getFullYear(), now.getMonth(), now.getDate());
+}
+
+function millisecondsUntilNextMidnight(): number {
+  const now = new Date();
+  const nextMidnight = new Date(now);
+  nextMidnight.setHours(24, 0, 0, 0);
+  return Math.max(1000, nextMidnight.getTime() - now.getTime());
+}
+
+export function useDailySteps(): DailyStepsState {
+  const { isSignedIn } = useAuth();
+  const [steps, setSteps] = useState(0);
+  const [loading, setLoading] = useState(true);
+  const [supported, setSupported] = useState(true);
+  const [permissionGranted, setPermissionGranted] = useState(true);
+  const pedometerSubscriptionRef = useRef<ReturnType<
+    typeof Pedometer.watchStepCount
+  > | null>(null);
+  const midnightTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const fetchDailySteps = useCallback(async () => {
+    if (!isSignedIn) {
+      setSteps(0);
+      setLoading(false);
+      return;
+    }
+
+    try {
+      setLoading(true);
+      const isAvailable = await Pedometer.isAvailableAsync();
+      setSupported(Boolean(isAvailable));
+
+      if (!isAvailable) {
+        setSteps(0);
+        setPermissionGranted(false);
+        return;
+      }
+
+      const start = startOfToday();
+      const end = new Date();
+      const result = await Pedometer.getStepCountAsync(start, end);
+
+      setSteps(Math.max(0, result.steps ?? 0));
+      setPermissionGranted(true);
+    } catch {
+      setPermissionGranted(false);
+      setSteps(0);
+    } finally {
+      setLoading(false);
+    }
+  }, [isSignedIn]);
+
+  const resetAtMidnight = useCallback(() => {
+    if (midnightTimerRef.current) {
+      clearTimeout(midnightTimerRef.current);
+    }
+
+    midnightTimerRef.current = setTimeout(() => {
+      void fetchDailySteps();
+      resetAtMidnight();
+    }, millisecondsUntilNextMidnight() + 100);
+  }, [fetchDailySteps]);
+
+  useEffect(() => {
+    void fetchDailySteps();
+  }, [fetchDailySteps]);
+
+  useEffect(() => {
+    if (pedometerSubscriptionRef.current) {
+      pedometerSubscriptionRef.current.remove();
+      pedometerSubscriptionRef.current = null;
+    }
+
+    if (!isSignedIn || !supported || !permissionGranted) {
+      return;
+    }
+
+    pedometerSubscriptionRef.current = Pedometer.watchStepCount(
+      (result: { steps: number }) => {
+        setSteps((prev) => Math.max(0, prev + Math.max(0, result.steps ?? 0)));
+      },
+    );
+
+    return () => {
+      if (pedometerSubscriptionRef.current) {
+        pedometerSubscriptionRef.current.remove();
+        pedometerSubscriptionRef.current = null;
+      }
+    };
+  }, [isSignedIn, permissionGranted, supported]);
+
+  useEffect(() => {
+    const subscription = AppState.addEventListener("change", (state) => {
+      if (state === "active") {
+        void fetchDailySteps();
+      }
+    });
+
+    resetAtMidnight();
+
+    return () => {
+      subscription.remove();
+      if (midnightTimerRef.current) {
+        clearTimeout(midnightTimerRef.current);
+      }
+    };
+  }, [fetchDailySteps, resetAtMidnight]);
+
+  return {
+    steps,
+    goal: DEFAULT_DAILY_STEPS_GOAL,
+    loading,
+    supported,
+    permissionGranted,
+    refresh: fetchDailySteps,
+  };
+}

apps/mobile/src/hooks/useMembership.ts

@@ -1,68 +1,5 @@
-import { useAuth, useUser } from "@clerk/clerk-expo";
-import { useEffect, useState } from "react";
-import {
-  getCurrentMembershipType,
-  getMembershipFeatures,
-  type MembershipFeatures,
-  type MembershipType,
-} from "../api/membership";
-import log from "../utils/logger";
+import { useMembershipContext } from "../contexts/MembershipContext";
 
-const BASIC_FEATURES = getMembershipFeatures("basic");
-
-interface UseMembershipResult {
-  membershipType: MembershipType;
-  features: MembershipFeatures;
-  loading: boolean;
-}
-
-export function useMembership(): UseMembershipResult {
-  const { user } = useUser();
-  const { getToken, isSignedIn } = useAuth();
-  const [membershipType, setMembershipType] = useState<MembershipType>("basic");
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    let isMounted = true;
-
-    const loadMembership = async () => {
-      if (!isSignedIn || !user?.id) {
-        if (isMounted) {
-          setMembershipType("basic");
-          setLoading(false);
-        }
-        return;
-      }
-
-      try {
-        setLoading(true);
-        const token = await getToken();
-        const type = await getCurrentMembershipType(user.id, token);
-        if (isMounted) {
-          setMembershipType(type);
-        }
-      } catch (error) {
-        log.error("Failed to load membership", error, { userId: user.id });
-        if (isMounted) {
-          setMembershipType("basic");
-        }
-      } finally {
-        if (isMounted) {
-          setLoading(false);
-        }
-      }
-    };
-
-    loadMembership();
-
-    return () => {
-      isMounted = false;
-    };
-  }, [isSignedIn, user?.id, getToken]);
-
-  return {
-    membershipType,
-    features: getMembershipFeatures(membershipType) || BASIC_FEATURES,
-    loading,
-  };
+export function useMembership() {
+  return useMembershipContext();
 }