Assets date picker

src/Components/Assets/AssetServiceEditModal.tsx

@@ -7,10 +7,10 @@ import DialogModal from "../Common/Dialog";
 import { AssetData, AssetService, AssetServiceEdit } from "./AssetTypes";
 import dayjs from "dayjs";
 import TextAreaFormField from "../Form/FormFields/TextAreaFormField";
-import DateInputV2 from "../Common/DateInputV2";
-import { FieldLabel } from "../Form/FormFields/FormField";
 import { formatDate, formatDateTime } from "../../Utils/utils";
 import CareIcon from "../../CAREUI/icons/CareIcon";
+import DateFormField from "../Form/FormFields/DateFormField";
+import { t } from "i18next";
 
 export const AssetServiceEditModal = (props: {
   asset?: AssetData;
@@ -61,12 +61,12 @@ export const AssetServiceEditModal = (props: {
       <DialogModal
         show={props.show}
         onClose={props.handleClose}
-        title="Edit History"
+        title={t("edit_history")}
       >
         <div>
           <div className="mb-4">
             <p className="text-md mt-1 text-gray-500">
-              Update record for asset
+              {t("update_record_for_asset")}
               <strong> {props.asset?.name}</strong>
             </p>
           </div>
@@ -110,13 +110,17 @@ export const AssetServiceEditModal = (props: {
             <div className="mb-4 rounded-lg border border-gray-300 p-4 py-2">
               <div className="my-2 flex justify-between">
                 <div className="grow">
-                  <p className="text-sm font-medium text-gray-500">Edited On</p>
+                  <p className="text-sm font-medium text-gray-500">
+                    {t("edited_on")}
+                  </p>
                   <p className="text-gray-900">
                     {formatDateTime(editRecord.edited_on)}
                   </p>
                 </div>
                 <div className="grow">
-                  <p className="text-sm font-medium text-gray-500">Edited By</p>
+                  <p className="text-sm font-medium text-gray-500">
+                    {t("edited_by")}
+                  </p>
                   <p className="text-gray-900">
                     {editRecord.edited_by.username}
                   </p>
@@ -125,7 +129,7 @@ export const AssetServiceEditModal = (props: {
               <div className="mt-4 flex flex-col justify-between">
                 <div className="grow">
                   <p className="text-sm font-medium text-gray-500">
-                    Serviced On
+                    {t("serviced_on")}
                   </p>
                   <p
                     className="text-gray-900"
@@ -135,7 +139,9 @@ export const AssetServiceEditModal = (props: {
                   </p>
                 </div>
                 <div className="mt-4 grow">
-                  <p className="text-sm font-medium text-gray-500">Notes</p>
+                  <p className="text-sm font-medium text-gray-500">
+                    {t("notes")}
+                  </p>
                   <p className="text-gray-900" id="edit-history-asset-note">
                     {editRecord.note || "-"}
                   </p>
@@ -151,7 +157,7 @@ export const AssetServiceEditModal = (props: {
                 editRecord ? setEditRecord(undefined) : props.handleClose();
               }}
             >
-              {editRecord ? "Back" : "Close"}
+              {editRecord ? t("back") : t("close")}
             </ButtonV2>
           </div>
         </div>
@@ -163,12 +169,12 @@ export const AssetServiceEditModal = (props: {
     <DialogModal
       show={props.show}
       onClose={props.handleClose}
-      title="Update Asset Service Record"
+      title={t("update_asset_service_record")}
     >
       <div>
         <div className="mb-4">
           <p className="text-md mt-1 text-gray-500">
-            Update record for asset
+            {t("update_record_for_asset")}
             <strong> {props.asset?.name}</strong>
           </p>
         </div>
@@ -178,28 +184,40 @@ export const AssetServiceEditModal = (props: {
               className="col-span-6 sm:col-span-3"
               data-testid="asset-last-serviced-on-input"
             >
-              <FieldLabel>Serviced On</FieldLabel>
-              <DateInputV2
+              <DateFormField
+                label={t("serviced_on")}
                 name="serviced_on"
                 className="mt-2"
                 position="LEFT"
                 value={new Date(form.serviced_on)}
                 onChange={(date) => {
-                  setForm({
-                    ...form,
-                    serviced_on: dayjs(date).format("YYYY-MM-DD"),
-                  });
+                  if (
+                    dayjs(date.value).format("YYYY-MM-DD") >
+                    new Date(
+                      props.service_record.created_date
+                    ).toLocaleDateString("en-ca")
+                  ) {
+                    Notification.Error({
+                      msg: `Service date can't be after ${formatDate(
+                        props.service_record.created_date
+                      )} (Creation date)`,
+                    });
+                  } else {
+                    setForm({
+                      ...form,
+                      serviced_on: dayjs(date.value).format("YYYY-MM-DD"),
+                    });
+                  }
                 }}
-                max={new Date(props.service_record.created_date)}
               />
             </div>
 
             <div className="col-span-6" data-testid="asset-notes-input">
               <TextAreaFormField
                 name="notes"
                 rows={5}
-                label="Notes"
-                placeholder="Eg. Details on functionality, service, etc."
+                label={t("notes")}
+                placeholder={t("eg_details_on_functionality_service_etc")}
                 value={form.note}
                 onChange={(e) => {
                   setForm({ ...form, note: e.value });
@@ -210,7 +228,7 @@ export const AssetServiceEditModal = (props: {
         </div>
         <div className="flex flex-col justify-end gap-2 md:flex-row">
           <Submit
-            label={`${isLoading ? "Updating" : "Update"}`}
+            label={`${isLoading ? t("updating") : t("update")}`}
             onClick={handleSubmit}
             loading={isLoading}
           />

src/Components/Common/DateInputV2.tsx

@@ -1,4 +1,4 @@
-import { MutableRefObject, useEffect, useRef, useState } from "react";
+import { MutableRefObject, useEffect, useState } from "react";
 import {
   addMonths,
   addYears,
@@ -60,7 +60,6 @@ const DateInputV2: React.FC<Props> = ({
   const [displayValue, setDisplayValue] = useState<string>(
     value ? dayjs(value).format("DDMMYYYY") : ""
   );
-  const popover = useRef<HTMLDivElement>(null);
 
   const decrement = () => {
     switch (type) {
@@ -241,7 +240,6 @@ const DateInputV2: React.FC<Props> = ({
                   onBlur={() => {
                     setIsOpen?.(false);
                   }}
-                  ref={popover}
                   static
                   className={classNames(
                     "cui-dropdown-base absolute mt-0.5 w-72 divide-y-0 p-4",
@@ -252,10 +250,6 @@ const DateInputV2: React.FC<Props> = ({
                     <input
                       id="date-input"
                       autoFocus
-                      onBlur={(e) => {
-                        popover.current?.focus();
-                        e.preventDefault();
-                      }}
                       className="cui-input-base bg-gray-50"
                       value={
                         displayValue.replace(