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.

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

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

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

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

@ -7,28 +7,28 @@ import {
Image, Image,
} from "react-native"; } from "react-native";
import { useUser } from "@clerk/clerk-expo"; import { useUser } from "@clerk/clerk-expo";
import { LinearGradient } from "expo-linear-gradient";
import { useState, useCallback, useEffect } from "react"; import { useState, useCallback, useEffect } from "react";
import { useFocusEffect } from "@react-navigation/native"; import { useFocusEffect } from "@react-navigation/native";
import AsyncStorage from "@react-native-async-storage/async-storage"; import AsyncStorage from "@react-native-async-storage/async-storage";
import { theme } from "../../styles/theme"; import { Ionicons } from "@expo/vector-icons";
import { ActivityWidget } from "../../components/ActivityWidget"; import { useTheme } from "../../contexts/ThemeContext";
import { QuickActionGrid } from "../../components/QuickActionGrid"; 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 { TrackMealModal } from "../../components/TrackMealModal";
import { AddWaterModal } from "../../components/AddWaterModal"; 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 { ScanFoodModal } from "../../components/ScanFoodModal";
import { useStatistics } from "../../contexts/StatisticsContext";
import { Ionicons } from "@expo/vector-icons";
const CALORIE_GOAL = 2000; // kcal const CALORIE_GOAL = 2000; // kcal
const WATER_GOAL = 2000; // ml const WATER_GOAL = 2000; // ml
export default function HomeScreen() { export default function HomeScreen() {
const { user } = useUser(); const { user } = useUser();
const { refetchStatistics, forceRefresh } = useStatistics(); const { colors, typography } = useTheme();
const { refetchStatistics, forceRefresh, statistics, loading } =
useStatistics();
const [refreshing, setRefreshing] = useState(false); const [refreshing, setRefreshing] = useState(false);
const [trackMealModalVisible, setTrackMealModalVisible] = useState(false); const [trackMealModalVisible, setTrackMealModalVisible] = useState(false);
const [addWaterModalVisible, setAddWaterModalVisible] = useState(false); const [addWaterModalVisible, setAddWaterModalVisible] = useState(false);
@ -45,7 +45,6 @@ export default function HomeScreen() {
const onRefresh = useCallback(async () => { const onRefresh = useCallback(async () => {
setRefreshing(true); setRefreshing(true);
// Force refetch statistics bypassing cache
await forceRefresh(); await forceRefresh();
setRefreshing(false); setRefreshing(false);
}, [forceRefresh]); }, [forceRefresh]);
@ -168,57 +167,358 @@ export default function HomeScreen() {
return () => clearTimeout(midnightTimer); return () => clearTimeout(midnightTimer);
}, []); }, []);
const checkInsThisWeek = statistics?.attendance.checkInsThisWeek || 0;
const currentStreak = statistics?.attendance.currentStreak || 0;
return ( return (
<View style={styles.container}> <View style={[styles.container, { backgroundColor: colors.background }]}>
<ScrollView <ScrollView
contentContainerStyle={styles.scrollContent} contentContainerStyle={styles.scrollContent}
refreshControl={ refreshControl={
<RefreshControl <RefreshControl
refreshing={refreshing} refreshing={refreshing}
onRefresh={onRefresh} onRefresh={onRefresh}
tintColor={theme.colors.primary} tintColor={colors.primary}
/> />
} }
> >
{/* Header Section */} {/* Header Section */}
<View style={styles.header}> <View style={styles.header}>
<View> <View>
<Text style={styles.greeting}>{getGreeting()},</Text> <Text style={[typography.body, { color: colors.textSecondary }]}>
<Text style={styles.name}>{user?.firstName || "Athlete"}</Text> {getGreeting()},
</Text>
<Text
style={[
typography.h1,
{ color: colors.textPrimary, marginTop: 4 },
]}
>
{user?.firstName || "Athlete"}
</Text>
</View> </View>
<View style={styles.avatarContainer}> <View>
{user?.imageUrl ? ( {user?.imageUrl ? (
<Image source={{ uri: user.imageUrl }} style={styles.avatar} /> <Image source={{ uri: user.imageUrl }} style={styles.avatar} />
) : ( ) : (
<View style={styles.placeholderAvatar}> <View
<Ionicons name="person" size={24} color="#fff" /> style={[
styles.placeholderAvatar,
{ backgroundColor: colors.primary },
]}
>
<Ionicons name="person" size={24} color={colors.white} />
</View> </View>
)} )}
</View> </View>
</View> </View>
{/* Activity Widget */} {/* Daily Stats Card */}
<ActivityWidget calories={calories} /> <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 */} <View
<QuickActionGrid style={[styles.divider, { backgroundColor: colors.border }]}
onTrackMealPress={() => setTrackMealModalVisible(true)}
onAddWaterPress={() => setAddWaterModalVisible(true)}
onScanFoodPress={() => setScanFoodModalVisible(true)}
onLogWorkoutPress={() => {
// TODO: Implement workout logging
console.log("Log workout tapped");
}}
/> />
{/* Nutrition Widget */} <View style={styles.statItem}>
<NutritionWidget current={calories} goal={CALORIE_GOAL} /> <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 */} <View
<HydrationWidget current={waterIntake} goal={WATER_GOAL} /> style={[styles.divider, { backgroundColor: colors.border }]}
/>
{/* Weekly Progress Widget */} <View style={styles.statItem}>
<WeeklyProgressWidget /> <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 <TrackMealModal
visible={trackMealModalVisible} visible={trackMealModalVisible}
@ -240,54 +540,6 @@ export default function HomeScreen() {
onAddFood={handleAddScannedFood} 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 */} {/* Bottom Spacer for Tab Bar */}
<View style={{ height: 100 }} /> <View style={{ height: 100 }} />
</ScrollView> </ScrollView>
@ -298,7 +550,6 @@ export default function HomeScreen() {
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
flex: 1, flex: 1,
backgroundColor: theme.colors.background,
}, },
scrollContent: { scrollContent: {
paddingTop: 60, paddingTop: 60,
@ -308,102 +559,65 @@ const styles = StyleSheet.create({
justifyContent: "space-between", justifyContent: "space-between",
alignItems: "center", alignItems: "center",
paddingHorizontal: 24, paddingHorizontal: 24,
marginBottom: 32, marginBottom: 24,
},
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,
}, },
avatar: { avatar: {
width: 56, width: 56,
height: 56, height: 56,
borderRadius: 20, borderRadius: 28,
borderWidth: 2,
borderColor: "#fff",
}, },
placeholderAvatar: { placeholderAvatar: {
width: 56, width: 56,
height: 56, height: 56,
borderRadius: 20, borderRadius: 28,
backgroundColor: theme.colors.primary,
justifyContent: "center", justifyContent: "center",
alignItems: "center", alignItems: "center",
borderWidth: 2,
borderColor: "#fff",
}, },
section: { section: {
paddingHorizontal: 20, paddingHorizontal: 24,
marginBottom: 24, marginBottom: 24,
}, },
sectionHeader: { statsRow: {
flexDirection: "row", flexDirection: "row",
justifyContent: "space-between", justifyContent: "space-between",
alignItems: "center", alignItems: "center",
marginBottom: 16,
}, },
sectionTitle: { statItem: {
fontSize: 18,
fontWeight: "700",
color: theme.colors.gray900,
},
seeAll: {
fontSize: 14,
color: theme.colors.primary,
fontWeight: "600",
},
activityCard: {
gap: 12,
},
recentItem: {
flexDirection: "row",
alignItems: "center", 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, flex: 1,
}, },
recentTitle: { divider: {
fontSize: 16, width: 1,
fontWeight: "600", height: 60,
color: theme.colors.gray900,
marginBottom: 4,
}, },
recentSubtitle: { actionGrid: {
fontSize: 12, flexDirection: "row",
color: theme.colors.gray500, flexWrap: "wrap",
gap: 12,
}, },
recentValue: { actionCard: {
fontSize: 14, width: "48%",
fontWeight: "600", alignItems: "center",
color: theme.colors.gray900, 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,
}, },
}); });

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

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

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

