From 7b660769ef268e114e7994bb4561bc0d6da80099 Mon Sep 17 00:00:00 2001
From: eastagiletracker <310448263+eastagiletracker@users.noreply.github.com>
Date: Thu, 13 Aug 2026 15:25:02 +0700
Subject: [PATCH] fix(accounts): keep the sidebar on the accounts page

The accounts page rendered only its content with no NavBar, so navigating
to /accounts dropped the sidebar and left the user with no way to move to
another page. Wrap the content in the same flex + NavBar + main layout every
other signed-in page uses, so the sidebar persists. Add a regression test
asserting the accounts page renders the nav landmark.
---
 apps/frontend/src/app/accounts/page.tsx       | 34 +++++++++++--------
 .../test/components/AccountsPage.test.tsx     | 10 ++++++
 2 files changed, 30 insertions(+), 14 deletions(-)

diff --git a/apps/frontend/src/app/accounts/page.tsx b/apps/frontend/src/app/accounts/page.tsx
index 010a80d3..330a9252 100644
--- a/apps/frontend/src/app/accounts/page.tsx
+++ b/apps/frontend/src/app/accounts/page.tsx
@@ -1,25 +1,31 @@
 'use client';
 
 import React from 'react';
+import NavBar from '../components/Navbar';
 import StaffCard from '../components/StaffCard';
 import { facilitationTeam, teamMembers } from './mockUsers';
 
 export default function AccountsPage() {
     return (
-        <div className="!p-6">
-            <h1 className="![font-family:var(--font-heading)] !text-[length:var(--font-size-heading-1)] !font-semibold">Accounts</h1>
-            <h3 className="![font-family:var(--font-heading)] !text-[length:var(--font-size-heading-3)] !font-semibold">Core BRANCH Facilitation Team</h3>
-            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 !pt-3 !pb-7">
-                {facilitationTeam.map(user => (
-                    <StaffCard key={user.user_id} name={user.name} email={user.email} />
-                ))}
-            </div>
-            <h3 className="![font-family:var(--font-heading)] !text-[length:var(--font-size-heading-3)] !font-semibold">BRANCH Team Members</h3>
-            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 !pt-3 !pb-7">
-                {teamMembers.map(user => (
-                    <StaffCard key={user.user_id} name={user.name} email={user.email} />
-                ))}
-            </div>
+        <div style={{ display: 'flex', minHeight: '100vh' }}>
+            <NavBar />
+            <main style={{ flex: 1, backgroundColor: '#f9fafb' }}>
+                <div className="!p-6">
+                    <h1 className="![font-family:var(--font-heading)] !text-[length:var(--font-size-heading-1)] !font-semibold">Accounts</h1>
+                    <h3 className="![font-family:var(--font-heading)] !text-[length:var(--font-size-heading-3)] !font-semibold">Core BRANCH Facilitation Team</h3>
+                    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 !pt-3 !pb-7">
+                        {facilitationTeam.map(user => (
+                            <StaffCard key={user.user_id} name={user.name} email={user.email} />
+                        ))}
+                    </div>
+                    <h3 className="![font-family:var(--font-heading)] !text-[length:var(--font-size-heading-3)] !font-semibold">BRANCH Team Members</h3>
+                    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 !pt-3 !pb-7">
+                        {teamMembers.map(user => (
+                            <StaffCard key={user.user_id} name={user.name} email={user.email} />
+                        ))}
+                    </div>
+                </div>
+            </main>
         </div>
     );
 }
\ No newline at end of file
diff --git a/apps/frontend/test/components/AccountsPage.test.tsx b/apps/frontend/test/components/AccountsPage.test.tsx
index 2273c25f..9a4ec0be 100644
--- a/apps/frontend/test/components/AccountsPage.test.tsx
+++ b/apps/frontend/test/components/AccountsPage.test.tsx
@@ -33,4 +33,14 @@ describe('AccountsPage', () => {
             expect(cards?.length).toBeGreaterThan(0);
         }
     });
+
+    // Regression guard for #300: the accounts page is a signed-in app route, so
+    // it must keep the sidebar the way every other app page does. It used to
+    // render only its content with no NavBar, which stranded the user with no
+    // way to navigate away.
+    it('renders the sidebar so it persists on the accounts page', () => {
+        render(<AccountsPage />);
+        expect(screen.getByRole('navigation')).toBeInTheDocument();
+        expect(screen.getAllByText('BRANCH').length).toBeGreaterThan(0);
+    });
 });
\ No newline at end of file