Add CabinetCreation component and form validation; update translations and routing

public/locales/en/translation.json

@@ -51,5 +51,9 @@
     "create": "Create",
     "operation": "Operation",
     "next": "Next",
-    "select": "Select"
+    "select": "Select",
+    "cabinetCreation": "Cabinet Creation",
+    "cabinetId": "Cabinet ID",
+    "cabinetKeyId": "Cabinet Key ID",
+    "noOfLockers": "No of Lockers"
 }

src/components/FormBox.jsx

@@ -3,12 +3,12 @@ import clsx from 'clsx';
 
 function FormBox({ title, children, alt = false }) {
   return (
-    <div className={clsx(alt ? 'bg-secondary-variant dark:bg-secondary-variant-dark border-secondary-variant dark:border-secondary-variant-dark' : 'bg-surface-variant dark:bg-surface-variant-dark', 'transition-color-mode font-body border-secondary dark:border-secondary-dark border-2 p-4 rounded-3xl relative h-full')}>
+    <form className={clsx(alt ? 'bg-secondary-variant dark:bg-secondary-variant-dark border-secondary-variant dark:border-secondary-variant-dark' : 'bg-surface-variant dark:bg-surface-variant-dark', 'transition-color-mode font-body border-secondary dark:border-secondary-dark border-2 p-4 rounded-3xl relative h-full')}>
       <label className={clsx(alt && 'bg-surface dark:bg-surface-dark border-3 border-secondary-variant dark:border-secondary-variant-dark', 'font-body absolute left-11 -top-4 bg-secondary dark:bg-secondary-dark text-primary dark:text-primary-dark font-medium py-1 px-4 rounded-full')}>
         {title}
       </label>
       {children}
-    </div>
+    </form>
   );
 }
 

src/main.jsx

@@ -6,6 +6,7 @@ import './i18n'
 import { createBrowserRouter, RouterProvider } from 'react-router-dom';
 import Home from './pages/Home.jsx'
 import CabinetMaintenace from './pages/CabinetMaintenance.jsx'
+import CabinetCreation from './pages/CabinetCreation.jsx'
 
 const router = createBrowserRouter([
   {
@@ -19,6 +20,10 @@ const router = createBrowserRouter([
       {
         path: 'operation/cabinet',
         element: <CabinetMaintenace />
+      },
+      {
+        path: 'operation/cabinet/create',
+        element: <CabinetCreation />
       }
     ]
   }

src/pages/CabinetCreation.jsx

@@ -0,0 +1,86 @@
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import FormBox from "../components/FormBox";
+import Button from "../components/Button";
+import { useNavigate } from "react-router-dom";
+import clsx from "clsx";
+
+function CabinetCreation() {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+
+  const [cabinetId, setCabinetId] = useState({id: "", valid: true});
+  const [cabinetKeyId, setCabinetKeyId] = useState({id: "", valid: true});
+  const [noOfLockers, setNoOfLockers] = useState({number: 0, valid: true});
+
+  const handleNext = (e) => {
+    e.preventDefault();
+    const idRegex = /^[A-Z]{2}[0-9]{4}$/;
+    if (!idRegex.test(cabinetId.id)) {
+      setCabinetId({id: cabinetId.id, valid: false});
+      return;
+    } else if (!idRegex.test(cabinetKeyId.id)) {
+      setCabinetKeyId({id: cabinetKeyId.id, valid: false});
+      return;
+    } else if (noOfLockers.number === 0) {
+      setNoOfLockers({number: noOfLockers.number, valid: false});
+      return;
+    } 
+    navigate("register-lockers", {state: {cabinetId: cabinetId.id, cabinetKeyId: cabinetKeyId.id, noOfLockers: noOfLockers.number}});
+  };
+  return (
+    <div className="w-full h-fit">
+      <FormBox title={t("cabinetCreation")}>
+        <div className="p-2 pt-7 flex flex-col gap-4">
+          <div className="flex">
+            <label className="mr-4 text-lg text-black dark:text-primary-dark w-[10%]">
+              {t("cabinetId")}
+            </label>
+            <div className="w-full">
+              <input
+                value={cabinetId.id}
+                className={clsx("w-1/5 h-10 px-2 rounded-full dark:bg-white dark:text-grey border-2 border-grey text-grey focus:outline-grey", !cabinetId.valid && "border-error")}
+                onChange={(e) => setCabinetId({id: e.target.value.toUpperCase(), valid: true })}
+                type="text"
+                maxLength={6}
+              />
+              {!cabinetId.valid && <div className="text-sm text-error ml-3 pt-1">Invalid Cabinet Id</div>}
+            </div>
+          </div>
+          <div className="flex">
+            <label className="mr-4 text-lg text-black dark:text-primary-dark w-[10%]">
+              {t("cabinetKeyId")}
+            </label>
+            <div className="w-full">
+            <input
+              value={cabinetKeyId.id}
+              className={clsx("w-1/5 h-10 px-2 rounded-full dark:bg-white dark:text-grey border-2 border-grey text-grey focus:outline-grey", !cabinetKeyId.valid && "border-error")}
+              onChange={(e) => setCabinetKeyId({id: e.target.value.toUpperCase(), valid: true })}
+              type="text"
+              maxLength={6}
+            />
+            {!cabinetKeyId.valid && <div className="text-sm text-error ml-3 pt-1">Invalid Key Id</div>}
+            </div>
+          </div>
+          <div className="flex">
+            <label className="mr-4 text-lg text-black dark:text-primary-dark w-[10%]">
+              {t("noOfLockers")}
+            </label>
+            <div className="w-full">
+            <input
+              value={noOfLockers.number}
+              className={clsx("w-1/5 h-10 px-2 rounded-full dark:bg-white dark:text-grey border-2 border-grey text-grey focus:outline-grey", !noOfLockers.valid && "border-error")}
+              onChange={(e) => setNoOfLockers({number: e.target.value, valid: true })}
+              type="number"
+            />
+            {!noOfLockers.valid && <div className="text-sm text-error ml-3 pt-1">Invalid Number of Lockers</div>}
+            </div>
+          </div>
+        </div>
+        <Button text={t("next")} onClick={(e) => {handleNext(e)}}/>
+      </FormBox>
+    </div>
+  );
+}
+
+export default CabinetCreation;