fixed form title in LockerMaintenance.jsx

public/locales/hi/translation.json

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

src/components/FormSelect.jsx

@@ -2,8 +2,10 @@ 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
@@ -14,7 +16,7 @@ function FormSelect({ props, valid = true, className = "", options }) {
         )}
       >
         <option disabled value="">
-          Select
+          {t("select")}
         </option>
         {options?.map(({ value, label }) => (
           <option key={value} value={value}>

src/pages/ChargeEdit.jsx

@@ -166,10 +166,7 @@ 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
@@ -180,7 +177,6 @@ function ChargeEdit() {
             }
           />
         </FormBox>
-      </div>
     </div>
   );
 }

src/pages/CheckInOutManagement.jsx

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

src/pages/KeySwap.jsx

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

src/pages/LockerMaintenance.jsx

@@ -3,8 +3,10 @@ import { useNavigate } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import FormBox from "../components/FormBox";
 import Button from "../components/Button";
-import { motion, AnimatePresence } from "motion/react";
+import FormField from "../components/FormField";
-import clsx from "clsx";
+import FormInput from "../components/FormInput";
+import FormSelect from "../components/FormSelect";
+import FieldsWrapper from "../components/FieldsWrapper";
 
 function LockerMaintenance() {
   const navigate = useNavigate();
@@ -19,48 +21,44 @@ 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("cabinetMaintenance")}>
+      <FormBox title={t("lockerMaintenance")}>
-        <div className="p-2 pt-7">
+        <FieldsWrapper>{formFields.map(renderField)}</FieldsWrapper>
-          <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,17 +125,11 @@ function LockerStatus() {
       <AnimatePresence>
         {notification.message !== "" && <Notification {...notification} />}
       </AnimatePresence>
-      <div className="relative">
+
-        {notification.type === "success" && (
+      <FormBox title={t("lockerStatus")}>
-          <div className="absolute inset-0 bg-[#fff]/50 z-10 rounded-3xl" />
+        <FieldsWrapper>{formFields.map(renderField)}</FieldsWrapper>
-        )}
+        <Button text={t("submit")} onClick={handleSubmit} />
-        <FormBox title={t("lockerStatus")}>
+      </FormBox>
-          <FieldsWrapper>
-            {formFields.map(renderField)}
-          </FieldsWrapper>
-          <Button text={t("submit")} onClick={handleSubmit} />
-        </FormBox>
-      </div>
     </div>
   );
 }