feat: show transaction info

app/index.tsx

@@ -1,8 +1,9 @@
 import { authClient } from '@/lib/auth-client';
-import { Button, Linking, ScrollView, Text, View } from 'react-native';
+import { Button, Linking, Pressable, ScrollView, Text, View } from 'react-native';
 import { useQuery, useZero } from "@rocicorp/zero/react";
 import { queries, type Mutators, type Schema } from '@money/shared';
 import { useEffect, useState } from 'react';
+import { transaction } from '@/shared/src/db';
 
 export default function HomeScreen() {
   const { data: session } = authClient.useSession();
@@ -34,7 +35,7 @@ export default function HomeScreen() {
   }, [transactions]);
 
   return (
-    <ScrollView>
+    <View>
       {plaidLink && <Button onPress={() => {
         z.mutate.link.updateTransactions();
       }} title="Update transactions" />}
@@ -42,15 +43,24 @@ export default function HomeScreen() {
         z.mutate.link.updateBalences();
       }} title="Update bal" />}
 
-      <View style={{ backgroundColor: 'red' }}>
-        {balances.map(bal => <View>
-          <Text style={{ fontFamily: 'mono', color: 'white' }}>{bal.name}: {bal.current} ({bal.avaliable})</Text>
-        </View>)}
-      </View>
+      <View style={{ flexDirection: "row" }}>
+        <View style={{ backgroundColor: '' }}>
+          {balances.map(bal => <View key={bal.id}>
+            <Text style={{ fontFamily: 'mono',  }}>{bal.name}: {bal.current} ({bal.avaliable})</Text>
+          </View>)}
+        </View>
 
-      {transactions.map((t, i) => <View style={{ backgroundColor: i == idx ? 'black' : undefined }} key={t.id}>
-        <Text style={{ fontFamily: 'mono', color: i == idx ? 'white' : undefined }}>{t.name} {t.amount}</Text>
-      </View>)}
-    </ScrollView>
+        <View>
+          {transactions.map((t, i) => <Pressable onHoverIn={() => {
+            setIdx(i);
+          }} style={{ backgroundColor: i == idx ? 'black' : undefined, cursor: 'default' as 'auto' }} key={t.id}>
+            <Text style={{ fontFamily: 'mono', color: i == idx ? 'white' : undefined }}>{new Date(t.datetime!).toDateString()} {t.name.substring(0, 50)} {t.amount}</Text>
+          </Pressable>)}
+        </View>
+        <ScrollView>
+          <Text style={{ fontFamily: 'mono' }}>{JSON.stringify(JSON.parse(transactions.at(idx)?.json || "null"), null, 4)}</Text>
+        </ScrollView>
+      </View>
+    </View>
   );
 }