v1.0.0

frontend/src/pages/Dashboard.jsx

@@ -0,0 +1,76 @@
+import { useBalance, useSummary, useSettleUp } from '../api/queries.js';
+import { useHouseholdContext } from '../household/HouseholdContext.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 { activeHousehold: household } = useHouseholdContext();
+  const { data: balance } = useBalance();
+  const { data: summary } = useSummary();
+  const settleUp = useSettleUp();
+
+  const members = household?.members || [];
+  const currency = household?.currency || 'PLN';
+
+  return (
+    <div>
+      <h1 className="page-title">Dashboard</h1>
+
+      <div className="card settlement-tile">
+        {!balance ? (
+          <p>Ładowanie…</p>
+        ) : balance.settled ? (
+          <>
+            <p>Rozliczenia</p>
+            <p className="amount settled">
+              Jesteście na czysto! <Icon name="celebration" />
+            </p>
+          </>
+        ) : (
+          <>
+            <p>Rozliczenia</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" disabled={settleUp.isPending} onClick={() => settleUp.mutate()}>
+              {settleUp.isPending ? 'Rozliczanie…' : 'Rozlicz się'}
+            </button>
+          </>
+        )}
+      </div>
+
+      <div className="card">
+        <h3>Wydatki wg kategorii (ten miesiąc)</h3>
+        {!summary ? <p>Ładowanie…</p> : <CategoryPieChart data={summary.byCategory} currency={currency} />}
+      </div>
+
+      <div className="card">
+        <h3>Podsumowanie miesiąca</h3>
+        {summary && (
+          <div className="summary-grid">
+            <div>
+              <div className="label">Suma</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>
+  );
+}