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

context and goals definition added

Browse Source
This commit is contained in:
dimitar committed 2025-11-26 01:30:15 +01:00
1 parent 28b5b52a8f
commit 803c205994
10 files changed
+1073 -170
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/mobile/src/app/(tabs)/goals.tsx
+193 -169
View File
@@ -11,44 +11,26 @@ import {
} from "react-native";
import { useAuth } from "@clerk/clerk-expo";
import { Ionicons } from "@expo/vector-icons";
import { API_BASE_URL, API_ENDPOINTS } from "../../config/api";
interface Recommendation {
id: string;
userId: string;
type: "short_term" | "medium_term" | "long_term";
content: string;
status: "pending" | "completed";
createdAt: string;
}
import { fitnessGoalsService, type FitnessGoal, type CreateGoalData } from "../../services/fitnessGoals";
import { GoalProgressCard } from "../../components/GoalProgressCard";
import { GoalCreationModal } from "../../components/GoalCreationModal";
export default function GoalsScreen() {
const { userId, getToken } = useAuth();
const [recommendations, setRecommendations] = useState<Recommendation[]>([]);
const [goals, setGoals] = useState<FitnessGoal[]>([]);
const [loading, setLoading] = useState(true);
const [refreshing, setRefreshing] = useState(false);
const [showCreateModal, setShowCreateModal] = useState(false);
const fetchRecommendations = async () => {
const fetchGoals = async () => {
if (!userId) return;
try {
const token = await getToken();
const response = await fetch(
`${API_BASE_URL}${API_ENDPOINTS.RECOMMENDATIONS}?userId=${userId}`,
{
headers: {
Authorization: `Bearer ${token}`,
},
}
);
if (response.ok) {
const data = await response.json();
setRecommendations(data);
} else {
console.error("Failed to fetch recommendations");
}
const data = await fitnessGoalsService.getGoals(userId, token);
setGoals(data);
} catch (error) {
console.error("Error fetching recommendations:", error);
console.error("Error fetching fitness goals:", error);
Alert.alert("Error", "Failed to load goals. Please try again.");
} finally {
setLoading(false);
setRefreshing(false);
@@ -56,99 +38,53 @@ export default function GoalsScreen() {
};
useEffect(() => {
fetchRecommendations();
fetchGoals();
}, [userId]);
const onRefresh = () => {
setRefreshing(true);
fetchRecommendations();
fetchGoals();
};
const toggleStatus = async (id: string, currentStatus: string) => {
const newStatus = currentStatus === "pending" ? "completed" : "pending";
// Optimistic update
setRecommendations(prev =>
prev.map(r => r.id === id ? { ...r, status: newStatus } : r)
);
const handleCreateGoal = async (goalData: CreateGoalData) => {
try {
const token = await getToken();
const response = await fetch(`${API_BASE_URL}${API_ENDPOINTS.RECOMMENDATIONS}`, {
method: "PUT",
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${token}`,
},
body: JSON.stringify({
id,
status: newStatus,
}),
});
if (!response.ok) {
// Revert on failure
setRecommendations(prev =>
prev.map(r => r.id === id ? { ...r, status: currentStatus as "pending" | "completed" } : r)
);
Alert.alert("Error", "Failed to update status");
}
const newGoal = await fitnessGoalsService.createGoal(goalData, token);
setGoals(prev => [newGoal, ...prev]);
Alert.alert("Success", "Goal created successfully!");
} catch (error) {
console.error(error);
// Revert on error
setRecommendations(prev =>
prev.map(r => r.id === id ? { ...r, status: currentStatus as "pending" | "completed" } : r)
);
Alert.alert("Error", "Failed to update status");
console.error("Error creating goal:", error);
throw error;
}
};
const renderSection = (
title: string,
type: "short_term" | "medium_term" | "long_term"
) => {
const items = recommendations.filter((r) => r.type === type);
return (
<View style={styles.section}>
<Text style={styles.sectionTitle}>{title}</Text>
{items.length === 0 ? (
<Text style={styles.emptyText}>No goals set yet.</Text>
) : (
items.map((rec) => (
<TouchableOpacity
key={rec.id}
style={[
styles.card,
rec.status === "completed" && styles.cardCompleted,
]}
onPress={() => toggleStatus(rec.id, rec.status)}
>
<View style={styles.checkbox}>
{rec.status === "completed" && (
<Ionicons name="checkmark" size={16} color="#fff" />
)}
</View>
<View style={styles.cardContent}>
<Text
style={[
styles.cardText,
rec.status === "completed" && styles.cardTextCompleted,
]}
>
{rec.content}
</Text>
<Text style={styles.dateText}>
{new Date(rec.createdAt).toLocaleDateString()}
</Text>
</View>
</TouchableOpacity>
))
)}
</View>
);
const handleCompleteGoal = async (goalId: string) => {
try {
const token = await getToken();
const updatedGoal = await fitnessGoalsService.completeGoal(goalId, token);
setGoals(prev => prev.map(g => g.id === goalId ? updatedGoal : g));
Alert.alert("Success", "Goal completed! 🎉");
} catch (error) {
console.error("Error completing goal:", error);
Alert.alert("Error", "Failed to complete goal. Please try again.");
}
};
const handleDeleteGoal = async (goalId: string) => {
try {
const token = await getToken();
await fitnessGoalsService.deleteGoal(goalId, token);
setGoals(prev => prev.filter(g => g.id !== goalId));
Alert.alert("Success", "Goal deleted");
} catch (error) {
console.error("Error deleting goal:", error);
Alert.alert("Error", "Failed to delete goal. Please try again.");
}
};
const activeGoals = goals.filter(g => g.status === 'active');
const completedGoals = goals.filter(g => g.status === 'completed');
if (loading && !refreshing) {
return (
<View style={styles.center}>
@@ -158,25 +94,105 @@ export default function GoalsScreen() {
}
return (
<ScrollView
style={styles.container}
refreshControl={
<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
}
>
<View style={styles.header}>
<Text style={styles.headerTitle}>My Goals</Text>
<Text style={styles.headerSubtitle}>
Track your fitness journey progress
</Text>
</View>
<View style={styles.container}>
<ScrollView
refreshControl={
<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
}
>
<View style={styles.header}>
<View>
<Text style={styles.headerTitle}>My Fitness Goals</Text>
<Text style={styles.headerSubtitle}>
Track your fitness journey progress
</Text>
</View>
</View>
{renderSection("Short Term Goals", "short_term")}
{renderSection("Medium Term Goals", "medium_term")}
{renderSection("Long Term Goals", "long_term")}
{/* Stats Summary */}
{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) /
activeGoals.length
)
: 0}%
</Text>
<Text style={styles.statLabel}>Avg Progress</Text>
</View>
</View>
)}
<View style={styles.footer} />
</ScrollView>
{/* Active Goals */}
<View style={styles.section}>
<Text style={styles.sectionTitle}>
Active Goals ({activeGoals.length})
</Text>
{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>
) : (
activeGoals.map((goal) => (
<GoalProgressCard
key={goal.id}
goal={goal}
onComplete={() => handleCompleteGoal(goal.id)}
onDelete={() => handleDeleteGoal(goal.id)}
/>
))
)}
</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)}
/>
))}
</View>
)}
<View style={styles.footer} />
</ScrollView>
{/* Floating Action Button */}
<TouchableOpacity
style={styles.fab}
onPress={() => setShowCreateModal(true)}
>
<Ionicons name="add" size={28} color="#fff" />
</TouchableOpacity>
{/* Create Goal Modal */}
<GoalCreationModal
visible={showCreateModal}
onClose={() => setShowCreateModal(false)}
onSubmit={handleCreateGoal}
/>
</View>
);
}
@@ -205,6 +221,34 @@ const styles = StyleSheet.create({
color: "#6b7280",
marginTop: 4,
},
statsContainer: {
flexDirection: "row",
padding: 16,
gap: 12,
},
statCard: {
flex: 1,
backgroundColor: "#fff",
padding: 16,
borderRadius: 12,
alignItems: "center",
shadowColor: "#000",
shadowOffset: { width: 0, height: 1 },
shadowOpacity: 0.05,
shadowRadius: 2,
elevation: 2,
},
statValue: {
fontSize: 24,
fontWeight: "bold",
color: "#2563eb",
marginBottom: 4,
},
statLabel: {
fontSize: 12,
color: "#6b7280",
fontWeight: "500",
},
section: {
padding: 20,
paddingTop: 10,
@@ -215,58 +259,38 @@ const styles = StyleSheet.create({
color: "#374151",
marginBottom: 12,
},
emptyText: {
fontStyle: "italic",
color: "#9ca3af",
},
card: {
backgroundColor: "#fff",
padding: 16,
borderRadius: 12,
marginBottom: 12,
flexDirection: "row",
alignItems: "flex-start",
shadowColor: "#000",
shadowOffset: { width: 0, height: 1 },
shadowOpacity: 0.05,
shadowRadius: 2,
elevation: 2,
},
cardCompleted: {
backgroundColor: "#f0fdf4", // light green
borderColor: "#bbf7d0",
borderWidth: 1,
},
checkbox: {
width: 24,
height: 24,
borderRadius: 6,
borderWidth: 2,
borderColor: "#d1d5db",
marginRight: 12,
marginTop: 2,
justifyContent: "center",
emptyState: {
alignItems: "center",
backgroundColor: "#fff",
paddingVertical: 40,
},
cardContent: {
flex: 1,
},
cardText: {
emptyText: {
fontSize: 16,
color: "#1f2937",
lineHeight: 24,
fontWeight: "500",
color: "#6b7280",
marginTop: 12,
},
cardTextCompleted: {
textDecorationLine: "line-through",
color: "#9ca3af",
},
dateText: {
fontSize: 12,
emptySubtext: {
fontSize: 14,
color: "#9ca3af",
marginTop: 4,
},
footer: {
height: 40,
height: 100,
},
fab: {
position: "absolute",
right: 20,
bottom: 20,
width: 56,
height: 56,
borderRadius: 28,
backgroundColor: "#2563eb",
justifyContent: "center",
alignItems: "center",
shadowColor: "#000",
shadowOffset: { width: 0, height: 4 },
shadowOpacity: 0.3,
shadowRadius: 8,
elevation: 8,
},
});
apps/mobile/src/app/(tabs)/recommendations.tsx
+28
View File
@@ -1,6 +1,7 @@
import { useEffect, useState } from "react";
import { View, Text, FlatList, ActivityIndicator, StyleSheet, RefreshControl } from "react-native";
import { useAuth } from "@clerk/clerk-expo";
import { Ionicons } from "@expo/vector-icons";
import { API_BASE_URL, API_ENDPOINTS } from "../../config/api";
interface Recommendation {
@@ -77,6 +78,15 @@ export default function RecommendationsScreen() {
return (
<View style={styles.container}>
<Text style={styles.header}>AI Recommendations</Text>
{/* AI Context Info Banner */}
<View style={styles.infoBanner}>
<Ionicons name="sparkles" size={20} color="#2563eb" />
<Text style={styles.infoBannerText}>
Personalized based on your active fitness goals and progress
</Text>
</View>
<FlatList
data={recommendations}
keyExtractor={(item) => item.id}
@@ -129,6 +139,24 @@ const styles = StyleSheet.create({
paddingBottom: 12,
color: '#1a1a1a',
},
infoBanner: {
flexDirection: 'row',
alignItems: 'center',
backgroundColor: '#eff6ff',
marginHorizontal: 16,
marginBottom: 12,
padding: 12,
borderRadius: 8,
borderLeftWidth: 3,
borderLeftColor: '#2563eb',
gap: 8,
},
infoBannerText: {
flex: 1,
fontSize: 13,
color: '#1e40af',
lineHeight: 18,
},
centered: {
flex: 1,
justifyContent: 'center',