diff --git a/src/components/CurrencySelector.tsx b/src/components/CurrencySelector.tsx new file mode 100644 index 0000000..9db238c --- /dev/null +++ b/src/components/CurrencySelector.tsx @@ -0,0 +1,39 @@ +import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; +import { Currency, useCurrency } from '@/contexts/CurrencyContext'; +import { DollarSign } from 'lucide-react'; + +const currencies: { value: Currency; label: string; flag: string }[] = [ + { value: 'USD', label: 'USD - Dólar', flag: '🇺🇸' }, + { value: 'EUR', label: 'EUR - Euro', flag: '🇪🇺' }, + { value: 'GBP', label: 'GBP - Libra', flag: '🇬🇧' }, + { value: 'MXN', label: 'MXN - Peso Mexicano', flag: '🇲🇽' }, + { value: 'COP', label: 'COP - Peso Colombiano', flag: '🇨🇴' }, + { value: 'ARS', label: 'ARS - Peso Argentino', flag: '🇦🇷' } +]; + +const CurrencySelector = () => { + const { currency, setCurrency } = useCurrency(); + + return ( +
+ + +
+ ); +}; + +export default CurrencySelector; diff --git a/src/components/DashboardLayout.tsx b/src/components/DashboardLayout.tsx index 8b14f96..656117f 100644 --- a/src/components/DashboardLayout.tsx +++ b/src/components/DashboardLayout.tsx @@ -3,6 +3,7 @@ import { Outlet, Link, useLocation } from 'react-router-dom'; import { useAuth } from '@/contexts/AuthContext'; import { useLanguage } from '@/contexts/LanguageContext'; import DashboardStyles from '@/components/layouts/DashboardStyles'; +import CurrencySelector from '@/components/CurrencySelector'; import { Home, Plus, @@ -67,8 +68,33 @@ const DashboardLayout = ({ children }: { children: React.ReactNode }) => { const menuItems = [ { icon: Home, label: 'Dashboard', path: '/dashboard' }, - { icon: Settings, label: 'Admin Panel', path: '/dashboard/admin', hasSubmenu: true }, - { icon: Plus, label: 'Channel Manager', path: '/dashboard/channel-manager', hasSubmenu: true }, + { + icon: Settings, + label: 'Admin Panel', + path: '/dashboard/admin', + subItems: [ + { icon: BarChart3, label: 'Resumen General', path: '/dashboard/admin?tab=overview' }, + { icon: Users, label: 'Usuarios', path: '/dashboard/admin?tab=users' }, + { icon: MapPin, label: 'Proveedores', path: '/dashboard/admin?tab=services' }, + { icon: DollarSign, label: 'Financiero', path: '/dashboard/admin?tab=financial' }, + { icon: FileText, label: 'Contenido', path: '/dashboard/admin?tab=content' }, + { icon: AlertTriangle, label: 'Emergencias', path: '/dashboard/admin?tab=emergency' }, + { icon: MessageSquare, label: 'Soporte', path: '/dashboard/admin?tab=support' }, + { icon: Settings, label: 'Configuración', path: '/dashboard/admin?tab=config' } + ] + }, + { + icon: Plus, + label: 'Channel Manager', + path: '/dashboard/channel-manager', + subItems: [ + { icon: BarChart3, label: 'Resumen', path: '/dashboard/channel-manager?tab=overview' }, + { icon: Zap, label: 'Canales', path: '/dashboard/channel-manager?tab=channels' }, + { icon: Home, label: 'Propiedades', path: '/dashboard/channel-manager?tab=listings' }, + { icon: BookOpen, label: 'Reservas', path: '/dashboard/channel-manager?tab=reservations' }, + { icon: BarChart3, label: 'Analytics', path: '/dashboard/channel-manager?tab=analytics' } + ] + }, { icon: Hotel, label: 'Hotel Management', @@ -101,50 +127,6 @@ 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' }, - { icon: MapPin, label: 'Proveedores de Servicios', tab: 'services' }, - { icon: DollarSign, label: 'Gestión Financiera', tab: 'financial' }, - { - icon: FileText, - label: 'Contenido Turístico', - tab: 'content', - subItems: [ - { icon: MapPin, label: 'Destinos', tab: 'content-destinations' }, - { icon: Star, label: 'Lugares', tab: 'content-places' }, - { icon: Users, label: 'Guías', tab: 'content-guides' }, - { icon: Car, label: 'Taxis', tab: 'content-taxis' }, - { - icon: Navigation, - label: 'Geolocalización', - tab: 'content-geolocation', - subItems: [ - { icon: MapPin, label: 'Geofences', tab: 'geofences' }, - { icon: BarChart3, label: 'Analíticas', tab: 'analytics' }, - { icon: Target, label: 'Pruebas', tab: 'testing' }, - { icon: AlertTriangle, label: 'Emergencias', tab: 'emergency-geo' }, - { icon: Navigation, label: 'Navegación', tab: 'navigation' } - ] - }, - { icon: Megaphone, label: 'Promocional', tab: 'content-promotional' }, - { icon: Zap, label: 'Guías IA', tab: 'content-ai-guides' }, - { icon: Eye, label: 'Realidad AR', tab: 'content-ar' } - ] - }, - { icon: AlertTriangle, label: 'Emergencias', tab: 'emergency' }, - { icon: MessageSquare, label: 'Soporte', tab: 'support' }, - ...(user?.role === 'super_admin' ? [{ icon: Settings, label: 'Configuración', tab: 'config' }] : []), - ]; - const listingItems = [ { icon: List, label: 'My Listing', path: '/dashboard/my-listings', hasSubmenu: true }, { icon: Star, label: 'Reviews', path: '/dashboard/reviews' }, @@ -201,10 +183,8 @@ const DashboardLayout = ({ children }: { children: React.ReactNode }) => { {menuItems.map((item) => { const Icon = item.icon; const isActive = location.pathname === item.path || location.pathname.startsWith(item.path + '/'); - const isAdminPanel = item.path === '/dashboard/admin'; - const isChannelManager = item.path === '/dashboard/channel-manager'; const hasDirectSubItems = item.subItems && item.subItems.length > 0; - const isExpanded = expandedItems[item.path] || (hasDirectSubItems && item.subItems.some(sub => location.pathname === sub.path)); + const isExpanded = expandedItems[item.path] || (hasDirectSubItems && item.subItems.some(sub => location.pathname === sub.path || location.pathname.startsWith(sub.path + '/'))); return (
@@ -248,12 +228,12 @@ const DashboardLayout = ({ children }: { children: React.ReactNode }) => { )}
- {/* Direct sub-items (Hotel & Restaurant) */} + {/* Sub-items */} {!sidebarCollapsed && hasDirectSubItems && isExpanded && (
{item.subItems.map((sub) => { const SubIcon = sub.icon; - const activeSubPath = location.pathname === sub.path; + const activeSubPath = location.pathname === sub.path || location.pathname.startsWith(sub.path); return ( { to={sub.path} className={`flex items-center space-x-2 px-3 py-2 rounded-md text-sm ${activeSubPath ? 'bg-orange-50 text-orange-800' : 'text-gray-600 hover:text-orange-600 hover:bg-gray-50'}`} > - + {sub.label} ); @@ -269,123 +249,6 @@ const DashboardLayout = ({ children }: { children: React.ReactNode }) => {
)} - {/* Channel Manager submenus */} - {!sidebarCollapsed && isChannelManager && location.pathname.startsWith('/dashboard/channel-manager') && ( -
- {channelManagerSubmenu.map((sub) => { - const SubIcon = sub.icon; - const activeSub = currentTab === sub.tab; - - return ( - - - {sub.label} - - ); - })} -
- )} - - {/* Admin submenus */} - {!sidebarCollapsed && isAdminPanel && location.pathname.startsWith('/dashboard/admin') && ( -
- {adminSubmenu.map((sub) => { - const SubIcon = sub.icon; - const activeSub = currentTab === sub.tab; - const hasSubItems = sub.subItems && sub.subItems.length > 0; - const isExpanded = expandedItems[sub.tab] || (hasSubItems && sub.subItems.some(item => currentTab === item.tab || (item.subItems && item.subItems.some(subItem => currentTab === subItem.tab)))); - - return ( -
-
- - - {sub.label} - - {hasSubItems && ( - - )} -
- - {/* Sub-submenus */} - {hasSubItems && isExpanded && ( -
- {sub.subItems.map((subItem) => { - const SubSubIcon = subItem.icon; - const activeSubSub = currentTab === subItem.tab; - const hasSubSubItems = subItem.subItems && subItem.subItems.length > 0; - const isSubExpanded = expandedItems[subItem.tab] || (hasSubSubItems && subItem.subItems.some(item => currentTab === item.tab)); - - return ( -
-
- - - {subItem.label} - - {hasSubSubItems && ( - - )} -
- - {/* Sub-sub-submenus */} - {hasSubSubItems && isSubExpanded && ( -
- {subItem.subItems.map((subSubItem) => { - const SubSubSubIcon = subSubItem.icon; - const activeSubSubSub = currentTab === subSubItem.tab; - - return ( - - - {subSubItem.label} - - ); - })} -
- )} -
- ); - })} -
- )} -
- ); - })} -
- )} ); })} @@ -524,6 +387,9 @@ const DashboardLayout = ({ children }: { children: React.ReactNode }) => { {/* Right Side */}
+ {/* Currency Selector */} + + {/* Refresh (Admin) */}