TTime/frontend/src/main.tsx

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import App from "./Pages/App";
import YourProjectsPage from "./Pages/YourProjectsPage.tsx";
import UserProjectPage from "./Pages/UserPages/UserProjectPage.tsx";
import AdminMenuPage from "./Pages/AdminPages/AdminMenuPage.tsx";
import UserEditTimeReportPage from "./Pages/UserPages/UserEditTimeReportPage.tsx";
import UserNewTimeReportPage from "./Pages/UserPages/UserNewTimeReportPage.tsx";
import UserViewTimeReportsPage from "./Pages/UserPages/UserViewTimeReportsPage.tsx";
import PMChangeRole from "./Pages/ProjectManagerPages/PMChangeRole.tsx";
import PMOtherUsersTR from "./Pages/ProjectManagerPages/PMOtherUsersTR.tsx";
import PMProjectMembers from "./Pages/ProjectManagerPages/PMProjectMembers.tsx";
import PMProjectPage from "./Pages/ProjectManagerPages/PMProjectPage.tsx";
import PMTotalTimeActivity from "./Pages/ProjectManagerPages/PMTotalTimeActivity.tsx";
import PMTotalTimeRole from "./Pages/ProjectManagerPages/PMTotalTimeRole.tsx";
import PMUnsignedReports from "./Pages/ProjectManagerPages/PMUnsignedReports.tsx";
import PMViewUnsignedReport from "./Pages/ProjectManagerPages/PMViewUnsignedReport.tsx";
import AdminManageUsers from "./Pages/AdminPages/AdminManageUsers.tsx";
import AdminViewUserInfo from "./Pages/AdminPages/AdminViewUserInfo.tsx";
import AdminManageProjects from "./Pages/AdminPages/AdminManageProjects.tsx";
import AdminAddProject from "./Pages/AdminPages/AdminAddProject.tsx";
import AdminAddUser from "./Pages/AdminPages/AdminAddUser.tsx";
import AdminChangeUsername from "./Pages/AdminPages/AdminChangeUsername.tsx";
import AdminProjectAddMember from "./Pages/AdminPages/AdminProjectAddMember.tsx";
import AdminProjectChangeUserRole from "./Pages/AdminPages/AdminProjectChangeUserRole.tsx";
import AdminProjectManageMembers from "./Pages/AdminPages/AdminProjectManageMembers.tsx";
import AdminProjectStatistics from "./Pages/AdminPages/AdminProjectStatistics.tsx";
import AdminProjectViewMemberInfo from "./Pages/AdminPages/AdminProjectViewMemberInfo.tsx";
import AdminProjectPage from "./Pages/AdminPages/AdminProjectPage.tsx";
import NotFoundPage from "./Pages/NotFoundPage.tsx";

// This is where the routes are mounted
const router = createBrowserRouter([
  {
    path: "/",
    element: <App />,
    errorElement: <NotFoundPage />,
  },
  {
    path: "/admin",
    element: <AdminMenuPage />,
  },
  {
    path: "/pm",
    element: <YourProjectsPage />,
  },
  {
    path: "/yourProjects",
    element: <YourProjectsPage />,
  },
  {
    path: "/project/:projectName",
    element: <UserProjectPage />,
  },
  {
    path: "/newTimeReport/:projectName",
    element: <UserNewTimeReportPage />,
  },
  {
    path: "/projectPage/:projectName",
    element: <UserViewTimeReportsPage />,
  },
  {
    path: "/editTimeReport",
    element: <UserEditTimeReportPage />,
  },
  {
    path: "/changeRole",
    element: <PMChangeRole />,
  },
  {
    path: "/otherUsersTimeReports",
    element: <PMOtherUsersTR />,
  },
  {
    path: "/projectMembers",
    element: <PMProjectMembers />,
  },
  {
    path: "/PMProjectPage",
    element: <PMProjectPage />,
  },
  {
    path: "/PMTimeActivity",
    element: <PMTotalTimeActivity />,
  },
  {
    path: "/PMTimeRole",
    element: <PMTotalTimeRole />,
  },
  {
    path: "/PMUnsignedReports",
    element: <PMUnsignedReports />,
  },
  {
    path: "/PMViewUnsignedReport",
    element: <PMViewUnsignedReport />,
  },
  {
    path: "/adminChangeUsername",
    element: <AdminChangeUsername />,
  },
  {
    path: "/adminProjectAddMember",
    element: <AdminProjectAddMember />,
  },
  {
    path: "/adminProjectChangeUserRole",
    element: <AdminProjectChangeUserRole />,
  },
  {
    path: "/adminProjectManageMembers",
    element: <AdminProjectManageMembers />,
  },
  {
    path: "/adminProjectPage",
    element: <AdminProjectPage />,
  },
  {
    path: "/adminProjectStatistics",
    element: <AdminProjectStatistics />,
  },
  {
    path: "/adminProjectViewMembers",
    element: <AdminProjectViewMemberInfo />,
  },
  {
    path: "/addProject",
    element: <AdminAddProject />,
  },
  {
    path: "/adminAddUser",
    element: <AdminAddUser />,
  },
  {
    path: "/adminUserInfo",
    element: <AdminViewUserInfo />,
  },
  {
    path: "/adminManageProject",
    element: <AdminManageProjects />,
  },
  {
    path: "/adminManageUser",
    element: <AdminManageUsers />,
  },
]);

// Semi-hacky way to get the root element
const root = document.getElementById("root") ?? document.createElement("div");

// Render the router at the root
ReactDOM.createRoot(root).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>,
);