6
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 * as SecureStore from "expo-secure-store";
import { View, Text } from "react-native"; import { View, Text } from "react-native";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { SafeAreaProvider } from "react-native-safe-area-context";
import { validateEnv } from "../utils/env"; import { validateEnv } from "../utils/env";
import { ThemeProvider } from "../contexts/ThemeContext";
import { StatisticsProvider } from "../contexts/StatisticsContext"; import { StatisticsProvider } from "../contexts/StatisticsContext";
import { FitnessGoalsProvider } from "../contexts/FitnessGoalsContext"; import { FitnessGoalsProvider } from "../contexts/FitnessGoalsContext";
import { RecommendationsProvider } from "../contexts/RecommendationsContext"; import { RecommendationsProvider } from "../contexts/RecommendationsContext";
@ -169,8 +171,10 @@ export default function RootLayout() {
}); });
return ( return (
<SafeAreaProvider>
<ClerkProvider tokenCache={tokenCache} publishableKey={publishableKey}> <ClerkProvider tokenCache={tokenCache} publishableKey={publishableKey}>
<ClerkLoaded> <ClerkLoaded>
<ThemeProvider>
<NotificationsProvider> <NotificationsProvider>
<StatisticsProvider> <StatisticsProvider>
<FitnessGoalsProvider> <FitnessGoalsProvider>
@ -180,7 +184,9 @@ export default function RootLayout() {
</FitnessGoalsProvider> </FitnessGoalsProvider>
</StatisticsProvider> </StatisticsProvider>
</NotificationsProvider> </NotificationsProvider>
</ThemeProvider>
</ClerkLoaded> </ClerkLoaded>
</ClerkProvider> </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",
},
});

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

