1 files changed, 114 insertions, 0 deletions
diff --git a/app/(tabs)/alerts.tsx b/app/(tabs)/alerts.tsx
new file mode 100644
index 0000000..590fe87
--- /dev/null
+++ b/app/(tabs)/alerts.tsx
@@ -0,0 +1,114 @@
+import { Ionicons } from "@expo/vector-icons";
+import { useEffect, useState } from "react";
+import { ActivityIndicator, Text, View } from "react-native";
+import { Alert, getAlerts } from "../../api";
+import { t } from "../../lib/locales";
+import { colors } from "../../lib/theme";
+import { Card, Divider, H2, Muted, Pill, Row, Screen } from "../../lib/ui";
+
+export default function AlertsScreen() {
+  const [alerts, setAlerts] = useState<Alert[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    console.log("AlertsScreen: Fetching alerts...");
+    setLoading(true);
+    getAlerts()
+      .then((data) => {
+        console.log("AlertsScreen: Received alerts:", data);
+        setAlerts(data);
+      })
+      .catch((error) => {
+        console.error("AlertsScreen: Error fetching alerts:", error);
+      })
+      .finally(() => {
+        setLoading(false);
+      });
+  }, []);
+
+  return (
+    <Screen>
+      {loading ? (
+        <View style={{ padding: 20, alignItems: "center" }}>
+          <ActivityIndicator size="large" color={colors.primary} />
+          <Text style={{ color: colors.onSurfaceVariant, marginTop: 10 }}>
+            {t("loadingAlerts")}
+          </Text>
+        </View>
+      ) : alerts.length === 0 ? (
+        <Card>
+          <View style={{ alignItems: "center", padding: 20 }}>
+            <Ionicons
+              name="checkmark-circle"
+              size={48}
+              color={colors.onSurfaceVariant}
+            />
+            <H2>{t("allClearTitle")}</H2>
+            <Muted style={{ textAlign: "center", marginTop: 5 }}>
+              {t("noAlertsToReview")}
+            </Muted>
+          </View>
+        </Card>
+      ) : (
+        alerts.map((alert) => (
+          <Card key={alert.id}>
+            <Row
+              left={
+                <View
+                  style={{
+                    flexDirection: "row",
+                    alignItems: "center",
+                    gap: 10,
+                  }}
+                >
+                  <Ionicons
+                    name={
+                      alert.severity === "needs_attention"
+                        ? "alert-circle"
+                        : "information-circle"
+                    }
+                    size={18}
+                    color={
+                      alert.severity === "needs_attention"
+                        ? colors.primary
+                        : colors.onSurfaceVariant
+                    }
+                  />
+                  <View style={{ flex: 1 }}>
+                    <H2>{alert.title}</H2>
+                    <Muted>{alert.timeLabel}</Muted>
+                  </View>
+                </View>
+              }
+              right={
+                <Pill
+                  label={
+                    alert.severity === "needs_attention"
+                      ? t("reviewPill")
+                      : t("fyiPill")
+                  }
+                  tone={
+                    alert.severity === "needs_attention"
+                      ? "attention"
+                      : "neutral"
+                  }
+                />
+              }
+            />
+
+            <Divider />
+
+            <H2>{t("whatHappened")}</H2>
+            <Muted>{alert.whatHappened}</Muted>
+
+            <H2>{t("whyItMatters")}</H2>
+            <Muted>{alert.whyItMatters}</Muted>
+
+            <H2>{t("suggestedNextStep")}</H2>
+            <Muted>{alert.suggestedAction}</Muted>
+          </Card>
+        ))
+      )}
+    </Screen>
+  );
+}