Moved the table to the transactions page to it's own component to not clog up Transactions, minor changes to Login

src/components/Login.tsx

@@ -1,4 +1,4 @@
-import React, { useState, ChangeEvent, MouseEvent, useEffect } from "react";
+import React from "react";
 import { Card, Button, TextField } from "@mui/material"
 import "@scss/login.scss"
 import { Link, useNavigate } from "react-router-dom";
@@ -23,7 +23,7 @@ export default function Login() {
     });
 
     function hash(s: string) {
-        return s;
+        return `hash of '${s}' to be definied`;
     }
 
     const {ref: emailRef, ...emailRegisterProps} = register("email", {
@@ -56,6 +56,7 @@ export default function Login() {
 
     function onSubmit(data: Inputs) {
         console.log("There will be an API call now with the following data");
+        data = { ...data, password: hash(data.password) }
         console.table(data);
         setTimeout(() => navigate("/?logged"), 3000)
     }

src/components/Transactions.tsx

@@ -1,29 +1,7 @@
-import { TableContainer, Paper, Table, TableHead, TableRow, TableCell, TableBody } from "@mui/material";
 import React, { useEffect } from "react";
 import "@scss/transactions.scss";
+import Table from "@components/Transactions/Table"
 
-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 Transactions() {
@@ -36,37 +14,11 @@ export default function Transactions() {
                 sidebar
             </aside>
             <main>
-                <TableContainer className="table" component={Paper}>
+                <Table />
-                    <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/Transactions/Table.tsx

@@ -0,0 +1,61 @@
+import React from "react";
+import { TableContainer, Paper, Table, TableHead, TableRow, TableCell, TableBody } from "@mui/material";
+
+function createData(
+    d: string,
+    description: string,
+    amount: number,
+    total: number
+) {
+    const date: Date = new Date(d);
+    return { date, description, amount, total };
+}
+
+const rows = [
+    createData("2022-10-05", "Lorem Ipsum dolor sit amet, consectetur adipiscing elit. Curabitur scollicitudin", -123, 30),
+    createData("2022-10-04", "Cras sit amet justo eu dui mattis eleifen vulputate", 150, 153),
+    createData("2022-09-30", "Vivamus ipsum arcu, elememntum vitae lectus et, fermentum consequat urna", -3, 3),
+    createData("2022-09-29", "Fusce tempor varius tempus. Vivamus nec eros non tortor elementum.", -68, 6),
+    createData("2022-08-15", "Proin gravida suscipit convallis. Morbi lobortis aliquet erat, vitae ultrices.", -172, 74),
+    createData("2022-08-12", "Ut non purus auctor, convallis lorem a, venenatis metus. Praesent.", 200, 246),
+    createData("2022-08-05", "Fusce ultricies mauris non diam auctor ultricies. Nullam nec rutrum.", -13, 46),
+    createData("2022-08-01", "Ut id pulvinar libero. Duis lacinia sit amet lacus sit.", -27, 59),
+    createData("2022-07-26", "Mauris luctus cursus tincidunt. Suspendisse tempor scelerisque tristique. Morbi nulla.", -64, 86),
+    createData("2022-07-20", "Nulla consequat, sapien dignissim facilisis fringilla, nisl lacus commodo sapien.", 150, 150),
+];
+
+export default () => {
+    function CHF_currency(amount: number){
+        return `CHF ${Math.round(amount) == amount ? (amount + ".-") : amount}`
+    }
+
+    return ( 
+        <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.getTime()}
+                            sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
+                        >
+                            <TableCell component="th" scope="row">
+                                {row.date.toLocaleDateString()}
+                            </TableCell>
+                            <TableCell>{row.description}</TableCell>
+                            <TableCell align="right" className={"amount " + (row.amount < 0 ? "negative" : "positive")}>{CHF_currency(row.amount)}</TableCell>
+                            <TableCell align="right">{CHF_currency(row.total)}</TableCell>
+                        </TableRow>
+                    ))}
+                </TableBody>
+            </Table>
+        </TableContainer>
+           )
+}

src/scss/style.scss

@@ -9,4 +9,4 @@
 body {
     background: $bg1;
     color: $fg1;
-}
+}

src/scss/transactions.scss

@@ -1,5 +1,5 @@
-@use "variables.module.scss";
 @use "style.scss";
+@import "variables.module.scss";
 
 body.transactions {
     div#tablePage {
@@ -29,6 +29,18 @@ body.transactions {
         main {
             grid-row: 2;
             grid-column: 2;
+
+            display: flex;
+            // justify-content: center;
+            align-items: center;
+
+            .amount.positive {
+                color: $fg-green;
+            }
+
+            .amount.negative {
+                color: $fg-red;
+            }
         }
 
         aside {
@@ -37,4 +49,4 @@ body.transactions {
             background: lightgreen;
         }
     }
-}
+}

src/scss/variables.module.scss

@@ -1,2 +1,5 @@
 $bg1: #333;
 $fg1: #c5c8c6;
+
+$fg-green: green;
+$fg-red: red;