{account.stacks.map((stack) => (
diff --git a/frontend/src/pages/Dashboard/style.scss b/frontend/src/pages/Dashboard/style.scss
index cfa50cf..67ea191 100644
--- a/frontend/src/pages/Dashboard/style.scss
+++ b/frontend/src/pages/Dashboard/style.scss
@@ -5,7 +5,6 @@
border: 1px solid $color-grey;
flex-direction: column;
align-items: center;
- text-align: center;
margin: 1rem 0;
padding: 1rem;
background: $color-alt;
diff --git a/frontend/src/scss/variables.scss b/frontend/src/scss/variables.scss
index d8fa705..3881e96 100644
--- a/frontend/src/scss/variables.scss
+++ b/frontend/src/scss/variables.scss
@@ -3,4 +3,5 @@ $color-alt: #c9d8b6;
$color-light: #f1ecc3;
$color-white: #fff;
$color-grey: #515e63;
+$color-black: #111;
$color-dark: #333;
diff --git a/frontend/src/types/index.ts b/frontend/src/types/index.ts
index e030bed..b544bb1 100644
--- a/frontend/src/types/index.ts
+++ b/frontend/src/types/index.ts
@@ -28,7 +28,7 @@ export type Stack = {
account: string //'38485982-87f3-4a11-a963-2202983809e3'
name: string // 'House Fund'
details: string //'buy furniture'
- amount: number // '200.00'
+ amount: string // number // '200.00'
transactions: Transaction[]
}
@@ -36,7 +36,7 @@ export type Transaction = {
id: string
stack: string // '0058cece-3ff3-4ee1-b71d-075a0bc73bc0'
details: string // 'by ghetto couch off Kijiji'
- amount: number // '30.44'
+ amount: string // number // '30.44'
created_at: string // '2021-04-15T00:02:45.096071Z'
}
diff --git a/frontend/src/widgets/AccountSelect/index.tsx b/frontend/src/widgets/AccountSelect/index.tsx
index 61c3b1d..cd146f0 100644
--- a/frontend/src/widgets/AccountSelect/index.tsx
+++ b/frontend/src/widgets/AccountSelect/index.tsx
@@ -1,9 +1,10 @@
import { Link } from 'react-router-dom'
import { message } from 'antd'
-import './style.scss'
import { Button } from '../../elements/Button'
import { useAccounts } from '../../hooks/getMany/useAccounts'
+import './style.scss'
+
type Props = {
selectProfile: (id: string) => void
}
diff --git a/frontend/src/widgets/FundBar/index.tsx b/frontend/src/widgets/FundBar/index.tsx
index f92d138..45535a9 100644
--- a/frontend/src/widgets/FundBar/index.tsx
+++ b/frontend/src/widgets/FundBar/index.tsx
@@ -1,40 +1,47 @@
import { Stack } from '../../types'
import './style.scss'
import _ from 'lodash'
+import { useState } from 'react'
+import { Modal } from '../../layout/Modal'
+import { TransactionForm } from '../../forms/TransactionForm'
type Props = {
stack: Stack
}
export const FundBar = ({ stack }: Props) => {
- const amount = _.sumBy(stack.transactions, 'amount')
- console.log('amount', stack.id, amount)
- const max = stack.amount
+ const amount = _.sumBy(stack.transactions, (tx) => parseFloat(tx.amount))
+ const max = parseFloat(stack.amount)
const current = max - amount
- const percent = Math.max(current / max, 0)
- const hue = percent * 120
+ const u = Math.max(current / max, 0)
+
+ const [newTx, setNewTx] = useState(false)
+
+ const addTransaction = () => {
+ console.log(`adding transaction to => ${stack.name}`)
+ setNewTx(true)
+ }
return (
-
-
console.log(`adding transaction to => ${stack.name}`)}
- >
-
-
{stack.name}
-
-
- ${Math.floor(current)} / ${max}
+ <>
+
+
+
{stack.name}
+
+
+
+ ${Math.floor(current)} / ${max}
+
-
+
setNewTx(false)}>
+
+
+ >
)
}
diff --git a/frontend/src/widgets/FundBar/style.scss b/frontend/src/widgets/FundBar/style.scss
index dd0aa25..7423e0d 100644
--- a/frontend/src/widgets/FundBar/style.scss
+++ b/frontend/src/widgets/FundBar/style.scss
@@ -6,6 +6,7 @@
margin: 1rem;
display: grid;
grid-template: 1fr / 1fr;
+ height: 20vh;
.totals {
pointer-events: none;
@@ -18,17 +19,20 @@
.front {
grid-area: 1/1/2/2;
+ margin: auto auto 0;
border-radius: 1ch;
pointer-events: none;
transition: all 0.2s ease-out;
border: 2px solid $color-dark;
display: flex;
flex-direction: column;
- padding: 2ch;
+ width: 100%;
+ min-height: 1rem;
text-shadow: 2px 2px #2223, -1px -1px #fffa;
}
.back {
+ padding: 0.25rem;
grid-area: 1/1/2/2;
background: #222;
border-radius: 1ch;