2024-08-24 11:31:45 -05:00
|
|
|
import { Budget } from '../models.ts'
|
2024-08-25 09:04:22 -05:00
|
|
|
import { BudgetCard, ProgressBarCard } from './BudgetCard.tsx'
|
|
|
|
import { Currency } from '../components/Currency.tsx'
|
2024-08-25 11:21:06 -05:00
|
|
|
import { Nav } from '../islands/Nav.tsx'
|
|
|
|
import { IS_BROWSER } from '$fresh/runtime.ts'
|
|
|
|
import { useCallback, useEffect } from 'preact/hooks'
|
|
|
|
import { useSignal } from '@preact/signals'
|
2024-08-24 07:54:43 -05:00
|
|
|
|
2024-08-25 11:21:06 -05:00
|
|
|
const budgets: Budget[] = [
|
|
|
|
{
|
|
|
|
name: 'Groceries',
|
|
|
|
target: 1000,
|
|
|
|
spent: 367.97,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name:
|
|
|
|
'A very long budget name that should definitely be shortened to something reasonable',
|
|
|
|
target: 100000000,
|
|
|
|
spent: 26893085.56,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'Fast Food',
|
|
|
|
target: 300,
|
|
|
|
spent: 420.69,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'Insurance',
|
|
|
|
target: 220.44,
|
|
|
|
spent: 0,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'Mortgage',
|
|
|
|
target: 1310.47,
|
|
|
|
spent: 1310.47,
|
|
|
|
},
|
|
|
|
]
|
|
|
|
|
|
|
|
export function BudgetsOverview() {
|
|
|
|
let sig = useSignal(IS_BROWSER ? globalThis.location.hash : '')
|
|
|
|
|
|
|
|
addEventListener('popstate', (ev) => {
|
|
|
|
console.log('popstate', ev)
|
|
|
|
sig.value = globalThis.location.hash
|
|
|
|
ev.preventDefault()
|
|
|
|
return false
|
|
|
|
})
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
setTimeout(() => {
|
|
|
|
console.log('Timeout!')
|
|
|
|
}, 2000)
|
|
|
|
addEventListener('popstate', (ev) => {
|
|
|
|
console.log('popstate', ev)
|
|
|
|
sig.value = globalThis.location.hash
|
|
|
|
})
|
|
|
|
}, [sig])
|
2024-08-24 07:54:43 -05:00
|
|
|
|
2024-08-25 09:04:22 -05:00
|
|
|
const uncategorizedSpend = 851.22
|
|
|
|
|
2024-08-24 07:54:43 -05:00
|
|
|
return (
|
2024-08-24 11:31:45 -05:00
|
|
|
<div class='h-[100vh] flex flex-col max-w-full'>
|
|
|
|
<header class='bg-mantle'>
|
|
|
|
<h1 class='text-2xl font-mono p-2 px-2'>FlanBank</h1>
|
2024-08-25 11:21:06 -05:00
|
|
|
{sig.value}
|
2024-08-24 11:31:45 -05:00
|
|
|
</header>
|
2024-08-24 22:35:03 -05:00
|
|
|
<section class='grid grid-rows-[1fr_auto] sm:grid-cols-2 sm:grid-rows-1 sm:grid-cols-[1fr_auto] flex-1 max-w-full max-w-2xl mx-auto'>
|
2024-08-25 11:21:06 -05:00
|
|
|
<main class='p-2 sm:pr-0 flex flex-col gap-2 max-w-full' f-client-nav>
|
2024-08-24 11:31:45 -05:00
|
|
|
{/*<h1>Budgets Overview</h1>*/}
|
|
|
|
<section class='flex flex-col gap-2 max-w-full'>
|
2024-08-25 09:04:22 -05:00
|
|
|
{uncategorizedSpend <= 0 ? '' : (
|
|
|
|
<ProgressBarCard
|
|
|
|
heading='Uncategorized'
|
|
|
|
bgClass='bg-yellow opacity-20'
|
|
|
|
accentTextClass='text-yellow'
|
|
|
|
fillRatio={1.0}
|
|
|
|
subheading={
|
|
|
|
<>
|
|
|
|
<Currency amount={uncategorizedSpend} />
|
|
|
|
</>
|
|
|
|
}
|
|
|
|
>
|
|
|
|
<small>You should categorize these!</small>
|
|
|
|
</ProgressBarCard>
|
|
|
|
)}
|
2024-08-24 11:31:45 -05:00
|
|
|
{budgets.map((budget, _i) => <BudgetCard budget={budget} />)}
|
|
|
|
</section>
|
|
|
|
</main>
|
2024-08-25 11:21:06 -05:00
|
|
|
<Nav />
|
2024-08-24 11:31:45 -05:00
|
|
|
</section>
|
2024-08-24 07:54:43 -05:00
|
|
|
</div>
|
|
|
|
)
|
|
|
|
}
|