scan food

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/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/app/(tabs)/index.tsx

@@ -8,6 +8,7 @@ import {
   Animated,
   TouchableOpacity,
   Alert,
+  AppState,
 } from "react-native";
 import { useUser } from "@clerk/clerk-expo";
 import { useState, useCallback, useEffect, useRef, useMemo } from "react";
@@ -43,6 +44,22 @@ 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 = [
@@ -74,12 +91,102 @@ export default function HomeScreen() {
 
   const caloriesBounce = useRef(new Animated.Value(1)).current;
   const waterBounce = useRef(new Animated.Value(1)).current;
+  const caloriesRef = useRef(0);
+  const waterRef = useRef(0);
+  const currentDateRef = useRef(getLocalDateKey());
+  const midnightResetTimerRef = useRef<ReturnType<typeof setTimeout> | null>(
+    null,
+  );
+
+  useEffect(() => {
+    caloriesRef.current = calories;
+  }, [calories]);
+
+  useEffect(() => {
+    waterRef.current = waterIntake;
+  }, [waterIntake]);
+
+  const getMetricsStorageKey = useCallback(
+    () => `${HOME_METRICS_KEY_PREFIX}_${user?.id || "guest"}`,
+    [user?.id],
+  );
+
+  const persistDailyMetrics = useCallback(
+    async (nextCalories: number, nextWaterIntake: number, dateKey?: string) => {
+      if (!user?.id) return;
+
+      const targetDate = dateKey || currentDateRef.current;
+      await AsyncStorage.setItem(
+        getMetricsStorageKey(),
+        JSON.stringify({
+          date: targetDate,
+          calories: nextCalories,
+          waterIntake: nextWaterIntake,
+        }),
+      );
+    },
+    [getMetricsStorageKey, user?.id],
+  );
+
+  const reconcileDailyMetrics = useCallback(async () => {
+    const today = getLocalDateKey();
+    currentDateRef.current = today;
+
+    if (!user?.id) {
+      setCalories(0);
+      setWaterIntake(0);
+      return;
+    }
+
+    const stored = await AsyncStorage.getItem(getMetricsStorageKey());
+    if (!stored) {
+      setCalories(0);
+      setWaterIntake(0);
+      await persistDailyMetrics(0, 0, today);
+      return;
+    }
+
+    try {
+      const parsed = JSON.parse(stored) as {
+        date?: string;
+        calories?: number;
+        waterIntake?: number;
+      };
+
+      if (parsed.date === today) {
+        const nextCalories = Number(parsed.calories) || 0;
+        const nextWater = Number(parsed.waterIntake) || 0;
+        setCalories(nextCalories);
+        setWaterIntake(nextWater);
+      } else {
+        setCalories(0);
+        setWaterIntake(0);
+        await persistDailyMetrics(0, 0, today);
+      }
+    } catch {
+      setCalories(0);
+      setWaterIntake(0);
+      await persistDailyMetrics(0, 0, today);
+    }
+  }, [getMetricsStorageKey, persistDailyMetrics, user?.id]);
+
+  const scheduleMidnightReset = useCallback(() => {
+    if (midnightResetTimerRef.current) {
+      clearTimeout(midnightResetTimerRef.current);
+    }
+
+    midnightResetTimerRef.current = setTimeout(() => {
+      void reconcileDailyMetrics();
+      scheduleMidnightReset();
+    }, getMillisecondsUntilNextMidnight() + 50);
+  }, [reconcileDailyMetrics]);
 
   useFocusEffect(
     useCallback(() => {
+      void reconcileDailyMetrics();
       refetchStatistics();
       refetchGoals();
-    }, [refetchStatistics, refetchGoals]),
+    }, [reconcileDailyMetrics, refetchStatistics, refetchGoals]),
   );
 
   const onRefresh = useCallback(async () => {
@@ -100,7 +207,11 @@ export default function HomeScreen() {
     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, {
@@ -117,7 +228,11 @@ export default function HomeScreen() {
   };
 
   const handleAddWater = (amount: number) => {
-    setWaterIntake((prev) => prev + amount);
+    setWaterIntake((prev) => {
+      const next = prev + amount;
+      void persistDailyMetrics(caloriesRef.current, next);
+      return next;
+    });
     setAddWaterModalVisible(false);
     Animated.sequence([
       Animated.timing(waterBounce, {
@@ -133,20 +248,23 @@ export default function HomeScreen() {
     ]).start();
   };
 
-  const handleResetCalories = () => setCalories(0);
+  const handleResetCalories = () => {
-  const handleResetWater = () => setWaterIntake(0);
+    setCalories(0);
-  const handleAddScannedFood = (scannedCalories: number) => {
+    void persistDailyMetrics(0, waterRef.current);
-    setCalories((prev) => prev + scannedCalories);
-    setScanFoodModalVisible(false);
   };
 
-  const resetAllCounters = async () => {
+  const handleResetWater = () => {
-    setCalories(0);
     setWaterIntake(0);
-    const today = new Date().toDateString();
+    void persistDailyMetrics(caloriesRef.current, 0);
-    await AsyncStorage.setItem("lastResetDate", today);
+  };
-    await AsyncStorage.removeItem(`calories_${today}`);
+
-    await AsyncStorage.removeItem(`water_${today}`);
+  const handleAddScannedFood = (scannedCalories: number) => {
+    setCalories((prev) => {
+      const next = prev + scannedCalories;
+      void persistDailyMetrics(next, waterRef.current);
+      return next;
+    });
+    setScanFoodModalVisible(false);
   };
 
   useEffect(() => {
@@ -183,42 +301,28 @@ export default function HomeScreen() {
   }, [user?.id]);
 
   useEffect(() => {
-    const loadPersistedData = async () => {
+    void reconcileDailyMetrics();
-      const today = new Date().toDateString();
+  }, [reconcileDailyMetrics]);
-      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));
-    };
-    loadPersistedData();
-  }, []);
 
   useEffect(() => {
-    const persistCalories = async () => {
+    const appStateSubscription = AppState.addEventListener(
-      const today = new Date().toDateString();
+      "change",
-      await AsyncStorage.setItem(`calories_${today}`, calories.toString());
+      (state) => {
-    };
+        if (state === "active") {
-    persistCalories();
+          void reconcileDailyMetrics();
-  }, [calories]);
+        }
+      },
+    );
 
-  useEffect(() => {
+    scheduleMidnightReset();
-    const persistWater = async () => {
-      const today = new Date().toDateString();
-      await AsyncStorage.setItem(`water_${today}`, waterIntake.toString());
-    };
-    persistWater();
-  }, [waterIntake]);
 
-  useEffect(() => {
+    return () => {
-    const checkAndResetIfNeeded = async () => {
+      appStateSubscription.remove();
-      const lastResetDate = await AsyncStorage.getItem("lastResetDate");
+      if (midnightResetTimerRef.current) {
-      const today = new Date().toDateString();
+        clearTimeout(midnightResetTimerRef.current);
-      if (lastResetDate !== today) {
-        await resetAllCounters();
       }
     };
-    checkAndResetIfNeeded();
+  }, [reconcileDailyMetrics, scheduleMidnightReset]);
-  }, []);
 
   const checkInsThisWeek = statistics?.attendance.checkInsThisWeek || 0;
   const currentStreak = statistics?.attendance.currentStreak || 0;

apps/mobile/src/components/ScanFoodModal.tsx

@@ -1,9 +1,24 @@
-import React, { useState, useEffect } from 'react';
+import React, { useEffect, useRef, useState } from "react";
-import { View, Text, StyleSheet, Modal, TouchableOpacity, TextInput, Alert } from 'react-native';
+import {
-import { CameraView, useCameraPermissions } from 'expo-camera';
+  ActivityIndicator,
-import { Ionicons } from '@expo/vector-icons';
+  Alert,
-import { LinearGradient } from 'expo-linear-gradient';
+  KeyboardAvoidingView,
-import { theme } from '../styles/theme';
+  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 MEAL_TYPES = ["breakfast", "lunch", "dinner", "snack"] as const;
-const FOOD_DATABASE: { [key: string]: { name: string; calories: number; servingSize: string } } = {
+type MealType = (typeof MEAL_TYPES)[number];
-    '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' },
-};
 
-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 [isLookingUp, setIsLookingUp] = useState(false);
-    const [servings, setServings] = useState('1');
+  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
+    try {
-        const food = FOOD_DATABASE[data];
+      const token = await getToken();
-
+      const product = await lookupFoodByBarcode(normalized, token);
-        if (food) {
+      setFoodData(product);
-            setFoodData(food);
+    } 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
+        Alert.alert("Scan Failed", "Unable to lookup this barcode right now.");
-            setFoodData({
+        setScanned(false);
-                name: 'Unknown Food',
+      }
-                calories: 150,
+    } finally {
-                servingSize: '1 serving'
+      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} />
+            <Ionicons
-                        <Text style={styles.permissionTitle}>Camera Permission Required</Text>
+              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}>
+                <TouchableOpacity
-                                <Ionicons name="close" size={28} color={theme.colors.gray900} />
+                  onPress={handleReset}
+                  style={styles.closeButton}
+                >
+                  <Ionicons
+                    name="scan"
+                    size={24}
+                    color={theme.colors.gray700}
+                  />
                 </TouchableOpacity>
-                            <Text style={styles.resultTitle}>Food Details</Text>
+                <Text style={styles.resultTitle}>
-                            <View style={{ width: 28 }} />
+                  {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.caloriesValue}>
-                                <Text style={styles.caloriesLabel}>kcal per serving</Text>
+                          {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}>
+                      <Text style={styles.servingMeta}>
-                                    {Math.round(foodData.calories * parseFloat(servings || '1'))} kcal
+                        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}>
+                <TouchableOpacity onPress={onClose} style={styles.rejectButton}>
-                                <Text style={styles.rescanButtonText}>Scan Again</Text>
+                  <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',
+    flexDirection: "row",
-        justifyContent: 'space-between',
+    justifyContent: "space-between",
-        alignItems: 'center',
+    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',
+    fontWeight: "700",
-        color: '#fff',
+    color: "#fff",
   },
   camera: {
     flex: 1,
   },
   scanOverlay: {
     flex: 1,
-        justifyContent: 'center',
+    justifyContent: "center",
-        alignItems: 'center',
+    alignItems: "center",
-        backgroundColor: 'rgba(0, 0, 0, 0.3)',
+    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',
+    flexDirection: "row",
-        justifyContent: 'space-between',
+    justifyContent: "space-between",
-        alignItems: 'center',
+    alignItems: "center",
-        padding: 20,
+    paddingHorizontal: 20,
-        paddingTop: 60,
+    paddingVertical: 14,
-        backgroundColor: '#fff',
+    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,
+    marginHorizontal: 16,
-        padding: 24,
+    marginTop: 12,
-        backgroundColor: '#fff',
+    padding: 16,
-        borderRadius: 24,
+    backgroundColor: "#fff",
-        alignItems: 'center',
+    borderRadius: 16,
+    alignItems: "center",
     ...theme.shadows.medium,
   },
   foodIconContainer: {
-        marginBottom: 16,
+    marginBottom: 10,
   },
   foodIcon: {
-        width: 80,
+    width: 64,
-        height: 80,
+    height: 64,
-        borderRadius: 40,
+    borderRadius: 32,
-        justifyContent: 'center',
+    justifyContent: "center",
-        alignItems: 'center',
+    alignItems: "center",
   },
   foodName: {
-        fontSize: 24,
+    fontSize: 20,
-        fontWeight: '700',
+    fontWeight: "700",
     color: theme.colors.gray900,
-        marginBottom: 8,
+    marginBottom: 4,
-        textAlign: 'center',
+    textAlign: "center",
   },
-    servingSize: {
+  servingMeta: {
-        fontSize: 16,
+    fontSize: 14,
     color: theme.colors.gray600,
-        marginBottom: 24,
+    marginBottom: 12,
+    textAlign: "center",
   },
   caloriesBadge: {
     backgroundColor: theme.colors.gray50,
-        paddingHorizontal: 24,
+    paddingHorizontal: 18,
-        paddingVertical: 16,
+    paddingVertical: 10,
-        borderRadius: 16,
+    borderRadius: 12,
-        alignItems: 'center',
+    alignItems: "center",
-        marginBottom: 32,
+    marginBottom: 14,
   },
   caloriesValue: {
-        fontSize: 32,
+    fontSize: 26,
-        fontWeight: '700',
+    fontWeight: "700",
     color: theme.colors.primary,
   },
   caloriesLabel: {
@@ -317,19 +565,49 @@ const styles = StyleSheet.create({
     marginTop: 4,
   },
   servingsContainer: {
-        width: '100%',
+    width: "100%",
-        marginBottom: 24,
+    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',
+    flexDirection: "row",
-        alignItems: 'center',
+    alignItems: "center",
-        justifyContent: 'center',
+    justifyContent: "center",
     gap: 16,
   },
   servingsButton: {
@@ -337,50 +615,84 @@ const styles = StyleSheet.create({
     height: 40,
     borderRadius: 20,
     backgroundColor: theme.colors.gray100,
-        justifyContent: 'center',
+    justifyContent: "center",
-        alignItems: '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%',
+    display: "none",
-        flexDirection: 'row',
+  },
-        justifyContent: 'space-between',
+  footerSummary: {
-        alignItems: 'center',
+    flexDirection: "row",
-        paddingTop: 24,
+    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',
+    flexDirection: "row",
-        padding: 20,
+    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',
+    fontWeight: "700",
-        color: '#fff',
+    color: "#fff",
   },
   permissionContainer: {
     flex: 1,
-        justifyContent: 'center',
+    justifyContent: "center",
-        alignItems: 'center',
+    alignItems: "center",
-        backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    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',
+    fontWeight: "700",
-        color: '#fff',
+    color: "#fff",
   },
   cancelButton: {
     paddingVertical: 12,
   },
   cancelButtonText: {
     fontSize: 16,
-        fontWeight: '600',
+    fontWeight: "600",
     color: theme.colors.gray600,
   },
 });

apps/mobile/src/config/api.ts

@@ -47,6 +47,9 @@ export const API_ENDPOINTS = {
   MEMBERSHIP: {
     FEATURES: "/api/membership/features",
   },
+  FOOD: {
+    LOOKUP_BARCODE: (code: string) => `/api/food/barcode/${code}`,
+  },
   NUTRITION: {
     BASE: "/api/nutrition",
     MEALS: "/api/nutrition/meals",