Add contents to technician sidebar

src/Components/Drawer/Drawer.tsx

@@ -14,6 +14,9 @@ import { useDispatch } from "react-redux";
 import { auth_toggle } from "../Plugins/Redux/Slices/AuthSlice/AuthSlice";
 import { toast } from "react-toastify";
 import { useNavigate } from "react-router-dom";
+import FormatListBulletedIcon from "@mui/icons-material/FormatListBulleted";
+import ArticleIcon from "@mui/icons-material/Article";
+import AssessmentIcon from "@mui/icons-material/Assessment";
 export default function Drawer() {
   const queryclient = useQueryClient();
   const user = useQuery({ queryKey: ["user"], queryFn: UserAPI });
@@ -165,6 +168,64 @@ export default function Drawer() {
         }
         label={"Dashboard"}
       />
+      {user.data?.is_technician ? (
+        <>
+          <DrawerButton
+            onClick={async () => {
+              navigate("/view/equipment_instances");
+            }}
+            icon={
+              <FormatListBulletedIcon
+                style={{
+                  width: "48px",
+                  height: "48px",
+                  color: "3fb860",
+                  marginRight: "2px",
+                  alignSelf: "center",
+                  justifySelf: "center",
+                }}
+              />
+            }
+            label={"All Equipments"}
+          />
+          <DrawerButton
+            onClick={async () => {
+              navigate("/view/transactions");
+            }}
+            icon={
+              <ArticleIcon
+                style={{
+                  width: "48px",
+                  height: "48px",
+                  color: "3fb860",
+                  marginRight: "2px",
+                  alignSelf: "center",
+                  justifySelf: "center",
+                }}
+              />
+            }
+            label={"Transactions"}
+          />
+          <DrawerButton
+            onClick={async () => {
+              navigate("/view/transactions/report");
+            }}
+            icon={
+              <AssessmentIcon
+                style={{
+                  width: "48px",
+                  height: "48px",
+                  color: "3fb860",
+                  marginRight: "2px",
+                  alignSelf: "center",
+                  justifySelf: "center",
+                }}
+              />
+            }
+            label={"Transaction Report"}
+          />
+        </>
+      ) : null}
       <DrawerButton
         onClick={async () => {
           navigate("/");
@@ -197,7 +258,6 @@ export default function Drawer() {
         }
         label={"Log out"}
       />
-      {user.data?.is_teacher ? <p>You are a teacher</p> : null}
     </div>
   );
 }

src/Components/DrawerButton/DrawerButton.tsx

@@ -23,8 +23,8 @@ export default function DrawerButton(props: props) {
         onMouseLeave={() => setClicked(false)}
         style={{
           borderRadius: 24,
-          minWidth: "196px",
+          minWidth: "212px",
-          maxWidth: "196px",
+          maxWidth: "212px",
           borderColor: colors.button_border,
           borderStyle: "solid",
           borderWidth: "2px",