From 78df66be247db0700647ad850fc279cc7e98d70d Mon Sep 17 00:00:00 2001
From: Christian Vidal Wolf <christianvidalwolf@gmail.com>
Date: Tue, 14 Apr 2026 17:09:12 +0200
Subject: [PATCH] Add date picker for launch and ready to order fields

---
 src/components/MissingDataView.tsx | 36 +++++++++++++++++++++---------
 1 file changed, 26 insertions(+), 10 deletions(-)

diff --git a/src/components/MissingDataView.tsx b/src/components/MissingDataView.tsx
index 75c82cb..da24857 100644
--- a/src/components/MissingDataView.tsx
+++ b/src/components/MissingDataView.tsx
@@ -11,6 +11,24 @@ interface MissingDataViewProps {
   onCaptureState: (message: string) => void;
 }
 
+function formatDateForInput(val: string): string {
+  if (!val) return '';
+  const parts = val.split('/');
+  if (parts.length === 3) {
+    return `${parts[2]}-${parts[1]}-${parts[0]}`;
+  }
+  return val;
+}
+
+function formatDateFromInput(val: string): string {
+  if (!val) return '';
+  const parts = val.split('-');
+  if (parts.length === 3) {
+    return `${parts[2]}/${parts[1]}/${parts[0]}`;
+  }
+  return val;
+}
+
 function formatDateValue(val: any): string {
   if (val === null || val === undefined || val === '') return '';
   if (typeof val === 'number') {
@@ -160,8 +178,8 @@ export function MissingDataView({ data, headers, onSaveRow, onCaptureState }: Mi
     setEditing({
       rowIndex,
       classification: String(row[COLUMNS.CLASSIFICATION] || ''),
-      launchDate: launchDateCol >= 0 ? formatDateValue(row[launchDateCol]) || String(row[launchDateCol] ?? '') : '',
-      readyToOrder: readyToOrderCol >= 0 ? formatDateValue(row[readyToOrderCol]) || String(row[readyToOrderCol] ?? '') : '',
+      launchDate: launchDateCol >= 0 ? formatDateForInput(formatDateValue(row[launchDateCol]) || String(row[launchDateCol] ?? '')) : '',
+      readyToOrder: readyToOrderCol >= 0 ? formatDateForInput(formatDateValue(row[readyToOrderCol]) || String(row[readyToOrderCol] ?? '')) : '',
     });
   };
 
@@ -171,8 +189,8 @@ export function MissingDataView({ data, headers, onSaveRow, onCaptureState }: Mi
     onCaptureState(`Updated product ${row[COLUMNS.ARTICLE_NO]}`);
     const newRow = [...row];
     newRow[COLUMNS.CLASSIFICATION] = editing.classification;
-    if (launchDateCol >= 0) newRow[launchDateCol] = editing.launchDate;
-    if (readyToOrderCol >= 0) newRow[readyToOrderCol] = editing.readyToOrder;
+    if (launchDateCol >= 0) newRow[launchDateCol] = formatDateFromInput(editing.launchDate);
+    if (readyToOrderCol >= 0) newRow[readyToOrderCol] = formatDateFromInput(editing.readyToOrder);
     onSaveRow(editing.rowIndex, newRow);
     setEditing(null);
   };
@@ -411,12 +429,11 @@ export function MissingDataView({ data, headers, onSaveRow, onCaptureState }: Mi
                 <div className="flex flex-col gap-1.5">
                   <label className="text-xs font-medium text-slate-400 uppercase tracking-wider">{launchHeader}</label>
                   <input
-                    type="text"
+                    type="date"
                     value={editing.launchDate}
                     onChange={e => setEditing(prev => prev ? { ...prev, launchDate: e.target.value } : prev)}
-                    placeholder="DD/MM/YYYY"
                     className={cn(
-                      "w-full bg-slate-900 border rounded-md px-3 py-2.5 text-sm text-white font-mono focus:outline-none focus:ring-1 transition-colors",
+                      "w-full bg-slate-900 border rounded-md px-3 py-2.5 text-sm text-white focus:outline-none focus:ring-1 transition-colors",
                       editing.launchDate !== (formatDateValue(editingRow[launchDateCol]) || String(editingRow[launchDateCol] ?? ''))
                         ? "border-blue-500 focus:ring-blue-500"
                         : "border-slate-700 focus:border-slate-500 focus:ring-slate-500"
@@ -429,12 +446,11 @@ export function MissingDataView({ data, headers, onSaveRow, onCaptureState }: Mi
                 <div className="flex flex-col gap-1.5">
                   <label className="text-xs font-medium text-slate-400 uppercase tracking-wider">{readyHeader}</label>
                   <input
-                    type="text"
+                    type="date"
                     value={editing.readyToOrder}
                     onChange={e => setEditing(prev => prev ? { ...prev, readyToOrder: e.target.value } : prev)}
-                    placeholder="DD/MM/YYYY"
                     className={cn(
-                      "w-full bg-slate-900 border rounded-md px-3 py-2.5 text-sm text-white font-mono focus:outline-none focus:ring-1 transition-colors",
+                      "w-full bg-slate-900 border rounded-md px-3 py-2.5 text-sm text-white focus:outline-none focus:ring-1 transition-colors",
                       editing.readyToOrder !== (formatDateValue(editingRow[readyToOrderCol]) || String(editingRow[readyToOrderCol] ?? ''))
                         ? "border-blue-500 focus:ring-blue-500"
                         : "border-slate-700 focus:border-slate-500 focus:ring-slate-500"