add parsing and displaying of transactions

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)