1 files changed, 135 insertions, 0 deletions
diff --git a/app/(tabs)/index.tsx b/app/(tabs)/index.tsx
new file mode 100644
index 0000000..a29ec87
--- /dev/null
+++ b/app/(tabs)/index.tsx
@@ -0,0 +1,135 @@
+import { Ionicons } from "@expo/vector-icons";
+import { useEffect, useState } from "react";
+import { getHomeData, HomeData } from "../../api";
+import { useDevice } from "../../lib/device";
+import { t } from "../../lib/locales";
+import { colors } from "../../lib/theme";
+import {
+  Card,
+  DeviceSelector,
+  Divider,
+  H2,
+  Muted,
+  Pill,
+  Row,
+  Screen,
+} from "../../lib/ui";
+
+export default function Index() {
+  const [data, setData] = useState<HomeData | null>(null);
+  const {
+    devices,
+    selectedDevice,
+    selectDevice,
+    isLoading: isDeviceLoading,
+  } = useDevice();
+
+  useEffect(() => {
+    if (selectedDevice) {
+      getHomeData(selectedDevice.id).then(setData);
+    }
+  }, [selectedDevice]);
+
+  if (!selectedDevice && !isDeviceLoading)
+    return (
+      <Screen>
+        <DeviceSelector
+          devices={devices}
+          selectedDevice={selectedDevice}
+          onSelectDevice={selectDevice}
+          isLoading={isDeviceLoading}
+        />
+        <Muted>{t("noDeviceSelectedPleaseLinkFirst")}</Muted>
+      </Screen>
+    );
+
+  if (!data)
+    return (
+      <Screen>
+        <DeviceSelector
+          devices={devices}
+          selectedDevice={selectedDevice}
+          onSelectDevice={selectDevice}
+          isLoading={isDeviceLoading}
+        />
+      </Screen>
+    );
+
+  return (
+    <Screen>
+      <DeviceSelector
+        devices={devices}
+        selectedDevice={selectedDevice}
+        onSelectDevice={selectDevice}
+        isLoading={isDeviceLoading}
+      />
+
+      <Card>
+        <Row
+          left={
+            <Row
+              left={
+                <H2>
+                  {data.overallStatus === "all_clear"
+                    ? t("allClear")
+                    : t("attentionNeeded")}
+                </H2>
+              }
+              right={
+                <Pill
+                  label={
+                    data.overallStatus === "all_clear"
+                      ? t("today")
+                      : t("review")
+                  }
+                  tone={
+                    data.overallStatus === "all_clear" ? "good" : "attention"
+                  }
+                />
+              }
+            />
+          }
+        />
+        <Muted>
+          {data.overallStatus === "all_clear"
+            ? t("nothingNeedsAttention")
+            : t("fewItemsNeedReview")}
+        </Muted>
+
+        <Divider />
+
+        <Row
+          left={
+            <Row
+              left={
+                <Row
+                  left={
+                    <Ionicons
+                      name={data.deviceOnline ? "wifi" : "wifi"}
+                      size={18}
+                      color={
+                        data.deviceOnline ? colors.onBackground : colors.primary
+                      }
+                    />
+                  }
+                  right={
+                    <H2>
+                      {data.deviceOnline
+                        ? t("deviceIsOnline")
+                        : t("deviceIsOffline")}
+                    </H2>
+                  }
+                />
+              }
+            />
+          }
+        />
+        <Muted>
+          {data.deviceOnline
+            ? t("protectionActive")
+            : t("reconnectingAutomatically")}
+        </Muted>
+      </Card>
+    </Screen>
+  );
+}