- {[].map((account, i) => {
+ {transactions.data?.map((tx, i) => {
return (
-
-
{account}
+
+
+ {tx.details}: ${tx.amount}
+
+
on: {tx.created_at}
)
})}
- >
+
)
}
diff --git a/frontend/src/pages/TransactionList/style.scss b/frontend/src/pages/TransactionList/style.scss
index 127ed7b..4873858 100644
--- a/frontend/src/pages/TransactionList/style.scss
+++ b/frontend/src/pages/TransactionList/style.scss
@@ -1,21 +1,10 @@
+@import '../../scss/variables.scss';
+
.transactions {
- .column {
- h3 {
- text-align: center;
- text-decoration: underline;
- }
- margin: 2ch;
+ .dank-transaction {
+ border: 1px solid $color-dark;
+ margin: 1rem 0;
background: #fff1;
- padding: 0 2ch 1ch;
- border-radius: 1ch;
- }
-
- .transaction-item {
- display: flex;
- flex-direction: row;
- justify-content: space-between;
- .details {
- padding-left: 1ch;
- }
+ padding: 1rem;
}
}
diff --git a/frontend/src/types/index.ts b/frontend/src/types/index.ts
index df6e57e..e030bed 100644
--- a/frontend/src/types/index.ts
+++ b/frontend/src/types/index.ts
@@ -20,6 +20,7 @@ export type Account = {
details: string
income: number
expenses: number
+ stacks: Stack[]
}
export type Stack = {
diff --git a/frontend/src/widgets/FundBar/index.tsx b/frontend/src/widgets/FundBar/index.tsx
index 292fdb7..f92d138 100644
--- a/frontend/src/widgets/FundBar/index.tsx
+++ b/frontend/src/widgets/FundBar/index.tsx
@@ -1,27 +1,27 @@
import { Stack } from '../../types'
import './style.scss'
+import _ from 'lodash'
type Props = {
- col: number
stack: Stack
}
-export const FundBar = ({ stack, col }: Props) => {
- const amount = 0
-
+export const FundBar = ({ stack }: Props) => {
+ const amount = _.sumBy(stack.transactions, 'amount')
+ console.log('amount', stack.id, amount)
const max = stack.amount
const current = max - amount
const percent = Math.max(current / max, 0)
const hue = percent * 120
return (
- <>
+
console.log(`adding transaction to => ${stack.name}`)}
>
{
{stack.name}
${Math.floor(current)} / ${max}
- >
+
)
}
diff --git a/frontend/src/widgets/FundBar/style.scss b/frontend/src/widgets/FundBar/style.scss
index 61bb7a3..dd0aa25 100644
--- a/frontend/src/widgets/FundBar/style.scss
+++ b/frontend/src/widgets/FundBar/style.scss
@@ -1,32 +1,37 @@
+@import '../../scss/variables.scss';
+
.fundbar {
cursor: pointer;
- border-radius: 1ch;
text-align: center;
- margin: auto 2ch 0 2ch;
+ margin: 1rem;
+ display: grid;
+ grid-template: 1fr / 1fr;
- &.totals {
+ .totals {
pointer-events: none;
- margin-top: 2ch;
+ margin-top: 1rem;
}
h3 {
margin: auto auto 0 auto;
}
- &.front {
+ .front {
+ grid-area: 1/1/2/2;
+ border-radius: 1ch;
pointer-events: none;
transition: all 0.2s ease-out;
- border: 2px solid #222a;
+ border: 2px solid $color-dark;
display: flex;
flex-direction: column;
padding: 2ch;
text-shadow: 2px 2px #2223, -1px -1px #fffa;
}
- &.back {
+ .back {
+ grid-area: 1/1/2/2;
background: #222;
-
+ border-radius: 1ch;
border: 4px solid #3334;
- height: 50vh;
}
}