v1.0.0

frontend/src/pages/Stats.jsx

@@ -0,0 +1,50 @@
+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>
+  );
+}