Refactor Channel Manager sidebar

src/pages/dashboard/ChannelManager.tsx

@@ -1,4 +1,5 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { Button } from '@/components/ui/button';
@@ -41,6 +42,8 @@ import { AnalyticsTab } from '@/components/channel-manager/AnalyticsTab';
 import { useToast } from '@/hooks/use-toast';
 
 const ChannelManager = () => {
+  const location = useLocation();
+  const navigate = useNavigate();
   const { toast } = useToast();
   const {
     channels,
@@ -61,7 +64,23 @@ const ChannelManager = () => {
     clearError
   } = useChannelManager();
 
-  const [activeTab, setActiveTab] = useState('overview');
+  // Get active tab from URL or default to 'overview'
+  const queryParams = new URLSearchParams(location.search);
+  const urlTab = queryParams.get('tab') || 'overview';
+  const [activeTab, setActiveTab] = useState(urlTab);
+
+  // Update active tab when URL changes
+  useEffect(() => {
+    const newTab = queryParams.get('tab') || 'overview';
+    setActiveTab(newTab);
+  }, [location.search]);
+
+  // Update URL when tab changes
+  const handleTabChange = (newTab: string) => {
+    setActiveTab(newTab);
+    navigate(`/dashboard/channel-manager?tab=${newTab}`);
+  };
+
   const [searchTerm, setSearchTerm] = useState('');
   const [filterType, setFilterType] = useState('all');
   const [showConnectModal, setShowConnectModal] = useState(false);
@@ -693,7 +712,7 @@ const ChannelManager = () => {
         </p>
       </div>
 
-      <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-6">
+      <Tabs value={activeTab} onValueChange={handleTabChange} className="space-y-6">
         <TabsList className="grid w-full grid-cols-5">
           <TabsTrigger value="overview">
             <TrendingUp className="w-4 h-4 mr-2" />