From 866f24246503e2ec60690efd63dedd7ab8f1b3bc Mon Sep 17 00:00:00 2001
From: Allan Carr <allan.carr@thinkimex.com>
Date: Mon, 29 Jul 2024 11:30:52 -0700
Subject: [PATCH] IO-2853 Production Board Date Modal

Signed-off-by: Allan Carr <allan.carr@thinkimex.com>
---
 ...production-list-columns.date.component.jsx | 32 ++++++++++---------
 1 file changed, 17 insertions(+), 15 deletions(-)

diff --git a/client/src/components/production-list-columns/production-list-columns.date.component.jsx b/client/src/components/production-list-columns/production-list-columns.date.component.jsx
index 6b1a5340a..7a639d8e5 100644
--- a/client/src/components/production-list-columns/production-list-columns.date.component.jsx
+++ b/client/src/components/production-list-columns/production-list-columns.date.component.jsx
@@ -1,11 +1,11 @@
 import { useMutation } from "@apollo/client";
-import { Button, Card, Dropdown, TimePicker } from "antd";
-import dayjs from "../../utils/day";
+import { Button, Card, Dropdown, Space, TimePicker } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { logImEXEvent } from "../../firebase/firebase.utils";
 import { UPDATE_JOB } from "../../graphql/jobs.queries";
 import { DateFormatter } from "../../utils/DateFormatter";
+import dayjs from "../../utils/day";
 import FormDatePicker from "../form-date-picker/form-date-picker.component";
 
 export default function ProductionListDate({ record, field, time, pastIndicator }) {
@@ -56,23 +56,25 @@ export default function ProductionListDate({ record, field, time, pastIndicator
         key: "overlayItem1",
         label: (
           <Card style={{ padding: "1rem" }} onClick={(e) => e.stopPropagation()}>
-            <FormDatePicker
-              onClick={(e) => e.stopPropagation()}
-              value={(record[field] && dayjs(record[field])) || null}
-              onChange={handleChange}
-              format="MM/DD/YYYY"
-              isDateOnly={!time}
-            />
-            {time && (
-              <TimePicker
+            <Space direction={"vertical"}>
+              <FormDatePicker
                 onClick={(e) => e.stopPropagation()}
                 value={(record[field] && dayjs(record[field])) || null}
                 onChange={handleChange}
-                minuteStep={15}
-                format="hh:mm a"
+                format="MM/DD/YYYY"
+                isDateOnly={!time}
               />
-            )}
-            <Button onClick={() => setOpen(false)}>{t("general.actions.close")}</Button>
+              {time && (
+                <TimePicker
+                  onClick={(e) => e.stopPropagation()}
+                  value={(record[field] && dayjs(record[field])) || null}
+                  onChange={handleChange}
+                  minuteStep={15}
+                  format="hh:mm a"
+                />
+              )}
+              <Button onClick={() => setOpen(false)}>{t("general.actions.close")}</Button>
+            </Space>
           </Card>
         )
       }