@ -1,21 +1,39 @@
import React from 'react'; import React from "react";
import { View, StyleSheet, TouchableOpacity, Platform, Dimensions } from 'react-native'; import { View, StyleSheet, TouchableOpacity } from "react-native";
import { BottomTabBarProps } from '@react-navigation/bottom-tabs'; import { BottomTabBarProps } from "@react-navigation/bottom-tabs";
import { Ionicons } from '@expo/vector-icons'; import { Ionicons } from "@expo/vector-icons";
import { LinearGradient } from 'expo-linear-gradient'; import { useSafeAreaInsets } from "react-native-safe-area-context";
import { theme } from '../styles/theme'; import { useTheme } from "../contexts/ThemeContext";
import { Animated } from 'react-native';
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 ( return (
<View style={styles.container}> <View
<LinearGradient style={[
colors={['rgba(255, 255, 255, 0.9)', 'rgba(255, 255, 255, 0.7)']} styles.container,
style={[styles.tabBar, theme.shadows.medium]} {
start={{ x: 0, y: 0 }} backgroundColor: colors.surface,
end={{ x: 0, y: 1 }} borderTopColor: colors.border,
paddingBottom: insets.bottom,
},
]}
> >
{state.routes.map((route, index) => { {state.routes.map((route, index) => {
const { options } = descriptors[route.key]; const { options } = descriptors[route.key];
@ -23,7 +41,7 @@ export function CustomTabBar({ state, descriptors, navigation }: BottomTabBarPro
const onPress = () => { const onPress = () => {
const event = navigation.emit({ const event = navigation.emit({
type: 'tabPress', type: "tabPress",
target: route.key, target: route.key,
canPreventDefault: true, canPreventDefault: true,
}); });
@ -33,34 +51,26 @@ export function CustomTabBar({ state, descriptors, navigation }: BottomTabBarPro
} }
}; };
const getIconName = (routeName: string, focused: boolean): keyof typeof Ionicons.glyphMap => { const getIconName = (
routeName: string,
focused: boolean,
): keyof typeof Ionicons.glyphMap => {
switch (routeName) { switch (routeName) {
case 'index': case "index":
return focused ? 'home' : 'home-outline'; return focused ? "home" : "home-outline";
case 'goals': case "goals":
return focused ? 'trophy' : 'trophy-outline'; return focused ? "trophy" : "trophy-outline";
case 'attendance': case "attendance":
return focused ? 'calendar' : 'calendar-outline'; return focused ? "calendar" : "calendar-outline";
case 'recommendations': case "recommendations":
return focused ? 'sparkles' : 'sparkles-outline'; return focused ? "sparkles" : "sparkles-outline";
case 'profile': case "profile":
return focused ? 'person' : 'person-outline'; return focused ? "person" : "person-outline";
default: default:
return 'ellipse-outline'; 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 ( return (
<TouchableOpacity <TouchableOpacity
key={index} key={index}
@ -72,72 +82,48 @@ export function CustomTabBar({ state, descriptors, navigation }: BottomTabBarPro
style={styles.tabItem} style={styles.tabItem}
activeOpacity={0.7} activeOpacity={0.7}
> >
<Animated.View style={{ transform: [{ scale: scaleValue }] }}> <View style={styles.iconWrapper}>
{isFocused ? (
<LinearGradient
colors={theme.gradients.primary}
style={styles.iconContainer}
>
<Ionicons <Ionicons
name={getIconName(route.name, true)} name={getIconName(route.name, isFocused)}
size={20}
color="#fff"
/>
</LinearGradient>
) : (
<Ionicons
name={getIconName(route.name, false)}
size={24} size={24}
color={theme.colors.gray500} color={isFocused ? colors.primary : colors.textTertiary}
/>
{isFocused && (
<View
style={[
styles.indicator,
{ backgroundColor: colors.primary },
]}
/> />
)} )}
</Animated.View> </View>
</TouchableOpacity> </TouchableOpacity>
); );
})} })}
</LinearGradient>
</View> </View>
); );
} }
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
position: 'absolute', flexDirection: "row",
bottom: 0, height: 56,
left: 0, borderTopWidth: 1,
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: { tabItem: {
flex: 1, flex: 1,
alignItems: 'center', alignItems: "center",
justifyContent: 'center', justifyContent: "center",
height: '100%', height: "100%",
}, },
iconContainer: { iconWrapper: {
width: 40, alignItems: "center",
height: 40, justifyContent: "center",
borderRadius: 20, },
alignItems: 'center', indicator: {
justifyContent: 'center', width: 24,
shadowColor: theme.colors.primary, height: 3,
shadowOffset: { width: 0, height: 4 }, borderRadius: 999,
shadowOpacity: 0.3, marginTop: 4,
shadowRadius: 8,
elevation: 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;
};

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

@ -1,191 +1,159 @@
/** /**
* Modern Design System Theme * FitAI Design System Theme
* Centralized theme configuration with gradients, colors, shadows, and spacing * 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 = { export const theme = {
// Color Palette // Color Palette (light mode - for legacy components)
colors: { colors: {
// Primary colors ...lightColors,
primary: '#3b82f6',
primaryDark: '#2563eb',
primaryLight: '#60a5fa',
secondary: '#8b5cf6',
// Accent colors // Legacy color mappings (deprecated - use new colors instead)
purple: '#8b5cf6', secondary: "#8b5cf6", // Old purple - deprecated
purpleDark: '#7c3aed', purple: "#A9B4A0", // Mapped to accent
pink: '#ec4899', purpleDark: "#5A7A6E",
pink: "#C1876B", // Mapped to terracotta
// Success successLight: "#8DB76A",
success: '#10b981', gray50: "#F2EFE9",
successDark: '#059669', gray100: "#E8E4DF",
successLight: '#34d399', gray200: "#E8E4DF",
gray300: "#B8BFB5",
// Warning gray400: "#8B9A8F",
warning: '#f59e0b', gray500: "#5C6B61",
warningDark: '#d97706', gray600: "#5C6B61",
gray700: "#2C3731",
// Danger gray800: "#2C3731",
danger: '#ef4444', gray900: "#2C3731",
dangerDark: '#dc2626',
// 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',
}, },
// Gradient Definitions // Typography (updated to new system)
gradients: { typography: typographySystem,
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,
},
// Shadow System // Spacing Scale (updated for minimalism)
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,
},
},
// 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,
},
},
// Spacing Scale
spacing: { spacing: {
xs: 4, xs: 4,
sm: 8, sm: 8,
md: 12, md: 12,
lg: 16, lg: 16,
xl: 20, xl: 24, // Increased from 20
'2xl': 24, "2xl": 32, // Increased from 24
'3xl': 32, "3xl": 40, // Increased from 32
'4xl': 40, "4xl": 48, // New
'5xl': 48, "5xl": 64, // New
}, },
// Border Radius // Border Radius (reduced for minimalism)
borderRadius: { borderRadius: {
sm: 4, sm: 4,
md: 8, md: 6,
lg: 12, lg: 10,
xl: 16, xl: 12, // Reduced from 16
'2xl': 20, "2xl": 16, // Reduced from 20
'3xl': 24, "3xl": 20, // Reduced from 24
full: 9999, full: 9999,
}, },
// Animation Timing // Shadow System (simplified)
animation: { shadows: {
duration: { subtle: {
fast: 150, shadowColor: "#000",
normal: 250, shadowOffset: { width: 0, height: 1 },
slow: 350, shadowOpacity: 0.05,
shadowRadius: 3,
elevation: 1,
}, },
easing: { medium: {
easeIn: 'ease-in', shadowColor: "#000",
easeOut: 'ease-out', shadowOffset: { width: 0, height: 2 },
easeInOut: 'ease-in-out', shadowOpacity: 0.08,
shadowRadius: 8,
elevation: 2,
},
strong: {
shadowColor: "#000",
shadowOffset: { width: 0, height: 4 },
shadowOpacity: 0.12,
shadowRadius: 16,
elevation: 4,
},
// Legacy glow shadows (deprecated - avoid in new designs)
glow: {
shadowColor: "#6B9080",
shadowOffset: { width: 0, height: 4 },
shadowOpacity: 0.2,
shadowRadius: 12,
elevation: 6,
},
glowDanger: {
shadowColor: "#B66B6B",
shadowOffset: { width: 0, height: 4 },
shadowOpacity: 0.2,
shadowRadius: 12,
elevation: 6,
}, },
}, },
// Glassmorphism // Animation Timing (simplified)
glass: { animation: {
light: { duration: {
backgroundColor: 'rgba(255, 255, 255, 0.7)', fast: 200,
borderWidth: 1, normal: 300,
borderColor: 'rgba(255, 255, 255, 0.3)', slow: 500,
}, },
dark: {
backgroundColor: 'rgba(0, 0, 0, 0.3)',
borderWidth: 1,
borderColor: 'rgba(255, 255, 255, 0.1)',
}, },
// 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,
},
};
/**
* 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 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,
};