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