Refactor sidebar with Shadcn
This commit is contained in:
gpt-engineer-app[bot]
@@ -1,5 +1,4 @@
|
||||
import { useState } from "react";
|
||||
import { Link, useLocation } from "react-router-dom";
|
||||
import { Link } from "react-router-dom";
|
||||
import { useAuth } from "@/contexts/AuthContext";
|
||||
import {
|
||||
Sidebar,
|
||||
@@ -10,312 +9,16 @@ import {
|
||||
SidebarMenu,
|
||||
SidebarMenuItem,
|
||||
SidebarMenuButton,
|
||||
SidebarMenuSub,
|
||||
SidebarMenuSubItem,
|
||||
SidebarMenuSubButton,
|
||||
useSidebar,
|
||||
} from "@/components/ui/sidebar";
|
||||
import {
|
||||
Collapsible,
|
||||
CollapsibleContent,
|
||||
CollapsibleTrigger,
|
||||
} from "@/components/ui/collapsible";
|
||||
import {
|
||||
Home,
|
||||
Plus,
|
||||
Wallet,
|
||||
List,
|
||||
MessageSquare,
|
||||
Star,
|
||||
BookOpen,
|
||||
Heart,
|
||||
FileText,
|
||||
User,
|
||||
Users,
|
||||
Settings,
|
||||
LogOut,
|
||||
CreditCard,
|
||||
BarChart3,
|
||||
MapPin,
|
||||
DollarSign,
|
||||
AlertTriangle,
|
||||
Car,
|
||||
Target,
|
||||
Zap,
|
||||
Eye,
|
||||
Megaphone,
|
||||
ChevronDown,
|
||||
ChevronRight,
|
||||
Hotel,
|
||||
UtensilsCrossed,
|
||||
Brain,
|
||||
DoorOpen,
|
||||
BellRing,
|
||||
Key,
|
||||
Receipt,
|
||||
ChefHat,
|
||||
Grid3x3,
|
||||
Package,
|
||||
Globe,
|
||||
Compass,
|
||||
Map,
|
||||
Shield,
|
||||
Radio,
|
||||
Sparkles,
|
||||
Leaf,
|
||||
Store,
|
||||
Navigation,
|
||||
QrCode,
|
||||
} from "lucide-react";
|
||||
import { LogOut } from "lucide-react";
|
||||
import { menuGroups } from "@/config/sidebar";
|
||||
import { SidebarMenuRenderer } from "@/components/sidebar/SidebarMenuRenderer";
|
||||
|
||||
export function AppSidebar() {
|
||||
const { open, openMobile, isMobile } = useSidebar();
|
||||
const collapsed = !open && !isMobile;
|
||||
const location = useLocation();
|
||||
const { logout } = useAuth();
|
||||
const [expandedItems, setExpandedItems] = useState<Record<string, boolean>>({});
|
||||
|
||||
const toggleExpanded = (itemPath: string) => {
|
||||
setExpandedItems((prev) => ({
|
||||
...prev,
|
||||
[itemPath]: !prev[itemPath],
|
||||
}));
|
||||
};
|
||||
|
||||
const menuItems = [
|
||||
{ icon: Home, label: "Dashboard", path: "/dashboard" },
|
||||
{
|
||||
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",
|
||||
subItems: [
|
||||
{ icon: Globe, label: "Destinos", path: "/dashboard/admin?tab=content-destinations" },
|
||||
{ icon: MapPin, label: "Lugares", path: "/dashboard/admin?tab=content-places" },
|
||||
{ icon: BookOpen, label: "Guías", path: "/dashboard/admin?tab=content-guides" },
|
||||
{ icon: Car, label: "Taxis", path: "/dashboard/admin?tab=content-taxis" },
|
||||
{ icon: Navigation, label: "Geolocalización", path: "/dashboard/admin?tab=content-geolocation" },
|
||||
{ icon: Megaphone, label: "Promocional", path: "/dashboard/admin?tab=content-promotional" },
|
||||
{ icon: Sparkles, label: "AI Guías", path: "/dashboard/admin?tab=content-ai-guides" },
|
||||
{ icon: Eye, label: "AR Content", path: "/dashboard/admin?tab=content-ar" },
|
||||
],
|
||||
},
|
||||
{
|
||||
icon: Map,
|
||||
label: "Geolocalización",
|
||||
path: "/dashboard/admin?tab=geofences",
|
||||
subItems: [
|
||||
{ icon: Target, label: "Geofences", path: "/dashboard/admin?tab=geofences" },
|
||||
{ icon: BarChart3, label: "Analytics", path: "/dashboard/admin?tab=analytics" },
|
||||
{ icon: Zap, label: "Testing", path: "/dashboard/admin?tab=testing" },
|
||||
{ icon: Shield, label: "Emergencia Geo", path: "/dashboard/admin?tab=emergency-geo" },
|
||||
{ icon: Compass, label: "Navegación", path: "/dashboard/admin?tab=navigation" },
|
||||
],
|
||||
},
|
||||
{ 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",
|
||||
path: "/dashboard/hotel",
|
||||
subItems: [
|
||||
{ icon: Home, label: "Habitaciones", path: "/dashboard/hotel/rooms" },
|
||||
{ icon: DoorOpen, label: "Check-in", path: "/dashboard/hotel/checkin" },
|
||||
{ icon: BellRing, label: "Room Service", path: "/dashboard/hotel/room-service" },
|
||||
{ icon: Key, label: "Acceso", path: "/dashboard/hotel/keyless" },
|
||||
{ icon: Users, label: "Personal", path: "/dashboard/hotel/staff" },
|
||||
],
|
||||
},
|
||||
{
|
||||
icon: UtensilsCrossed,
|
||||
label: "Restaurant POS",
|
||||
path: "/dashboard/restaurant",
|
||||
subItems: [
|
||||
{ icon: CreditCard, label: "POS Terminal", path: "/dashboard/restaurant/pos" },
|
||||
{ icon: Receipt, label: "Pedidos", path: "/dashboard/restaurant/orders" },
|
||||
{ icon: ChefHat, label: "Cocina", path: "/dashboard/restaurant/kitchen" },
|
||||
{ icon: Receipt, label: "Cuentas", path: "/dashboard/restaurant/bills" },
|
||||
{ icon: Grid3x3, label: "Mesas", path: "/dashboard/restaurant/tables" },
|
||||
{ icon: UtensilsCrossed, label: "Menú", path: "/dashboard/restaurant/menu" },
|
||||
{ icon: Package, label: "Inventario", path: "/dashboard/restaurant/inventory" },
|
||||
{ icon: Users, label: "Personal", path: "/dashboard/restaurant/staff" },
|
||||
],
|
||||
},
|
||||
{ icon: Brain, label: "Personalization", path: "/dashboard/personalization" },
|
||||
{ icon: Shield, label: "Security", path: "/dashboard/security" },
|
||||
{ icon: Car, label: "Vehicle Management", path: "/dashboard/vehicle-management" },
|
||||
{ icon: Leaf, label: "Sustainability", path: "/dashboard/sustainability" },
|
||||
{ icon: Store, label: "Comercios", path: "/dashboard/establishments" },
|
||||
{ icon: Wallet, label: "Wallet", path: "/dashboard/wallet" },
|
||||
{ icon: MessageSquare, label: "Message", path: "/dashboard/messages", badge: "2" },
|
||||
];
|
||||
|
||||
const listingItems = [
|
||||
{ icon: List, label: "My Listing", path: "/dashboard/my-listings" },
|
||||
{ icon: Star, label: "Reviews", path: "/dashboard/reviews" },
|
||||
{ icon: BookOpen, label: "Bookings", path: "/dashboard/bookings" },
|
||||
{ icon: Heart, label: "Bookmark", path: "/dashboard/bookmarks" },
|
||||
{ icon: FileText, label: "Invoice", path: "/dashboard/invoices" },
|
||||
];
|
||||
|
||||
const accountItems = [
|
||||
{ icon: User, label: "Edit Profile", path: "/dashboard/profile" },
|
||||
{ icon: CreditCard, label: "Wallet", path: "/dashboard/wallet" },
|
||||
{ icon: Settings, label: "Setting", path: "/dashboard/settings" },
|
||||
];
|
||||
|
||||
const isActive = (path: string) => {
|
||||
if (path.includes("?tab=")) {
|
||||
const [basePath, tabQuery] = path.split("?tab=");
|
||||
return (
|
||||
location.pathname === basePath &&
|
||||
location.search.includes(tabQuery)
|
||||
);
|
||||
}
|
||||
return location.pathname === path || location.pathname.startsWith(path + "/");
|
||||
};
|
||||
|
||||
const hasActiveChild = (items: any[]) => {
|
||||
return items.some((item) => {
|
||||
if (isActive(item.path)) return true;
|
||||
if (item.subItems) return hasActiveChild(item.subItems);
|
||||
return false;
|
||||
});
|
||||
};
|
||||
|
||||
const renderMenuItem = (item: any, level = 0) => {
|
||||
const Icon = item.icon;
|
||||
const active = isActive(item.path);
|
||||
const hasSubItems = item.subItems && item.subItems.length > 0;
|
||||
const isExpanded = expandedItems[item.path] || hasActiveChild(item.subItems || []);
|
||||
|
||||
if (hasSubItems) {
|
||||
return (
|
||||
<Collapsible
|
||||
key={item.path}
|
||||
open={isExpanded}
|
||||
onOpenChange={() => toggleExpanded(item.path)}
|
||||
>
|
||||
<SidebarMenuItem>
|
||||
<CollapsibleTrigger asChild>
|
||||
<SidebarMenuButton
|
||||
className={`${
|
||||
active ? "bg-primary text-primary-foreground" : ""
|
||||
} ${collapsed && level === 0 ? "justify-center" : ""}`}
|
||||
>
|
||||
<Icon className="h-4 w-4" />
|
||||
{!collapsed && <span>{item.label}</span>}
|
||||
{!collapsed && (
|
||||
<ChevronRight
|
||||
className={`ml-auto h-4 w-4 transition-transform ${
|
||||
isExpanded ? "rotate-90" : ""
|
||||
}`}
|
||||
/>
|
||||
)}
|
||||
</SidebarMenuButton>
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent>
|
||||
<SidebarMenuSub>
|
||||
{item.subItems.map((subItem: any) =>
|
||||
renderSubMenuItem(subItem, level + 1)
|
||||
)}
|
||||
</SidebarMenuSub>
|
||||
</CollapsibleContent>
|
||||
</SidebarMenuItem>
|
||||
</Collapsible>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<SidebarMenuItem key={item.path}>
|
||||
<SidebarMenuButton asChild isActive={active}>
|
||||
<Link to={item.path} className={collapsed && level === 0 ? "justify-center" : ""}>
|
||||
<Icon className="h-4 w-4" />
|
||||
{!collapsed && <span>{item.label}</span>}
|
||||
{!collapsed && item.badge && (
|
||||
<span className="ml-auto bg-green-500 text-white text-xs px-2 py-0.5 rounded-full">
|
||||
{item.badge}
|
||||
</span>
|
||||
)}
|
||||
</Link>
|
||||
</SidebarMenuButton>
|
||||
</SidebarMenuItem>
|
||||
);
|
||||
};
|
||||
|
||||
const renderSubMenuItem = (item: any, level: number) => {
|
||||
const Icon = item.icon;
|
||||
const active = isActive(item.path);
|
||||
const hasSubItems = item.subItems && item.subItems.length > 0;
|
||||
const isExpanded = expandedItems[item.path] || hasActiveChild(item.subItems || []);
|
||||
|
||||
if (hasSubItems) {
|
||||
return (
|
||||
<Collapsible
|
||||
key={item.path}
|
||||
open={isExpanded}
|
||||
onOpenChange={() => toggleExpanded(item.path)}
|
||||
>
|
||||
<SidebarMenuSubItem>
|
||||
<CollapsibleTrigger asChild>
|
||||
<SidebarMenuSubButton
|
||||
className={active ? "bg-primary/10 text-primary" : ""}
|
||||
>
|
||||
<Icon className="h-4 w-4" />
|
||||
<span>{item.label}</span>
|
||||
<ChevronRight
|
||||
className={`ml-auto h-4 w-4 transition-transform ${
|
||||
isExpanded ? "rotate-90" : ""
|
||||
}`}
|
||||
/>
|
||||
</SidebarMenuSubButton>
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent>
|
||||
<SidebarMenuSub>
|
||||
{item.subItems.map((subItem: any) =>
|
||||
renderSubMenuItem(subItem, level + 1)
|
||||
)}
|
||||
</SidebarMenuSub>
|
||||
</CollapsibleContent>
|
||||
</SidebarMenuSubItem>
|
||||
</Collapsible>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<SidebarMenuSubItem key={item.path}>
|
||||
<SidebarMenuSubButton asChild isActive={active}>
|
||||
<Link to={item.path}>
|
||||
<Icon className="h-4 w-4" />
|
||||
<span>{item.label}</span>
|
||||
</Link>
|
||||
</SidebarMenuSubButton>
|
||||
</SidebarMenuSubItem>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<Sidebar className={collapsed ? "w-14" : "w-80"} collapsible="icon">
|
||||
@@ -331,28 +34,20 @@ export function AppSidebar() {
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Main Menu */}
|
||||
<SidebarGroup>
|
||||
{!collapsed && <SidebarGroupLabel>Main Menu</SidebarGroupLabel>}
|
||||
<SidebarGroupContent>
|
||||
<SidebarMenu>{menuItems.map((item) => renderMenuItem(item))}</SidebarMenu>
|
||||
</SidebarGroupContent>
|
||||
</SidebarGroup>
|
||||
{/* Menu Groups */}
|
||||
{menuGroups.map((group) => (
|
||||
<SidebarGroup key={group.label}>
|
||||
{!collapsed && <SidebarGroupLabel>{group.label}</SidebarGroupLabel>}
|
||||
<SidebarGroupContent>
|
||||
<SidebarMenuRenderer items={group.items} />
|
||||
</SidebarGroupContent>
|
||||
</SidebarGroup>
|
||||
))}
|
||||
|
||||
{/* Listing */}
|
||||
{/* Logout */}
|
||||
<SidebarGroup>
|
||||
{!collapsed && <SidebarGroupLabel>Listing</SidebarGroupLabel>}
|
||||
<SidebarGroupContent>
|
||||
<SidebarMenu>{listingItems.map((item) => renderMenuItem(item))}</SidebarMenu>
|
||||
</SidebarGroupContent>
|
||||
</SidebarGroup>
|
||||
|
||||
{/* Account */}
|
||||
<SidebarGroup>
|
||||
{!collapsed && <SidebarGroupLabel>Account</SidebarGroupLabel>}
|
||||
<SidebarGroupContent>
|
||||
<SidebarMenu>
|
||||
{accountItems.map((item) => renderMenuItem(item))}
|
||||
<SidebarMenuItem>
|
||||
<SidebarMenuButton onClick={logout} className={collapsed ? "justify-center" : ""}>
|
||||
<LogOut className="h-4 w-4" />
|
||||
|
||||
185
src/components/sidebar/SidebarMenuRenderer.tsx
Normal file
185
src/components/sidebar/SidebarMenuRenderer.tsx
Normal file
@@ -0,0 +1,185 @@
|
||||
import { Link, useLocation } from "react-router-dom";
|
||||
import {
|
||||
SidebarMenu,
|
||||
SidebarMenuItem,
|
||||
SidebarMenuButton,
|
||||
SidebarMenuSub,
|
||||
SidebarMenuSubItem,
|
||||
SidebarMenuSubButton,
|
||||
useSidebar,
|
||||
} from "@/components/ui/sidebar";
|
||||
import {
|
||||
Collapsible,
|
||||
CollapsibleContent,
|
||||
CollapsibleTrigger,
|
||||
} from "@/components/ui/collapsible";
|
||||
import { ChevronRight } from "lucide-react";
|
||||
import { MenuItem } from "@/config/sidebar";
|
||||
import { useState, useEffect } from "react";
|
||||
|
||||
interface SidebarMenuRendererProps {
|
||||
items: MenuItem[];
|
||||
level?: number;
|
||||
}
|
||||
|
||||
export function SidebarMenuRenderer({ items, level = 0 }: SidebarMenuRendererProps) {
|
||||
const { open, isMobile } = useSidebar();
|
||||
const collapsed = !open && !isMobile;
|
||||
const location = useLocation();
|
||||
const [expandedItems, setExpandedItems] = useState<Record<string, boolean>>({});
|
||||
|
||||
const isActive = (path: string) => {
|
||||
if (path.includes("?tab=")) {
|
||||
const [basePath, tabQuery] = path.split("?tab=");
|
||||
return (
|
||||
location.pathname === basePath &&
|
||||
location.search.includes(tabQuery)
|
||||
);
|
||||
}
|
||||
return location.pathname === path || location.pathname.startsWith(path + "/");
|
||||
};
|
||||
|
||||
const hasActiveChild = (items: MenuItem[]): boolean => {
|
||||
return items.some((item) => {
|
||||
if (isActive(item.path)) return true;
|
||||
if (item.subItems) return hasActiveChild(item.subItems);
|
||||
return false;
|
||||
});
|
||||
};
|
||||
|
||||
const toggleExpanded = (itemPath: string) => {
|
||||
setExpandedItems((prev) => ({
|
||||
...prev,
|
||||
[itemPath]: !prev[itemPath],
|
||||
}));
|
||||
};
|
||||
|
||||
// Auto-expand groups with active children
|
||||
useEffect(() => {
|
||||
items.forEach((item) => {
|
||||
if (item.subItems && hasActiveChild(item.subItems)) {
|
||||
setExpandedItems((prev) => ({
|
||||
...prev,
|
||||
[item.path]: true,
|
||||
}));
|
||||
}
|
||||
});
|
||||
}, [location.pathname, location.search]);
|
||||
|
||||
const renderMenuItem = (item: MenuItem) => {
|
||||
const Icon = item.icon;
|
||||
const active = isActive(item.path);
|
||||
const hasSubItems = item.subItems && item.subItems.length > 0;
|
||||
const isExpanded = expandedItems[item.path] || (hasSubItems && hasActiveChild(item.subItems));
|
||||
|
||||
if (hasSubItems) {
|
||||
return (
|
||||
<Collapsible
|
||||
key={item.path}
|
||||
open={isExpanded}
|
||||
onOpenChange={() => toggleExpanded(item.path)}
|
||||
>
|
||||
<SidebarMenuItem>
|
||||
<CollapsibleTrigger asChild>
|
||||
<SidebarMenuButton
|
||||
className={`${
|
||||
active ? "bg-primary text-primary-foreground" : ""
|
||||
} ${collapsed && level === 0 ? "justify-center" : ""}`}
|
||||
>
|
||||
<Icon className="h-4 w-4" />
|
||||
{!collapsed && <span>{item.label}</span>}
|
||||
{!collapsed && (
|
||||
<ChevronRight
|
||||
className={`ml-auto h-4 w-4 transition-transform ${
|
||||
isExpanded ? "rotate-90" : ""
|
||||
}`}
|
||||
/>
|
||||
)}
|
||||
</SidebarMenuButton>
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent>
|
||||
<SidebarMenuSub>
|
||||
{item.subItems!.map((subItem) =>
|
||||
renderSubMenuItem(subItem)
|
||||
)}
|
||||
</SidebarMenuSub>
|
||||
</CollapsibleContent>
|
||||
</SidebarMenuItem>
|
||||
</Collapsible>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<SidebarMenuItem key={item.path}>
|
||||
<SidebarMenuButton asChild isActive={active}>
|
||||
<Link to={item.path} className={collapsed && level === 0 ? "justify-center" : ""}>
|
||||
<Icon className="h-4 w-4" />
|
||||
{!collapsed && <span>{item.label}</span>}
|
||||
{!collapsed && item.badge && (
|
||||
<span className="ml-auto bg-green-500 text-white text-xs px-2 py-0.5 rounded-full">
|
||||
{item.badge}
|
||||
</span>
|
||||
)}
|
||||
</Link>
|
||||
</SidebarMenuButton>
|
||||
</SidebarMenuItem>
|
||||
);
|
||||
};
|
||||
|
||||
const renderSubMenuItem = (item: MenuItem): JSX.Element => {
|
||||
const Icon = item.icon;
|
||||
const active = isActive(item.path);
|
||||
const hasSubItems = item.subItems && item.subItems.length > 0;
|
||||
const isExpanded = expandedItems[item.path] || (hasSubItems && hasActiveChild(item.subItems));
|
||||
|
||||
if (hasSubItems) {
|
||||
return (
|
||||
<Collapsible
|
||||
key={item.path}
|
||||
open={isExpanded}
|
||||
onOpenChange={() => toggleExpanded(item.path)}
|
||||
>
|
||||
<SidebarMenuSubItem>
|
||||
<CollapsibleTrigger asChild>
|
||||
<SidebarMenuSubButton
|
||||
className={active ? "bg-primary/10 text-primary" : ""}
|
||||
>
|
||||
<Icon className="h-4 w-4" />
|
||||
<span>{item.label}</span>
|
||||
<ChevronRight
|
||||
className={`ml-auto h-4 w-4 transition-transform ${
|
||||
isExpanded ? "rotate-90" : ""
|
||||
}`}
|
||||
/>
|
||||
</SidebarMenuSubButton>
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent>
|
||||
<SidebarMenuSub>
|
||||
{item.subItems!.map((subItem) =>
|
||||
renderSubMenuItem(subItem)
|
||||
)}
|
||||
</SidebarMenuSub>
|
||||
</CollapsibleContent>
|
||||
</SidebarMenuSubItem>
|
||||
</Collapsible>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<SidebarMenuSubItem key={item.path}>
|
||||
<SidebarMenuSubButton asChild isActive={active}>
|
||||
<Link to={item.path}>
|
||||
<Icon className="h-4 w-4" />
|
||||
<span>{item.label}</span>
|
||||
</Link>
|
||||
</SidebarMenuSubButton>
|
||||
</SidebarMenuSubItem>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<SidebarMenu>
|
||||
{items.map((item) => renderMenuItem(item))}
|
||||
</SidebarMenu>
|
||||
);
|
||||
}
|
||||
170
src/config/sidebar.ts
Normal file
170
src/config/sidebar.ts
Normal file
@@ -0,0 +1,170 @@
|
||||
import {
|
||||
Home,
|
||||
Plus,
|
||||
Wallet,
|
||||
List,
|
||||
MessageSquare,
|
||||
Star,
|
||||
BookOpen,
|
||||
Heart,
|
||||
FileText,
|
||||
User,
|
||||
Users,
|
||||
Settings,
|
||||
LogOut,
|
||||
CreditCard,
|
||||
BarChart3,
|
||||
MapPin,
|
||||
DollarSign,
|
||||
AlertTriangle,
|
||||
Car,
|
||||
Target,
|
||||
Zap,
|
||||
Eye,
|
||||
Megaphone,
|
||||
Hotel,
|
||||
UtensilsCrossed,
|
||||
Brain,
|
||||
DoorOpen,
|
||||
BellRing,
|
||||
Key,
|
||||
Receipt,
|
||||
ChefHat,
|
||||
Grid3x3,
|
||||
Package,
|
||||
Globe,
|
||||
Compass,
|
||||
Map,
|
||||
Shield,
|
||||
Sparkles,
|
||||
Leaf,
|
||||
Store,
|
||||
Navigation,
|
||||
} from "lucide-react";
|
||||
|
||||
export interface MenuItem {
|
||||
icon: any;
|
||||
label: string;
|
||||
path: string;
|
||||
badge?: string;
|
||||
subItems?: MenuItem[];
|
||||
}
|
||||
|
||||
export interface MenuGroup {
|
||||
label: string;
|
||||
items: MenuItem[];
|
||||
}
|
||||
|
||||
export const menuGroups: MenuGroup[] = [
|
||||
{
|
||||
label: "Main Menu",
|
||||
items: [
|
||||
{ icon: Home, label: "Dashboard", path: "/dashboard" },
|
||||
{
|
||||
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",
|
||||
subItems: [
|
||||
{ icon: Globe, label: "Destinos", path: "/dashboard/admin?tab=content-destinations" },
|
||||
{ icon: MapPin, label: "Lugares", path: "/dashboard/admin?tab=content-places" },
|
||||
{ icon: BookOpen, label: "Guías", path: "/dashboard/admin?tab=content-guides" },
|
||||
{ icon: Car, label: "Taxis", path: "/dashboard/admin?tab=content-taxis" },
|
||||
{ icon: Navigation, label: "Geolocalización", path: "/dashboard/admin?tab=content-geolocation" },
|
||||
{ icon: Megaphone, label: "Promocional", path: "/dashboard/admin?tab=content-promotional" },
|
||||
{ icon: Sparkles, label: "AI Guías", path: "/dashboard/admin?tab=content-ai-guides" },
|
||||
{ icon: Eye, label: "AR Content", path: "/dashboard/admin?tab=content-ar" },
|
||||
],
|
||||
},
|
||||
{
|
||||
icon: Map,
|
||||
label: "Geolocalización",
|
||||
path: "/dashboard/admin?tab=geofences",
|
||||
subItems: [
|
||||
{ icon: Target, label: "Geofences", path: "/dashboard/admin?tab=geofences" },
|
||||
{ icon: BarChart3, label: "Analytics", path: "/dashboard/admin?tab=analytics" },
|
||||
{ icon: Zap, label: "Testing", path: "/dashboard/admin?tab=testing" },
|
||||
{ icon: Shield, label: "Emergencia Geo", path: "/dashboard/admin?tab=emergency-geo" },
|
||||
{ icon: Compass, label: "Navegación", path: "/dashboard/admin?tab=navigation" },
|
||||
],
|
||||
},
|
||||
{ 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",
|
||||
path: "/dashboard/hotel",
|
||||
subItems: [
|
||||
{ icon: Home, label: "Habitaciones", path: "/dashboard/hotel/rooms" },
|
||||
{ icon: DoorOpen, label: "Check-in", path: "/dashboard/hotel/checkin" },
|
||||
{ icon: BellRing, label: "Room Service", path: "/dashboard/hotel/room-service" },
|
||||
{ icon: Key, label: "Acceso", path: "/dashboard/hotel/keyless" },
|
||||
{ icon: Users, label: "Personal", path: "/dashboard/hotel/staff" },
|
||||
],
|
||||
},
|
||||
{
|
||||
icon: UtensilsCrossed,
|
||||
label: "Restaurant POS",
|
||||
path: "/dashboard/restaurant",
|
||||
subItems: [
|
||||
{ icon: CreditCard, label: "POS Terminal", path: "/dashboard/restaurant/pos" },
|
||||
{ icon: Receipt, label: "Pedidos", path: "/dashboard/restaurant/orders" },
|
||||
{ icon: ChefHat, label: "Cocina", path: "/dashboard/restaurant/kitchen" },
|
||||
{ icon: Receipt, label: "Cuentas", path: "/dashboard/restaurant/bills" },
|
||||
{ icon: Grid3x3, label: "Mesas", path: "/dashboard/restaurant/tables" },
|
||||
{ icon: UtensilsCrossed, label: "Menú", path: "/dashboard/restaurant/menu" },
|
||||
{ icon: Package, label: "Inventario", path: "/dashboard/restaurant/inventory" },
|
||||
{ icon: Users, label: "Personal", path: "/dashboard/restaurant/staff" },
|
||||
],
|
||||
},
|
||||
{ icon: Brain, label: "Personalization", path: "/dashboard/personalization" },
|
||||
{ icon: Shield, label: "Security", path: "/dashboard/security" },
|
||||
{ icon: Car, label: "Vehicle Management", path: "/dashboard/vehicle-management" },
|
||||
{ icon: Leaf, label: "Sustainability", path: "/dashboard/sustainability" },
|
||||
{ icon: Store, label: "Comercios", path: "/dashboard/establishments" },
|
||||
{ icon: Wallet, label: "Wallet", path: "/dashboard/wallet" },
|
||||
{ icon: MessageSquare, label: "Message", path: "/dashboard/messages", badge: "2" },
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "Listing",
|
||||
items: [
|
||||
{ icon: List, label: "My Listing", path: "/dashboard/my-listings" },
|
||||
{ icon: Star, label: "Reviews", path: "/dashboard/reviews" },
|
||||
{ icon: BookOpen, label: "Bookings", path: "/dashboard/bookings" },
|
||||
{ icon: Heart, label: "Bookmark", path: "/dashboard/bookmarks" },
|
||||
{ icon: FileText, label: "Invoice", path: "/dashboard/invoices" },
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "Account",
|
||||
items: [
|
||||
{ icon: User, label: "Edit Profile", path: "/dashboard/profile" },
|
||||
{ icon: CreditCard, label: "Wallet", path: "/dashboard/wallet" },
|
||||
{ icon: Settings, label: "Setting", path: "/dashboard/settings" },
|
||||
],
|
||||
},
|
||||
];
|
||||
Reference in New Issue
Block a user