added homepage navigation, and configure header

src/Components/DashboardPage/Technician/TechnicianNavigation.tsx

@@ -0,0 +1,124 @@
+import styles from "../../../styles";
+import { useNavigate } from "react-router-dom";
+import AssessmentIcon from "@mui/icons-material/Assessment";
+
+import equipment from "../../../assets/Equipment.svg";
+import transaction from "../../../assets/Transaction.svg";
+
+export default function TechnicianNavigation() {
+  const navigate = useNavigate();
+  return (
+    <>
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          gap: "24px",
+          alignSelf: "stretch",
+        }}
+      >
+
+        <div style={{
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          gap: "24px",
+          width: "100%",
+          maxWidth: "800px"
+        }}>
+
+<p
+          style={{
+            overflow: "hidden",
+            color: "#0E410D",
+            fontSize: "24px",
+            fontWeight: 700,
+            display: "-webkit-box",
+            width: "100%",
+            maxWidth: "807px",
+            flex: 1,
+            textAlign: "left",
+            marginLeft: "1rem"
+          }}
+        >
+          Feature
+        </p>
+          <button
+            style={{
+              display: "flex",
+              width: "100%",
+              height: "85px",
+              padding: "15px 30px",
+              alignItems: "center",
+              gap: "15px",
+              borderRadius: "12px",
+              border: "1px solid #6877FF",
+              background: "#DDEDFF",
+            }}
+            onClick={() => {
+              navigate("/view/transactions");
+            }}
+          >
+            <img src={transaction} alt="Manage Transaction" />
+
+            <p style={{ ...styles.text_normal, fontSize: 20, margin: "10" }}>
+              Manage Transactions
+            </p>
+          </button>
+
+          <button
+            style={{
+              display: "flex",
+              width: "100%",
+              height: "85px",
+              padding: "15px 30px",
+              alignItems: "center",
+              gap: "15px",
+              borderRadius: "12px",
+              border: "1px solid #E3BD91",
+              background: "#E8D3BB",
+            }}
+            onClick={() => {
+              navigate("/dashboard");
+            }}
+          >
+            <img src={equipment} alt="Manage Equipment" />
+
+            <p style={{ ...styles.text_normal, fontSize: 20, margin: "10" }}>
+              Manage Equipments
+            </p>
+          </button>
+          <button
+            style={{
+              display: "flex",
+              width: "100%",
+              height: "85px",
+              padding: "15px 30px",
+              alignItems: "center",
+              gap: "15px",
+              borderRadius: "12px",
+              border: "1px solid #FFCBA5",
+              background: "#FFEDAF",
+            }}
+            onClick={() => {
+              navigate("/view/transactions/report");
+            }}
+          >
+            <AssessmentIcon
+              style={{
+                height: 48,
+                width: 48,
+                fill: "brown",
+              }}
+            />
+
+            <p style={{ ...styles.text_normal, fontSize: 20, margin: "10" }}>
+              Generate Report
+            </p>
+          </button>
+        </div>
+      </div>
+    </>
+  );
+}

src/Components/Header/Header.tsx

@@ -10,26 +10,32 @@ export interface props {
 export default function Header(props: props) {
   const [SidebarOpen, SetSidebarOpen] = useState(false);
   return (
+
+    <div>
     <div
       style={{
-        position: "sticky",
+        position: "fixed",
         top: 0,
-        zIndex: 1000,
+        width: "100%",
-        backgroundColor: colors.header_color,
         display: "flex",
-        flexDirection: "row",
+        padding: "10px 25px",
+        justifyContent: "space-between",
+        alignItems: "center",
+        alignSelf: "stretch",
+        background: "#B2DFAB",
+        zIndex: 1000, // Ensure it's above other elements
       }}
     >
       <div
         style={{
-          flex: 1,
+          display: "flex",
-          alignSelf: "center",
+          flex: "1 0 0",
         }}
       >
         <MenuIcon
           style={{
-            height: "64px",
+            height: "48px",
-            width: "64px",
+            width: "48px",
             float: "left",
             marginLeft: "8px",
           }}
@@ -38,9 +44,33 @@ export default function Header(props: props) {
           }}
         />
       </div>
-      <p style={{ ...styles.text_light, ...styles.text_L, ...{ flex: 1 } }}>
+
-        {props.label}
+      <div
-      </p>
+        style={{
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+          flex: "1 0 0",
+          alignSelf: "stretch",
+        }}
+      >
+        <p style={{ ...styles.text_light, fontSize: 24, textAlign: "center", flex: 1, margin: "0px" }}>{props.label}</p>
+      </div>
+
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+          flex: "1 0 0",
+          alignSelf: "stretch",
+        }}
+      >
+      </div>
+
+
+    </div>
+
       <div style={{ flex: 1 }} />
       <Drawer open={SidebarOpen} onClose={() => SetSidebarOpen(false)}>
         <SidebarModal />

