refinenments
This commit is contained in:
1 parent
5d6166df1b
commit
064dafad57
6 files changed
+635
-245
No files matched your search
@@ -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",
|
||||
|
||||
Reference in new issue
Block a user