Added main page, metadata setter and AuthComponent so that titles and body classes are set, and auth checking can be done

src/components/Main.tsx

@@ -0,0 +1,72 @@
+import { TableContainer, Paper, Table, TableHead, TableRow, TableCell, TableBody } from "@mui/material";
+import React, { useEffect } from "react";
+import "@scss/main.scss";
+
+function createData(
+    d: string,
+    description: string,
+    amount: number,
+    total: number
+) {
+    const date: Date = new Date(d);
+    return { date, description, amount, total };
+}
+
+const rows = [
+    createData("05.10.2022", "Lorem Ipsum dolor sit amet, consectetur adipiscing elit. Curabitur scollicitudin", -123, 30),
+    createData("04.10.2022", "Cras sit amet justo eu dui mattis eleifen vulputate", 150, 153),
+    createData("30.09.2022", "Vivamus ipsum arcu, elememntum vitae lectus et, fermentum consequat urna", -3, 3),
+    createData("30.09.2022", "Fusce tempor varius tempus. Vivamus nec eros non tortor elementum.", -68, 6),
+    createData("15.08.2022", "Proin gravida suscipit convallis. Morbi lobortis aliquet erat, vitae ultrices.", -172, 74),
+    createData("12.08.2022", "Ut non purus auctor, convallis lorem a, venenatis metus. Praesent.", 200, 246),
+    createData("5.08.2022", "Fusce ultricies mauris non diam auctor ultricies. Nullam nec rutrum.", -13, 46),
+    createData("1.08.2022", "Ut id pulvinar libero. Duis lacinia sit amet lacus sit.", -27, 59),
+    createData("26.07.2022", "Mauris luctus cursus tincidunt. Suspendisse tempor scelerisque tristique. Morbi nulla.", -64, 86),
+    createData("20.07.2022", "Nulla consequat, sapien dignissim facilisis fringilla, nisl lacus commodo sapien.", 150, 150),
+];
+
+
+export default function Main() {
+    return (
+        <div id="tablePage">
+            <header>
+                header
+            </header>
+            <aside>
+                sidebar
+            </aside>
+            <main>
+                <TableContainer className="table" component={Paper}>
+                    <Table aria-label="simple table">
+                        <TableHead>
+                            <TableRow>
+                                <TableCell>Date</TableCell>
+                                <TableCell>Description</TableCell>
+                                <TableCell align="right">Amount</TableCell>
+                                <TableCell align="right">Total</TableCell>
+                            </TableRow>
+                        </TableHead>
+                        <TableBody>
+                            {rows.map((row) => (
+                                <TableRow
+                                    key={row.date.getDate()}
+                                    sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
+                                >
+                                    <TableCell component="th" scope="row">
+                                        {row.date.toDateString()}
+                                    </TableCell>
+                                    <TableCell>{row.description}</TableCell>
+                                    <TableCell align="right">{row.amount}</TableCell>
+                                    <TableCell align="right">{row.total}</TableCell>
+                                </TableRow>
+                            ))}
+                        </TableBody>
+                    </Table>
+                </TableContainer>
+            </main>
+            <footer>
+                footer
+            </footer>
+        </div>
+    );
+}

src/components/index.tsx

@@ -2,5 +2,8 @@ import Login from "@components/Login";
 import ForgotPassword from "@components/ForgotPassword";
 import Reset from "@components/Reset";
 import ErrorPage from "@components/ErrorPage";
+import Main from "@components/Main";
+import MetadataSetter from "@components/lib/MetadataSetter";
+import AuthComponent from "@components/lib/AuthComponent";
 
-export { Login, ForgotPassword, Reset, ErrorPage };
+export { Login, ForgotPassword, Reset, ErrorPage, Main, MetadataSetter, AuthComponent };

src/components/lib/AuthComponent.tsx

@@ -0,0 +1,20 @@
+import React, { useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+
+type AuthProps = {
+    children: JSX.Element | JSX.Element[],
+}
+export default function AuthComponent({children} : AuthProps){
+    const navigate = useNavigate();
+
+    const isLogged = true;
+
+    useEffect(() => {
+        // navigate needs to be wrapped in a useEffect so that it gets executed after the component is mounted. Otherwise it doesn't redirect
+        if (!isLogged)
+            navigate("/login", { replace: true });
+    }, [isLogged])
+
+    if (isLogged)
+        return <>{children}</>;
+}

src/components/lib/MetadataSetter.tsx

@@ -0,0 +1,18 @@
+import React, { useEffect } from "react";
+import {AuthComponent} from "@components";
+
+type MetadataProps = {
+    children: JSX.Element | JSX.Element[],
+    title: string,
+    bodyClass: string,
+    needsAuth? : boolean
+}
+
+export default function MetadataSetter({children, title, bodyClass, needsAuth = false}: MetadataProps){
+    useEffect(() => {
+        document.title= title;
+        document.body.classList.add(bodyClass);
+    }, [title])
+
+    return needsAuth ? <AuthComponent>{children}</AuthComponent> : <>{children}</>;
+}

src/index.tsx

@@ -1,26 +1,41 @@
 import * as React from "react";
 import { createRoot } from "react-dom/client";
 import { createBrowserRouter, Navigate, RouterProvider } from "react-router-dom";
-import { ErrorPage, Login, ForgotPassword, Reset } from "@components";
+import { MetadataSetter, ErrorPage, Login, ForgotPassword, Reset, Main, AuthComponent } from "@components";
 
 
 const router = createBrowserRouter([
   {
     path: "/",
-    element: <Navigate to="/login" />,
+    element:
-    errorElement: <ErrorPage />,
+        <MetadataSetter title="Main" bodyClass="main" needsAuth>
+          <Main />
+        </MetadataSetter>,
+    errorElement: 
+    <MetadataSetter title="Error" bodyClass="error">
+      <ErrorPage />
+    </MetadataSetter>
   },
   {
     path: "/login",
-    element: <Login />,
+    element: 
+    <MetadataSetter title="Login" bodyClass="login">
+      <Login />
+    </MetadataSetter>
   },
   {
     path: "/forgot",
-    element: <ForgotPassword />,
+    element: 
+    <MetadataSetter title="Forgot Password" bodyClass="forgot">
+      <ForgotPassword />
+    </MetadataSetter>
   },
   {
     path: "/reset",
-    element: <Reset />,
+    element: 
+    <MetadataSetter title="Reset Password" bodyClass="reset">
+      <Reset />
+    </MetadataSetter>
   },
 ]);
 

src/scss/main.scss

@@ -0,0 +1,40 @@
+@use "variables.module.scss";
+@use "style.scss";
+
+div#tablePage {
+    color: black;
+    display: grid;
+    grid-template-columns: 1fr 6fr;
+    grid-template-rows: 1fr 10fr 1fr;
+
+    width: 100vw;
+    height: 100vh;
+
+    header,
+    footer {
+        grid-column: 1 / span 2;
+    }
+
+    header {
+        grid-row: 1;
+        background: lightcyan;
+    }
+
+    footer {
+        grid-row: 3;
+        background: lightcoral;
+    }
+
+    main {
+        background-color: lightyellow;
+        grid-row: 2;
+        grid-column: 2;
+    }
+
+
+    aside {
+        grid-column: 1;
+        grid-row: 2;
+        background: lightgreen;
+    }
+}