From c60a7dfc27b20ff5d713e2805ea7bef7672d5383 Mon Sep 17 00:00:00 2001
From: James Brunton <james@stirlingpdf.com>
Date: Fri, 12 Sep 2025 16:47:20 +0100
Subject: [PATCH] Convert date inputs into date pickers

---
 frontend/package-lock.json                    | 24 +++++++++++++
 frontend/package.json                         |  1 +
 .../steps/DocumentDatesStep.tsx               | 34 +++++++++++++++----
 3 files changed, 52 insertions(+), 7 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 342f0512f..f16d1f9cb 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -14,6 +14,7 @@
         "@emotion/styled": "^11.14.0",
         "@iconify/react": "^6.0.0",
         "@mantine/core": "^8.0.1",
+        "@mantine/dates": "^8.0.1",
         "@mantine/dropzone": "^8.0.1",
         "@mantine/hooks": "^8.0.1",
         "@mui/icons-material": "^7.1.0",
@@ -1653,6 +1654,22 @@
         "react-dom": "^18.x || ^19.x"
       }
     },
+    "node_modules/@mantine/dates": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/@mantine/dates/-/dates-8.0.1.tgz",
+      "integrity": "sha512-YCmV5jiGE9Ts2uhNS217IA1Hd5kAa8oaEtfnU0bS1sL36zKEf2s6elmzY718XdF8tFil0jJWAj0jiCrA3/udMg==",
+      "license": "MIT",
+      "dependencies": {
+        "clsx": "^2.1.1"
+      },
+      "peerDependencies": {
+        "@mantine/core": "8.0.1",
+        "@mantine/hooks": "8.0.1",
+        "dayjs": ">=1.0.0",
+        "react": "^18.x || ^19.x",
+        "react-dom": "^18.x || ^19.x"
+      }
+    },
     "node_modules/@mantine/dropzone": {
       "version": "8.0.1",
       "resolved": "https://registry.npmjs.org/@mantine/dropzone/-/dropzone-8.0.1.tgz",
@@ -4367,6 +4384,13 @@
         "node": ">=18"
       }
     },
+    "node_modules/dayjs": {
+      "version": "1.11.18",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.18.tgz",
+      "integrity": "sha512-zFBQ7WFRvVRhKcWoUh+ZA1g2HVgUbsZm9sbddh8EC5iv93sui8DVVz1Npvz+r6meo9VKfa8NyLWBsQK1VvIKPA==",
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/debug": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 0b14a8ffc..214830cd2 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -10,6 +10,7 @@
     "@emotion/styled": "^11.14.0",
     "@iconify/react": "^6.0.0",
     "@mantine/core": "^8.0.1",
+    "@mantine/dates": "^8.0.1",
     "@mantine/dropzone": "^8.0.1",
     "@mantine/hooks": "^8.0.1",
     "@mui/icons-material": "^7.1.0",
diff --git a/frontend/src/components/tools/changeMetadata/steps/DocumentDatesStep.tsx b/frontend/src/components/tools/changeMetadata/steps/DocumentDatesStep.tsx
index 0d9f54a7c..31ed6fd65 100644
--- a/frontend/src/components/tools/changeMetadata/steps/DocumentDatesStep.tsx
+++ b/frontend/src/components/tools/changeMetadata/steps/DocumentDatesStep.tsx
@@ -1,4 +1,5 @@
-import { Stack, TextInput, Text } from "@mantine/core";
+import { Stack, Text } from "@mantine/core";
+import { DateTimePicker } from "@mantine/dates";
 import { useTranslation } from "react-i18next";
 import { ChangeMetadataParameters } from "../../../../hooks/tools/changeMetadata/useChangeMetadataParameters";
 
@@ -15,26 +16,45 @@ const DocumentDatesStep = ({
 }: DocumentDatesStepProps) => {
   const { t } = useTranslation();
 
+  const parseDate = (dateString: string): Date | null => {
+    if (!dateString) return null;
+    const date = new Date(dateString.replace(/(\d{4})\/(\d{2})\/(\d{2}) (\d{2}):(\d{2}):(\d{2})/, '$1-$2-$3T$4:$5:$6'));
+    return isNaN(date.getTime()) ? null : date;
+  };
+
+  const formatDate = (date: Date | null): string => {
+    if (!date) return '';
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const day = String(date.getDate()).padStart(2, '0');
+    const hours = String(date.getHours()).padStart(2, '0');
+    const minutes = String(date.getMinutes()).padStart(2, '0');
+    const seconds = String(date.getSeconds()).padStart(2, '0');
+    return `${year}/${month}/${day} ${hours}:${minutes}:${seconds}`;
+  };
+
   return (
     <Stack gap="md">
       <Text size="xs" c="dimmed">
         {t('changeMetadata.dates.format', 'Format: yyyy/MM/dd HH:mm:ss')}
       </Text>
 
-      <TextInput
+      <DateTimePicker
         label={t('changeMetadata.creationDate.label', 'Creation Date')}
         placeholder={t('changeMetadata.creationDate.placeholder', 'e.g. 2025/01/17 14:30:00')}
-        value={parameters.creationDate}
-        onChange={(e) => onParameterChange('creationDate', e.target.value)}
+        value={parseDate(parameters.creationDate)}
+        onChange={(date) => onParameterChange('creationDate', formatDate(date))}
         disabled={disabled}
+        clearable
       />
 
-      <TextInput
+      <DateTimePicker
         label={t('changeMetadata.modificationDate.label', 'Modification Date')}
         placeholder={t('changeMetadata.modificationDate.placeholder', 'e.g. 2025/01/17 14:30:00')}
-        value={parameters.modificationDate}
-        onChange={(e) => onParameterChange('modificationDate', e.target.value)}
+        value={parseDate(parameters.modificationDate)}
+        onChange={(date) => onParameterChange('modificationDate', formatDate(date))}
         disabled={disabled}
+        clearable
       />
     </Stack>
   );