integrate barcode scan with openfoodfacts and meal type selection

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/components/ScanFoodModal.tsx

@@ -1,9 +1,23 @@
-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,
+  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 +25,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 +161,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 +194,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,26 +214,49 @@ 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.resultHeader}>
               <TouchableOpacity onPress={onClose} style={styles.closeButton}>
                 <Ionicons name="close" size={28} color={theme.colors.gray900} />
               </TouchableOpacity>
-                            <Text style={styles.resultTitle}>Food Details</Text>
+              <Text style={styles.resultTitle}>
+                {notFound ? "Barcode Not Found" : "Food Details"}
+              </Text>
               <View style={{ width: 28 }} />
             </View>
 
             <View style={styles.foodCard}>
+              {!notFound && foodData ? (
+                <>
                   <View style={styles.foodIconContainer}>
                     <LinearGradient
                       colors={theme.gradients.success}
@@ -146,10 +267,15 @@ export function ScanFoodModal({ visible, onClose, onAddFood }: ScanFoodModalProp
                   </View>
 
                   <Text style={styles.foodName}>{foodData.name}</Text>
+                  {foodData.brand ? (
+                    <Text style={styles.servingSize}>{foodData.brand}</Text>
+                  ) : null}
                   <Text style={styles.servingSize}>{foodData.servingSize}</Text>
 
                   <View style={styles.caloriesBadge}>
-                                <Text style={styles.caloriesValue}>{foodData.calories}</Text>
+                    <Text style={styles.caloriesValue}>
+                      {foodData.caloriesPerServing}
+                    </Text>
                     <Text style={styles.caloriesLabel}>kcal per serving</Text>
                   </View>
 
@@ -157,10 +283,20 @@ export function ScanFoodModal({ visible, onClose, onAddFood }: ScanFoodModalProp
                     <Text style={styles.label}>Number of 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 +305,107 @@ 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>
+                </>
+              ) : (
+                <>
+                  <Text style={styles.servingSize}>
+                    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 style={styles.totalCalories}>
                 <Text style={styles.totalLabel}>Total Calories</Text>
-                                <Text style={styles.totalValue}>
+                <Text style={styles.totalValue}>{getTotalCalories()} kcal</Text>
-                                    {Math.round(foodData.calories * parseFloat(servings || '1'))} kcal
-                                </Text>
               </View>
             </View>
 
             <View style={styles.buttonRow}>
-                            <TouchableOpacity onPress={handleRescan} style={styles.rescanButton}>
+              <TouchableOpacity
+                onPress={handleReset}
+                style={styles.rescanButton}
+              >
                 <Text style={styles.rescanButtonText}>Scan Again</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}>
+                    {notFound ? "Add Manual" : "Add to Diary"}
+                  </Text>
                 </LinearGradient>
               </TouchableOpacity>
             </View>
-                    </View>
+          </KeyboardAvoidingView>
         )}
       </View>
     </Modal>
@@ -209,71 +415,75 @@ 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: theme.colors.background,
   },
   resultHeader: {
-        flexDirection: 'row',
+    flexDirection: "row",
-        justifyContent: 'space-between',
+    justifyContent: "space-between",
-        alignItems: 'center',
+    alignItems: "center",
     padding: 20,
     paddingTop: 60,
-        backgroundColor: '#fff',
+    backgroundColor: "#fff",
   },
   resultTitle: {
     fontSize: 18,
-        fontWeight: '700',
+    fontWeight: "700",
     color: theme.colors.gray900,
   },
   foodCard: {
     margin: 20,
     padding: 24,
-        backgroundColor: '#fff',
+    backgroundColor: "#fff",
     borderRadius: 24,
-        alignItems: 'center',
+    alignItems: "center",
     ...theme.shadows.medium,
   },
   foodIconContainer: {
@@ -283,32 +493,33 @@ const styles = StyleSheet.create({
     width: 80,
     height: 80,
     borderRadius: 40,
-        justifyContent: 'center',
+    justifyContent: "center",
-        alignItems: 'center',
+    alignItems: "center",
   },
   foodName: {
     fontSize: 24,
-        fontWeight: '700',
+    fontWeight: "700",
     color: theme.colors.gray900,
     marginBottom: 8,
-        textAlign: 'center',
+    textAlign: "center",
   },
   servingSize: {
     fontSize: 16,
     color: theme.colors.gray600,
-        marginBottom: 24,
+    marginBottom: 16,
+    textAlign: "center",
   },
   caloriesBadge: {
     backgroundColor: theme.colors.gray50,
     paddingHorizontal: 24,
     paddingVertical: 16,
     borderRadius: 16,
-        alignItems: 'center',
+    alignItems: "center",
-        marginBottom: 32,
+    marginBottom: 24,
   },
   caloriesValue: {
     fontSize: 32,
-        fontWeight: '700',
+    fontWeight: "700",
     color: theme.colors.primary,
   },
   caloriesLabel: {
@@ -317,19 +528,49 @@ const styles = StyleSheet.create({
     marginTop: 4,
   },
   servingsContainer: {
-        width: '100%',
+    width: "100%",
     marginBottom: 24,
   },
+  mealTypeContainer: {
+    width: "100%",
+    marginBottom: 24,
+  },
+  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,37 +578,63 @@ 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%',
+    width: "100%",
-        flexDirection: 'row',
+    flexDirection: "row",
-        justifyContent: 'space-between',
+    justifyContent: "space-between",
-        alignItems: 'center',
+    alignItems: "center",
     paddingTop: 24,
     borderTopWidth: 1,
     borderTopColor: theme.colors.gray200,
   },
   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,
     gap: 12,
   },
@@ -376,11 +643,11 @@ const styles = StyleSheet.create({
     paddingVertical: 16,
     borderRadius: 20,
     backgroundColor: theme.colors.gray100,
-        alignItems: 'center',
+    alignItems: "center",
   },
   rescanButtonText: {
     fontSize: 16,
-        fontWeight: '700',
+    fontWeight: "700",
     color: theme.colors.gray700,
   },
   confirmButtonContainer: {
@@ -389,30 +656,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 +687,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",