feat: implement goal-based savings tracking and dashboard summary

app/src/App.tsx

@@ -16,6 +16,8 @@ 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: {
@@ -91,6 +93,15 @@ const App = () => (
                 </ProtectedRoute>
               }
             />
+            <Route
+              path="savings"
+              element={
+                <ProtectedRoute>
+                  <Savings />
+                </ProtectedRoute>
+              }
+            />
+
           </Route>
           <Route path="/signin" element={<SignIn />} />
           <Route path="/register" element={<Register />} />

app/src/components/layout/Navbar.tsx

@@ -1,20 +1,23 @@
 import { useEffect, useState } from 'react';
 import { Link, useLocation, useNavigate } from 'react-router-dom';
 import { Button } from '@/components/ui/button';
-import { Menu, X, TrendingUp, ShieldCheck } from 'lucide-react';
+import { Menu, X, TrendingUp, ShieldCheck, Target } from 'lucide-react';
+
 import { getToken, getRefreshToken, clearToken, clearRefreshToken } from '@/lib/auth';
 import { useToast } from '@/components/ui/use-toast';
 import { logout as logoutApi } from '@/api/auth';
 
 const navigation = [
   { name: 'Dashboard', href: '/dashboard' },
   { name: 'Budgets', href: '/budgets' },
+  { name: 'Savings', href: '/savings', icon: Target },
   { name: 'Bills', href: '/bills' },
   { name: 'Reminders', href: '/reminders' },
   { name: 'Expenses', href: '/expenses' },
   { name: 'Analytics', href: '/analytics' },
 ];
 
+
 export function Navbar() {
   const [isOpen, setIsOpen] = useState(false);
   const [isAuthed, setIsAuthed] = useState<boolean>(!!getToken());
@@ -69,12 +72,14 @@ export function Navbar() {
                   to={item.href}
                   className={
                     active
-                      ? 'rounded-full bg-secondary px-4 py-2 text-xs font-semibold text-secondary-foreground shadow-sm'
-                      : 'rounded-full px-4 py-2 text-xs font-semibold text-muted-foreground transition hover:bg-muted hover:text-foreground'
+                      ? 'rounded-full bg-secondary px-4 py-2 text-xs font-semibold text-secondary-foreground shadow-sm flex items-center'
+                      : 'rounded-full px-4 py-2 text-xs font-semibold text-muted-foreground transition hover:bg-muted hover:text-foreground flex items-center'
                   }
                 >
+                  {item.icon && <item.icon className="w-3.5 h-3.5 mr-1.5" />}
                   {item.name}
                 </Link>
+
               );
             })}
           </div>
@@ -124,12 +129,14 @@ export function Navbar() {
                     onClick={() => setIsOpen(false)}
                     className={
                       active
-                        ? 'block rounded-lg bg-secondary px-3 py-2 text-sm font-medium text-secondary-foreground'
-                        : 'block rounded-lg px-3 py-2 text-sm font-medium text-foreground hover:bg-muted'
+                        ? 'flex items-center rounded-lg bg-secondary px-3 py-2 text-sm font-medium text-secondary-foreground'
+                        : 'flex items-center rounded-lg px-3 py-2 text-sm font-medium text-foreground hover:bg-muted'
                     }
                   >
+                    {item.icon && <item.icon className="w-4 h-4 mr-2" />}
                     {item.name}
                   </Link>
+
                 );
               })}
               <div className="grid grid-cols-2 gap-2 pt-2">

app/src/pages/Dashboard.tsx

@@ -18,7 +18,9 @@ import {
   AlertTriangle,
   Calendar,
   Plus,
+  Target,
 } from 'lucide-react';
+
 import { getDashboardSummary, type DashboardSummary } from '@/api/dashboard';
 import { useNavigate } from 'react-router-dom';
 import { formatMoney } from '@/lib/currency';
@@ -95,8 +97,17 @@ export function Dashboard() {
       icon: CreditCard,
       description: 'Due soon',
     },
+    {
+      title: 'Savings Progress',
+      amount: currency(13100),
+      change: '65%',
+      trend: 'up',
+      icon: Target,
+      description: 'Goal: $20,000',
+    },
   ] as const;
 
+
   const transactions = data?.recent_transactions ?? [];
   const upcomingBills = data?.upcoming_bills ?? [];
   const categoryBreakdown = data?.category_breakdown ?? [];
