eletrotupi / tcc/ frontend/app/(tabs)/insights.tsxbdaa191df0c0dac8feaaf032ece8a7f4046f9976
3.3 KB | 143 lines Raw
1
import { View, Text, ScrollView, StyleSheet } from "react-native";
2
3
import { ThemedText } from "@/components/misc/themed-text";
4
import { ThemedView } from "@/components/misc/themed-view";
5
import { ScreenLayout } from "@/components/ui/ScreenLayout";
6
import { useAuth } from "@/context/AuthContext";
7
import { Card } from "@/components/ui/Cards";
8
import { Section, SectionHeader } from "@/components/ui/Sections";
9
import { useThemeColor } from "@/hooks/use-theme-color";
10
import { Spacing, BorderRadius, Colors, Typography } from "@/constants/theme";
11
import { WeeklyResume } from "@/components/insights/WeeklyResume";
12
import { InsightCard, Highlight } from "@/components/insights/InsightCard";
13
import { MoodTrendWidget } from "@/components/insights/MoodTrendWidget";
14
import { TriggerPatternWidget } from "@/components/insights/TriggerPatternWidget";
15
16
export default function Insights() {
17
  const { user } = useAuth();
18
19
  return (
20
    <ScreenLayout
21
      userName={user.firstName}
22
      userAvatar={user.avatarURL}
23
      showNotificationBadge={true}
24
    >
25
      <WeeklyResume
26
        avgMood="Neutro"
27
        stats={[
28
          { label: "Média de Sono", value: "7.2h" },
29
          { label: "Humor Estável", value: "92%" },
30
        ]}
31
      />
32
33
      <Section>
34
        <SectionHeader title="Indicadores" />
35
36
        <InsightCard
37
          category="Energia"
38
          body={
39
            <Text style={styles.insightBody}>
40
              Aumento de <Highlight>20%</Highlight> correlacionado ao sono.
41
            </Text>
42
          }
43
          metric="+20%"
44
          accent="green"
45
        />
46
47
        <MoodTrendWidget />
48
49
        <TriggerPatternWidget />
50
      </Section>
51
    </ScreenLayout>
52
  );
53
}
54
55
const styles = StyleSheet.create({
56
  scrollView: {
57
    flex: 1,
58
    backgroundColor: Colors.light.background,
59
  },
60
  contentContainer: {
61
    padding: Spacing.containerPadding,
62
    paddingBottom: 40,
63
  },
64
65
  // Hero card
66
  heroCard: {
67
    backgroundColor: Colors.light.textBlack,
68
    borderRadius: BorderRadius.lg,
69
    padding: 20,
70
    marginBottom: Spacing.sectionGap,
71
  },
72
  heroLabel: {
73
    fontSize: 11,
74
    fontWeight: "600",
75
    letterSpacing: 0.8,
76
    textTransform: "uppercase",
77
    color: Colors.light.tint,
78
    marginBottom: 8,
79
  },
80
  heroScoreRow: {
81
    flexDirection: "row",
82
    alignItems: "center",
83
    gap: 10,
84
  },
85
  heroScore: {
86
    ...Typography.headlineXg,
87
    fontSize: 52,
88
    color: "#ffffff",
89
  },
90
  heroTrendIcon: {
91
    marginTop: 6,
92
  },
93
  heroDivider: {
94
    height: StyleSheet.hairlineWidth,
95
    backgroundColor: "rgba(255,255,255,0.12)",
96
    marginVertical: 16,
97
  },
98
  heroStats: {
99
    flexDirection: "row",
100
    gap: Spacing.sectionGap,
101
  },
102
  heroStatItem: {
103
    flex: 1,
104
  },
105
  heroStatLabel: {
106
    fontSize: 12,
107
    color: "rgba(255,255,255,0.45)",
108
    fontWeight: "500",
109
    marginBottom: 4,
110
  },
111
  heroStatValue: {
112
    ...Typography.bodyLg,
113
    fontSize: 20,
114
    color: "#ffffff",
115
  },
116
117
  // Insight cards
118
  insightCardInner: {
119
    flexDirection: "row",
120
    alignItems: "center",
121
    justifyContent: "space-between",
122
    gap: 12,
123
  },
124
  insightCardLeft: {
125
    flex: 1,
126
    gap: 6,
127
  },
128
  insightCategory: {
129
    fontSize: 11,
130
    fontWeight: "600",
131
    letterSpacing: 0.8,
132
    textTransform: "uppercase",
133
    color: Colors.light.textSecondary,
134
  },
135
  insightBody: {
136
    ...Typography.bodyMd,
137
    color: Colors.light.text,
138
  },
139
  insightMetric: {
140
    ...Typography.headlineLg,
141
    fontSize: 22,
142
  },
143
});