feat: tap measurement in history to edit or delete

src/screens/HistoryScreen.tsx

@@ -1,11 +1,13 @@
 import React, { useCallback, useState } from 'react'
-import { View, FlatList, StyleSheet, Text, RefreshControl } from 'react-native'
+import { View, FlatList, StyleSheet, Text, RefreshControl, Alert } from 'react-native'
 import { useFocusEffect } from '@react-navigation/native'
-import { initDatabase, getAllMeasurements } from '../database/db'
+import { initDatabase, getAllMeasurements, deleteMeasurement } from '../database/db'
 import { Measurement } from '../types'
 import MeasurementRow from '../components/MeasurementRow'
 
-export default function HistoryScreen() {
+type Props = { navigation: any }
+
+export default function HistoryScreen({ navigation }: Props) {
   const [measurements, setMeasurements] = useState<Measurement[]>([])
   const [refreshing, setRefreshing] = useState(false)
 
@@ -27,13 +29,59 @@ export default function HistoryScreen() {
     setRefreshing(false)
   }, [load])
 
+  const handlePress = (m: Measurement) => {
+    const date = new Date(m.measuredAt).toLocaleDateString('nl-NL')
+    Alert.alert(
+      date,
+      `${m.weight.toFixed(1)} kg · BMI ${m.bmi.toFixed(1)}`,
+      [
+        { text: 'Annuleren', style: 'cancel' },
+        {
+          text: 'Wijzigen',
+          onPress: () => navigation.navigate('NewMeasurement', { measurement: m }),
+        },
+        {
+          text: 'Verwijderen',
+          style: 'destructive',
+          onPress: () => confirmDelete(m),
+        },
+      ]
+    )
+  }
+
+  const confirmDelete = (m: Measurement) => {
+    const date = new Date(m.measuredAt).toLocaleDateString('nl-NL')
+    Alert.alert(
+      'Verwijderen?',
+      `Meting van ${date} definitief verwijderen?`,
+      [
+        { text: 'Annuleren', style: 'cancel' },
+        {
+          text: 'Ja, verwijderen',
+          style: 'destructive',
+          onPress: async () => {
+            await initDatabase()
+            await deleteMeasurement(m.id)
+            try {
+              const { syncAll } = await import('../sync/syncService')
+              await syncAll()
+            } catch {}
+            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} />}
+        renderItem={({ item }) => (
+          <MeasurementRow measurement={item} onPress={() => handlePress(item)} />
+        )}
         contentContainerStyle={measurements.length === 0 ? styles.empty : undefined}
         ListEmptyComponent={<Text style={styles.emptyText}>Nog geen metingen</Text>}
         refreshControl={