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