public/locales/hi/translation.json

@@ -51,6 +51,5 @@
     "create": "बनाएं",
     "operation": "ऑपरेशन",
     "next": "अगला",
-    "select": "चुनें",
+    "select": "चुनें"
-    "productCode": "प्रोडक्ट कोड"
 }

src/components/FormSelect.jsx

@@ -2,10 +2,8 @@ import PropTypes from "prop-types";
 import { AnimatePresence } from "motion/react";
 import clsx from "clsx";
 import FieldError from "./FieldError";
-import { useTranslation } from "react-i18next";
 
 function FormSelect({ props, valid = true, className = "", options }) {
-  const { t } = useTranslation();
   return (
     <div>
       <select
@@ -16,7 +14,7 @@ function FormSelect({ props, valid = true, className = "", options }) {
         )}
       >
         <option disabled value="">
-          {t("select")}
+          Select
         </option>
         {options?.map(({ value, label }) => (
           <option key={value} value={value}>

src/pages/ChargeEdit.jsx

@@ -166,7 +166,10 @@ function ChargeEdit() {
       <AnimatePresence>
         {notification.message !== "" && <Notification {...notification} />}
       </AnimatePresence>
-      
+      <div className="relative">
+        {notification.type === "success" && (
+          <div className="absolute inset-0 bg-[#fff]/50 z-10 rounded-3xl" />
+        )}
         <FormBox title={t("chargeEdit")}>
           <FieldsWrapper>{formFields.map(renderField)}</FieldsWrapper>
           <Button
@@ -178,6 +181,7 @@ function ChargeEdit() {
           />
         </FormBox>
       </div>
+    </div>
   );
 }
 

src/pages/CheckInOutManagement.jsx

@@ -14,7 +14,11 @@ import FieldsWrapper from "../components/FieldsWrapper";
 
 function CheckInOutManagement() {
   const [accountNumber, setAccountNumber] = useState("");
-  const [notification, setNotification] = useState({ message: "", type: "" });
+  const [notification, setNotification] = useState({
+    visible: false,
+    message: "",
+    type: "",
+  });
 
   const showToast = useToast();
   const { setIsLoading } = useLoading();
@@ -60,7 +64,7 @@ function CheckInOutManagement() {
   return (
     <div>
       <AnimatePresence>
-        { notification.message !== "" && <Notification {...notification} /> }
+        {notification.visible && <Notification notification={notification} />}
       </AnimatePresence>
       <FormBox title="Check In/Out">
         <FieldsWrapper>

src/pages/KeySwap.jsx

@@ -166,11 +166,16 @@ function KeySwap() {
       <AnimatePresence>
         {notification.message !== "" && <Notification {...notification} />}
       </AnimatePresence>
+      <div className="relative">
+        {notification.type === "success" && (
+          <div className="absolute inset-0 bg-[#fff]/50 z-10 rounded-3xl" />
+        )}
         <FormBox title={t("lockerStatus")}>
           <FieldsWrapper>{formFields.map(renderField)}</FieldsWrapper>
           <Button text={t("submit")} onClick={handleKeySwap} />
         </FormBox>
       </div>
+    </div>
   );
 }
 

src/pages/LockerMaintenance.jsx

@@ -3,10 +3,8 @@ import { useNavigate } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import FormBox from "../components/FormBox";
 import Button from "../components/Button";
-import FormField from "../components/FormField";
+import { motion, AnimatePresence } from "motion/react";
-import FormInput from "../components/FormInput";
+import clsx from "clsx";
-import FormSelect from "../components/FormSelect";
-import FieldsWrapper from "../components/FieldsWrapper";
 
 function LockerMaintenance() {
   const navigate = useNavigate();
@@ -21,44 +19,48 @@ function LockerMaintenance() {
     navigate(operation.value);
   };
 
-  const formFields = [
-    {
-      name: "value",
-      label: t("operation"),
-      options: [
-        { label: t("status"), value: "status" },
-        { label: t("keySwap"), value: "key-swap" },
-      ],
-      type: "select",
-    },
-  ];
-
-  const renderField = (field) => {
-    const commonProps = {
-      value: operation[field.name],
-      onChange: (e) => {
-        const newValues = { ...operation };
-        newValues[field.name] = e.target.value;
-        newValues[`${field.name}Valid`] = true;
-        setOperation(newValues);
-      },
-    };
-    const options = field.options;
-    return (
-      <FormField label={field.label}>
-        {field.type === "input" ? (
-          <FormInput props={commonProps} />
-        ) : (
-          <FormSelect props={commonProps} options={options} />
-        )}
-      </FormField>
-    );
-  };
-
   return (
     <div>
-      <FormBox title={t("lockerMaintenance")}>
+      <FormBox title={t("cabinetMaintenance")}>
-        <FieldsWrapper>{formFields.map(renderField)}</FieldsWrapper>
+        <div className="p-2 pt-7">
+          <div className="flex">
+            <label className="mr-4 text-lg text-black dark:text-primary-dark w-[10%]">
+              {t("operation")}
+            </label>
+            <div className="w-full">
+              <select
+                className={clsx(
+                  "w-1/5 h-10 px-2 rounded-full dark:bg-grey dark:text-primary-dark border-2 focus:outline-grey border-grey",
+                  !operation.valid && "border-error"
+                )}
+                onChange={(e) =>
+                  setOperation({ value: e.target.value, valid: true })
+                }
+                defaultValue={operation.value}
+                value={operation.value}
+              >
+                <option value="" disabled>
+                  {t("select")}
+                </option>
+                <option value="status">{t("changeStatus")}</option>
+                <option value="key-swap">{t("keySwap")}</option>
+              </select>
+              <AnimatePresence initial={false}>
+                {!operation.valid && (
+                  <motion.div
+                    className="w-1/5 text-sm text-error ml-3 pt-1"
+                    initial={{ opacity: 0, scale: 0 }}
+                    animate={{ opacity: 1, scale: 1 }}
+                    exit={{ opacity: 0, scale: 0 }}
+                    key="cabinetIdError"
+                  >
+                    Invalid Operation
+                  </motion.div>
+                )}
+              </AnimatePresence>
+            </div>
+          </div>
+        </div>
         <Button text={t("next")} onClick={(e) => handleNext(e)} />
       </FormBox>
     </div>

src/pages/LockerStatus.jsx

@@ -125,12 +125,18 @@ function LockerStatus() {
       <AnimatePresence>
         {notification.message !== "" && <Notification {...notification} />}
       </AnimatePresence>
-
+      <div className="relative">
+        {notification.type === "success" && (
+          <div className="absolute inset-0 bg-[#fff]/50 z-10 rounded-3xl" />
+        )}
         <FormBox title={t("lockerStatus")}>
-        <FieldsWrapper>{formFields.map(renderField)}</FieldsWrapper>
+          <FieldsWrapper>
+            {formFields.map(renderField)}
+          </FieldsWrapper>
           <Button text={t("submit")} onClick={handleSubmit} />
         </FormBox>
       </div>
+    </div>
   );
 }