diff --git a/src/components/Login.tsx b/src/components/Login.tsx
index 733f6fb..9aad1f5 100644
--- a/src/components/Login.tsx
+++ b/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)
}
diff --git a/src/components/Transactions.tsx b/src/components/Transactions.tsx
index 42dac63..1d6968e 100644
--- a/src/components/Transactions.tsx
+++ b/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
-
-
-
-
- Date
- Description
- Amount
- Total
-
-
-
- {rows.map((row) => (
-
-
- {row.date.toDateString()}
-
- {row.description}
- {row.amount}
- {row.total}
-
- ))}
-
-
-
+
);
-}
\ No newline at end of file
+}
diff --git a/src/components/Transactions/Table.tsx b/src/components/Transactions/Table.tsx
new file mode 100644
index 0000000..8f24583
--- /dev/null
+++ b/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 (
+
+
+
+
+ Date
+ Description
+ Amount
+ Total
+
+
+
+ {rows.map((row) => (
+
+
+ {row.date.toLocaleDateString()}
+
+ {row.description}
+ {CHF_currency(row.amount)}
+ {CHF_currency(row.total)}
+
+ ))}
+
+
+
+ )
+}
diff --git a/src/scss/style.scss b/src/scss/style.scss
index 3fb0be3..18d3685 100644
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -9,4 +9,4 @@
body {
background: $bg1;
color: $fg1;
-}
\ No newline at end of file
+}
diff --git a/src/scss/transactions.scss b/src/scss/transactions.scss
index 93e796c..a796b33 100644
--- a/src/scss/transactions.scss
+++ b/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;
}
}
-}
\ No newline at end of file
+}
diff --git a/src/scss/variables.module.scss b/src/scss/variables.module.scss
index c9df605..2a0b5f8 100644
--- a/src/scss/variables.module.scss
+++ b/src/scss/variables.module.scss
@@ -1,2 +1,5 @@
$bg1: #333;
$fg1: #c5c8c6;
+
+$fg-green: green;
+$fg-red: red;