pierre/MoneyMgr
1
0
Fork 0
Code Issues Pull Requests 3 Actions Packages Projects Releases 3 Wiki Activity

Display accounts balances

Browse Source
This commit is contained in:
Pierre HUBERT
2025-04-21 12:31:00 +02:00
parent 6ee250d872
commit 1621fe41e2
5 changed files with 60 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
moneymgr_web/src/widgets/AmountWidget.tsx Normal file
View File

@ -0,0 +1,5 @@
export function AmountWidget(p: { amount: number }): React.ReactElement {
return (
<span style={{ color: p.amount < 0 ? "red" : "green" }}>{p.amount} €</span>
);
}

7
moneymgr_web/src/widgets/MoneyNavList.tsx
View File

@ -13,6 +13,7 @@ import { useLocation } from "react-router-dom";
import { useAccounts } from "../hooks/AccountsListProvider";
import { AccountWidget } from "./AccountWidget";
import { RouterLink } from "./RouterLink";
import { AmountWidget } from "./AmountWidget";
export function MoneyNavList(): React.ReactElement {
const accounts = useAccounts();
@ -61,6 +62,7 @@ export function MoneyNavList(): React.ReactElement {
<NavLink
key={a.id}
label={a.name}
secondaryLabel={<AmountWidget amount={a.balance} />}
uri={`/account/${a.id}`}
icon={<AccountWidget account={a} />}
/>
@ -72,14 +74,15 @@ export function MoneyNavList(): React.ReactElement {
function NavLink(p: {
icon: React.ReactElement;
uri: string;
label: string;
label: string | React.ReactElement;
secondaryLabel?: string | React.ReactElement;
}): React.ReactElement {
const location = useLocation();
return (
<RouterLink to={p.uri}>
<ListItemButton selected={p.uri === location.pathname}>
<ListItemIcon>{p.icon}</ListItemIcon>
<ListItemText primary={p.label} />
<ListItemText primary={p.label} secondary={p.secondaryLabel} />
</ListItemButton>
</RouterLink>
);