@@ -141,7 +152,8 @@ export function Dashboard() {
         </div>
       )}
 
-      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4 mb-8">
+      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-5 mb-8">
+
         {summaryCards.map((card, index) => (
           <FinancialCard key={index} variant="financial" className="group card-interactive fade-in-up">
             <FinancialCardHeader className="pb-3">

app/src/pages/Savings.tsx

@@ -0,0 +1,113 @@
+import { useState } from 'react';
+import { FinancialCard, FinancialCardContent, FinancialCardDescription, FinancialCardHeader, FinancialCardTitle } from '@/components/ui/financial-card';
+import { Button } from '@/components/ui/button';
+import { Target, Plus, Award, Clock } from 'lucide-react';
+import { formatMoney } from '@/lib/currency';
+
+const mockGoals = [
+  {
+    id: 1,
+    title: 'Emergency Fund',
+    target: 10000,
+    current: 8500,
+    deadline: 'Dec 2025',
+  },
+  {
+    id: 2,
+    title: 'New Laptop',
+    target: 2000,
+    current: 400,
+    deadline: 'Aug 2025',
+  },
+  {
+    id: 3,
+    title: 'Travel Fund',
+    target: 5000,
+    current: 4200,
+    deadline: 'Oct 2025',
+  }
+];
+
+export function Savings() {
+  const [goals] = useState(mockGoals);
+
+  const getProgressClass = (percentage: number) => {
+    return percentage >= 80 ? 'chart-fill-success' : 'chart-fill-primary';
+  };
+
+  return (
+    <div className="page-wrap">
+      <div className="page-header">
+        <div className="relative flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
+          <div>
+            <h1 className="page-title">Savings Goals</h1>
+            <p className="page-subtitle">
+              Plan your future and track your progress towards financial freedom
+            </p>
+          </div>
+          <div className="flex gap-3">
+            <Button variant="financial" size="sm">
+              <Plus className="w-4 h-4 mr-2" />
+              New Goal
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+        {goals.map((goal) => {
+          const percentage = (goal.current / goal.target) * 100;
+          const isHighProgress = percentage >= 80;
+
+          return (
+            <FinancialCard key={goal.id} variant="financial" className="fade-in-up">
+              <FinancialCardHeader>
+                <div className="flex items-center justify-between">
+                  <FinancialCardTitle className="section-title flex items-center gap-2">
+                    <Target className={`w-5 h-5 ${isHighProgress ? 'text-success' : 'text-primary'}`} />
+                    {goal.title}
+                  </FinancialCardTitle>
+                  {isHighProgress && (
+                    <Award className="w-5 h-5 text-warning animate-bounce" />
+                  )}
+                </div>
+                <FinancialCardDescription>
+                  Target date: {goal.deadline}
+                </FinancialCardDescription>
+              </FinancialCardHeader>
+              <FinancialCardContent>
+                <div className="space-y-4">
+                  <div className="flex justify-between items-end">
+                    <div>
+                      <div className="metric-value text-2xl">
+                        {formatMoney(goal.current)}
+                      </div>
+                      <div className="text-sm text-muted-foreground">
+                        of {formatMoney(goal.target)}
+                      </div>
+                    </div>
+                    <div className={`text-lg font-bold ${isHighProgress ? 'text-success' : 'text-primary'}`}>
+                      {percentage.toFixed(0)}%
+                    </div>
+                  </div>
+
+                  <div className="chart-track h-3">
+                    <div
+                      className={`${getProgressClass(percentage)} h-full transition-all duration-500`}
+                      style={{ width: `${Math.min(percentage, 100)}%` }}
+                    />
+                  </div>
+
+                  <div className="flex items-center gap-2 text-xs text-muted-foreground">
+                    <Clock className="w-3 h-3" />
+                    <span>{isHighProgress ? 'Almost there!' : 'On your way'}</span>
+                  </div>
+                </div>
+              </FinancialCardContent>
+            </FinancialCard>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

app/vite.config.ts

@@ -6,7 +6,7 @@ import path from "path";
 export default defineConfig(({ mode }) => ({
   server: {
     host: "::",
-    port: 5173,
+    port: 3000,
   },
   plugins: [
     react(),