Banks Page.

Author: simonredfern

src/lib/config/navigation.ts

@@ -314,6 +314,29 @@ export function getActiveAccountAccessMenuItem(pathname: string) {
   return found || accountAccessItems[0]; // fallback to first item
 }
 
+// Banks navigation items
+function buildBanksItems(): NavigationItem[] {
+  const items: NavigationItem[] = [
+    { href: "/banks", label: "Banks", iconComponent: Building2 },
+    { href: "/banks/create", label: "Create Bank", iconComponent: Plus },
+  ];
+
+  return items;
+}
+
+export const banksItems = buildBanksItems();
+
+export function getActiveBanksMenuItem(pathname: string) {
+  const found = banksItems.find((item) => {
+    if (item.external) {
+      return false;
+    }
+    return pathname.startsWith(item.href);
+  });
+
+  return found || banksItems[0];
+}
+
 // Dynamic Entities navigation items
 function buildDynamicEntitiesItems(): NavigationItem[] {
   const items: NavigationItem[] = [
@@ -466,6 +489,7 @@ export const navSections: NavigationSection[] = [
   { id: "products", label: "API Products", iconComponent: Package, items: productsItems, basePaths: ["/products"] },
   { id: "financial-products", label: "Financial Products", iconComponent: Banknote, items: financialProductsItems, basePaths: ["/products/financial", "/products/collections"] },
   { id: "rbac", label: "RBAC", iconComponent: Shield, items: rbacItems, basePaths: ["/rbac"] },
+  { id: "banks", label: "Banks", iconComponent: Building2, items: banksItems, basePaths: ["/banks"] },
   { id: "account-access", label: "Account Access", iconComponent: Landmark, items: accountAccessItems, basePaths: ["/account-access"] },
   { id: "dynamic-entities", label: "Dynamic Entities", iconComponent: Box, items: dynamicEntitiesItems, basePaths: ["/dynamic-entities"] },
   { id: "dynamic-endpoints", label: "Dynamic Endpoints", iconComponent: Plug, items: dynamicEndpointsItems, basePaths: ["/dynamic-endpoints"] },

src/lib/stores/currentBank.svelte.ts

@@ -21,6 +21,8 @@ class CurrentBankStore {
   bank = $state<Bank | null>(null);
   banks = $state<Bank[]>([]);
   loading = $state(false);
+  justChanged = $state(false);
+  private changeTimer: ReturnType<typeof setTimeout> | null = null;
 
   get bankId(): string {
     return this.bank?.bank_id ?? "";
@@ -50,6 +52,15 @@ class CurrentBankStore {
       }
     }
     logger.info(`Selected bank: ${bank?.bank_id ?? "none"}`);
+
+    // Trigger the highlight animation
+    if (bank && browser) {
+      if (this.changeTimer) clearTimeout(this.changeTimer);
+      this.justChanged = true;
+      this.changeTimer = setTimeout(() => {
+        this.justChanged = false;
+      }, 1500);
+    }
   }
 
   selectById(bankId: string): void {

src/routes/(protected)/banks/+page.server.ts

@@ -0,0 +1,56 @@
+import type { PageServerLoad } from "./$types";
+import { error } from "@sveltejs/kit";
+import { createLogger } from "$lib/utils/logger";
+import { SessionOAuthHelper } from "$lib/oauth/sessionHelper";
+import { obp_requests } from "$lib/obp/requests";
+
+const logger = createLogger("BanksPageServer");
+
+export const load: PageServerLoad = async ({ locals }) => {
+  logger.info("=== Banks Page Load Started ===");
+
+  const session = locals.session;
+
+  if (!session?.data?.user) {
+    logger.error("No user in session");
+    throw error(401, "Unauthorized");
+  }
+
+  const sessionOAuth = SessionOAuthHelper.getSessionOAuth(session);
+  const accessToken = sessionOAuth?.accessToken;
+
+  if (!accessToken) {
+    logger.error("No access token available");
+    throw error(401, "No API access token available");
+  }
+
+  logger.info("Access token present, fetching banks");
+
+  try {
+    const endpoint = "/obp/v6.0.0/banks";
+    logger.info(`Making API request to: ${endpoint}`);
+
+    const response = await obp_requests.get(endpoint, accessToken);
+
+    const banks = response.banks || [];
+    logger.info(`Retrieved ${banks.length} banks`);
+
+    // Sort banks alphabetically by full_name
+    banks.sort((a: any, b: any) => {
+      const nameA = (a.full_name || "").toLowerCase();
+      const nameB = (b.full_name || "").toLowerCase();
+      return nameA.localeCompare(nameB);
+    });
+
+    return {
+      banks,
+    };
+  } catch (err: any) {
+    logger.error("Error fetching banks:", err);
+    return {
+      banks: [],
+      error:
+        err instanceof Error ? err.message : "Failed to fetch banks",
+    };
+  }
+};