Section 6 COmpleted

frontend/src/pages/account/UsageAnalyticsPage.tsx

@@ -1,9 +1,11 @@
 /**
  * Usage & Analytics Page - Refactored
  * Organized tabs: Plan Limits & Usage, Credit Activity, API Usage
+ * Tab selection driven by URL path for sidebar navigation
  */
 
 import { useState, useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
 import { TrendingUp, Activity, BarChart3, Zap, Calendar } from 'lucide-react';
 import PageMeta from '../../components/common/PageMeta';
 import { useToast } from '../../components/ui/toast/ToastContainer';
@@ -16,9 +18,18 @@ import Button from '../../components/ui/button/Button';
 
 type TabType = 'limits' | 'activity' | 'api';
 
+// Map URL paths to tab types
+function getTabFromPath(pathname: string): TabType {
+  if (pathname.includes('/credits')) return 'activity';
+  if (pathname.includes('/activity')) return 'api';
+  return 'limits';
+}
+
 export default function UsageAnalyticsPage() {
   const toast = useToast();
-  const [activeTab, setActiveTab] = useState<TabType>('limits');
+  const location = useLocation();
+  // Derive active tab from URL path
+  const activeTab = getTabFromPath(location.pathname);
   const [analytics, setAnalytics] = useState<UsageAnalytics | null>(null);
   const [creditBalance, setCreditBalance] = useState<CreditBalance | null>(null);
   const [loading, setLoading] = useState(true);
@@ -58,11 +69,11 @@ export default function UsageAnalyticsPage() {
     );
   }
 
-  const tabs = [
-    { id: 'limits' as TabType, label: 'Your Limits & Usage (What you\'re using)', icon: <BarChart3 className="w-4 h-4" /> },
-    { id: 'activity' as TabType, label: 'Credit History (Where credits go)', icon: <TrendingUp className="w-4 h-4" /> },
-    { id: 'api' as TabType, label: 'API Activity (Technical requests)', icon: <Activity className="w-4 h-4" /> },
-  ];
+  const tabTitles: Record<TabType, string> = {
+    limits: 'Limits & Usage',
+    activity: 'Credit History',
+    api: 'Activity Log',
+  };
 
   return (
     <div className="p-6">
@@ -70,9 +81,14 @@ export default function UsageAnalyticsPage() {
       
       {/* Page Header */}
       <div className="mb-6">
-        <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Your Usage</h1>
+        <div className="text-sm text-gray-500 dark:text-gray-400 mb-1">
+          Usage & Analytics / {tabTitles[activeTab]}
+        </div>
+        <h1 className="text-2xl font-bold text-gray-900 dark:text-white">{tabTitles[activeTab]}</h1>
         <p className="text-gray-600 dark:text-gray-400 mt-1">
-          See how much you're using - Track your credits, content limits, and API activity
+          {activeTab === 'limits' && 'See how much you\'re using - Track your credits and content limits'}
+          {activeTab === 'activity' && 'See where your credits go - Track credit usage history'}
+          {activeTab === 'api' && 'Technical requests - Monitor API activity and usage'}
         </p>
       </div>
 
@@ -142,32 +158,9 @@ export default function UsageAnalyticsPage() {
         </div>
       )}
 
-      {/* Tabs and Period Selector */}
-      <div className="mb-6 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
-        {/* Tabs */}
-        <div className="border-b border-gray-200 dark:border-gray-700 w-full sm:w-auto">
-          <nav className="-mb-px flex space-x-8 overflow-x-auto">
-            {tabs.map((tab) => (
-              <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 whitespace-nowrap
-                  ${activeTab === tab.id
-                    ? 'border-brand-500 text-brand-600 dark:text-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>
-
-        {/* Period Selector (only show on activity and api tabs) */}
-        {(activeTab === 'activity' || activeTab === 'api') && (
+      {/* Period Selector (only show on activity and api tabs) */}
+      {(activeTab === 'activity' || activeTab === 'api') && (
+        <div className="mb-6 flex justify-end">
           <div className="flex gap-2">
             {[7, 30, 90].map((value) => {
               const isActive = period === value;
@@ -184,8 +177,8 @@ export default function UsageAnalyticsPage() {
               );
             })}
           </div>
-        )}
-      </div>
+        </div>
+      )}
 
       {/* Tab Content */}
       <div className="mt-6">