From c51a5f494f8365c4b50958158ce1db7d89b8f598 Mon Sep 17 00:00:00 2001
From: Eddy de Vink <github@eddydev.ink>
Date: Sat, 27 Jun 2026 22:41:08 +0200
Subject: [PATCH] feat: add history screen with measurement list

---
 src/components/MeasurementRow.tsx | 54 +++++++++++++++++++++++++++++++
 src/screens/HistoryScreen.tsx     | 41 +++++++++++++++++++++++
 2 files changed, 95 insertions(+)
 create mode 100644 src/components/MeasurementRow.tsx
 create mode 100644 src/screens/HistoryScreen.tsx

diff --git a/src/components/MeasurementRow.tsx b/src/components/MeasurementRow.tsx
new file mode 100644
index 0000000..0e4d4d8
--- /dev/null
+++ b/src/components/MeasurementRow.tsx
@@ -0,0 +1,54 @@
+import React from 'react'
+import { View, Text, StyleSheet } from 'react-native'
+import { Measurement } from '../types'
+
+type Props = { measurement: Measurement }
+
+export default function MeasurementRow({ measurement }: Props) {
+  return (
+    <View style={styles.row}>
+      <View style={styles.left}>
+        <Text style={styles.date}>
+          {new Date(measurement.measuredAt).toLocaleDateString('nl-NL', {
+            weekday: 'short',
+            day: 'numeric',
+            month: 'long',
+            year: 'numeric',
+          })}
+        </Text>
+        <Text style={styles.time}>
+          {new Date(measurement.measuredAt).toLocaleTimeString('nl-NL', {
+            hour: '2-digit',
+            minute: '2-digit',
+          })}
+        </Text>
+      </View>
+      <View style={styles.right}>
+        <Text style={styles.weight}>{measurement.weight.toFixed(1)} kg</Text>
+        <Text style={styles.detail}>BMI {measurement.bmi.toFixed(1)}</Text>
+      </View>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    backgroundColor: '#fff',
+    padding: 16,
+    marginHorizontal: 16,
+    marginVertical: 4,
+    borderRadius: 8,
+    shadowColor: '#000',
+    shadowOpacity: 0.05,
+    shadowRadius: 4,
+    elevation: 2,
+  },
+  left: {},
+  date: { fontSize: 14, fontWeight: '600' },
+  time: { fontSize: 12, color: '#666', marginTop: 2 },
+  right: { alignItems: 'flex-end' },
+  weight: { fontSize: 18, fontWeight: '700' },
+  detail: { fontSize: 12, color: '#666' },
+})
diff --git a/src/screens/HistoryScreen.tsx b/src/screens/HistoryScreen.tsx
new file mode 100644
index 0000000..b1b4bc7
--- /dev/null
+++ b/src/screens/HistoryScreen.tsx
@@ -0,0 +1,41 @@
+import React, { useCallback, useState } from 'react'
+import { View, FlatList, StyleSheet, Text } from 'react-native'
+import { useFocusEffect } from '@react-navigation/native'
+import { initDatabase, getAllMeasurements } from '../database/db'
+import { Measurement } from '../types'
+import MeasurementRow from '../components/MeasurementRow'
+
+export default function HistoryScreen() {
+  const [measurements, setMeasurements] = useState<Measurement[]>([])
+
+  useFocusEffect(
+    useCallback(() => {
+      const load = async () => {
+        await initDatabase()
+        const all = await getAllMeasurements()
+        setMeasurements(all)
+      }
+      load()
+    }, [])
+  )
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.count}>{measurements.length} metingen</Text>
+      <FlatList
+        data={measurements}
+        keyExtractor={item => item.id}
+        renderItem={({ item }) => <MeasurementRow measurement={item} />}
+        contentContainerStyle={measurements.length === 0 ? styles.empty : undefined}
+        ListEmptyComponent={<Text style={styles.emptyText}>Nog geen metingen</Text>}
+      />
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1, backgroundColor: '#f5f5f5' },
+  count: { fontSize: 14, color: '#666', padding: 16, paddingBottom: 8 },
+  empty: { flex: 1, justifyContent: 'center', alignItems: 'center' },
+  emptyText: { fontSize: 16, color: '#999' },
+})