80 lines
2.7 KiB
JavaScript
80 lines
2.7 KiB
JavaScript
import { useNavigate } from 'react-router-dom';
|
|
import { useBalance, useSummary } from '../api/queries.js';
|
|
import { useHouseholdContext } from '../household/HouseholdContext.jsx';
|
|
import { useTranslation } from '../i18n/I18nContext.jsx';
|
|
import CategoryPieChart from '../components/CategoryPieChart.jsx';
|
|
import Icon from '../components/Icon.jsx';
|
|
|
|
function memberName(members, id) {
|
|
return members.find((m) => m.id === id)?.name || '—';
|
|
}
|
|
|
|
export default function Dashboard() {
|
|
const navigate = useNavigate();
|
|
const { activeHousehold: household } = useHouseholdContext();
|
|
const { data: balance } = useBalance();
|
|
const { data: summary } = useSummary();
|
|
const { t } = useTranslation();
|
|
|
|
const members = household?.members || [];
|
|
const currency = household?.currency || 'PLN';
|
|
|
|
return (
|
|
<div>
|
|
<h1 className="page-title">Dashboard</h1>
|
|
|
|
<div className="card settlement-tile">
|
|
{!balance ? (
|
|
<p>{t('common.loading')}</p>
|
|
) : balance.settled ? (
|
|
<>
|
|
<p>{t('dashboard.settlementsTitle')}</p>
|
|
<p className="amount settled">
|
|
{t('dashboard.allSettled')} <Icon name="celebration" />
|
|
</p>
|
|
</>
|
|
) : (
|
|
<>
|
|
<p>{t('dashboard.settlementsTitle')}</p>
|
|
<div className="settlement-transactions">
|
|
{balance.transactions.map((tx, i) => (
|
|
<p key={i} className="amount owed">
|
|
{memberName(members, tx.from)} → {memberName(members, tx.to)}: {tx.amount.toFixed(2)} {currency}
|
|
</p>
|
|
))}
|
|
</div>
|
|
<button className="btn-primary btn-center" onClick={() => navigate('/settlements')}>
|
|
{t('dashboard.settleUpButton')}
|
|
</button>
|
|
</>
|
|
)}
|
|
</div>
|
|
|
|
<div className="card">
|
|
<h3>{t('dashboard.expensesByCategoryTitle')}</h3>
|
|
{!summary ? <p>{t('common.loading')}</p> : <CategoryPieChart data={summary.byCategory} currency={currency} />}
|
|
</div>
|
|
|
|
<div className="card">
|
|
<h3>{t('dashboard.monthSummaryTitle')}</h3>
|
|
{summary && (
|
|
<div className="summary-grid">
|
|
<div>
|
|
<div className="label">{t('dashboard.totalLabel')}</div>
|
|
<div className="value">{summary.total.toFixed(2)} {currency}</div>
|
|
</div>
|
|
{members.map((m) => (
|
|
<div key={m.id}>
|
|
<div className="label">{m.name}</div>
|
|
<div className="value">
|
|
{(summary.byPayer.find((p) => p.userId === m.id)?.total || 0).toFixed(2)} {currency}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|