Account Detail

Author: simonredfern

src/lib/utils/roleChecker.ts

@@ -190,6 +190,10 @@ export const SITE_MAP: Record<string, PageRoleConfig> = {
   "/account-access/account-directory": {
     required: [{ role: "CanGetAccountDirectoryAtOneBank", bankScoped: true }],
   },
+  "/account-access/accounts/[bank_id]/[account_id]/[view_id]": {
+    required: [],
+    optional: [{ role: "CanExecuteAbacRule" }],
+  },
 
   // ── Users ─────────────────────────────────────────────
   "/users": {

src/routes/(protected)/+layout.server.ts

@@ -4,5 +4,6 @@ export const load: LayoutServerLoad = async ({ locals }) => {
   const session = locals.session;
   const userEntitlements =
     (session?.data?.user as any)?.entitlements?.list || [];
-  return { userEntitlements };
+  const userId = (session?.data?.user as any)?.user_id || "";
+  return { userEntitlements, userId };
 };

src/routes/(protected)/account-access/account-directory/+page.svelte

@@ -160,7 +160,11 @@
               <tbody>
                 {#each filteredAccounts as account}
                   <tr>
-                    <td class="cell-mono cell-id">{account.account_id}</td>
+                    <td class="cell-mono cell-id">
+                      <a href="/account-access/accounts/{encodeURIComponent(account.bank_id)}/{encodeURIComponent(account.account_id)}/owner" class="account-link">
+                        {account.account_id}
+                      </a>
+                    </td>
                     <td>
                       {#if account.account_type}
                         <span class="badge">{account.account_type}</span>
@@ -428,15 +432,23 @@
   }
 
   .cell-id {
-    color: #9ca3af;
     max-width: 180px;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
 
-  :global([data-mode="dark"]) .cell-id {
-    color: var(--color-surface-500);
+  .account-link {
+    color: #3b82f6;
+    text-decoration: none;
+  }
+
+  .account-link:hover {
+    text-decoration: underline;
+  }
+
+  :global([data-mode="dark"]) .account-link {
+    color: rgb(var(--color-primary-400));
   }
 
   .badge {

src/routes/(protected)/account-access/accounts/+page.svelte

@@ -85,11 +85,15 @@
         {#if accounts.length > 0}
           <ul class="account-list">
             {#each accounts as account}
+              {@const acctId = account.id || account.account_id}
+              {@const firstView = account.views_available?.[0]?.id || "owner"}
               <li class="account-item">
-                <span class="account-id">{account.id || account.account_id}</span>
-                {#if account.label}
-                  <span class="account-label">{account.label}</span>
-                {/if}
+                <a href="/account-access/accounts/{encodeURIComponent(currentBank.bankId)}/{encodeURIComponent(acctId)}/{encodeURIComponent(firstView)}" class="account-link">
+                  <span class="account-id">{acctId}</span>
+                  {#if account.label}
+                    <span class="account-label">{account.label}</span>
+                  {/if}
+                </a>
                 {#if account.views_available?.length}
                   <span class="account-views">{account.views_available.length} view{account.views_available.length !== 1 ? "s" : ""}</span>
                 {/if}
@@ -254,11 +258,28 @@
     border-bottom-color: rgb(var(--color-surface-700));
   }
 
+  .account-link {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    text-decoration: none;
+    flex: 1;
+  }
+
+  .account-link:hover .account-id {
+    color: #3b82f6;
+  }
+
+  :global([data-mode="dark"]) .account-link:hover .account-id {
+    color: rgb(var(--color-primary-400));
+  }
+
   .account-id {
     font-size: 0.8rem;
     font-family: monospace;
     color: #111827;
     font-weight: 500;
+    transition: color 0.2s;
   }
 
   :global([data-mode="dark"]) .account-id {