Improved dashboard

src/App.tsx

@@ -11,6 +11,8 @@ import DashboardPage from "./Pages/DashboardPage/DashboardPage";
 import Revalidator from "./Components/Revalidator/Revalidator";
 import ActivationPage from "./Pages/ActivationPage/ActivationPage";
 import ResetPasswordPage from "./Pages/ResetPasswordPage/ResetPasswordPage";
+import EquipmentInstancesListPage from "./Pages/EquipmentInstancesListPage/EquipmentInstancesListPage";
+import AddEquipmentInstancePage from "./Pages/AddEquipmentInstancePage/AddEquipmentInstancePage";
 
 const queryClient = new QueryClient();
 const router = createHashRouter([
@@ -34,6 +36,26 @@ const router = createHashRouter([
     ),
     errorElement: <ErrorPage />,
   },
+  {
+    path: "/view/equipment_instances",
+    element: (
+      <>
+        <Revalidator />
+        <EquipmentInstancesListPage />
+      </>
+    ),
+    errorElement: <ErrorPage />,
+  },
+  {
+    path: "/add/equipment_instance",
+    element: (
+      <>
+        <Revalidator />
+        <AddEquipmentInstancePage />
+      </>
+    ),
+    errorElement: <ErrorPage />,
+  },
   {
     path: "/activation/:uid/:token",
     element: (

src/Pages/AddEquipmentInstancePage/AddEquipmentInstancePage.tsx

@@ -0,0 +1,3 @@
+export default function AddEquipmentInstancePage() {
+  return <div>{"AddEquipmentInstancePage"}</div>;
+}

src/Pages/DashboardPage/DashboardPage.tsx

@@ -10,7 +10,10 @@ import ChairIcon from "@mui/icons-material/Chair";
 import FormatListBulletedIcon from "@mui/icons-material/FormatListBulleted";
 import AddToQueueIcon from "@mui/icons-material/AddToQueue";
 import { colors } from "../../styles";
+import { useNavigate } from "react-router-dom";
 export default function Dashboard() {
+  const navigate = useNavigate();
+
   const queries = useQueries({
     queries: [
       {
@@ -238,6 +241,9 @@ export default function Dashboard() {
               flexWrap: "wrap",
             },
           }}
+          onClick={() => {
+            navigate("/view/equipment_instances");
+          }}
         >
           <FormatListBulletedIcon
             style={{
@@ -266,6 +272,9 @@ export default function Dashboard() {
               flexWrap: "wrap",
             },
           }}
+          onClick={() => {
+            navigate("/add/equipment_instance");
+          }}
         >
           <AddToQueueIcon
             style={{

src/Pages/EquipmentInstancesListPage/EquipmentInstancesListPage.tsx

@@ -0,0 +1,3 @@
+export default function EquipmentInstancesListPage() {
+  return <div>{"EquipmentInstancesListPage"}</div>;
+}