feat: add date picker as first field in measurement form

src/components/MeasurementForm.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
 import { View, Text, TextInput, TouchableOpacity, StyleSheet, KeyboardAvoidingView, Platform, ScrollView } from 'react-native'
+import DateTimePicker, { DateTimePickerEvent } from '@react-native-community/datetimepicker'
 import { Measurement } from '../types'
 import { generateId } from '../utils/uuid'
 
@@ -20,6 +21,11 @@ const fields: { key: keyof Measurement; label: string; placeholder: string; keyb
 ]
 
 export default function MeasurementForm({ onSubmit, initialValues }: Props) {
+  const [pickerOpen, setPickerOpen] = useState(false)
+  const [measurementDate, setMeasurementDate] = useState<Date>(() => {
+    if (initialValues?.measuredAt) return new Date(initialValues.measuredAt)
+    return new Date()
+  })
   const [values, setValues] = useState<Record<string, string>>(() => {
     const init: Record<string, string> = {}
     for (const f of fields) {
@@ -40,7 +46,7 @@ export default function MeasurementForm({ onSubmit, initialValues }: Props) {
       muscleMass: parseFloat(values.muscleMass) || 0,
       visceralFat: parseInt(values.visceralFat, 10) || 0,
       bmr: parseFloat(values.bmr) || 0,
-      measuredAt: now,
+      measuredAt: measurementDate.toISOString(),
       createdAt: now,
       updatedAt: now,
       syncStatus: 'local',
@@ -52,9 +58,39 @@ export default function MeasurementForm({ onSubmit, initialValues }: Props) {
     setValues(prev => ({ ...prev, [key]: value }))
   }
 
+  const onDateChange = (_event: DateTimePickerEvent, selectedDate?: Date) => {
+    setPickerOpen(false)
+    if (selectedDate) {
+      setMeasurementDate(selectedDate)
+    }
+  }
+
   return (
     <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : undefined} style={styles.container}>
       <ScrollView contentContainerStyle={styles.scroll}>
+        <View style={styles.field}>
+          <Text style={styles.label}>Datum</Text>
+          <TouchableOpacity style={styles.dateButton} onPress={() => setPickerOpen(true)}>
+            <Text style={styles.dateButtonText}>
+              {measurementDate.toLocaleDateString('nl-NL', {
+                weekday: 'long',
+                day: 'numeric',
+                month: 'long',
+                year: 'numeric',
+              })}
+            </Text>
+          </TouchableOpacity>
+        </View>
+
+        {pickerOpen && (
+          <DateTimePicker
+            value={measurementDate}
+            mode="date"
+            display="default"
+            onChange={onDateChange}
+          />
+        )}
+
         {fields.map(f => (
           <View key={f.key} style={styles.field}>
             <Text style={styles.label}>{f.label}</Text>
@@ -82,6 +118,8 @@ const styles = StyleSheet.create({
   field: { marginBottom: 12 },
   label: { fontSize: 14, fontWeight: '600', color: '#333', marginBottom: 4 },
   input: { backgroundColor: '#fff', borderRadius: 8, padding: 12, fontSize: 16, borderWidth: 1, borderColor: '#ddd' },
+  dateButton: { backgroundColor: '#fff', borderRadius: 8, padding: 12, borderWidth: 1, borderColor: '#ddd' },
+  dateButtonText: { fontSize: 16, color: '#333' },
   button: { backgroundColor: '#4CAF50', padding: 16, borderRadius: 8, alignItems: 'center', marginTop: 8 },
   buttonText: { color: '#fff', fontSize: 16, fontWeight: '700' },
 })