Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 | 2x 2x 2x 1x | import type {ReactElement} from 'react';
import {Box, Paper, Stack, Tooltip, Typography} from '@mui/material';
import {AccountBalance as AccountBalanceIcon, Info as InfoIcon, TrendingUp as TrendingUpIcon} from '@mui/icons-material';
interface TreasuryCardProps {
balance: string;
interestRatePct: number;
earningsYtd: string;
accountNumber: string;
}
function formatCurrency(value: string): string {
const n = Number.parseFloat(value);
Iif (Number.isNaN(n)) return value;
return new Intl.NumberFormat('en-US', {style: 'currency', currency: 'USD'}).format(n);
}
export default function TreasuryCard({
balance,
interestRatePct,
earningsYtd,
accountNumber
}: TreasuryCardProps): ReactElement {
return (
<Paper sx={{p: 3, height: '100%', position: 'relative', borderTop: 4, borderColor: 'primary.main'}}>
<Tooltip
title="FlowState Treasury — your investment side. Funds you contribute earn interest annually and back your borrowing power."
placement="top"
arrow
>
<InfoIcon
sx={{position: 'absolute', top: 8, right: 8, fontSize: 16, color: 'text.secondary', cursor: 'help'}}
/>
</Tooltip>
<Stack spacing={1.5}>
<Box sx={{display: 'flex', alignItems: 'center', gap: 1}}>
<AccountBalanceIcon color="primary"/>
<Typography
variant="overline"
sx={{
color: "text.secondary",
fontWeight: 600
}}>
Treasury
</Typography>
</Box>
<Typography variant="caption" sx={{
color: "text.secondary"
}}>
Investment Balance
</Typography>
<Typography variant="h4" color="primary" sx={{
fontWeight: "bold"
}}>
{formatCurrency(balance)}
</Typography>
<Box sx={{display: 'flex', alignItems: 'center', gap: 0.5}}>
<TrendingUpIcon fontSize="small" color="success"/>
<Typography variant="body2" sx={{
color: "text.secondary"
}}>
Earning at {interestRatePct.toFixed(2)}%/year
</Typography>
</Box>
<Typography variant="body2">
Earnings YTD: <strong>{formatCurrency(earningsYtd)}</strong>
</Typography>
<Typography
variant="caption"
sx={{
color: "text.secondary",
mt: 1
}}>
Account {accountNumber}
</Typography>
</Stack>
</Paper>
);
}
|