IO-2468 CC Mileage and Service KMs

client/src/components/courtesy-car-form/courtesy-car-form.component.jsx

@@ -34,7 +34,7 @@ export default function CourtesyCarCreateFormComponent({ form, saveLoading }) {
 
       {/* <FormFieldsChanged form={form} /> */}
       <LayoutFormRow header={t("courtesycars.labels.vehicle")}>
-      <Form.Item
+        <Form.Item
           label={t("courtesycars.fields.year")}
           name="year"
           rules={[
@@ -118,7 +118,7 @@ export default function CourtesyCarCreateFormComponent({ form, saveLoading }) {
             },
           ]}
         >
-          <InputNumber precision={0} />
+          <InputNumber min={0} precision={0} />
         </Form.Item>
         <Form.Item
           label={t("courtesycars.fields.fleetnumber")}
@@ -213,12 +213,38 @@ export default function CourtesyCarCreateFormComponent({ form, saveLoading }) {
         >
           <CourtesyCarStatus />
         </Form.Item>
-        <Form.Item
+        <div>
-          label={t("courtesycars.fields.nextservicekm")}
+          <Form.Item
-          name="nextservicekm"
+            label={t("courtesycars.fields.nextservicekm")}
-        >
+            name="nextservicekm"
-          <InputNumber />
+          >
-        </Form.Item>
+            <InputNumber min={0} precision={0} />
+          </Form.Item>
+          <Form.Item
+            shouldUpdate={(p, c) =>
+              p.mileage !== c.mileage || p.nextservicekm !== c.nextservicekm
+            }
+          >
+            {() => {
+              const nextservicekm = form.getFieldValue("nextservicekm");
+              const mileageOver =
+                nextservicekm <= form.getFieldValue("mileage");
+
+              if (mileageOver)
+                return (
+                  <Space direction="vertical" style={{ color: "tomato" }}>
+                    <span>
+                      <WarningFilled style={{ marginRight: ".3rem" }} />
+                      {t("contracts.labels.cardueforservice")}
+                    </span>
+                    <span>{`${nextservicekm} km`}</span>
+                  </Space>
+                );
+
+              return <></>;
+            }}
+          </Form.Item>
+        </div>
         <div>
           <Form.Item
             label={t("courtesycars.fields.nextservicedate")}
@@ -227,30 +253,21 @@ export default function CourtesyCarCreateFormComponent({ form, saveLoading }) {
             <FormDatePicker />
           </Form.Item>
           <Form.Item
-            shouldUpdate={(p, c) =>
+            shouldUpdate={(p, c) => p.nextservicedate !== c.nextservicedate}
-              p.mileage !== c.mileage ||
-              p.nextservicedate !== c.nextservicedate ||
-              p.nextservicekm !== c.nextservicekm
-            }
           >
             {() => {
               const nextservicedate = form.getFieldValue("nextservicedate");
-              const nextservicekm = form.getFieldValue("nextservicekm");
-
-              const mileageOver =
-                nextservicekm <= form.getFieldValue("mileage");
-
               const dueForService =
-                nextservicedate && moment(nextservicedate).isBefore(moment());
+                nextservicedate &&
+                moment(nextservicedate).endOf("day").isSameOrBefore(moment());
 
-              if (mileageOver || dueForService)
+              if (dueForService)
                 return (
                   <Space direction="vertical" style={{ color: "tomato" }}>
                     <span>
                       <WarningFilled style={{ marginRight: ".3rem" }} />
                       {t("contracts.labels.cardueforservice")}
                     </span>
-                    <span>{`${nextservicekm} km`}</span>
                     <span>
                       <DateFormatter>{nextservicedate}</DateFormatter>
                     </span>
@@ -282,7 +299,8 @@ export default function CourtesyCarCreateFormComponent({ form, saveLoading }) {
             {() => {
               const expires = form.getFieldValue("registrationexpires");
 
-              const dateover = expires && moment(expires).isBefore(moment());
+              const dateover =
+                expires && moment(expires).endOf("day").isBefore(moment());
 
               if (dateover)
                 return (
@@ -317,7 +335,8 @@ export default function CourtesyCarCreateFormComponent({ form, saveLoading }) {
             {() => {
               const expires = form.getFieldValue("insuranceexpires");
 
-              const dateover = expires && moment(expires).isBefore(moment());
+              const dateover =
+                expires && moment(expires).endOf("day").isBefore(moment());
 
               if (dateover)
                 return (