dimitar/fitaiProto
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

redesign take 1

Browse Source
This commit is contained in:
echo 2026-03-11 08:22:48 +01:00
parent 1143f8ca02
commit e3a3c3fccf
19 changed files with 2792 additions and 1502 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
apps/admin/data/fitai.db
View File

Binary file not shown.

477
apps/mobile/src/app/(tabs)/attendance.tsx
View File

@ -7,46 +7,28 @@ import {
ScrollView,
Alert,
} from "react-native";
import { useState, useEffect, useRef } from "react";
import { useState, useEffect } from "react";
import { useAuth } from "@clerk/clerk-expo";
import { LinearGradient } from "expo-linear-gradient";
import { Ionicons } from "@expo/vector-icons";
import { useTheme } from "../../contexts/ThemeContext";
import { MinimalCard } from "../../components/MinimalCard";
import { SectionHeader } from "../../components/SectionHeader";
import { MinimalButton } from "../../components/MinimalButton";
import { Badge } from "../../components/Badge";
import { IconContainer } from "../../components/IconContainer";
import { attendanceApi, Attendance } from "../../api/attendance";
import { AttendanceCalendar } from "../../components/AttendanceCalendar";
import { useStatistics } from "../../contexts/StatisticsContext";
import { theme } from "../../styles/theme";
import { Animated } from "react-native";
import { getErrorMessage } from "../../utils/error-helpers";
import log from "../../utils/logger";
export default function AttendanceScreen() {
const { getToken, userId } = useAuth();
const { colors, typography } = useTheme();
const { clearCache: clearStatisticsCache } = useStatistics();
const [loading, setLoading] = useState(true);
const [activeCheckIn, setActiveCheckIn] = useState<Attendance | null>(null);
const [history, setHistory] = useState<Attendance[]>([]);
const pulseAnim = useRef(new Animated.Value(1)).current;
useEffect(() => {
if (activeCheckIn) {
const pulse = Animated.loop(
Animated.sequence([
Animated.timing(pulseAnim, {
toValue: 1.05,
duration: 1000,
useNativeDriver: true,
}),
Animated.timing(pulseAnim, {
toValue: 1,
duration: 1000,
useNativeDriver: true,
}),
]),
);
pulse.start();
return () => pulse.stop();
}
}, [activeCheckIn]);
const fetchAttendance = async () => {
try {
@ -82,10 +64,7 @@ export default function AttendanceScreen() {
if (!token) return;
await attendanceApi.checkIn("gym", token);
// Clear statistics cache to force refresh on home screen
clearStatisticsCache();
fetchAttendance();
Alert.alert("Success", "Checked in successfully!");
} catch (error: unknown) {
@ -100,10 +79,7 @@ export default function AttendanceScreen() {
if (!token) return;
await attendanceApi.checkOut(token);
// Clear statistics cache to force refresh on home screen
clearStatisticsCache();
fetchAttendance();
Alert.alert("Success", "Checked out successfully!");
} catch (error: unknown) {
@ -114,143 +90,204 @@ export default function AttendanceScreen() {
if (loading && !history.length) {
return (
<View style={styles.centered}>
<ActivityIndicator size="large" color={theme.colors.primary} />
<View style={[styles.centered, { backgroundColor: colors.background }]}>
<ActivityIndicator size="large" color={colors.primary} />
</View>
);
}
return (
<ScrollView style={styles.container} contentContainerStyle={styles.content}>
<LinearGradient
colors={theme.gradients.primary}
start={{ x: 0, y: 0 }}
end={{ x: 1, y: 1 }}
style={styles.header}
>
<Text style={styles.title}>Attendance</Text>
<Text style={styles.subtitle}>Track your gym visits</Text>
</LinearGradient>
<ScrollView
style={[styles.container, { backgroundColor: colors.background }]}
contentContainerStyle={styles.content}
>
{/* Header */}
<View style={styles.header}>
<Text style={[typography.h1, { color: colors.textPrimary }]}>
Attendance
</Text>
<Text
style={[
typography.body,
{ color: colors.textSecondary, marginTop: 4 },
]}
>
Track your gym visits
</Text>
</View>
<View style={styles.actionContainer}>
{/* Check In/Out Section */}
<View style={styles.section}>
{activeCheckIn ? (
<LinearGradient
colors={["rgba(16, 185, 129, 0.15)", "rgba(5, 150, 105, 0.1)"]}
style={[styles.activeCard, theme.shadows.medium]}
>
<View style={styles.activeCardContent}>
<View style={styles.activeIconContainer}>
<LinearGradient
colors={theme.gradients.success}
style={styles.activeIcon}
<MinimalCard variant="elevated" style={styles.activeCard}>
<View style={styles.activeHeader}>
<View style={styles.activeHeaderLeft}>
<IconContainer
variant="colored"
backgroundColor={`${colors.success}20`}
size="lg"
>
<Ionicons name="checkmark-circle" size={32} color="#fff" />
</LinearGradient>
</View>
<View style={styles.activeTextContainer}>
<Text style={styles.activeText}>Currently Checked In</Text>
<Text style={styles.timeText}>
Since{" "}
{new Date(activeCheckIn.checkInTime).toLocaleTimeString([], {
hour: "2-digit",
minute: "2-digit",
})}
</Text>
<Ionicons
name="checkmark-circle"
size={28}
color={colors.success}
/>
</IconContainer>
<View style={{ marginLeft: 12 }}>
<Text style={[typography.h3, { color: colors.textPrimary }]}>
Currently Checked In
</Text>
<Text
style={[
typography.caption,
{ color: colors.textTertiary, marginTop: 2 },
]}
>
Since{" "}
{new Date(activeCheckIn.checkInTime).toLocaleTimeString(
[],
{
hour: "2-digit",
minute: "2-digit",
},
)}
</Text>
</View>
</View>
</View>
<TouchableOpacity onPress={handleCheckOut} activeOpacity={0.8}>
<LinearGradient
colors={theme.gradients.danger}
start={{ x: 0, y: 0 }}
end={{ x: 1, y: 0 }}
style={[styles.checkOutButton, theme.shadows.medium]}
>
<Ionicons
name="log-out-outline"
size={20}
color="#fff"
style={{ marginRight: 8 }}
/>
<Text style={styles.buttonText}>Check Out</Text>
</LinearGradient>
</TouchableOpacity>
</LinearGradient>
<MinimalButton
title="Check Out"
onPress={handleCheckOut}
variant="danger"
size="lg"
style={{ marginTop: 16 }}
/>
</MinimalCard>
) : (
<Animated.View style={{ transform: [{ scale: pulseAnim }] }}>
<TouchableOpacity onPress={handleCheckIn} activeOpacity={0.8}>
<LinearGradient
colors={theme.gradients.primary}
start={{ x: 0, y: 0 }}
end={{ x: 1, y: 0 }}
style={[styles.checkInButton, theme.shadows.glow]}
>
<Ionicons
name="log-in-outline"
size={24}
color="#fff"
style={{ marginRight: 8 }}
/>
<Text style={styles.checkInButtonText}>Check In</Text>
</LinearGradient>
</TouchableOpacity>
</Animated.View>
<MinimalButton
title="Check In"
onPress={handleCheckIn}
variant="primary"
size="lg"
/>
)}
</View>
{/* Attendance Calendar */}
{history.length > 0 && <AttendanceCalendar attendanceRecords={history} />}
<View style={styles.section}>
<SectionHeader title="Calendar" />
<MinimalCard variant="default">
<AttendanceCalendar attendanceRecords={history} />
</MinimalCard>
</View>
<Text style={styles.sectionTitle}>Recent History</Text>
{history.map((item) => (
<LinearGradient
key={item.id}
colors={["rgba(255, 255, 255, 1)", "rgba(249, 250, 251, 1)"] as const}
style={[styles.historyItem, theme.shadows.medium]}
>
<View style={styles.historyLeft}>
<View style={styles.historyIconContainer}>
<LinearGradient
colors={
item.checkOutTime
? theme.gradients.success
: theme.gradients.primary
}
style={styles.historyIcon}
{/* Recent History */}
<View style={styles.section}>
<SectionHeader title="Recent History" />
{history.length === 0 ? (
<MinimalCard variant="default">
<View style={styles.emptyState}>
<IconContainer
variant="colored"
backgroundColor={`${colors.primary}15`}
size="lg"
>
<Ionicons
name={item.checkOutTime ? "checkmark" : "time-outline"}
size={16}
color="#fff"
name="calendar-outline"
size={32}
color={colors.primary}
/>
</LinearGradient>
</View>
<View>
<Text style={styles.dateText}>
{new Date(item.checkInTime).toLocaleDateString()}
</IconContainer>
<Text
style={[
typography.bodyEmphasis,
{ color: colors.textPrimary, marginTop: 16 },
]}
>
No attendance history yet
</Text>
<Text style={styles.typeText}>{item.type.toUpperCase()}</Text>
</View>
</View>
<View style={styles.timeContainer}>
<Text style={styles.historyTime}>
In:{" "}
{new Date(item.checkInTime).toLocaleTimeString([], {
hour: "2-digit",
minute: "2-digit",
})}
</Text>
{item.checkOutTime && (
<Text style={styles.historyTime}>
Out:{" "}
{new Date(item.checkOutTime).toLocaleTimeString([], {
hour: "2-digit",
minute: "2-digit",
})}
<Text
style={[
typography.body,
{
color: colors.textSecondary,
marginTop: 8,
textAlign: "center",
},
]}
>
Your check-in history will appear here
</Text>
)}
</View>
</MinimalCard>
) : (
<View style={styles.historyList}>
{history.slice(0, 10).map((record, index) => {
const checkIn = new Date(record.checkInTime);
const checkOut = record.checkOutTime
? new Date(record.checkOutTime)
: null;
const duration = checkOut
? Math.round((checkOut.getTime() - checkIn.getTime()) / 60000)
: null;
return (
<MinimalCard key={index} variant="default">
<View style={styles.historyItem}>
<View style={styles.historyLeft}>
<IconContainer
variant="colored"
backgroundColor={
checkOut ? `${colors.success}20` : `${colors.info}20`
}
>
<Ionicons
name={checkOut ? "checkmark-done" : "time"}
size={20}
color={checkOut ? colors.success : colors.info}
/>
</IconContainer>
<View style={{ marginLeft: 12, flex: 1 }}>
<Text
style={[typography.h3, { color: colors.textPrimary }]}
>
{checkIn.toLocaleDateString()}
</Text>
<Text
style={[
typography.caption,
{ color: colors.textTertiary, marginTop: 2 },
]}
>
{checkIn.toLocaleTimeString([], {
hour: "2-digit",
minute: "2-digit",
})}
{checkOut &&
` - ${checkOut.toLocaleTimeString([], {
hour: "2-digit",
minute: "2-digit",
})}`}
</Text>
</View>
</View>
{duration && (
<Badge
label={`${duration}m`}
variant="neutral"
size="sm"
/>
)}
</View>
</MinimalCard>
);
})}
</View>
</LinearGradient>
))}
)}
</View>
{/* Bottom Spacer */}
<View style={{ height: 100 }} />
</ScrollView>
);
}
@ -258,147 +295,53 @@ export default function AttendanceScreen() {
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: theme.colors.background,
},
content: {
paddingBottom: 20,
},
centered: {
flex: 1,
justifyContent: "center",
alignItems: "center",
},
content: {
paddingBottom: 20,
},
header: {
paddingHorizontal: 24,
paddingTop: 60,
paddingBottom: 24,
},
section: {
paddingHorizontal: 24,
marginBottom: 24,
borderBottomLeftRadius: theme.borderRadius.xl,
borderBottomRightRadius: theme.borderRadius.xl,
},
title: {
fontSize: theme.typography.fontSize["3xl"],
fontWeight: theme.typography.fontWeight.bold,
color: theme.colors.white,
marginBottom: 4,
},
subtitle: {
fontSize: theme.typography.fontSize.base,
color: "rgba(255, 255, 255, 0.9)",
},
actionContainer: {
marginBottom: 32,
paddingHorizontal: 20,
},
checkInButton: {
paddingVertical: 20,
paddingHorizontal: 24,
borderRadius: theme.borderRadius.xl,
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
},
checkInButtonText: {
color: theme.colors.white,
fontSize: theme.typography.fontSize.xl,
fontWeight: theme.typography.fontWeight.semibold,
},
checkOutButton: {
paddingVertical: 14,
paddingHorizontal: 20,
borderRadius: theme.borderRadius.lg,
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
marginTop: 16,
},
buttonText: {
color: theme.colors.white,
fontSize: theme.typography.fontSize.base,
fontWeight: theme.typography.fontWeight.semibold,
},
activeCard: {
padding: 20,
borderRadius: theme.borderRadius.xl,
borderWidth: 1,
borderColor: "rgba(16, 185, 129, 0.2)",
},
activeCardContent: {
flexDirection: "row",
alignItems: "center",
marginBottom: 16,
},
activeIconContainer: {
marginRight: 16,
},
activeIcon: {
width: 56,
height: 56,
borderRadius: 28,
justifyContent: "center",
alignItems: "center",
},
activeTextContainer: {
flex: 1,
},
activeText: {
fontSize: theme.typography.fontSize.lg,
fontWeight: theme.typography.fontWeight.semibold,
color: theme.colors.gray900,
marginBottom: 4,
},
timeText: {
fontSize: theme.typography.fontSize.sm,
color: theme.colors.gray600,
},
sectionTitle: {
fontSize: theme.typography.fontSize.xl,
fontWeight: theme.typography.fontWeight.semibold,
marginBottom: 16,
paddingHorizontal: 20,
color: theme.colors.gray900,
},
historyItem: {
padding: 16,
borderRadius: theme.borderRadius.xl,
marginBottom: 12,
marginHorizontal: 20,
activeHeader: {
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
},
activeHeaderLeft: {
flexDirection: "row",
alignItems: "center",
flex: 1,
},
emptyState: {
alignItems: "center",
paddingVertical: 40,
paddingHorizontal: 20,
},
historyList: {
gap: 12,
},
historyItem: {
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
borderWidth: 1,
borderColor: "rgba(59, 130, 246, 0.1)",
},
historyLeft: {
flexDirection: "row",
alignItems: "center",
gap: 12,
},
historyIconContainer: {
marginRight: 4,
},
historyIcon: {
width: 32,
height: 32,
borderRadius: 16,
justifyContent: "center",
alignItems: "center",
},
dateText: {
fontSize: theme.typography.fontSize.base,
fontWeight: theme.typography.fontWeight.semibold,
color: theme.colors.gray900,
},
typeText: {
fontSize: theme.typography.fontSize.xs,
color: theme.colors.gray600,
marginTop: 2,
},
timeContainer: {
alignItems: "flex-end",
},
historyTime: {
fontSize: theme.typography.fontSize.sm,
color: theme.colors.gray700,
flex: 1,
},
});

436
apps/mobile/src/app/(tabs)/goals.tsx
View File

@ -1,4 +1,4 @@
import React, { useState, useCallback, useRef } from "react";
import React, { useState, useCallback } from "react";
import {
View,
Text,
@ -6,27 +6,31 @@ import {
ScrollView,
RefreshControl,
TouchableOpacity,
Animated,
Alert,
} from "react-native";
import { Ionicons } from "@expo/vector-icons";
import { LinearGradient } from "expo-linear-gradient";
import { theme } from "../../styles/theme";
import { useUser } from "@clerk/clerk-expo";
import { useFocusEffect } from "expo-router";
import * as SecureStore from "expo-secure-store";
import { useTheme } from "../../contexts/ThemeContext";
import { MinimalCard } from "../../components/MinimalCard";
import { SectionHeader } from "../../components/SectionHeader";
import { MinimalButton } from "../../components/MinimalButton";
import { Badge } from "../../components/Badge";
import { ProgressBar } from "../../components/ProgressBar";
import { GoalProgressCard } from "../../components/GoalProgressCard";
import { GoalCreationModal } from "../../components/GoalCreationModal";
import { WeeklyProgressChart } from "../../components/WeeklyProgressChart";
import { GoalTypeBreakdownChart } from "../../components/GoalTypeBreakdownChart";
import { useUser } from "@clerk/clerk-expo";
import type { FitnessGoal, CreateGoalData } from "../../services/fitnessGoals";
import { useStatistics } from "../../contexts/StatisticsContext";
import { useFitnessGoals } from "../../contexts/FitnessGoalsContext";
import { useRecommendations } from "../../contexts/RecommendationsContext";
import { useFocusEffect } from "expo-router";
import * as SecureStore from "expo-secure-store";
import log from "../../utils/logger";
export default function GoalsScreen() {
const { user } = useUser();
const { colors, typography } = useTheme();
const {
statistics,
refetchStatistics,
@ -45,10 +49,8 @@ export default function GoalsScreen() {
const [refreshing, setRefreshing] = useState(false);
const [isModalVisible, setIsModalVisible] = useState(false);
const [showAnalytics, setShowAnalytics] = useState(false);
const fabScale = useRef(new Animated.Value(1)).current;
const loadData = useCallback(async () => {
// Load goals and statistics (both cached)
await refetchGoals();
await refetchStatistics();
}, [refetchGoals, refetchStatistics]);
@ -64,7 +66,6 @@ export default function GoalsScreen() {
style: "destructive",
onPress: async () => {
try {
// Clear all possible Clerk token keys
const keysToDelete = [
"__clerk_client_jwt",
"__clerk_db_jwt",
@ -82,7 +83,6 @@ export default function GoalsScreen() {
}
}
// Clear all caches
clearStatsCache();
clearGoalsCache();
clearRecommendationsCache();
@ -128,183 +128,237 @@ export default function GoalsScreen() {
const activeGoals = goals?.filter((g) => g.status === "active") || [];
const completedGoals = goals?.filter((g) => g.status === "completed") || [];
const avgProgress =
activeGoals.length > 0
? Math.round(
activeGoals.reduce((sum, g) => sum + (g.progress || 0), 0) /
activeGoals.length,
)
: 0;
return (
<View style={styles.container}>
<View style={[styles.container, { backgroundColor: colors.background }]}>
<ScrollView
contentContainerStyle={styles.scrollContent}
refreshControl={
<RefreshControl
refreshing={refreshing}
onRefresh={onRefresh}
tintColor={theme.colors.primary}
tintColor={colors.primary}
/>
}
>
<LinearGradient colors={theme.gradients.primary} style={styles.header}>
<View style={styles.headerContent}>
<View>
<Text style={styles.headerTitle}>Fitness Goals</Text>
<Text style={styles.headerSubtitle}>
Track your fitness journey progress
</Text>
</View>
<TouchableOpacity
onPress={clearClerkCache}
style={styles.debugButton}
{/* Header */}
<View style={styles.header}>
<View>
<Text style={[typography.h1, { color: colors.textPrimary }]}>
Fitness Goals
</Text>
<Text
style={[
typography.body,
{ color: colors.textSecondary, marginTop: 4 },
]}
>
<Ionicons name="refresh-circle-outline" size={24} color="#fff" />
</TouchableOpacity>
Track your fitness journey progress
</Text>
</View>
</LinearGradient>
<TouchableOpacity
onPress={clearClerkCache}
style={styles.debugButton}
>
<Ionicons
name="refresh-circle-outline"
size={24}
color={colors.textTertiary}
/>
</TouchableOpacity>
</View>
{/* Stats Summary */}
{goals && goals.length > 0 && (
<View style={styles.statsContainer}>
<View style={styles.statCard}>
<Text style={styles.statValue}>{activeGoals.length}</Text>
<Text style={styles.statLabel}>Active</Text>
</View>
<View style={styles.statCard}>
<Text style={styles.statValue}>{completedGoals.length}</Text>
<Text style={styles.statLabel}>Completed</Text>
</View>
<View style={styles.statCard}>
<Text style={styles.statValue}>
{activeGoals.length > 0
? Math.round(
activeGoals.reduce(
(sum, g) => sum + (g.progress || 0),
0,
) / activeGoals.length,
)
: 0}
%
</Text>
<Text style={styles.statLabel}>Avg Progress</Text>
<View style={styles.section}>
<View style={styles.statsRow}>
<MinimalCard variant="elevated" style={styles.statCard}>
<Text style={[typography.stat, { color: colors.primary }]}>
{activeGoals.length}
</Text>
<Text
style={[
typography.caption,
{ color: colors.textTertiary, marginTop: 4 },
]}
>
Active
</Text>
</MinimalCard>
<MinimalCard variant="elevated" style={styles.statCard}>
<Text style={[typography.stat, { color: colors.success }]}>
{completedGoals.length}
</Text>
<Text
style={[
typography.caption,
{ color: colors.textTertiary, marginTop: 4 },
]}
>
Completed
</Text>
</MinimalCard>
<MinimalCard variant="elevated" style={styles.statCard}>
<Text style={[typography.stat, { color: colors.textPrimary }]}>
{avgProgress}%
</Text>
<Text
style={[
typography.caption,
{ color: colors.textTertiary, marginTop: 4 },
]}
>
Avg Progress
</Text>
</MinimalCard>
</View>
</View>
)}
{/* Analytics Section */}
{statistics && (
<View style={styles.analyticsSection}>
<TouchableOpacity
style={styles.analyticsHeader}
onPress={() => setShowAnalytics(!showAnalytics)}
>
<View style={styles.analyticsHeaderLeft}>
<View style={styles.section}>
<MinimalCard variant="default">
<TouchableOpacity
style={styles.analyticsHeader}
onPress={() => setShowAnalytics(!showAnalytics)}
activeOpacity={0.7}
>
<View style={styles.analyticsHeaderLeft}>
<Ionicons
name="bar-chart-outline"
size={20}
color={colors.primary}
/>
<Text
style={[
typography.h3,
{ color: colors.textPrimary, marginLeft: 8 },
]}
>
Progress Analytics
</Text>
</View>
<Ionicons
name="bar-chart-outline"
name={showAnalytics ? "chevron-up" : "chevron-down"}
size={20}
color={theme.colors.primary}
color={colors.textTertiary}
/>
<Text style={styles.analyticsTitle}>Progress Analytics</Text>
</View>
<Ionicons
name={showAnalytics ? "chevron-up" : "chevron-down"}
size={20}
color={theme.colors.gray400}
/>
</TouchableOpacity>
</TouchableOpacity>
{showAnalytics && (
<View style={styles.analyticsContent}>
{statistics.weeklyTrend.length > 0 && (
<WeeklyProgressChart
weeklyData={statistics.weeklyTrend}
title="8-Week Trend"
/>
)}
{statistics.goals.goalsByType.length > 0 && (
<GoalTypeBreakdownChart
data={statistics.goals.goalsByType}
title="Goals by Type"
/>
)}
</View>
)}
{showAnalytics && (
<View style={styles.analyticsContent}>
{statistics.weeklyTrend.length > 0 && (
<WeeklyProgressChart
weeklyData={statistics.weeklyTrend}
title="8-Week Trend"
/>
)}
{statistics.goals.goalsByType.length > 0 && (
<GoalTypeBreakdownChart
data={statistics.goals.goalsByType}
title="Goals by Type"
/>
)}
</View>
)}
</MinimalCard>
</View>
)}
{/* Active Goals */}
<View style={styles.section}>
<Text style={styles.sectionTitle}>
Active Goals ({activeGoals.length})
</Text>
<SectionHeader
title={`Active Goals (${activeGoals.length})`}
actionLabel="Add New"
onActionPress={() => setIsModalVisible(true)}
/>
{activeGoals.length === 0 ? (
<View style={styles.emptyState}>
<Ionicons name="flag-outline" size={48} color="#d1d5db" />
<Text style={styles.emptyText}>No active goals yet</Text>
<Text style={styles.emptySubtext}>
Tap the + button to create your first goal
</Text>
</View>
<MinimalCard variant="default">
<View style={styles.emptyState}>
<Ionicons
name="flag-outline"
size={48}
color={colors.borderLight}
/>
<Text
style={[
typography.bodyEmphasis,
{ color: colors.textSecondary, marginTop: 12 },
]}
>
No active goals yet
</Text>
<Text
style={[
typography.caption,
{ color: colors.textTertiary, marginTop: 4 },
]}
>
Tap "Add New" to create your first goal
</Text>
</View>
</MinimalCard>
) : (
activeGoals.map((goal) => (
<GoalProgressCard
key={goal.id}
goal={goal}
onComplete={() => handleCompleteGoal(goal)}
onDelete={() => handleDeleteGoal(goal.id)}
/>
))
<View style={styles.goalsList}>
{activeGoals.map((goal) => (
<GoalProgressCard
key={goal.id}
goal={goal}
onComplete={() => handleCompleteGoal(goal)}
onDelete={() => handleDeleteGoal(goal.id)}
/>
))}
</View>
)}
</View>
{/* Completed Goals */}
{completedGoals.length > 0 && (
<View style={styles.section}>
<Text style={styles.sectionTitle}>
Completed Goals ({completedGoals.length})
</Text>
{completedGoals.map((goal) => (
<GoalProgressCard
key={goal.id}
goal={goal}
onDelete={() => handleDeleteGoal(goal.id)}
/>
))}
<SectionHeader
title={`Completed Goals (${completedGoals.length})`}
/>
<View style={styles.goalsList}>
{completedGoals.map((goal) => (
<GoalProgressCard
key={goal.id}
goal={goal}
onDelete={() => handleDeleteGoal(goal.id)}
/>
))}
</View>
</View>
)}
<View style={styles.footer} />
</ScrollView>
{/* Floating Action Button */}
<Animated.View
style={[styles.fabContainer, { transform: [{ scale: fabScale }] }]}
>
{/* Floating Action Button - Minimal Style */}
<View style={styles.fabContainer}>
<TouchableOpacity
onPress={() => setIsModalVisible(true)}
onPressIn={() => {
Animated.spring(fabScale, {
toValue: 0.9,
friction: 8,
tension: 100,
useNativeDriver: true,
}).start();
}}
onPressOut={() => {
Animated.spring(fabScale, {
toValue: 1,
friction: 8,
tension: 100,
useNativeDriver: true,
}).start();
}}
activeOpacity={0.9}
activeOpacity={0.8}
style={[
styles.fab,
{
backgroundColor: colors.primary,
shadowColor: colors.primary,
},
]}
>
<LinearGradient
colors={theme.gradients.primary}
start={{ x: 0, y: 0 }}
end={{ x: 1, y: 1 }}
style={styles.fab}
>
<Ionicons name="add" size={28} color="#fff" />
</LinearGradient>
<Ionicons name="add" size={28} color={colors.white} />
</TouchableOpacity>
</Animated.View>
</View>
{/* Create Goal Modal */}
<GoalCreationModal
@ -319,129 +373,73 @@ export default function GoalsScreen() {
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: theme.colors.background,
},
scrollContent: {
paddingBottom: 20,
},
header: {
padding: 24,
paddingTop: 60,
paddingBottom: 24,
marginBottom: 10,
borderBottomLeftRadius: theme.borderRadius.xl,
borderBottomRightRadius: theme.borderRadius.xl,
},
headerContent: {
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
alignItems: "flex-start",
paddingHorizontal: 24,
paddingTop: 60,
paddingBottom: 24,
},
debugButton: {
padding: 8,
},
headerTitle: {
fontSize: theme.typography.fontSize["3xl"],
fontWeight: theme.typography.fontWeight.bold,
color: theme.colors.white,
section: {
paddingHorizontal: 24,
marginBottom: 24,
},
headerSubtitle: {
fontSize: theme.typography.fontSize.base,
color: "rgba(255, 255, 255, 0.9)",
marginTop: 4,
},
statsContainer: {
statsRow: {
flexDirection: "row",
padding: 16,
gap: 12,
},
statCard: {
flex: 1,
backgroundColor: theme.colors.white,
padding: 16,
borderRadius: theme.borderRadius.xl,
alignItems: "center",
...theme.shadows.medium,
borderWidth: 1,
borderColor: "rgba(59, 130, 246, 0.1)",
},
statValue: {
fontSize: theme.typography.fontSize["2xl"],
fontWeight: theme.typography.fontWeight.bold,
color: theme.colors.primary,
marginBottom: 4,
},
statLabel: {
fontSize: 12,
color: "#6b7280",
fontWeight: "500",
},
analyticsSection: {
padding: 16,
paddingTop: 0,
paddingVertical: 20,
},
analyticsHeader: {
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
backgroundColor: theme.colors.white,
padding: 16,
borderRadius: theme.borderRadius.xl,
marginBottom: 12,
...theme.shadows.subtle,
},
analyticsHeaderLeft: {
flexDirection: "row",
alignItems: "center",
gap: 8,
},
analyticsTitle: {
fontSize: theme.typography.fontSize.base,
fontWeight: theme.typography.fontWeight.semibold,
color: theme.colors.gray700,
},
analyticsContent: {
paddingTop: 4,
paddingTop: 16,
marginTop: 16,
borderTopWidth: 1,
borderTopColor: "rgba(0, 0, 0, 0.05)",
},
section: {
padding: 20,
paddingTop: 10,
},
sectionTitle: {
fontSize: 18,
fontWeight: "600",
color: "#374151",
marginBottom: 12,
goalsList: {
gap: 12,
},
emptyState: {
alignItems: "center",
paddingVertical: 40,
},
emptyText: {
fontSize: 16,
fontWeight: "500",
color: "#6b7280",
marginTop: 12,
},
emptySubtext: {
fontSize: 14,
color: "#9ca3af",
marginTop: 4,
},
footer: {
height: 100,
},
fabContainer: {
position: "absolute",
right: 20,
bottom: 110, // Adjusted for tab bar height
right: 24,
bottom: 90,
},
fab: {
width: 64,
height: 64,
borderRadius: 32,
width: 56,
height: 56,
borderRadius: 28,
justifyContent: "center",
alignItems: "center",
...theme.shadows.glow,
shadowOffset: { width: 0, height: 4 },
shadowOpacity: 0.2,
shadowRadius: 8,
elevation: 4,
},
});

532
apps/mobile/src/app/(tabs)/index.tsx
View File

@ -7,28 +7,28 @@ import {
Image,
} from "react-native";
import { useUser } from "@clerk/clerk-expo";
import { LinearGradient } from "expo-linear-gradient";
import { useState, useCallback, useEffect } from "react";
import { useFocusEffect } from "@react-navigation/native";
import AsyncStorage from "@react-native-async-storage/async-storage";
import { theme } from "../../styles/theme";
import { ActivityWidget } from "../../components/ActivityWidget";
import { QuickActionGrid } from "../../components/QuickActionGrid";
import { Ionicons } from "@expo/vector-icons";
import { useTheme } from "../../contexts/ThemeContext";
import { useStatistics } from "../../contexts/StatisticsContext";
import { MinimalCard } from "../../components/MinimalCard";
import { SectionHeader } from "../../components/SectionHeader";
import { IconContainer } from "../../components/IconContainer";
import { ProgressBar } from "../../components/ProgressBar";
import { TrackMealModal } from "../../components/TrackMealModal";
import { AddWaterModal } from "../../components/AddWaterModal";
import { HydrationWidget } from "../../components/HydrationWidget";
import { NutritionWidget } from "../../components/NutritionWidget";
import { WeeklyProgressWidget } from "../../components/WeeklyProgressWidget";
import { ScanFoodModal } from "../../components/ScanFoodModal";
import { useStatistics } from "../../contexts/StatisticsContext";
import { Ionicons } from "@expo/vector-icons";
const CALORIE_GOAL = 2000; // kcal
const WATER_GOAL = 2000; // ml
export default function HomeScreen() {
const { user } = useUser();
const { refetchStatistics, forceRefresh } = useStatistics();
const { colors, typography } = useTheme();
const { refetchStatistics, forceRefresh, statistics, loading } =
useStatistics();
const [refreshing, setRefreshing] = useState(false);
const [trackMealModalVisible, setTrackMealModalVisible] = useState(false);
const [addWaterModalVisible, setAddWaterModalVisible] = useState(false);
@ -45,7 +45,6 @@ export default function HomeScreen() {
const onRefresh = useCallback(async () => {
setRefreshing(true);
// Force refetch statistics bypassing cache
await forceRefresh();
setRefreshing(false);
}, [forceRefresh]);
@ -168,57 +167,358 @@ export default function HomeScreen() {
return () => clearTimeout(midnightTimer);
}, []);
const checkInsThisWeek = statistics?.attendance.checkInsThisWeek || 0;
const currentStreak = statistics?.attendance.currentStreak || 0;
return (
<View style={styles.container}>
<View style={[styles.container, { backgroundColor: colors.background }]}>
<ScrollView
contentContainerStyle={styles.scrollContent}
refreshControl={
<RefreshControl
refreshing={refreshing}
onRefresh={onRefresh}
tintColor={theme.colors.primary}
tintColor={colors.primary}
/>
}
>
{/* Header Section */}
<View style={styles.header}>
<View>
<Text style={styles.greeting}>{getGreeting()},</Text>
<Text style={styles.name}>{user?.firstName || "Athlete"}</Text>
<Text style={[typography.body, { color: colors.textSecondary }]}>
{getGreeting()},
</Text>
<Text
style={[
typography.h1,
{ color: colors.textPrimary, marginTop: 4 },
]}
>
{user?.firstName || "Athlete"}
</Text>
</View>
<View style={styles.avatarContainer}>
<View>
{user?.imageUrl ? (
<Image source={{ uri: user.imageUrl }} style={styles.avatar} />
) : (
<View style={styles.placeholderAvatar}>
<Ionicons name="person" size={24} color="#fff" />
<View
style={[
styles.placeholderAvatar,
{ backgroundColor: colors.primary },
]}
>
<Ionicons name="person" size={24} color={colors.white} />
</View>
)}
</View>
</View>
{/* Activity Widget */}
<ActivityWidget calories={calories} />
{/* Daily Stats Card */}
<View style={styles.section}>
<MinimalCard variant="elevated">
<View style={styles.statsRow}>
<View style={styles.statItem}>
<IconContainer
variant="colored"
backgroundColor={`${colors.info}20`}
>
<Ionicons
name="checkmark-circle"
size={24}
color={colors.info}
/>
</IconContainer>
<Text
style={[
typography.stat,
{ color: colors.textPrimary, marginTop: 8 },
]}
>
{checkInsThisWeek}
</Text>
<Text
style={[typography.caption, { color: colors.textTertiary }]}
>
This Week
</Text>
</View>
{/* Quick Action Grid */}
<QuickActionGrid
onTrackMealPress={() => setTrackMealModalVisible(true)}
onAddWaterPress={() => setAddWaterModalVisible(true)}
onScanFoodPress={() => setScanFoodModalVisible(true)}
onLogWorkoutPress={() => {
// TODO: Implement workout logging
console.log("Log workout tapped");
}}
/>
<View
style={[styles.divider, { backgroundColor: colors.border }]}
/>
{/* Nutrition Widget */}
<NutritionWidget current={calories} goal={CALORIE_GOAL} />
<View style={styles.statItem}>
<IconContainer
variant="colored"
backgroundColor={`${colors.danger}20`}
>
<Ionicons name="flame" size={24} color={colors.danger} />
</IconContainer>
<Text
style={[
typography.stat,
{ color: colors.textPrimary, marginTop: 8 },
]}
>
{calories}
</Text>
<Text
style={[typography.caption, { color: colors.textTertiary }]}
>
Kcal
</Text>
</View>
{/* Hydration Widget */}
<HydrationWidget current={waterIntake} goal={WATER_GOAL} />
<View
style={[styles.divider, { backgroundColor: colors.border }]}
/>
{/* Weekly Progress Widget */}
<WeeklyProgressWidget />
<View style={styles.statItem}>
<IconContainer
variant="colored"
backgroundColor={`${colors.success}20`}
>
<Ionicons name="trophy" size={24} color={colors.success} />
</IconContainer>
<Text
style={[
typography.stat,
{ color: colors.textPrimary, marginTop: 8 },
]}
>
{currentStreak}
</Text>
<Text
style={[typography.caption, { color: colors.textTertiary }]}
>
Day Streak
</Text>
</View>
</View>
</MinimalCard>
</View>
{/* Quick Actions */}
<View style={styles.section}>
<SectionHeader title="Quick Actions" />
<View style={styles.actionGrid}>
<MinimalCard
variant="default"
onPress={() => {
console.log("Log workout tapped");
}}
style={styles.actionCard}
>
<IconContainer
variant="colored"
backgroundColor={`${colors.primary}20`}
>
<Ionicons name="barbell" size={24} color={colors.primary} />
</IconContainer>
<Text
style={[
typography.h3,
{ color: colors.textPrimary, marginTop: 8 },
]}
>
Log Workout
</Text>
</MinimalCard>
<MinimalCard
variant="default"
onPress={() => setTrackMealModalVisible(true)}
style={styles.actionCard}
>
<IconContainer
variant="colored"
backgroundColor={`${colors.success}20`}
>
<Ionicons name="restaurant" size={24} color={colors.success} />
</IconContainer>
<Text
style={[
typography.h3,
{ color: colors.textPrimary, marginTop: 8 },
]}
>
Track Meal
</Text>
</MinimalCard>
<MinimalCard
variant="default"
onPress={() => setAddWaterModalVisible(true)}
style={styles.actionCard}
>
<IconContainer
variant="colored"
backgroundColor={`${colors.info}20`}
>
<Ionicons name="water" size={24} color={colors.info} />
</IconContainer>
<Text
style={[
typography.h3,
{ color: colors.textPrimary, marginTop: 8 },
]}
>
Add Water
</Text>
</MinimalCard>
<MinimalCard
variant="default"
onPress={() => setScanFoodModalVisible(true)}
style={styles.actionCard}
>
<IconContainer
variant="colored"
backgroundColor={`${colors.accent}20`}
>
<Ionicons name="scan" size={24} color={colors.accent} />
</IconContainer>
<Text
style={[
typography.h3,
{ color: colors.textPrimary, marginTop: 8 },
]}
>
Scan Food
</Text>
</MinimalCard>
</View>
</View>
{/* Nutrition Progress */}
<View style={styles.section}>
<SectionHeader title="Nutrition" />
<MinimalCard variant="default">
<View style={styles.progressHeader}>
<View style={styles.progressLabelRow}>
<Ionicons name="flame" size={20} color={colors.textSecondary} />
<Text
style={[
typography.h3,
{ color: colors.textPrimary, marginLeft: 8 },
]}
>
Calories
</Text>
</View>
<Text
style={[typography.bodyEmphasis, { color: colors.textPrimary }]}
>
{calories} / {CALORIE_GOAL}
</Text>
</View>
<ProgressBar
progress={calories / CALORIE_GOAL}
color={colors.danger}
style={{ marginTop: 12 }}
/>
</MinimalCard>
</View>
{/* Hydration Progress */}
<View style={styles.section}>
<MinimalCard variant="default">
<View style={styles.progressHeader}>
<View style={styles.progressLabelRow}>
<Ionicons name="water" size={20} color={colors.textSecondary} />
<Text
style={[
typography.h3,
{ color: colors.textPrimary, marginLeft: 8 },
]}
>
Hydration
</Text>
</View>
<Text
style={[typography.bodyEmphasis, { color: colors.textPrimary }]}
>
{waterIntake} / {WATER_GOAL} ml
</Text>
</View>
<ProgressBar
progress={waterIntake / WATER_GOAL}
color={colors.info}
style={{ marginTop: 12 }}
/>
</MinimalCard>
</View>
{/* Recent Activity */}
<View style={styles.section}>
<SectionHeader
title="Recent Activity"
actionLabel="See All"
onActionPress={() => console.log("See all tapped")}
/>
<View style={styles.activityList}>
<MinimalCard variant="default" style={styles.activityItem}>
<IconContainer
variant="colored"
backgroundColor={`${colors.primary}20`}
>
<Ionicons name="barbell" size={20} color={colors.primary} />
</IconContainer>
<View style={styles.activityInfo}>
<Text style={[typography.h3, { color: colors.textPrimary }]}>
Upper Body Power
</Text>
<Text
style={[
typography.caption,
{ color: colors.textTertiary, marginTop: 2 },
]}
>
Today, 10:00 AM
</Text>
</View>
<Text
style={[
typography.bodyEmphasis,
{ color: colors.textSecondary },
]}
>
45m
</Text>
</MinimalCard>
<MinimalCard variant="default" style={styles.activityItem}>
<IconContainer
variant="colored"
backgroundColor={`${colors.success}20`}
>
<Ionicons name="bicycle" size={20} color={colors.success} />
</IconContainer>
<View style={styles.activityInfo}>
<Text style={[typography.h3, { color: colors.textPrimary }]}>
Morning Cardio
</Text>
<Text
style={[
typography.caption,
{ color: colors.textTertiary, marginTop: 2 },
]}
>
Yesterday, 7:30 AM
</Text>
</View>
<Text
style={[
typography.bodyEmphasis,
{ color: colors.textSecondary },
]}
>
30m
</Text>
</MinimalCard>
</View>
</View>
<TrackMealModal
visible={trackMealModalVisible}
@ -240,54 +540,6 @@ export default function HomeScreen() {
onAddFood={handleAddScannedFood}
/>
{/* Recent Activity Section */}
<View style={styles.section}>
<View style={styles.sectionHeader}>
<Text style={styles.sectionTitle}>Recent Activity</Text>
<Text style={styles.seeAll}>See All</Text>
</View>
<View style={styles.activityCard}>
<LinearGradient
colors={["rgba(255, 255, 255, 0.8)", "rgba(255, 255, 255, 0.5)"]}
style={[styles.recentItem, theme.shadows.subtle]}
>
<View style={styles.recentIconContainer}>
<LinearGradient
colors={theme.gradients.primary}
style={styles.recentIcon}
>
<Ionicons name="barbell" size={20} color="#fff" />
</LinearGradient>
</View>
<View style={styles.recentInfo}>
<Text style={styles.recentTitle}>Upper Body Power</Text>
<Text style={styles.recentSubtitle}>Today, 10:00 AM</Text>
</View>
<Text style={styles.recentValue}>45m</Text>
</LinearGradient>
<LinearGradient
colors={["rgba(255, 255, 255, 0.8)", "rgba(255, 255, 255, 0.5)"]}
style={[styles.recentItem, theme.shadows.subtle]}
>
<View style={styles.recentIconContainer}>
<LinearGradient
colors={theme.gradients.success}
style={styles.recentIcon}
>
<Ionicons name="bicycle" size={20} color="#fff" />
</LinearGradient>
</View>
<View style={styles.recentInfo}>
<Text style={styles.recentTitle}>Morning Cardio</Text>
<Text style={styles.recentSubtitle}>Yesterday, 7:30 AM</Text>
</View>
<Text style={styles.recentValue}>30m</Text>
</LinearGradient>
</View>
</View>
{/* Bottom Spacer for Tab Bar */}
<View style={{ height: 100 }} />
</ScrollView>
@ -298,7 +550,6 @@ export default function HomeScreen() {
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: theme.colors.background,
},
scrollContent: {
paddingTop: 60,
@ -308,102 +559,65 @@ const styles = StyleSheet.create({
justifyContent: "space-between",
alignItems: "center",
paddingHorizontal: 24,
marginBottom: 32,
},
greeting: {
fontSize: 16,
color: theme.colors.gray600,
fontWeight: "500",
marginBottom: 4,
},
name: {
fontSize: 32,
fontWeight: "800",
color: theme.colors.gray900,
letterSpacing: -0.5,
},
avatarContainer: {
shadowColor: "#000",
shadowOffset: { width: 0, height: 4 },
shadowOpacity: 0.1,
shadowRadius: 12,
elevation: 5,
marginBottom: 24,
},
avatar: {
width: 56,
height: 56,
borderRadius: 20,
borderWidth: 2,
borderColor: "#fff",
borderRadius: 28,
},
placeholderAvatar: {
width: 56,
height: 56,
borderRadius: 20,
backgroundColor: theme.colors.primary,
borderRadius: 28,
justifyContent: "center",
alignItems: "center",
borderWidth: 2,
borderColor: "#fff",
},
section: {
paddingHorizontal: 20,
paddingHorizontal: 24,
marginBottom: 24,
},
sectionHeader: {
statsRow: {
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
marginBottom: 16,
},
sectionTitle: {
fontSize: 18,
fontWeight: "700",
color: theme.colors.gray900,
},
seeAll: {
fontSize: 14,
color: theme.colors.primary,
fontWeight: "600",
},
activityCard: {
gap: 12,
},
recentItem: {
flexDirection: "row",
statItem: {
alignItems: "center",
padding: 16,
borderRadius: 20,
backgroundColor: "#fff",
borderWidth: 1,
borderColor: "rgba(255, 255, 255, 0.6)",
},
recentIconContainer: {
marginRight: 16,
},
recentIcon: {
width: 48,
height: 48,
borderRadius: 16,
justifyContent: "center",
alignItems: "center",
},
recentInfo: {
flex: 1,
},
recentTitle: {
fontSize: 16,
fontWeight: "600",
color: theme.colors.gray900,
marginBottom: 4,
divider: {
width: 1,
height: 60,
},
recentSubtitle: {
fontSize: 12,
color: theme.colors.gray500,
actionGrid: {
flexDirection: "row",
flexWrap: "wrap",
gap: 12,
},
recentValue: {
fontSize: 14,
fontWeight: "600",
color: theme.colors.gray900,
actionCard: {
width: "48%",
alignItems: "center",
paddingVertical: 20,
},
progressHeader: {
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
},
progressLabelRow: {
flexDirection: "row",
alignItems: "center",
},
activityList: {
gap: 12,
},
activityItem: {
flexDirection: "row",
alignItems: "center",
gap: 12,
},
activityInfo: {
flex: 1,
},
});

660
apps/mobile/src/app/(tabs)/profile.tsx
View File

@ -11,11 +11,13 @@ import {
import { useUser, useClerk, useAuth } from "@clerk/clerk-expo";
import { useRouter } from "expo-router";
import { Ionicons } from "@expo/vector-icons";
import { LinearGradient } from "expo-linear-gradient";
import { theme } from "../../styles/theme";
import { AnimatedButton } from "../../components/AnimatedButton";
import { GradientBackground } from "../../components/GradientBackground";
import { useState, useEffect } from "react";
import { useTheme } from "../../contexts/ThemeContext";
import { MinimalCard } from "../../components/MinimalCard";
import { ListItem } from "../../components/ListItem";
import { MinimalButton } from "../../components/MinimalButton";
import { Badge } from "../../components/Badge";
import { IconContainer } from "../../components/IconContainer";
import { API_BASE_URL, API_ENDPOINTS } from "../../config/api";
import log from "../../utils/logger";
@ -23,24 +25,9 @@ export default function ProfileScreen() {
const { user } = useUser();
const { signOut } = useClerk();
const router = useRouter();
const handleSignOut = async () => {
try {
await signOut();
} catch (err) {
log.error("Failed to sign out", err);
}
};
const confirmSignOut = () => {
Alert.alert("Sign Out", "Are you sure you want to sign out?", [
{ text: "Cancel", style: "cancel" },
{ text: "Sign Out", style: "destructive", onPress: handleSignOut },
]);
};
// Gym selection state and handlers
const { colors, typography, theme: activeTheme, setTheme } = useTheme();
const { getToken } = useAuth();
const [gyms, setGyms] = useState<
Array<{ id: string; name: string; location?: string }>
>([]);
@ -60,7 +47,6 @@ export default function ProfileScreen() {
}
}, [user?.publicMetadata, gyms]);
// Auto-load gyms on mount
useEffect(() => {
loadGyms();
}, []);
@ -80,9 +66,7 @@ export default function ProfileScreen() {
log.error(
"Failed to fetch gyms - non-OK response",
new Error(text.slice(0, 200)),
{
status: res.status,
},
{ status: res.status },
);
setGyms([]);
return;
@ -92,9 +76,7 @@ export default function ProfileScreen() {
log.error(
"Failed to fetch gyms - expected JSON",
new Error(text.slice(0, 200)),
{
contentType,
},
{ contentType },
);
setGyms([]);
return;
@ -149,9 +131,7 @@ export default function ProfileScreen() {
log.error(
"Failed to update gym selection - non-OK response",
new Error(text.slice(0, 200)),
{
status: res.status,
},
{ status: res.status },
);
Alert.alert("Error", "Failed to update gym selection");
return;
@ -167,14 +147,12 @@ export default function ProfileScreen() {
});
}
}
// Update current gym state for immediate UI reflection
setCurrentGymId(selectedGymId);
setCurrentGymName(
selectedGymId
? (gyms.find((g) => g.id === selectedGymId)?.name ?? null)
: null,
);
// Attempt to reload Clerk user metadata so current gym reflects server state
try {
await (user as any)?.reload?.();
} catch (e) {
@ -190,372 +168,476 @@ export default function ProfileScreen() {
}
};
return (
<View style={styles.container}>
<GradientBackground variant="primary" style={styles.header}>
<View style={styles.profileCard}>
<View style={styles.avatarContainer}>
{user?.imageUrl ? (
<Image source={{ uri: user.imageUrl }} style={styles.avatar} />
) : (
<View style={styles.placeholderAvatar}>
<Ionicons name="person" size={40} color="#fff" />
</View>
)}
<View style={styles.editBadge}>
<Ionicons name="pencil" size={12} color={theme.colors.primary} />
</View>
</View>
<Text style={styles.name}>{user?.fullName || "User"}</Text>
<Text style={styles.email}>
{user?.primaryEmailAddress?.emailAddress}
</Text>
<View style={styles.memberBadge}>
<Text style={styles.memberText}>Premium Member</Text>
</View>
</View>
</GradientBackground>
const handleSignOut = async () => {
try {
await signOut();
} catch (err) {
log.error("Failed to sign out", err);
}
};
<View style={styles.content}>
<View style={styles.section}>
<Text style={styles.sectionTitle}>Account</Text>
<View style={[styles.infoCard, theme.shadows.subtle]}>
<TouchableOpacity
style={styles.infoRow}
onPress={() => router.push("/personal-details")}
const confirmSignOut = () => {
Alert.alert("Sign Out", "Are you sure you want to sign out?", [
{ text: "Cancel", style: "cancel" },
{ text: "Sign Out", style: "destructive", onPress: handleSignOut },
]);
};
const handleThemeChange = () => {
Alert.alert("Choose Theme", "Select your preferred theme", [
{
text: "Light",
onPress: () => setTheme("light"),
},
{
text: "Dark",
onPress: () => setTheme("dark"),
},
{
text: "System",
onPress: () => setTheme("system"),
},
{ text: "Cancel", style: "cancel" },
]);
};
const getThemeLabel = () => {
if (activeTheme === "light") return "Light";
if (activeTheme === "dark") return "Dark";
return "System";
};
return (
<ScrollView
style={[styles.container, { backgroundColor: colors.background }]}
contentContainerStyle={styles.content}
>
{/* Header Card */}
<MinimalCard variant="elevated" style={styles.profileCard}>
<View style={styles.avatarContainer}>
{user?.imageUrl ? (
<Image source={{ uri: user.imageUrl }} style={styles.avatar} />
) : (
<View
style={[
styles.placeholderAvatar,
{ backgroundColor: colors.primary },
]}
>
<LinearGradient
colors={["rgba(59, 130, 246, 0.1)", "rgba(59, 130, 246, 0.05)"]}
style={styles.iconContainer}
<Ionicons name="person" size={40} color={colors.white} />
</View>
)}
</View>
<Text
style={[typography.h2, { color: colors.textPrimary, marginTop: 16 }]}
>
{user?.fullName || "User"}
</Text>
<Text
style={[
typography.body,
{ color: colors.textSecondary, marginTop: 4 },
]}
>
{user?.primaryEmailAddress?.emailAddress}
</Text>
<Badge
label="Premium Member"
variant="primary"
style={{ marginTop: 12 }}
/>
</MinimalCard>
{/* Theme Settings */}
<View style={styles.section}>
<Text
style={[
typography.h3,
{ color: colors.textPrimary, marginBottom: 12 },
]}
>
Appearance
</Text>
<MinimalCard variant="default">
<ListItem
title="Theme"
subtitle={`Current: ${getThemeLabel()}`}
leftIcon={
<IconContainer
variant="colored"
backgroundColor={`${colors.accent}20`}
>
<Ionicons
name="color-palette"
size={20}
color={colors.accent}
/>
</IconContainer>
}
rightElement={
<Ionicons
name="chevron-forward"
size={20}
color={colors.textTertiary}
/>
}
onPress={handleThemeChange}
/>
</MinimalCard>
</View>
{/* Account Settings */}
<View style={styles.section}>
<Text
style={[
typography.h3,
{ color: colors.textPrimary, marginBottom: 12 },
]}
>
Account
</Text>
<MinimalCard variant="default">
<ListItem
title="Personal Details"
leftIcon={
<IconContainer
variant="colored"
backgroundColor={`${colors.primary}20`}
>
<Ionicons
name="person-outline"
size={20}
color={theme.colors.primary}
color={colors.primary}
/>
</LinearGradient>
<Text style={styles.infoLabel}>Personal Details</Text>
</IconContainer>
}
rightElement={
<Ionicons
name="chevron-forward"
size={20}
color={theme.colors.gray400}
color={colors.textTertiary}
/>
</TouchableOpacity>
<View style={styles.divider} />
<TouchableOpacity
style={styles.infoRow}
onPress={() => router.push("/fitness-profile")}
>
<LinearGradient
colors={["rgba(16, 185, 129, 0.1)", "rgba(16, 185, 129, 0.05)"]}
style={styles.iconContainer}
}
onPress={() => router.push("/personal-details")}
/>
<View style={[styles.divider, { backgroundColor: colors.border }]} />
<ListItem
title="Fitness Profile"
leftIcon={
<IconContainer
variant="colored"
backgroundColor={`${colors.success}20`}
>
<Ionicons
name="fitness-outline"
size={20}
color={theme.colors.success}
color={colors.success}
/>
</LinearGradient>
<Text style={styles.infoLabel}>Fitness Profile</Text>
</IconContainer>
}
rightElement={
<Ionicons
name="chevron-forward"
size={20}
color={theme.colors.gray400}
color={colors.textTertiary}
/>
</TouchableOpacity>
<View style={styles.divider} />
<TouchableOpacity style={styles.infoRow}>
<LinearGradient
colors={["rgba(245, 158, 11, 0.1)", "rgba(245, 158, 11, 0.05)"]}
style={styles.iconContainer}
}
onPress={() => router.push("/fitness-profile")}
/>
<View style={[styles.divider, { backgroundColor: colors.border }]} />
<ListItem
title="Notifications"
leftIcon={
<IconContainer
variant="colored"
backgroundColor={`${colors.warning}20`}
>
<Ionicons
name="notifications-outline"
size={20}
color={theme.colors.warning}
color={colors.warning}
/>
</LinearGradient>
<Text style={styles.infoLabel}>Notifications</Text>
</IconContainer>
}
rightElement={
<Ionicons
name="chevron-forward"
size={20}
color={theme.colors.gray400}
color={colors.textTertiary}
/>
</TouchableOpacity>
</View>
}
/>
</MinimalCard>
</View>
{/* Gym Selection */}
<View
style={[styles.infoCard, theme.shadows.subtle, { marginTop: 12 }]}
>
<View
style={{
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
padding: 12,
}}
{/* Gym Selection */}
<View style={styles.section}>
<View style={styles.sectionHeader}>
<Text style={[typography.h3, { color: colors.textPrimary }]}>
Gym Selection
</Text>
<TouchableOpacity onPress={loadGyms}>
<Text
style={[
typography.body,
{ color: colors.primary, fontWeight: "600" },
]}
>
<Text style={styles.infoLabel}>
Gym{" "}
{currentGymName
? `(Current: ${currentGymName})`
: currentGymId
? `(Current: ${currentGymId})`
: "(Current: None)"}
Refresh
</Text>
</TouchableOpacity>
</View>
<MinimalCard variant="default">
{currentGymName && (
<View style={styles.currentGym}>
<Text
style={[typography.caption, { color: colors.textTertiary }]}
>
Current Gym
</Text>
<Text
style={[
typography.h3,
{ color: colors.textPrimary, marginTop: 4 },
]}
>
{currentGymName}
</Text>
<TouchableOpacity onPress={loadGyms}>
<Text style={{ color: theme.colors.primary }}>
Refresh Gyms
</Text>
</TouchableOpacity>
</View>
)}
{gymsLoading ? (
<ActivityIndicator style={{ padding: 12 }} />
) : (
{gymsLoading ? (
<View style={styles.loadingContainer}>
<ActivityIndicator color={colors.primary} />
</View>
) : (
<>
<ScrollView
horizontal
showsHorizontalScrollIndicator={false}
style={{ paddingHorizontal: 12, paddingBottom: 12 }}
style={styles.gymScroll}
contentContainerStyle={styles.gymScrollContent}
>
<View style={{ flexDirection: "row" }}>
<TouchableOpacity
<TouchableOpacity
style={[
styles.gymChip,
{
backgroundColor:
selectedGymId === null
? `${colors.primary}20`
: colors.surfaceElevated,
borderColor:
selectedGymId === null ? colors.primary : colors.border,
},
]}
onPress={() => setSelectedGymId(null)}
>
<Text
style={[
styles.infoRow,
selectedGymId === null && {
backgroundColor: "rgba(59, 130, 246, 0.1)",
typography.body,
{
color:
selectedGymId === null
? colors.primary
: colors.textSecondary,
fontWeight: selectedGymId === null ? "600" : "400",
},
]}
onPress={() => setSelectedGymId(null)}
>
<Text style={styles.infoLabel}>Proceed without gym</Text>
</TouchableOpacity>
{gyms.map((gym) => (
<TouchableOpacity
key={gym.id}
No Gym
</Text>
</TouchableOpacity>
{gyms.map((gym) => (
<TouchableOpacity
key={gym.id}
style={[
styles.gymChip,
{
backgroundColor:
selectedGymId === gym.id
? `${colors.primary}20`
: colors.surfaceElevated,
borderColor:
selectedGymId === gym.id
? colors.primary
: colors.border,
},
]}
onPress={() => setSelectedGymId(gym.id)}
>
<Text
style={[
styles.infoRow,
selectedGymId === gym.id && {
backgroundColor: "rgba(59, 130, 246, 0.1)",
typography.body,
{
color:
selectedGymId === gym.id
? colors.primary
: colors.textSecondary,
fontWeight: selectedGymId === gym.id ? "600" : "400",
},
]}
onPress={() => setSelectedGymId(gym.id)}
>
<Text style={styles.infoLabel}>{gym.name}</Text>
</TouchableOpacity>
))}
</View>
{gym.name}
</Text>
</TouchableOpacity>
))}
</ScrollView>
)}
<View style={{ padding: 12 }}>
<AnimatedButton
title="Apply Gym Selection"
<MinimalButton
title="Apply Selection"
onPress={handleApplyGym}
variant="primary"
style={{ marginTop: 4 }}
icon={
<Ionicons
name="checkmark-outline"
size={20}
color={theme.colors.white}
/>
}
style={{ marginTop: 16 }}
/>
</View>
</View>
</View>
</>
)}
</MinimalCard>
</View>
<View style={styles.section}>
<Text style={styles.sectionTitle}>Support</Text>
<View style={[styles.infoCard, theme.shadows.subtle]}>
<TouchableOpacity style={styles.infoRow}>
<LinearGradient
colors={["rgba(139, 92, 246, 0.1)", "rgba(139, 92, 246, 0.05)"]}
style={styles.iconContainer}
{/* Support */}
<View style={styles.section}>
<Text
style={[
typography.h3,
{ color: colors.textPrimary, marginBottom: 12 },
]}
>
Support
</Text>
<MinimalCard variant="default">
<ListItem
title="Help Center"
leftIcon={
<IconContainer
variant="colored"
backgroundColor={`${colors.info}20`}
>
<Ionicons
name="help-circle-outline"
size={20}
color={theme.colors.secondary}
color={colors.info}
/>
</LinearGradient>
<Text style={styles.infoLabel}>Help Center</Text>
</IconContainer>
}
rightElement={
<Ionicons
name="chevron-forward"
size={20}
color={theme.colors.gray400}
color={colors.textTertiary}
/>
</TouchableOpacity>
<View style={styles.divider} />
<TouchableOpacity style={styles.infoRow}>
<LinearGradient
colors={[
"rgba(107, 114, 128, 0.1)",
"rgba(107, 114, 128, 0.05)",
]}
style={styles.iconContainer}
>
}
/>
<View style={[styles.divider, { backgroundColor: colors.border }]} />
<ListItem
title="Privacy & Security"
leftIcon={
<IconContainer variant="subtle">
<Ionicons
name="shield-checkmark-outline"
size={20}
color={theme.colors.gray600}
color={colors.textSecondary}
/>
</LinearGradient>
<Text style={styles.infoLabel}>Privacy & Security</Text>
</IconContainer>
}
rightElement={
<Ionicons
name="chevron-forward"
size={20}
color={theme.colors.gray400}
color={colors.textTertiary}
/>
</TouchableOpacity>
</View>
</View>
}
/>
</MinimalCard>
</View>
<AnimatedButton
{/* Sign Out */}
<View style={styles.section}>
<MinimalButton
title="Sign Out"
onPress={confirmSignOut}
variant="danger"
style={styles.signOutButton}
icon={<Ionicons name="log-out-outline" size={20} color="#fff" />}
size="lg"
/>
<Text style={styles.version}>Version 1.0.0</Text>
</View>
</View>
<Text
style={[
typography.caption,
{
color: colors.textTertiary,
textAlign: "center",
marginBottom: 100,
},
]}
>
Version 1.0.0
</Text>
</ScrollView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: theme.colors.background,
},
header: {
content: {
padding: 24,
paddingTop: 60,
paddingBottom: 30,
borderBottomLeftRadius: theme.borderRadius.xl,
borderBottomRightRadius: theme.borderRadius.xl,
alignItems: "center",
},
profileCard: {
alignItems: "center",
paddingVertical: 32,
marginBottom: 24,
},
avatarContainer: {
position: "relative",
marginBottom: 16,
},
avatar: {
width: 100,
height: 100,
borderRadius: 50,
borderWidth: 4,
borderColor: "rgba(255, 255, 255, 0.3)",
},
placeholderAvatar: {
width: 100,
height: 100,
borderRadius: 50,
backgroundColor: "rgba(255, 255, 255, 0.2)",
justifyContent: "center",
alignItems: "center",
borderWidth: 4,
borderColor: "rgba(255, 255, 255, 0.3)",
},
editBadge: {
position: "absolute",
bottom: 0,
right: 0,
backgroundColor: theme.colors.white,
width: 32,
height: 32,
borderRadius: 16,
justifyContent: "center",
alignItems: "center",
shadowColor: "#000",
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.1,
shadowRadius: 4,
elevation: 3,
},
name: {
fontSize: theme.typography.fontSize["2xl"],
fontWeight: theme.typography.fontWeight.bold,
color: theme.colors.white,
marginBottom: 4,
},
email: {
fontSize: theme.typography.fontSize.sm,
color: "rgba(255, 255, 255, 0.8)",
marginBottom: 12,
},
memberBadge: {
backgroundColor: "rgba(255, 255, 255, 0.2)",
paddingHorizontal: 12,
paddingVertical: 6,
borderRadius: theme.borderRadius.full,
borderWidth: 1,
borderColor: "rgba(255, 255, 255, 0.3)",
},
memberText: {
color: theme.colors.white,
fontSize: theme.typography.fontSize.xs,
fontWeight: theme.typography.fontWeight.bold,
letterSpacing: 0.5,
},
content: {
padding: 20,
marginTop: -20,
},
section: {
marginBottom: 24,
},
sectionTitle: {
fontSize: theme.typography.fontSize.lg,
fontWeight: theme.typography.fontWeight.bold,
color: theme.colors.gray900,
marginBottom: 12,
marginLeft: 4,
},
infoCard: {
backgroundColor: theme.colors.white,
borderRadius: theme.borderRadius.xl,
padding: 8,
borderWidth: 1,
borderColor: theme.colors.gray100,
},
infoRow: {
sectionHeader: {
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
padding: 12,
},
iconContainer: {
width: 36,
height: 36,
borderRadius: 10,
justifyContent: "center",
alignItems: "center",
marginRight: 12,
},
infoLabel: {
flex: 1,
fontSize: theme.typography.fontSize.base,
color: theme.colors.gray900,
fontWeight: theme.typography.fontWeight.medium,
marginBottom: 12,
},
divider: {
height: 1,
backgroundColor: theme.colors.gray100,
marginLeft: 60,
marginLeft: 52,
},
signOutButton: {
marginTop: 8,
currentGym: {
marginBottom: 16,
paddingBottom: 16,
borderBottomWidth: 1,
borderBottomColor: "rgba(0, 0, 0, 0.05)",
},
version: {
textAlign: "center",
marginTop: 24,
color: theme.colors.gray400,
fontSize: theme.typography.fontSize.xs,
loadingContainer: {
paddingVertical: 20,
alignItems: "center",
},
gymScroll: {
marginHorizontal: -16,
},
gymScrollContent: {
paddingHorizontal: 16,
gap: 8,
},
gymChip: {
paddingHorizontal: 16,
paddingVertical: 10,
borderRadius: 20,
borderWidth: 1.5,
marginRight: 8,
},
});

482
apps/mobile/src/app/(tabs)/recommendations.tsx
View File

@ -1,4 +1,4 @@
import React, { useState, useCallback, useRef } from "react";
import React, { useState, useCallback } from "react";
import {
View,
Text,
@ -9,11 +9,15 @@ import {
ActivityIndicator,
Alert,
} from "react-native";
import { LinearGradient } from "expo-linear-gradient";
import { Ionicons } from "@expo/vector-icons";
import { useUser } from "@clerk/clerk-expo";
import { useFocusEffect } from "expo-router";
import { theme } from "../../styles/theme";
import { useTheme } from "../../contexts/ThemeContext";
import { MinimalCard } from "../../components/MinimalCard";
import { SectionHeader } from "../../components/SectionHeader";
import { MinimalButton } from "../../components/MinimalButton";
import { Badge } from "../../components/Badge";
import { IconContainer } from "../../components/IconContainer";
import { useRecommendations } from "../../contexts/RecommendationsContext";
import { useNotifications } from "../../contexts/NotificationsContext";
import { NotificationsModal } from "../../components/NotificationsModal";
@ -22,6 +26,7 @@ import log from "../../utils/logger";
export default function RecommendationsScreen() {
const { user } = useUser();
const { colors, typography } = useTheme();
const {
recommendations: allRecommendations,
loading,
@ -43,7 +48,7 @@ export default function RecommendationsScreen() {
setNotificationsVisible(false);
};
// Filter to show only approved recommendations for regular users
// Filter to show only approved recommendations
const recommendations = allRecommendations.filter(
(rec) => rec.status === "approved",
);
@ -101,14 +106,14 @@ export default function RecommendationsScreen() {
if (loading && recommendations.length === 0) {
return (
<View style={styles.centered}>
<ActivityIndicator size="large" color={theme.colors.primary} />
<View style={[styles.centered, { backgroundColor: colors.background }]}>
<ActivityIndicator size="large" color={colors.primary} />
</View>
);
}
return (
<View style={styles.container}>
<View style={[styles.container, { backgroundColor: colors.background }]}>
<NotificationsModal
visible={notificationsVisible}
onClose={handleCloseNotifications}
@ -119,98 +124,126 @@ export default function RecommendationsScreen() {
<RefreshControl
refreshing={refreshing}
onRefresh={onRefresh}
tintColor={theme.colors.primary}
tintColor={colors.primary}
/>
}
>
{/* Header */}
<LinearGradient
colors={theme.gradients.primary}
start={{ x: 0, y: 0 }}
end={{ x: 1, y: 1 }}
style={styles.header}
>
<View style={styles.header}>
<View>
<Text style={styles.headerTitle}>AI Recommendations</Text>
<Text style={styles.headerSubtitle}>
<Text style={[typography.h1, { color: colors.textPrimary }]}>
AI Recommendations
</Text>
<Text
style={[
typography.body,
{ color: colors.textSecondary, marginTop: 4 },
]}
>
Personalized fitness & nutrition plans
</Text>
</View>
<TouchableOpacity
style={styles.iconContainer}
style={styles.notificationButton}
onPress={handleOpenNotifications}
activeOpacity={0.7}
>
<Ionicons name="sparkles" size={32} color="#fff" />
{unreadCount > 0 && (
<View style={styles.badge}>
<Text style={styles.badgeText}>{unreadCount}</Text>
</View>
)}
<IconContainer
variant="colored"
backgroundColor={`${colors.accent}20`}
>
<Ionicons name="sparkles" size={24} color={colors.accent} />
{unreadCount > 0 && (
<View
style={[
styles.notificationBadge,
{ backgroundColor: colors.danger },
]}
>
<Text style={styles.notificationBadgeText}>
{unreadCount}
</Text>
</View>
)}
</IconContainer>
</TouchableOpacity>
</LinearGradient>
</View>
{/* Generate Button */}
<View style={styles.actionContainer}>
<TouchableOpacity
<View style={styles.section}>
<MinimalButton
title="Generate New Plan"
onPress={handleGenerateRecommendation}
variant="primary"
size="lg"
loading={generating}
disabled={generating}
activeOpacity={0.8}
>
<LinearGradient
colors={theme.gradients.purple}
start={{ x: 0, y: 0 }}
end={{ x: 1, y: 0 }}
style={[styles.generateButton, theme.shadows.medium]}
>
{generating ? (
<ActivityIndicator size="small" color="#fff" />
) : (
<>
<Ionicons
name="bulb"
size={24}
color="#fff"
style={{ marginRight: 12 }}
/>
<Text style={styles.generateButtonText}>
Generate New Plan
</Text>
</>
)}
</LinearGradient>
</TouchableOpacity>
textStyle={{ fontSize: 16 }}
/>
</View>
{/* Recommendations List */}
<View style={styles.section}>
<SectionHeader
title="Your Plans"
subtitle={
recommendations.length > 0
? `${recommendations.length} active plan${recommendations.length !== 1 ? "s" : ""}`
: undefined
}
/>
{recommendations.length === 0 ? (
<View style={styles.emptyState}>
<LinearGradient
colors={["rgba(139, 92, 246, 0.1)", "rgba(139, 92, 246, 0.05)"]}
style={styles.emptyCard}
>
<Ionicons
name="sparkles-outline"
size={64}
color={theme.colors.purple}
/>
<Text style={styles.emptyTitle}>No Recommendations Yet</Text>
<Text style={styles.emptyText}>
<MinimalCard variant="default">
<View style={styles.emptyState}>
<IconContainer
variant="colored"
backgroundColor={`${colors.accent}15`}
size="lg"
>
<Ionicons
name="sparkles-outline"
size={32}
color={colors.accent}
/>
</IconContainer>
<Text
style={[
typography.bodyEmphasis,
{ color: colors.textPrimary, marginTop: 16 },
]}
>
No Recommendations Yet
</Text>
<Text
style={[
typography.body,
{
color: colors.textSecondary,
marginTop: 8,
textAlign: "center",
},
]}
>
Tap "Generate New Plan" to get personalized AI-powered fitness
and nutrition recommendations based on your profile and goals.
</Text>
</LinearGradient>
</View>
</View>
</MinimalCard>
) : (
recommendations.map((recommendation) => (
<RecommendationCard
key={recommendation.id}
recommendation={recommendation}
/>
))
<View style={styles.recommendationsList}>
{recommendations.map((recommendation) => (
<RecommendationCard
key={recommendation.id}
recommendation={recommendation}
/>
))}
</View>
)}
</View>
{/* Bottom Spacer */}
<View style={{ height: 100 }} />
</ScrollView>
</View>
);
@ -221,250 +254,195 @@ interface RecommendationCardProps {
}
function RecommendationCard({ recommendation }: RecommendationCardProps) {
const { colors, typography } = useTheme();
const [expanded, setExpanded] = useState(false);
return (
<View style={styles.card}>
<LinearGradient
colors={["rgba(255, 255, 255, 1)", "rgba(249, 250, 251, 1)"]}
style={[styles.cardContent, theme.shadows.medium]}
<MinimalCard variant="elevated">
{/* Header */}
<TouchableOpacity
onPress={() => setExpanded(!expanded)}
activeOpacity={0.7}
style={styles.cardHeader}
>
{/* Header */}
<View style={styles.cardHeader}>
<View style={styles.cardHeaderLeft}>
<LinearGradient
colors={theme.gradients.success}
style={styles.cardIcon}
>
<Ionicons name="checkmark-circle" size={20} color="#fff" />
</LinearGradient>
<View>
<Text style={styles.cardTitle}>AI Fitness Plan</Text>
<Text style={styles.cardDate}>
{new Date(recommendation.generatedAt).toLocaleDateString()}
<View style={styles.cardHeaderLeft}>
<IconContainer
variant="colored"
backgroundColor={`${colors.success}20`}
>
<Ionicons
name="checkmark-circle"
size={20}
color={colors.success}
/>
</IconContainer>
<View style={{ marginLeft: 12 }}>
<Text style={[typography.h3, { color: colors.textPrimary }]}>
AI Fitness Plan
</Text>
<Text style={[typography.caption, { color: colors.textTertiary }]}>
{new Date(recommendation.generatedAt).toLocaleDateString()}
</Text>
</View>
</View>
<Ionicons
name={expanded ? "chevron-up" : "chevron-down"}
size={24}
color={colors.textTertiary}
/>
</TouchableOpacity>
{/* Summary */}
<View style={styles.cardSummary}>
<Text
style={[typography.body, { color: colors.textSecondary }]}
numberOfLines={expanded ? undefined : 3}
>
{recommendation.recommendationText}
</Text>
</View>
{/* Expanded Content */}
{expanded && (
<View style={styles.expandedContent}>
{/* Activity Plan */}
<View
style={[
styles.planSection,
{ backgroundColor: colors.surfaceElevated },
]}
>
<View style={styles.planHeader}>
<Ionicons name="barbell" size={20} color={colors.primary} />
<Text
style={[
typography.h3,
{ color: colors.textPrimary, marginLeft: 8 },
]}
>
Activity Plan
</Text>
</View>
<Text
style={[
typography.body,
{ color: colors.textSecondary, marginTop: 8 },
]}
>
{recommendation.activityPlan}
</Text>
</View>
<TouchableOpacity onPress={() => setExpanded(!expanded)}>
<Ionicons
name={expanded ? "chevron-up" : "chevron-down"}
size={24}
color={theme.colors.gray400}
/>
</TouchableOpacity>
</View>
{/* Summary */}
<View style={styles.cardSummary}>
<Text
style={styles.summaryText}
numberOfLines={expanded ? undefined : 3}
{/* Diet Plan */}
<View
style={[
styles.planSection,
{ backgroundColor: colors.surfaceElevated },
]}
>
{recommendation.recommendationText}
</Text>
</View>
{/* Expanded Content */}
{expanded && (
<View style={styles.expandedContent}>
{/* Activity Plan */}
<View style={styles.planSection}>
<View style={styles.planHeader}>
<Ionicons
name="barbell"
size={20}
color={theme.colors.primary}
/>
<Text style={styles.planTitle}>Activity Plan</Text>
</View>
<Text style={styles.planText}>{recommendation.activityPlan}</Text>
</View>
{/* Diet Plan */}
<View style={styles.planSection}>
<View style={styles.planHeader}>
<Ionicons
name="restaurant"
size={20}
color={theme.colors.success}
/>
<Text style={styles.planTitle}>Diet Plan</Text>
</View>
<Text style={styles.planText}>{recommendation.dietPlan}</Text>
<View style={styles.planHeader}>
<Ionicons name="restaurant" size={20} color={colors.success} />
<Text
style={[
typography.h3,
{ color: colors.textPrimary, marginLeft: 8 },
]}
>
Diet Plan
</Text>
</View>
<Text
style={[
typography.body,
{ color: colors.textSecondary, marginTop: 8 },
]}
>
{recommendation.dietPlan}
</Text>
</View>
)}
</LinearGradient>
</View>
</View>
)}
</MinimalCard>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: theme.colors.background,
},
centered: {
flex: 1,
justifyContent: "center",
alignItems: "center",
backgroundColor: theme.colors.background,
},
scrollContent: {
paddingBottom: 100,
paddingBottom: 20,
},
header: {
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
padding: 24,
alignItems: "flex-start",
paddingHorizontal: 24,
paddingTop: 60,
paddingBottom: 24,
marginBottom: 20,
borderBottomLeftRadius: theme.borderRadius.xl,
borderBottomRightRadius: theme.borderRadius.xl,
},
headerTitle: {
fontSize: theme.typography.fontSize["3xl"],
fontWeight: theme.typography.fontWeight.bold,
color: theme.colors.white,
notificationButton: {
position: "relative",
},
headerSubtitle: {
fontSize: theme.typography.fontSize.base,
color: "rgba(255, 255, 255, 0.9)",
marginTop: 4,
},
iconContainer: {
backgroundColor: "rgba(255, 255, 255, 0.2)",
width: 64,
height: 64,
borderRadius: 32,
justifyContent: "center",
alignItems: "center",
},
badge: {
notificationBadge: {
position: "absolute",
top: -4,
right: -4,
backgroundColor: theme.colors.danger,
borderRadius: 10,
width: 20,
height: 20,
minWidth: 18,
height: 18,
borderRadius: 9,
justifyContent: "center",
alignItems: "center",
paddingHorizontal: 4,
},
badgeText: {
notificationBadgeText: {
color: "#fff",
fontSize: 12,
fontWeight: "bold",
},
actionContainer: {
paddingHorizontal: 20,
marginBottom: 20,
},
generateButton: {
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
paddingVertical: 16,
paddingHorizontal: 24,
borderRadius: theme.borderRadius.xl,
},
generateButtonText: {
fontSize: theme.typography.fontSize.lg,
fontWeight: theme.typography.fontWeight.bold,
color: theme.colors.white,
fontSize: 11,
fontWeight: "700",
},
section: {
paddingHorizontal: 20,
paddingHorizontal: 24,
marginBottom: 24,
},
emptyState: {
paddingVertical: 40,
},
emptyCard: {
borderRadius: theme.borderRadius["2xl"],
padding: 32,
alignItems: "center",
paddingVertical: 40,
paddingHorizontal: 20,
},
emptyTitle: {
fontSize: theme.typography.fontSize.xl,
fontWeight: theme.typography.fontWeight.bold,
color: theme.colors.gray700,
marginTop: 16,
marginBottom: 8,
},
emptyText: {
fontSize: theme.typography.fontSize.base,
color: theme.colors.gray500,
textAlign: "center",
lineHeight: 24,
},
card: {
marginBottom: 16,
},
cardContent: {
borderRadius: theme.borderRadius["2xl"],
padding: 20,
recommendationsList: {
gap: 12,
},
cardHeader: {
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
marginBottom: 16,
},
cardHeaderLeft: {
flexDirection: "row",
alignItems: "center",
gap: 12,
},
cardIcon: {
width: 40,
height: 40,
borderRadius: 20,
justifyContent: "center",
alignItems: "center",
},
cardTitle: {
fontSize: theme.typography.fontSize.lg,
fontWeight: theme.typography.fontWeight.bold,
color: theme.colors.gray800,
},
cardDate: {
fontSize: theme.typography.fontSize.sm,
color: theme.colors.gray500,
marginTop: 2,
flex: 1,
},
cardSummary: {
marginBottom: 12,
},
summaryText: {
fontSize: theme.typography.fontSize.base,
color: theme.colors.gray700,
lineHeight: 24,
marginTop: 12,
paddingTop: 12,
borderTopWidth: 1,
borderTopColor: "rgba(0, 0, 0, 0.05)",
},
expandedContent: {
marginTop: 12,
paddingTop: 16,
borderTopWidth: 1,
borderTopColor: theme.colors.gray200,
marginTop: 16,
gap: 12,
},
planSection: {
marginBottom: 16,
padding: 16,
borderRadius: 12,
},
planHeader: {
flexDirection: "row",
alignItems: "center",
gap: 8,
marginBottom: 8,
},
planTitle: {
fontSize: theme.typography.fontSize.base,
fontWeight: theme.typography.fontWeight.bold,
color: theme.colors.gray800,
},
planText: {
fontSize: theme.typography.fontSize.base,
color: theme.colors.gray600,
lineHeight: 22,
},
});

32
apps/mobile/src/app/_layout.tsx
View File

@ -3,7 +3,9 @@ import { Stack } from "expo-router";
import * as SecureStore from "expo-secure-store";
import { View, Text } from "react-native";
import { useEffect, useState } from "react";
import { SafeAreaProvider } from "react-native-safe-area-context";
import { validateEnv } from "../utils/env";
import { ThemeProvider } from "../contexts/ThemeContext";
import { StatisticsProvider } from "../contexts/StatisticsContext";
import { FitnessGoalsProvider } from "../contexts/FitnessGoalsContext";
import { RecommendationsProvider } from "../contexts/RecommendationsContext";
@ -169,18 +171,22 @@ export default function RootLayout() {
});
return (
<ClerkProvider tokenCache={tokenCache} publishableKey={publishableKey}>
<ClerkLoaded>
<NotificationsProvider>
<StatisticsProvider>
<FitnessGoalsProvider>
<RecommendationsProvider>
<AppContent />
</RecommendationsProvider>
</FitnessGoalsProvider>
</StatisticsProvider>
</NotificationsProvider>
</ClerkLoaded>
</ClerkProvider>
<SafeAreaProvider>
<ClerkProvider tokenCache={tokenCache} publishableKey={publishableKey}>
<ClerkLoaded>
<ThemeProvider>
<NotificationsProvider>
<StatisticsProvider>
<FitnessGoalsProvider>
<RecommendationsProvider>
<AppContent />
</RecommendationsProvider>
</FitnessGoalsProvider>
</StatisticsProvider>
</NotificationsProvider>
</ThemeProvider>
</ClerkLoaded>
</ClerkProvider>
</SafeAreaProvider>
);
}

124
apps/mobile/src/components/Badge.tsx Normal file
View File

@ -0,0 +1,124 @@
import React from "react";
import { View, Text, StyleSheet, ViewStyle, StyleProp } from "react-native";
import { useTheme } from "../contexts/ThemeContext";
import { fontSize, fontWeight } from "../styles/typography";
type BadgeVariant =
| "neutral"
| "success"
| "warning"
| "danger"
| "info"
| "primary";
type BadgeSize = "sm" | "md";
interface BadgeProps {
label: string;
variant?: BadgeVariant;
size?: BadgeSize;
style?: StyleProp<ViewStyle>;
}
/**
* Badge - Pill-shaped status indicator
*
* Variants:
* - neutral: Gray badge for general labels
* - success: Green badge for positive status
* - warning: Orange/yellow badge for warnings
* - danger: Red badge for errors or critical status
* - info: Blue badge for informational status
* - primary: Primary color badge
*
* Sizes:
* - sm: 5px vertical, 10px horizontal, 11px font
* - md: 6px vertical, 12px horizontal, 13px font (default)
*/
export function Badge({
label,
variant = "neutral",
size = "md",
style,
}: BadgeProps) {
const { colors } = useTheme();
const sizeStyles = {
sm: {
paddingVertical: 5,
paddingHorizontal: 10,
fontSize: fontSize.xs,
},
md: {
paddingVertical: 6,
paddingHorizontal: 12,
fontSize: fontSize.sm,
},
};
const variantStyles: Record<
BadgeVariant,
{ backgroundColor: string; color: string }
> = {
neutral: {
backgroundColor: colors.surfaceElevated,
color: colors.textSecondary,
},
success: {
backgroundColor: `${colors.success}20`, // 20% opacity
color: colors.success,
},
warning: {
backgroundColor: `${colors.warning}20`,
color: colors.warning,
},
danger: {
backgroundColor: `${colors.danger}20`,
color: colors.danger,
},
info: {
backgroundColor: `${colors.info}20`,
color: colors.info,
},
primary: {
backgroundColor: `${colors.primary}20`,
color: colors.primary,
},
};
return (
<View
style={[
styles.badge,
{
backgroundColor: variantStyles[variant].backgroundColor,
paddingVertical: sizeStyles[size].paddingVertical,
paddingHorizontal: sizeStyles[size].paddingHorizontal,
},
style,
]}
>
<Text
style={[
styles.label,
{
color: variantStyles[variant].color,
fontSize: sizeStyles[size].fontSize,
fontWeight: fontWeight.medium,
},
]}
>
{label}
</Text>
</View>
);
}
const styles = StyleSheet.create({
badge: {
borderRadius: 999, // Full pill shape
alignSelf: "flex-start",
},
label: {
textAlign: "center",
},
});

252
apps/mobile/src/components/CustomTabBar.tsx
View File

@ -1,143 +1,129 @@
import React from 'react';
import { View, StyleSheet, TouchableOpacity, Platform, Dimensions } from 'react-native';
import { BottomTabBarProps } from '@react-navigation/bottom-tabs';
import { Ionicons } from '@expo/vector-icons';
import { LinearGradient } from 'expo-linear-gradient';
import { theme } from '../styles/theme';
import { Animated } from 'react-native';
import React from "react";
import { View, StyleSheet, TouchableOpacity } from "react-native";
import { BottomTabBarProps } from "@react-navigation/bottom-tabs";
import { Ionicons } from "@expo/vector-icons";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { useTheme } from "../contexts/ThemeContext";
const { width } = Dimensions.get('window');
/**
* CustomTabBar - Minimal bottom navigation with pill indicator
*
* Design:
* - Simple flat design (no floating, no glassmorphism)
* - Clean icons with outline/filled states
* - Small pill indicator below active tab
* - 56px height (reduced from 70px)
* - No animations (just opacity fade on press)
* - Theme-aware colors
*/
export function CustomTabBar({
state,
descriptors,
navigation,
}: BottomTabBarProps) {
const { colors } = useTheme();
const insets = useSafeAreaInsets();
export function CustomTabBar({ state, descriptors, navigation }: BottomTabBarProps) {
return (
<View style={styles.container}>
<LinearGradient
colors={['rgba(255, 255, 255, 0.9)', 'rgba(255, 255, 255, 0.7)']}
style={[styles.tabBar, theme.shadows.medium]}
start={{ x: 0, y: 0 }}
end={{ x: 0, y: 1 }}
>
{state.routes.map((route, index) => {
const { options } = descriptors[route.key];
const isFocused = state.index === index;
return (
<View
style={[
styles.container,
{
backgroundColor: colors.surface,
borderTopColor: colors.border,
paddingBottom: insets.bottom,
},
]}
>
{state.routes.map((route, index) => {
const { options } = descriptors[route.key];
const isFocused = state.index === index;
const onPress = () => {
const event = navigation.emit({
type: 'tabPress',
target: route.key,
canPreventDefault: true,
});
const onPress = () => {
const event = navigation.emit({
type: "tabPress",
target: route.key,
canPreventDefault: true,
});
if (!isFocused && !event.defaultPrevented) {
navigation.navigate(route.name);
}
};
if (!isFocused && !event.defaultPrevented) {
navigation.navigate(route.name);
}
};
const getIconName = (routeName: string, focused: boolean): keyof typeof Ionicons.glyphMap => {
switch (routeName) {
case 'index':
return focused ? 'home' : 'home-outline';
case 'goals':
return focused ? 'trophy' : 'trophy-outline';
case 'attendance':
return focused ? 'calendar' : 'calendar-outline';
case 'recommendations':
return focused ? 'sparkles' : 'sparkles-outline';
case 'profile':
return focused ? 'person' : 'person-outline';
default:
return 'ellipse-outline';
}
};
const getIconName = (
routeName: string,
focused: boolean,
): keyof typeof Ionicons.glyphMap => {
switch (routeName) {
case "index":
return focused ? "home" : "home-outline";
case "goals":
return focused ? "trophy" : "trophy-outline";
case "attendance":
return focused ? "calendar" : "calendar-outline";
case "recommendations":
return focused ? "sparkles" : "sparkles-outline";
case "profile":
return focused ? "person" : "person-outline";
default:
return "ellipse-outline";
}
};
// Animation for scale
const scaleValue = React.useRef(new Animated.Value(1)).current;
React.useEffect(() => {
Animated.spring(scaleValue, {
toValue: isFocused ? 1.2 : 1,
useNativeDriver: true,
friction: 8,
}).start();
}, [isFocused]);
return (
<TouchableOpacity
key={index}
accessibilityRole="button"
accessibilityState={isFocused ? { selected: true } : {}}
accessibilityLabel={options.tabBarAccessibilityLabel}
testID={(options as any).tabBarTestID}
onPress={onPress}
style={styles.tabItem}
activeOpacity={0.7}
>
<Animated.View style={{ transform: [{ scale: scaleValue }] }}>
{isFocused ? (
<LinearGradient
colors={theme.gradients.primary}
style={styles.iconContainer}
>
<Ionicons
name={getIconName(route.name, true)}
size={20}
color="#fff"
/>
</LinearGradient>
) : (
<Ionicons
name={getIconName(route.name, false)}
size={24}
color={theme.colors.gray500}
/>
)}
</Animated.View>
</TouchableOpacity>
);
})}
</LinearGradient>
</View>
);
return (
<TouchableOpacity
key={index}
accessibilityRole="button"
accessibilityState={isFocused ? { selected: true } : {}}
accessibilityLabel={options.tabBarAccessibilityLabel}
testID={(options as any).tabBarTestID}
onPress={onPress}
style={styles.tabItem}
activeOpacity={0.7}
>
<View style={styles.iconWrapper}>
<Ionicons
name={getIconName(route.name, isFocused)}
size={24}
color={isFocused ? colors.primary : colors.textTertiary}
/>
{isFocused && (
<View
style={[
styles.indicator,
{ backgroundColor: colors.primary },
]}
/>
)}
</View>
</TouchableOpacity>
);
})}
</View>
);
}
const styles = StyleSheet.create({
container: {
position: 'absolute',
bottom: 0,
left: 0,
right: 0,
alignItems: 'center',
paddingBottom: Platform.OS === 'ios' ? 30 : 20,
pointerEvents: 'box-none',
},
tabBar: {
flexDirection: 'row',
backgroundColor: 'rgba(255, 255, 255, 0.8)',
borderRadius: 35,
height: 70,
width: width - 40,
justifyContent: 'space-around',
alignItems: 'center',
borderWidth: 1,
borderColor: 'rgba(255, 255, 255, 0.5)',
paddingHorizontal: 10,
},
tabItem: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
height: '100%',
},
iconContainer: {
width: 40,
height: 40,
borderRadius: 20,
alignItems: 'center',
justifyContent: 'center',
shadowColor: theme.colors.primary,
shadowOffset: { width: 0, height: 4 },
shadowOpacity: 0.3,
shadowRadius: 8,
elevation: 4,
},
container: {
flexDirection: "row",
height: 56,
borderTopWidth: 1,
},
tabItem: {
flex: 1,
alignItems: "center",
justifyContent: "center",
height: "100%",
},
iconWrapper: {
alignItems: "center",
justifyContent: "center",
},
indicator: {
width: 24,
height: 3,
borderRadius: 999,
marginTop: 4,
},
});

85
apps/mobile/src/components/IconContainer.tsx Normal file
View File

@ -0,0 +1,85 @@
import React from "react";
import { View, StyleSheet, ViewStyle, StyleProp } from "react-native";
import { useTheme } from "../contexts/ThemeContext";
type IconContainerVariant = "plain" | "subtle" | "colored";
type IconContainerSize = "sm" | "md" | "lg";
interface IconContainerProps {
children: React.ReactNode;
variant?: IconContainerVariant;
size?: IconContainerSize;
backgroundColor?: string;
style?: StyleProp<ViewStyle>;
}
/**
* IconContainer - Clean container for icons with subtle backgrounds
*
* Variants:
* - plain: No background, just the icon
* - subtle: Light background (surfaceSecondary)
* - colored: Custom background color (pass backgroundColor prop)
*
* Sizes:
* - sm: 32px circle
* - md: 40px circle (default)
* - lg: 48px circle
*/
export function IconContainer({
children,
variant = "subtle",
size = "md",
backgroundColor,
style,
}: IconContainerProps) {
const { colors } = useTheme();
const sizeStyles: Record<IconContainerSize, ViewStyle> = {
sm: {
width: 32,
height: 32,
borderRadius: 16,
},
md: {
width: 40,
height: 40,
borderRadius: 20,
},
lg: {
width: 48,
height: 48,
borderRadius: 24,
},
};
const getBackgroundColor = (): string | undefined => {
if (variant === "colored" && backgroundColor) {
return backgroundColor;
}
if (variant === "subtle") {
return colors.surfaceElevated;
}
return "transparent";
};
return (
<View
style={[
styles.container,
sizeStyles[size],
{ backgroundColor: getBackgroundColor() },
style,
]}
>
{children}
</View>
);
}
const styles = StyleSheet.create({
container: {
alignItems: "center",
justifyContent: "center",
},
});

95
apps/mobile/src/components/ListItem.tsx Normal file
View File

@ -0,0 +1,95 @@
import React from "react";
import {
View,
Text,
TouchableOpacity,
StyleSheet,
ViewStyle,
StyleProp,
} from "react-native";
import { useTheme } from "../contexts/ThemeContext";
interface ListItemProps {
title: string;
subtitle?: string;
leftIcon?: React.ReactNode;
rightElement?: React.ReactNode;
onPress?: () => void;
style?: StyleProp<ViewStyle>;
}
/**
* ListItem - Clean list item with optional icon and trailing element
*
* Usage:
* - Settings lists
* - Navigation items
* - Selectable options
*
* Features:
* - Optional left icon (wrap in IconContainer)
* - Optional subtitle for additional context
* - Optional right element (arrow, badge, switch, etc.)
* - Optional onPress for touchable items
*/
export function ListItem({
title,
subtitle,
leftIcon,
rightElement,
onPress,
style,
}: ListItemProps) {
const { colors, typography } = useTheme();
const content = (
<View style={[styles.container, style]}>
{leftIcon && <View style={styles.leftIcon}>{leftIcon}</View>}
<View style={styles.textContainer}>
<Text style={[typography.h3, { color: colors.textPrimary }]}>
{title}
</Text>
{subtitle && (
<Text
style={[
typography.caption,
{ color: colors.textTertiary, marginTop: 2 },
]}
>
{subtitle}
</Text>
)}
</View>
{rightElement && <View style={styles.rightElement}>{rightElement}</View>}
</View>
);
if (onPress) {
return (
<TouchableOpacity onPress={onPress} activeOpacity={0.7}>
{content}
</TouchableOpacity>
);
}
return content;
}
const styles = StyleSheet.create({
container: {
flexDirection: "row",
alignItems: "center",
paddingVertical: 12,
paddingHorizontal: 16,
backgroundColor: "transparent",
},
leftIcon: {
marginRight: 12,
},
textContainer: {
flex: 1,
},
rightElement: {
marginLeft: 12,
},
});

152
apps/mobile/src/components/MinimalButton.tsx Normal file
View File

@ -0,0 +1,152 @@
import React from "react";
import {
TouchableOpacity,
Text,
StyleSheet,
ActivityIndicator,
ViewStyle,
TextStyle,
StyleProp,
} from "react-native";
import { useTheme } from "../contexts/ThemeContext";
import { fontSize, fontWeight } from "../styles/typography";
type ButtonVariant = "primary" | "secondary" | "tertiary" | "danger";
type ButtonSize = "sm" | "md" | "lg";
interface MinimalButtonProps {
title: string;
onPress: () => void;
variant?: ButtonVariant;
size?: ButtonSize;
loading?: boolean;
disabled?: boolean;
style?: StyleProp<ViewStyle>;
textStyle?: StyleProp<TextStyle>;
}
/**
* MinimalButton - Clean button component with solid colors
*
* Variants:
* - primary: Solid primary background
* - secondary: Outlined with primary color
* - tertiary: Text only, no background
* - danger: Solid danger background
*
* Sizes:
* - sm: 12px vertical padding, 16px horizontal
* - md: 14px vertical padding, 24px horizontal (default)
* - lg: 16px vertical padding, 32px horizontal
*/
export function MinimalButton({
title,
onPress,
variant = "primary",
size = "md",
loading = false,
disabled = false,
style,
textStyle,
}: MinimalButtonProps) {
const { colors } = useTheme();
const isDisabled = disabled || loading;
// Get button styles based on variant
const getButtonStyle = (): ViewStyle => {
const baseStyle: ViewStyle = {
borderRadius: 10,
alignItems: "center",
justifyContent: "center",
opacity: isDisabled ? 0.5 : 1,
};
// Size-specific padding
const sizeStyles: Record<
ButtonSize,
{ paddingVertical: number; paddingHorizontal: number }
> = {
sm: { paddingVertical: 12, paddingHorizontal: 16 },
md: { paddingVertical: 14, paddingHorizontal: 24 },
lg: { paddingVertical: 16, paddingHorizontal: 32 },
};
const variantStyles: Record<ButtonVariant, ViewStyle> = {
primary: {
backgroundColor: colors.primary,
},
secondary: {
backgroundColor: "transparent",
borderWidth: 1.5,
borderColor: colors.primary,
},
tertiary: {
backgroundColor: "transparent",
},
danger: {
backgroundColor: colors.danger,
},
};
return {
...baseStyle,
...sizeStyles[size],
...variantStyles[variant],
};
};
// Get text styles based on variant
const getTextStyle = (): TextStyle => {
const baseTextStyle: TextStyle = {
fontSize: fontSize.base,
fontWeight: fontWeight.semibold,
};
const variantTextStyles: Record<ButtonVariant, TextStyle> = {
primary: {
color: colors.white,
},
secondary: {
color: colors.primary,
},
tertiary: {
color: colors.primary,
},
danger: {
color: colors.white,
},
};
return {
...baseTextStyle,
...variantTextStyles[variant],
};
};
return (
<TouchableOpacity
style={[getButtonStyle(), style]}
onPress={onPress}
disabled={isDisabled}
activeOpacity={0.7}
>
{loading ? (
<ActivityIndicator
size="small"
color={
variant === "secondary" || variant === "tertiary"
? colors.primary
: colors.white
}
/>
) : (
<Text style={[getTextStyle(), textStyle]}>{title}</Text>
)}
</TouchableOpacity>
);
}
const styles = StyleSheet.create({
// No static styles needed - all dynamic based on theme
});

84
apps/mobile/src/components/MinimalCard.tsx Normal file
View File

@ -0,0 +1,84 @@
import React from "react";
import {
View,
StyleSheet,
TouchableOpacity,
ViewStyle,
StyleProp,
} from "react-native";
import { useTheme } from "../contexts/ThemeContext";
type CardVariant = "default" | "elevated" | "bordered";
interface MinimalCardProps {
children: React.ReactNode;
variant?: CardVariant;
onPress?: () => void;
style?: StyleProp<ViewStyle>;
}
/**
* MinimalCard - Clean card component without gradients
*
* Variants:
* - default: Subtle shadow on surface background
* - elevated: More prominent shadow
* - bordered: Border instead of shadow
*/
export function MinimalCard({
children,
variant = "default",
onPress,
style,
}: MinimalCardProps) {
const { colors } = useTheme();
const cardStyles = [
styles.base,
{
backgroundColor: colors.surface,
},
variant === "default" && styles.default,
variant === "elevated" && styles.elevated,
variant === "bordered" && {
borderWidth: 1,
borderColor: colors.border,
},
style,
];
if (onPress) {
return (
<TouchableOpacity
style={cardStyles}
onPress={onPress}
activeOpacity={0.7}
>
{children}
</TouchableOpacity>
);
}
return <View style={cardStyles}>{children}</View>;
}
const styles = StyleSheet.create({
base: {
borderRadius: 12,
padding: 16,
},
default: {
shadowColor: "#000",
shadowOffset: { width: 0, height: 1 },
shadowOpacity: 0.05,
shadowRadius: 3,
elevation: 1,
},
elevated: {
shadowColor: "#000",
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.08,
shadowRadius: 8,
elevation: 2,
},
});

82
apps/mobile/src/components/ProgressBar.tsx Normal file
View File

@ -0,0 +1,82 @@
import React from "react";
import { View, StyleSheet, ViewStyle, StyleProp } from "react-native";
import { useTheme } from "../contexts/ThemeContext";
interface ProgressBarProps {
progress: number; // 0-1 (e.g., 0.75 for 75%)
color?: string;
backgroundColor?: string;
height?: number;
borderRadius?: number;
style?: StyleProp<ViewStyle>;
}
/**
* ProgressBar - Simple linear progress indicator
*
* Usage:
* - Goal progress tracking
* - Loading states
* - Completion indicators
*
* Props:
* - progress: Value between 0 and 1 (e.g., 0.75 for 75%)
* - color: Custom fill color (defaults to theme primary)
* - backgroundColor: Custom track color (defaults to theme border)
* - height: Bar height in pixels (defaults to 8)
* - borderRadius: Corner radius (defaults to 999 for full pill shape)
*/
export function ProgressBar({
progress,
color,
backgroundColor,
height = 8,
borderRadius = 999,
style,
}: ProgressBarProps) {
const { colors } = useTheme();
// Clamp progress between 0 and 1
const clampedProgress = Math.min(Math.max(progress, 0), 1);
const trackColor = backgroundColor || colors.border;
const fillColor = color || colors.primary;
return (
<View
style={[
styles.track,
{
height,
borderRadius,
backgroundColor: trackColor,
},
style,
]}
>
<View
style={[
styles.fill,
{
width: `${clampedProgress * 100}%`,
height,
borderRadius,
backgroundColor: fillColor,
},
]}
/>
</View>
);
}
const styles = StyleSheet.create({
track: {
width: "100%",
overflow: "hidden",
},
fill: {
position: "absolute",
left: 0,
top: 0,
},
});

80
apps/mobile/src/components/SectionHeader.tsx Normal file
View File

@ -0,0 +1,80 @@
import React from "react";
import {
View,
Text,
TouchableOpacity,
StyleSheet,
ViewStyle,
StyleProp,
} from "react-native";
import { useTheme } from "../contexts/ThemeContext";
interface SectionHeaderProps {
title: string;
subtitle?: string;
actionLabel?: string;
onActionPress?: () => void;
style?: StyleProp<ViewStyle>;
}
/**
* SectionHeader - Clean section header with optional action button
*
* Usage:
* - Divides content into logical sections
* - Optional subtitle for additional context
* - Optional action button (e.g., "See All", "Add New")
*/
export function SectionHeader({
title,
subtitle,
actionLabel,
onActionPress,
style,
}: SectionHeaderProps) {
const { colors, typography } = useTheme();
return (
<View style={[styles.container, style]}>
<View style={styles.textContainer}>
<Text style={[typography.h2, { color: colors.textPrimary }]}>
{title}
</Text>
{subtitle && (
<Text
style={[
typography.caption,
{ color: colors.textTertiary, marginTop: 2 },
]}
>
{subtitle}
</Text>
)}
</View>
{actionLabel && onActionPress && (
<TouchableOpacity onPress={onActionPress} activeOpacity={0.7}>
<Text
style={[
typography.body,
{ color: colors.primary, fontWeight: "600" },
]}
>
{actionLabel}
</Text>
</TouchableOpacity>
)}
</View>
);
}
const styles = StyleSheet.create({
container: {
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
marginBottom: 12,
},
textContainer: {
flex: 1,
},
});

129
apps/mobile/src/contexts/ThemeContext.tsx Normal file
View File

@ -0,0 +1,129 @@
import React, {
createContext,
useContext,
useState,
useEffect,
ReactNode,
} from "react";
import { useColorScheme } from "react-native";
import AsyncStorage from "@react-native-async-storage/async-storage";
import { ColorScheme, lightColors, darkColors } from "../styles/colors";
import {
TypographyPresets,
createTypographyPresets,
} from "../styles/typography";
type ThemeMode = "light" | "dark" | "system";
type ActiveTheme = "light" | "dark";
interface ThemeContextType {
// Current active theme
theme: ActiveTheme;
// User's theme preference
themeMode: ThemeMode;
// Active color scheme
colors: ColorScheme;
// Typography presets
typography: TypographyPresets;
// Theme actions
setTheme: (mode: ThemeMode) => void;
toggleTheme: () => void;
}
const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
const THEME_STORAGE_KEY = "@fitai:theme";
interface ThemeProviderProps {
children: ReactNode;
}
export function ThemeProvider({ children }: ThemeProviderProps) {
const systemColorScheme = useColorScheme();
const [themeMode, setThemeMode] = useState<ThemeMode>("system");
const [isLoading, setIsLoading] = useState(true);
// Determine active theme based on mode and system preference
const getActiveTheme = (): ActiveTheme => {
if (themeMode === "system") {
return systemColorScheme === "dark" ? "dark" : "light";
}
return themeMode;
};
const activeTheme = getActiveTheme();
const colors = activeTheme === "dark" ? darkColors : lightColors;
const typography = createTypographyPresets(
colors.textPrimary,
colors.textSecondary,
colors.textTertiary,
);
// Load saved theme preference on mount
useEffect(() => {
const loadTheme = async () => {
try {
const savedTheme = await AsyncStorage.getItem(THEME_STORAGE_KEY);
if (savedTheme && ["light", "dark", "system"].includes(savedTheme)) {
setThemeMode(savedTheme as ThemeMode);
}
} catch (error) {
console.error("Failed to load theme preference:", error);
} finally {
setIsLoading(false);
}
};
loadTheme();
}, []);
// Save theme preference when it changes
const setTheme = async (mode: ThemeMode) => {
try {
setThemeMode(mode);
await AsyncStorage.setItem(THEME_STORAGE_KEY, mode);
} catch (error) {
console.error("Failed to save theme preference:", error);
}
};
// Toggle between light and dark (sets explicit mode, not system)
const toggleTheme = () => {
const newMode = activeTheme === "dark" ? "light" : "dark";
setTheme(newMode);
};
// Don't render children until theme is loaded
if (isLoading) {
return null;
}
const value: ThemeContextType = {
theme: activeTheme,
themeMode,
colors,
typography,
setTheme,
toggleTheme,
};
return (
<ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>
);
}
/**
* Hook to access theme context
* @throws Error if used outside ThemeProvider
*/
export function useTheme() {
const context = useContext(ThemeContext);
if (context === undefined) {
throw new Error("useTheme must be used within a ThemeProvider");
}
return context;
}

139
apps/mobile/src/styles/colors.ts Normal file
View File

@ -0,0 +1,139 @@
/**
* FitAI Color System
* Minimalist muted earth tones with light and dark mode support
*/
export interface ColorScheme {
// Primary Earth Tones
primary: string;
primaryDark: string;
primaryLight: string;
// Accent Colors
accent: string;
terracotta: string;
sand: string;
// Status Colors
success: string;
warning: string;
danger: string;
info: string;
// Neutrals
background: string;
surface: string;
surfaceElevated: string;
// Text
textPrimary: string;
textSecondary: string;
textTertiary: string;
// Borders
border: string;
borderLight: string;
// Overlays
overlay: string;
overlayLight: string;
// Legacy compatibility (will be phased out)
white: string;
black: string;
}
/**
* Light Mode Color Palette
* Natural, warm, muted earth tones
*/
export const lightColors: ColorScheme = {
// Primary Earth Tones
primary: "#6B9080", // Muted sage green (main actions)
primaryDark: "#5A7A6E", // Darker sage
primaryLight: "#8AAE9E", // Lighter sage
// Accent Colors (minimal use)
accent: "#A9B4A0", // Warm gray-green
terracotta: "#C1876B", // Warm terracotta (highlights)
sand: "#E8DCC4", // Warm sand (backgrounds)
// Status Colors (muted)
success: "#7BA05B", // Muted olive green
warning: "#D4A574", // Muted amber
danger: "#B66B6B", // Muted rust red
info: "#7B9BB0", // Muted blue-gray
// Neutrals
background: "#F9F7F4", // Warm off-white
surface: "#FFFFFF", // Pure white
surfaceElevated: "#FEFDFB", // Slightly warm white
// Text
textPrimary: "#2C3731", // Deep forest
textSecondary: "#5C6B61", // Medium forest
textTertiary: "#8B9A8F", // Light forest
// Borders
border: "#E8E4DF", // Very light warm gray
borderLight: "#F2EFE9", // Ultra light warm gray
// Overlays
overlay: "rgba(44, 55, 49, 0.5)",
overlayLight: "rgba(44, 55, 49, 0.05)",
// Legacy
white: "#FFFFFF",
black: "#2C3731",
};
/**
* Dark Mode Color Palette
* Warm dark tones with adjusted earth colors for contrast
*/
export const darkColors: ColorScheme = {
// Primary Earth Tones (adjusted for dark)
primary: "#8AAE9E", // Lighter sage for contrast
primaryDark: "#6B9080",
primaryLight: "#A4C4B5",
// Accent Colors
accent: "#B5C2B0",
terracotta: "#D4A285",
sand: "#4A4539", // Dark sand
// Status Colors
success: "#8DB76A",
warning: "#E0B886",
danger: "#C87D7D",
info: "#8FADC4",
// Neutrals
background: "#1C1F1D", // Deep warm black
surface: "#252926", // Warm dark gray
surfaceElevated: "#2D3330", // Elevated warm dark
// Text
textPrimary: "#E8E6E1", // Warm off-white
textSecondary: "#B8BFB5", // Medium warm gray
textTertiary: "#7A8379", // Muted warm gray
// Borders
border: "#3A3F3C", // Subtle dark border
borderLight: "#2F3432", // Ultra subtle
// Overlays
overlay: "rgba(0, 0, 0, 0.6)",
overlayLight: "rgba(255, 255, 255, 0.05)",
// Legacy
white: "#E8E6E1",
black: "#1C1F1D",
};
/**
* Get color scheme based on theme mode
*/
export const getColors = (mode: "light" | "dark"): ColorScheme => {
return mode === "dark" ? darkColors : lightColors;
};

308
apps/mobile/src/styles/theme.ts
View File

@ -1,191 +1,159 @@
/**
* Modern Design System Theme
* Centralized theme configuration with gradients, colors, shadows, and spacing
* FitAI Design System Theme
* Minimalist theme with light/dark mode support
* @deprecated Use useTheme() hook instead for dynamic theming
*/
import { lightColors, darkColors } from "./colors";
import { typography as typographySystem } from "./typography";
/**
* Legacy theme object for backward compatibility
* New components should use useTheme() hook instead
*/
export const theme = {
// Color Palette
colors: {
// Primary colors
primary: '#3b82f6',
primaryDark: '#2563eb',
primaryLight: '#60a5fa',
secondary: '#8b5cf6',
// Color Palette (light mode - for legacy components)
colors: {
...lightColors,
// Accent colors
purple: '#8b5cf6',
purpleDark: '#7c3aed',
pink: '#ec4899',
// Legacy color mappings (deprecated - use new colors instead)
secondary: "#8b5cf6", // Old purple - deprecated
purple: "#A9B4A0", // Mapped to accent
purpleDark: "#5A7A6E",
pink: "#C1876B", // Mapped to terracotta
successLight: "#8DB76A",
gray50: "#F2EFE9",
gray100: "#E8E4DF",
gray200: "#E8E4DF",
gray300: "#B8BFB5",
gray400: "#8B9A8F",
gray500: "#5C6B61",
gray600: "#5C6B61",
gray700: "#2C3731",
gray800: "#2C3731",
gray900: "#2C3731",
},
// Success
success: '#10b981',
successDark: '#059669',
successLight: '#34d399',
// Typography (updated to new system)
typography: typographySystem,
// Warning
warning: '#f59e0b',
warningDark: '#d97706',
// Spacing Scale (updated for minimalism)
spacing: {
xs: 4,
sm: 8,
md: 12,
lg: 16,
xl: 24, // Increased from 20
"2xl": 32, // Increased from 24
"3xl": 40, // Increased from 32
"4xl": 48, // New
"5xl": 64, // New
},
// Danger
danger: '#ef4444',
dangerDark: '#dc2626',
// Border Radius (reduced for minimalism)
borderRadius: {
sm: 4,
md: 6,
lg: 10,
xl: 12, // Reduced from 16
"2xl": 16, // Reduced from 20
"3xl": 20, // Reduced from 24
full: 9999,
},
// Neutrals
white: '#ffffff',
black: '#000000',
gray50: '#f9fafb',
gray100: '#f3f4f6',
gray200: '#e5e7eb',
gray300: '#d1d5db',
gray400: '#9ca3af',
gray500: '#6b7280',
gray600: '#4b5563',
gray700: '#374151',
gray800: '#1f2937',
gray900: '#111827',
// Backgrounds
background: '#f5f5f5',
backgroundDark: '#0f172a',
surface: '#ffffff',
surfaceDark: '#1e293b',
// Shadow System (simplified)
shadows: {
subtle: {
shadowColor: "#000",
shadowOffset: { width: 0, height: 1 },
shadowOpacity: 0.05,
shadowRadius: 3,
elevation: 1,
},
// Gradient Definitions
gradients: {
primary: ['#3b82f6', '#8b5cf6'] as const,
primaryVertical: ['#3b82f6', '#2563eb'] as const,
success: ['#10b981', '#059669'] as const,
warning: ['#f59e0b', '#d97706'] as const,
danger: ['#ef4444', '#ec4899'] as const,
purple: ['#8b5cf6', '#7c3aed'] as const,
ocean: ['#06b6d4', '#3b82f6'] as const,
sunset: ['#f59e0b', '#ef4444'] as const,
forest: ['#10b981', '#059669'] as const,
lavender: ['#a78bfa', '#ec4899'] as const,
dark: ['#1e293b', '#0f172a'] as const,
medium: {
shadowColor: "#000",
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.08,
shadowRadius: 8,
elevation: 2,
},
// Shadow System
shadows: {
subtle: {
shadowColor: '#000',
shadowOffset: { width: 0, height: 1 },
shadowOpacity: 0.05,
shadowRadius: 2,
elevation: 2,
},
medium: {
shadowColor: '#000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.1,
shadowRadius: 4,
elevation: 3,
},
strong: {
shadowColor: '#000',
shadowOffset: { width: 0, height: 4 },
shadowOpacity: 0.15,
shadowRadius: 8,
elevation: 5,
},
glow: {
shadowColor: '#3b82f6',
shadowOffset: { width: 0, height: 4 },
shadowOpacity: 0.3,
shadowRadius: 12,
elevation: 8,
},
glowDanger: {
shadowColor: '#ef4444',
shadowOffset: { width: 0, height: 4 },
shadowOpacity: 0.3,
shadowRadius: 12,
elevation: 8,
},
strong: {
shadowColor: "#000",
shadowOffset: { width: 0, height: 4 },
shadowOpacity: 0.12,
shadowRadius: 16,
elevation: 4,
},
// Typography
typography: {
// Font sizes
fontSize: {
xs: 12,
sm: 14,
base: 16,
lg: 18,
xl: 20,
'2xl': 24,
'3xl': 28,
'4xl': 32,
'5xl': 36,
},
// Font weights
fontWeight: {
normal: '400' as const,
medium: '500' as const,
semibold: '600' as const,
bold: '700' as const,
extrabold: '800' as const,
},
// Line heights
lineHeight: {
tight: 1.2,
normal: 1.5,
relaxed: 1.75,
},
// Legacy glow shadows (deprecated - avoid in new designs)
glow: {
shadowColor: "#6B9080",
shadowOffset: { width: 0, height: 4 },
shadowOpacity: 0.2,
shadowRadius: 12,
elevation: 6,
},
// Spacing Scale
spacing: {
xs: 4,
sm: 8,
md: 12,
lg: 16,
xl: 20,
'2xl': 24,
'3xl': 32,
'4xl': 40,
'5xl': 48,
glowDanger: {
shadowColor: "#B66B6B",
shadowOffset: { width: 0, height: 4 },
shadowOpacity: 0.2,
shadowRadius: 12,
elevation: 6,
},
},
// Border Radius
borderRadius: {
sm: 4,
md: 8,
lg: 12,
xl: 16,
'2xl': 20,
'3xl': 24,
full: 9999,
// Animation Timing (simplified)
animation: {
duration: {
fast: 200,
normal: 300,
slow: 500,
},
},
// Animation Timing
animation: {
duration: {
fast: 150,
normal: 250,
slow: 350,
},
easing: {
easeIn: 'ease-in',
easeOut: 'ease-out',
easeInOut: 'ease-in-out',
},
},
// Gradients (kept for legacy compatibility - should be avoided in new designs)
gradients: {
primary: ["#6B9080", "#8AAE9E"] as const,
success: ["#7BA05B", "#8DB76A"] as const,
warning: ["#D4A574", "#E0B886"] as const,
danger: ["#B66B6B", "#C87D7D"] as const,
// Legacy gradients (deprecated)
purple: ["#8b5cf6", "#7c3aed"] as const,
ocean: ["#06b6d4", "#3b82f6"] as const,
sunset: ["#f59e0b", "#ef4444"] as const,
forest: ["#10b981", "#059669"] as const,
lavender: ["#a78bfa", "#ec4899"] as const,
dark: ["#1e293b", "#0f172a"] as const,
primaryVertical: ["#6B9080", "#5A7A6E"] as const,
},
};
// Glassmorphism
glass: {
light: {
backgroundColor: 'rgba(255, 255, 255, 0.7)',
borderWidth: 1,
borderColor: 'rgba(255, 255, 255, 0.3)',
},
dark: {
backgroundColor: 'rgba(0, 0, 0, 0.3)',
borderWidth: 1,
borderColor: 'rgba(255, 255, 255, 0.1)',
},
},
/**
* Dark theme object
* @deprecated Use useTheme() hook instead
*/
export const darkTheme = {
...theme,
colors: {
...darkColors,
// Legacy color mappings
secondary: "#8b5cf6", // Old purple - deprecated
purple: "#B5C2B0", // Mapped to dark accent
purpleDark: "#6B9080",
pink: "#D4A285", // Mapped to dark terracotta
successLight: "#8DB76A",
gray50: "#2F3432",
gray100: "#3A3F3C",
gray200: "#3A3F3C",
gray300: "#7A8379",
gray400: "#7A8379",
gray500: "#B8BFB5",
gray600: "#B8BFB5",
gray700: "#E8E6E1",
gray800: "#E8E6E1",
gray900: "#E8E6E1",
},
};
export type Theme = typeof theme;
export type DarkTheme = typeof darkTheme;

145
apps/mobile/src/styles/typography.ts Normal file
View File

@ -0,0 +1,145 @@
/**
* FitAI Typography System
* Minimalist typography with clear hierarchy using system fonts
*/
import { TextStyle } from "react-native";
/**
* Font Sizes
* Refined scale with fewer sizes for clearer hierarchy
*/
export const fontSize = {
xs: 11,
sm: 13,
base: 15,
md: 17, // Body emphasis
lg: 20,
xl: 24,
"2xl": 28,
"3xl": 34,
"4xl": 40,
} as const;
/**
* Font Weights
*/
export const fontWeight = {
regular: "400" as TextStyle["fontWeight"],
medium: "500" as TextStyle["fontWeight"],
semibold: "600" as TextStyle["fontWeight"],
bold: "700" as TextStyle["fontWeight"],
} as const;
/**
* Line Heights
*/
export const lineHeight = {
tight: 1.2,
normal: 1.5,
relaxed: 1.7,
} as const;
/**
* Letter Spacing
*/
export const letterSpacing = {
tight: -0.5,
normal: 0,
wide: 0.5,
wider: 1,
} as const;
/**
* Typography Presets
* Ready-to-use text styles for common use cases
*/
export interface TypographyPresets {
h1: TextStyle;
h2: TextStyle;
h3: TextStyle;
body: TextStyle;
bodyEmphasis: TextStyle;
label: TextStyle;
stat: TextStyle;
caption: TextStyle;
}
export const createTypographyPresets = (
textPrimary: string,
textSecondary: string,
textTertiary: string,
): TypographyPresets => ({
// Display Text (Screen Titles)
h1: {
fontSize: fontSize["3xl"],
fontWeight: fontWeight.bold,
letterSpacing: letterSpacing.tight,
lineHeight: fontSize["3xl"] * lineHeight.tight,
color: textPrimary,
},
// Section Headers
h2: {
fontSize: fontSize.xl,
fontWeight: fontWeight.semibold,
letterSpacing: -0.3,
color: textPrimary,
},
// Card Titles
h3: {
fontSize: fontSize.md,
fontWeight: fontWeight.semibold,
color: textPrimary,
},
// Body Text
body: {
fontSize: fontSize.base,
fontWeight: fontWeight.regular,
lineHeight: fontSize.base * lineHeight.normal,
color: textSecondary,
},
// Emphasized Body
bodyEmphasis: {
fontSize: fontSize.md,
fontWeight: fontWeight.medium,
lineHeight: fontSize.md * lineHeight.normal,
color: textPrimary,
},
// Labels (uppercase, spaced)
label: {
fontSize: fontSize.sm,
fontWeight: fontWeight.medium,
letterSpacing: letterSpacing.wide,
textTransform: "uppercase",
color: textTertiary,
},
// Stats/Numbers
stat: {
fontSize: fontSize["2xl"],
fontWeight: fontWeight.bold,
color: textPrimary,
},
// Caption/Small text
caption: {
fontSize: fontSize.xs,
fontWeight: fontWeight.regular,
color: textTertiary,
},
});
/**
* Typography utility object
*/
export const typography = {
fontSize,
fontWeight,
lineHeight,
letterSpacing,
};