parent
674e3fd253
commit
2ebe8bcd1f
17 changed files with 129 additions and 67 deletions
@ -1,4 +1,5 @@ |
|||||||
import { Account } from '../../types' |
import { Account } from '../../types' |
||||||
import { useGet } from '../util/useGet' |
import { useGet } from '../util/useGet' |
||||||
|
|
||||||
export const useAccounts = () => useGet<Account[]>(`/accounts/`) |
export const useAccounts = () => |
||||||
|
useGet<Account[]>(`/accounts/`, { mode: 'list' }) |
||||||
|
@ -1,4 +1,4 @@ |
|||||||
import { Stack } from '../../types' |
import { Stack } from '../../types' |
||||||
import { useGet } from '../util/useGet' |
import { useGet } from '../util/useGet' |
||||||
|
|
||||||
export const useStacks = () => useGet<Stack[]>(`/stacks/`) |
export const useStacks = () => useGet<Stack[]>(`/stacks/`, { mode: 'list' }) |
||||||
|
@ -1,5 +1,4 @@ |
|||||||
import { Transaction } from '../../types' |
import { Transaction } from '../../types' |
||||||
import { useGet } from '../util/useGet' |
import { useGet } from '../util/useGet' |
||||||
|
|
||||||
export const useTransactions = (accountId: string) => |
export const useTransactions = () => useGet<Transaction[]>(`/transactions/`) |
||||||
useGet<Transaction[]>(`/transactions/`) |
|
||||||
|
@ -0,0 +1,4 @@ |
|||||||
|
import { Account } from '../../types' |
||||||
|
import { useGet } from '../util/useGet' |
||||||
|
|
||||||
|
export const useAccount = (id: string) => useGet<Account>(`/accounts/${id}/`) |
@ -0,0 +1,10 @@ |
|||||||
|
import React from 'react' |
||||||
|
import './style.scss' |
||||||
|
|
||||||
|
type Props = { |
||||||
|
children: React.ReactNode |
||||||
|
} |
||||||
|
|
||||||
|
export const Page = ({ children }: Props) => { |
||||||
|
return <div className="dank-page">{children}</div> |
||||||
|
} |
@ -0,0 +1,3 @@ |
|||||||
|
.dank-page { |
||||||
|
padding: 1rem; |
||||||
|
} |
@ -1,7 +1,13 @@ |
|||||||
import { useAccounts } from '../../hooks/getMany/useAccounts' |
import { useAccounts } from '../../hooks/getMany/useAccounts' |
||||||
|
import { Page } from '../../layout/Page' |
||||||
|
|
||||||
export const AccountList = () => { |
export const AccountList = () => { |
||||||
const accounts = useAccounts() |
const accounts = useAccounts() |
||||||
|
|
||||||
return <div>Account Count: {accounts.data?.length}</div> |
return ( |
||||||
|
<Page> |
||||||
|
<h1>Account List</h1> |
||||||
|
<p>Count: {accounts.data?.length}</p> |
||||||
|
</Page> |
||||||
|
) |
||||||
} |
} |
||||||
|
@ -1,19 +1,25 @@ |
|||||||
import { FundBar } from '../../widgets/FundBar' |
import { FundBar } from '../../widgets/FundBar' |
||||||
import { useStacks } from '../../hooks/getMany/useStacks' |
import { Page } from '../../layout/Page' |
||||||
|
import './style.scss' |
||||||
|
import { useAccounts } from '../../hooks/getMany/useAccounts' |
||||||
|
|
||||||
export const Dashboard = () => { |
export const Dashboard = () => { |
||||||
const stacks = useStacks() |
const accounts = useAccounts() |
||||||
|
if (!accounts.data) return <div>loading...</div> |
||||||
if (!stacks.data) return <div>loading...</div> |
|
||||||
|
|
||||||
return ( |
return ( |
||||||
<> |
<Page> |
||||||
<h1>Remaining Balances</h1> |
<h1>Remaining Balances</h1> |
||||||
<div className="funds"> |
{accounts.data?.map((account) => ( |
||||||
{stacks.data.map((stack, i) => ( |
<div className="account-overview"> |
||||||
<FundBar key={stack.id} stack={stack} col={i + 1} /> |
<h3>{account.name}</h3> |
||||||
))} |
<div className="funds"> |
||||||
</div> |
{account.stacks.map((stack) => ( |
||||||
</> |
<FundBar key={stack.id} stack={stack} /> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
))} |
||||||
|
</Page> |
||||||
) |
) |
||||||
} |
} |
||||||
|
@ -0,0 +1,19 @@ |
|||||||
|
@import '../../scss/variables.scss'; |
||||||
|
|
||||||
|
.account-overview { |
||||||
|
display: flex; |
||||||
|
border: 1px solid $color-grey; |
||||||
|
flex-direction: column; |
||||||
|
align-items: center; |
||||||
|
text-align: center; |
||||||
|
margin: 1rem 0; |
||||||
|
padding: 1rem; |
||||||
|
background: $color-alt; |
||||||
|
|
||||||
|
.funds { |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
flex-direction: row; |
||||||
|
flex-wrap: wrap; |
||||||
|
} |
||||||
|
} |
@ -1,18 +1,26 @@ |
|||||||
|
import { useTransactions } from '../../hooks/getMany/useTransactions' |
||||||
|
import { Page } from '../../layout/Page' |
||||||
import './style.scss' |
import './style.scss' |
||||||
|
|
||||||
export const TransactionList = () => { |
export const TransactionList = () => { |
||||||
|
const transactions = useTransactions() |
||||||
|
|
||||||
return ( |
return ( |
||||||
<> |
<Page> |
||||||
<h1>Transactions</h1> |
<h1>Transactions</h1> |
||||||
|
|
||||||
<div className="transactions"> |
<div className="transactions"> |
||||||
{[].map((account, i) => { |
{transactions.data?.map((tx, i) => { |
||||||
return ( |
return ( |
||||||
<div className="column" key={`${account}-txs-${i}`}> |
<div className="dank-transaction" key={`${tx.id}-txs-${i}`}> |
||||||
<h3>{account}</h3> |
<p> |
||||||
|
{tx.details}: ${tx.amount} |
||||||
|
</p> |
||||||
|
<p>on: {tx.created_at}</p> |
||||||
</div> |
</div> |
||||||
) |
) |
||||||
})} |
})} |
||||||
</div> |
</div> |
||||||
</> |
</Page> |
||||||
) |
) |
||||||
} |
} |
||||||
|
@ -1,21 +1,10 @@ |
|||||||
|
@import '../../scss/variables.scss'; |
||||||
|
|
||||||
.transactions { |
.transactions { |
||||||
.column { |
.dank-transaction { |
||||||
h3 { |
border: 1px solid $color-dark; |
||||||
text-align: center; |
margin: 1rem 0; |
||||||
text-decoration: underline; |
|
||||||
} |
|
||||||
margin: 2ch; |
|
||||||
background: #fff1; |
background: #fff1; |
||||||
padding: 0 2ch 1ch; |
padding: 1rem; |
||||||
border-radius: 1ch; |
|
||||||
} |
|
||||||
|
|
||||||
.transaction-item { |
|
||||||
display: flex; |
|
||||||
flex-direction: row; |
|
||||||
justify-content: space-between; |
|
||||||
.details { |
|
||||||
padding-left: 1ch; |
|
||||||
} |
|
||||||
} |
} |
||||||
} |
} |
||||||
|
@ -1,32 +1,37 @@ |
|||||||
|
@import '../../scss/variables.scss'; |
||||||
|
|
||||||
.fundbar { |
.fundbar { |
||||||
cursor: pointer; |
cursor: pointer; |
||||||
border-radius: 1ch; |
|
||||||
text-align: center; |
text-align: center; |
||||||
margin: auto 2ch 0 2ch; |
margin: 1rem; |
||||||
|
display: grid; |
||||||
|
grid-template: 1fr / 1fr; |
||||||
|
|
||||||
&.totals { |
.totals { |
||||||
pointer-events: none; |
pointer-events: none; |
||||||
margin-top: 2ch; |
margin-top: 1rem; |
||||||
} |
} |
||||||
|
|
||||||
h3 { |
h3 { |
||||||
margin: auto auto 0 auto; |
margin: auto auto 0 auto; |
||||||
} |
} |
||||||
|
|
||||||
&.front { |
.front { |
||||||
|
grid-area: 1/1/2/2; |
||||||
|
border-radius: 1ch; |
||||||
pointer-events: none; |
pointer-events: none; |
||||||
transition: all 0.2s ease-out; |
transition: all 0.2s ease-out; |
||||||
border: 2px solid #222a; |
border: 2px solid $color-dark; |
||||||
display: flex; |
display: flex; |
||||||
flex-direction: column; |
flex-direction: column; |
||||||
padding: 2ch; |
padding: 2ch; |
||||||
text-shadow: 2px 2px #2223, -1px -1px #fffa; |
text-shadow: 2px 2px #2223, -1px -1px #fffa; |
||||||
} |
} |
||||||
|
|
||||||
&.back { |
.back { |
||||||
|
grid-area: 1/1/2/2; |
||||||
background: #222; |
background: #222; |
||||||
|
border-radius: 1ch; |
||||||
border: 4px solid #3334; |
border: 4px solid #3334; |
||||||
height: 50vh; |
|
||||||
} |
} |
||||||
} |
} |
||||||
|
Loading…
Reference in new issue