Add translations for new operations in multiple languages; update CabinetMaintenance component for localization

public/locales/bn/translation.json

@@ -46,5 +46,9 @@
     "hpn_rupay_kcc_time": "সমস্ত রূপে কিসান ক্রেডিট কার্ড লেনদেন ১৯:00 ঘটিকার আগে সম্পন্ন করুন",
     "hpn_rupay_kcc_atm": "কিছু অভ্যন্তরীণ পরিবর্তনের কারণে, মাইক্রো-এটিএম এর মাধ্যমে রূপে কিসান ক্রেডিট কার্ড কার্যক্রম বন্ধ করা হয়েছে। সেবা আগামীকাল থেকে পুনরায় চালু হবে।",
     "copyright_statement": "কপিরাইট © ২০২৩, টাটা কনসাল্টেন্সি সার্ভিসেস। সমস্ত অধিকার সংরক্ষিত",
-    "privacy_policy": "গোপনীয়তা নীতি"
+    "privacy_policy": "গোপনীয়তা নীতি",
+    "create": "তৈরি করুন",
+    "operation": "অপারেশন",
+    "next": "পরবর্তী",
+    "select": "নির্বাচন করুন"
 }

public/locales/en/translation.json

@@ -47,5 +47,9 @@
     "hpn_rupay_kcc_time": "Complete all Rupay KCC transactions before 19:00 Hrs", 
     "hpn_rupay_kcc_atm": "Due to some internal changes, Rupay KCC Operations through Micro-ATM has been stopped. The service will resume starting tomorrow.",
     "copyright_statement": "Copyright © 2023, Tata Consultancy Services. All rights reserved",
-    "privacy_policy": "Privacy Policy"
+    "privacy_policy": "Privacy Policy",
+    "create": "Create",
+    "operation": "Operation",
+    "next": "Next",
+    "select": "Select"
 }

public/locales/hi/translation.json

@@ -47,5 +47,9 @@
     "hpn_rupay_kcc_time": "सभी रुपे केसीसी लेनदेन 19:00 बजे से पहले पूरा करें",
     "hpn_rupay_kcc_atm": "कुछ आंतरिक बदलावों के कारण, माइक्रो-एटीएम के माध्यम से रुपे केसीसी संचालन बंद कर दिया गया है। सेवा कल से फिर से शुरू होगी।",
     "copyright_statement": "कॉपीराइट © 2023, टाटा कंसल्टेंसी सर्विसेज। सभी अधिकार सुरक्षित",
-    "privacy_policy": "गोपनीयता नीति"
+    "privacy_policy": "गोपनीयता नीति",
+    "create": "बनाएं",
+    "operation": "ऑपरेशन",
+    "next": "अगला",
+    "select": "चुनें"
 }

src/pages/CabinetMaintenance.jsx

@@ -1,12 +1,14 @@
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
+import { useToast } from "../hooks/useToast";
+import { useTranslation } from "react-i18next";
 import FormBox from "../components/FormBox";
 import Button from "../components/Button";
-import { useToast } from "../hooks/useToast";
 
 function CabinetMaintenace() {
   const navigate = useNavigate();
   const showToast = useToast();
+  const { t } = useTranslation();
   const [operation, setOperation] = useState("");
 
   const handleNext = () => {
@@ -19,22 +21,22 @@ function CabinetMaintenace() {
 
   return (
     <div className="w-full h-fit">
-      <FormBox title="Cabinet Maintenance">
+      <FormBox title={t('cabinetMaintenance')}>
         <div className="p-2">
           <div className="my-5">
-            <label className="mr-4 text-lg text-black dark:text-white">Operation</label>
+            <label className="mr-4 text-lg text-black dark:text-white">{t('operation')}</label>
             <select
               className="w-1/5 h-10 px-2 rounded-full dark:bg-grey dark:text-primary-dark border-2 border-grey text-grey focus:border-none focus:outline-none"
               onChange={(e) => setOperation(e.target.value)}
               defaultValue={operation}
             >
               <option value="" disabled>
-                Select
+                {t('select')}
               </option>
-              <option value="create">Create</option>
+              <option value="create">{t('create')}</option>
             </select>
           </div>
-          <Button text="Next" onClick={handleNext} />
+          <Button text={t('next')} onClick={handleNext} />
         </div>
       </FormBox>
     </div>