Compare commits
12 Commits
1143f8ca02
...
0776517fb7
| Author | SHA1 | Date | |
|---|---|---|---|
| 0776517fb7 | |||
| 064dafad57 | |||
| 5d6166df1b | |||
| aba9b1395b | |||
| c3a41d2b32 | |||
| 254a30ff93 | |||
| 96db3ea3b7 | |||
| 981208ab7b | |||
| a5f761062e | |||
| b1439f059a | |||
| df08ff8950 | |||
| e3a3c3fccf |
Binary file not shown.
@ -7,46 +7,28 @@ import {
|
||||
ScrollView,
|
||||
Alert,
|
||||
} from "react-native";
|
||||
import { useState, useEffect, useRef } from "react";
|
||||
import { useState, useEffect } from "react";
|
||||
import { useAuth } from "@clerk/clerk-expo";
|
||||
import { LinearGradient } from "expo-linear-gradient";
|
||||
import { Ionicons } from "@expo/vector-icons";
|
||||
import { useTheme } from "../../contexts/ThemeContext";
|
||||
import { MinimalCard } from "../../components/MinimalCard";
|
||||
import { SectionHeader } from "../../components/SectionHeader";
|
||||
import { MinimalButton } from "../../components/MinimalButton";
|
||||
import { Badge } from "../../components/Badge";
|
||||
import { IconContainer } from "../../components/IconContainer";
|
||||
import { attendanceApi, Attendance } from "../../api/attendance";
|
||||
import { AttendanceCalendar } from "../../components/AttendanceCalendar";
|
||||
import { useStatistics } from "../../contexts/StatisticsContext";
|
||||
import { theme } from "../../styles/theme";
|
||||
import { Animated } from "react-native";
|
||||
import { getErrorMessage } from "../../utils/error-helpers";
|
||||
import log from "../../utils/logger";
|
||||
|
||||
export default function AttendanceScreen() {
|
||||
const { getToken, userId } = useAuth();
|
||||
const { colors, typography } = useTheme();
|
||||
const { clearCache: clearStatisticsCache } = useStatistics();
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [activeCheckIn, setActiveCheckIn] = useState<Attendance | null>(null);
|
||||
const [history, setHistory] = useState<Attendance[]>([]);
|
||||
const pulseAnim = useRef(new Animated.Value(1)).current;
|
||||
|
||||
useEffect(() => {
|
||||
if (activeCheckIn) {
|
||||
const pulse = Animated.loop(
|
||||
Animated.sequence([
|
||||
Animated.timing(pulseAnim, {
|
||||
toValue: 1.05,
|
||||
duration: 1000,
|
||||
useNativeDriver: true,
|
||||
}),
|
||||
Animated.timing(pulseAnim, {
|
||||
toValue: 1,
|
||||
duration: 1000,
|
||||
useNativeDriver: true,
|
||||
}),
|
||||
]),
|
||||
);
|
||||
pulse.start();
|
||||
return () => pulse.stop();
|
||||
}
|
||||
}, [activeCheckIn]);
|
||||
|
||||
const fetchAttendance = async () => {
|
||||
try {
|
||||
@ -82,10 +64,7 @@ export default function AttendanceScreen() {
|
||||
if (!token) return;
|
||||
|
||||
await attendanceApi.checkIn("gym", token);
|
||||
|
||||
// Clear statistics cache to force refresh on home screen
|
||||
clearStatisticsCache();
|
||||
|
||||
fetchAttendance();
|
||||
Alert.alert("Success", "Checked in successfully!");
|
||||
} catch (error: unknown) {
|
||||
@ -100,10 +79,7 @@ export default function AttendanceScreen() {
|
||||
if (!token) return;
|
||||
|
||||
await attendanceApi.checkOut(token);
|
||||
|
||||
// Clear statistics cache to force refresh on home screen
|
||||
clearStatisticsCache();
|
||||
|
||||
fetchAttendance();
|
||||
Alert.alert("Success", "Checked out successfully!");
|
||||
} catch (error: unknown) {
|
||||
@ -114,143 +90,204 @@ export default function AttendanceScreen() {
|
||||
|
||||
if (loading && !history.length) {
|
||||
return (
|
||||
<View style={styles.centered}>
|
||||
<ActivityIndicator size="large" color={theme.colors.primary} />
|
||||
<View style={[styles.centered, { backgroundColor: colors.background }]}>
|
||||
<ActivityIndicator size="large" color={colors.primary} />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<ScrollView style={styles.container} contentContainerStyle={styles.content}>
|
||||
<LinearGradient
|
||||
colors={theme.gradients.primary}
|
||||
start={{ x: 0, y: 0 }}
|
||||
end={{ x: 1, y: 1 }}
|
||||
style={styles.header}
|
||||
>
|
||||
<Text style={styles.title}>Attendance</Text>
|
||||
<Text style={styles.subtitle}>Track your gym visits</Text>
|
||||
</LinearGradient>
|
||||
<ScrollView
|
||||
style={[styles.container, { backgroundColor: colors.background }]}
|
||||
contentContainerStyle={styles.content}
|
||||
>
|
||||
{/* Header */}
|
||||
<View style={styles.header}>
|
||||
<Text
|
||||
style={[typography.h1, { color: colors.textPrimary, fontSize: 32 }]}
|
||||
>
|
||||
Attendance
|
||||
</Text>
|
||||
<Text
|
||||
style={[
|
||||
typography.body,
|
||||
{ color: colors.textSecondary, marginTop: 8 },
|
||||
]}
|
||||
>
|
||||
{activeCheckIn
|
||||
? "You're crushing it today!"
|
||||
: history.length === 0
|
||||
? "Ready to start your fitness journey?"
|
||||
: "Track your gym visits and build streaks!"}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<View style={styles.actionContainer}>
|
||||
{/* Check In/Out Section */}
|
||||
<View style={styles.section}>
|
||||
{activeCheckIn ? (
|
||||
<LinearGradient
|
||||
colors={["rgba(16, 185, 129, 0.15)", "rgba(5, 150, 105, 0.1)"]}
|
||||
style={[styles.activeCard, theme.shadows.medium]}
|
||||
>
|
||||
<View style={styles.activeCardContent}>
|
||||
<View style={styles.activeIconContainer}>
|
||||
<LinearGradient
|
||||
colors={theme.gradients.success}
|
||||
style={styles.activeIcon}
|
||||
<MinimalCard variant="bordered" style={styles.activeCard}>
|
||||
<View style={styles.activeHeader}>
|
||||
<View style={styles.activeHeaderLeft}>
|
||||
<IconContainer
|
||||
variant="colored"
|
||||
backgroundColor={`${colors.success}20`}
|
||||
size="lg"
|
||||
>
|
||||
<Ionicons name="checkmark-circle" size={32} color="#fff" />
|
||||
</LinearGradient>
|
||||
</View>
|
||||
<View style={styles.activeTextContainer}>
|
||||
<Text style={styles.activeText}>Currently Checked In</Text>
|
||||
<Text style={styles.timeText}>
|
||||
Since{" "}
|
||||
{new Date(activeCheckIn.checkInTime).toLocaleTimeString([], {
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
})}
|
||||
</Text>
|
||||
<Ionicons
|
||||
name="checkmark-circle"
|
||||
size={28}
|
||||
color={colors.success}
|
||||
/>
|
||||
</IconContainer>
|
||||
<View style={{ marginLeft: 12 }}>
|
||||
<Text style={[typography.h3, { color: colors.textPrimary }]}>
|
||||
✅ Currently Checked In
|
||||
</Text>
|
||||
<Text
|
||||
style={[
|
||||
typography.caption,
|
||||
{ color: colors.textTertiary, marginTop: 2 },
|
||||
]}
|
||||
>
|
||||
Since{" "}
|
||||
{new Date(activeCheckIn.checkInTime).toLocaleTimeString(
|
||||
[],
|
||||
{
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
},
|
||||
)}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
<TouchableOpacity onPress={handleCheckOut} activeOpacity={0.8}>
|
||||
<LinearGradient
|
||||
colors={theme.gradients.danger}
|
||||
start={{ x: 0, y: 0 }}
|
||||
end={{ x: 1, y: 0 }}
|
||||
style={[styles.checkOutButton, theme.shadows.medium]}
|
||||
>
|
||||
<Ionicons
|
||||
name="log-out-outline"
|
||||
size={20}
|
||||
color="#fff"
|
||||
style={{ marginRight: 8 }}
|
||||
/>
|
||||
<Text style={styles.buttonText}>Check Out</Text>
|
||||
</LinearGradient>
|
||||
</TouchableOpacity>
|
||||
</LinearGradient>
|
||||
<MinimalButton
|
||||
title="Check Out"
|
||||
onPress={handleCheckOut}
|
||||
variant="danger"
|
||||
size="lg"
|
||||
style={{ marginTop: 16 }}
|
||||
/>
|
||||
</MinimalCard>
|
||||
) : (
|
||||
<Animated.View style={{ transform: [{ scale: pulseAnim }] }}>
|
||||
<TouchableOpacity onPress={handleCheckIn} activeOpacity={0.8}>
|
||||
<LinearGradient
|
||||
colors={theme.gradients.primary}
|
||||
start={{ x: 0, y: 0 }}
|
||||
end={{ x: 1, y: 0 }}
|
||||
style={[styles.checkInButton, theme.shadows.glow]}
|
||||
>
|
||||
<Ionicons
|
||||
name="log-in-outline"
|
||||
size={24}
|
||||
color="#fff"
|
||||
style={{ marginRight: 8 }}
|
||||
/>
|
||||
<Text style={styles.checkInButtonText}>Check In</Text>
|
||||
</LinearGradient>
|
||||
</TouchableOpacity>
|
||||
</Animated.View>
|
||||
<MinimalButton
|
||||
title="💪 Check In"
|
||||
onPress={handleCheckIn}
|
||||
variant="primary"
|
||||
size="lg"
|
||||
/>
|
||||
)}
|
||||
</View>
|
||||
|
||||
{/* Attendance Calendar */}
|
||||
{history.length > 0 && <AttendanceCalendar attendanceRecords={history} />}
|
||||
<View style={styles.section}>
|
||||
<SectionHeader title="📅 Calendar" />
|
||||
<MinimalCard variant="default" style={{ borderRadius: 20 }}>
|
||||
<AttendanceCalendar attendanceRecords={history} />
|
||||
</MinimalCard>
|
||||
</View>
|
||||
|
||||
<Text style={styles.sectionTitle}>Recent History</Text>
|
||||
{history.map((item) => (
|
||||
<LinearGradient
|
||||
key={item.id}
|
||||
colors={["rgba(255, 255, 255, 1)", "rgba(249, 250, 251, 1)"] as const}
|
||||
style={[styles.historyItem, theme.shadows.medium]}
|
||||
>
|
||||
<View style={styles.historyLeft}>
|
||||
<View style={styles.historyIconContainer}>
|
||||
<LinearGradient
|
||||
colors={
|
||||
item.checkOutTime
|
||||
? theme.gradients.success
|
||||
: theme.gradients.primary
|
||||
}
|
||||
style={styles.historyIcon}
|
||||
{/* Recent History */}
|
||||
<View style={styles.section}>
|
||||
<SectionHeader title="📊 Recent History" />
|
||||
{history.length === 0 ? (
|
||||
<MinimalCard variant="default" style={{ borderRadius: 20 }}>
|
||||
<View style={styles.emptyState}>
|
||||
<Text style={{ fontSize: 64 }}>📍</Text>
|
||||
<Text
|
||||
style={[
|
||||
typography.bodyEmphasis,
|
||||
{ color: colors.textPrimary, marginTop: 16 },
|
||||
]}
|
||||
>
|
||||
<Ionicons
|
||||
name={item.checkOutTime ? "checkmark" : "time-outline"}
|
||||
size={16}
|
||||
color="#fff"
|
||||
/>
|
||||
</LinearGradient>
|
||||
</View>
|
||||
<View>
|
||||
<Text style={styles.dateText}>
|
||||
{new Date(item.checkInTime).toLocaleDateString()}
|
||||
No attendance history yet
|
||||
</Text>
|
||||
<Text style={styles.typeText}>{item.type.toUpperCase()}</Text>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.timeContainer}>
|
||||
<Text style={styles.historyTime}>
|
||||
In:{" "}
|
||||
{new Date(item.checkInTime).toLocaleTimeString([], {
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
})}
|
||||
</Text>
|
||||
{item.checkOutTime && (
|
||||
<Text style={styles.historyTime}>
|
||||
Out:{" "}
|
||||
{new Date(item.checkOutTime).toLocaleTimeString([], {
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
})}
|
||||
<Text
|
||||
style={[
|
||||
typography.body,
|
||||
{
|
||||
color: colors.textSecondary,
|
||||
marginTop: 8,
|
||||
textAlign: "center",
|
||||
},
|
||||
]}
|
||||
>
|
||||
Check in to start building your streak! 🔥
|
||||
</Text>
|
||||
)}
|
||||
</View>
|
||||
</MinimalCard>
|
||||
) : (
|
||||
<View style={styles.historyList}>
|
||||
{history.slice(0, 10).map((record, index) => {
|
||||
const checkIn = new Date(record.checkInTime);
|
||||
const checkOut = record.checkOutTime
|
||||
? new Date(record.checkOutTime)
|
||||
: null;
|
||||
const duration = checkOut
|
||||
? Math.round((checkOut.getTime() - checkIn.getTime()) / 60000)
|
||||
: null;
|
||||
|
||||
return (
|
||||
<MinimalCard
|
||||
key={index}
|
||||
variant="bordered"
|
||||
style={{ borderRadius: 16 }}
|
||||
>
|
||||
<View style={styles.historyItem}>
|
||||
<View style={styles.historyLeft}>
|
||||
<IconContainer
|
||||
variant="colored"
|
||||
backgroundColor={
|
||||
checkOut ? `${colors.success}20` : `${colors.info}20`
|
||||
}
|
||||
>
|
||||
<Ionicons
|
||||
name={checkOut ? "checkmark-done" : "time"}
|
||||
size={20}
|
||||
color={checkOut ? colors.success : colors.info}
|
||||
/>
|
||||
</IconContainer>
|
||||
<View style={{ marginLeft: 12, flex: 1 }}>
|
||||
<Text
|
||||
style={[typography.h3, { color: colors.textPrimary }]}
|
||||
>
|
||||
{checkIn.toLocaleDateString()}
|
||||
</Text>
|
||||
<Text
|
||||
style={[
|
||||
typography.caption,
|
||||
{ color: colors.textTertiary, marginTop: 2 },
|
||||
]}
|
||||
>
|
||||
{checkIn.toLocaleTimeString([], {
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
})}
|
||||
{checkOut &&
|
||||
` - ${checkOut.toLocaleTimeString([], {
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
})}`}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
{duration && (
|
||||
<Badge
|
||||
label={`${duration}m`}
|
||||
variant="neutral"
|
||||
size="sm"
|
||||
/>
|
||||
)}
|
||||
</View>
|
||||
</MinimalCard>
|
||||
);
|
||||
})}
|
||||
</View>
|
||||
</LinearGradient>
|
||||
))}
|
||||
)}
|
||||
</View>
|
||||
|
||||
{/* Bottom Spacer */}
|
||||
<View style={{ height: 100 }} />
|
||||
</ScrollView>
|
||||
);
|
||||
}
|
||||
@ -258,147 +295,54 @@ export default function AttendanceScreen() {
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: theme.colors.background,
|
||||
},
|
||||
content: {
|
||||
paddingBottom: 20,
|
||||
},
|
||||
centered: {
|
||||
flex: 1,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
},
|
||||
content: {
|
||||
paddingBottom: 20,
|
||||
},
|
||||
header: {
|
||||
paddingHorizontal: 24,
|
||||
paddingTop: 60,
|
||||
paddingBottom: 24,
|
||||
},
|
||||
section: {
|
||||
paddingHorizontal: 24,
|
||||
marginBottom: 24,
|
||||
borderBottomLeftRadius: theme.borderRadius.xl,
|
||||
borderBottomRightRadius: theme.borderRadius.xl,
|
||||
},
|
||||
title: {
|
||||
fontSize: theme.typography.fontSize["3xl"],
|
||||
fontWeight: theme.typography.fontWeight.bold,
|
||||
color: theme.colors.white,
|
||||
marginBottom: 4,
|
||||
},
|
||||
subtitle: {
|
||||
fontSize: theme.typography.fontSize.base,
|
||||
color: "rgba(255, 255, 255, 0.9)",
|
||||
},
|
||||
actionContainer: {
|
||||
marginBottom: 32,
|
||||
paddingHorizontal: 20,
|
||||
},
|
||||
checkInButton: {
|
||||
paddingVertical: 20,
|
||||
paddingHorizontal: 24,
|
||||
borderRadius: theme.borderRadius.xl,
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
},
|
||||
checkInButtonText: {
|
||||
color: theme.colors.white,
|
||||
fontSize: theme.typography.fontSize.xl,
|
||||
fontWeight: theme.typography.fontWeight.semibold,
|
||||
},
|
||||
checkOutButton: {
|
||||
paddingVertical: 14,
|
||||
paddingHorizontal: 20,
|
||||
borderRadius: theme.borderRadius.lg,
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
marginTop: 16,
|
||||
},
|
||||
buttonText: {
|
||||
color: theme.colors.white,
|
||||
fontSize: theme.typography.fontSize.base,
|
||||
fontWeight: theme.typography.fontWeight.semibold,
|
||||
},
|
||||
activeCard: {
|
||||
padding: 20,
|
||||
borderRadius: theme.borderRadius.xl,
|
||||
borderWidth: 1,
|
||||
borderColor: "rgba(16, 185, 129, 0.2)",
|
||||
borderRadius: 20,
|
||||
},
|
||||
activeCardContent: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
marginBottom: 16,
|
||||
},
|
||||
activeIconContainer: {
|
||||
marginRight: 16,
|
||||
},
|
||||
activeIcon: {
|
||||
width: 56,
|
||||
height: 56,
|
||||
borderRadius: 28,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
},
|
||||
activeTextContainer: {
|
||||
flex: 1,
|
||||
},
|
||||
activeText: {
|
||||
fontSize: theme.typography.fontSize.lg,
|
||||
fontWeight: theme.typography.fontWeight.semibold,
|
||||
color: theme.colors.gray900,
|
||||
marginBottom: 4,
|
||||
},
|
||||
timeText: {
|
||||
fontSize: theme.typography.fontSize.sm,
|
||||
color: theme.colors.gray600,
|
||||
},
|
||||
sectionTitle: {
|
||||
fontSize: theme.typography.fontSize.xl,
|
||||
fontWeight: theme.typography.fontWeight.semibold,
|
||||
marginBottom: 16,
|
||||
paddingHorizontal: 20,
|
||||
color: theme.colors.gray900,
|
||||
},
|
||||
historyItem: {
|
||||
padding: 16,
|
||||
borderRadius: theme.borderRadius.xl,
|
||||
marginBottom: 12,
|
||||
marginHorizontal: 20,
|
||||
activeHeader: {
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
},
|
||||
activeHeaderLeft: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
flex: 1,
|
||||
},
|
||||
emptyState: {
|
||||
alignItems: "center",
|
||||
paddingVertical: 40,
|
||||
paddingHorizontal: 20,
|
||||
},
|
||||
historyList: {
|
||||
gap: 12,
|
||||
},
|
||||
historyItem: {
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
borderWidth: 1,
|
||||
borderColor: "rgba(59, 130, 246, 0.1)",
|
||||
},
|
||||
historyLeft: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
gap: 12,
|
||||
},
|
||||
historyIconContainer: {
|
||||
marginRight: 4,
|
||||
},
|
||||
historyIcon: {
|
||||
width: 32,
|
||||
height: 32,
|
||||
borderRadius: 16,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
},
|
||||
dateText: {
|
||||
fontSize: theme.typography.fontSize.base,
|
||||
fontWeight: theme.typography.fontWeight.semibold,
|
||||
color: theme.colors.gray900,
|
||||
},
|
||||
typeText: {
|
||||
fontSize: theme.typography.fontSize.xs,
|
||||
color: theme.colors.gray600,
|
||||
marginTop: 2,
|
||||
},
|
||||
timeContainer: {
|
||||
alignItems: "flex-end",
|
||||
},
|
||||
historyTime: {
|
||||
fontSize: theme.typography.fontSize.sm,
|
||||
color: theme.colors.gray700,
|
||||
flex: 1,
|
||||
},
|
||||
});
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React, { useState, useCallback, useRef } from "react";
|
||||
import React, { useState, useCallback } from "react";
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
@ -6,27 +6,31 @@ import {
|
||||
ScrollView,
|
||||
RefreshControl,
|
||||
TouchableOpacity,
|
||||
Animated,
|
||||
Alert,
|
||||
} from "react-native";
|
||||
import { Ionicons } from "@expo/vector-icons";
|
||||
import { LinearGradient } from "expo-linear-gradient";
|
||||
import { theme } from "../../styles/theme";
|
||||
import { useUser } from "@clerk/clerk-expo";
|
||||
import { useFocusEffect } from "expo-router";
|
||||
import * as SecureStore from "expo-secure-store";
|
||||
import { useTheme } from "../../contexts/ThemeContext";
|
||||
import { MinimalCard } from "../../components/MinimalCard";
|
||||
import { SectionHeader } from "../../components/SectionHeader";
|
||||
import { MinimalButton } from "../../components/MinimalButton";
|
||||
import { Badge } from "../../components/Badge";
|
||||
import { ProgressBar } from "../../components/ProgressBar";
|
||||
import { GoalProgressCard } from "../../components/GoalProgressCard";
|
||||
import { GoalCreationModal } from "../../components/GoalCreationModal";
|
||||
import { WeeklyProgressChart } from "../../components/WeeklyProgressChart";
|
||||
import { GoalTypeBreakdownChart } from "../../components/GoalTypeBreakdownChart";
|
||||
import { useUser } from "@clerk/clerk-expo";
|
||||
import type { FitnessGoal, CreateGoalData } from "../../services/fitnessGoals";
|
||||
import { useStatistics } from "../../contexts/StatisticsContext";
|
||||
import { useFitnessGoals } from "../../contexts/FitnessGoalsContext";
|
||||
import { useRecommendations } from "../../contexts/RecommendationsContext";
|
||||
import { useFocusEffect } from "expo-router";
|
||||
import * as SecureStore from "expo-secure-store";
|
||||
import log from "../../utils/logger";
|
||||
|
||||
export default function GoalsScreen() {
|
||||
const { user } = useUser();
|
||||
const { colors, typography } = useTheme();
|
||||
const {
|
||||
statistics,
|
||||
refetchStatistics,
|
||||
@ -45,10 +49,8 @@ export default function GoalsScreen() {
|
||||
const [refreshing, setRefreshing] = useState(false);
|
||||
const [isModalVisible, setIsModalVisible] = useState(false);
|
||||
const [showAnalytics, setShowAnalytics] = useState(false);
|
||||
const fabScale = useRef(new Animated.Value(1)).current;
|
||||
|
||||
const loadData = useCallback(async () => {
|
||||
// Load goals and statistics (both cached)
|
||||
await refetchGoals();
|
||||
await refetchStatistics();
|
||||
}, [refetchGoals, refetchStatistics]);
|
||||
@ -64,7 +66,6 @@ export default function GoalsScreen() {
|
||||
style: "destructive",
|
||||
onPress: async () => {
|
||||
try {
|
||||
// Clear all possible Clerk token keys
|
||||
const keysToDelete = [
|
||||
"__clerk_client_jwt",
|
||||
"__clerk_db_jwt",
|
||||
@ -82,7 +83,6 @@ export default function GoalsScreen() {
|
||||
}
|
||||
}
|
||||
|
||||
// Clear all caches
|
||||
clearStatsCache();
|
||||
clearGoalsCache();
|
||||
clearRecommendationsCache();
|
||||
@ -128,183 +128,310 @@ export default function GoalsScreen() {
|
||||
|
||||
const activeGoals = goals?.filter((g) => g.status === "active") || [];
|
||||
const completedGoals = goals?.filter((g) => g.status === "completed") || [];
|
||||
const avgProgress =
|
||||
activeGoals.length > 0
|
||||
? Math.round(
|
||||
activeGoals.reduce((sum, g) => sum + (g.progress || 0), 0) /
|
||||
activeGoals.length,
|
||||
)
|
||||
: 0;
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<View style={[styles.container, { backgroundColor: colors.background }]}>
|
||||
<ScrollView
|
||||
contentContainerStyle={styles.scrollContent}
|
||||
refreshControl={
|
||||
<RefreshControl
|
||||
refreshing={refreshing}
|
||||
onRefresh={onRefresh}
|
||||
tintColor={theme.colors.primary}
|
||||
tintColor={colors.primary}
|
||||
/>
|
||||
}
|
||||
>
|
||||
<LinearGradient colors={theme.gradients.primary} style={styles.header}>
|
||||
<View style={styles.headerContent}>
|
||||
<View>
|
||||
<Text style={styles.headerTitle}>Fitness Goals</Text>
|
||||
<Text style={styles.headerSubtitle}>
|
||||
Track your fitness journey progress
|
||||
</Text>
|
||||
</View>
|
||||
<TouchableOpacity
|
||||
onPress={clearClerkCache}
|
||||
style={styles.debugButton}
|
||||
{/* Header */}
|
||||
<View style={styles.header}>
|
||||
<View style={{ flex: 1 }}>
|
||||
<Text
|
||||
style={[
|
||||
typography.h1,
|
||||
{ color: colors.textPrimary, fontSize: 32 },
|
||||
]}
|
||||
>
|
||||
<Ionicons name="refresh-circle-outline" size={24} color="#fff" />
|
||||
</TouchableOpacity>
|
||||
Goals
|
||||
</Text>
|
||||
<Text
|
||||
style={[
|
||||
typography.body,
|
||||
{ color: colors.textSecondary, marginTop: 8 },
|
||||
]}
|
||||
>
|
||||
{activeGoals.length === 0
|
||||
? "Ready to crush some goals?"
|
||||
: activeGoals.length === 1
|
||||
? "You're on a mission! Keep it up!"
|
||||
: `${activeGoals.length} goals in progress. Let's go!`}
|
||||
</Text>
|
||||
</View>
|
||||
</LinearGradient>
|
||||
<TouchableOpacity
|
||||
onPress={clearClerkCache}
|
||||
style={styles.debugButton}
|
||||
>
|
||||
<Ionicons
|
||||
name="refresh-circle-outline"
|
||||
size={24}
|
||||
color={colors.textTertiary}
|
||||
/>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
{/* Stats Summary */}
|
||||
{goals && goals.length > 0 && (
|
||||
<View style={styles.statsContainer}>
|
||||
<View style={styles.statCard}>
|
||||
<Text style={styles.statValue}>{activeGoals.length}</Text>
|
||||
<Text style={styles.statLabel}>Active</Text>
|
||||
</View>
|
||||
<View style={styles.statCard}>
|
||||
<Text style={styles.statValue}>{completedGoals.length}</Text>
|
||||
<Text style={styles.statLabel}>Completed</Text>
|
||||
</View>
|
||||
<View style={styles.statCard}>
|
||||
<Text style={styles.statValue}>
|
||||
{activeGoals.length > 0
|
||||
? Math.round(
|
||||
activeGoals.reduce(
|
||||
(sum, g) => sum + (g.progress || 0),
|
||||
0,
|
||||
) / activeGoals.length,
|
||||
)
|
||||
: 0}
|
||||
%
|
||||
</Text>
|
||||
<Text style={styles.statLabel}>Avg Progress</Text>
|
||||
<View style={styles.section}>
|
||||
<View style={styles.statsRow}>
|
||||
<MinimalCard
|
||||
variant="elevated"
|
||||
style={[styles.statCard, { backgroundColor: colors.primary }]}
|
||||
>
|
||||
<Text
|
||||
style={[
|
||||
typography.statLarge,
|
||||
{ color: colors.white, fontSize: 36 },
|
||||
]}
|
||||
>
|
||||
{activeGoals.length}
|
||||
</Text>
|
||||
<Text
|
||||
style={[
|
||||
typography.label,
|
||||
{ color: "rgba(255,255,255,0.8)", marginTop: 4 },
|
||||
]}
|
||||
>
|
||||
ACTIVE
|
||||
</Text>
|
||||
</MinimalCard>
|
||||
|
||||
<MinimalCard
|
||||
variant="elevated"
|
||||
style={[styles.statCard, { backgroundColor: colors.success }]}
|
||||
>
|
||||
<Text
|
||||
style={[
|
||||
typography.statLarge,
|
||||
{ color: colors.white, fontSize: 36 },
|
||||
]}
|
||||
>
|
||||
{completedGoals.length}
|
||||
</Text>
|
||||
<Text
|
||||
style={[
|
||||
typography.label,
|
||||
{ color: "rgba(255,255,255,0.8)", marginTop: 4 },
|
||||
]}
|
||||
>
|
||||
COMPLETED
|
||||
</Text>
|
||||
</MinimalCard>
|
||||
|
||||
<MinimalCard
|
||||
variant="elevated"
|
||||
style={[styles.statCard, { backgroundColor: colors.accent }]}
|
||||
>
|
||||
<Text
|
||||
style={[
|
||||
typography.statLarge,
|
||||
{ color: colors.white, fontSize: 36 },
|
||||
]}
|
||||
>
|
||||
{avgProgress}%
|
||||
</Text>
|
||||
<Text
|
||||
style={[
|
||||
typography.label,
|
||||
{ color: "rgba(255,255,255,0.8)", marginTop: 4 },
|
||||
]}
|
||||
>
|
||||
PROGRESS
|
||||
</Text>
|
||||
</MinimalCard>
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* Analytics Section */}
|
||||
{statistics && (
|
||||
<View style={styles.analyticsSection}>
|
||||
<TouchableOpacity
|
||||
style={styles.analyticsHeader}
|
||||
onPress={() => setShowAnalytics(!showAnalytics)}
|
||||
>
|
||||
<View style={styles.analyticsHeaderLeft}>
|
||||
<Ionicons
|
||||
name="bar-chart-outline"
|
||||
size={20}
|
||||
color={theme.colors.primary}
|
||||
/>
|
||||
<Text style={styles.analyticsTitle}>Progress Analytics</Text>
|
||||
</View>
|
||||
<Ionicons
|
||||
name={showAnalytics ? "chevron-up" : "chevron-down"}
|
||||
size={20}
|
||||
color={theme.colors.gray400}
|
||||
/>
|
||||
</TouchableOpacity>
|
||||
{statistics &&
|
||||
(statistics.weeklyTrend.length > 0 ||
|
||||
statistics.goals.goalsByType.length > 0) && (
|
||||
<View style={styles.section}>
|
||||
<TouchableOpacity
|
||||
onPress={() => setShowAnalytics(!showAnalytics)}
|
||||
activeOpacity={0.85}
|
||||
>
|
||||
<MinimalCard variant="elevated" style={styles.analyticsCard}>
|
||||
<View style={styles.analyticsHeader}>
|
||||
<View style={styles.analyticsHeaderLeft}>
|
||||
<View
|
||||
style={[
|
||||
styles.analyticsIcon,
|
||||
{ backgroundColor: `${colors.primary}15` },
|
||||
]}
|
||||
>
|
||||
<Ionicons
|
||||
name="bar-chart"
|
||||
size={24}
|
||||
color={colors.primary}
|
||||
/>
|
||||
</View>
|
||||
<View>
|
||||
<Text
|
||||
style={[typography.h3, { color: colors.textPrimary }]}
|
||||
>
|
||||
Progress Analytics
|
||||
</Text>
|
||||
<Text
|
||||
style={[
|
||||
typography.caption,
|
||||
{ color: colors.textTertiary, marginTop: 2 },
|
||||
]}
|
||||
>
|
||||
{showAnalytics ? "Tap to collapse" : "Tap to expand"}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
<View
|
||||
style={[
|
||||
styles.analyticsToggle,
|
||||
{ backgroundColor: colors.surfaceElevated },
|
||||
]}
|
||||
>
|
||||
<Ionicons
|
||||
name={showAnalytics ? "chevron-up" : "chevron-down"}
|
||||
size={20}
|
||||
color={colors.textSecondary}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{showAnalytics && (
|
||||
<View style={styles.analyticsContent}>
|
||||
{statistics.weeklyTrend.length > 0 && (
|
||||
<WeeklyProgressChart
|
||||
weeklyData={statistics.weeklyTrend}
|
||||
title="8-Week Trend"
|
||||
/>
|
||||
)}
|
||||
{statistics.goals.goalsByType.length > 0 && (
|
||||
<GoalTypeBreakdownChart
|
||||
data={statistics.goals.goalsByType}
|
||||
title="Goals by Type"
|
||||
/>
|
||||
)}
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
)}
|
||||
{showAnalytics && (
|
||||
<View style={styles.analyticsContent}>
|
||||
{statistics.weeklyTrend.length > 0 && (
|
||||
<View style={styles.chartSection}>
|
||||
<Text
|
||||
style={[
|
||||
typography.h4,
|
||||
{ color: colors.textPrimary, marginBottom: 16 },
|
||||
]}
|
||||
>
|
||||
Weekly Trend
|
||||
</Text>
|
||||
<WeeklyProgressChart
|
||||
weeklyData={statistics.weeklyTrend}
|
||||
/>
|
||||
</View>
|
||||
)}
|
||||
{statistics.goals.goalsByType.length > 0 && (
|
||||
<View style={styles.chartSection}>
|
||||
<Text
|
||||
style={[
|
||||
typography.h4,
|
||||
{ color: colors.textPrimary, marginBottom: 16 },
|
||||
]}
|
||||
>
|
||||
Goals by Type
|
||||
</Text>
|
||||
<GoalTypeBreakdownChart
|
||||
data={statistics.goals.goalsByType}
|
||||
/>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
)}
|
||||
</MinimalCard>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* Active Goals */}
|
||||
<View style={styles.section}>
|
||||
<Text style={styles.sectionTitle}>
|
||||
Active Goals ({activeGoals.length})
|
||||
</Text>
|
||||
<SectionHeader
|
||||
title={`Active Goals (${activeGoals.length})`}
|
||||
subtitle="Keep pushing forward!"
|
||||
actionLabel="+ Add New"
|
||||
onActionPress={() => setIsModalVisible(true)}
|
||||
/>
|
||||
{activeGoals.length === 0 ? (
|
||||
<View style={styles.emptyState}>
|
||||
<Ionicons name="flag-outline" size={48} color="#d1d5db" />
|
||||
<Text style={styles.emptyText}>No active goals yet</Text>
|
||||
<Text style={styles.emptySubtext}>
|
||||
Tap the + button to create your first goal
|
||||
</Text>
|
||||
</View>
|
||||
<MinimalCard variant="default">
|
||||
<View style={styles.emptyState}>
|
||||
<Text style={{ fontSize: 64 }}>🎯</Text>
|
||||
<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 set your first goal! 💪
|
||||
</Text>
|
||||
</View>
|
||||
</MinimalCard>
|
||||
) : (
|
||||
activeGoals.map((goal) => (
|
||||
<GoalProgressCard
|
||||
key={goal.id}
|
||||
goal={goal}
|
||||
onComplete={() => handleCompleteGoal(goal)}
|
||||
onDelete={() => handleDeleteGoal(goal.id)}
|
||||
/>
|
||||
))
|
||||
<View style={styles.goalsList}>
|
||||
{activeGoals.map((goal) => (
|
||||
<GoalProgressCard
|
||||
key={goal.id}
|
||||
goal={goal}
|
||||
onComplete={() => handleCompleteGoal(goal)}
|
||||
onDelete={() => handleDeleteGoal(goal.id)}
|
||||
/>
|
||||
))}
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
|
||||
{/* Completed Goals */}
|
||||
{completedGoals.length > 0 && (
|
||||
<View style={styles.section}>
|
||||
<Text style={styles.sectionTitle}>
|
||||
Completed Goals ({completedGoals.length})
|
||||
</Text>
|
||||
{completedGoals.map((goal) => (
|
||||
<GoalProgressCard
|
||||
key={goal.id}
|
||||
goal={goal}
|
||||
onDelete={() => handleDeleteGoal(goal.id)}
|
||||
/>
|
||||
))}
|
||||
<SectionHeader
|
||||
title={`Completed (${completedGoals.length})`}
|
||||
subtitle="Great work!"
|
||||
/>
|
||||
<View style={styles.goalsList}>
|
||||
{completedGoals.map((goal) => (
|
||||
<GoalProgressCard
|
||||
key={goal.id}
|
||||
goal={goal}
|
||||
onDelete={() => handleDeleteGoal(goal.id)}
|
||||
/>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
|
||||
<View style={styles.footer} />
|
||||
</ScrollView>
|
||||
|
||||
{/* Floating Action Button */}
|
||||
<Animated.View
|
||||
style={[styles.fabContainer, { transform: [{ scale: fabScale }] }]}
|
||||
>
|
||||
{/* Floating Action Button - Minimal Style */}
|
||||
<View style={styles.fabContainer}>
|
||||
<TouchableOpacity
|
||||
onPress={() => setIsModalVisible(true)}
|
||||
onPressIn={() => {
|
||||
Animated.spring(fabScale, {
|
||||
toValue: 0.9,
|
||||
friction: 8,
|
||||
tension: 100,
|
||||
useNativeDriver: true,
|
||||
}).start();
|
||||
}}
|
||||
onPressOut={() => {
|
||||
Animated.spring(fabScale, {
|
||||
toValue: 1,
|
||||
friction: 8,
|
||||
tension: 100,
|
||||
useNativeDriver: true,
|
||||
}).start();
|
||||
}}
|
||||
activeOpacity={0.9}
|
||||
activeOpacity={0.8}
|
||||
style={[
|
||||
styles.fab,
|
||||
{
|
||||
backgroundColor: colors.primary,
|
||||
shadowColor: colors.primary,
|
||||
},
|
||||
]}
|
||||
>
|
||||
<LinearGradient
|
||||
colors={theme.gradients.primary}
|
||||
start={{ x: 0, y: 0 }}
|
||||
end={{ x: 1, y: 1 }}
|
||||
style={styles.fab}
|
||||
>
|
||||
<Ionicons name="add" size={28} color="#fff" />
|
||||
</LinearGradient>
|
||||
<Ionicons name="add" size={28} color={colors.white} />
|
||||
</TouchableOpacity>
|
||||
</Animated.View>
|
||||
</View>
|
||||
|
||||
{/* Create Goal Modal */}
|
||||
<GoalCreationModal
|
||||
@ -319,129 +446,96 @@ export default function GoalsScreen() {
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: theme.colors.background,
|
||||
},
|
||||
scrollContent: {
|
||||
paddingBottom: 20,
|
||||
},
|
||||
header: {
|
||||
padding: 24,
|
||||
paddingTop: 60,
|
||||
paddingBottom: 24,
|
||||
marginBottom: 10,
|
||||
borderBottomLeftRadius: theme.borderRadius.xl,
|
||||
borderBottomRightRadius: theme.borderRadius.xl,
|
||||
},
|
||||
headerContent: {
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
alignItems: "flex-start",
|
||||
paddingHorizontal: 20,
|
||||
paddingTop: 60,
|
||||
paddingBottom: 20,
|
||||
},
|
||||
debugButton: {
|
||||
padding: 8,
|
||||
},
|
||||
headerTitle: {
|
||||
fontSize: theme.typography.fontSize["3xl"],
|
||||
fontWeight: theme.typography.fontWeight.bold,
|
||||
color: theme.colors.white,
|
||||
section: {
|
||||
paddingHorizontal: 20,
|
||||
marginBottom: 24,
|
||||
},
|
||||
headerSubtitle: {
|
||||
fontSize: theme.typography.fontSize.base,
|
||||
color: "rgba(255, 255, 255, 0.9)",
|
||||
marginTop: 4,
|
||||
},
|
||||
statsContainer: {
|
||||
statsRow: {
|
||||
flexDirection: "row",
|
||||
padding: 16,
|
||||
gap: 12,
|
||||
},
|
||||
statCard: {
|
||||
flex: 1,
|
||||
backgroundColor: theme.colors.white,
|
||||
padding: 16,
|
||||
borderRadius: theme.borderRadius.xl,
|
||||
alignItems: "center",
|
||||
...theme.shadows.medium,
|
||||
borderWidth: 1,
|
||||
borderColor: "rgba(59, 130, 246, 0.1)",
|
||||
paddingVertical: 20,
|
||||
paddingHorizontal: 12,
|
||||
borderRadius: 20,
|
||||
},
|
||||
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,
|
||||
analyticsCard: {
|
||||
padding: 20,
|
||||
},
|
||||
analyticsHeader: {
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
backgroundColor: theme.colors.white,
|
||||
padding: 16,
|
||||
borderRadius: theme.borderRadius.xl,
|
||||
marginBottom: 12,
|
||||
...theme.shadows.subtle,
|
||||
},
|
||||
analyticsHeaderLeft: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
gap: 8,
|
||||
},
|
||||
analyticsTitle: {
|
||||
fontSize: theme.typography.fontSize.base,
|
||||
fontWeight: theme.typography.fontWeight.semibold,
|
||||
color: theme.colors.gray700,
|
||||
analyticsIcon: {
|
||||
width: 48,
|
||||
height: 48,
|
||||
borderRadius: 14,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
marginRight: 14,
|
||||
},
|
||||
analyticsToggle: {
|
||||
width: 36,
|
||||
height: 36,
|
||||
borderRadius: 10,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
},
|
||||
analyticsContent: {
|
||||
paddingTop: 4,
|
||||
paddingTop: 24,
|
||||
marginTop: 20,
|
||||
borderTopWidth: 1,
|
||||
borderTopColor: "rgba(0,0,0,0.05)",
|
||||
},
|
||||
section: {
|
||||
padding: 20,
|
||||
paddingTop: 10,
|
||||
chartSection: {
|
||||
marginBottom: 20,
|
||||
},
|
||||
sectionTitle: {
|
||||
fontSize: 18,
|
||||
fontWeight: "600",
|
||||
color: "#374151",
|
||||
marginBottom: 12,
|
||||
goalsList: {
|
||||
gap: 16,
|
||||
},
|
||||
emptyState: {
|
||||
alignItems: "center",
|
||||
paddingVertical: 40,
|
||||
},
|
||||
emptyText: {
|
||||
fontSize: 16,
|
||||
fontWeight: "500",
|
||||
color: "#6b7280",
|
||||
marginTop: 12,
|
||||
},
|
||||
emptySubtext: {
|
||||
fontSize: 14,
|
||||
color: "#9ca3af",
|
||||
marginTop: 4,
|
||||
},
|
||||
footer: {
|
||||
height: 100,
|
||||
},
|
||||
fabContainer: {
|
||||
position: "absolute",
|
||||
right: 20,
|
||||
bottom: 110, // Adjusted for tab bar height
|
||||
bottom: 90,
|
||||
},
|
||||
fab: {
|
||||
width: 64,
|
||||
height: 64,
|
||||
borderRadius: 32,
|
||||
borderRadius: 22,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
...theme.shadows.glow,
|
||||
shadowOffset: { width: 0, height: 6 },
|
||||
shadowOpacity: 0.35,
|
||||
shadowRadius: 12,
|
||||
elevation: 8,
|
||||
},
|
||||
});
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -1,4 +1,4 @@
|
||||
import React, { useState, useCallback, useRef } from "react";
|
||||
import React, { useState, useCallback } from "react";
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
@ -9,11 +9,15 @@ import {
|
||||
ActivityIndicator,
|
||||
Alert,
|
||||
} from "react-native";
|
||||
import { LinearGradient } from "expo-linear-gradient";
|
||||
import { Ionicons } from "@expo/vector-icons";
|
||||
import { useUser } from "@clerk/clerk-expo";
|
||||
import { useFocusEffect } from "expo-router";
|
||||
import { theme } from "../../styles/theme";
|
||||
import { useTheme } from "../../contexts/ThemeContext";
|
||||
import { MinimalCard } from "../../components/MinimalCard";
|
||||
import { SectionHeader } from "../../components/SectionHeader";
|
||||
import { MinimalButton } from "../../components/MinimalButton";
|
||||
import { Badge } from "../../components/Badge";
|
||||
import { IconContainer } from "../../components/IconContainer";
|
||||
import { useRecommendations } from "../../contexts/RecommendationsContext";
|
||||
import { useNotifications } from "../../contexts/NotificationsContext";
|
||||
import { NotificationsModal } from "../../components/NotificationsModal";
|
||||
@ -22,6 +26,7 @@ import log from "../../utils/logger";
|
||||
|
||||
export default function RecommendationsScreen() {
|
||||
const { user } = useUser();
|
||||
const { colors, typography } = useTheme();
|
||||
const {
|
||||
recommendations: allRecommendations,
|
||||
loading,
|
||||
@ -43,7 +48,7 @@ export default function RecommendationsScreen() {
|
||||
setNotificationsVisible(false);
|
||||
};
|
||||
|
||||
// Filter to show only approved recommendations for regular users
|
||||
// Filter to show only approved recommendations
|
||||
const recommendations = allRecommendations.filter(
|
||||
(rec) => rec.status === "approved",
|
||||
);
|
||||
@ -101,14 +106,14 @@ export default function RecommendationsScreen() {
|
||||
|
||||
if (loading && recommendations.length === 0) {
|
||||
return (
|
||||
<View style={styles.centered}>
|
||||
<ActivityIndicator size="large" color={theme.colors.primary} />
|
||||
<View style={[styles.centered, { backgroundColor: colors.background }]}>
|
||||
<ActivityIndicator size="large" color={colors.primary} />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<View style={[styles.container, { backgroundColor: colors.background }]}>
|
||||
<NotificationsModal
|
||||
visible={notificationsVisible}
|
||||
onClose={handleCloseNotifications}
|
||||
@ -119,98 +124,125 @@ export default function RecommendationsScreen() {
|
||||
<RefreshControl
|
||||
refreshing={refreshing}
|
||||
onRefresh={onRefresh}
|
||||
tintColor={theme.colors.primary}
|
||||
tintColor={colors.primary}
|
||||
/>
|
||||
}
|
||||
>
|
||||
{/* Header */}
|
||||
<LinearGradient
|
||||
colors={theme.gradients.primary}
|
||||
start={{ x: 0, y: 0 }}
|
||||
end={{ x: 1, y: 1 }}
|
||||
style={styles.header}
|
||||
>
|
||||
<View>
|
||||
<Text style={styles.headerTitle}>AI Recommendations</Text>
|
||||
<Text style={styles.headerSubtitle}>
|
||||
Personalized fitness & nutrition plans
|
||||
<View style={styles.header}>
|
||||
<View style={{ flex: 1 }}>
|
||||
<Text
|
||||
style={[
|
||||
typography.h1,
|
||||
{ color: colors.textPrimary, fontSize: 32 },
|
||||
]}
|
||||
>
|
||||
Recommendations
|
||||
</Text>
|
||||
<Text
|
||||
style={[
|
||||
typography.body,
|
||||
{ color: colors.textSecondary, marginTop: 8 },
|
||||
]}
|
||||
>
|
||||
{recommendations.length === 0
|
||||
? "Let's create your perfect plan!"
|
||||
: `${recommendations.length} plan${recommendations.length !== 1 ? "s" : ""} ready for you!`}
|
||||
</Text>
|
||||
</View>
|
||||
<TouchableOpacity
|
||||
style={styles.iconContainer}
|
||||
style={styles.notificationButton}
|
||||
onPress={handleOpenNotifications}
|
||||
activeOpacity={0.7}
|
||||
>
|
||||
<Ionicons name="sparkles" size={32} color="#fff" />
|
||||
{unreadCount > 0 && (
|
||||
<View style={styles.badge}>
|
||||
<Text style={styles.badgeText}>{unreadCount}</Text>
|
||||
</View>
|
||||
)}
|
||||
<IconContainer
|
||||
variant="colored"
|
||||
backgroundColor={colors.accent}
|
||||
size="lg"
|
||||
>
|
||||
<Ionicons name="sparkles" size={24} color={colors.white} />
|
||||
{unreadCount > 0 && (
|
||||
<View
|
||||
style={[
|
||||
styles.notificationBadge,
|
||||
{ backgroundColor: colors.danger },
|
||||
]}
|
||||
>
|
||||
<Text style={styles.notificationBadgeText}>
|
||||
{unreadCount}
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
</IconContainer>
|
||||
</TouchableOpacity>
|
||||
</LinearGradient>
|
||||
</View>
|
||||
|
||||
{/* Generate Button */}
|
||||
<View style={styles.actionContainer}>
|
||||
<TouchableOpacity
|
||||
<View style={styles.section}>
|
||||
<MinimalButton
|
||||
title="Generate New Plan"
|
||||
onPress={handleGenerateRecommendation}
|
||||
variant="primary"
|
||||
size="lg"
|
||||
fullWidth
|
||||
loading={generating}
|
||||
disabled={generating}
|
||||
activeOpacity={0.8}
|
||||
>
|
||||
<LinearGradient
|
||||
colors={theme.gradients.purple}
|
||||
start={{ x: 0, y: 0 }}
|
||||
end={{ x: 1, y: 0 }}
|
||||
style={[styles.generateButton, theme.shadows.medium]}
|
||||
>
|
||||
{generating ? (
|
||||
<ActivityIndicator size="small" color="#fff" />
|
||||
) : (
|
||||
<>
|
||||
<Ionicons
|
||||
name="bulb"
|
||||
size={24}
|
||||
color="#fff"
|
||||
style={{ marginRight: 12 }}
|
||||
/>
|
||||
<Text style={styles.generateButtonText}>
|
||||
Generate New Plan
|
||||
</Text>
|
||||
</>
|
||||
)}
|
||||
</LinearGradient>
|
||||
</TouchableOpacity>
|
||||
textStyle={{ fontSize: 16 }}
|
||||
/>
|
||||
</View>
|
||||
|
||||
{/* Recommendations List */}
|
||||
<View style={styles.section}>
|
||||
<SectionHeader
|
||||
title="💡 Your Plans"
|
||||
subtitle={
|
||||
recommendations.length > 0
|
||||
? `${recommendations.length} active plan${recommendations.length !== 1 ? "s" : ""}`
|
||||
: undefined
|
||||
}
|
||||
/>
|
||||
|
||||
{recommendations.length === 0 ? (
|
||||
<View style={styles.emptyState}>
|
||||
<LinearGradient
|
||||
colors={["rgba(139, 92, 246, 0.1)", "rgba(139, 92, 246, 0.05)"]}
|
||||
style={styles.emptyCard}
|
||||
>
|
||||
<Ionicons
|
||||
name="sparkles-outline"
|
||||
size={64}
|
||||
color={theme.colors.purple}
|
||||
/>
|
||||
<Text style={styles.emptyTitle}>No Recommendations Yet</Text>
|
||||
<Text style={styles.emptyText}>
|
||||
Tap "Generate New Plan" to get personalized AI-powered fitness
|
||||
and nutrition recommendations based on your profile and goals.
|
||||
<MinimalCard variant="default" style={{ borderRadius: 20 }}>
|
||||
<View style={styles.emptyState}>
|
||||
<Text style={{ fontSize: 64 }}>🤖</Text>
|
||||
<Text
|
||||
style={[
|
||||
typography.bodyEmphasis,
|
||||
{ color: colors.textPrimary, marginTop: 16 },
|
||||
]}
|
||||
>
|
||||
No Recommendations Yet
|
||||
</Text>
|
||||
</LinearGradient>
|
||||
</View>
|
||||
<Text
|
||||
style={[
|
||||
typography.body,
|
||||
{
|
||||
color: colors.textSecondary,
|
||||
marginTop: 8,
|
||||
textAlign: "center",
|
||||
},
|
||||
]}
|
||||
>
|
||||
Tap "Generate New Plan" to get personalized AI-powered fitness
|
||||
and nutrition recommendations! 🎯
|
||||
</Text>
|
||||
</View>
|
||||
</MinimalCard>
|
||||
) : (
|
||||
recommendations.map((recommendation) => (
|
||||
<RecommendationCard
|
||||
key={recommendation.id}
|
||||
recommendation={recommendation}
|
||||
/>
|
||||
))
|
||||
<View style={styles.recommendationsList}>
|
||||
{recommendations.map((recommendation) => (
|
||||
<RecommendationCard
|
||||
key={recommendation.id}
|
||||
recommendation={recommendation}
|
||||
/>
|
||||
))}
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
|
||||
{/* Bottom Spacer */}
|
||||
<View style={{ height: 100 }} />
|
||||
</ScrollView>
|
||||
</View>
|
||||
);
|
||||
@ -221,250 +253,195 @@ interface RecommendationCardProps {
|
||||
}
|
||||
|
||||
function RecommendationCard({ recommendation }: RecommendationCardProps) {
|
||||
const { colors, typography } = useTheme();
|
||||
const [expanded, setExpanded] = useState(false);
|
||||
|
||||
return (
|
||||
<View style={styles.card}>
|
||||
<LinearGradient
|
||||
colors={["rgba(255, 255, 255, 1)", "rgba(249, 250, 251, 1)"]}
|
||||
style={[styles.cardContent, theme.shadows.medium]}
|
||||
<MinimalCard variant="bordered" style={{ borderRadius: 20 }}>
|
||||
{/* Header */}
|
||||
<TouchableOpacity
|
||||
onPress={() => setExpanded(!expanded)}
|
||||
activeOpacity={0.7}
|
||||
style={styles.cardHeader}
|
||||
>
|
||||
{/* Header */}
|
||||
<View style={styles.cardHeader}>
|
||||
<View style={styles.cardHeaderLeft}>
|
||||
<LinearGradient
|
||||
colors={theme.gradients.success}
|
||||
style={styles.cardIcon}
|
||||
>
|
||||
<Ionicons name="checkmark-circle" size={20} color="#fff" />
|
||||
</LinearGradient>
|
||||
<View>
|
||||
<Text style={styles.cardTitle}>AI Fitness Plan</Text>
|
||||
<Text style={styles.cardDate}>
|
||||
{new Date(recommendation.generatedAt).toLocaleDateString()}
|
||||
<View style={styles.cardHeaderLeft}>
|
||||
<IconContainer
|
||||
variant="colored"
|
||||
backgroundColor={`${colors.success}20`}
|
||||
>
|
||||
<Ionicons
|
||||
name="checkmark-circle"
|
||||
size={20}
|
||||
color={colors.success}
|
||||
/>
|
||||
</IconContainer>
|
||||
<View style={{ marginLeft: 12 }}>
|
||||
<Text style={[typography.h3, { color: colors.textPrimary }]}>
|
||||
✨ AI Fitness Plan
|
||||
</Text>
|
||||
<Text style={[typography.caption, { color: colors.textTertiary }]}>
|
||||
{new Date(recommendation.generatedAt).toLocaleDateString()}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
<Ionicons
|
||||
name={expanded ? "chevron-up" : "chevron-down"}
|
||||
size={24}
|
||||
color={colors.textTertiary}
|
||||
/>
|
||||
</TouchableOpacity>
|
||||
|
||||
{/* Summary */}
|
||||
<View style={styles.cardSummary}>
|
||||
<Text
|
||||
style={[typography.body, { color: colors.textSecondary }]}
|
||||
numberOfLines={expanded ? undefined : 3}
|
||||
>
|
||||
{recommendation.recommendationText}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
{/* Expanded Content */}
|
||||
{expanded && (
|
||||
<View style={styles.expandedContent}>
|
||||
{/* Activity Plan */}
|
||||
<View
|
||||
style={[
|
||||
styles.planSection,
|
||||
{ backgroundColor: colors.surfaceElevated },
|
||||
]}
|
||||
>
|
||||
<View style={styles.planHeader}>
|
||||
<Ionicons name="barbell" size={20} color={colors.primary} />
|
||||
<Text
|
||||
style={[
|
||||
typography.h3,
|
||||
{ color: colors.textPrimary, marginLeft: 8 },
|
||||
]}
|
||||
>
|
||||
💪 Activity Plan
|
||||
</Text>
|
||||
</View>
|
||||
<Text
|
||||
style={[
|
||||
typography.body,
|
||||
{ color: colors.textSecondary, marginTop: 8 },
|
||||
]}
|
||||
>
|
||||
{recommendation.activityPlan}
|
||||
</Text>
|
||||
</View>
|
||||
<TouchableOpacity onPress={() => setExpanded(!expanded)}>
|
||||
<Ionicons
|
||||
name={expanded ? "chevron-up" : "chevron-down"}
|
||||
size={24}
|
||||
color={theme.colors.gray400}
|
||||
/>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
{/* Summary */}
|
||||
<View style={styles.cardSummary}>
|
||||
<Text
|
||||
style={styles.summaryText}
|
||||
numberOfLines={expanded ? undefined : 3}
|
||||
{/* Diet Plan */}
|
||||
<View
|
||||
style={[
|
||||
styles.planSection,
|
||||
{ backgroundColor: colors.surfaceElevated },
|
||||
]}
|
||||
>
|
||||
{recommendation.recommendationText}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
{/* Expanded Content */}
|
||||
{expanded && (
|
||||
<View style={styles.expandedContent}>
|
||||
{/* Activity Plan */}
|
||||
<View style={styles.planSection}>
|
||||
<View style={styles.planHeader}>
|
||||
<Ionicons
|
||||
name="barbell"
|
||||
size={20}
|
||||
color={theme.colors.primary}
|
||||
/>
|
||||
<Text style={styles.planTitle}>Activity Plan</Text>
|
||||
</View>
|
||||
<Text style={styles.planText}>{recommendation.activityPlan}</Text>
|
||||
</View>
|
||||
|
||||
{/* Diet Plan */}
|
||||
<View style={styles.planSection}>
|
||||
<View style={styles.planHeader}>
|
||||
<Ionicons
|
||||
name="restaurant"
|
||||
size={20}
|
||||
color={theme.colors.success}
|
||||
/>
|
||||
<Text style={styles.planTitle}>Diet Plan</Text>
|
||||
</View>
|
||||
<Text style={styles.planText}>{recommendation.dietPlan}</Text>
|
||||
<View style={styles.planHeader}>
|
||||
<Ionicons name="restaurant" size={20} color={colors.success} />
|
||||
<Text
|
||||
style={[
|
||||
typography.h3,
|
||||
{ color: colors.textPrimary, marginLeft: 8 },
|
||||
]}
|
||||
>
|
||||
🍽️ Diet Plan
|
||||
</Text>
|
||||
</View>
|
||||
<Text
|
||||
style={[
|
||||
typography.body,
|
||||
{ color: colors.textSecondary, marginTop: 8 },
|
||||
]}
|
||||
>
|
||||
{recommendation.dietPlan}
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
</LinearGradient>
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
</MinimalCard>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: theme.colors.background,
|
||||
},
|
||||
centered: {
|
||||
flex: 1,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
backgroundColor: theme.colors.background,
|
||||
},
|
||||
scrollContent: {
|
||||
paddingBottom: 100,
|
||||
paddingBottom: 20,
|
||||
},
|
||||
header: {
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
padding: 24,
|
||||
alignItems: "flex-start",
|
||||
paddingHorizontal: 24,
|
||||
paddingTop: 60,
|
||||
paddingBottom: 24,
|
||||
marginBottom: 20,
|
||||
borderBottomLeftRadius: theme.borderRadius.xl,
|
||||
borderBottomRightRadius: theme.borderRadius.xl,
|
||||
},
|
||||
headerTitle: {
|
||||
fontSize: theme.typography.fontSize["3xl"],
|
||||
fontWeight: theme.typography.fontWeight.bold,
|
||||
color: theme.colors.white,
|
||||
notificationButton: {
|
||||
position: "relative",
|
||||
},
|
||||
headerSubtitle: {
|
||||
fontSize: theme.typography.fontSize.base,
|
||||
color: "rgba(255, 255, 255, 0.9)",
|
||||
marginTop: 4,
|
||||
},
|
||||
iconContainer: {
|
||||
backgroundColor: "rgba(255, 255, 255, 0.2)",
|
||||
width: 64,
|
||||
height: 64,
|
||||
borderRadius: 32,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
},
|
||||
badge: {
|
||||
notificationBadge: {
|
||||
position: "absolute",
|
||||
top: -4,
|
||||
right: -4,
|
||||
backgroundColor: theme.colors.danger,
|
||||
borderRadius: 10,
|
||||
width: 20,
|
||||
height: 20,
|
||||
minWidth: 18,
|
||||
height: 18,
|
||||
borderRadius: 9,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
paddingHorizontal: 4,
|
||||
},
|
||||
badgeText: {
|
||||
notificationBadgeText: {
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
fontWeight: "bold",
|
||||
},
|
||||
actionContainer: {
|
||||
paddingHorizontal: 20,
|
||||
marginBottom: 20,
|
||||
},
|
||||
generateButton: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
paddingVertical: 16,
|
||||
paddingHorizontal: 24,
|
||||
borderRadius: theme.borderRadius.xl,
|
||||
},
|
||||
generateButtonText: {
|
||||
fontSize: theme.typography.fontSize.lg,
|
||||
fontWeight: theme.typography.fontWeight.bold,
|
||||
color: theme.colors.white,
|
||||
fontSize: 11,
|
||||
fontWeight: "700",
|
||||
},
|
||||
section: {
|
||||
paddingHorizontal: 20,
|
||||
paddingHorizontal: 24,
|
||||
marginBottom: 24,
|
||||
},
|
||||
emptyState: {
|
||||
paddingVertical: 40,
|
||||
},
|
||||
emptyCard: {
|
||||
borderRadius: theme.borderRadius["2xl"],
|
||||
padding: 32,
|
||||
alignItems: "center",
|
||||
paddingVertical: 40,
|
||||
paddingHorizontal: 20,
|
||||
},
|
||||
emptyTitle: {
|
||||
fontSize: theme.typography.fontSize.xl,
|
||||
fontWeight: theme.typography.fontWeight.bold,
|
||||
color: theme.colors.gray700,
|
||||
marginTop: 16,
|
||||
marginBottom: 8,
|
||||
},
|
||||
emptyText: {
|
||||
fontSize: theme.typography.fontSize.base,
|
||||
color: theme.colors.gray500,
|
||||
textAlign: "center",
|
||||
lineHeight: 24,
|
||||
},
|
||||
card: {
|
||||
marginBottom: 16,
|
||||
},
|
||||
cardContent: {
|
||||
borderRadius: theme.borderRadius["2xl"],
|
||||
padding: 20,
|
||||
recommendationsList: {
|
||||
gap: 12,
|
||||
},
|
||||
cardHeader: {
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
marginBottom: 16,
|
||||
},
|
||||
cardHeaderLeft: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
gap: 12,
|
||||
},
|
||||
cardIcon: {
|
||||
width: 40,
|
||||
height: 40,
|
||||
borderRadius: 20,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
},
|
||||
cardTitle: {
|
||||
fontSize: theme.typography.fontSize.lg,
|
||||
fontWeight: theme.typography.fontWeight.bold,
|
||||
color: theme.colors.gray800,
|
||||
},
|
||||
cardDate: {
|
||||
fontSize: theme.typography.fontSize.sm,
|
||||
color: theme.colors.gray500,
|
||||
marginTop: 2,
|
||||
flex: 1,
|
||||
},
|
||||
cardSummary: {
|
||||
marginBottom: 12,
|
||||
},
|
||||
summaryText: {
|
||||
fontSize: theme.typography.fontSize.base,
|
||||
color: theme.colors.gray700,
|
||||
lineHeight: 24,
|
||||
marginTop: 12,
|
||||
paddingTop: 12,
|
||||
borderTopWidth: 1,
|
||||
borderTopColor: "rgba(0, 0, 0, 0.05)",
|
||||
},
|
||||
expandedContent: {
|
||||
marginTop: 12,
|
||||
paddingTop: 16,
|
||||
borderTopWidth: 1,
|
||||
borderTopColor: theme.colors.gray200,
|
||||
marginTop: 16,
|
||||
gap: 12,
|
||||
},
|
||||
planSection: {
|
||||
marginBottom: 16,
|
||||
padding: 16,
|
||||
borderRadius: 16,
|
||||
},
|
||||
planHeader: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
gap: 8,
|
||||
marginBottom: 8,
|
||||
},
|
||||
planTitle: {
|
||||
fontSize: theme.typography.fontSize.base,
|
||||
fontWeight: theme.typography.fontWeight.bold,
|
||||
color: theme.colors.gray800,
|
||||
},
|
||||
planText: {
|
||||
fontSize: theme.typography.fontSize.base,
|
||||
color: theme.colors.gray600,
|
||||
lineHeight: 22,
|
||||
},
|
||||
});
|
||||
|
||||
@ -3,7 +3,9 @@ import { Stack } from "expo-router";
|
||||
import * as SecureStore from "expo-secure-store";
|
||||
import { View, Text } from "react-native";
|
||||
import { useEffect, useState } from "react";
|
||||
import { SafeAreaProvider } from "react-native-safe-area-context";
|
||||
import { validateEnv } from "../utils/env";
|
||||
import { ThemeProvider } from "../contexts/ThemeContext";
|
||||
import { StatisticsProvider } from "../contexts/StatisticsContext";
|
||||
import { FitnessGoalsProvider } from "../contexts/FitnessGoalsContext";
|
||||
import { RecommendationsProvider } from "../contexts/RecommendationsContext";
|
||||
@ -169,18 +171,22 @@ export default function RootLayout() {
|
||||
});
|
||||
|
||||
return (
|
||||
<ClerkProvider tokenCache={tokenCache} publishableKey={publishableKey}>
|
||||
<ClerkLoaded>
|
||||
<NotificationsProvider>
|
||||
<StatisticsProvider>
|
||||
<FitnessGoalsProvider>
|
||||
<RecommendationsProvider>
|
||||
<AppContent />
|
||||
</RecommendationsProvider>
|
||||
</FitnessGoalsProvider>
|
||||
</StatisticsProvider>
|
||||
</NotificationsProvider>
|
||||
</ClerkLoaded>
|
||||
</ClerkProvider>
|
||||
<SafeAreaProvider>
|
||||
<ClerkProvider tokenCache={tokenCache} publishableKey={publishableKey}>
|
||||
<ClerkLoaded>
|
||||
<ThemeProvider>
|
||||
<NotificationsProvider>
|
||||
<StatisticsProvider>
|
||||
<FitnessGoalsProvider>
|
||||
<RecommendationsProvider>
|
||||
<AppContent />
|
||||
</RecommendationsProvider>
|
||||
</FitnessGoalsProvider>
|
||||
</StatisticsProvider>
|
||||
</NotificationsProvider>
|
||||
</ThemeProvider>
|
||||
</ClerkLoaded>
|
||||
</ClerkProvider>
|
||||
</SafeAreaProvider>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import React, { useState, useEffect } from "react";
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
@ -9,13 +9,13 @@ import {
|
||||
Alert,
|
||||
TextInput,
|
||||
Platform,
|
||||
} from 'react-native';
|
||||
import { useRouter, Stack } from 'expo-router';
|
||||
import { useAuth } from '@clerk/clerk-expo';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { LinearGradient } from 'expo-linear-gradient';
|
||||
import { theme } from '../styles/theme';
|
||||
import { API_BASE_URL } from '../config/api';
|
||||
} from "react-native";
|
||||
import { useRouter, Stack } from "expo-router";
|
||||
import { useAuth } from "@clerk/clerk-expo";
|
||||
import { Ionicons } from "@expo/vector-icons";
|
||||
import { LinearGradient } from "expo-linear-gradient";
|
||||
import { theme } from "../styles/theme";
|
||||
import { API_BASE_URL } from "../config/api";
|
||||
|
||||
interface FitnessProfileData {
|
||||
height?: number;
|
||||
@ -30,25 +30,71 @@ interface FitnessProfileData {
|
||||
}
|
||||
|
||||
const GENDER_OPTIONS = [
|
||||
{ label: 'Male', value: 'male', icon: 'male' },
|
||||
{ label: 'Female', value: 'female', icon: 'female' },
|
||||
{ label: 'Other', value: 'other', icon: 'transgender' },
|
||||
{ label: "Male", value: "male", icon: "male" },
|
||||
{ label: "Female", value: "female", icon: "female" },
|
||||
{ label: "Other", value: "other", icon: "transgender" },
|
||||
{
|
||||
label: "Prefer not to say",
|
||||
value: "prefer_not_to_say",
|
||||
icon: "help-circle",
|
||||
},
|
||||
];
|
||||
|
||||
const FITNESS_GOAL_OPTIONS = [
|
||||
{ label: 'Weight Loss', value: 'weight_loss', icon: 'trending-down', color: theme.colors.danger },
|
||||
{ label: 'Muscle Gain', value: 'muscle_gain', icon: 'barbell', color: theme.colors.primary },
|
||||
{ label: 'Endurance', value: 'endurance', icon: 'bicycle', color: theme.colors.success },
|
||||
{ label: 'Flexibility', value: 'flexibility', icon: 'body', color: theme.colors.purple },
|
||||
{ label: 'General Fitness', value: 'general_fitness', icon: 'fitness', color: theme.colors.warning },
|
||||
{
|
||||
label: "Weight Loss",
|
||||
value: "weight_loss",
|
||||
icon: "trending-down",
|
||||
color: theme.colors.danger,
|
||||
},
|
||||
{
|
||||
label: "Muscle Gain",
|
||||
value: "muscle_gain",
|
||||
icon: "barbell",
|
||||
color: theme.colors.primary,
|
||||
},
|
||||
{
|
||||
label: "Endurance",
|
||||
value: "endurance",
|
||||
icon: "bicycle",
|
||||
color: theme.colors.success,
|
||||
},
|
||||
{
|
||||
label: "Flexibility",
|
||||
value: "flexibility",
|
||||
icon: "body",
|
||||
color: theme.colors.purple,
|
||||
},
|
||||
{
|
||||
label: "General Fitness",
|
||||
value: "general_fitness",
|
||||
icon: "fitness",
|
||||
color: theme.colors.warning,
|
||||
},
|
||||
];
|
||||
|
||||
const ACTIVITY_LEVEL_OPTIONS = [
|
||||
{ label: 'Sedentary', value: 'sedentary', description: 'Little to no exercise' },
|
||||
{ label: 'Light', value: 'light', description: '1-3 days/week' },
|
||||
{ label: 'Moderate', value: 'moderate', description: '3-5 days/week' },
|
||||
{ label: 'Active', value: 'active', description: '6-7 days/week' },
|
||||
{ label: 'Very Active', value: 'very_active', description: 'Intense daily training' },
|
||||
{
|
||||
label: "Sedentary",
|
||||
value: "sedentary",
|
||||
description: "Little to no exercise",
|
||||
},
|
||||
{
|
||||
label: "Lightly Active",
|
||||
value: "lightly_active",
|
||||
description: "1-3 days/week",
|
||||
},
|
||||
{
|
||||
label: "Moderately Active",
|
||||
value: "moderately_active",
|
||||
description: "3-5 days/week",
|
||||
},
|
||||
{ label: "Very Active", value: "very_active", description: "6-7 days/week" },
|
||||
{
|
||||
label: "Extremely Active",
|
||||
value: "extremely_active",
|
||||
description: "Intense daily training",
|
||||
},
|
||||
];
|
||||
|
||||
export default function FitnessProfileScreen() {
|
||||
@ -66,34 +112,43 @@ export default function FitnessProfileScreen() {
|
||||
try {
|
||||
setFetchingProfile(true);
|
||||
const token = await getToken();
|
||||
const response = await fetch(`${API_BASE_URL}/api/profile/fitness?userId=${userId}`, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
const response = await fetch(
|
||||
`${API_BASE_URL}/api/profile/fitness?userId=${userId}`,
|
||||
{
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
},
|
||||
});
|
||||
);
|
||||
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
if (data.profile) {
|
||||
// Normalize old activity level values to new schema
|
||||
let activityLevel = data.profile.activityLevel || "";
|
||||
if (activityLevel === "light") activityLevel = "lightly_active";
|
||||
if (activityLevel === "moderate") activityLevel = "moderately_active";
|
||||
if (activityLevel === "active") activityLevel = "very_active";
|
||||
|
||||
setProfileData({
|
||||
height: data.profile.height,
|
||||
weight: data.profile.weight,
|
||||
age: data.profile.age,
|
||||
gender: data.profile.gender || '',
|
||||
gender: data.profile.gender || "",
|
||||
fitnessGoal: Array.isArray(data.profile.fitnessGoals)
|
||||
? data.profile.fitnessGoals[0]
|
||||
: (typeof data.profile.fitnessGoals === 'string'
|
||||
: typeof data.profile.fitnessGoals === "string"
|
||||
? JSON.parse(data.profile.fitnessGoals)[0]
|
||||
: ''),
|
||||
activityLevel: data.profile.activityLevel || '',
|
||||
medicalConditions: data.profile.medicalConditions || '',
|
||||
allergies: data.profile.allergies || '',
|
||||
injuries: data.profile.injuries || '',
|
||||
: "",
|
||||
activityLevel: activityLevel,
|
||||
medicalConditions: data.profile.medicalConditions || "",
|
||||
allergies: data.profile.allergies || "",
|
||||
injuries: data.profile.injuries || "",
|
||||
});
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching profile:', error);
|
||||
console.error("Error fetching profile:", error);
|
||||
} finally {
|
||||
setFetchingProfile(false);
|
||||
}
|
||||
@ -105,39 +160,40 @@ export default function FitnessProfileScreen() {
|
||||
const token = await getToken();
|
||||
|
||||
// Prepare data with userId and convert fitnessGoal to fitnessGoals array
|
||||
// Convert empty strings to undefined for optional enum fields
|
||||
const dataToSave = {
|
||||
userId: userId,
|
||||
height: profileData.height,
|
||||
weight: profileData.weight,
|
||||
age: profileData.age,
|
||||
gender: profileData.gender,
|
||||
gender: profileData.gender || undefined,
|
||||
fitnessGoals: profileData.fitnessGoal ? [profileData.fitnessGoal] : [],
|
||||
activityLevel: profileData.activityLevel,
|
||||
activityLevel: profileData.activityLevel || undefined,
|
||||
medicalConditions: profileData.medicalConditions,
|
||||
allergies: profileData.allergies,
|
||||
injuries: profileData.injuries,
|
||||
};
|
||||
|
||||
const response = await fetch(`${API_BASE_URL}/api/profile/fitness`, {
|
||||
method: 'POST',
|
||||
method: "POST",
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
"Content-Type": "application/json",
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
body: JSON.stringify(dataToSave),
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
Alert.alert('Success', 'Fitness profile saved successfully!', [
|
||||
{ text: 'OK', onPress: () => router.back() },
|
||||
Alert.alert("Success", "Fitness profile saved successfully!", [
|
||||
{ text: "OK", onPress: () => router.back() },
|
||||
]);
|
||||
} else {
|
||||
const error = await response.json();
|
||||
Alert.alert('Error', error.error || 'Failed to save profile');
|
||||
Alert.alert("Error", error.error || "Failed to save profile");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error saving profile:', error);
|
||||
Alert.alert('Error', 'Failed to save fitness profile');
|
||||
console.error("Error saving profile:", error);
|
||||
Alert.alert("Error", "Failed to save fitness profile");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
@ -161,7 +217,10 @@ export default function FitnessProfileScreen() {
|
||||
<View style={styles.container}>
|
||||
{/* Header */}
|
||||
<LinearGradient colors={theme.gradients.primary} style={styles.header}>
|
||||
<TouchableOpacity style={styles.backButton} onPress={() => router.back()}>
|
||||
<TouchableOpacity
|
||||
style={styles.backButton}
|
||||
onPress={() => router.back()}
|
||||
>
|
||||
<Ionicons name="arrow-back" size={24} color="#fff" />
|
||||
</TouchableOpacity>
|
||||
<Text style={styles.headerTitle}>Fitness Profile</Text>
|
||||
@ -181,12 +240,19 @@ export default function FitnessProfileScreen() {
|
||||
<View style={styles.inputGroup}>
|
||||
<Text style={styles.label}>Height (cm)</Text>
|
||||
<View style={styles.inputContainer}>
|
||||
<Ionicons name="resize-outline" size={20} color={theme.colors.gray400} />
|
||||
<Ionicons
|
||||
name="resize-outline"
|
||||
size={20}
|
||||
color={theme.colors.gray400}
|
||||
/>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
value={profileData.height?.toString() || ''}
|
||||
value={profileData.height?.toString() || ""}
|
||||
onChangeText={(text) =>
|
||||
updateField('height', text ? parseFloat(text) : undefined)
|
||||
updateField(
|
||||
"height",
|
||||
text ? parseFloat(text) : undefined,
|
||||
)
|
||||
}
|
||||
keyboardType="decimal-pad"
|
||||
placeholder="175"
|
||||
@ -197,12 +263,19 @@ export default function FitnessProfileScreen() {
|
||||
<View style={styles.inputGroup}>
|
||||
<Text style={styles.label}>Weight (kg)</Text>
|
||||
<View style={styles.inputContainer}>
|
||||
<Ionicons name="scale-outline" size={20} color={theme.colors.gray400} />
|
||||
<Ionicons
|
||||
name="scale-outline"
|
||||
size={20}
|
||||
color={theme.colors.gray400}
|
||||
/>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
value={profileData.weight?.toString() || ''}
|
||||
value={profileData.weight?.toString() || ""}
|
||||
onChangeText={(text) =>
|
||||
updateField('weight', text ? parseFloat(text) : undefined)
|
||||
updateField(
|
||||
"weight",
|
||||
text ? parseFloat(text) : undefined,
|
||||
)
|
||||
}
|
||||
keyboardType="decimal-pad"
|
||||
placeholder="70"
|
||||
@ -214,12 +287,16 @@ export default function FitnessProfileScreen() {
|
||||
<View style={styles.inputGroup}>
|
||||
<Text style={styles.label}>Age</Text>
|
||||
<View style={styles.inputContainer}>
|
||||
<Ionicons name="calendar-outline" size={20} color={theme.colors.gray400} />
|
||||
<Ionicons
|
||||
name="calendar-outline"
|
||||
size={20}
|
||||
color={theme.colors.gray400}
|
||||
/>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
value={profileData.age?.toString() || ''}
|
||||
value={profileData.age?.toString() || ""}
|
||||
onChangeText={(text) =>
|
||||
updateField('age', text ? parseInt(text, 10) : undefined)
|
||||
updateField("age", text ? parseInt(text, 10) : undefined)
|
||||
}
|
||||
keyboardType="number-pad"
|
||||
placeholder="25"
|
||||
@ -239,9 +316,10 @@ export default function FitnessProfileScreen() {
|
||||
key={option.value}
|
||||
style={[
|
||||
styles.optionCard,
|
||||
profileData.gender === option.value && styles.optionCardActive,
|
||||
profileData.gender === option.value &&
|
||||
styles.optionCardActive,
|
||||
]}
|
||||
onPress={() => updateField('gender', option.value)}
|
||||
onPress={() => updateField("gender", option.value)}
|
||||
>
|
||||
<Ionicons
|
||||
name={option.icon as any}
|
||||
@ -255,7 +333,8 @@ export default function FitnessProfileScreen() {
|
||||
<Text
|
||||
style={[
|
||||
styles.optionLabel,
|
||||
profileData.gender === option.value && styles.optionLabelActive,
|
||||
profileData.gender === option.value &&
|
||||
styles.optionLabelActive,
|
||||
]}
|
||||
>
|
||||
{option.label}
|
||||
@ -273,17 +352,32 @@ export default function FitnessProfileScreen() {
|
||||
<React.Fragment key={option.value}>
|
||||
<TouchableOpacity
|
||||
style={styles.listItem}
|
||||
onPress={() => updateField('fitnessGoal', option.value)}
|
||||
onPress={() => updateField("fitnessGoal", option.value)}
|
||||
>
|
||||
<View style={[styles.iconCircle, { backgroundColor: `${option.color}20` }]}>
|
||||
<Ionicons name={option.icon as any} size={20} color={option.color} />
|
||||
<View
|
||||
style={[
|
||||
styles.iconCircle,
|
||||
{ backgroundColor: `${option.color}20` },
|
||||
]}
|
||||
>
|
||||
<Ionicons
|
||||
name={option.icon as any}
|
||||
size={20}
|
||||
color={option.color}
|
||||
/>
|
||||
</View>
|
||||
<Text style={styles.listItemText}>{option.label}</Text>
|
||||
{profileData.fitnessGoal === option.value && (
|
||||
<Ionicons name="checkmark-circle" size={24} color={theme.colors.primary} />
|
||||
<Ionicons
|
||||
name="checkmark-circle"
|
||||
size={24}
|
||||
color={theme.colors.primary}
|
||||
/>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
{index < FITNESS_GOAL_OPTIONS.length - 1 && <View style={styles.divider} />}
|
||||
{index < FITNESS_GOAL_OPTIONS.length - 1 && (
|
||||
<View style={styles.divider} />
|
||||
)}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</View>
|
||||
@ -297,17 +391,25 @@ export default function FitnessProfileScreen() {
|
||||
<React.Fragment key={option.value}>
|
||||
<TouchableOpacity
|
||||
style={styles.listItem}
|
||||
onPress={() => updateField('activityLevel', option.value)}
|
||||
onPress={() => updateField("activityLevel", option.value)}
|
||||
>
|
||||
<View style={{ flex: 1 }}>
|
||||
<Text style={styles.listItemText}>{option.label}</Text>
|
||||
<Text style={styles.listItemDescription}>{option.description}</Text>
|
||||
<Text style={styles.listItemDescription}>
|
||||
{option.description}
|
||||
</Text>
|
||||
</View>
|
||||
{profileData.activityLevel === option.value && (
|
||||
<Ionicons name="checkmark-circle" size={24} color={theme.colors.primary} />
|
||||
<Ionicons
|
||||
name="checkmark-circle"
|
||||
size={24}
|
||||
color={theme.colors.primary}
|
||||
/>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
{index < ACTIVITY_LEVEL_OPTIONS.length - 1 && <View style={styles.divider} />}
|
||||
{index < ACTIVITY_LEVEL_OPTIONS.length - 1 && (
|
||||
<View style={styles.divider} />
|
||||
)}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</View>
|
||||
@ -315,14 +417,18 @@ export default function FitnessProfileScreen() {
|
||||
|
||||
{/* Health Information */}
|
||||
<View style={styles.section}>
|
||||
<Text style={styles.sectionTitle}>Health Information (Optional)</Text>
|
||||
<Text style={styles.sectionTitle}>
|
||||
Health Information (Optional)
|
||||
</Text>
|
||||
<View style={styles.card}>
|
||||
<View style={styles.inputGroup}>
|
||||
<Text style={styles.label}>Medical Conditions</Text>
|
||||
<TextInput
|
||||
style={[styles.textArea]}
|
||||
value={profileData.medicalConditions || ''}
|
||||
onChangeText={(text) => updateField('medicalConditions', text)}
|
||||
value={profileData.medicalConditions || ""}
|
||||
onChangeText={(text) =>
|
||||
updateField("medicalConditions", text)
|
||||
}
|
||||
placeholder="e.g., Asthma, diabetes..."
|
||||
placeholderTextColor={theme.colors.gray400}
|
||||
multiline
|
||||
@ -334,8 +440,8 @@ export default function FitnessProfileScreen() {
|
||||
<Text style={styles.label}>Allergies</Text>
|
||||
<TextInput
|
||||
style={[styles.textArea]}
|
||||
value={profileData.allergies || ''}
|
||||
onChangeText={(text) => updateField('allergies', text)}
|
||||
value={profileData.allergies || ""}
|
||||
onChangeText={(text) => updateField("allergies", text)}
|
||||
placeholder="e.g., Peanuts, latex..."
|
||||
placeholderTextColor={theme.colors.gray400}
|
||||
multiline
|
||||
@ -347,8 +453,8 @@ export default function FitnessProfileScreen() {
|
||||
<Text style={styles.label}>Injuries</Text>
|
||||
<TextInput
|
||||
style={[styles.textArea]}
|
||||
value={profileData.injuries || ''}
|
||||
onChangeText={(text) => updateField('injuries', text)}
|
||||
value={profileData.injuries || ""}
|
||||
onChangeText={(text) => updateField("injuries", text)}
|
||||
placeholder="e.g., Previous knee injury..."
|
||||
placeholderTextColor={theme.colors.gray400}
|
||||
multiline
|
||||
@ -367,7 +473,10 @@ export default function FitnessProfileScreen() {
|
||||
onPress={handleSave}
|
||||
disabled={loading}
|
||||
>
|
||||
<LinearGradient colors={theme.gradients.primary} style={styles.saveButtonGradient}>
|
||||
<LinearGradient
|
||||
colors={theme.gradients.primary}
|
||||
style={styles.saveButtonGradient}
|
||||
>
|
||||
{loading ? (
|
||||
<ActivityIndicator color="#fff" />
|
||||
) : (
|
||||
@ -391,15 +500,15 @@ const styles = StyleSheet.create({
|
||||
},
|
||||
loadingContainer: {
|
||||
flex: 1,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
backgroundColor: theme.colors.background,
|
||||
},
|
||||
header: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
paddingTop: Platform.OS === 'ios' ? 60 : 40,
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
paddingTop: Platform.OS === "ios" ? 60 : 40,
|
||||
paddingBottom: 20,
|
||||
paddingHorizontal: 20,
|
||||
},
|
||||
@ -407,14 +516,14 @@ const styles = StyleSheet.create({
|
||||
width: 40,
|
||||
height: 40,
|
||||
borderRadius: 20,
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.2)',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
backgroundColor: "rgba(255, 255, 255, 0.2)",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
},
|
||||
headerTitle: {
|
||||
fontSize: theme.typography.fontSize['2xl'],
|
||||
fontSize: theme.typography.fontSize["2xl"],
|
||||
fontWeight: theme.typography.fontWeight.bold,
|
||||
color: '#fff',
|
||||
color: "#fff",
|
||||
},
|
||||
scrollView: {
|
||||
flex: 1,
|
||||
@ -433,7 +542,7 @@ const styles = StyleSheet.create({
|
||||
marginBottom: 12,
|
||||
},
|
||||
card: {
|
||||
backgroundColor: '#fff',
|
||||
backgroundColor: "#fff",
|
||||
borderRadius: theme.borderRadius.xl,
|
||||
padding: 16,
|
||||
...theme.shadows.subtle,
|
||||
@ -441,7 +550,7 @@ const styles = StyleSheet.create({
|
||||
borderColor: theme.colors.gray100,
|
||||
},
|
||||
row: {
|
||||
flexDirection: 'row',
|
||||
flexDirection: "row",
|
||||
gap: 12,
|
||||
marginBottom: 16,
|
||||
},
|
||||
@ -456,8 +565,8 @@ const styles = StyleSheet.create({
|
||||
marginBottom: 8,
|
||||
},
|
||||
inputContainer: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
backgroundColor: theme.colors.gray50,
|
||||
borderRadius: theme.borderRadius.lg,
|
||||
borderWidth: 1,
|
||||
@ -482,15 +591,15 @@ const styles = StyleSheet.create({
|
||||
minHeight: 80,
|
||||
},
|
||||
optionsRow: {
|
||||
flexDirection: 'row',
|
||||
flexDirection: "row",
|
||||
gap: 12,
|
||||
},
|
||||
optionCard: {
|
||||
flex: 1,
|
||||
backgroundColor: '#fff',
|
||||
backgroundColor: "#fff",
|
||||
borderRadius: theme.borderRadius.lg,
|
||||
padding: 16,
|
||||
alignItems: 'center',
|
||||
alignItems: "center",
|
||||
gap: 8,
|
||||
borderWidth: 2,
|
||||
borderColor: theme.colors.gray200,
|
||||
@ -510,8 +619,8 @@ const styles = StyleSheet.create({
|
||||
fontWeight: theme.typography.fontWeight.bold,
|
||||
},
|
||||
listItem: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
paddingVertical: 12,
|
||||
gap: 12,
|
||||
},
|
||||
@ -519,8 +628,8 @@ const styles = StyleSheet.create({
|
||||
width: 40,
|
||||
height: 40,
|
||||
borderRadius: 20,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
},
|
||||
listItemText: {
|
||||
flex: 1,
|
||||
@ -538,25 +647,25 @@ const styles = StyleSheet.create({
|
||||
backgroundColor: theme.colors.gray100,
|
||||
},
|
||||
footer: {
|
||||
position: 'absolute',
|
||||
position: "absolute",
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
padding: 20,
|
||||
paddingBottom: Platform.OS === 'ios' ? 40 : 20,
|
||||
backgroundColor: '#fff',
|
||||
paddingBottom: Platform.OS === "ios" ? 40 : 20,
|
||||
backgroundColor: "#fff",
|
||||
borderTopWidth: 1,
|
||||
borderTopColor: theme.colors.gray100,
|
||||
...theme.shadows.medium,
|
||||
},
|
||||
saveButton: {
|
||||
borderRadius: theme.borderRadius.lg,
|
||||
overflow: 'hidden',
|
||||
overflow: "hidden",
|
||||
},
|
||||
saveButtonGradient: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
paddingVertical: 16,
|
||||
gap: 8,
|
||||
},
|
||||
@ -566,6 +675,6 @@ const styles = StyleSheet.create({
|
||||
saveButtonText: {
|
||||
fontSize: theme.typography.fontSize.base,
|
||||
fontWeight: theme.typography.fontWeight.bold,
|
||||
color: '#fff',
|
||||
color: "#fff",
|
||||
},
|
||||
});
|
||||
|
||||
128
apps/mobile/src/components/ActivityRing.tsx
Normal file
128
apps/mobile/src/components/ActivityRing.tsx
Normal file
@ -0,0 +1,128 @@
|
||||
import React, { useEffect, useRef } from "react";
|
||||
import { View, Animated, StyleSheet, Text } from "react-native";
|
||||
import Svg, { Circle } from "react-native-svg";
|
||||
import { useTheme } from "../contexts/ThemeContext";
|
||||
|
||||
const AnimatedCircle = Animated.createAnimatedComponent(Circle);
|
||||
|
||||
interface ActivityRingProps {
|
||||
size?: number;
|
||||
strokeWidth?: number;
|
||||
progress: number;
|
||||
current: number;
|
||||
goal: number;
|
||||
label: string;
|
||||
color: string;
|
||||
icon?: React.ReactNode;
|
||||
}
|
||||
|
||||
export function ActivityRing({
|
||||
size = 100,
|
||||
strokeWidth = 10,
|
||||
progress,
|
||||
current,
|
||||
goal,
|
||||
label,
|
||||
color,
|
||||
icon,
|
||||
}: ActivityRingProps) {
|
||||
const { colors, typography } = useTheme();
|
||||
const animatedValue = useRef(new Animated.Value(0)).current;
|
||||
const radius = (size - strokeWidth) / 2;
|
||||
const circumference = radius * 2 * Math.PI;
|
||||
|
||||
useEffect(() => {
|
||||
Animated.timing(animatedValue, {
|
||||
toValue: Math.min(progress, 100),
|
||||
duration: 1200,
|
||||
useNativeDriver: true,
|
||||
}).start();
|
||||
}, [progress]);
|
||||
|
||||
const strokeDashoffset = animatedValue.interpolate({
|
||||
inputRange: [0, 100],
|
||||
outputRange: [circumference, 0],
|
||||
});
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<View
|
||||
style={{
|
||||
width: size,
|
||||
height: size,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<Svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
|
||||
<Circle
|
||||
cx={size / 2}
|
||||
cy={size / 2}
|
||||
r={radius}
|
||||
stroke={colors.surfaceElevated}
|
||||
strokeWidth={strokeWidth}
|
||||
fill="transparent"
|
||||
/>
|
||||
<AnimatedCircle
|
||||
cx={size / 2}
|
||||
cy={size / 2}
|
||||
r={radius}
|
||||
stroke={color}
|
||||
strokeWidth={strokeWidth}
|
||||
fill="transparent"
|
||||
strokeDasharray={circumference}
|
||||
strokeDashoffset={strokeDashoffset}
|
||||
strokeLinecap="round"
|
||||
rotation="-90"
|
||||
origin={`${size / 2}, ${size / 2}`}
|
||||
/>
|
||||
</Svg>
|
||||
<View
|
||||
style={[
|
||||
StyleSheet.absoluteFillObject,
|
||||
{ justifyContent: "center", alignItems: "center" },
|
||||
]}
|
||||
>
|
||||
{icon ? (
|
||||
<View style={styles.iconContainer}>{icon}</View>
|
||||
) : (
|
||||
<Text
|
||||
style={[
|
||||
typography.statLarge,
|
||||
{ color: colors.textPrimary, fontSize: size * 0.28 },
|
||||
]}
|
||||
>
|
||||
{Math.round(current)}
|
||||
</Text>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
<Text
|
||||
style={[
|
||||
typography.label,
|
||||
{ color: colors.textTertiary, marginTop: 8, textAlign: "center" },
|
||||
]}
|
||||
>
|
||||
{label}
|
||||
</Text>
|
||||
<Text
|
||||
style={[
|
||||
typography.caption,
|
||||
{ color: colors.textSecondary, marginTop: 2 },
|
||||
]}
|
||||
>
|
||||
/ {goal.toLocaleString()}
|
||||
</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
alignItems: "center",
|
||||
},
|
||||
iconContainer: {
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
},
|
||||
});
|
||||
117
apps/mobile/src/components/Badge.tsx
Normal file
117
apps/mobile/src/components/Badge.tsx
Normal file
@ -0,0 +1,117 @@
|
||||
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" | "lg";
|
||||
|
||||
interface BadgeProps {
|
||||
label: string;
|
||||
variant?: BadgeVariant;
|
||||
size?: BadgeSize;
|
||||
style?: StyleProp<ViewStyle>;
|
||||
emoji?: string;
|
||||
}
|
||||
|
||||
export function Badge({
|
||||
label,
|
||||
variant = "neutral",
|
||||
size = "md",
|
||||
style,
|
||||
emoji,
|
||||
}: BadgeProps) {
|
||||
const { colors } = useTheme();
|
||||
|
||||
const sizeStyles = {
|
||||
sm: {
|
||||
paddingVertical: 6,
|
||||
paddingHorizontal: 12,
|
||||
fontSize: fontSize.xs,
|
||||
},
|
||||
md: {
|
||||
paddingVertical: 8,
|
||||
paddingHorizontal: 14,
|
||||
fontSize: fontSize.sm,
|
||||
},
|
||||
lg: {
|
||||
paddingVertical: 10,
|
||||
paddingHorizontal: 18,
|
||||
fontSize: fontSize.base,
|
||||
},
|
||||
};
|
||||
|
||||
const variantStyles: Record<
|
||||
BadgeVariant,
|
||||
{ backgroundColor: string; color: string }
|
||||
> = {
|
||||
neutral: {
|
||||
backgroundColor: colors.surfaceElevated,
|
||||
color: colors.textSecondary,
|
||||
},
|
||||
success: {
|
||||
backgroundColor: colors.success,
|
||||
color: colors.white,
|
||||
},
|
||||
warning: {
|
||||
backgroundColor: colors.warning,
|
||||
color: colors.black,
|
||||
},
|
||||
danger: {
|
||||
backgroundColor: colors.danger,
|
||||
color: colors.white,
|
||||
},
|
||||
info: {
|
||||
backgroundColor: colors.info,
|
||||
color: colors.white,
|
||||
},
|
||||
primary: {
|
||||
backgroundColor: colors.primary,
|
||||
color: colors.white,
|
||||
},
|
||||
};
|
||||
|
||||
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.bold,
|
||||
},
|
||||
]}
|
||||
>
|
||||
{emoji && `${emoji} `}
|
||||
{label}
|
||||
</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
badge: {
|
||||
borderRadius: 12,
|
||||
alignSelf: "flex-start",
|
||||
},
|
||||
label: {
|
||||
textAlign: "center",
|
||||
},
|
||||
});
|
||||
@ -1,143 +1,151 @@
|
||||
import React from 'react';
|
||||
import { View, StyleSheet, TouchableOpacity, Platform, Dimensions } from 'react-native';
|
||||
import { BottomTabBarProps } from '@react-navigation/bottom-tabs';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { LinearGradient } from 'expo-linear-gradient';
|
||||
import { theme } from '../styles/theme';
|
||||
import { Animated } from 'react-native';
|
||||
import React from "react";
|
||||
import { View, StyleSheet, TouchableOpacity, Text } from "react-native";
|
||||
import { BottomTabBarProps } from "@react-navigation/bottom-tabs";
|
||||
import { Ionicons } from "@expo/vector-icons";
|
||||
import { useSafeAreaInsets } from "react-native-safe-area-context";
|
||||
import { useTheme } from "../contexts/ThemeContext";
|
||||
|
||||
const { width } = Dimensions.get('window');
|
||||
export function CustomTabBar({
|
||||
state,
|
||||
descriptors,
|
||||
navigation,
|
||||
}: BottomTabBarProps) {
|
||||
const { colors } = useTheme();
|
||||
const insets = useSafeAreaInsets();
|
||||
|
||||
export function CustomTabBar({ state, descriptors, navigation }: BottomTabBarProps) {
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<LinearGradient
|
||||
colors={['rgba(255, 255, 255, 0.9)', 'rgba(255, 255, 255, 0.7)']}
|
||||
style={[styles.tabBar, theme.shadows.medium]}
|
||||
start={{ x: 0, y: 0 }}
|
||||
end={{ x: 0, y: 1 }}
|
||||
return (
|
||||
<View
|
||||
style={[
|
||||
styles.container,
|
||||
{
|
||||
backgroundColor: colors.surface,
|
||||
borderTopColor: colors.border,
|
||||
paddingBottom: insets.bottom,
|
||||
},
|
||||
]}
|
||||
>
|
||||
{state.routes.map((route, index) => {
|
||||
const { options } = descriptors[route.key];
|
||||
const isFocused = state.index === index;
|
||||
|
||||
const onPress = () => {
|
||||
const event = navigation.emit({
|
||||
type: "tabPress",
|
||||
target: route.key,
|
||||
canPreventDefault: true,
|
||||
});
|
||||
|
||||
if (!isFocused && !event.defaultPrevented) {
|
||||
navigation.navigate(route.name);
|
||||
}
|
||||
};
|
||||
|
||||
const getIconName = (
|
||||
routeName: string,
|
||||
focused: boolean,
|
||||
): keyof typeof Ionicons.glyphMap => {
|
||||
switch (routeName) {
|
||||
case "index":
|
||||
return focused ? "home" : "home-outline";
|
||||
case "goals":
|
||||
return focused ? "trophy" : "trophy-outline";
|
||||
case "attendance":
|
||||
return focused ? "calendar" : "calendar-outline";
|
||||
case "recommendations":
|
||||
return focused ? "sparkles" : "sparkles-outline";
|
||||
case "profile":
|
||||
return focused ? "person" : "person-outline";
|
||||
default:
|
||||
return "ellipse-outline";
|
||||
}
|
||||
};
|
||||
|
||||
const getLabel = (routeName: string) => {
|
||||
switch (routeName) {
|
||||
case "index":
|
||||
return "Home";
|
||||
case "goals":
|
||||
return "Goals";
|
||||
case "attendance":
|
||||
return "Attendance";
|
||||
case "recommendations":
|
||||
return "Plans";
|
||||
case "profile":
|
||||
return "Profile";
|
||||
default:
|
||||
return "";
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<TouchableOpacity
|
||||
key={index}
|
||||
accessibilityRole="button"
|
||||
accessibilityState={isFocused ? { selected: true } : {}}
|
||||
accessibilityLabel={options.tabBarAccessibilityLabel}
|
||||
testID={(options as any).tabBarTestID}
|
||||
onPress={onPress}
|
||||
style={styles.tabItem}
|
||||
activeOpacity={0.7}
|
||||
>
|
||||
<View style={styles.iconWrapper}>
|
||||
<Ionicons
|
||||
name={getIconName(route.name, isFocused)}
|
||||
size={26}
|
||||
color={isFocused ? colors.primary : colors.textTertiary}
|
||||
/>
|
||||
{isFocused && (
|
||||
<View
|
||||
style={[
|
||||
styles.indicator,
|
||||
{ backgroundColor: colors.primary },
|
||||
]}
|
||||
/>
|
||||
)}
|
||||
</View>
|
||||
<Text
|
||||
style={[
|
||||
styles.label,
|
||||
{
|
||||
color: isFocused ? colors.primary : colors.textTertiary,
|
||||
fontWeight: isFocused ? "700" : "500",
|
||||
},
|
||||
]}
|
||||
>
|
||||
{state.routes.map((route, index) => {
|
||||
const { options } = descriptors[route.key];
|
||||
const isFocused = state.index === index;
|
||||
|
||||
const onPress = () => {
|
||||
const event = navigation.emit({
|
||||
type: 'tabPress',
|
||||
target: route.key,
|
||||
canPreventDefault: true,
|
||||
});
|
||||
|
||||
if (!isFocused && !event.defaultPrevented) {
|
||||
navigation.navigate(route.name);
|
||||
}
|
||||
};
|
||||
|
||||
const getIconName = (routeName: string, focused: boolean): keyof typeof Ionicons.glyphMap => {
|
||||
switch (routeName) {
|
||||
case 'index':
|
||||
return focused ? 'home' : 'home-outline';
|
||||
case 'goals':
|
||||
return focused ? 'trophy' : 'trophy-outline';
|
||||
case 'attendance':
|
||||
return focused ? 'calendar' : 'calendar-outline';
|
||||
case 'recommendations':
|
||||
return focused ? 'sparkles' : 'sparkles-outline';
|
||||
case 'profile':
|
||||
return focused ? 'person' : 'person-outline';
|
||||
default:
|
||||
return 'ellipse-outline';
|
||||
}
|
||||
};
|
||||
|
||||
// Animation for scale
|
||||
const scaleValue = React.useRef(new Animated.Value(1)).current;
|
||||
|
||||
React.useEffect(() => {
|
||||
Animated.spring(scaleValue, {
|
||||
toValue: isFocused ? 1.2 : 1,
|
||||
useNativeDriver: true,
|
||||
friction: 8,
|
||||
}).start();
|
||||
}, [isFocused]);
|
||||
|
||||
return (
|
||||
<TouchableOpacity
|
||||
key={index}
|
||||
accessibilityRole="button"
|
||||
accessibilityState={isFocused ? { selected: true } : {}}
|
||||
accessibilityLabel={options.tabBarAccessibilityLabel}
|
||||
testID={(options as any).tabBarTestID}
|
||||
onPress={onPress}
|
||||
style={styles.tabItem}
|
||||
activeOpacity={0.7}
|
||||
>
|
||||
<Animated.View style={{ transform: [{ scale: scaleValue }] }}>
|
||||
{isFocused ? (
|
||||
<LinearGradient
|
||||
colors={theme.gradients.primary}
|
||||
style={styles.iconContainer}
|
||||
>
|
||||
<Ionicons
|
||||
name={getIconName(route.name, true)}
|
||||
size={20}
|
||||
color="#fff"
|
||||
/>
|
||||
</LinearGradient>
|
||||
) : (
|
||||
<Ionicons
|
||||
name={getIconName(route.name, false)}
|
||||
size={24}
|
||||
color={theme.colors.gray500}
|
||||
/>
|
||||
)}
|
||||
</Animated.View>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
})}
|
||||
</LinearGradient>
|
||||
</View>
|
||||
);
|
||||
{getLabel(route.name)}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
})}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
position: 'absolute',
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
alignItems: 'center',
|
||||
paddingBottom: Platform.OS === 'ios' ? 30 : 20,
|
||||
pointerEvents: 'box-none',
|
||||
},
|
||||
tabBar: {
|
||||
flexDirection: 'row',
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.8)',
|
||||
borderRadius: 35,
|
||||
height: 70,
|
||||
width: width - 40,
|
||||
justifyContent: 'space-around',
|
||||
alignItems: 'center',
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(255, 255, 255, 0.5)',
|
||||
paddingHorizontal: 10,
|
||||
},
|
||||
tabItem: {
|
||||
flex: 1,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
height: '100%',
|
||||
},
|
||||
iconContainer: {
|
||||
width: 40,
|
||||
height: 40,
|
||||
borderRadius: 20,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
shadowColor: theme.colors.primary,
|
||||
shadowOffset: { width: 0, height: 4 },
|
||||
shadowOpacity: 0.3,
|
||||
shadowRadius: 8,
|
||||
elevation: 4,
|
||||
},
|
||||
container: {
|
||||
flexDirection: "row",
|
||||
height: 70,
|
||||
borderTopWidth: 1,
|
||||
paddingTop: 8,
|
||||
},
|
||||
tabItem: {
|
||||
flex: 1,
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
height: "100%",
|
||||
},
|
||||
iconWrapper: {
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
},
|
||||
indicator: {
|
||||
width: 20,
|
||||
height: 4,
|
||||
borderRadius: 2,
|
||||
marginTop: 4,
|
||||
},
|
||||
label: {
|
||||
fontSize: 11,
|
||||
marginTop: 4,
|
||||
},
|
||||
});
|
||||
|
||||
@ -1,426 +1,526 @@
|
||||
import React, { useState } from 'react';
|
||||
import React, { useState } from "react";
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
StyleSheet,
|
||||
Modal,
|
||||
TextInput,
|
||||
TouchableOpacity,
|
||||
ScrollView,
|
||||
Platform,
|
||||
Alert,
|
||||
} from 'react-native';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import DateTimePicker from '@react-native-community/datetimepicker';
|
||||
import type { CreateGoalData } from '../services/fitnessGoals';
|
||||
View,
|
||||
Text,
|
||||
StyleSheet,
|
||||
Modal,
|
||||
TextInput,
|
||||
TouchableOpacity,
|
||||
ScrollView,
|
||||
Platform,
|
||||
Alert,
|
||||
} from "react-native";
|
||||
import { Ionicons } from "@expo/vector-icons";
|
||||
import DateTimePicker from "@react-native-community/datetimepicker";
|
||||
import type { CreateGoalData } from "../services/fitnessGoals";
|
||||
import { useTheme } from "../contexts/ThemeContext";
|
||||
import { MinimalButton } from "./MinimalButton";
|
||||
|
||||
interface GoalCreationModalProps {
|
||||
visible: boolean;
|
||||
onClose: () => void;
|
||||
onSubmit: (goalData: CreateGoalData) => Promise<void>;
|
||||
visible: boolean;
|
||||
onClose: () => void;
|
||||
onSubmit: (goalData: CreateGoalData) => Promise<void>;
|
||||
}
|
||||
|
||||
const GOAL_TYPES = [
|
||||
{ value: 'weight_target', label: 'Weight Target' },
|
||||
{ value: 'strength_milestone', label: 'Strength Milestone' },
|
||||
{ value: 'endurance_target', label: 'Endurance Target' },
|
||||
{ value: 'flexibility_goal', label: 'Flexibility Goal' },
|
||||
{ value: 'habit_building', label: 'Habit Building' },
|
||||
{ value: 'custom', label: 'Custom Goal' },
|
||||
{ value: "weight_target", label: "Weight Target" },
|
||||
{ value: "strength_milestone", label: "Strength Milestone" },
|
||||
{ value: "endurance_target", label: "Endurance Target" },
|
||||
{ value: "flexibility_goal", label: "Flexibility Goal" },
|
||||
{ value: "habit_building", label: "Habit Building" },
|
||||
{ value: "custom", label: "Custom Goal" },
|
||||
] as const;
|
||||
|
||||
const PRIORITIES = [
|
||||
{ value: 'low', label: 'Low', color: '#10b981' },
|
||||
{ value: 'medium', label: 'Medium', color: '#f59e0b' },
|
||||
{ value: 'high', label: 'High', color: '#ef4444' },
|
||||
{ value: "low", label: "Low" },
|
||||
{ value: "medium", label: "Medium" },
|
||||
{ value: "high", label: "High" },
|
||||
] as const;
|
||||
|
||||
export function GoalCreationModal({ visible, onClose, onSubmit }: GoalCreationModalProps) {
|
||||
const [goalType, setGoalType] = useState<CreateGoalData['goalType']>('weight_target');
|
||||
const [title, setTitle] = useState('');
|
||||
const [description, setDescription] = useState('');
|
||||
const [targetValue, setTargetValue] = useState('');
|
||||
const [currentValue, setCurrentValue] = useState('');
|
||||
const [unit, setUnit] = useState('');
|
||||
const [priority, setPriority] = useState<'low' | 'medium' | 'high'>('medium');
|
||||
const [targetDate, setTargetDate] = useState<Date | undefined>();
|
||||
const [showDatePicker, setShowDatePicker] = useState(false);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
export function GoalCreationModal({
|
||||
visible,
|
||||
onClose,
|
||||
onSubmit,
|
||||
}: GoalCreationModalProps) {
|
||||
const { colors, typography } = useTheme();
|
||||
const [goalType, setGoalType] =
|
||||
useState<CreateGoalData["goalType"]>("weight_target");
|
||||
const [title, setTitle] = useState("");
|
||||
const [description, setDescription] = useState("");
|
||||
const [targetValue, setTargetValue] = useState("");
|
||||
const [currentValue, setCurrentValue] = useState("");
|
||||
const [unit, setUnit] = useState("");
|
||||
const [priority, setPriority] = useState<"low" | "medium" | "high">("medium");
|
||||
const [targetDate, setTargetDate] = useState<Date | undefined>();
|
||||
const [showDatePicker, setShowDatePicker] = useState(false);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
|
||||
const resetForm = () => {
|
||||
setGoalType('weight_target');
|
||||
setTitle('');
|
||||
setDescription('');
|
||||
setTargetValue('');
|
||||
setCurrentValue('');
|
||||
setUnit('');
|
||||
setPriority('medium');
|
||||
setTargetDate(undefined);
|
||||
};
|
||||
const resetForm = () => {
|
||||
setGoalType("weight_target");
|
||||
setTitle("");
|
||||
setDescription("");
|
||||
setTargetValue("");
|
||||
setCurrentValue("");
|
||||
setUnit("");
|
||||
setPriority("medium");
|
||||
setTargetDate(undefined);
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (!title.trim()) {
|
||||
Alert.alert('Error', 'Please enter a goal title');
|
||||
return;
|
||||
}
|
||||
const handleSubmit = async () => {
|
||||
if (!title.trim()) {
|
||||
Alert.alert("Error", "Please enter a goal title");
|
||||
return;
|
||||
}
|
||||
|
||||
setSubmitting(true);
|
||||
try {
|
||||
const goalData: CreateGoalData = {
|
||||
goalType,
|
||||
title: title.trim(),
|
||||
description: description.trim() || undefined,
|
||||
targetValue: targetValue ? parseFloat(targetValue) : undefined,
|
||||
currentValue: currentValue ? parseFloat(currentValue) : undefined,
|
||||
unit: unit.trim() || undefined,
|
||||
targetDate: targetDate?.toISOString(),
|
||||
priority,
|
||||
};
|
||||
setSubmitting(true);
|
||||
try {
|
||||
const goalData: CreateGoalData = {
|
||||
goalType,
|
||||
title: title.trim(),
|
||||
description: description.trim() || undefined,
|
||||
targetValue: targetValue ? parseFloat(targetValue) : undefined,
|
||||
currentValue: currentValue ? parseFloat(currentValue) : undefined,
|
||||
unit: unit.trim() || undefined,
|
||||
targetDate: targetDate?.toISOString(),
|
||||
priority,
|
||||
};
|
||||
|
||||
await onSubmit(goalData);
|
||||
resetForm();
|
||||
onClose();
|
||||
} catch (error) {
|
||||
console.error('Error creating goal:', error);
|
||||
Alert.alert('Error', 'Failed to create goal. Please try again.');
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
await onSubmit(goalData);
|
||||
resetForm();
|
||||
onClose();
|
||||
} catch (error) {
|
||||
console.error("Error creating goal:", error);
|
||||
Alert.alert("Error", "Failed to create goal. Please try again.");
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
resetForm();
|
||||
onClose();
|
||||
};
|
||||
const handleClose = () => {
|
||||
resetForm();
|
||||
onClose();
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
visible={visible}
|
||||
animationType="slide"
|
||||
presentationStyle="pageSheet"
|
||||
onRequestClose={handleClose}
|
||||
const getPriorityColor = (p: "low" | "medium" | "high") => {
|
||||
switch (p) {
|
||||
case "high":
|
||||
return colors.danger;
|
||||
case "medium":
|
||||
return colors.warning;
|
||||
case "low":
|
||||
return colors.success;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
visible={visible}
|
||||
animationType="slide"
|
||||
presentationStyle="pageSheet"
|
||||
onRequestClose={handleClose}
|
||||
>
|
||||
<View style={[styles.container, { backgroundColor: colors.background }]}>
|
||||
<View
|
||||
style={[
|
||||
styles.header,
|
||||
{
|
||||
backgroundColor: colors.surface,
|
||||
borderBottomColor: colors.border,
|
||||
},
|
||||
]}
|
||||
>
|
||||
<View style={styles.container}>
|
||||
<View style={styles.header}>
|
||||
<Text style={styles.headerTitle}>Create Fitness Goal</Text>
|
||||
<TouchableOpacity onPress={handleClose} style={styles.closeButton}>
|
||||
<Ionicons name="close" size={28} color="#111827" />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
<Text style={[typography.h2, { color: colors.textPrimary }]}>
|
||||
Create Fitness Goal
|
||||
</Text>
|
||||
<TouchableOpacity onPress={handleClose} style={styles.closeButton}>
|
||||
<Ionicons name="close" size={28} color={colors.textPrimary} />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
<ScrollView style={styles.content} showsVerticalScrollIndicator={false}>
|
||||
{/* Goal Type */}
|
||||
<View style={styles.field}>
|
||||
<Text style={styles.label}>Goal Type *</Text>
|
||||
<ScrollView horizontal showsHorizontalScrollIndicator={false} style={styles.typeScroll}>
|
||||
{GOAL_TYPES.map((type) => (
|
||||
<TouchableOpacity
|
||||
key={type.value}
|
||||
style={[
|
||||
styles.typeButton,
|
||||
goalType === type.value && styles.typeButtonActive,
|
||||
]}
|
||||
onPress={() => setGoalType(type.value)}
|
||||
>
|
||||
<Text
|
||||
style={[
|
||||
styles.typeButtonText,
|
||||
goalType === type.value && styles.typeButtonTextActive,
|
||||
]}
|
||||
>
|
||||
{type.label}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
))}
|
||||
</ScrollView>
|
||||
</View>
|
||||
<ScrollView style={styles.content} showsVerticalScrollIndicator={false}>
|
||||
{/* Goal Type */}
|
||||
<View style={styles.field}>
|
||||
<Text
|
||||
style={[typography.bodyEmphasis, { color: colors.textPrimary }]}
|
||||
>
|
||||
Goal Type *
|
||||
</Text>
|
||||
<ScrollView
|
||||
horizontal
|
||||
showsHorizontalScrollIndicator={false}
|
||||
style={styles.typeScroll}
|
||||
>
|
||||
{GOAL_TYPES.map((type) => (
|
||||
<TouchableOpacity
|
||||
key={type.value}
|
||||
style={[
|
||||
styles.typeButton,
|
||||
{
|
||||
borderColor: colors.border,
|
||||
backgroundColor: colors.surface,
|
||||
},
|
||||
goalType === type.value && {
|
||||
backgroundColor: colors.primary,
|
||||
borderColor: colors.primary,
|
||||
},
|
||||
]}
|
||||
onPress={() => setGoalType(type.value)}
|
||||
>
|
||||
<Text
|
||||
style={[
|
||||
typography.caption,
|
||||
{ color: colors.textSecondary },
|
||||
goalType === type.value && {
|
||||
color: colors.white,
|
||||
fontWeight: "600",
|
||||
},
|
||||
]}
|
||||
>
|
||||
{type.label}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
))}
|
||||
</ScrollView>
|
||||
</View>
|
||||
|
||||
{/* Title */}
|
||||
<View style={styles.field}>
|
||||
<Text style={styles.label}>Title *</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
value={title}
|
||||
onChangeText={setTitle}
|
||||
placeholder="e.g., Lose 5kg"
|
||||
placeholderTextColor="#9ca3af"
|
||||
/>
|
||||
</View>
|
||||
{/* Title */}
|
||||
<View style={styles.field}>
|
||||
<Text
|
||||
style={[typography.bodyEmphasis, { color: colors.textPrimary }]}
|
||||
>
|
||||
Title *
|
||||
</Text>
|
||||
<TextInput
|
||||
style={[
|
||||
styles.input,
|
||||
{
|
||||
backgroundColor: colors.surface,
|
||||
borderColor: colors.border,
|
||||
color: colors.textPrimary,
|
||||
},
|
||||
]}
|
||||
value={title}
|
||||
onChangeText={setTitle}
|
||||
placeholder="e.g., Lose 5kg"
|
||||
placeholderTextColor={colors.textTertiary}
|
||||
/>
|
||||
</View>
|
||||
|
||||
{/* Description */}
|
||||
<View style={styles.field}>
|
||||
<Text style={styles.label}>Description</Text>
|
||||
<TextInput
|
||||
style={[styles.input, styles.textArea]}
|
||||
value={description}
|
||||
onChangeText={setDescription}
|
||||
placeholder="Optional description"
|
||||
placeholderTextColor="#9ca3af"
|
||||
multiline
|
||||
numberOfLines={3}
|
||||
/>
|
||||
</View>
|
||||
{/* Description */}
|
||||
<View style={styles.field}>
|
||||
<Text
|
||||
style={[typography.bodyEmphasis, { color: colors.textPrimary }]}
|
||||
>
|
||||
Description
|
||||
</Text>
|
||||
<TextInput
|
||||
style={[
|
||||
styles.input,
|
||||
styles.textArea,
|
||||
{
|
||||
backgroundColor: colors.surface,
|
||||
borderColor: colors.border,
|
||||
color: colors.textPrimary,
|
||||
},
|
||||
]}
|
||||
value={description}
|
||||
onChangeText={setDescription}
|
||||
placeholder="Optional description"
|
||||
placeholderTextColor={colors.textTertiary}
|
||||
multiline
|
||||
numberOfLines={3}
|
||||
/>
|
||||
</View>
|
||||
|
||||
{/* Target Value & Unit */}
|
||||
<View style={styles.row}>
|
||||
<View style={[styles.field, styles.flex1]}>
|
||||
<Text style={styles.label}>Target Value</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
value={targetValue}
|
||||
onChangeText={setTargetValue}
|
||||
placeholder="e.g., 70"
|
||||
placeholderTextColor="#9ca3af"
|
||||
keyboardType="numeric"
|
||||
/>
|
||||
</View>
|
||||
<View style={[styles.field, styles.flex1]}>
|
||||
<Text style={styles.label}>Unit</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
value={unit}
|
||||
onChangeText={setUnit}
|
||||
placeholder="e.g., kg"
|
||||
placeholderTextColor="#9ca3af"
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Current Value */}
|
||||
<View style={styles.field}>
|
||||
<Text style={styles.label}>Current Value</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
value={currentValue}
|
||||
onChangeText={setCurrentValue}
|
||||
placeholder="Starting value (optional)"
|
||||
placeholderTextColor="#9ca3af"
|
||||
keyboardType="numeric"
|
||||
/>
|
||||
</View>
|
||||
|
||||
{/* Target Date */}
|
||||
<View style={styles.field}>
|
||||
<Text style={styles.label}>Target Date</Text>
|
||||
<TouchableOpacity
|
||||
style={styles.dateButton}
|
||||
onPress={() => setShowDatePicker(!showDatePicker)}
|
||||
>
|
||||
<Text style={targetDate ? styles.dateText : styles.datePlaceholder}>
|
||||
{targetDate ? targetDate.toLocaleDateString() : 'Select target date'}
|
||||
</Text>
|
||||
<Ionicons name={showDatePicker ? "chevron-up" : "calendar-outline"} size={20} color="#6b7280" />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
{showDatePicker && (
|
||||
<View style={Platform.OS === 'ios' ? styles.datePickerContainer : undefined}>
|
||||
<DateTimePicker
|
||||
value={targetDate || new Date()}
|
||||
mode="date"
|
||||
display={Platform.OS === 'ios' ? 'inline' : 'default'}
|
||||
onChange={(event, selectedDate) => {
|
||||
setShowDatePicker(Platform.OS === 'ios');
|
||||
if (selectedDate) {
|
||||
setTargetDate(selectedDate);
|
||||
}
|
||||
}}
|
||||
minimumDate={new Date()}
|
||||
themeVariant="light"
|
||||
/>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* Priority */}
|
||||
<View style={styles.field}>
|
||||
<Text style={styles.label}>Priority</Text>
|
||||
<View style={styles.priorityContainer}>
|
||||
{PRIORITIES.map((p) => (
|
||||
<TouchableOpacity
|
||||
key={p.value}
|
||||
style={[
|
||||
styles.priorityButton,
|
||||
priority === p.value && { backgroundColor: p.color },
|
||||
]}
|
||||
onPress={() => setPriority(p.value)}
|
||||
>
|
||||
<Text
|
||||
style={[
|
||||
styles.priorityButtonText,
|
||||
priority === p.value && styles.priorityButtonTextActive,
|
||||
]}
|
||||
>
|
||||
{p.label}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
</ScrollView>
|
||||
|
||||
<View style={styles.footer}>
|
||||
<TouchableOpacity
|
||||
style={[styles.submitButton, submitting && styles.submitButtonDisabled]}
|
||||
onPress={handleSubmit}
|
||||
disabled={submitting}
|
||||
>
|
||||
<Text style={styles.submitButtonText}>
|
||||
{submitting ? 'Creating...' : 'Create Goal'}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
{/* Target Value & Unit */}
|
||||
<View style={styles.row}>
|
||||
<View style={[styles.field, styles.flex1]}>
|
||||
<Text
|
||||
style={[typography.bodyEmphasis, { color: colors.textPrimary }]}
|
||||
>
|
||||
Target Value
|
||||
</Text>
|
||||
<TextInput
|
||||
style={[
|
||||
styles.input,
|
||||
{
|
||||
backgroundColor: colors.surface,
|
||||
borderColor: colors.border,
|
||||
color: colors.textPrimary,
|
||||
},
|
||||
]}
|
||||
value={targetValue}
|
||||
onChangeText={setTargetValue}
|
||||
placeholder="e.g., 70"
|
||||
placeholderTextColor={colors.textTertiary}
|
||||
keyboardType="numeric"
|
||||
/>
|
||||
</View>
|
||||
</Modal>
|
||||
);
|
||||
<View style={[styles.field, styles.flex1]}>
|
||||
<Text
|
||||
style={[typography.bodyEmphasis, { color: colors.textPrimary }]}
|
||||
>
|
||||
Unit
|
||||
</Text>
|
||||
<TextInput
|
||||
style={[
|
||||
styles.input,
|
||||
{
|
||||
backgroundColor: colors.surface,
|
||||
borderColor: colors.border,
|
||||
color: colors.textPrimary,
|
||||
},
|
||||
]}
|
||||
value={unit}
|
||||
onChangeText={setUnit}
|
||||
placeholder="e.g., kg"
|
||||
placeholderTextColor={colors.textTertiary}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Current Value */}
|
||||
<View style={styles.field}>
|
||||
<Text
|
||||
style={[typography.bodyEmphasis, { color: colors.textPrimary }]}
|
||||
>
|
||||
Current Value
|
||||
</Text>
|
||||
<TextInput
|
||||
style={[
|
||||
styles.input,
|
||||
{
|
||||
backgroundColor: colors.surface,
|
||||
borderColor: colors.border,
|
||||
color: colors.textPrimary,
|
||||
},
|
||||
]}
|
||||
value={currentValue}
|
||||
onChangeText={setCurrentValue}
|
||||
placeholder="Starting value (optional)"
|
||||
placeholderTextColor={colors.textTertiary}
|
||||
keyboardType="numeric"
|
||||
/>
|
||||
</View>
|
||||
|
||||
{/* Target Date */}
|
||||
<View style={styles.field}>
|
||||
<Text
|
||||
style={[typography.bodyEmphasis, { color: colors.textPrimary }]}
|
||||
>
|
||||
Target Date
|
||||
</Text>
|
||||
<TouchableOpacity
|
||||
style={[
|
||||
styles.dateButton,
|
||||
{
|
||||
backgroundColor: colors.surface,
|
||||
borderColor: colors.border,
|
||||
},
|
||||
]}
|
||||
onPress={() => setShowDatePicker(!showDatePicker)}
|
||||
>
|
||||
<Text
|
||||
style={[
|
||||
typography.body,
|
||||
{
|
||||
color: targetDate
|
||||
? colors.textPrimary
|
||||
: colors.textTertiary,
|
||||
},
|
||||
]}
|
||||
>
|
||||
{targetDate
|
||||
? targetDate.toLocaleDateString()
|
||||
: "Select target date"}
|
||||
</Text>
|
||||
<Ionicons
|
||||
name={showDatePicker ? "chevron-up" : "calendar-outline"}
|
||||
size={20}
|
||||
color={colors.textSecondary}
|
||||
/>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
{showDatePicker && (
|
||||
<View
|
||||
style={
|
||||
Platform.OS === "ios"
|
||||
? [
|
||||
styles.datePickerContainer,
|
||||
{
|
||||
backgroundColor: colors.surface,
|
||||
borderColor: colors.border,
|
||||
},
|
||||
]
|
||||
: undefined
|
||||
}
|
||||
>
|
||||
<DateTimePicker
|
||||
value={targetDate || new Date()}
|
||||
mode="date"
|
||||
display={Platform.OS === "ios" ? "inline" : "default"}
|
||||
onChange={(event, selectedDate) => {
|
||||
setShowDatePicker(Platform.OS === "ios");
|
||||
if (selectedDate) {
|
||||
setTargetDate(selectedDate);
|
||||
}
|
||||
}}
|
||||
minimumDate={new Date()}
|
||||
themeVariant="light"
|
||||
/>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* Priority */}
|
||||
<View style={styles.field}>
|
||||
<Text
|
||||
style={[typography.bodyEmphasis, { color: colors.textPrimary }]}
|
||||
>
|
||||
Priority
|
||||
</Text>
|
||||
<View style={styles.priorityContainer}>
|
||||
{PRIORITIES.map((p) => (
|
||||
<TouchableOpacity
|
||||
key={p.value}
|
||||
style={[
|
||||
styles.priorityButton,
|
||||
{
|
||||
borderColor: colors.border,
|
||||
backgroundColor: colors.surface,
|
||||
},
|
||||
priority === p.value && {
|
||||
backgroundColor: getPriorityColor(p.value),
|
||||
borderColor: getPriorityColor(p.value),
|
||||
},
|
||||
]}
|
||||
onPress={() => setPriority(p.value)}
|
||||
>
|
||||
<Text
|
||||
style={[
|
||||
typography.body,
|
||||
{ color: colors.textSecondary },
|
||||
priority === p.value && {
|
||||
color: colors.white,
|
||||
fontWeight: "600",
|
||||
},
|
||||
]}
|
||||
>
|
||||
{p.label}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
</ScrollView>
|
||||
|
||||
<View
|
||||
style={[
|
||||
styles.footer,
|
||||
{
|
||||
backgroundColor: colors.surface,
|
||||
borderTopColor: colors.border,
|
||||
},
|
||||
]}
|
||||
>
|
||||
<MinimalButton
|
||||
variant="primary"
|
||||
title={submitting ? "Creating..." : "Create Goal"}
|
||||
onPress={handleSubmit}
|
||||
disabled={submitting}
|
||||
loading={submitting}
|
||||
style={styles.submitButton}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: '#f9fafb',
|
||||
},
|
||||
header: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
padding: 20,
|
||||
paddingTop: Platform.OS === 'ios' ? 60 : 20,
|
||||
backgroundColor: '#fff',
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: '#e5e7eb',
|
||||
},
|
||||
headerTitle: {
|
||||
fontSize: 20,
|
||||
fontWeight: '600',
|
||||
color: '#111827',
|
||||
},
|
||||
closeButton: {
|
||||
padding: 4,
|
||||
},
|
||||
content: {
|
||||
flex: 1,
|
||||
padding: 20,
|
||||
},
|
||||
field: {
|
||||
marginBottom: 20,
|
||||
},
|
||||
label: {
|
||||
fontSize: 14,
|
||||
fontWeight: '600',
|
||||
color: '#374151',
|
||||
marginBottom: 8,
|
||||
},
|
||||
input: {
|
||||
backgroundColor: '#fff',
|
||||
borderWidth: 1,
|
||||
borderColor: '#d1d5db',
|
||||
borderRadius: 8,
|
||||
padding: 12,
|
||||
fontSize: 16,
|
||||
color: '#111827',
|
||||
},
|
||||
textArea: {
|
||||
height: 80,
|
||||
textAlignVertical: 'top',
|
||||
},
|
||||
row: {
|
||||
flexDirection: 'row',
|
||||
gap: 12,
|
||||
},
|
||||
flex1: {
|
||||
flex: 1,
|
||||
},
|
||||
typeScroll: {
|
||||
flexGrow: 0,
|
||||
},
|
||||
typeButton: {
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 8,
|
||||
borderRadius: 8,
|
||||
borderWidth: 1,
|
||||
borderColor: '#d1d5db',
|
||||
backgroundColor: '#fff',
|
||||
marginRight: 8,
|
||||
},
|
||||
typeButtonActive: {
|
||||
backgroundColor: '#2563eb',
|
||||
borderColor: '#2563eb',
|
||||
},
|
||||
typeButtonText: {
|
||||
fontSize: 14,
|
||||
color: '#374151',
|
||||
},
|
||||
typeButtonTextActive: {
|
||||
color: '#fff',
|
||||
fontWeight: '600',
|
||||
},
|
||||
dateButton: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
backgroundColor: '#fff',
|
||||
borderWidth: 1,
|
||||
borderColor: '#d1d5db',
|
||||
borderRadius: 8,
|
||||
padding: 12,
|
||||
},
|
||||
dateText: {
|
||||
fontSize: 16,
|
||||
color: '#111827',
|
||||
},
|
||||
datePlaceholder: {
|
||||
fontSize: 16,
|
||||
color: '#9ca3af',
|
||||
},
|
||||
priorityContainer: {
|
||||
flexDirection: 'row',
|
||||
gap: 12,
|
||||
},
|
||||
priorityButton: {
|
||||
flex: 1,
|
||||
paddingVertical: 12,
|
||||
borderRadius: 8,
|
||||
borderWidth: 1,
|
||||
borderColor: '#d1d5db',
|
||||
backgroundColor: '#fff',
|
||||
alignItems: 'center',
|
||||
},
|
||||
priorityButtonText: {
|
||||
fontSize: 14,
|
||||
color: '#374151',
|
||||
fontWeight: '500',
|
||||
},
|
||||
priorityButtonTextActive: {
|
||||
color: '#fff',
|
||||
fontWeight: '600',
|
||||
},
|
||||
footer: {
|
||||
padding: 20,
|
||||
paddingBottom: Platform.OS === 'ios' ? 40 : 20,
|
||||
backgroundColor: '#fff',
|
||||
borderTopWidth: 1,
|
||||
borderTopColor: '#e5e7eb',
|
||||
},
|
||||
submitButton: {
|
||||
backgroundColor: '#2563eb',
|
||||
borderRadius: 8,
|
||||
padding: 16,
|
||||
alignItems: 'center',
|
||||
},
|
||||
submitButtonDisabled: {
|
||||
opacity: 0.6,
|
||||
},
|
||||
submitButtonText: {
|
||||
fontSize: 16,
|
||||
fontWeight: '600',
|
||||
color: '#fff',
|
||||
},
|
||||
datePickerContainer: {
|
||||
backgroundColor: '#fff',
|
||||
borderRadius: 8,
|
||||
borderWidth: 1,
|
||||
borderColor: '#d1d5db',
|
||||
marginTop: 8,
|
||||
overflow: 'hidden',
|
||||
},
|
||||
container: {
|
||||
flex: 1,
|
||||
},
|
||||
header: {
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
padding: 20,
|
||||
paddingTop: Platform.OS === "ios" ? 60 : 20,
|
||||
borderBottomWidth: 1,
|
||||
},
|
||||
closeButton: {
|
||||
padding: 4,
|
||||
},
|
||||
content: {
|
||||
flex: 1,
|
||||
padding: 20,
|
||||
},
|
||||
field: {
|
||||
marginBottom: 20,
|
||||
},
|
||||
input: {
|
||||
borderWidth: 1,
|
||||
borderRadius: 8,
|
||||
padding: 12,
|
||||
fontSize: 16,
|
||||
marginTop: 8,
|
||||
},
|
||||
textArea: {
|
||||
height: 80,
|
||||
textAlignVertical: "top",
|
||||
},
|
||||
row: {
|
||||
flexDirection: "row",
|
||||
gap: 12,
|
||||
},
|
||||
flex1: {
|
||||
flex: 1,
|
||||
},
|
||||
typeScroll: {
|
||||
flexGrow: 0,
|
||||
marginTop: 8,
|
||||
},
|
||||
typeButton: {
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 8,
|
||||
borderRadius: 8,
|
||||
borderWidth: 1,
|
||||
marginRight: 8,
|
||||
},
|
||||
dateButton: {
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
borderWidth: 1,
|
||||
borderRadius: 8,
|
||||
padding: 12,
|
||||
marginTop: 8,
|
||||
},
|
||||
priorityContainer: {
|
||||
flexDirection: "row",
|
||||
gap: 12,
|
||||
marginTop: 8,
|
||||
},
|
||||
priorityButton: {
|
||||
flex: 1,
|
||||
paddingVertical: 12,
|
||||
borderRadius: 8,
|
||||
borderWidth: 1,
|
||||
alignItems: "center",
|
||||
},
|
||||
footer: {
|
||||
padding: 20,
|
||||
paddingBottom: Platform.OS === "ios" ? 40 : 20,
|
||||
borderTopWidth: 1,
|
||||
},
|
||||
submitButton: {
|
||||
width: "100%",
|
||||
},
|
||||
datePickerContainer: {
|
||||
borderRadius: 8,
|
||||
borderWidth: 1,
|
||||
marginTop: 8,
|
||||
overflow: "hidden",
|
||||
},
|
||||
});
|
||||
|
||||
@ -1,293 +1,333 @@
|
||||
import React from 'react';
|
||||
import { View, Text, StyleSheet, TouchableOpacity, Alert } from 'react-native';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { LinearGradient } from 'expo-linear-gradient';
|
||||
import type { FitnessGoal } from '../services/fitnessGoals';
|
||||
import { theme } from '../styles/theme';
|
||||
import React, { useEffect, useRef } from "react";
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
StyleSheet,
|
||||
TouchableOpacity,
|
||||
Alert,
|
||||
Animated,
|
||||
} from "react-native";
|
||||
import { Ionicons } from "@expo/vector-icons";
|
||||
import type { FitnessGoal } from "../services/fitnessGoals";
|
||||
import { useTheme } from "../contexts/ThemeContext";
|
||||
import { MinimalCard } from "./MinimalCard";
|
||||
import { Badge } from "./Badge";
|
||||
import { ProgressBar } from "./ProgressBar";
|
||||
import { IconContainer } from "./IconContainer";
|
||||
|
||||
interface GoalProgressCardProps {
|
||||
goal: FitnessGoal;
|
||||
onPress?: () => void;
|
||||
onComplete?: () => void;
|
||||
onDelete?: () => void;
|
||||
goal: FitnessGoal;
|
||||
onPress?: () => void;
|
||||
onComplete?: () => void;
|
||||
onDelete?: () => void;
|
||||
}
|
||||
|
||||
export function GoalProgressCard({ goal, onPress, onComplete, onDelete }: GoalProgressCardProps) {
|
||||
const isCompleted = goal.status === 'completed';
|
||||
const progress = goal.progress || 0;
|
||||
export function GoalProgressCard({
|
||||
goal,
|
||||
onPress,
|
||||
onComplete,
|
||||
onDelete,
|
||||
}: GoalProgressCardProps) {
|
||||
const { colors, typography } = useTheme();
|
||||
const isCompleted = goal.status === "completed";
|
||||
const progress = (goal.progress || 0) / 100; // Convert to 0-1 scale
|
||||
const scaleAnim = useRef(new Animated.Value(1)).current;
|
||||
|
||||
// Calculate days remaining
|
||||
const daysRemaining = goal.targetDate
|
||||
? Math.ceil((new Date(goal.targetDate).getTime() - Date.now()) / (1000 * 60 * 60 * 24))
|
||||
: null;
|
||||
// Celebration animation when goal is completed
|
||||
useEffect(() => {
|
||||
if (isCompleted) {
|
||||
Animated.sequence([
|
||||
Animated.spring(scaleAnim, {
|
||||
toValue: 1.05,
|
||||
friction: 3,
|
||||
tension: 40,
|
||||
useNativeDriver: true,
|
||||
}),
|
||||
Animated.spring(scaleAnim, {
|
||||
toValue: 1,
|
||||
friction: 3,
|
||||
tension: 40,
|
||||
useNativeDriver: true,
|
||||
}),
|
||||
]).start();
|
||||
}
|
||||
}, [isCompleted]);
|
||||
|
||||
const getGoalTypeIcon = (type: string) => {
|
||||
switch (type) {
|
||||
case 'weight_target': return 'scale-outline';
|
||||
case 'strength_milestone': return 'barbell-outline';
|
||||
case 'endurance_target': return 'bicycle-outline';
|
||||
case 'flexibility_goal': return 'body-outline';
|
||||
case 'habit_building': return 'calendar-outline';
|
||||
default: return 'flag-outline';
|
||||
}
|
||||
};
|
||||
const handleComplete = () => {
|
||||
if (onComplete) {
|
||||
// Trigger celebration animation
|
||||
Animated.sequence([
|
||||
Animated.spring(scaleAnim, {
|
||||
toValue: 1.1,
|
||||
friction: 3,
|
||||
tension: 40,
|
||||
useNativeDriver: true,
|
||||
}),
|
||||
Animated.spring(scaleAnim, {
|
||||
toValue: 1,
|
||||
friction: 3,
|
||||
tension: 40,
|
||||
useNativeDriver: true,
|
||||
}),
|
||||
]).start(() => {
|
||||
onComplete();
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const getPriorityGradient = (priority: string): readonly [string, string] => {
|
||||
switch (priority) {
|
||||
case 'high': return theme.gradients.danger;
|
||||
case 'medium': return theme.gradients.warning;
|
||||
case 'low': return theme.gradients.success;
|
||||
default: return theme.gradients.primary;
|
||||
}
|
||||
};
|
||||
// Calculate days remaining
|
||||
const daysRemaining = goal.targetDate
|
||||
? Math.ceil(
|
||||
(new Date(goal.targetDate).getTime() - Date.now()) /
|
||||
(1000 * 60 * 60 * 24),
|
||||
)
|
||||
: null;
|
||||
|
||||
const handleDelete = () => {
|
||||
Alert.alert(
|
||||
'Delete Goal',
|
||||
'Are you sure you want to delete this goal?',
|
||||
[
|
||||
{ text: 'Cancel', style: 'cancel' },
|
||||
{ text: 'Delete', style: 'destructive', onPress: onDelete },
|
||||
]
|
||||
);
|
||||
};
|
||||
const getGoalTypeIcon = (type: string) => {
|
||||
switch (type) {
|
||||
case "weight_target":
|
||||
return "scale-outline";
|
||||
case "strength_milestone":
|
||||
return "barbell-outline";
|
||||
case "endurance_target":
|
||||
return "bicycle-outline";
|
||||
case "flexibility_goal":
|
||||
return "body-outline";
|
||||
case "habit_building":
|
||||
return "calendar-outline";
|
||||
default:
|
||||
return "flag-outline";
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<TouchableOpacity
|
||||
onPress={onPress}
|
||||
activeOpacity={0.7}
|
||||
const getPriorityColor = (priority: string) => {
|
||||
switch (priority) {
|
||||
case "high":
|
||||
return colors.danger;
|
||||
case "medium":
|
||||
return colors.warning;
|
||||
case "low":
|
||||
return colors.success;
|
||||
default:
|
||||
return colors.primary;
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = () => {
|
||||
Alert.alert("Delete Goal", "Are you sure you want to delete this goal?", [
|
||||
{ text: "Cancel", style: "cancel" },
|
||||
{ text: "Delete", style: "destructive", onPress: onDelete },
|
||||
]);
|
||||
};
|
||||
|
||||
return (
|
||||
<Animated.View style={{ transform: [{ scale: scaleAnim }] }}>
|
||||
<TouchableOpacity onPress={onPress} activeOpacity={0.85}>
|
||||
<MinimalCard
|
||||
variant="elevated"
|
||||
style={[
|
||||
styles.card,
|
||||
isCompleted && {
|
||||
backgroundColor: colors.surfaceElevated,
|
||||
opacity: 0.8,
|
||||
},
|
||||
]}
|
||||
padding={20}
|
||||
>
|
||||
<LinearGradient
|
||||
colors={isCompleted
|
||||
? ['rgba(16, 185, 129, 0.05)', 'rgba(5, 150, 105, 0.02)'] as const
|
||||
: ['rgba(255, 255, 255, 1)', 'rgba(249, 250, 251, 1)'] as const
|
||||
{/* Header */}
|
||||
<View style={styles.header}>
|
||||
<View style={styles.titleRow}>
|
||||
<IconContainer
|
||||
variant="colored"
|
||||
backgroundColor={
|
||||
isCompleted ? colors.success : getPriorityColor(goal.priority)
|
||||
}
|
||||
style={[
|
||||
styles.card,
|
||||
theme.shadows.medium,
|
||||
isCompleted && styles.cardCompleted
|
||||
]}
|
||||
>
|
||||
{/* Priority Accent Bar */}
|
||||
<LinearGradient
|
||||
colors={getPriorityGradient(goal.priority)}
|
||||
start={{ x: 0, y: 0 }}
|
||||
end={{ x: 0, y: 1 }}
|
||||
style={styles.priorityAccent}
|
||||
>
|
||||
<Ionicons
|
||||
name={getGoalTypeIcon(goal.goalType) as any}
|
||||
size={20}
|
||||
color={colors.white}
|
||||
/>
|
||||
</IconContainer>
|
||||
|
||||
<View style={styles.header}>
|
||||
<View style={styles.titleRow}>
|
||||
<LinearGradient
|
||||
colors={isCompleted ? theme.gradients.success : getPriorityGradient(goal.priority)}
|
||||
style={styles.iconContainer}
|
||||
>
|
||||
<Ionicons
|
||||
name={getGoalTypeIcon(goal.goalType) as any}
|
||||
size={20}
|
||||
color="#fff"
|
||||
/>
|
||||
</LinearGradient>
|
||||
<View style={styles.titleContainer}>
|
||||
<Text style={[styles.title, isCompleted && styles.titleCompleted]}>
|
||||
{goal.title}
|
||||
</Text>
|
||||
{goal.description && (
|
||||
<Text style={styles.description} numberOfLines={2}>
|
||||
{goal.description}
|
||||
</Text>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.actions}>
|
||||
{!isCompleted && onComplete && (
|
||||
<TouchableOpacity onPress={onComplete} style={styles.actionButton}>
|
||||
<Ionicons name="checkmark-circle-outline" size={24} color={theme.colors.success} />
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
{onDelete && (
|
||||
<TouchableOpacity onPress={handleDelete} style={styles.actionButton}>
|
||||
<Ionicons name="trash-outline" size={22} color={theme.colors.danger} />
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{goal.targetValue && (
|
||||
<View style={styles.progressSection}>
|
||||
<View style={styles.progressInfo}>
|
||||
<Text style={styles.progressText}>
|
||||
{goal.currentValue || 0} / {goal.targetValue} {goal.unit || ''}
|
||||
</Text>
|
||||
<Text style={[styles.progressPercentage, isCompleted && { color: theme.colors.success }]}>
|
||||
{progress.toFixed(0)}%
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<View style={styles.progressBarContainer}>
|
||||
<LinearGradient
|
||||
colors={isCompleted ? theme.gradients.success : getPriorityGradient(goal.priority)}
|
||||
start={{ x: 0, y: 0 }}
|
||||
end={{ x: 1, y: 0 }}
|
||||
style={[
|
||||
styles.progressBar,
|
||||
{ width: `${Math.min(progress, 100)}%` }
|
||||
]}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.titleContainer}>
|
||||
<Text
|
||||
style={[
|
||||
typography.h3,
|
||||
{ color: colors.textPrimary },
|
||||
isCompleted && {
|
||||
color: colors.textSecondary,
|
||||
textDecorationLine: "line-through",
|
||||
},
|
||||
]}
|
||||
>
|
||||
{goal.title}
|
||||
</Text>
|
||||
{goal.description && (
|
||||
<Text
|
||||
style={[
|
||||
typography.caption,
|
||||
{ color: colors.textTertiary, marginTop: 2 },
|
||||
]}
|
||||
numberOfLines={2}
|
||||
>
|
||||
{goal.description}
|
||||
</Text>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.footer}>
|
||||
<LinearGradient
|
||||
colors={getPriorityGradient(goal.priority)}
|
||||
style={styles.priorityBadge}
|
||||
>
|
||||
<Text style={styles.priorityText}>{goal.priority.toUpperCase()}</Text>
|
||||
</LinearGradient>
|
||||
{/* Action Buttons */}
|
||||
<View style={styles.actions}>
|
||||
{!isCompleted && onComplete && (
|
||||
<TouchableOpacity
|
||||
onPress={handleComplete}
|
||||
style={styles.actionButton}
|
||||
>
|
||||
<Ionicons
|
||||
name="checkmark-circle-outline"
|
||||
size={24}
|
||||
color={colors.success}
|
||||
/>
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
{onDelete && (
|
||||
<TouchableOpacity
|
||||
onPress={handleDelete}
|
||||
style={styles.actionButton}
|
||||
>
|
||||
<Ionicons
|
||||
name="trash-outline"
|
||||
size={22}
|
||||
color={colors.danger}
|
||||
/>
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{daysRemaining !== null && !isCompleted && (
|
||||
<Text style={[styles.daysRemaining, daysRemaining < 0 && styles.overdue]}>
|
||||
{daysRemaining < 0
|
||||
? `${Math.abs(daysRemaining)} days overdue`
|
||||
: `${daysRemaining} days remaining`
|
||||
}
|
||||
</Text>
|
||||
)}
|
||||
{/* Progress Section */}
|
||||
{goal.targetValue && (
|
||||
<View style={styles.progressSection}>
|
||||
<View style={styles.progressInfo}>
|
||||
<Text
|
||||
style={[typography.caption, { color: colors.textSecondary }]}
|
||||
>
|
||||
{goal.currentValue || 0} / {goal.targetValue}{" "}
|
||||
{goal.unit || ""}
|
||||
</Text>
|
||||
<Text
|
||||
style={[
|
||||
typography.bodyEmphasis,
|
||||
{
|
||||
color: isCompleted ? colors.success : colors.primary,
|
||||
},
|
||||
]}
|
||||
>
|
||||
{(progress * 100).toFixed(0)}%
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
{isCompleted && goal.completedDate && (
|
||||
<Text style={styles.completedDate}>
|
||||
Completed {new Date(goal.completedDate).toLocaleDateString()}
|
||||
</Text>
|
||||
)}
|
||||
</View>
|
||||
</LinearGradient>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
<ProgressBar
|
||||
progress={progress}
|
||||
color={
|
||||
isCompleted ? colors.success : getPriorityColor(goal.priority)
|
||||
}
|
||||
/>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* Footer */}
|
||||
<View style={styles.footer}>
|
||||
{isCompleted ? (
|
||||
<Badge variant="success" label="COMPLETED" />
|
||||
) : (
|
||||
<View>
|
||||
{goal.priority === "high" && (
|
||||
<Badge variant="danger" label={goal.priority.toUpperCase()} />
|
||||
)}
|
||||
{goal.priority === "medium" && (
|
||||
<Badge
|
||||
variant="warning"
|
||||
label={goal.priority.toUpperCase()}
|
||||
/>
|
||||
)}
|
||||
{goal.priority === "low" && (
|
||||
<Badge
|
||||
variant="success"
|
||||
label={goal.priority.toUpperCase()}
|
||||
/>
|
||||
)}
|
||||
</View>
|
||||
)}
|
||||
|
||||
{daysRemaining !== null && !isCompleted && (
|
||||
<Text
|
||||
style={[
|
||||
typography.caption,
|
||||
{
|
||||
color:
|
||||
daysRemaining < 0 ? colors.danger : colors.textTertiary,
|
||||
},
|
||||
]}
|
||||
>
|
||||
{daysRemaining < 0
|
||||
? `${Math.abs(daysRemaining)} days overdue`
|
||||
: `${daysRemaining} days remaining`}
|
||||
</Text>
|
||||
)}
|
||||
|
||||
{isCompleted && goal.completedDate && (
|
||||
<Text style={[typography.caption, { color: colors.success }]}>
|
||||
Completed {new Date(goal.completedDate).toLocaleDateString()}
|
||||
</Text>
|
||||
)}
|
||||
</View>
|
||||
</MinimalCard>
|
||||
</TouchableOpacity>
|
||||
</Animated.View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
card: {
|
||||
borderRadius: theme.borderRadius.xl,
|
||||
padding: 16,
|
||||
marginBottom: 12,
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(59, 130, 246, 0.1)',
|
||||
overflow: 'hidden',
|
||||
},
|
||||
cardCompleted: {
|
||||
borderColor: 'rgba(16, 185, 129, 0.2)',
|
||||
},
|
||||
priorityAccent: {
|
||||
position: 'absolute',
|
||||
left: 0,
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
width: 4,
|
||||
},
|
||||
header: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'flex-start',
|
||||
marginBottom: 12,
|
||||
marginLeft: 8,
|
||||
},
|
||||
titleRow: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'flex-start',
|
||||
flex: 1,
|
||||
},
|
||||
iconContainer: {
|
||||
width: 40,
|
||||
height: 40,
|
||||
borderRadius: 20,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
marginRight: 12,
|
||||
},
|
||||
titleContainer: {
|
||||
flex: 1,
|
||||
},
|
||||
title: {
|
||||
fontSize: theme.typography.fontSize.lg,
|
||||
fontWeight: theme.typography.fontWeight.semibold,
|
||||
color: theme.colors.gray900,
|
||||
marginBottom: 4,
|
||||
},
|
||||
titleCompleted: {
|
||||
color: theme.colors.gray600,
|
||||
textDecorationLine: 'line-through',
|
||||
},
|
||||
description: {
|
||||
fontSize: theme.typography.fontSize.sm,
|
||||
color: theme.colors.gray600,
|
||||
lineHeight: 18,
|
||||
},
|
||||
actions: {
|
||||
flexDirection: 'row',
|
||||
gap: 8,
|
||||
},
|
||||
actionButton: {
|
||||
padding: 4,
|
||||
},
|
||||
progressSection: {
|
||||
marginBottom: 12,
|
||||
marginLeft: 8,
|
||||
},
|
||||
progressInfo: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
marginBottom: 8,
|
||||
},
|
||||
progressText: {
|
||||
fontSize: theme.typography.fontSize.sm,
|
||||
fontWeight: theme.typography.fontWeight.medium,
|
||||
color: theme.colors.gray700,
|
||||
},
|
||||
progressPercentage: {
|
||||
fontSize: theme.typography.fontSize.sm,
|
||||
fontWeight: theme.typography.fontWeight.semibold,
|
||||
color: theme.colors.primary,
|
||||
},
|
||||
progressBarContainer: {
|
||||
height: 8,
|
||||
backgroundColor: theme.colors.gray200,
|
||||
borderRadius: 4,
|
||||
overflow: 'hidden',
|
||||
},
|
||||
progressBar: {
|
||||
height: '100%',
|
||||
borderRadius: 4,
|
||||
},
|
||||
footer: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
marginLeft: 8,
|
||||
},
|
||||
priorityBadge: {
|
||||
paddingHorizontal: 10,
|
||||
paddingVertical: 5,
|
||||
borderRadius: theme.borderRadius.md,
|
||||
},
|
||||
priorityText: {
|
||||
fontSize: theme.typography.fontSize.xs,
|
||||
fontWeight: theme.typography.fontWeight.semibold,
|
||||
color: theme.colors.white,
|
||||
},
|
||||
daysRemaining: {
|
||||
fontSize: theme.typography.fontSize.xs,
|
||||
color: theme.colors.gray600,
|
||||
fontWeight: theme.typography.fontWeight.medium,
|
||||
},
|
||||
overdue: {
|
||||
color: theme.colors.danger,
|
||||
fontWeight: theme.typography.fontWeight.semibold,
|
||||
},
|
||||
completedDate: {
|
||||
fontSize: theme.typography.fontSize.xs,
|
||||
color: theme.colors.success,
|
||||
fontWeight: theme.typography.fontWeight.medium,
|
||||
},
|
||||
card: {
|
||||
marginBottom: 16,
|
||||
borderRadius: 20,
|
||||
},
|
||||
header: {
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "flex-start",
|
||||
marginBottom: 16,
|
||||
},
|
||||
titleRow: {
|
||||
flexDirection: "row",
|
||||
alignItems: "flex-start",
|
||||
flex: 1,
|
||||
},
|
||||
titleContainer: {
|
||||
flex: 1,
|
||||
marginLeft: 14,
|
||||
},
|
||||
actions: {
|
||||
flexDirection: "row",
|
||||
gap: 12,
|
||||
},
|
||||
actionButton: {
|
||||
padding: 6,
|
||||
},
|
||||
progressSection: {
|
||||
marginBottom: 16,
|
||||
},
|
||||
progressInfo: {
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
marginBottom: 10,
|
||||
},
|
||||
footer: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
},
|
||||
});
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import React from "react";
|
||||
import { View, Text, StyleSheet, Dimensions } from "react-native";
|
||||
import { PieChart } from "react-native-chart-kit";
|
||||
import { theme } from "../styles/theme";
|
||||
import { useTheme } from "../contexts/ThemeContext";
|
||||
|
||||
interface GoalTypeData {
|
||||
goalType: string;
|
||||
@ -17,37 +17,40 @@ export function GoalTypeBreakdownChart({
|
||||
data,
|
||||
title = "Goals by Type",
|
||||
}: GoalTypeBreakdownChartProps) {
|
||||
const { colors, typography } = useTheme();
|
||||
const screenWidth = Dimensions.get("window").width;
|
||||
|
||||
// Color palette for different goal types
|
||||
const colors = [
|
||||
"#3b82f6", // Blue
|
||||
"#10b981", // Green
|
||||
"#f59e0b", // Orange
|
||||
"#8b5cf6", // Purple
|
||||
"#ec4899", // Pink
|
||||
"#06b6d4", // Cyan
|
||||
const chartColors = [
|
||||
colors.primary,
|
||||
colors.success,
|
||||
colors.warning,
|
||||
colors.accent,
|
||||
colors.secondary,
|
||||
colors.info,
|
||||
];
|
||||
|
||||
// Prepare chart data
|
||||
const chartData = data.map((item, index) => ({
|
||||
name: item.goalType,
|
||||
name: item.goalType
|
||||
.replace(/_/g, " ")
|
||||
.replace(/\b\w/g, (l) => l.toUpperCase()),
|
||||
count: item.count,
|
||||
color: colors[index % colors.length],
|
||||
legendFontColor: theme.colors.gray600,
|
||||
color: chartColors[index % chartColors.length],
|
||||
legendFontColor: colors.textSecondary,
|
||||
legendFontSize: 12,
|
||||
}));
|
||||
|
||||
const chartConfig = {
|
||||
color: (opacity = 1) => `rgba(59, 130, 246, ${opacity})`,
|
||||
};
|
||||
const totalGoals = data.reduce((sum, item) => sum + item.count, 0);
|
||||
|
||||
if (data.length === 0) {
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<Text style={styles.title}>{title}</Text>
|
||||
<Text style={[typography.h4, { color: colors.textPrimary }]}>
|
||||
{title}
|
||||
</Text>
|
||||
<View style={styles.emptyState}>
|
||||
<Text style={styles.emptyText}>No goals yet</Text>
|
||||
<Text style={[typography.body, { color: colors.textTertiary }]}>
|
||||
No goals yet
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
@ -55,46 +58,123 @@ export function GoalTypeBreakdownChart({
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<Text style={styles.title}>{title}</Text>
|
||||
<Text
|
||||
style={[typography.h4, { color: colors.textPrimary, marginBottom: 16 }]}
|
||||
>
|
||||
{title}
|
||||
</Text>
|
||||
|
||||
{/* Summary Stats */}
|
||||
<View style={styles.summaryRow}>
|
||||
<View style={styles.summaryItem}>
|
||||
<Text
|
||||
style={[
|
||||
typography.statLarge,
|
||||
{ color: colors.primary, fontSize: 32 },
|
||||
]}
|
||||
>
|
||||
{totalGoals}
|
||||
</Text>
|
||||
<Text style={[typography.caption, { color: colors.textTertiary }]}>
|
||||
Total Goals
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.summaryItem}>
|
||||
<Text
|
||||
style={[
|
||||
typography.statLarge,
|
||||
{ color: colors.success, fontSize: 32 },
|
||||
]}
|
||||
>
|
||||
{data.length}
|
||||
</Text>
|
||||
<Text style={[typography.caption, { color: colors.textTertiary }]}>
|
||||
Types
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.chartContainer}>
|
||||
<PieChart
|
||||
data={chartData}
|
||||
width={screenWidth - 60}
|
||||
height={200}
|
||||
chartConfig={chartConfig}
|
||||
width={screenWidth - 80}
|
||||
height={160}
|
||||
chartConfig={{
|
||||
color: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`,
|
||||
}}
|
||||
accessor="count"
|
||||
backgroundColor="transparent"
|
||||
paddingLeft="15"
|
||||
absolute
|
||||
/>
|
||||
</View>
|
||||
|
||||
{/* Legend */}
|
||||
<View style={styles.legendGrid}>
|
||||
{data.map((item, index) => (
|
||||
<View key={item.goalType} style={styles.legendItem}>
|
||||
<View
|
||||
style={[
|
||||
styles.legendDot,
|
||||
{ backgroundColor: chartColors[index % chartColors.length] },
|
||||
]}
|
||||
/>
|
||||
<Text
|
||||
style={[
|
||||
typography.caption,
|
||||
{ color: colors.textSecondary, flex: 1 },
|
||||
]}
|
||||
numberOfLines={1}
|
||||
>
|
||||
{item.goalType
|
||||
.replace(/_/g, " ")
|
||||
.replace(/\b\w/g, (l) => l.toUpperCase())}
|
||||
</Text>
|
||||
<Text
|
||||
style={[typography.bodyEmphasis, { color: colors.textPrimary }]}
|
||||
>
|
||||
{item.count}
|
||||
</Text>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
backgroundColor: theme.colors.white,
|
||||
borderRadius: theme.borderRadius.xl,
|
||||
padding: 16,
|
||||
marginBottom: 16,
|
||||
...theme.shadows.medium,
|
||||
borderRadius: 16,
|
||||
padding: 4,
|
||||
},
|
||||
title: {
|
||||
fontSize: theme.typography.fontSize.lg,
|
||||
fontWeight: theme.typography.fontWeight.bold,
|
||||
color: theme.colors.gray700,
|
||||
marginBottom: 12,
|
||||
summaryRow: {
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-around",
|
||||
marginBottom: 16,
|
||||
paddingVertical: 12,
|
||||
},
|
||||
summaryItem: {
|
||||
alignItems: "center",
|
||||
},
|
||||
chartContainer: {
|
||||
alignItems: "center",
|
||||
marginBottom: 16,
|
||||
},
|
||||
legendGrid: {
|
||||
gap: 10,
|
||||
},
|
||||
legendItem: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
gap: 10,
|
||||
},
|
||||
legendDot: {
|
||||
width: 12,
|
||||
height: 12,
|
||||
borderRadius: 6,
|
||||
},
|
||||
emptyState: {
|
||||
paddingVertical: 40,
|
||||
paddingVertical: 32,
|
||||
alignItems: "center",
|
||||
},
|
||||
emptyText: {
|
||||
fontSize: theme.typography.fontSize.sm,
|
||||
color: theme.colors.gray400,
|
||||
},
|
||||
});
|
||||
|
||||
77
apps/mobile/src/components/IconContainer.tsx
Normal file
77
apps/mobile/src/components/IconContainer.tsx
Normal file
@ -0,0 +1,77 @@
|
||||
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" | "xl";
|
||||
|
||||
interface IconContainerProps {
|
||||
children: React.ReactNode;
|
||||
variant?: IconContainerVariant;
|
||||
size?: IconContainerSize;
|
||||
backgroundColor?: string;
|
||||
style?: StyleProp<ViewStyle>;
|
||||
}
|
||||
|
||||
export function IconContainer({
|
||||
children,
|
||||
variant = "subtle",
|
||||
size = "md",
|
||||
backgroundColor,
|
||||
style,
|
||||
}: IconContainerProps) {
|
||||
const { colors } = useTheme();
|
||||
|
||||
const sizeStyles: Record<IconContainerSize, ViewStyle> = {
|
||||
sm: {
|
||||
width: 36,
|
||||
height: 36,
|
||||
borderRadius: 10,
|
||||
},
|
||||
md: {
|
||||
width: 48,
|
||||
height: 48,
|
||||
borderRadius: 14,
|
||||
},
|
||||
lg: {
|
||||
width: 56,
|
||||
height: 56,
|
||||
borderRadius: 16,
|
||||
},
|
||||
xl: {
|
||||
width: 64,
|
||||
height: 64,
|
||||
borderRadius: 18,
|
||||
},
|
||||
};
|
||||
|
||||
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
95
apps/mobile/src/components/ListItem.tsx
Normal 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
152
apps/mobile/src/components/MinimalButton.tsx
Normal 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"
|
||||
| "success";
|
||||
type ButtonSize = "sm" | "md" | "lg" | "xl";
|
||||
|
||||
interface MinimalButtonProps {
|
||||
title: string;
|
||||
onPress: () => void;
|
||||
variant?: ButtonVariant;
|
||||
size?: ButtonSize;
|
||||
loading?: boolean;
|
||||
disabled?: boolean;
|
||||
style?: StyleProp<ViewStyle>;
|
||||
textStyle?: StyleProp<TextStyle>;
|
||||
fullWidth?: boolean;
|
||||
}
|
||||
|
||||
export function MinimalButton({
|
||||
title,
|
||||
onPress,
|
||||
variant = "primary",
|
||||
size = "md",
|
||||
loading = false,
|
||||
disabled = false,
|
||||
style,
|
||||
textStyle,
|
||||
fullWidth = false,
|
||||
}: MinimalButtonProps) {
|
||||
const { colors } = useTheme();
|
||||
|
||||
const isDisabled = disabled || loading;
|
||||
|
||||
const getButtonStyle = (): ViewStyle => {
|
||||
const baseStyle: ViewStyle = {
|
||||
borderRadius: 14,
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
opacity: isDisabled ? 0.5 : 1,
|
||||
};
|
||||
|
||||
const sizeStyles: Record<
|
||||
ButtonSize,
|
||||
{ paddingVertical: number; paddingHorizontal: number }
|
||||
> = {
|
||||
sm: { paddingVertical: 12, paddingHorizontal: 20 },
|
||||
md: { paddingVertical: 16, paddingHorizontal: 28 },
|
||||
lg: { paddingVertical: 18, paddingHorizontal: 36 },
|
||||
xl: { paddingVertical: 20, paddingHorizontal: 44 },
|
||||
};
|
||||
|
||||
const variantStyles: Record<ButtonVariant, ViewStyle> = {
|
||||
primary: {
|
||||
backgroundColor: colors.primary,
|
||||
shadowColor: colors.primary,
|
||||
shadowOffset: { width: 0, height: 4 },
|
||||
shadowOpacity: 0.3,
|
||||
shadowRadius: 8,
|
||||
elevation: 4,
|
||||
},
|
||||
secondary: {
|
||||
backgroundColor: "transparent",
|
||||
borderWidth: 2,
|
||||
borderColor: colors.primary,
|
||||
},
|
||||
tertiary: {
|
||||
backgroundColor: "transparent",
|
||||
},
|
||||
danger: {
|
||||
backgroundColor: colors.danger,
|
||||
shadowColor: colors.danger,
|
||||
shadowOffset: { width: 0, height: 4 },
|
||||
shadowOpacity: 0.3,
|
||||
shadowRadius: 8,
|
||||
elevation: 4,
|
||||
},
|
||||
success: {
|
||||
backgroundColor: colors.success,
|
||||
shadowColor: colors.success,
|
||||
shadowOffset: { width: 0, height: 4 },
|
||||
shadowOpacity: 0.3,
|
||||
shadowRadius: 8,
|
||||
elevation: 4,
|
||||
},
|
||||
};
|
||||
|
||||
return {
|
||||
...baseStyle,
|
||||
...sizeStyles[size],
|
||||
...variantStyles[variant],
|
||||
...(fullWidth && { width: "100%" }),
|
||||
};
|
||||
};
|
||||
|
||||
const getTextStyle = (): TextStyle => {
|
||||
const baseTextStyle: TextStyle = {
|
||||
fontSize: size === "sm" ? fontSize.sm : fontSize.md,
|
||||
fontWeight: fontWeight.bold,
|
||||
letterSpacing: 0.5,
|
||||
};
|
||||
|
||||
const variantTextStyles: Record<ButtonVariant, TextStyle> = {
|
||||
primary: { color: colors.white },
|
||||
secondary: { color: colors.primary },
|
||||
tertiary: { color: colors.primary },
|
||||
danger: { color: colors.white },
|
||||
success: { color: colors.white },
|
||||
};
|
||||
|
||||
return {
|
||||
...baseTextStyle,
|
||||
...variantTextStyles[variant],
|
||||
};
|
||||
};
|
||||
|
||||
return (
|
||||
<TouchableOpacity
|
||||
style={[getButtonStyle(), style]}
|
||||
onPress={onPress}
|
||||
disabled={isDisabled}
|
||||
activeOpacity={0.85}
|
||||
>
|
||||
{loading ? (
|
||||
<ActivityIndicator
|
||||
size="small"
|
||||
color={
|
||||
variant === "secondary" || variant === "tertiary"
|
||||
? colors.primary
|
||||
: colors.white
|
||||
}
|
||||
/>
|
||||
) : (
|
||||
<Text style={[getTextStyle(), textStyle]}>{title}</Text>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
);
|
||||
}
|
||||
84
apps/mobile/src/components/MinimalCard.tsx
Normal file
84
apps/mobile/src/components/MinimalCard.tsx
Normal 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" | "gradient";
|
||||
|
||||
interface MinimalCardProps {
|
||||
children: React.ReactNode;
|
||||
variant?: CardVariant;
|
||||
onPress?: () => void;
|
||||
style?: StyleProp<ViewStyle>;
|
||||
padding?: number;
|
||||
}
|
||||
|
||||
export function MinimalCard({
|
||||
children,
|
||||
variant = "default",
|
||||
onPress,
|
||||
style,
|
||||
padding = 20,
|
||||
}: MinimalCardProps) {
|
||||
const { colors } = useTheme();
|
||||
|
||||
const cardStyles = [
|
||||
styles.base,
|
||||
{
|
||||
backgroundColor: colors.surface,
|
||||
padding: padding,
|
||||
},
|
||||
variant === "default" && styles.default,
|
||||
variant === "elevated" && {
|
||||
...styles.elevated,
|
||||
backgroundColor: colors.surfaceElevated,
|
||||
},
|
||||
variant === "bordered" && {
|
||||
borderWidth: 1,
|
||||
borderColor: colors.border,
|
||||
},
|
||||
variant === "gradient" && {
|
||||
backgroundColor: colors.surfaceElevated,
|
||||
},
|
||||
style,
|
||||
];
|
||||
|
||||
if (onPress) {
|
||||
return (
|
||||
<TouchableOpacity
|
||||
style={cardStyles}
|
||||
onPress={onPress}
|
||||
activeOpacity={0.85}
|
||||
>
|
||||
{children}
|
||||
</TouchableOpacity>
|
||||
);
|
||||
}
|
||||
|
||||
return <View style={cardStyles}>{children}</View>;
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
base: {
|
||||
borderRadius: 20,
|
||||
},
|
||||
default: {
|
||||
shadowColor: "#000",
|
||||
shadowOffset: { width: 0, height: 2 },
|
||||
shadowOpacity: 0.08,
|
||||
shadowRadius: 8,
|
||||
elevation: 3,
|
||||
},
|
||||
elevated: {
|
||||
shadowColor: "#000",
|
||||
shadowOffset: { width: 0, height: 4 },
|
||||
shadowOpacity: 0.12,
|
||||
shadowRadius: 16,
|
||||
elevation: 6,
|
||||
},
|
||||
});
|
||||
67
apps/mobile/src/components/ProgressBar.tsx
Normal file
67
apps/mobile/src/components/ProgressBar.tsx
Normal file
@ -0,0 +1,67 @@
|
||||
import React from "react";
|
||||
import { View, StyleSheet, ViewStyle, StyleProp } from "react-native";
|
||||
import { useTheme } from "../contexts/ThemeContext";
|
||||
|
||||
interface ProgressBarProps {
|
||||
progress: number;
|
||||
color?: string;
|
||||
backgroundColor?: string;
|
||||
height?: number;
|
||||
borderRadius?: number;
|
||||
style?: StyleProp<ViewStyle>;
|
||||
animated?: boolean;
|
||||
}
|
||||
|
||||
export function ProgressBar({
|
||||
progress,
|
||||
color,
|
||||
backgroundColor,
|
||||
height = 10,
|
||||
borderRadius = 999,
|
||||
style,
|
||||
}: ProgressBarProps) {
|
||||
const { colors } = useTheme();
|
||||
|
||||
const clampedProgress = Math.min(Math.max(progress, 0), 1);
|
||||
|
||||
const trackColor = backgroundColor || colors.surfaceElevated;
|
||||
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,
|
||||
},
|
||||
});
|
||||
67
apps/mobile/src/components/SectionHeader.tsx
Normal file
67
apps/mobile/src/components/SectionHeader.tsx
Normal file
@ -0,0 +1,67 @@
|
||||
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>;
|
||||
}
|
||||
|
||||
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: 4 },
|
||||
]}
|
||||
>
|
||||
{subtitle}
|
||||
</Text>
|
||||
)}
|
||||
</View>
|
||||
{actionLabel && onActionPress && (
|
||||
<TouchableOpacity onPress={onActionPress} activeOpacity={0.7}>
|
||||
<Text style={[typography.bodyEmphasis, { color: colors.primary }]}>
|
||||
{actionLabel}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
marginBottom: 16,
|
||||
},
|
||||
textContainer: {
|
||||
flex: 1,
|
||||
},
|
||||
});
|
||||
@ -1,7 +1,7 @@
|
||||
import React from "react";
|
||||
import { View, Text, StyleSheet, Dimensions } from "react-native";
|
||||
import { LineChart } from "react-native-chart-kit";
|
||||
import { theme } from "../styles/theme";
|
||||
import { useTheme } from "../contexts/ThemeContext";
|
||||
import type { WeeklyTrendData } from "../api/types";
|
||||
|
||||
interface WeeklyProgressChartProps {
|
||||
@ -13,28 +13,26 @@ export function WeeklyProgressChart({
|
||||
weeklyData,
|
||||
title = "Weekly Progress",
|
||||
}: WeeklyProgressChartProps) {
|
||||
const { colors, typography } = useTheme();
|
||||
const screenWidth = Dimensions.get("window").width;
|
||||
|
||||
// Prepare chart data
|
||||
const labels = weeklyData.map((week) => week.weekLabel);
|
||||
const checkInsData = weeklyData.map((week) => week.checkIns);
|
||||
const goalsCompletedData = weeklyData.map((week) => week.goalsCompleted);
|
||||
const avgProgressData = weeklyData.map((week) => week.averageProgress);
|
||||
const labels = weeklyData.map((week: WeeklyTrendData) => week.weekLabel);
|
||||
const checkInsData = weeklyData.map((week: WeeklyTrendData) => week.checkIns);
|
||||
const goalsCompletedData = weeklyData.map(
|
||||
(week: WeeklyTrendData) => week.goalsCompleted,
|
||||
);
|
||||
|
||||
const chartConfig = {
|
||||
backgroundColor: theme.colors.white,
|
||||
backgroundGradientFrom: theme.colors.white,
|
||||
backgroundGradientTo: theme.colors.white,
|
||||
backgroundColor: colors.surface,
|
||||
backgroundGradientFrom: colors.surface,
|
||||
backgroundGradientTo: colors.surface,
|
||||
decimalPlaces: 0,
|
||||
color: (opacity = 1) => `rgba(59, 130, 246, ${opacity})`,
|
||||
labelColor: (opacity = 1) => `rgba(107, 114, 128, ${opacity})`,
|
||||
style: {
|
||||
borderRadius: theme.borderRadius.lg,
|
||||
},
|
||||
color: (opacity = 1) => `rgba(0, 102, 255, ${opacity})`,
|
||||
labelColor: (opacity = 1) => colors.textTertiary,
|
||||
propsForDots: {
|
||||
r: "4",
|
||||
r: "5",
|
||||
strokeWidth: "2",
|
||||
stroke: theme.colors.primary,
|
||||
stroke: colors.primary,
|
||||
},
|
||||
};
|
||||
|
||||
@ -43,31 +41,40 @@ export function WeeklyProgressChart({
|
||||
datasets: [
|
||||
{
|
||||
data: checkInsData,
|
||||
color: (opacity = 1) => `rgba(59, 130, 246, ${opacity})`, // Blue for check-ins
|
||||
strokeWidth: 2,
|
||||
color: () => colors.primary,
|
||||
strokeWidth: 3,
|
||||
},
|
||||
{
|
||||
data: goalsCompletedData,
|
||||
color: (opacity = 1) => `rgba(16, 185, 129, ${opacity})`, // Green for goals
|
||||
strokeWidth: 2,
|
||||
color: () => colors.success,
|
||||
strokeWidth: 3,
|
||||
},
|
||||
],
|
||||
legend: ["Check-ins", "Goals Completed"],
|
||||
legend: ["Check-ins", "Goals"],
|
||||
};
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<Text style={styles.title}>{title}</Text>
|
||||
{title && (
|
||||
<Text
|
||||
style={[
|
||||
typography.h4,
|
||||
{ color: colors.textPrimary, marginBottom: 16 },
|
||||
]}
|
||||
>
|
||||
{title}
|
||||
</Text>
|
||||
)}
|
||||
<View style={styles.chartContainer}>
|
||||
<LineChart
|
||||
data={data}
|
||||
width={screenWidth - 60}
|
||||
height={220}
|
||||
width={screenWidth - 80}
|
||||
height={180}
|
||||
chartConfig={chartConfig}
|
||||
bezier
|
||||
style={styles.chart}
|
||||
withInnerLines={true}
|
||||
withOuterLines={true}
|
||||
withOuterLines={false}
|
||||
withVerticalLabels={true}
|
||||
withHorizontalLabels={true}
|
||||
fromZero={true}
|
||||
@ -75,12 +82,20 @@ export function WeeklyProgressChart({
|
||||
</View>
|
||||
<View style={styles.legend}>
|
||||
<View style={styles.legendItem}>
|
||||
<View style={[styles.legendDot, { backgroundColor: "#3b82f6" }]} />
|
||||
<Text style={styles.legendText}>Check-ins</Text>
|
||||
<View
|
||||
style={[styles.legendDot, { backgroundColor: colors.primary }]}
|
||||
/>
|
||||
<Text style={[typography.caption, { color: colors.textSecondary }]}>
|
||||
Check-ins
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.legendItem}>
|
||||
<View style={[styles.legendDot, { backgroundColor: "#10b981" }]} />
|
||||
<Text style={styles.legendText}>Goals Completed</Text>
|
||||
<View
|
||||
style={[styles.legendDot, { backgroundColor: colors.success }]}
|
||||
/>
|
||||
<Text style={[typography.caption, { color: colors.textSecondary }]}>
|
||||
Goals
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
@ -89,17 +104,8 @@ export function WeeklyProgressChart({
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
backgroundColor: theme.colors.white,
|
||||
borderRadius: theme.borderRadius.xl,
|
||||
padding: 16,
|
||||
marginBottom: 16,
|
||||
...theme.shadows.medium,
|
||||
},
|
||||
title: {
|
||||
fontSize: theme.typography.fontSize.lg,
|
||||
fontWeight: theme.typography.fontWeight.bold,
|
||||
color: theme.colors.gray700,
|
||||
marginBottom: 12,
|
||||
borderRadius: 16,
|
||||
padding: 4,
|
||||
},
|
||||
chartContainer: {
|
||||
alignItems: "center",
|
||||
@ -107,26 +113,22 @@ const styles = StyleSheet.create({
|
||||
},
|
||||
chart: {
|
||||
marginVertical: 8,
|
||||
borderRadius: theme.borderRadius.lg,
|
||||
borderRadius: 12,
|
||||
},
|
||||
legend: {
|
||||
flexDirection: "row",
|
||||
justifyContent: "center",
|
||||
gap: 20,
|
||||
gap: 24,
|
||||
paddingTop: 8,
|
||||
},
|
||||
legendItem: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
gap: 6,
|
||||
gap: 8,
|
||||
},
|
||||
legendDot: {
|
||||
width: 10,
|
||||
height: 10,
|
||||
borderRadius: 5,
|
||||
},
|
||||
legendText: {
|
||||
fontSize: theme.typography.fontSize.sm,
|
||||
color: theme.colors.gray500,
|
||||
},
|
||||
});
|
||||
|
||||
@ -35,6 +35,7 @@ export const API_ENDPOINTS = {
|
||||
USERS: {
|
||||
LIST: "/api/users",
|
||||
STATISTICS: "/api/users/statistics",
|
||||
GYM: "/api/users/gym",
|
||||
},
|
||||
GYMS: "/api/gyms",
|
||||
ATTENDANCE: {
|
||||
|
||||
129
apps/mobile/src/contexts/ThemeContext.tsx
Normal file
129
apps/mobile/src/contexts/ThemeContext.tsx
Normal 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;
|
||||
}
|
||||
167
apps/mobile/src/styles/colors.ts
Normal file
167
apps/mobile/src/styles/colors.ts
Normal file
@ -0,0 +1,167 @@
|
||||
/**
|
||||
* FitAI Color System - BOLD MODERN
|
||||
* Electric Blue palette with high-energy fitness app aesthetics
|
||||
*/
|
||||
|
||||
export interface ColorScheme {
|
||||
// Primary Colors
|
||||
primary: string;
|
||||
primaryDark: string;
|
||||
primaryLight: string;
|
||||
|
||||
// Accent Colors
|
||||
accent: string;
|
||||
secondary: string;
|
||||
terracotta: string;
|
||||
sand: string;
|
||||
|
||||
// Status Colors
|
||||
success: string;
|
||||
warning: string;
|
||||
danger: string;
|
||||
info: string;
|
||||
|
||||
// Activity Ring Colors
|
||||
calories: string;
|
||||
water: string;
|
||||
workouts: 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;
|
||||
|
||||
// Gradients (as arrays)
|
||||
primaryGradient: string[];
|
||||
cardGradient: string[];
|
||||
|
||||
// Legacy compatibility
|
||||
white: string;
|
||||
black: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Light Mode - Bold & Energetic
|
||||
*/
|
||||
export const lightColors: ColorScheme = {
|
||||
// Primary Colors - Electric Blue
|
||||
primary: "#0066FF",
|
||||
primaryDark: "#0052CC",
|
||||
primaryLight: "#3385FF",
|
||||
|
||||
// Accent Colors
|
||||
accent: "#7B2CBF", // Purple
|
||||
secondary: "#FF3B7A", // Hot Pink
|
||||
terracotta: "#FF6B35", // Neon Orange
|
||||
sand: "#FFD60A", // Electric Yellow
|
||||
|
||||
// Status Colors - Vibrant
|
||||
success: "#00D26A",
|
||||
warning: "#FFB800",
|
||||
danger: "#FF3B3B",
|
||||
info: "#00B8D9",
|
||||
|
||||
// Activity Ring Colors
|
||||
calories: "#FF6B35", // Orange for calories
|
||||
water: "#00B8D9", // Cyan for water
|
||||
workouts: "#0066FF", // Blue for workouts
|
||||
|
||||
// Neutrals - Bold dark on light
|
||||
background: "#F5F5F7",
|
||||
surface: "#FFFFFF",
|
||||
surfaceElevated: "#FFFFFF",
|
||||
|
||||
// Text - High contrast dark
|
||||
textPrimary: "#1A1A1A",
|
||||
textSecondary: "#4A4A4A",
|
||||
textTertiary: "#8E8E93",
|
||||
|
||||
// Borders
|
||||
border: "#E5E5EA",
|
||||
borderLight: "#F0F0F5",
|
||||
|
||||
// Overlays
|
||||
overlay: "rgba(0, 0, 0, 0.5)",
|
||||
overlayLight: "rgba(0, 0, 0, 0.03)",
|
||||
|
||||
// Gradients
|
||||
primaryGradient: ["#0066FF", "#0052CC"],
|
||||
cardGradient: ["#FFFFFF", "#F8F8FA"],
|
||||
|
||||
// Legacy
|
||||
white: "#FFFFFF",
|
||||
black: "#1A1A1A",
|
||||
};
|
||||
|
||||
/**
|
||||
* Dark Mode - Premium & Immersive
|
||||
*/
|
||||
export const darkColors: ColorScheme = {
|
||||
// Primary Colors - Electric Blue (brighter on dark)
|
||||
primary: "#0A84FF",
|
||||
primaryDark: "#0066FF",
|
||||
primaryLight: "#5AC8FA",
|
||||
|
||||
// Accent Colors
|
||||
accent: "#BF5AF2", // Purple
|
||||
secondary: "#FF375F", // Hot Pink
|
||||
terracotta: "#FF9500", // Orange
|
||||
sand: "#FFD60A", // Yellow
|
||||
|
||||
// Status Colors
|
||||
success: "#30D158",
|
||||
warning: "#FFD60A",
|
||||
danger: "#FF453A",
|
||||
info: "#64D2FF",
|
||||
|
||||
// Activity Ring Colors (even brighter for dark mode)
|
||||
calories: "#FF9500",
|
||||
water: "#64D2FF",
|
||||
workouts: "#0A84FF",
|
||||
|
||||
// Neutrals - Dark backgrounds
|
||||
background: "#000000",
|
||||
surface: "#1C1C1E",
|
||||
surfaceElevated: "#2C2C2E",
|
||||
|
||||
// Text - Bright on dark
|
||||
textPrimary: "#FFFFFF",
|
||||
textSecondary: "#EBEBF5",
|
||||
textTertiary: "#8E8E93",
|
||||
|
||||
// Borders
|
||||
border: "#38383A",
|
||||
borderLight: "#48484A",
|
||||
|
||||
// Overlays
|
||||
overlay: "rgba(0, 0, 0, 0.6)",
|
||||
overlayLight: "rgba(255, 255, 255, 0.05)",
|
||||
|
||||
// Gradients
|
||||
primaryGradient: ["#0A84FF", "#0066FF"],
|
||||
cardGradient: ["#1C1C1E", "#2C2C2E"],
|
||||
|
||||
// Legacy
|
||||
white: "#FFFFFF",
|
||||
black: "#000000",
|
||||
};
|
||||
|
||||
/**
|
||||
* Get color scheme based on theme mode
|
||||
*/
|
||||
export const getColors = (mode: "light" | "dark"): ColorScheme => {
|
||||
return mode === "dark" ? darkColors : lightColors;
|
||||
};
|
||||
@ -1,191 +1,159 @@
|
||||
/**
|
||||
* Modern Design System Theme
|
||||
* Centralized theme configuration with gradients, colors, shadows, and spacing
|
||||
* FitAI Design System Theme
|
||||
* Minimalist theme with light/dark mode support
|
||||
* @deprecated Use useTheme() hook instead for dynamic theming
|
||||
*/
|
||||
|
||||
import { lightColors, darkColors } from "./colors";
|
||||
import { typography as typographySystem } from "./typography";
|
||||
|
||||
/**
|
||||
* Legacy theme object for backward compatibility
|
||||
* New components should use useTheme() hook instead
|
||||
*/
|
||||
export const theme = {
|
||||
// Color Palette
|
||||
colors: {
|
||||
// Primary colors
|
||||
primary: '#3b82f6',
|
||||
primaryDark: '#2563eb',
|
||||
primaryLight: '#60a5fa',
|
||||
secondary: '#8b5cf6',
|
||||
// Color Palette (light mode - for legacy components)
|
||||
colors: {
|
||||
...lightColors,
|
||||
|
||||
// Accent colors
|
||||
purple: '#8b5cf6',
|
||||
purpleDark: '#7c3aed',
|
||||
pink: '#ec4899',
|
||||
// Legacy color mappings (deprecated - use new colors instead)
|
||||
secondary: "#8b5cf6", // Old purple - deprecated
|
||||
purple: "#A9B4A0", // Mapped to accent
|
||||
purpleDark: "#5A7A6E",
|
||||
pink: "#C1876B", // Mapped to terracotta
|
||||
successLight: "#8DB76A",
|
||||
gray50: "#F2EFE9",
|
||||
gray100: "#E8E4DF",
|
||||
gray200: "#E8E4DF",
|
||||
gray300: "#B8BFB5",
|
||||
gray400: "#8B9A8F",
|
||||
gray500: "#5C6B61",
|
||||
gray600: "#5C6B61",
|
||||
gray700: "#2C3731",
|
||||
gray800: "#2C3731",
|
||||
gray900: "#2C3731",
|
||||
},
|
||||
|
||||
// Success
|
||||
success: '#10b981',
|
||||
successDark: '#059669',
|
||||
successLight: '#34d399',
|
||||
// Typography (updated to new system)
|
||||
typography: typographySystem,
|
||||
|
||||
// Warning
|
||||
warning: '#f59e0b',
|
||||
warningDark: '#d97706',
|
||||
// Spacing Scale (updated for minimalism)
|
||||
spacing: {
|
||||
xs: 4,
|
||||
sm: 8,
|
||||
md: 12,
|
||||
lg: 16,
|
||||
xl: 24, // Increased from 20
|
||||
"2xl": 32, // Increased from 24
|
||||
"3xl": 40, // Increased from 32
|
||||
"4xl": 48, // New
|
||||
"5xl": 64, // New
|
||||
},
|
||||
|
||||
// Danger
|
||||
danger: '#ef4444',
|
||||
dangerDark: '#dc2626',
|
||||
// Border Radius (reduced for minimalism)
|
||||
borderRadius: {
|
||||
sm: 4,
|
||||
md: 6,
|
||||
lg: 10,
|
||||
xl: 12, // Reduced from 16
|
||||
"2xl": 16, // Reduced from 20
|
||||
"3xl": 20, // Reduced from 24
|
||||
full: 9999,
|
||||
},
|
||||
|
||||
// Neutrals
|
||||
white: '#ffffff',
|
||||
black: '#000000',
|
||||
gray50: '#f9fafb',
|
||||
gray100: '#f3f4f6',
|
||||
gray200: '#e5e7eb',
|
||||
gray300: '#d1d5db',
|
||||
gray400: '#9ca3af',
|
||||
gray500: '#6b7280',
|
||||
gray600: '#4b5563',
|
||||
gray700: '#374151',
|
||||
gray800: '#1f2937',
|
||||
gray900: '#111827',
|
||||
|
||||
// Backgrounds
|
||||
background: '#f5f5f5',
|
||||
backgroundDark: '#0f172a',
|
||||
surface: '#ffffff',
|
||||
surfaceDark: '#1e293b',
|
||||
// Shadow System (simplified)
|
||||
shadows: {
|
||||
subtle: {
|
||||
shadowColor: "#000",
|
||||
shadowOffset: { width: 0, height: 1 },
|
||||
shadowOpacity: 0.05,
|
||||
shadowRadius: 3,
|
||||
elevation: 1,
|
||||
},
|
||||
|
||||
// Gradient Definitions
|
||||
gradients: {
|
||||
primary: ['#3b82f6', '#8b5cf6'] as const,
|
||||
primaryVertical: ['#3b82f6', '#2563eb'] as const,
|
||||
success: ['#10b981', '#059669'] as const,
|
||||
warning: ['#f59e0b', '#d97706'] as const,
|
||||
danger: ['#ef4444', '#ec4899'] as const,
|
||||
purple: ['#8b5cf6', '#7c3aed'] as const,
|
||||
ocean: ['#06b6d4', '#3b82f6'] as const,
|
||||
sunset: ['#f59e0b', '#ef4444'] as const,
|
||||
forest: ['#10b981', '#059669'] as const,
|
||||
lavender: ['#a78bfa', '#ec4899'] as const,
|
||||
dark: ['#1e293b', '#0f172a'] as const,
|
||||
medium: {
|
||||
shadowColor: "#000",
|
||||
shadowOffset: { width: 0, height: 2 },
|
||||
shadowOpacity: 0.08,
|
||||
shadowRadius: 8,
|
||||
elevation: 2,
|
||||
},
|
||||
|
||||
// Shadow System
|
||||
shadows: {
|
||||
subtle: {
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: 1 },
|
||||
shadowOpacity: 0.05,
|
||||
shadowRadius: 2,
|
||||
elevation: 2,
|
||||
},
|
||||
medium: {
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: 2 },
|
||||
shadowOpacity: 0.1,
|
||||
shadowRadius: 4,
|
||||
elevation: 3,
|
||||
},
|
||||
strong: {
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: 4 },
|
||||
shadowOpacity: 0.15,
|
||||
shadowRadius: 8,
|
||||
elevation: 5,
|
||||
},
|
||||
glow: {
|
||||
shadowColor: '#3b82f6',
|
||||
shadowOffset: { width: 0, height: 4 },
|
||||
shadowOpacity: 0.3,
|
||||
shadowRadius: 12,
|
||||
elevation: 8,
|
||||
},
|
||||
glowDanger: {
|
||||
shadowColor: '#ef4444',
|
||||
shadowOffset: { width: 0, height: 4 },
|
||||
shadowOpacity: 0.3,
|
||||
shadowRadius: 12,
|
||||
elevation: 8,
|
||||
},
|
||||
strong: {
|
||||
shadowColor: "#000",
|
||||
shadowOffset: { width: 0, height: 4 },
|
||||
shadowOpacity: 0.12,
|
||||
shadowRadius: 16,
|
||||
elevation: 4,
|
||||
},
|
||||
|
||||
// Typography
|
||||
typography: {
|
||||
// Font sizes
|
||||
fontSize: {
|
||||
xs: 12,
|
||||
sm: 14,
|
||||
base: 16,
|
||||
lg: 18,
|
||||
xl: 20,
|
||||
'2xl': 24,
|
||||
'3xl': 28,
|
||||
'4xl': 32,
|
||||
'5xl': 36,
|
||||
},
|
||||
// Font weights
|
||||
fontWeight: {
|
||||
normal: '400' as const,
|
||||
medium: '500' as const,
|
||||
semibold: '600' as const,
|
||||
bold: '700' as const,
|
||||
extrabold: '800' as const,
|
||||
},
|
||||
// Line heights
|
||||
lineHeight: {
|
||||
tight: 1.2,
|
||||
normal: 1.5,
|
||||
relaxed: 1.75,
|
||||
},
|
||||
// Legacy glow shadows (deprecated - avoid in new designs)
|
||||
glow: {
|
||||
shadowColor: "#6B9080",
|
||||
shadowOffset: { width: 0, height: 4 },
|
||||
shadowOpacity: 0.2,
|
||||
shadowRadius: 12,
|
||||
elevation: 6,
|
||||
},
|
||||
|
||||
// Spacing Scale
|
||||
spacing: {
|
||||
xs: 4,
|
||||
sm: 8,
|
||||
md: 12,
|
||||
lg: 16,
|
||||
xl: 20,
|
||||
'2xl': 24,
|
||||
'3xl': 32,
|
||||
'4xl': 40,
|
||||
'5xl': 48,
|
||||
glowDanger: {
|
||||
shadowColor: "#B66B6B",
|
||||
shadowOffset: { width: 0, height: 4 },
|
||||
shadowOpacity: 0.2,
|
||||
shadowRadius: 12,
|
||||
elevation: 6,
|
||||
},
|
||||
},
|
||||
|
||||
// Border Radius
|
||||
borderRadius: {
|
||||
sm: 4,
|
||||
md: 8,
|
||||
lg: 12,
|
||||
xl: 16,
|
||||
'2xl': 20,
|
||||
'3xl': 24,
|
||||
full: 9999,
|
||||
// Animation Timing (simplified)
|
||||
animation: {
|
||||
duration: {
|
||||
fast: 200,
|
||||
normal: 300,
|
||||
slow: 500,
|
||||
},
|
||||
},
|
||||
|
||||
// Animation Timing
|
||||
animation: {
|
||||
duration: {
|
||||
fast: 150,
|
||||
normal: 250,
|
||||
slow: 350,
|
||||
},
|
||||
easing: {
|
||||
easeIn: 'ease-in',
|
||||
easeOut: 'ease-out',
|
||||
easeInOut: 'ease-in-out',
|
||||
},
|
||||
},
|
||||
// Gradients (kept for legacy compatibility - should be avoided in new designs)
|
||||
gradients: {
|
||||
primary: ["#6B9080", "#8AAE9E"] as const,
|
||||
success: ["#7BA05B", "#8DB76A"] as const,
|
||||
warning: ["#D4A574", "#E0B886"] as const,
|
||||
danger: ["#B66B6B", "#C87D7D"] as const,
|
||||
// Legacy gradients (deprecated)
|
||||
purple: ["#8b5cf6", "#7c3aed"] as const,
|
||||
ocean: ["#06b6d4", "#3b82f6"] as const,
|
||||
sunset: ["#f59e0b", "#ef4444"] as const,
|
||||
forest: ["#10b981", "#059669"] as const,
|
||||
lavender: ["#a78bfa", "#ec4899"] as const,
|
||||
dark: ["#1e293b", "#0f172a"] as const,
|
||||
primaryVertical: ["#6B9080", "#5A7A6E"] as const,
|
||||
},
|
||||
};
|
||||
|
||||
// Glassmorphism
|
||||
glass: {
|
||||
light: {
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.7)',
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(255, 255, 255, 0.3)',
|
||||
},
|
||||
dark: {
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.3)',
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(255, 255, 255, 0.1)',
|
||||
},
|
||||
},
|
||||
/**
|
||||
* Dark theme object
|
||||
* @deprecated Use useTheme() hook instead
|
||||
*/
|
||||
export const darkTheme = {
|
||||
...theme,
|
||||
colors: {
|
||||
...darkColors,
|
||||
|
||||
// Legacy color mappings
|
||||
secondary: "#8b5cf6", // Old purple - deprecated
|
||||
purple: "#B5C2B0", // Mapped to dark accent
|
||||
purpleDark: "#6B9080",
|
||||
pink: "#D4A285", // Mapped to dark terracotta
|
||||
successLight: "#8DB76A",
|
||||
gray50: "#2F3432",
|
||||
gray100: "#3A3F3C",
|
||||
gray200: "#3A3F3C",
|
||||
gray300: "#7A8379",
|
||||
gray400: "#7A8379",
|
||||
gray500: "#B8BFB5",
|
||||
gray600: "#B8BFB5",
|
||||
gray700: "#E8E6E1",
|
||||
gray800: "#E8E6E1",
|
||||
gray900: "#E8E6E1",
|
||||
},
|
||||
};
|
||||
|
||||
export type Theme = typeof theme;
|
||||
export type DarkTheme = typeof darkTheme;
|
||||
|
||||
174
apps/mobile/src/styles/typography.ts
Normal file
174
apps/mobile/src/styles/typography.ts
Normal file
@ -0,0 +1,174 @@
|
||||
/**
|
||||
* FitAI Typography System - BOLD MODERN
|
||||
* High-impact typography with clear hierarchy using system fonts
|
||||
*/
|
||||
|
||||
import { TextStyle } from "react-native";
|
||||
|
||||
/**
|
||||
* Font Sizes - Larger for bold impact
|
||||
*/
|
||||
export const fontSize = {
|
||||
xs: 12,
|
||||
sm: 14,
|
||||
base: 16,
|
||||
md: 18, // Body emphasis
|
||||
lg: 22,
|
||||
xl: 26,
|
||||
"2xl": 32,
|
||||
"3xl": 40,
|
||||
"4xl": 52,
|
||||
"5xl": 64,
|
||||
} as const;
|
||||
|
||||
/**
|
||||
* Font Weights - Emphasize bold
|
||||
*/
|
||||
export const fontWeight = {
|
||||
regular: "400" as TextStyle["fontWeight"],
|
||||
medium: "500" as TextStyle["fontWeight"],
|
||||
semibold: "600" as TextStyle["fontWeight"],
|
||||
bold: "700" as TextStyle["fontWeight"],
|
||||
extrabold: "800" as TextStyle["fontWeight"],
|
||||
} as const;
|
||||
|
||||
/**
|
||||
* Line Heights
|
||||
*/
|
||||
export const lineHeight = {
|
||||
tight: 1.15,
|
||||
normal: 1.4,
|
||||
relaxed: 1.6,
|
||||
} as const;
|
||||
|
||||
/**
|
||||
* Letter Spacing
|
||||
*/
|
||||
export const letterSpacing = {
|
||||
tight: -1,
|
||||
normal: 0,
|
||||
wide: 0.5,
|
||||
wider: 1.5,
|
||||
} as const;
|
||||
|
||||
/**
|
||||
* Typography Presets
|
||||
* Ready-to-use text styles for common use cases
|
||||
*/
|
||||
export interface TypographyPresets {
|
||||
h1: TextStyle;
|
||||
h2: TextStyle;
|
||||
h3: TextStyle;
|
||||
h4: TextStyle;
|
||||
body: TextStyle;
|
||||
bodyEmphasis: TextStyle;
|
||||
label: TextStyle;
|
||||
stat: TextStyle;
|
||||
statLarge: TextStyle;
|
||||
caption: TextStyle;
|
||||
button: TextStyle;
|
||||
}
|
||||
|
||||
export const createTypographyPresets = (
|
||||
textPrimary: string,
|
||||
textSecondary: string,
|
||||
textTertiary: string,
|
||||
): TypographyPresets => ({
|
||||
// Display Text (Screen Titles) - Extra Bold
|
||||
h1: {
|
||||
fontSize: fontSize["4xl"],
|
||||
fontWeight: fontWeight.extrabold,
|
||||
letterSpacing: letterSpacing.tight,
|
||||
lineHeight: fontSize["4xl"] * lineHeight.tight,
|
||||
color: textPrimary,
|
||||
},
|
||||
|
||||
// Section Headers - Bold
|
||||
h2: {
|
||||
fontSize: fontSize["2xl"],
|
||||
fontWeight: fontWeight.bold,
|
||||
letterSpacing: -0.5,
|
||||
color: textPrimary,
|
||||
},
|
||||
|
||||
// Card Titles - Semibold
|
||||
h3: {
|
||||
fontSize: fontSize.lg,
|
||||
fontWeight: fontWeight.semibold,
|
||||
letterSpacing: -0.3,
|
||||
color: textPrimary,
|
||||
},
|
||||
|
||||
// Small Headers
|
||||
h4: {
|
||||
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.xs,
|
||||
fontWeight: fontWeight.semibold,
|
||||
letterSpacing: letterSpacing.wider,
|
||||
textTransform: "uppercase",
|
||||
color: textTertiary,
|
||||
},
|
||||
|
||||
// Stats/Numbers - Bold Large
|
||||
stat: {
|
||||
fontSize: fontSize["3xl"],
|
||||
fontWeight: fontWeight.bold,
|
||||
letterSpacing: -1,
|
||||
color: textPrimary,
|
||||
},
|
||||
|
||||
// Large Stats (Hero numbers)
|
||||
statLarge: {
|
||||
fontSize: fontSize["5xl"],
|
||||
fontWeight: fontWeight.extrabold,
|
||||
letterSpacing: -2,
|
||||
lineHeight: fontSize["5xl"] * lineHeight.tight,
|
||||
color: textPrimary,
|
||||
},
|
||||
|
||||
// Caption/Small text
|
||||
caption: {
|
||||
fontSize: fontSize.xs,
|
||||
fontWeight: fontWeight.regular,
|
||||
color: textTertiary,
|
||||
},
|
||||
|
||||
// Button Text
|
||||
button: {
|
||||
fontSize: fontSize.base,
|
||||
fontWeight: fontWeight.bold,
|
||||
letterSpacing: 0.5,
|
||||
},
|
||||
});
|
||||
|
||||
/**
|
||||
* Typography utility object
|
||||
*/
|
||||
export const typography = {
|
||||
fontSize,
|
||||
fontWeight,
|
||||
lineHeight,
|
||||
letterSpacing,
|
||||
};
|
||||
220
apps/mobile/src/utils/activityFeed.ts
Normal file
220
apps/mobile/src/utils/activityFeed.ts
Normal file
@ -0,0 +1,220 @@
|
||||
/**
|
||||
* Activity Feed Utilities
|
||||
*
|
||||
* Combines multiple data sources (check-ins, goals, nutrition) into a unified activity feed
|
||||
*/
|
||||
|
||||
import type { AttendanceStatistics } from "../api/types";
|
||||
import type { FitnessGoal } from "../services/fitnessGoals";
|
||||
|
||||
export enum ActivityType {
|
||||
GYM_CHECKIN = "gym_checkin",
|
||||
GOAL_COMPLETED = "goal_completed",
|
||||
GOAL_CREATED = "goal_created",
|
||||
NUTRITION_MILESTONE = "nutrition_milestone",
|
||||
}
|
||||
|
||||
export interface ActivityItem {
|
||||
id: string;
|
||||
type: ActivityType;
|
||||
title: string;
|
||||
timestamp: Date;
|
||||
duration?: number; // in minutes
|
||||
metadata?: Record<string, any>;
|
||||
}
|
||||
|
||||
/**
|
||||
* Convert attendance check-ins to activity items
|
||||
*/
|
||||
export function checkInsToActivities(
|
||||
attendance: AttendanceStatistics,
|
||||
): ActivityItem[] {
|
||||
return attendance.recentCheckIns.map((checkIn) => {
|
||||
const checkInDate = new Date(checkIn.checkInTime);
|
||||
|
||||
return {
|
||||
id: `checkin-${checkIn.id}`,
|
||||
type: ActivityType.GYM_CHECKIN,
|
||||
title: "Gym Check-in",
|
||||
timestamp: checkInDate,
|
||||
duration: checkIn.duration || undefined,
|
||||
metadata: {
|
||||
checkOutTime: checkIn.checkOutTime,
|
||||
},
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Convert completed goals to activity items
|
||||
*/
|
||||
export function completedGoalsToActivities(
|
||||
goals: FitnessGoal[],
|
||||
): ActivityItem[] {
|
||||
return goals
|
||||
.filter((goal) => goal.status === "completed" && goal.completedDate)
|
||||
.map((goal) => {
|
||||
const completedDate = new Date(goal.completedDate!);
|
||||
|
||||
return {
|
||||
id: `goal-completed-${goal.id}`,
|
||||
type: ActivityType.GOAL_COMPLETED,
|
||||
title: goal.title,
|
||||
timestamp: completedDate,
|
||||
metadata: {
|
||||
goalType: goal.goalType,
|
||||
priority: goal.priority,
|
||||
targetValue: goal.targetValue,
|
||||
unit: goal.unit,
|
||||
},
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Convert recently created goals to activity items
|
||||
*/
|
||||
export function newGoalsToActivities(
|
||||
goals: FitnessGoal[],
|
||||
daysBack: number = 7,
|
||||
): ActivityItem[] {
|
||||
const cutoffDate = new Date();
|
||||
cutoffDate.setDate(cutoffDate.getDate() - daysBack);
|
||||
|
||||
return goals
|
||||
.filter((goal) => {
|
||||
const createdDate = new Date(goal.createdAt);
|
||||
return goal.status === "active" && createdDate > cutoffDate;
|
||||
})
|
||||
.map((goal) => {
|
||||
const createdDate = new Date(goal.createdAt);
|
||||
|
||||
return {
|
||||
id: `goal-created-${goal.id}`,
|
||||
type: ActivityType.GOAL_CREATED,
|
||||
title: goal.title,
|
||||
timestamp: createdDate,
|
||||
metadata: {
|
||||
goalType: goal.goalType,
|
||||
priority: goal.priority,
|
||||
},
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Combine and sort all activities by timestamp (most recent first)
|
||||
*/
|
||||
export function combineActivities(
|
||||
...activityGroups: ActivityItem[][]
|
||||
): ActivityItem[] {
|
||||
const allActivities = activityGroups.flat();
|
||||
|
||||
return allActivities.sort(
|
||||
(a, b) => b.timestamp.getTime() - a.timestamp.getTime(),
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get recent activities limited to a specific count
|
||||
*/
|
||||
export function getRecentActivities(
|
||||
activities: ActivityItem[],
|
||||
limit: number = 5,
|
||||
): ActivityItem[] {
|
||||
return activities.slice(0, limit);
|
||||
}
|
||||
|
||||
/**
|
||||
* Format activity timestamp for display
|
||||
*/
|
||||
export function formatActivityTime(timestamp: Date): string {
|
||||
const now = new Date();
|
||||
const diffMs = now.getTime() - timestamp.getTime();
|
||||
const diffMins = Math.floor(diffMs / 60000);
|
||||
const diffHours = Math.floor(diffMs / 3600000);
|
||||
const diffDays = Math.floor(diffMs / 86400000);
|
||||
|
||||
// Today
|
||||
if (diffDays === 0) {
|
||||
if (diffMins < 60) {
|
||||
return diffMins <= 1 ? "Just now" : `${diffMins}m ago`;
|
||||
}
|
||||
return `Today, ${timestamp.toLocaleTimeString([], {
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
})}`;
|
||||
}
|
||||
|
||||
// Yesterday
|
||||
if (diffDays === 1) {
|
||||
return `Yesterday, ${timestamp.toLocaleTimeString([], {
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
})}`;
|
||||
}
|
||||
|
||||
// This week (within 7 days)
|
||||
if (diffDays < 7) {
|
||||
return `${diffDays}d ago`;
|
||||
}
|
||||
|
||||
// Older
|
||||
return timestamp.toLocaleDateString();
|
||||
}
|
||||
|
||||
/**
|
||||
* Format duration in minutes to human-readable string
|
||||
*/
|
||||
export function formatDuration(minutes?: number): string | undefined {
|
||||
if (!minutes) return undefined;
|
||||
|
||||
if (minutes < 60) {
|
||||
return `${minutes}m`;
|
||||
}
|
||||
|
||||
const hours = Math.floor(minutes / 60);
|
||||
const mins = minutes % 60;
|
||||
|
||||
if (mins === 0) {
|
||||
return `${hours}h`;
|
||||
}
|
||||
|
||||
return `${hours}h ${mins}m`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get icon name for activity type
|
||||
*/
|
||||
export function getActivityIcon(type: ActivityType): string {
|
||||
switch (type) {
|
||||
case ActivityType.GYM_CHECKIN:
|
||||
return "barbell";
|
||||
case ActivityType.GOAL_COMPLETED:
|
||||
return "trophy";
|
||||
case ActivityType.GOAL_CREATED:
|
||||
return "flag";
|
||||
case ActivityType.NUTRITION_MILESTONE:
|
||||
return "restaurant";
|
||||
default:
|
||||
return "checkmark-circle";
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Get activity title prefix/emoji
|
||||
*/
|
||||
export function getActivityEmoji(type: ActivityType): string {
|
||||
switch (type) {
|
||||
case ActivityType.GYM_CHECKIN:
|
||||
return "💪";
|
||||
case ActivityType.GOAL_COMPLETED:
|
||||
return "🏆";
|
||||
case ActivityType.GOAL_CREATED:
|
||||
return "🎯";
|
||||
case ActivityType.NUTRITION_MILESTONE:
|
||||
return "🍽️";
|
||||
default:
|
||||
return "✅";
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user