refinenments

This commit is contained in:
dimitar committed 2026-03-12 20:19:48 +01:00
1 parent 5d6166df1b
commit 064dafad57
6 files changed
+635 -245

No files matched your search

+111 -52
View File
@@ -258,60 +258,97 @@ export default function GoalsScreen() {
)}
{/* Analytics Section */}
{statistics && (
<View style={styles.section}>
<MinimalCard variant="default">
{statistics &&
(statistics.weeklyTrend.length > 0 ||
statistics.goals.goalsByType.length > 0) && (
<View style={styles.section}>
<TouchableOpacity
style={styles.analyticsHeader}
onPress={() => setShowAnalytics(!showAnalytics)}
activeOpacity={0.7}
activeOpacity={0.85}
>
<View style={styles.analyticsHeaderLeft}>
<Ionicons
name="bar-chart-outline"
size={20}
color={colors.primary}
/>
<Text
style={[
typography.h3,
{ color: colors.textPrimary, marginLeft: 8 },
]}
>
📈 Progress Analytics
</Text>
</View>
<Ionicons
name={showAnalytics ? "chevron-up" : "chevron-down"}
size={20}
color={colors.textTertiary}
/>
</TouchableOpacity>
<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,
{ borderTopColor: colors.border },
]}
>
{statistics.weeklyTrend.length > 0 && (
<WeeklyProgressChart
weeklyData={statistics.weeklyTrend}
title="8-Week Trend"
/>
{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>
)}
{statistics.goals.goalsByType.length > 0 && (
<GoalTypeBreakdownChart
data={statistics.goals.goalsByType}
title="Goals by Type"
/>
)}
</View>
)}
</MinimalCard>
</View>
)}
</MinimalCard>
</TouchableOpacity>
</View>
)}
{/* Active Goals */}
<View style={styles.section}>
@@ -439,6 +476,9 @@ const styles = StyleSheet.create({
paddingHorizontal: 12,
borderRadius: 20,
},
analyticsCard: {
padding: 20,
},
analyticsHeader: {
flexDirection: "row",
justifyContent: "space-between",
@@ -448,13 +488,32 @@ const styles = StyleSheet.create({
flexDirection: "row",
alignItems: "center",
},
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: 16,
marginTop: 16,
paddingTop: 24,
marginTop: 20,
borderTopWidth: 1,
borderTopColor: "rgba(0,0,0,0.05)",
},
chartSection: {
marginBottom: 20,
},
goalsList: {
gap: 12,
gap: 16,
},
emptyState: {
alignItems: "center",