From 1f854087810503653e4f78e52ccb76eb2df19cf7 Mon Sep 17 00:00:00 2001
From: suprabathk <suprabathkondapally@gmail.com>
Date: Tue, 5 Sep 2023 20:58:12 +0530
Subject: [PATCH 1/8] Using DateFormField instead of DateInputV2

---
 .../Assets/AssetServiceEditModal.tsx          | 26 ++++++++++++++-----
 src/Components/Facility/AssetCreate.tsx       | 11 ++++----
 2 files changed, 25 insertions(+), 12 deletions(-)

diff --git a/src/Components/Assets/AssetServiceEditModal.tsx b/src/Components/Assets/AssetServiceEditModal.tsx
index 75c9dd9fc60..e243c0c004d 100644
--- a/src/Components/Assets/AssetServiceEditModal.tsx
+++ b/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";
 
 export const AssetServiceEditModal = (props: {
   asset?: AssetData;
@@ -170,18 +170,30 @@ export const AssetServiceEditModal = (props: {
               data-testid="asset-last-serviced-on-input"
             >
               <FieldLabel>Serviced On</FieldLabel>
-              <DateInputV2
+              <DateFormField
                 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 ${dayjs(
+                        props.service_record.created_date
+                      ).format("DD/MM/YYYY")} (Creation date)`,
+                    });
+                  } else {
+                    setForm({
+                      ...form,
+                      serviced_on: dayjs(date.value).format("YYYY-MM-DD"),
+                    });
+                  }
                 }}
-                max={new Date(props.service_record.created_date)}
               />
             </div>
 
diff --git a/src/Components/Facility/AssetCreate.tsx b/src/Components/Facility/AssetCreate.tsx
index 1e6eead5242..7cdc5623da5 100644
--- a/src/Components/Facility/AssetCreate.tsx
+++ b/src/Components/Facility/AssetCreate.tsx
@@ -38,7 +38,7 @@ import useVisibility from "../../Utils/useVisibility";
 import { validateEmailAddress } from "../../Common/validation";
 import { dateQueryString } from "../../Utils/utils.js";
 import dayjs from "../../Utils/dayjs";
-import DateInputV2 from "../Common/DateInputV2.js";
+import DateFormField from "../Form/FormFields/DateFormField.js";
 
 const Loading = lazy(() => import("../Common/Loading"));
 
@@ -876,24 +876,25 @@ const AssetCreate = (props: AssetProps) => {
                       data-testid="asset-last-serviced-on-input"
                     >
                       <FieldLabel>Last Serviced On</FieldLabel>
-                      <DateInputV2
+                      <DateFormField
                         name="last_serviced_on"
                         className="mt-2"
                         position="RIGHT"
                         value={last_serviced_on && new Date(last_serviced_on)}
                         onChange={(date) => {
                           if (
-                            dayjs(date).format("YYYY-MM-DD") >
+                            dayjs(date.value).format("YYYY-MM-DD") >
                             new Date().toLocaleDateString("en-ca")
                           ) {
                             Notification.Error({
                               msg: "Last Serviced date can't be in future",
                             });
                           } else {
-                            setLastServicedOn(dayjs(date).format("YYYY-MM-DD"));
+                            setLastServicedOn(
+                              dayjs(date.value).format("YYYY-MM-DD")
+                            );
                           }
                         }}
-                        max={new Date()}
                       />
                       <FieldErrorText
                         error={state.errors.last_serviced_on}

From f0b4f229e7e858b8f763c2a01360d5dc77e4e784 Mon Sep 17 00:00:00 2001
From: suprabathk <suprabathkondapally@gmail.com>
Date: Tue, 5 Sep 2023 21:26:27 +0530
Subject: [PATCH 2/8] Using Label from DateFormField

---
 src/Components/Assets/AssetServiceEditModal.tsx | 4 ++--
 src/Components/Facility/AssetCreate.tsx         | 3 ++-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/Components/Assets/AssetServiceEditModal.tsx b/src/Components/Assets/AssetServiceEditModal.tsx
index e243c0c004d..232cc5556b1 100644
--- a/src/Components/Assets/AssetServiceEditModal.tsx
+++ b/src/Components/Assets/AssetServiceEditModal.tsx
@@ -7,7 +7,6 @@ import DialogModal from "../Common/Dialog";
 import { AssetData, AssetService, AssetServiceEdit } from "./AssetTypes";
 import dayjs from "dayjs";
 import TextAreaFormField from "../Form/FormFields/TextAreaFormField";
-import { FieldLabel } from "../Form/FormFields/FormField";
 import { formatDate, formatDateTime } from "../../Utils/utils";
 import CareIcon from "../../CAREUI/icons/CareIcon";
 import DateFormField from "../Form/FormFields/DateFormField";
@@ -169,8 +168,9 @@ export const AssetServiceEditModal = (props: {
               className="col-span-6 sm:col-span-3"
               data-testid="asset-last-serviced-on-input"
             >
-              <FieldLabel>Serviced On</FieldLabel>
               <DateFormField
+                // eslint-disable-next-line i18next/no-literal-string
+                label="Serviced On"
                 name="serviced_on"
                 className="mt-2"
                 position="LEFT"
diff --git a/src/Components/Facility/AssetCreate.tsx b/src/Components/Facility/AssetCreate.tsx
index 7cdc5623da5..810f0ffef6c 100644
--- a/src/Components/Facility/AssetCreate.tsx
+++ b/src/Components/Facility/AssetCreate.tsx
@@ -859,6 +859,7 @@ const AssetCreate = (props: AssetProps) => {
                       <TextFormField
                         id="serial-number"
                         name="serial_number"
+                        // eslint-disable-next-line i18next/no-literal-string
                         label="Serial Number"
                         value={serial_number}
                         onChange={(e) => setSerialNumber(e.value)}
@@ -875,8 +876,8 @@ const AssetCreate = (props: AssetProps) => {
                       ref={fieldRef["last_serviced_on"]}
                       data-testid="asset-last-serviced-on-input"
                     >
-                      <FieldLabel>Last Serviced On</FieldLabel>
                       <DateFormField
+                        label="Last Serviced On"
                         name="last_serviced_on"
                         className="mt-2"
                         position="RIGHT"

From 042aac46bf5a4deb1b3b53691655d8538827cf41 Mon Sep 17 00:00:00 2001
From: suprabathk <suprabathkondapally@gmail.com>
Date: Mon, 25 Sep 2023 12:46:47 +0530
Subject: [PATCH 3/8] Prevent Datepicker focus

---
 src/Components/Common/DateInputV2.tsx | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/Components/Common/DateInputV2.tsx b/src/Components/Common/DateInputV2.tsx
index bcebd4e0055..4549a0d99c6 100644
--- a/src/Components/Common/DateInputV2.tsx
+++ b/src/Components/Common/DateInputV2.tsx
@@ -252,10 +252,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(

From 888cbe6b131f349c9ce98cd28687764c693e7177 Mon Sep 17 00:00:00 2001
From: suprabathk <suprabathkondapally@gmail.com>
Date: Mon, 25 Sep 2023 12:54:13 +0530
Subject: [PATCH 4/8] Removed unused Ref

---
 src/Components/Common/DateInputV2.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/Components/Common/DateInputV2.tsx b/src/Components/Common/DateInputV2.tsx
index 4549a0d99c6..7036d5c8bfb 100644
--- a/src/Components/Common/DateInputV2.tsx
+++ b/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",

From 0580c470b33eda329dc3e117225fcd25f88c6a1c Mon Sep 17 00:00:00 2001
From: suprabathk <suprabathkondapally@gmail.com>
Date: Mon, 25 Sep 2023 14:20:44 +0530
Subject: [PATCH 5/8] Using formatDate instead of .format

---
 src/Components/Assets/AssetServiceEditModal.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/Components/Assets/AssetServiceEditModal.tsx b/src/Components/Assets/AssetServiceEditModal.tsx
index 232cc5556b1..879007d1c8f 100644
--- a/src/Components/Assets/AssetServiceEditModal.tsx
+++ b/src/Components/Assets/AssetServiceEditModal.tsx
@@ -169,7 +169,6 @@ export const AssetServiceEditModal = (props: {
               data-testid="asset-last-serviced-on-input"
             >
               <DateFormField
-                // eslint-disable-next-line i18next/no-literal-string
                 label="Serviced On"
                 name="serviced_on"
                 className="mt-2"
@@ -183,9 +182,9 @@ export const AssetServiceEditModal = (props: {
                     ).toLocaleDateString("en-ca")
                   ) {
                     Notification.Error({
-                      msg: `Service date can't be after ${dayjs(
+                      msg: `Service date can't be after ${formatDate(
                         props.service_record.created_date
-                      ).format("DD/MM/YYYY")} (Creation date)`,
+                      )} (Creation date)`,
                     });
                   } else {
                     setForm({

From 7e00cafda35acfb46828dbf4a3b40cd5f38b542f Mon Sep 17 00:00:00 2001
From: suprabathk <suprabathkondapally@gmail.com>
Date: Mon, 25 Sep 2023 14:54:40 +0530
Subject: [PATCH 6/8] Added translations

---
 .../Assets/AssetServiceEditModal.tsx          | 33 +++++----
 src/Components/Facility/AssetCreate.tsx       | 71 ++++++++++---------
 2 files changed, 58 insertions(+), 46 deletions(-)

diff --git a/src/Components/Assets/AssetServiceEditModal.tsx b/src/Components/Assets/AssetServiceEditModal.tsx
index 879007d1c8f..a0fe4e81f74 100644
--- a/src/Components/Assets/AssetServiceEditModal.tsx
+++ b/src/Components/Assets/AssetServiceEditModal.tsx
@@ -10,6 +10,7 @@ import TextAreaFormField from "../Form/FormFields/TextAreaFormField";
 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;
@@ -60,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>
@@ -106,13 +107,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>
@@ -121,14 +126,16 @@ 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">
                     {formatDate(editRecord.serviced_on)}
                   </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">{editRecord.note || "-"}</p>
                 </div>
               </div>
@@ -141,7 +148,7 @@ export const AssetServiceEditModal = (props: {
                 editRecord ? setEditRecord(undefined) : props.handleClose();
               }}
             >
-              {editRecord ? "Back" : "Close"}
+              {editRecord ? t("Back") : t("Close")}
             </ButtonV2>
           </div>
         </div>
@@ -153,12 +160,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>
@@ -169,7 +176,7 @@ export const AssetServiceEditModal = (props: {
               data-testid="asset-last-serviced-on-input"
             >
               <DateFormField
-                label="Serviced On"
+                label={t("Serviced On")}
                 name="serviced_on"
                 className="mt-2"
                 position="LEFT"
@@ -200,8 +207,8 @@ export const AssetServiceEditModal = (props: {
               <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 });
@@ -212,7 +219,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}
           />
diff --git a/src/Components/Facility/AssetCreate.tsx b/src/Components/Facility/AssetCreate.tsx
index 810f0ffef6c..a81be6b1fc2 100644
--- a/src/Components/Facility/AssetCreate.tsx
+++ b/src/Components/Facility/AssetCreate.tsx
@@ -39,6 +39,7 @@ import { validateEmailAddress } from "../../Common/validation";
 import { dateQueryString } from "../../Utils/utils.js";
 import dayjs from "../../Utils/dayjs";
 import DateFormField from "../Form/FormFields/DateFormField.js";
+import { t } from "i18next";
 
 const Loading = lazy(() => import("../Common/Loading"));
 
@@ -405,7 +406,7 @@ const AssetCreate = (props: AssetProps) => {
   if (locations.length === 0) {
     return (
       <Page
-        title={assetId ? "Update Asset" : "Create New Asset"}
+        title={assetId ? t("Update Asset") : t("Create New Asset")}
         crumbsReplacements={{
           [facilityId]: { name: facilityName },
           assets: { style: "text-gray-200 pointer-events-none" },
@@ -420,14 +421,14 @@ const AssetCreate = (props: AssetProps) => {
             </div>
           </h1>
           <p className="text-gray-600">
-            You need at least a location to create an assest.
+            {t("You need at least a location to create an assest.")}
           </p>
           <button
             className="btn-primary btn mt-5"
             onClick={() => navigate(`/facility/${facilityId}/location/add`)}
           >
             <i className="fas fa-plus mr-2 text-white"></i>
-            Add Location
+            {t("Add Location")}
           </button>
         </section>
       </Page>
@@ -441,7 +442,8 @@ const AssetCreate = (props: AssetProps) => {
           onClick={() => setIsScannerActive(false)}
           className="btn btn-default mb-2"
         >
-          <i className="fas fa-times mr-2"></i> Close Scanner
+          <i className="fas fa-times mr-2"></i>
+          {t("Close Scanner")}
         </button>
         <QrReader
           delay={300}
@@ -453,7 +455,9 @@ const AssetCreate = (props: AssetProps) => {
           }
           style={{ width: "100%" }}
         />
-        <h2 className="self-center text-center text-lg">Scan Asset QR!</h2>
+        <h2 className="self-center text-center text-lg">
+          {t("Scan Asset QR!")}
+        </h2>
       </div>
     );
 
@@ -480,7 +484,7 @@ const AssetCreate = (props: AssetProps) => {
   return (
     <div className="relative flex flex-col">
       <Page
-        title={`${assetId ? "Update" : "Create"} Asset`}
+        title={`${assetId ? t("Update") : t("Create")} Asset`}
         className="grow-0 pl-6"
         crumbsReplacements={{
           [facilityId]: { name: facilityName },
@@ -535,7 +539,7 @@ const AssetCreate = (props: AssetProps) => {
                     >
                       <TextFormField
                         name="name"
-                        label="Asset Name"
+                        label={t("Asset Name")}
                         required
                         value={name}
                         onChange={({ value }) => setName(value)}
@@ -545,7 +549,7 @@ const AssetCreate = (props: AssetProps) => {
 
                     {/* Location */}
                     <FieldLabel className="w-max text-sm" required>
-                      Asset Location
+                      {t("Asset Location")}
                     </FieldLabel>
                     <div
                       ref={fieldRef["location"]}
@@ -572,7 +576,7 @@ const AssetCreate = (props: AssetProps) => {
                         data-testid="asset-type-input"
                       >
                         <SelectFormField
-                          label="Asset Type"
+                          label={t("Asset Type")}
                           name="asset_type"
                           required
                           options={[
@@ -607,7 +611,7 @@ const AssetCreate = (props: AssetProps) => {
                         <SelectFormField
                           disabled={!!(props.assetId && asset_class)}
                           name="asset_class"
-                          label="Asset Class"
+                          label={t("Asset Class")}
                           value={asset_class}
                           options={[
                             { title: "ONVIF Camera", value: AssetClass.ONVIF },
@@ -634,8 +638,8 @@ const AssetCreate = (props: AssetProps) => {
                     >
                       <TextAreaFormField
                         name="asset_description"
-                        label="Description"
-                        placeholder="Details about the equipment"
+                        label={t("Description")}
+                        placeholder={t("Details about the equipment")}
                         value={description}
                         onChange={({ value }) => setDescription(value)}
                         error={state.errors.description}
@@ -665,7 +669,7 @@ const AssetCreate = (props: AssetProps) => {
                         className="col-span-6"
                         required
                         name="is_working"
-                        label="Working Status"
+                        label={t("Working Status")}
                         options={["true", "false"]}
                         optionLabel={(option) => {
                           return (
@@ -693,8 +697,8 @@ const AssetCreate = (props: AssetProps) => {
                     >
                       <TextAreaFormField
                         name="not_working_reason"
-                        label="Why the asset is not working?"
-                        placeholder="Describe why the asset is not working"
+                        label={t("Why the asset is not working?")}
+                        placeholder={t("Describe why the asset is not working")}
                         value={not_working_reason}
                         onChange={(e) => setNotWorkingReason(e.value)}
                         error={state.errors.not_working_reason}
@@ -718,7 +722,7 @@ const AssetCreate = (props: AssetProps) => {
                           id="qr_code_id"
                           name="qr_code_id"
                           placeholder=""
-                          label="Asset QR ID"
+                          label={t("Asset QR ID")}
                           value={qrCodeId}
                           onChange={(e) => setQrCodeId(e.value)}
                           error={state.errors.qr_code_id}
@@ -744,9 +748,9 @@ const AssetCreate = (props: AssetProps) => {
                       <TextFormField
                         id="manufacturer"
                         name="manufacturer"
-                        label="Manufacturer"
+                        label={t("Manufacturer")}
                         value={manufacturer}
-                        placeholder="Eg. XYZ"
+                        placeholder={t("Eg. XYZ")}
                         onChange={(e) => setManufacturer(e.value)}
                         error={state.errors.manufacturer}
                       />
@@ -761,7 +765,7 @@ const AssetCreate = (props: AssetProps) => {
                       <TextFormField
                         name="WarrantyAMCExpiry"
                         value={warranty_amc_end_of_validity}
-                        label="Warranty / AMC Expiry"
+                        label={t("Warranty / AMC Expiry")}
                         error={state.errors.warranty_amc_end_of_validity}
                         onChange={(event) => {
                           const value = dayjs(event.value);
@@ -789,8 +793,8 @@ const AssetCreate = (props: AssetProps) => {
                       <TextFormField
                         id="support-name"
                         name="support_name"
-                        label="Customer Support Name"
-                        placeholder="Eg. ABC"
+                        label={t("Customer Support Name")}
+                        placeholder={t("Eg. ABC")}
                         value={support_name}
                         onChange={(e) => setSupportName(e.value)}
                         error={state.errors.support_name}
@@ -805,7 +809,7 @@ const AssetCreate = (props: AssetProps) => {
                     >
                       <PhoneNumberFormField
                         name="support_phone"
-                        label="Customer support number"
+                        label={t("Customer support number")}
                         required
                         value={support_phone}
                         onChange={(e) => setSupportPhone(e.value)}
@@ -823,8 +827,8 @@ const AssetCreate = (props: AssetProps) => {
                       <TextFormField
                         id="support-email"
                         name="support_email"
-                        label="Customer Support Email"
-                        placeholder="Eg. mail@example.com"
+                        label={t("Customer Support Email")}
+                        placeholder={t("Eg. mail@example.com")}
                         value={support_email}
                         onChange={(e) => setSupportEmail(e.value)}
                         error={state.errors.support_email}
@@ -842,9 +846,9 @@ const AssetCreate = (props: AssetProps) => {
                       <TextFormField
                         id="vendor-name"
                         name="vendor_name"
-                        label="Vendor Name"
+                        label={t("Vendor Name")}
                         value={vendor_name}
-                        placeholder="Eg. XYZ"
+                        placeholder={t("Eg. XYZ")}
                         onChange={(e) => setVendorName(e.value)}
                         error={state.errors.vendor_name}
                       />
@@ -859,8 +863,7 @@ const AssetCreate = (props: AssetProps) => {
                       <TextFormField
                         id="serial-number"
                         name="serial_number"
-                        // eslint-disable-next-line i18next/no-literal-string
-                        label="Serial Number"
+                        label={t("Serial Number")}
                         value={serial_number}
                         onChange={(e) => setSerialNumber(e.value)}
                         error={state.errors.serial_number}
@@ -877,7 +880,7 @@ const AssetCreate = (props: AssetProps) => {
                       data-testid="asset-last-serviced-on-input"
                     >
                       <DateFormField
-                        label="Last Serviced On"
+                        label={t("Last Serviced On")}
                         name="last_serviced_on"
                         className="mt-2"
                         position="RIGHT"
@@ -910,8 +913,10 @@ const AssetCreate = (props: AssetProps) => {
                     >
                       <TextAreaFormField
                         name="notes"
-                        label="Notes"
-                        placeholder="Eg. Details on functionality, service, etc."
+                        label={t("Notes")}
+                        placeholder={t(
+                          "Eg. Details on functionality, service, etc."
+                        )}
                         value={notes}
                         onChange={(e) => setNotes(e.value)}
                         error={state.errors.notes}
@@ -931,13 +936,13 @@ const AssetCreate = (props: AssetProps) => {
                     />
                     <Submit
                       onClick={(e) => handleSubmit(e, false)}
-                      label={assetId ? "Update" : "Create Asset"}
+                      label={assetId ? t("Update") : t("Create Asset")}
                     />
                     {!assetId && (
                       <Submit
                         data-testid="create-asset-add-more-button"
                         onClick={(e) => handleSubmit(e, true)}
-                        label="Create & Add More"
+                        label={t("Create & Add More")}
                       />
                     )}
                   </div>

From 7c2575e4b8ebe5dde8b2a5d11fdc94daa8d726f3 Mon Sep 17 00:00:00 2001
From: suprabathk <suprabathkondapally@gmail.com>
Date: Sun, 1 Oct 2023 11:54:34 +0530
Subject: [PATCH 7/8] Added translations for AssetServiceEditModal

---
 .../Assets/AssetServiceEditModal.tsx          | 26 +++++++++----------
 src/Locale/en/Asset.json                      | 14 +++++++++-
 2 files changed, 26 insertions(+), 14 deletions(-)

diff --git a/src/Components/Assets/AssetServiceEditModal.tsx b/src/Components/Assets/AssetServiceEditModal.tsx
index dfb2a51f51f..690524e471b 100644
--- a/src/Components/Assets/AssetServiceEditModal.tsx
+++ b/src/Components/Assets/AssetServiceEditModal.tsx
@@ -61,12 +61,12 @@ export const AssetServiceEditModal = (props: {
       <DialogModal
         show={props.show}
         onClose={props.handleClose}
-        title={t("Edit History")}
+        title={t("edit_history")}
       >
         <div>
           <div className="mb-4">
             <p className="text-md mt-1 text-gray-500">
-              {t("Update record for asset")}
+              {t("update_record_for_asset")}
               <strong> {props.asset?.name}</strong>
             </p>
           </div>
@@ -111,7 +111,7 @@ export const AssetServiceEditModal = (props: {
               <div className="my-2 flex justify-between">
                 <div className="grow">
                   <p className="text-sm font-medium text-gray-500">
-                    {t("Edited On")}
+                    {t("edited_on")}
                   </p>
                   <p className="text-gray-900">
                     {formatDateTime(editRecord.edited_on)}
@@ -119,7 +119,7 @@ export const AssetServiceEditModal = (props: {
                 </div>
                 <div className="grow">
                   <p className="text-sm font-medium text-gray-500">
-                    {t("Edited By")}
+                    {t("edited_by")}
                   </p>
                   <p className="text-gray-900">
                     {editRecord.edited_by.username}
@@ -129,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">
-                    {t("Serviced On")}
+                    {t("serviced_on")}
                   </p>
                   <p
                     className="text-gray-900"
@@ -140,7 +140,7 @@ export const AssetServiceEditModal = (props: {
                 </div>
                 <div className="mt-4 grow">
                   <p className="text-sm font-medium text-gray-500">
-                    {t("Notes")}
+                    {t("notes")}
                   </p>
                   <p className="text-gray-900" id="edit-history-asset-note">
                     {editRecord.note || "-"}
@@ -157,7 +157,7 @@ export const AssetServiceEditModal = (props: {
                 editRecord ? setEditRecord(undefined) : props.handleClose();
               }}
             >
-              {editRecord ? t("Back") : t("Close")}
+              {editRecord ? t("back") : t("close")}
             </ButtonV2>
           </div>
         </div>
@@ -169,12 +169,12 @@ export const AssetServiceEditModal = (props: {
     <DialogModal
       show={props.show}
       onClose={props.handleClose}
-      title={t("Update Asset Service Record")}
+      title={t("update_asset_service_record")}
     >
       <div>
         <div className="mb-4">
           <p className="text-md mt-1 text-gray-500">
-            {t("Update record for asset")}
+            {t("update_record_for_asset")}
             <strong> {props.asset?.name}</strong>
           </p>
         </div>
@@ -185,7 +185,7 @@ export const AssetServiceEditModal = (props: {
               data-testid="asset-last-serviced-on-input"
             >
               <DateFormField
-                label={t("Serviced On")}
+                label={t("serviced_on")}
                 name="serviced_on"
                 className="mt-2"
                 position="LEFT"
@@ -216,8 +216,8 @@ export const AssetServiceEditModal = (props: {
               <TextAreaFormField
                 name="notes"
                 rows={5}
-                label={t("Notes")}
-                placeholder={t("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 });
@@ -228,7 +228,7 @@ export const AssetServiceEditModal = (props: {
         </div>
         <div className="flex flex-col justify-end gap-2 md:flex-row">
           <Submit
-            label={`${isLoading ? t("Updating") : t("Update")}`}
+            label={`${isLoading ? t("updating") : t("update")}`}
             onClick={handleSubmit}
             loading={isLoading}
           />
diff --git a/src/Locale/en/Asset.json b/src/Locale/en/Asset.json
index cf13de5cd47..f24549ee0b6 100644
--- a/src/Locale/en/Asset.json
+++ b/src/Locale/en/Asset.json
@@ -1,3 +1,15 @@
 {
-  "create_asset": "Create Asset"
+  "create_asset": "Create Asset",
+  "edit_history": "Edit History",
+  "update_record_for_asset": "Update record for asset",
+  "edited_on": "Edited On",
+  "edited_by": "Edited By",
+  "serviced_on": "Serviced On",
+  "notes": "Notes",
+  "back": "Back",
+  "close": "Close",
+  "update_asset_service_record": "Update Asset Service Record",
+  "eg_details_on_functionality_service_etc": "Eg. Details on functionality, service, etc.",
+  "updating": "Updating",
+  "update": "Update"
 }

From 9c562714db1a89d79f630a09f7bd30638ca9fd39 Mon Sep 17 00:00:00 2001
From: suprabathk <suprabathkondapally@gmail.com>
Date: Sun, 1 Oct 2023 12:15:10 +0530
Subject: [PATCH 8/8] Added translations for AssetCreate

---
 src/Components/Facility/AssetCreate.tsx | 62 ++++++++++++-------------
 src/Locale/en/Facility.json             | 34 +++++++++++++-
 2 files changed, 64 insertions(+), 32 deletions(-)

diff --git a/src/Components/Facility/AssetCreate.tsx b/src/Components/Facility/AssetCreate.tsx
index a8093fe3bdb..beafe8d33c8 100644
--- a/src/Components/Facility/AssetCreate.tsx
+++ b/src/Components/Facility/AssetCreate.tsx
@@ -405,7 +405,7 @@ const AssetCreate = (props: AssetProps) => {
   if (locations.length === 0) {
     return (
       <Page
-        title={assetId ? t("Update Asset") : t("Create New Asset")}
+        title={assetId ? t("update_asset") : t("create_new_asset")}
         crumbsReplacements={{
           [facilityId]: { name: facilityName },
           assets: { style: "text-gray-200 pointer-events-none" },
@@ -420,14 +420,14 @@ const AssetCreate = (props: AssetProps) => {
             </div>
           </h1>
           <p className="text-gray-600">
-            {t("You need at least a location to create an assest.")}
+            {t("you_need_at_least_a_location_to_create_an_assest")}
           </p>
           <button
             className="btn-primary btn mt-5"
             onClick={() => navigate(`/facility/${facilityId}/location/add`)}
           >
             <i className="fas fa-plus mr-2 text-white"></i>
-            {t("Add Location")}
+            {t("add_location")}
           </button>
         </section>
       </Page>
@@ -442,7 +442,7 @@ const AssetCreate = (props: AssetProps) => {
           className="btn btn-default mb-2"
         >
           <i className="fas fa-times mr-2"></i>
-          {t("Close Scanner")}
+          {t("close_scanner")}
         </button>
         <QrReader
           delay={300}
@@ -455,7 +455,7 @@ const AssetCreate = (props: AssetProps) => {
           style={{ width: "100%" }}
         />
         <h2 className="self-center text-center text-lg">
-          {t("Scan Asset QR!")}
+          {t("scan_asset_qr")}
         </h2>
       </div>
     );
@@ -483,7 +483,7 @@ const AssetCreate = (props: AssetProps) => {
   return (
     <div className="relative flex flex-col">
       <Page
-        title={`${assetId ? t("Update") : t("Create")} Asset`}
+        title={`${assetId ? t("update") : t("create")} Asset`}
         className="grow-0 pl-6"
         crumbsReplacements={{
           [facilityId]: { name: facilityName },
@@ -538,7 +538,7 @@ const AssetCreate = (props: AssetProps) => {
                     >
                       <TextFormField
                         name="name"
-                        label={t("Asset Name")}
+                        label={t("asset_name")}
                         required
                         value={name}
                         onChange={({ value }) => setName(value)}
@@ -548,7 +548,7 @@ const AssetCreate = (props: AssetProps) => {
 
                     {/* Location */}
                     <FieldLabel className="w-max text-sm" required>
-                      {t("Asset Location")}
+                      {t("asset_location")}
                     </FieldLabel>
                     <div
                       ref={fieldRef["location"]}
@@ -575,7 +575,7 @@ const AssetCreate = (props: AssetProps) => {
                         data-testid="asset-type-input"
                       >
                         <SelectFormField
-                          label={t("Asset Type")}
+                          label={t("asset_type")}
                           name="asset_type"
                           required
                           options={[
@@ -610,7 +610,7 @@ const AssetCreate = (props: AssetProps) => {
                         <SelectFormField
                           disabled={!!(props.assetId && asset_class)}
                           name="asset_class"
-                          label={t("Asset Class")}
+                          label={t("asset_class")}
                           value={asset_class}
                           options={[
                             { title: "ONVIF Camera", value: AssetClass.ONVIF },
@@ -637,8 +637,8 @@ const AssetCreate = (props: AssetProps) => {
                     >
                       <TextAreaFormField
                         name="asset_description"
-                        label={t("Description")}
-                        placeholder={t("Details about the equipment")}
+                        label={t("description")}
+                        placeholder={t("details_about_the_equipment")}
                         value={description}
                         onChange={({ value }) => setDescription(value)}
                         error={state.errors.description}
@@ -668,7 +668,7 @@ const AssetCreate = (props: AssetProps) => {
                         className="col-span-6"
                         required
                         name="is_working"
-                        label={t("Working Status")}
+                        label={t("working_status")}
                         options={["true", "false"]}
                         optionLabel={(option) => {
                           return (
@@ -696,8 +696,8 @@ const AssetCreate = (props: AssetProps) => {
                     >
                       <TextAreaFormField
                         name="not_working_reason"
-                        label={t("Why the asset is not working?")}
-                        placeholder={t("Describe why the asset is not working")}
+                        label={t("why_the_asset_is_not_working")}
+                        placeholder={t("describe_why_the_asset_is_not_working")}
                         value={not_working_reason}
                         onChange={(e) => setNotWorkingReason(e.value)}
                         error={state.errors.not_working_reason}
@@ -721,7 +721,7 @@ const AssetCreate = (props: AssetProps) => {
                           id="qr_code_id"
                           name="qr_code_id"
                           placeholder=""
-                          label={t("Asset QR ID")}
+                          label={t("asset_qr_id")}
                           value={qrCodeId}
                           onChange={(e) => setQrCodeId(e.value)}
                           error={state.errors.qr_code_id}
@@ -747,9 +747,9 @@ const AssetCreate = (props: AssetProps) => {
                       <TextFormField
                         id="manufacturer"
                         name="manufacturer"
-                        label={t("Manufacturer")}
+                        label={t("manufacturer")}
                         value={manufacturer}
-                        placeholder={t("Eg. XYZ")}
+                        placeholder={t("eg_xyz")}
                         onChange={(e) => setManufacturer(e.value)}
                         error={state.errors.manufacturer}
                       />
@@ -764,7 +764,7 @@ const AssetCreate = (props: AssetProps) => {
                       <TextFormField
                         name="WarrantyAMCExpiry"
                         value={warranty_amc_end_of_validity}
-                        label={t("Warranty / AMC Expiry")}
+                        label={t("warranty_amc_expiry")}
                         error={state.errors.warranty_amc_end_of_validity}
                         onChange={(event) => {
                           const value = dayjs(event.value);
@@ -792,8 +792,8 @@ const AssetCreate = (props: AssetProps) => {
                       <TextFormField
                         id="support-name"
                         name="support_name"
-                        label={t("Customer Support Name")}
-                        placeholder={t("Eg. ABC")}
+                        label={t("customer_support_name")}
+                        placeholder={t("eg_abc")}
                         value={support_name}
                         onChange={(e) => setSupportName(e.value)}
                         error={state.errors.support_name}
@@ -808,7 +808,7 @@ const AssetCreate = (props: AssetProps) => {
                     >
                       <PhoneNumberFormField
                         name="support_phone"
-                        label={t("Customer support number")}
+                        label={t("customer_support_number")}
                         required
                         value={support_phone}
                         onChange={(e) => setSupportPhone(e.value)}
@@ -826,8 +826,8 @@ const AssetCreate = (props: AssetProps) => {
                       <TextFormField
                         id="support-email"
                         name="support_email"
-                        label={t("Customer Support Email")}
-                        placeholder={t("Eg. mail@example.com")}
+                        label={t("customer_support_email")}
+                        placeholder={t("eg_mail_example_com")}
                         value={support_email}
                         onChange={(e) => setSupportEmail(e.value)}
                         error={state.errors.support_email}
@@ -845,9 +845,9 @@ const AssetCreate = (props: AssetProps) => {
                       <TextFormField
                         id="vendor-name"
                         name="vendor_name"
-                        label={t("Vendor Name")}
+                        label={t("vendor_name")}
                         value={vendor_name}
-                        placeholder={t("Eg. XYZ")}
+                        placeholder={t("eg_xyz")}
                         onChange={(e) => setVendorName(e.value)}
                         error={state.errors.vendor_name}
                       />
@@ -862,7 +862,7 @@ const AssetCreate = (props: AssetProps) => {
                       <TextFormField
                         id="serial-number"
                         name="serial_number"
-                        label={t("Serial Number")}
+                        label={t("serial_number")}
                         value={serial_number}
                         onChange={(e) => setSerialNumber(e.value)}
                         error={state.errors.serial_number}
@@ -879,7 +879,7 @@ const AssetCreate = (props: AssetProps) => {
                       data-testid="asset-last-serviced-on-input"
                     >
                       <DateFormField
-                        label={t("Last Serviced On")}
+                        label={t("last_serviced_on")}
                         name="last_serviced_on"
                         className="mt-2"
                         position="RIGHT"
@@ -912,7 +912,7 @@ const AssetCreate = (props: AssetProps) => {
                     >
                       <TextAreaFormField
                         name="notes"
-                        label={t("Notes")}
+                        label={t("notes")}
                         placeholder={t(
                           "Eg. Details on functionality, service, etc."
                         )}
@@ -935,13 +935,13 @@ const AssetCreate = (props: AssetProps) => {
                     />
                     <Submit
                       onClick={(e) => handleSubmit(e, false)}
-                      label={assetId ? t("Update") : t("Create Asset")}
+                      label={assetId ? t("update") : t("create_asset")}
                     />
                     {!assetId && (
                       <Submit
                         data-testid="create-asset-add-more-button"
                         onClick={(e) => handleSubmit(e, true)}
-                        label={t("Create & Add More")}
+                        label={t("create_add_more")}
                       />
                     )}
                   </div>
diff --git a/src/Locale/en/Facility.json b/src/Locale/en/Facility.json
index aa44d86dda5..5e69f8108af 100644
--- a/src/Locale/en/Facility.json
+++ b/src/Locale/en/Facility.json
@@ -20,5 +20,37 @@
   "type_b_cylinders": "B Type Cylinders",
   "type_c_cylinders": "C Type Cylinders",
   "type_d_cylinders": "D Type Cylinders",
-  "select_local_body": "Select Local Body"
+  "select_local_body": "Select Local Body",
+  "update_asset": "Update Asset",
+  "create_new_asset": "Create New Asset",
+  "you_need_at_least_a_location_to_create_an_assest": "You need at least a location to create an assest.",
+  "add_location": "Add Location",
+  "close_scanner": "Close Scanner",
+  "scan_asset_qr": "Scan Asset QR!",
+  "update": "Update",
+  "create": "Create",
+  "asset_name": "Asset Name",
+  "asset_location": "Asset Location",
+  "asset_type": "Asset Type",
+  "asset_class": "Asset Class",
+  "description": "Description",
+  "details_about_the_equipment": "Details about the equipment",
+  "working_status": "Working Status",
+  "why_the_asset_is_not_working": "Why the asset is not working?",
+  "describe_why_the_asset_is_not_working": "Describe why the asset is not working",
+  "asset_qr_id": "Asset QR ID",
+  "manufacturer": "Manufacturer",
+  "eg_xyz": "Eg. XYZ",
+  "eg_abc": "Eg. ABC",
+  "warranty_amc_expiry": "Warranty / AMC Expiry",
+  "customer_support_name": "Customer Support Name",
+  "customer_support_number": "Customer support number",
+  "customer_support_email": "Customer Support Email",
+  "eg_mail_example_com": "Eg. mail@example.com",
+  "vendor_name": "Vendor Name",
+  "serial_number": "Serial Number",
+  "last_serviced_on": "Last Serviced On",
+  "notes": "Notes",
+  "create_asset": "Create Asset",
+  "create_add_more": "Create & Add More"
 }