IO-899 WIP CC Improvements

client/src/components/contract-form/contract-form.component.jsx

@@ -1,4 +1,5 @@
 import { Form, Input, InputNumber, Space } from "antd";
+import { WarningFilled } from "@ant-design/icons";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import ContractLicenseDecodeButton from "../contract-license-decode-button/contract-license-decode-button.component";
@@ -12,11 +13,15 @@ import InputPhone, {
 } from "../form-items-formatted/phone-form-item.component";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
 import ContractFormJobPrefill from "./contract-form-job-prefill.component";
+import FormDateTimePicker from "../form-date-time-picker/form-date-time-picker.component";
+import moment from "moment";
+import { DateFormatter } from "../../utils/DateFormatter";
 
 export default function ContractFormComponent({
   form,
   create = false,
   selectedJobState,
+  selectedCar,
 }) {
   const { t } = useTranslation();
   return (
@@ -48,24 +53,24 @@ export default function ContractFormComponent({
             },
           ]}
         >
-          <FormDatePicker />
+          <FormDateTimePicker />
         </Form.Item>
         <Form.Item
           label={t("contracts.fields.scheduledreturn")}
           name="scheduledreturn"
         >
-          <FormDatePicker />
+          <FormDateTimePicker />
         </Form.Item>
         {create ? null : (
           <Form.Item
             label={t("contracts.fields.actualreturn")}
             name="actualreturn"
           >
-            <FormDatePicker />
+            <FormDateTimePicker />
           </Form.Item>
         )}
       </LayoutFormRow>
-      <LayoutFormRow>
+      <LayoutFormRow grow>
         <Form.Item
           label={t("contracts.fields.kmstart")}
           name="kmstart"
@@ -78,11 +83,54 @@ export default function ContractFormComponent({
         >
           <InputNumber />
         </Form.Item>
+        {create && (
+          <Form.Item
+            shouldUpdate={(p, c) =>
+              p.kmstart !== c.kmstart || p.scheduledreturn !== c.scheduledreturn
+            }
+          >
+            {() => {
+              const mileageOver =
+                selectedCar &&
+                selectedCar.nextservicekm <= form.getFieldValue("kmstart");
+
+              const dueForService =
+                selectedCar &&
+                selectedCar.nextservicedate &&
+                moment(selectedCar.nextservicedate).isBefore(
+                  moment(form.getFieldValue("scheduledreturn"))
+                );
+              console.log(`dueForService`, dueForService);
+              if (mileageOver || dueForService)
+                return (
+                  <Space direction="vertical" style={{ color: "tomato" }}>
+                    <span>
+                      <WarningFilled style={{ marginRight: ".3rem" }} />
+                      {t("contracts.labels.cardueforservice")}
+                    </span>
+                    <span>{`${
+                      selectedCar && selectedCar.nextservicekm
+                    } km`}</span>
+                    <span>
+                      <DateFormatter>
+                        {selectedCar && selectedCar.nextservicedate}
+                      </DateFormatter>
+                    </span>
+                  </Space>
+                );
+
+              return <></>;
+            }}
+          </Form.Item>
+        )}
         {create ? null : (
           <Form.Item label={t("contracts.fields.kmend")} name="kmend">
             <InputNumber />
           </Form.Item>
         )}
+        <Form.Item label={t("contracts.fields.damage")} name="damage">
+          <Input.TextArea />
+        </Form.Item>
       </LayoutFormRow>
       <LayoutFormRow>
         <Form.Item
@@ -135,27 +183,42 @@ export default function ContractFormComponent({
           <Input />
         </Form.Item>
         <Form.Item
-          label={t("contracts.fields.driver_dlexpiry")}
-          name="driver_dlexpiry"
-          rules={[
-            {
-              required: true,
-              message: t("general.validation.required"),
-            },
-          ]}
+          shouldUpdate={(p, c) =>
+            p.driver_dlexpiry !== c.driver_dlexpiry ||
+            p.scheduledreturn !== c.scheduledreturn
+          }
         >
-          <FormDatePicker />
+          {() => {
+            const dlExpiresBeforeReturn = moment(
+              form.getFieldValue("driver_dlexpiry")
+            ).isBefore(moment(form.getFieldValue("scheduledreturn")));
+
+            return (
+              <div>
+                <Form.Item
+                  label={t("contracts.fields.driver_dlexpiry")}
+                  name="driver_dlexpiry"
+                  rules={[
+                    {
+                      required: true,
+                      message: t("general.validation.required"),
+                    },
+                  ]}
+                >
+                  <FormDatePicker />
+                </Form.Item>
+                {dlExpiresBeforeReturn && (
+                  <Space style={{ color: "tomato" }}>
+                    <WarningFilled />
+                    <span>{t("contracts.labels.dlexpirebeforereturn")}</span>
+                  </Space>
+                )}
+              </div>
+            );
+          }}
         </Form.Item>
-        <Form.Item
-          label={t("contracts.fields.driver_dlst")}
-          name="driver_dlst"
-          rules={[
-            {
-              required: true,
-              message: t("general.validation.required"),
-            },
-          ]}
-        >
+
+        <Form.Item label={t("contracts.fields.driver_dlst")} name="driver_dlst">
           <Input />
         </Form.Item>
         <Form.Item