Section 6 COmpleted

frontend/src/pages/account/AccountSettingsPage.tsx

@@ -1,10 +1,11 @@
 /**
  * Account Settings Page - Consolidated Settings
  * Tabs: Account, Profile, Team
- * Consistent with system page structure (like Plans & Usage pages)
+ * Tab selection driven by URL path for sidebar navigation
  */
 
 import { useState, useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
 import { 
   Save, Loader2, Settings, User, Users, UserPlus, Shield, Lock, X
 } from 'lucide-react';
@@ -28,10 +29,19 @@ import {
 
 type TabType = 'account' | 'profile' | 'team';
 
+// Map URL paths to tab types
+function getTabFromPath(pathname: string): TabType {
+  if (pathname.includes('/profile')) return 'profile';
+  if (pathname.includes('/team')) return 'team';
+  return 'account';
+}
+
 export default function AccountSettingsPage() {
   const toast = useToast();
+  const location = useLocation();
   const { user, refreshUser } = useAuthStore();
-  const [activeTab, setActiveTab] = useState<TabType>('account');
+  // Derive active tab from URL path
+  const activeTab = getTabFromPath(location.pathname);
   const [loading, setLoading] = useState(true);
   const [saving, setSaving] = useState(false);
   const [error, setError] = useState<string>('');
@@ -271,37 +281,29 @@ export default function AccountSettingsPage() {
     <div className="p-6">
       <PageMeta title="Account Settings" description="Manage your account, profile, and team" />
       
-      {/* Page Header */}
+      {/* Page Header with Breadcrumb */}
       <div className="mb-6">
-        <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Account Settings</h1>
+        <div className="flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400 mb-2">
+          <span>Account Settings</span>
+          <span>›</span>
+          <span className="text-gray-900 dark:text-white font-medium">
+            {activeTab === 'account' && 'Account'}
+            {activeTab === 'profile' && 'Profile'}
+            {activeTab === 'team' && 'Team'}
+          </span>
+        </div>
+        <h1 className="text-2xl font-bold text-gray-900 dark:text-white">
+          {activeTab === 'account' && 'Account Information'}
+          {activeTab === 'profile' && 'Profile Settings'}
+          {activeTab === 'team' && 'Team Management'}
+        </h1>
         <p className="text-gray-600 dark:text-gray-400 mt-1">
-          Manage your account information, profile settings, and team members
+          {activeTab === 'account' && 'Manage your organization and billing information'}
+          {activeTab === 'profile' && 'Update your personal information and preferences'}
+          {activeTab === 'team' && 'Invite and manage team members'}
         </p>
       </div>
 
-      {/* Tabs */}
-      <div className="mb-6 border-b border-gray-200 dark:border-gray-700">
-        <nav className="-mb-px flex space-x-8">
-          {tabs.map((tab) => (
-            <button
-              type="button"
-              key={tab.id}
-              onClick={() => setActiveTab(tab.id)}
-              className={`
-                flex items-center gap-2 py-4 px-1 border-b-2 font-medium text-sm
-                ${activeTab === tab.id
-                  ? 'border-[var(--color-brand-500)] text-[var(--color-brand-600)] dark:text-[var(--color-brand-400)]'
-                  : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300'
-                }
-              `}
-            >
-              {tab.icon}
-              {tab.label}
-            </button>
-          ))}
-        </nav>
-      </div>
-
       {/* Tab Content */}
       <div className="mt-6">
         {/* Account Tab */}