add parsing and displaying of transactions

components/Graph/Graph.jsx

@@ -0,0 +1,58 @@
+import React from "react";
+import { Line } from "react-chartjs-2";
+import {
+  Chart,
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend,
+} from "chart.js";
+import styles from "./Graph.module.sass";
+
+export default function Graph(props) {
+  Chart.register(
+    CategoryScale,
+    LinearScale,
+    PointElement,
+    LineElement,
+    Title,
+    Tooltip,
+    Legend
+  );
+
+  const accounts = [
+    ...new Set(
+      props.transactions
+        .map((txn) => {
+          return txn.parts.map((part) => {
+            return part.account;
+          });
+        })
+        .flat()
+    ),
+  ];
+
+  return (
+    <div className={styles.graph}>
+      <Line
+        options={{ responsive: true, maintainAspectRatio: false }}
+        data={{
+          labels: ["JAN", "FEB", "MAR"],
+          datasets: accounts.map((account) => {
+            return {
+              label: account,
+              data: [1, 2, 4],
+              // backgroundColor: getComputedStyle(
+                // document.documentElement
+              // ).getPropertyValue("--color-blue"),
+              // borderColor: document.documentElement.style.getPropertyValue("--color-blue"),
+            };
+          }),
+        }}
+      />
+    </div>
+  );
+}

components/Graph/Graph.module.sass

@@ -0,0 +1,9 @@
+.graph
+    border-radius: var(--card-radius)
+    background-color: var(--color-white)
+    margin: 10px
+    padding: 20px
+    width: 60%
+    height: 20vh
+    font-family: "Montserrat"
+    font-weight: 300

components/Overview/Overview.jsx

@@ -0,0 +1,16 @@
+import React from "react";
+import styles from "./Overview.module.sass";
+
+export default function Overview(props) {
+  const accounts = [...new Set(props.transactions.map((txn) => {
+    return txn.parts.map((part) => {
+      return part.account;
+    });
+  }).flat())];
+console.log(accounts)
+  return <div className={styles.overview_card}>
+    <pre>
+        {JSON.stringify(props.stats, null, 2)}
+    </pre>
+  </div>;
+}

components/Overview/Overview.module.sass

@@ -0,0 +1,9 @@
+.overview_card
+    border-radius: var(--card-radius)
+    background-color: var(--color-white)
+    margin: 10px
+    padding: 20px
+    width: 36%
+    height: 20vh
+    font-family: "Montserrat"
+    font-weight: 300

components/Transaction/Transaction.jsx

@@ -0,0 +1,27 @@
+import React from "react";
+import styles from "./Transaction.module.sass"
+
+export default function Transaction(props) {
+  // console.log(props);
+  return (
+    <div className={styles.transaction_card}>
+        <span className={styles.transaction_date}>{props.date}</span>
+        <span className={styles.transaction_type}>{props.type}</span>
+        <span className={styles.transaction_payee}>{props.payee}</span>
+        <span className={styles.transaction_descr}>{props.descr}</span>
+      {props.parts &&
+        props.parts.map((part, index) => {
+          return (
+            <>
+              <span className={styles.transaction_extract} key={"extract" + index}>
+                {part.extract ? <i class="fa-regular fa-circle-left"></i> : <i class="fa-regular fa-circle-right"></i> }
+              </span>
+              <span className={styles.transaction_account} key={"account"+index}>{part.account || " "}</span>
+              <span className={styles.transaction_amount} key={"amount"+index}>{part.amount || " "}</span>
+              <span className={styles.transaction_currency} key={"currency"+index}>{part.currency || " "}</span>
+            </>
+          );
+        })}
+    </div>
+  );
+}

components/Transaction/Transaction.module.sass

@@ -0,0 +1,46 @@
+.transaction_card
+    border-radius: var(--card-radius)
+    background-color: var(--color-white)
+    margin: 10px
+    padding: 20px
+    width: 100%
+    font-family: "Montserrat"
+    font-weight: 300
+    display: grid
+    grid-template-columns: .5fr 2fr 1fr 3fr 3fr 3fr
+
+    p
+        margin: 0
+        margin-left: 30px
+        display: flex
+        justify-content: space-around
+        justify-items: flex-begin
+        width: calc(100% - 30px)
+
+.transaction_date,
+.transaction_payee,
+.transaction_type,
+.transaction_descr
+    margin-bottom: 10px
+    padding-bottom: 10px
+    font-size: 1.2rem
+    border-bottom: 1px solid var(--color-blue)
+    
+.transaction_date
+    grid-column: 1 / span 2
+.transaction_payee
+    grid-column: 4 / span 1
+.transaction_type
+    grid-column: 3 / span 1
+.transaction_descr
+    grid-column: 5 / span 2
+
+.transaction_amount
+    grid-column: 5 / span 1
+    text-align: right
+    padding-right: 10px
+.transaction_account
+    grid-column: 2 / span 3
+.transaction_extract
+    grid_column: 1 / span 1
+    color: var(--color-blue)