feat: integrate React Query for improved data fetching and state management across banking and transactions components

app/api/banking/route.ts

@@ -1,14 +1,30 @@
-import { NextResponse } from "next/server";
+import { NextRequest, NextResponse } from "next/server";
 import { bankingService } from "@/services/banking.service";
 import { requireAuth } from "@/lib/auth-utils";
 
-export async function GET() {
+export async function GET(request: NextRequest) {
   const authError = await requireAuth();
   if (authError) return authError;
 
   try {
+    const { searchParams } = new URL(request.url);
+    const metadataOnly = searchParams.get("metadataOnly") === "true";
+
+    if (metadataOnly) {
+      const metadata = await bankingService.getMetadata();
+      return NextResponse.json(metadata, {
+        headers: {
+          "Cache-Control": "public, s-maxage=300, stale-while-revalidate=600",
+        },
+      });
+    }
+
     const data = await bankingService.getAllData();
-    return NextResponse.json(data);
+    return NextResponse.json(data, {
+      headers: {
+        "Cache-Control": "public, s-maxage=60, stale-while-revalidate=120",
+      },
+    });
   } catch (error) {
     console.error("Error fetching banking data:", error);
     return NextResponse.json(