From e60e7c96e7ce47fba4129c67c62353e09da4de8f Mon Sep 17 00:00:00 2001
From: Vadym Samoilenko <vadymsamoilenko@oliver.agency>
Date: Fri, 1 May 2026 17:34:20 +0100
Subject: [PATCH] fix(settings): use organization_id (not slug) in
 /org/:orgSlug/settings URL

The backend /organizations/{org_id}/members endpoint queries memberships
by organization_id (_id hex string), but the sidebar was building the URL
from organization_slug (e.g. "3m-test"), causing 403 on every Settings page
load ("Failed to load members.").

- Sidebar: derive currentOrgId from organization_id; option values = org ID
- OrgSettingsLayout: alias orgSlug param as orgId for clarity

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/components/Layout/Sidebar.tsx    | 20 ++++++++++---------
 frontend/src/routes/org/OrgSettingsLayout.tsx |  4 ++--
 2 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/Layout/Sidebar.tsx b/frontend/src/components/Layout/Sidebar.tsx
index 4570dda..de8ecd7 100644
--- a/frontend/src/components/Layout/Sidebar.tsx
+++ b/frontend/src/components/Layout/Sidebar.tsx
@@ -42,10 +42,12 @@ export function Sidebar({ onMobileClose }: SidebarProps) {
   const failuresBadge = isAdminOrProduction ? (failuresData?.total || 0) : 0;
   const briefsBadge = allBriefs.filter(b => b.status === 'submitted').length;
 
-  // Determine current org from route params or first membership
-  const currentOrgSlug =
+  // Determine current org ID from route params or first membership.
+  // The route param :orgSlug actually carries the organization _id (hex string),
+  // not the human-readable slug — the backend queries memberships by organization_id.
+  const currentOrgId =
     params.orgSlug ||
-    (memberships.length === 1 ? memberships[0].organization_slug : null);
+    (memberships.length === 1 ? memberships[0].organization_id : null);
 
   const sidebarItems: SidebarItem[] = [
     {
@@ -160,15 +162,15 @@ export function Sidebar({ onMobileClose }: SidebarProps) {
             </div>
           ) : (
             <select
-              value={currentOrgSlug || ''}
+              value={currentOrgId || ''}
               onChange={(e) => {
-                const slug = e.target.value;
-                window.location.href = `/video-accessibility/org/${slug}/settings/members`;
+                const orgId = e.target.value;
+                window.location.href = `/video-accessibility/org/${orgId}/settings/members`;
               }}
               className="w-full text-xs border-0 bg-transparent text-gray-700 font-medium focus:outline-none cursor-pointer"
             >
               {memberships.map(m => (
-                <option key={m.organization_id} value={m.organization_slug}>
+                <option key={m.organization_id} value={m.organization_id}>
                   {m.organization_name}
                 </option>
               ))}
@@ -203,9 +205,9 @@ export function Sidebar({ onMobileClose }: SidebarProps) {
         ))}
 
         {/* Org Settings link */}
-        {currentOrgSlug && (
+        {currentOrgId && (
           <Link
-            to={`/org/${currentOrgSlug}/settings/members`}
+            to={`/org/${currentOrgId}/settings/members`}
             onClick={onMobileClose}
             className={`flex items-center px-3 py-2 rounded-lg text-sm font-medium transition-all duration-150 ${
               location.pathname.includes('/settings')
diff --git a/frontend/src/routes/org/OrgSettingsLayout.tsx b/frontend/src/routes/org/OrgSettingsLayout.tsx
index 22ead44..42af94c 100644
--- a/frontend/src/routes/org/OrgSettingsLayout.tsx
+++ b/frontend/src/routes/org/OrgSettingsLayout.tsx
@@ -8,7 +8,7 @@ const tabs = [
 ];
 
 export function OrgSettingsLayout() {
-  const { orgSlug } = useParams<{ orgSlug: string }>();
+  const { orgSlug: orgId } = useParams<{ orgSlug: string }>();
 
   return (
     <div className="max-w-5xl mx-auto px-4 py-8">
@@ -18,7 +18,7 @@ export function OrgSettingsLayout() {
         {tabs.map((tab) => (
           <NavLink
             key={tab.path}
-            to={`/org/${orgSlug}/settings/${tab.path}`}
+            to={`/org/${orgId}/settings/${tab.path}`}
             className={({ isActive }) =>
               `px-4 py-2 text-sm font-medium border-b-2 -mb-px transition-colors ${
                 isActive