51 lines
1.7 KiB
JavaScript
51 lines
1.7 KiB
JavaScript
import { useMonthly, useSummary } from '../api/queries.js';
|
|
import { useHouseholdContext } from '../household/HouseholdContext.jsx';
|
|
import MonthlyBarChart from '../components/MonthlyBarChart.jsx';
|
|
import PayerComparisonChart from '../components/PayerComparisonChart.jsx';
|
|
import Icon from '../components/Icon.jsx';
|
|
|
|
export default function Stats() {
|
|
const { activeHousehold: household } = useHouseholdContext();
|
|
const { data: monthly } = useMonthly();
|
|
const { data: summary } = useSummary();
|
|
|
|
const members = household?.members || [];
|
|
const currency = household?.currency || 'PLN';
|
|
|
|
return (
|
|
<div>
|
|
<h1 className="page-title">Statystyki</h1>
|
|
|
|
<div className="card">
|
|
<h3>Wydatki miesiąc do miesiąca</h3>
|
|
{!monthly ? <p>Ładowanie…</p> : <MonthlyBarChart data={monthly} currency={currency} />}
|
|
</div>
|
|
|
|
<div className="card">
|
|
<h3>Kto więcej konsumuje (ten miesiąc)</h3>
|
|
{!summary ? (
|
|
<p>Ładowanie…</p>
|
|
) : (
|
|
<PayerComparisonChart members={members} byShare={summary.byShare} currency={currency} />
|
|
)}
|
|
</div>
|
|
|
|
<div className="card">
|
|
<h3>Kategorie od najdroższej</h3>
|
|
{summary && (
|
|
<div>
|
|
{summary.byCategory.length === 0 && <p className="empty-state">Brak wydatków w tym miesiącu</p>}
|
|
{summary.byCategory.map((c) => (
|
|
<div key={c.categoryId || 'none'} className="category-manage-row">
|
|
<Icon name={c.icon || 'inventory_2'} className="icon" />
|
|
<span className="name">{c.name || 'Bez kategorii'}</span>
|
|
<strong>{c.total.toFixed(2)} {currency}</strong>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|