Refactor cabinet maintenance routing and add CabinetMaintenance component; update Header and main router configuration

src/components/Button.jsx

@@ -0,0 +1,19 @@
+import PropTypes from 'prop-types';
+
+function Button({text, onClick}) {
+    return (
+        <button 
+            className="px-12 py-2 text-lg text-white rounded-full bg-primary dark:bg-primary-dark" 
+            onClick={onClick}
+        >
+            {text}
+        </button>
+    )
+}
+
+Button.propTypes = {
+    text: PropTypes.string.isRequired,
+    onClick: PropTypes.func.isRequired
+};
+
+export default Button;

src/components/Header.jsx

@@ -25,7 +25,7 @@ function Header() {
       name: "lockerOperation",
       submenu: [
         { name: "accountCreation", path: "account-creation" },
-        { name: "cabinetMaintenance", path: "cabinet-maintenance" },
+        { name: "cabinetMaintenance", path: "operation/cabinet" },
         { name: "lockerMaintenance", path: "locker-maintenance" },
         { name: "rentPenaltyCollection", path: "rent-collection" },
         { name: "chargeManagement", path: "charge-management" },

src/main.jsx

@@ -4,8 +4,8 @@ import App from './App.jsx'
 import './index.css'
 import './i18n'
 import { createBrowserRouter, RouterProvider } from 'react-router-dom';
-import Placeholder from './pages/Placeholder.jsx';
 import Home from './pages/Home.jsx'
+import CabinetMaintenace from './pages/CabinetMaintenance.jsx'
 
 const router = createBrowserRouter([
   {
@@ -17,8 +17,8 @@ const router = createBrowserRouter([
         element: <Home />
       },
       {
-        path: 'cabinet-maintenance',
-        element: <Placeholder />
+        path: 'operation/cabinet',
+        element: <CabinetMaintenace />
       }
     ]
   }

src/pages/CabinetMaintenance.jsx

@@ -0,0 +1,41 @@
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import FormBox from "../components/FormBox";
+import Button from "../components/Button";
+
+function CabinetMaintenace() {
+  const navigate = useNavigate();
+  const [operation, setOperation] = useState("");
+
+  const handleNext = () => {
+    if (operation === "") {
+      alert("Please select an operation.");
+    } 
+    navigate(operation)
+  };
+
+  return (
+    <div className="w-full h-fit">
+      <FormBox title="Cabinet Maintenance">
+        <div className="p-2">
+          <div className="my-5">
+            <label className="mr-4 text-lg ">Operation</label>
+            <select
+              className="w-1/5 h-10 px-2 rounded-full border-2 border-grey text-grey"
+              onChange={(e) => setOperation(e.target.value)}
+              defaultValue={operation}
+            >
+              <option value="" disabled>
+                Select
+              </option>
+              <option value="create">Create</option>
+            </select>
+          </div>
+          <Button text="Next" onClick={handleNext} />
+        </div>
+      </FormBox>
+    </div>
+  );
+}
+
+export default CabinetMaintenace;

tailwind.config.js

@@ -9,6 +9,7 @@ export default {
     colors: {
       white: '#FFFFFF',
       black: '#000000',
+      grey: '#979797',
       transparent: 'transparent',
       primary: {
         DEFAULT: '#008C46',