Borrowing-TrackerFrontend/src/Pages/DashboardPage/DashboardPage.tsx

import Header from "../../Components/Header/Header";
import styles from "../../styles";
import RestrictedComponent from "../../Components/RestrictedComponent/RestrictedComponent";
import TechnicianWidgets from "../../Components/DashboardPage/Technician/TechnicianWidgets";
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"} />
      <div style={{ position: "relative", zIndex: 999, marginTop: 80 }}>
        <RestrictedComponent allow_only={"Technician"}>
          <TechnicianWidgets />
          <TechnicianNavigation />
        </RestrictedComponent>
        <RestrictedComponent allow_only={"Student"}>
          <div
            style={{
              ...styles.flex_row,
              ...{
                flexWrap: "wrap",
                justifyContent: "center",
                marginLeft: "16px",
                marginRight: "16px",
              },
            }}
          >
            <StudentDashboard />
            <StudentTransactionListView />
            
          </div>
        </RestrictedComponent>
        <RestrictedComponent allow_only={"Teacher"}>
          <TeacherTransactionListView />
        </RestrictedComponent>
      </div>
    </div>
  );
}