ui: toon voorlaatste meting en gewichtsverschil in dashboard card

src/components/LatestMeasurementCard.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { View, Text, StyleSheet } from 'react-native'
 import { Measurement } from '../types'
 
-type Props = { measurement: Measurement | null }
+type Props = { measurements: Measurement[] }
 
 const rows: { label: string; key: keyof Measurement; suffix: string }[] = [
   { label: 'Gewicht', key: 'weight', suffix: 'kg' },
@@ -15,8 +15,8 @@ const rows: { label: string; key: keyof Measurement; suffix: string }[] = [
   { label: 'Stofwisseling', key: 'bmr', suffix: 'kcal' },
 ]
 
-export default function LatestMeasurementCard({ measurement }: Props) {
-  if (!measurement) {
+export default function LatestMeasurementCard({ measurements }: Props) {
+  if (measurements.length === 0) {
     return (
       <View style={styles.card}>
         <Text style={styles.emptyText}>Nog geen metingen</Text>
@@ -24,21 +24,38 @@ export default function LatestMeasurementCard({ measurement }: Props) {
     )
   }
 
+  const latest = measurements[0]
+  const previous = measurements[1]
+  const diff = previous ? (latest.weight - previous.weight) : null
+
   return (
     <View style={styles.card}>
       <Text style={styles.title}>Laatste meting</Text>
-      <Text style={styles.date}>{new Date(measurement.measuredAt).toLocaleDateString('nl-NL')}</Text>
+      <Text style={styles.date}>{new Date(latest.measuredAt).toLocaleDateString('nl-NL')}</Text>
       {rows.map(r => (
         <View key={r.key} style={styles.row}>
           <Text style={styles.rowLabel}>{r.label}</Text>
           <Text style={styles.rowValue}>
-            {typeof measurement[r.key] === 'number'
-              ? (measurement[r.key] as number).toFixed(1)
-              : measurement[r.key]}{' '}
+            {typeof latest[r.key] === 'number'
+              ? (latest[r.key] as number).toFixed(1)
+              : latest[r.key]}{' '}
             {r.suffix}
           </Text>
         </View>
       ))}
+
+      {previous && (
+        <View style={styles.previous}>
+          <View style={styles.divider} />
+          <Text style={styles.previousTitle}>Voorlaatste meting</Text>
+          <Text style={styles.previousDate}>
+            {new Date(previous.measuredAt).toLocaleDateString('nl-NL')} — {previous.weight.toFixed(1)} kg
+          </Text>
+          <Text style={styles.diffLabel}>
+            Verschil {diff !== null && (diff > 0 ? '+' : '')}{diff?.toFixed(1)} kg
+          </Text>
+        </View>
+      )}
     </View>
   )
 }
@@ -51,4 +68,9 @@ const styles = StyleSheet.create({
   rowLabel: { fontSize: 14, color: '#555', flex: 1 },
   rowValue: { fontSize: 14, fontWeight: '600' },
   emptyText: { fontSize: 16, color: '#999', textAlign: 'center', padding: 20 },
+  previous: { marginTop: 4 },
+  divider: { height: 1, backgroundColor: '#eee', marginVertical: 12 },
+  previousTitle: { fontSize: 18, fontWeight: '700', marginBottom: 4 },
+  previousDate: { fontSize: 14, color: '#666', marginBottom: 4 },
+  diffLabel: { fontSize: 16, fontWeight: '700', color: '#2196F3' },
 })

src/screens/DashboardScreen.tsx

@@ -2,7 +2,7 @@ import React, { useCallback, useState } from 'react'
 import { View, ScrollView, TouchableOpacity, Text, StyleSheet } from 'react-native'
 import { useFocusEffect } from '@react-navigation/native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
-import { initDatabase, getAllMeasurements, getLatestMeasurement } from '../database/db'
+import { initDatabase, getAllMeasurements } from '../database/db'
 import { Measurement } from '../types'
 import LatestMeasurementCard from '../components/LatestMeasurementCard'
 import WeightChart from '../components/WeightChart'
@@ -11,7 +11,6 @@ type Props = { navigation: any }
 
 export default function DashboardScreen({ navigation }: Props) {
   const insets = useSafeAreaInsets()
-  const [latest, setLatest] = useState<Measurement | null>(null)
   const [all, setAll] = useState<Measurement[]>([])
   const [loading, setLoading] = useState(true)
 
@@ -23,7 +22,6 @@ export default function DashboardScreen({ navigation }: Props) {
         const allM = await getAllMeasurements()
         const visible = allM.filter(m => !m.deletedAt)
         setAll(visible)
-        setLatest(visible.length > 0 ? visible[0] : null)
         setLoading(false)
       }
       load()
@@ -45,7 +43,7 @@ export default function DashboardScreen({ navigation }: Props) {
           <Text style={styles.loading}>Laden...</Text>
         ) : (
           <>
-            <LatestMeasurementCard measurement={latest} />
+            <LatestMeasurementCard measurements={all} />
             <WeightChart measurements={all} />
           </>
         )}