src/Pages/DashboardPage/DashboardPage.tsx

@@ -6,36 +6,39 @@ import TechnicianEquipmentButtons from "../../Components/DashboardPage/Technicia
 import TechnicianLogButtons from "../../Components/DashboardPage/Technician/TechnicianLogButtons";
 import StudentTransactionListView from "../../Components/DashboardPage/Student/StudentTransactionListView";
 import StudentDashboard from "../../Components/DashboardPage/Student/StudentDashboard";
+import TechnicianNavigation from "../../Components/DashboardPage/Technician/TechnicianNavigation";
 import TeacherTransactionListView from "../../Components/DashboardPage/Teacher/TeacherTransactionListView";
 export default function Dashboard() {
   return (
     <div style={styles.background}>
       <Header label={"Dashboard"} />
-      <RestrictedComponent allow_only={"Technician"}>
+      <div style={{ position: "relative", zIndex: 999, marginTop: 80 }}>
-        <TechnicianWidgets />
+        <RestrictedComponent allow_only={"Technician"}>
-        <TechnicianEquipmentButtons />
+          <TechnicianWidgets />
-        <TechnicianLogButtons />
+          <TechnicianNavigation />
-      </RestrictedComponent>
+          <TechnicianEquipmentButtons />
-      <RestrictedComponent allow_only={"Student"}>
+          <TechnicianLogButtons />
-        <div
+        </RestrictedComponent>
-          style={{
+        <RestrictedComponent allow_only={"Student"}>
-            ...styles.flex_column,
+          <div
-            ...{
+            style={{
-              justifyContent: "center",
+              ...styles.flex_row,
-              alignItems: "center",
+              ...{
-              marginInline: "10px"
+                flexWrap: "wrap",
-
+                justifyContent: "center",
-            },
+                marginLeft: "16px",
-          }}
+                marginRight: "16px",
-        >
+              },
-          <StudentDashboard />
+            }}
-          <StudentTransactionListView />
+          >
-          
+            <StudentTransactionListView />
-        </div>
+            <StudentDashboard />
-      </RestrictedComponent>
+          </div>
-      <RestrictedComponent allow_only={"Teacher"}>
+        </RestrictedComponent>
-        <TeacherTransactionListView />
+        <RestrictedComponent allow_only={"Teacher"}>
-      </RestrictedComponent>
+          <TeacherTransactionListView />
+        </RestrictedComponent>
+      </div>
     </div>
   );
 }

src/assets/Equipment.svg

