added api logic, vitest, minimal testing ui

web/src/App.tsx

@@ -0,0 +1,63 @@
+import { Link, NavLink, Route, Routes } from "react-router-dom";
+import DashboardPage from "./pages/DashboardPage";
+import IncomePage from "./pages/IncomePage";
+import TransactionsPage from "./pages/TransactionsPage";
+
+export default function App() {
+  return (
+    <div className="min-h-screen bg-[--color-bg] text-[--color-fg]">
+      <TopNav />
+      <main className="container">
+        <Routes>
+          <Route path="/" element={<DashboardPage />} />
+          <Route path="/income" element={<IncomePage />} />
+          <Route path="/transactions" element={<TransactionsPage />} />
+          <Route path="*" element={<NotFound />} />
+        </Routes>
+      </main>
+      <footer className="container py-8 text-center text-sm muted">
+        SkyMoney • {new Date().getFullYear()}
+      </footer>
+    </div>
+  );
+}
+
+function TopNav() {
+  return (
+    <header className="border-b border-[--color-ink] bg-[--color-panel]">
+      <div className="container h-14 flex items-center gap-4">
+        <Link to="/" className="font-bold">
+          SkyMoney
+        </Link>
+        <Nav to="/">Dashboard</Nav>
+        <Nav to="/income">Income</Nav>
+        <Nav to="/transactions">Transactions</Nav>
+        <div className="ml-auto text-xs muted">demo user</div>
+      </div>
+    </header>
+  );
+}
+
+function Nav({ to, children }: { to: string; children: React.ReactNode }) {
+  return (
+    <NavLink
+      to={to}
+      className={({ isActive }) =>
+        "px-3 py-1 rounded-xl hover:bg-[--color-ink]/60 " +
+        (isActive ? "bg-[--color-ink]" : "")
+      }
+      end
+    >
+      {children}
+    </NavLink>
+  );
+}
+
+function NotFound() {
+  return (
+    <div className="p-6">
+      <h1 className="text-xl font-bold mb-2">404</h1>
+      <p className="muted">This page got lost in the budget cuts.</p>
+    </div>
+  );
+}