From 2ba611cc337548940df7b8cfcc7b57bb62f029cb Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Fri, 10 Oct 2025 22:09:50 +0000
Subject: [PATCH] Refactor Channel Manager sidebar

---
 src/components/DashboardLayout.tsx     | 30 ++++++++++++++++++++++++++
 src/pages/dashboard/ChannelManager.tsx | 25 ++++++++++++++++++---
 2 files changed, 52 insertions(+), 3 deletions(-)

diff --git a/src/components/DashboardLayout.tsx b/src/components/DashboardLayout.tsx
index 2fc4935..2a1bbbe 100644
--- a/src/components/DashboardLayout.tsx
+++ b/src/components/DashboardLayout.tsx
@@ -63,6 +63,14 @@ const DashboardLayout = ({ children }: { children: React.ReactNode }) => {
     { icon: MessageSquare, label: 'Message', path: '/dashboard/messages', badge: '2' },
   ];
 
+  const channelManagerSubmenu = [
+    { icon: BarChart3, label: 'Resumen', tab: 'overview' },
+    { icon: Zap, label: 'Canales', tab: 'channels' },
+    { icon: Home, label: 'Propiedades', tab: 'listings' },
+    { icon: BookOpen, label: 'Reservas', tab: 'reservations' },
+    { icon: BarChart3, label: 'Analytics', tab: 'analytics' },
+  ];
+
   const adminSubmenu = [
     { icon: BarChart3, label: 'Resumen General', tab: 'overview' },
     { icon: Users, label: 'Gestión de Usuarios', tab: 'users' },
@@ -156,6 +164,7 @@ const DashboardLayout = ({ children }: { children: React.ReactNode }) => {
                 const Icon = item.icon;
                 const isActive = location.pathname === item.path;
                 const isAdminPanel = item.path === '/dashboard/admin';
+                const isChannelManager = item.path === '/dashboard/channel-manager';
                 
                 return (
                   <div key={item.path}>
@@ -185,6 +194,27 @@ const DashboardLayout = ({ children }: { children: React.ReactNode }) => {
                       )}
                     </Link>
 
+                    {/* Channel Manager submenus */}
+                    {!sidebarCollapsed && isChannelManager && location.pathname.startsWith('/dashboard/channel-manager') && (
+                      <div className="mt-1 ml-10 space-y-1">
+                        {channelManagerSubmenu.map((sub) => {
+                          const SubIcon = sub.icon;
+                          const activeSub = currentTab === sub.tab;
+                          
+                          return (
+                            <Link 
+                              key={sub.tab}
+                              to={`/dashboard/channel-manager?tab=${sub.tab}`}
+                              className={`flex items-center space-x-2 px-3 py-2 rounded-md text-sm ${activeSub ? 'bg-orange-50 text-orange-800' : 'text-gray-600 hover:text-orange-600 hover:bg-gray-50'}`}
+                            >
+                              <SubIcon className="w-4 h-4" />
+                              <span>{sub.label}</span>
+                            </Link>
+                          );
+                        })}
+                      </div>
+                    )}
+
                     {/* Admin submenus */}
                     {!sidebarCollapsed && isAdminPanel && location.pathname.startsWith('/dashboard/admin') && (
                       <div className="mt-1 ml-10 space-y-1">
diff --git a/src/pages/dashboard/ChannelManager.tsx b/src/pages/dashboard/ChannelManager.tsx
index 2c730d6..9aa5efc 100644
--- a/src/pages/dashboard/ChannelManager.tsx
+++ b/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" />