finance: feat: added the goal page with some improvements of ui

1 files changed, 44 insertions, 0 deletions

diff --git a/frontend/src/app/(main)/goals/page.tsx b/frontend/src/app/(main)/goals/page.tsx
new file mode 100644
index 0000000..b703cff
--- /dev/null
+++ b/frontend/src/app/(main)/goals/page.tsx
@@ -0,0 +1,44 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { PlusCircle, RefreshCw } from "lucide-react";
+import Link from "next/link";
+import { GoalsList } from "./components/goals-list";
+import { useState } from "react";
+
+export default function GoalsPage() {
+  const [refreshing, setRefreshing] = useState(false);
+
+  const handleRefresh = () => {
+    setRefreshing(true);
+    // Force reload the page
+    window.location.href = `/goals?refresh=${new Date().getTime()}`;
+  };
+
+  return (
+    <div className="container mx-auto px-4 py-6 md:py-8">
+      <div className="flex flex-col sm:flex-row sm:justify-between sm:items-center mb-6 gap-4">
+        <div>
+          <h1 className="text-xl sm:text-2xl font-bold tracking-tight">Financial Goals</h1>
+          <p className="text-sm text-muted-foreground">
+            Track your progress towards your financial goals
+          </p>
+        </div>
+        <div className="flex gap-2 sm:gap-3">
+          <Button variant="outline" onClick={handleRefresh} disabled={refreshing} size="sm" className="text-xs sm:text-sm">
+            <RefreshCw className="mr-1 h-3 w-3 sm:h-4 sm:w-4" />
+            Refresh
+          </Button>
+          <Link href="/goals/new">
+            <Button size="sm" className="text-xs sm:text-sm">
+              <PlusCircle className="mr-1 h-3 w-3 sm:h-4 sm:w-4" />
+              New Goal
+            </Button>
+          </Link>
+        </div>
+      </div>
+      
+      <GoalsList />
+    </div>
+  );
+} 
\ No newline at end of file