From ad108b3b1686181a8b4e39517cb5275afd548001 Mon Sep 17 00:00:00 2001
From: Eddy de Vink <github@eddydev.ink>
Date: Sat, 27 Jun 2026 23:02:51 +0200
Subject: [PATCH] feat: add date picker as first field in measurement form

---
 app.json                           |  3 ++-
 package-lock.json                  | 24 ++++++++++++++++++
 package.json                       |  1 +
 src/components/MeasurementForm.tsx | 40 +++++++++++++++++++++++++++++-
 4 files changed, 66 insertions(+), 2 deletions(-)

diff --git a/app.json b/app.json
index 1799a00..d49d2de 100644
--- a/app.json
+++ b/app.json
@@ -23,7 +23,8 @@
     },
     "plugins": [
       "expo-sqlite",
-      "expo-secure-store"
+      "expo-secure-store",
+      "@react-native-community/datetimepicker"
     ]
   }
 }
diff --git a/package-lock.json b/package-lock.json
index e527798..3310c9d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "weegschaal-app",
       "version": "1.0.0",
       "dependencies": {
+        "@react-native-community/datetimepicker": "8.4.4",
         "@react-navigation/native": "^7.3.4",
         "@react-navigation/native-stack": "^7.17.6",
         "expo": "~54.0.0",
@@ -2780,6 +2781,29 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@react-native-community/datetimepicker": {
+      "version": "8.4.4",
+      "resolved": "https://registry.npmjs.org/@react-native-community/datetimepicker/-/datetimepicker-8.4.4.tgz",
+      "integrity": "sha512-bc4ZixEHxZC9/qf5gbdYvIJiLZ5CLmEsC3j+Yhe1D1KC/3QhaIfGDVdUcid0PdlSoGOSEq4VlB93AWyetEyBSQ==",
+      "license": "MIT",
+      "dependencies": {
+        "invariant": "^2.2.4"
+      },
+      "peerDependencies": {
+        "expo": ">=52.0.0",
+        "react": "*",
+        "react-native": "*",
+        "react-native-windows": "*"
+      },
+      "peerDependenciesMeta": {
+        "expo": {
+          "optional": true
+        },
+        "react-native-windows": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@react-native/assets-registry": {
       "version": "0.81.5",
       "resolved": "https://registry.npmjs.org/@react-native/assets-registry/-/assets-registry-0.81.5.tgz",
diff --git a/package.json b/package.json
index e980bd3..b87035e 100644
--- a/package.json
+++ b/package.json
@@ -3,6 +3,7 @@
   "version": "1.0.0",
   "main": "index.ts",
   "dependencies": {
+    "@react-native-community/datetimepicker": "8.4.4",
     "@react-navigation/native": "^7.3.4",
     "@react-navigation/native-stack": "^7.17.6",
     "expo": "~54.0.0",
diff --git a/src/components/MeasurementForm.tsx b/src/components/MeasurementForm.tsx
index 4c2b842..f6a11d2 100644
--- a/src/components/MeasurementForm.tsx
+++ b/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' },
 })