Merge branch 'screen1'

This commit is contained in:
echo 2026-03-31 17:05:43 +02:00
commit 4c2e97b66d
7 changed files with 1083 additions and 472 deletions

Binary file not shown.

View File

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

View File

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

View File

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

View File

@ -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 handleResetWater = () => setWaterIntake(0);
const handleAddScannedFood = (scannedCalories: number) => {
setCalories((prev) => prev + scannedCalories);
setScanFoodModalVisible(false);
const handleResetCalories = () => {
setCalories(0);
void persistDailyMetrics(0, waterRef.current);
};
const resetAllCounters = async () => {
setCalories(0);
const handleResetWater = () => {
setWaterIntake(0);
const today = new Date().toDateString();
await AsyncStorage.setItem("lastResetDate", today);
await AsyncStorage.removeItem(`calories_${today}`);
await AsyncStorage.removeItem(`water_${today}`);
void persistDailyMetrics(caloriesRef.current, 0);
};
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 () => {
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));
};
loadPersistedData();
}, []);
void reconcileDailyMetrics();
}, [reconcileDailyMetrics]);
useEffect(() => {
const persistCalories = async () => {
const today = new Date().toDateString();
await AsyncStorage.setItem(`calories_${today}`, calories.toString());
};
persistCalories();
}, [calories]);
const appStateSubscription = AppState.addEventListener(
"change",
(state) => {
if (state === "active") {
void reconcileDailyMetrics();
}
},
);
useEffect(() => {
const persistWater = async () => {
const today = new Date().toDateString();
await AsyncStorage.setItem(`water_${today}`, waterIntake.toString());
};
persistWater();
}, [waterIntake]);
scheduleMidnightReset();
useEffect(() => {
const checkAndResetIfNeeded = async () => {
const lastResetDate = await AsyncStorage.getItem("lastResetDate");
const today = new Date().toDateString();
if (lastResetDate !== today) {
await resetAllCounters();
return () => {
appStateSubscription.remove();
if (midnightResetTimerRef.current) {
clearTimeout(midnightResetTimerRef.current);
}
};
checkAndResetIfNeeded();
}, []);
}, [reconcileDailyMetrics, scheduleMidnightReset]);
const checkInsThisWeek = statistics?.attendance.checkInsThisWeek || 0;
const currentStreak = statistics?.attendance.currentStreak || 0;

View File

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

View File

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