feat: savings goals & milestones tracking

app/src/App.tsx

@@ -16,6 +16,7 @@ import NotFound from "./pages/NotFound";
 import { Landing } from "./pages/Landing";
 import ProtectedRoute from "./components/auth/ProtectedRoute";
 import Account from "./pages/Account";
+import { Savings } from "./pages/Savings";
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -83,6 +84,14 @@ const App = () => (
                 </ProtectedRoute>
               }
             />
+            <Route
+              path="savings"
+              element={
+                <ProtectedRoute>
+                  <Savings />
+                </ProtectedRoute>
+              }
+            />
             <Route
               path="account"
               element={

app/src/api/savings.ts

@@ -0,0 +1,71 @@
+import { api } from './client';
+
+export type SavingsGoalStatus = 'ACTIVE' | 'COMPLETED' | 'PAUSED';
+
+export type SavingsGoal = {
+  id: number;
+  name: string;
+  target_amount: number;
+  current_amount: number;
+  currency: string;
+  deadline?: string | null;
+  notes?: string | null;
+  status: SavingsGoalStatus;
+  progress_pct: number;
+  milestones_reached: number[];
+  next_milestone_pct: number | null;
+  created_at: string;
+};
+
+export type SavingsDeposit = {
+  id: number;
+  amount: number;
+  note?: string | null;
+  deposited_at: string;
+  created_at: string;
+};
+
+export type SavingsGoalCreate = {
+  name: string;
+  target_amount: number;
+  currency?: string;
+  deadline?: string | null;
+  notes?: string | null;
+  initial_amount?: number;
+};
+
+export type SavingsGoalUpdate = Partial<Omit<SavingsGoalCreate, 'initial_amount'>> & {
+  status?: SavingsGoalStatus;
+};
+
+export async function listGoals(status?: string): Promise<SavingsGoal[]> {
+  const qs = status ? `?status=${status}` : '';
+  return api<SavingsGoal[]>(`/savings${qs}`);
+}
+
+export async function createGoal(payload: SavingsGoalCreate): Promise<SavingsGoal> {
+  return api<SavingsGoal>('/savings', { method: 'POST', body: payload });
+}
+
+export async function getGoal(id: number): Promise<SavingsGoal> {
+  return api<SavingsGoal>(`/savings/${id}`);
+}
+
+export async function updateGoal(id: number, payload: SavingsGoalUpdate): Promise<SavingsGoal> {
+  return api<SavingsGoal>(`/savings/${id}`, { method: 'PATCH', body: payload });
+}
+
+export async function deleteGoal(id: number): Promise<{ message: string }> {
+  return api(`/savings/${id}`, { method: 'DELETE' });
+}
+
+export async function addDeposit(
+  goalId: number,
+  payload: { amount: number; note?: string; deposited_at?: string },
+): Promise<SavingsGoal> {
+  return api<SavingsGoal>(`/savings/${goalId}/deposits`, { method: 'POST', body: payload });
+}
+
+export async function listDeposits(goalId: number): Promise<SavingsDeposit[]> {
+  return api<SavingsDeposit[]>(`/savings/${goalId}/deposits`);
+}

app/src/components/layout/Navbar.tsx

@@ -12,6 +12,7 @@ const navigation = [
   { name: 'Bills', href: '/bills' },
   { name: 'Reminders', href: '/reminders' },
   { name: 'Expenses', href: '/expenses' },
+  { name: 'Savings', href: '/savings' },
   { name: 'Analytics', href: '/analytics' },
 ];