Some initial work

src/app/a.client.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import useSWR from "swr";
+import {fetcher} from "@/app/utils";
+import {useEffect, useState} from "react";
+import {Card, Metric, Text, Title} from "@tremor/react";
+
+export function ClientComponent({projectId}: {
+    projectId: number
+}) {
+    const {
+        data,
+        error,
+        isLoading
+    } = useSWR<any[]>(`http://cosmos:8074/time_entry?select=*,project:project_id(name)&project_id=eq.${projectId}`, fetcher);
+    const [a, setA] = useState(0)
+
+    useEffect(() => {
+        if (data) {
+            setA(data
+                .map((entry) => entry['raw_json']['seconds'])
+                .reduce((a, b) => a + b, 0));
+        }
+    }, [data]);
+
+    return (
+        <Card>
+            <Title>{data?.[0]['project']['name']}</Title>
+            <Text>Total</Text>
+            <Metric>{(a / (60 * 60)).toFixed(2)} hours</Metric>
+        </Card>
+    )
+}