whekin/household-bot
1
0
Fork 0
mirror of https://github.com/whekin/household-bot.git synced 2026-03-31 17:44:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(miniapp): make dashboard screens react to initial load

Browse Source
This commit is contained in:
whekin
2026-03-12 01:32:05 +04:00
parent 7005efbc7b
commit 7467d3a4cf
3 changed files with 700 additions and 687 deletions
Download Patch File Download Diff File Expand all files Collapse all files

239
apps/miniapp/src/screens/balances-screen.tsx
View File

@@ -39,129 +39,132 @@ type Props = {
}
export function BalancesScreen(props: Props) {
if (!props.dashboard) {
return (
<div class="balance-list">
<p>{props.copy.emptyDashboard ?? ''}</p>
</div>
)
}
return (
<div class="balance-list">
<Show when={props.currentMemberLine}>
{(member) => (
<article class="balance-item balance-item--accent">
<header>
<strong>{props.copy.yourBalanceTitle ?? ''}</strong>
<span>
{member().netDueMajor} {props.dashboard!.currency}
</span>
</header>
<p>{props.copy.yourBalanceBody ?? ''}</p>
<div class="balance-breakdown">
<article class="stat-card">
<span>{props.copy.baseDue ?? ''}</span>
<strong>
{props.memberBaseDueMajor(member())} {props.dashboard!.currency}
</strong>
<Show
when={props.dashboard}
fallback={
<div class="balance-list">
<p>{props.copy.emptyDashboard ?? ''}</p>
</div>
}
>
{(dashboard) => (
<div class="balance-list">
<Show when={props.currentMemberLine}>
{(member) => (
<article class="balance-item balance-item--accent">
<header>
<strong>{props.copy.yourBalanceTitle ?? ''}</strong>
<span>
{member().netDueMajor} {dashboard().currency}
</span>
</header>
<p>{props.copy.yourBalanceBody ?? ''}</p>
<div class="balance-breakdown">
<article class="stat-card">
<span>{props.copy.baseDue ?? ''}</span>
<strong>
{props.memberBaseDueMajor(member())} {dashboard().currency}
</strong>
</article>
<article class="stat-card">
<span>{props.copy.shareOffset ?? ''}</span>
<strong>
{member().purchaseOffsetMajor} {dashboard().currency}
</strong>
</article>
<article class="stat-card">
<span>{props.copy.finalDue ?? ''}</span>
<strong>
{member().netDueMajor} {dashboard().currency}
</strong>
</article>
<article class="stat-card">
<span>{props.copy.paidLabel ?? ''}</span>
<strong>
{member().paidMajor} {dashboard().currency}
</strong>
</article>
<article class="stat-card">
<span>{props.copy.remainingLabel ?? ''}</span>
<strong>
{member().remainingMajor} {dashboard().currency}
</strong>
</article>
</div>
</article>
<article class="stat-card">
<span>{props.copy.shareOffset ?? ''}</span>
<strong>
{member().purchaseOffsetMajor} {props.dashboard!.currency}
</strong>
</article>
<article class="stat-card">
<span>{props.copy.finalDue ?? ''}</span>
<strong>
{member().netDueMajor} {props.dashboard!.currency}
</strong>
</article>
<article class="stat-card">
<span>{props.copy.paidLabel ?? ''}</span>
<strong>
{member().paidMajor} {props.dashboard!.currency}
</strong>
</article>
<article class="stat-card">
<span>{props.copy.remainingLabel ?? ''}</span>
<strong>
{member().remainingMajor} {props.dashboard!.currency}
</strong>
</article>
</div>
</article>
)}
</Show>
<div class="summary-card-grid">
<FinanceSummaryCards
dashboard={props.dashboard}
utilityTotalMajor={props.utilityTotalMajor}
purchaseTotalMajor={props.purchaseTotalMajor}
labels={{
remaining: props.copy.remainingLabel ?? '',
rent: props.copy.shareRent ?? '',
utilities: props.copy.shareUtilities ?? '',
purchases: props.copy.purchasesTitle ?? ''
}}
/>
</div>
<FinanceVisuals
dashboard={props.dashboard}
memberVisuals={props.memberBalanceVisuals}
purchaseChart={props.purchaseChart}
remainingClass={props.memberRemainingClass}
labels={{
financeVisualsTitle: props.copy.financeVisualsTitle ?? '',
financeVisualsBody: props.copy.financeVisualsBody ?? '',
membersCount: props.copy.membersCount ?? '',
purchaseInvestmentsTitle: props.copy.purchaseInvestmentsTitle ?? '',
purchaseInvestmentsBody: props.copy.purchaseInvestmentsBody ?? '',
purchaseInvestmentsEmpty: props.copy.purchaseInvestmentsEmpty ?? '',
purchaseTotalLabel: props.copy.purchaseTotalLabel ?? '',
purchaseShareLabel: props.copy.purchaseShareLabel ?? ''
}}
/>
<article class="balance-item">
<header>
<strong>{props.copy.householdBalancesTitle ?? ''}</strong>
</header>
<p>{props.copy.householdBalancesBody ?? ''}</p>
</article>
<For each={props.dashboard.members}>
{(member) => (
)}
</Show>
<div class="summary-card-grid">
<FinanceSummaryCards
dashboard={dashboard()}
utilityTotalMajor={props.utilityTotalMajor}
purchaseTotalMajor={props.purchaseTotalMajor}
labels={{
remaining: props.copy.remainingLabel ?? '',
rent: props.copy.shareRent ?? '',
utilities: props.copy.shareUtilities ?? '',
purchases: props.copy.purchasesTitle ?? ''
}}
/>
</div>
<FinanceVisuals
dashboard={dashboard()}
memberVisuals={props.memberBalanceVisuals}
purchaseChart={props.purchaseChart}
remainingClass={props.memberRemainingClass}
labels={{
financeVisualsTitle: props.copy.financeVisualsTitle ?? '',
financeVisualsBody: props.copy.financeVisualsBody ?? '',
membersCount: props.copy.membersCount ?? '',
purchaseInvestmentsTitle: props.copy.purchaseInvestmentsTitle ?? '',
purchaseInvestmentsBody: props.copy.purchaseInvestmentsBody ?? '',
purchaseInvestmentsEmpty: props.copy.purchaseInvestmentsEmpty ?? '',
purchaseTotalLabel: props.copy.purchaseTotalLabel ?? '',
purchaseShareLabel: props.copy.purchaseShareLabel ?? ''
}}
/>
<article class="balance-item">
<header>
<strong>{member.displayName}</strong>
<span>
{member.remainingMajor} {props.dashboard!.currency}
</span>
<strong>{props.copy.householdBalancesTitle ?? ''}</strong>
</header>
<p>
{props.copy.baseDue ?? ''}: {props.memberBaseDueMajor(member)}{' '}
{props.dashboard!.currency}
</p>
<p>
{props.copy.shareRent ?? ''}: {member.rentShareMajor} {props.dashboard!.currency}
</p>
<p>
{props.copy.shareUtilities ?? ''}: {member.utilityShareMajor}{' '}
{props.dashboard!.currency}
</p>
<p>
{props.copy.shareOffset ?? ''}: {member.purchaseOffsetMajor}{' '}
{props.dashboard!.currency}
</p>
<p>
{props.copy.paidLabel ?? ''}: {member.paidMajor} {props.dashboard!.currency}
</p>
<p class={`balance-status ${props.memberRemainingClass(member)}`}>
{props.copy.remainingLabel ?? ''}: {member.remainingMajor} {props.dashboard!.currency}
</p>
<p>{props.copy.householdBalancesBody ?? ''}</p>
</article>
)}
</For>
</div>
<For each={dashboard().members}>
{(member) => (
<article class="balance-item">
<header>
<strong>{member.displayName}</strong>
<span>
{member.remainingMajor} {dashboard().currency}
</span>
</header>
<p>
{props.copy.baseDue ?? ''}: {props.memberBaseDueMajor(member)}{' '}
{dashboard().currency}
</p>
<p>
{props.copy.shareRent ?? ''}: {member.rentShareMajor} {dashboard().currency}
</p>
<p>
{props.copy.shareUtilities ?? ''}: {member.utilityShareMajor}{' '}
{dashboard().currency}
</p>
<p>
{props.copy.shareOffset ?? ''}: {member.purchaseOffsetMajor}{' '}
{dashboard().currency}
</p>
<p>
{props.copy.paidLabel ?? ''}: {member.paidMajor} {dashboard().currency}
</p>
<p class={`balance-status ${props.memberRemainingClass(member)}`}>
{props.copy.remainingLabel ?? ''}: {member.remainingMajor} {dashboard().currency}
</p>
</article>
)}
</For>
</div>
)}
</Show>
)
}