IO-1029 IO-1019 Bills, PO, an CC Fixes.

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

@@ -1,15 +1,17 @@
-import { Button, Form, Input, InputNumber, PageHeader } from "antd";
+import { WarningFilled } from "@ant-design/icons";
+import { useApolloClient } from "@apollo/client";
+import { Button, Form, Input, InputNumber, PageHeader, Space } from "antd";
+import moment from "moment";
 import React from "react";
 import { useTranslation } from "react-i18next";
+import { CHECK_CC_FLEET_NUMBER } from "../../graphql/courtesy-car.queries";
+import { DateFormatter } from "../../utils/DateFormatter";
 import CourtesyCarFuelSlider from "../courtesy-car-fuel-select/courtesy-car-fuel-select.component";
 import CourtesyCarStatus from "../courtesy-car-status-select/courtesy-car-status-select.component";
 import FormDatePicker from "../form-date-picker/form-date-picker.component";
 import FormFieldsChanged from "../form-fields-changed-alert/form-fields-changed-alert.component";
 import CurrencyInput from "../form-items-formatted/currency-form-item.component";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
-import InputNumberCalculator from "../form-input-number-calculator/form-input-number-calculator.component";
-import { useApolloClient } from "@apollo/client";
-import { CHECK_CC_FLEET_NUMBER } from "../../graphql/courtesy-car.queries";
 
 export default function CourtesyCarCreateFormComponent({ form, saveLoading }) {
   const { t } = useTranslation();
@@ -221,20 +223,56 @@ export default function CourtesyCarCreateFormComponent({ form, saveLoading }) {
             },
           ]}
         >
-          <InputNumberCalculator />
-        </Form.Item>
-        <Form.Item
-          label={t("courtesycars.fields.nextservicedate")}
-          name="nextservicedate"
-          rules={[
-            {
-              required: true,
-              message: t("general.validation.required"),
-            },
-          ]}
-        >
-          <FormDatePicker />
+          <InputNumber />
         </Form.Item>
+        <div>
+          <Form.Item
+            label={t("courtesycars.fields.nextservicedate")}
+            name="nextservicedate"
+            rules={[
+              {
+                required: true,
+                message: t("general.validation.required"),
+              },
+            ]}
+          >
+            <FormDatePicker />
+          </Form.Item>
+          <Form.Item
+            shouldUpdate={(p, c) =>
+              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());
+
+              if (mileageOver || 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>
+                  </Space>
+                );
+
+              return <></>;
+            }}
+          </Form.Item>
+        </div>
         <Form.Item label={t("courtesycars.fields.damage")} name="damage">
           <Input.TextArea />
         </Form.Item>