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

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>