eletrotupi / tcc/ frontend/components/insights/TriggerPatternWidget.tsx9e81281bc996022abab0d2183e9466b5b3553b51
1.9 KB | 88 lines Raw
1
import React from "react";
2
import { View, StyleSheet, ActivityIndicator } from "react-native";
3
import { Text } from "@/components/ui/Text";
4
import { Card } from "@/components/ui/Cards";
5
import { useInsight } from "@/hooks/useInsights.queries";
6
import { Colors, Spacing } from "@/constants/theme";
7
import { InsightCard } from "./InsightCard";
8
9
export const TriggerPatternWidget: React.FC = () => {
10
  const { data: insight, isLoading } = useInsight("TRIGGER_PATTERN");
11
12
  if (isLoading) {
13
    return (
14
      <Card style={styles.container}>
15
        <ActivityIndicator />
16
      </Card>
17
    );
18
  }
19
20
  if (!insight) {
21
    return (
22
      <InsightCard
23
        category="Gatilhos"
24
        body={
25
          <Text style={styles.empty}>
26
            Registre gatilhos com mais frequência para identificar padrões.
27
          </Text>
28
        }
29
        accent="neutral"
30
        metric="—"
31
      />
32
    );
33
  }
34
35
  const metadata = insight.metadata as {
36
    topCategory: string;
37
    topCount: number;
38
    total: number;
39
    distribution: Record<string, number>;
40
  };
41
42
  const pct =
43
    metadata.total > 0
44
      ? Math.round((metadata.topCount / metadata.total) * 100)
45
      : 0;
46
47
  return (
48
    <InsightCard
49
      category="Gatilhos"
50
      body={
51
        <View style={styles.bodyRow}>
52
          <Text style={styles.bodyText}>{insight.body}</Text>
53
        </View>
54
      }
55
      metric={`${pct}%`}
56
      accent="neutral"
57
      footnote="Percentual da categoria de gatilho mais frequente no período."
58
    />
59
  );
60
};
61
62
const styles = StyleSheet.create({
63
  container: {
64
    padding: Spacing.cardGap,
65
  },
66
  bodyRow: {
67
    flexDirection: "row",
68
    alignItems: "center",
69
    gap: 6,
70
  },
71
  iconWrap: {
72
    width: 22,
73
    height: 22,
74
    borderRadius: 11,
75
    alignItems: "center",
76
    justifyContent: "center",
77
  },
78
  bodyText: {
79
    flex: 1,
80
    fontSize: 14,
81
    color: Colors.light.text,
82
    lineHeight: 20,
83
  },
84
  empty: {
85
    color: Colors.light.lightSlateGray,
86
    marginTop: 4,
87
  },
88
});