diff --git a/src/components/LatestMeasurementCard.tsx b/src/components/LatestMeasurementCard.tsx index 7cc0134..8cb3ed3 100644 --- a/src/components/LatestMeasurementCard.tsx +++ b/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 ( Nog geen metingen @@ -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 ( Laatste meting - {new Date(measurement.measuredAt).toLocaleDateString('nl-NL')} + {new Date(latest.measuredAt).toLocaleDateString('nl-NL')} {rows.map(r => ( {r.label} - {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} ))} + + {previous && ( + + + Voorlaatste meting + + {new Date(previous.measuredAt).toLocaleDateString('nl-NL')} — {previous.weight.toFixed(1)} kg + + + Verschil {diff !== null && (diff > 0 ? '+' : '')}{diff?.toFixed(1)} kg + + + )} ) } @@ -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' }, }) diff --git a/src/screens/DashboardScreen.tsx b/src/screens/DashboardScreen.tsx index 78db588..7107665 100644 --- a/src/screens/DashboardScreen.tsx +++ b/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(null) const [all, setAll] = useState([]) 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) { Laden... ) : ( <> - + )}