@@ -0,0 +1,36 @@
+<svg width="37" height="37" viewBox="0 0 37 37" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="37" height="37" fill="#1E1E1E"/>
+<g id="Dashboard">
+<rect width="1440" height="1024" transform="translate(-199 -581)" fill="#F2FAF4"/>
+<g id="Body" clip-path="url(#clip0_50_13)">
+<rect width="1151" height="919" transform="translate(-199 -581)" fill="#F2FAF4"/>
+<g id="Left">
+<g id="Buttons">
+<g id="Main">
+<rect x="-23" y="-23.5" width="799" height="84" rx="11.5" fill="#E8D3BB"/>
+<rect x="-23" y="-23.5" width="799" height="84" rx="11.5" stroke="#FFAC92"/>
+<g id="Icon">
+<g id="Group">
+<path id="Vector" d="M10.9742 22.2765C12.8259 22.2765 14.5125 23.3215 15.4659 25.0815C16.0525 26.1632 17.2259 26.8232 18.5092 26.8232C19.7742 26.8232 20.9475 26.1632 21.5342 25.0815C22.4875 23.3215 24.1742 22.2765 26.0259 22.2765H33.3409H36.1092L34.3309 6.03317C33.9825 2.73317 31.1042 0.166504 27.8042 0.166504H9.19587C5.89587 0.166504 3.01754 2.73317 2.6692 6.03317L0.890869 22.2765H3.6592H10.9742ZM23.9909 14.9432L19.4809 19.4715C19.5542 19.3982 19.6092 19.3248 19.6459 19.2515C19.3892 19.6182 18.9675 19.8382 18.5092 19.8382C18.1242 19.8382 17.7942 19.6915 17.5375 19.4532V19.4715L13.0092 14.9432C12.4775 14.4115 12.4775 13.5498 13.0092 12.9998C13.5409 12.4682 14.4209 12.4682 14.9525 12.9998L17.1342 15.1815V7.16984C17.1342 6.39984 17.7392 5.79484 18.5092 5.79484C19.2609 5.79484 19.8842 6.39984 19.8842 7.16984V15.1632L22.0475 12.9998C22.5792 12.4682 23.4592 12.4682 23.9909 12.9998C24.5225 13.5498 24.5225 14.4115 23.9909 14.9432Z" fill="url(#paint0_linear_50_13)"/>
+<path id="Vector_2" d="M36.7875 28.473L36.4025 25.0264H33.6341H26.0258C25.2008 25.0264 24.4125 25.5397 23.9541 26.4014C22.8725 28.363 20.7825 29.573 18.5091 29.573C16.2175 29.573 14.1275 28.363 13.0641 26.4014C12.5875 25.5397 11.7991 25.0264 10.9741 25.0264H3.34746H0.597458L0.212457 28.473C-0.0442093 30.838 0.634124 33.1297 2.08246 34.7247C3.29246 36.0814 4.94246 36.833 6.72079 36.833H30.2791C32.0575 36.833 33.7075 36.0814 34.9175 34.7247C36.3658 33.1297 37.0441 30.838 36.7875 28.473Z" fill="url(#paint1_linear_50_13)"/>
+</g>
+</g>
+</g>
+</g>
+</g>
+</g>
+</g>
+<defs>
+<linearGradient id="paint0_linear_50_13" x1="18.5" y1="0.166504" x2="18.5" y2="26.8232" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CB9C65"/>
+<stop offset="1" stop-color="#693A03"/>
+</linearGradient>
+<linearGradient id="paint1_linear_50_13" x1="18.5" y1="25.0264" x2="18.5" y2="36.833" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CB9C65"/>
+<stop offset="1" stop-color="#693A03"/>
+</linearGradient>
+<clipPath id="clip0_50_13">
+<rect width="1151" height="919" fill="white" transform="translate(-199 -581)"/>
+</clipPath>
+</defs>
+</svg>

src/assets/Transaction.svg

@@ -0,0 +1,9 @@
+<svg width="37" height="45" viewBox="0 0 37 45" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector" d="M30.1524 0.5H6.84758C3.35639 0.5 0.5 3.24998 0.5 6.65998V38.318C0.5 41.728 3.35639 44.5 6.84758 44.5H30.1524C33.6663 44.5 36.5 41.728 36.5 38.318V6.65998C36.5 3.24998 33.6663 0.5 30.1524 0.5ZM9.18266 32.246H27.8173C28.7695 32.246 29.5176 32.994 29.5176 33.896C29.5176 34.798 28.7695 35.546 27.8173 35.546H9.18266C8.25319 35.546 7.4824 34.798 7.4824 33.896C7.4824 32.994 8.25319 32.246 9.18266 32.246ZM7.4824 22.588C7.4824 21.686 8.25319 20.938 9.18266 20.938H27.8173C28.7695 20.938 29.5176 21.686 29.5176 22.588C29.5176 23.512 28.7695 24.238 27.8173 24.238H9.18266C8.25319 24.238 7.4824 23.512 7.4824 22.588ZM27.8173 12.93H9.18266C8.25319 12.93 7.4824 12.204 7.4824 11.28C7.4824 10.378 8.25319 9.62999 9.18266 9.62999H27.8173C28.7695 9.62999 29.5176 10.378 29.5176 11.28C29.5176 12.204 28.7695 12.93 27.8173 12.93Z" fill="url(#paint0_linear_121_218)"/>
+<defs>
+<linearGradient id="paint0_linear_121_218" x1="18.5" y1="0.499999" x2="31" y2="40" gradientUnits="userSpaceOnUse">
+<stop stop-color="#417BBE"/>
+<stop offset="1" stop-color="#3A389F"/>
+</linearGradient>
+</defs>
+</svg>