eletrotupi / tcc/ frontend/app/(tabs)/insights.tsx6a5c371ce1221ee4c61aa0cb3c665e3793580dc3
3.2 KB | 135 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 { EnergySleepWidget } from "@/components/insights/EnergySleepWidget";
15
import { TriggerPatternWidget } from "@/components/insights/TriggerPatternWidget";
16

17
export default function Insights() {
18
  const { user } = useAuth();
19

20
  return (
21
    <ScreenLayout
22
      userName={user.firstName}
23
      userAvatar={user.avatarURL}
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" subtitle="Baseado nos últimos 7 dias" />
36

37
        <EnergySleepWidget />
38

39
        <MoodTrendWidget />
40

41
        <TriggerPatternWidget />
42
      </Section>
43
    </ScreenLayout>
44
  );
45
}
46

47
const styles = StyleSheet.create({
48
  scrollView: {
49
    flex: 1,
50
    backgroundColor: Colors.light.background,
51
  },
52
  contentContainer: {
53
    padding: Spacing.containerPadding,
54
    paddingBottom: 40,
55
  },
56

57
  // Hero card
58
  heroCard: {
59
    backgroundColor: Colors.light.textBlack,
60
    borderRadius: BorderRadius.lg,
61
    padding: 20,
62
    marginBottom: Spacing.sectionGap,
63
  },
64
  heroLabel: {
65
    fontSize: 11,
66
    fontWeight: "600",
67
    letterSpacing: 0.8,
68
    textTransform: "uppercase",
69
    color: Colors.light.tint,
70
    marginBottom: 8,
71
  },
72
  heroScoreRow: {
73
    flexDirection: "row",
74
    alignItems: "center",
75
    gap: 10,
76
  },
77
  heroScore: {
78
    ...Typography.headlineXg,
79
    fontSize: 52,
80
    color: "#ffffff",
81
  },
82
  heroTrendIcon: {
83
    marginTop: 6,
84
  },
85
  heroDivider: {
86
    height: StyleSheet.hairlineWidth,
87
    backgroundColor: "rgba(255,255,255,0.12)",
88
    marginVertical: 16,
89
  },
90
  heroStats: {
91
    flexDirection: "row",
92
    gap: Spacing.sectionGap,
93
  },
94
  heroStatItem: {
95
    flex: 1,
96
  },
97
  heroStatLabel: {
98
    fontSize: 12,
99
    color: "rgba(255,255,255,0.45)",
100
    fontWeight: "500",
101
    marginBottom: 4,
102
  },
103
  heroStatValue: {
104
    ...Typography.bodyLg,
105
    fontSize: 20,
106
    color: "#ffffff",
107
  },
108

109
  // Insight cards
110
  insightCardInner: {
111
    flexDirection: "row",
112
    alignItems: "center",
113
    justifyContent: "space-between",
114
    gap: 12,
115
  },
116
  insightCardLeft: {
117
    flex: 1,
118
    gap: 6,
119
  },
120
  insightCategory: {
121
    fontSize: 11,
122
    fontWeight: "600",
123
    letterSpacing: 0.8,
124
    textTransform: "uppercase",
125
    color: Colors.light.textSecondary,
126
  },
127
  insightBody: {
128
    ...Typography.bodyMd,
129
    color: Colors.light.text,
130
  },
131
  insightMetric: {
132
    ...Typography.headlineLg,
133
    fontSize: 22,
134
  },
135
});