feat: Goal-based savings tracking & milestones (Fixes #133)

app/package.json

@@ -42,6 +42,7 @@
     "@radix-ui/react-toggle-group": "^1.1.10",
     "@radix-ui/react-tooltip": "^1.2.7",
     "@tanstack/react-query": "^5.84.2",
+    "axios": "^1.13.6",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
@@ -67,13 +68,13 @@
   "devDependencies": {
     "@eslint/js": "^9.32.0",
     "@tailwindcss/typography": "^0.5.16",
-    "@types/node": "^22.16.5",
-    "@types/react": "^18.3.23",
-    "@types/react-dom": "^18.3.7",
-    "@types/jest": "^29.5.14",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.6.1",
+    "@types/jest": "^29.5.14",
+    "@types/node": "^22.16.5",
+    "@types/react": "^18.3.23",
+    "@types/react-dom": "^18.3.7",
     "@vitejs/plugin-react-swc": "^3.11.0",
     "autoprefixer": "^10.4.21",
     "eslint": "^9.32.0",
@@ -85,8 +86,8 @@
     "jest-environment-jsdom": "^29.7.0",
     "jest-junit": "^16.0.0",
     "postcss": "^8.5.6",
-    "ts-jest": "^29.2.5",
     "tailwindcss": "^3.4.17",
+    "ts-jest": "^29.2.5",
     "typescript": "^5.8.3",
     "typescript-eslint": "^8.38.0",
     "vite": "^5.4.19",

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 { Goals } from "./pages/Goals";
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -94,6 +95,7 @@ const App = () => (
           </Route>
           <Route path="/signin" element={<SignIn />} />
           <Route path="/register" element={<Register />} />
+          <Route path="goals" element={<ProtectedRoute><Goals /></ProtectedRoute>} />
           {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
           <Route path="*" element={<NotFound />} />
         </Routes>

app/src/api/goals.ts

@@ -0,0 +1,51 @@
+import axios from "axios";
+
+const api = axios.create({
+    baseURL: "/api/goals",
+});
+
+api.interceptors.request.use((config) => {
+    const token = localStorage.getItem("token");
+    if (token) {
+        config.headers.Authorization = `Bearer ${token}`;
+    }
+    return config;
+});
+
+export interface GoalMilestone {
+    id: number;
+    name: string;
+    target_amount: number;
+    achieved: boolean;
+}
+
+export interface Goal {
+    id: number;
+    name: string;
+    target_amount: number;
+    current_amount: number;
+    currency: string;
+    deadline: string | null;
+    created_at: string;
+    milestones: GoalMilestone[];
+}
+
+export const getGoals = async (): Promise<Goal[]> => {
+    const response = await api.get("");
+    return response.data;
+};
+
+export const createGoal = async (data: any) => {
+    const response = await api.post("", data);
+    return response.data;
+};
+
+export const updateGoal = async (id: number, data: any) => {
+    const response = await api.put(`/${id}`, data);
+    return response.data;
+};
+
+export const deleteGoal = async (id: number) => {
+    const response = await api.delete(`/${id}`);
+    return response.data;
+};

app/src/pages/Goals.tsx

@@ -0,0 +1,63 @@
+import { useEffect, useState } from "react";
+import { FinancialCard, FinancialCardContent, FinancialCardDescription, FinancialCardHeader, FinancialCardTitle } from "@/components/ui/financial-card";
+import { Button } from "@/components/ui/button";
+import { getGoals, Goal, createGoal } from "@/api/goals";
+
+export function Goals() {
+    const [goals, setGoals] = useState<Goal[]>([]);
+    const [loading, setLoading] = useState(true);
+
+    useEffect(() => {
+        getGoals().then((data) => {
+            setGoals(data);
+            setLoading(false);
+        }).catch(err => {
+            console.error(err);
+            setLoading(false);
+        });
+    }, []);
+
+    const handleCreate = async () => {
+        const name = prompt("Goal name:");
+        if (!name) return;
+        const target = parseFloat(prompt("Target amount:") || "0");
+        if (target <= 0) return;
+
+        await createGoal({ name, target_amount: target, current_amount: 0 });
+        const updated = await getGoals();
+        setGoals(updated);
+    };
+
+    if (loading) return <div>Loading...</div>;
+
+    return (
+        <div className="space-y-6">
+            <div className="flex justify-between items-center">
+                <h1 className="text-3xl font-bold">Goals & Milestones</h1>
+                <Button onClick={handleCreate}>New Goal</Button>
+            </div>
+
+            <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+                {goals.map((g) => (
+                    <FinancialCard key={g.id}>
+                        <FinancialCardHeader>
+                            <FinancialCardTitle>{g.name}</FinancialCardTitle>
+                            <FinancialCardDescription>
+                                {g.current_amount} / {g.target_amount} {g.currency}
+                            </FinancialCardDescription>
+                        </FinancialCardHeader>
+                        <FinancialCardContent>
+                            <div className="w-full bg-secondary rounded-full h-2.5">
+                                <div 
+                                    className="bg-primary h-2.5 rounded-full" 
+                                    style={{ width: `${Math.min((g.current_amount / g.target_amount) * 100, 100)}%` }}
+                                ></div>
+                            </div>
+                        </FinancialCardContent>
+                    </FinancialCard>
+                ))}
+            </div>
+            {goals.length === 0 && <p className="text-muted-foreground">No goals set yet.</p>}
+        </div>
+    );
+}