@licklist/design 0.78.5-dev.91 → 0.78.5-dev.93

package/src/v2/shadcn/_reference/shared/UnifiedSidebar.tsx

@@ -0,0 +1,722 @@
+import React, { useState, useMemo } from 'react';
+import { NavLink, useLocation, useParams } from 'react-router-dom';
+import { cn } from '../../lib/utils';
+import { useSidebar } from '@/contexts/SidebarContext';
+import { useSidebarLabels } from '@/contexts/SidebarLabelsContext';
+import { useUser } from '@/contexts/UserContext';
+import {
+  SettingsIcon,
+  HomeIcon,
+  CompanyIcon,
+  ProvidersIcon,
+  UsersIcon,
+  CustomersIcon,
+  ReportsIcon,
+  AnalyticsIcon,
+  PaymentsIcon,
+  DebugIcon,
+  BookingsIcon,
+  InventoryIcon,
+  LoyaltyIcon,
+  MarketingIcon,
+} from '../shared/SidebarIcons';
+import { IconChevronDown, IconArrowInternalReturn } from '../../../icons';
+
+import AdminLogo from '@/assets/AdminLogo.png';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "../ui/tooltip";
+
+type Destination = 'provider' | 'admin' | 'company';
+
+interface Provider {
+  id: string;
+  name: string;
+  type: 'venue' | 'promoter';
+  status: string;
+  avatar_url?: string;
+  venue_id?: string;
+  company_id?: string;
+  inventory_enabled?: boolean;
+}
+
+interface Company {
+  id: string;
+  company_id?: string;
+  name: string;
+  status: string;
+  avatar_url?: string;
+}
+
+interface UnifiedSidebarProps {
+  destination: Destination;
+  provider?: Provider | null;
+  company?: Company | null;
+  isLoadingProvider?: boolean;
+  isLoadingCompany?: boolean;
+}
+
+interface NavItem {
+  icon: React.ReactNode;
+  label: string;
+  to: string;
+  end?: boolean;
+}
+
+const UnifiedSidebar: React.FC<UnifiedSidebarProps> = ({ 
+  destination, 
+  provider, 
+  company,
+  isLoadingProvider = false,
+  isLoadingCompany = false
+}) => {
+  const { collapsed, mobileMenuOpen, setMobileMenuOpen } = useSidebar();
+  const { labels, visibility } = useSidebarLabels();
+  const { hasRole, providerData } = useUser();
+  const location = useLocation();
+  const { companyId: urlCompanyId } = useParams<{ companyId?: string }>();
+  
+  // Use passed provider or fall back to user's provider data
+  const currentProvider = provider || providerData;
+  const currentCompany = company;
+
+  // Check if user has access to admin destination
+  const hasAdminAccess = hasRole('super_admin') || hasRole('system_admin');
+
+  // If trying to access admin without permission, don't render the sidebar
+  if (destination === 'admin' && !hasAdminAccess) {
+    return null;
+  }
+ 
+  // Build route prefix based on context using friendly IDs
+  // When provider is still loading, derive prefix from the current URL so links work immediately
+  const getRoutePrefix = () => {
+    if (destination === 'provider') {
+      if (provider && 'id' in provider) {
+        const friendlyId = provider.venue_id || '01';
+        const providerType = provider.type === 'venue' ? 'venue' : 'promoter';
+        if (provider.company_id) {
+          return `/company/${provider.company_id}/${providerType}/${friendlyId}`;
+        }
+        return `/${providerType}/${friendlyId}`;
+      }
+      // Fallback: derive from current URL path while provider is loading
+      const pathMatch = location.pathname.match(/^(\/company\/[^/]+)?\/(venue|promoter)\/([^/]+)/);
+      if (pathMatch) {
+        const companyPrefix = pathMatch[1] || '';
+        return `${companyPrefix}/${pathMatch[2]}/${pathMatch[3]}`;
+      }
+    }
+    if (destination === 'company' && company) {
+      return `/company/${urlCompanyId || company.company_id || company.id}`;
+    }
+    return '';
+  };
+
+  const routePrefix = getRoutePrefix();
+
+  // Memoized overview path for provider to prevent flicker
+  const providerOverviewPath = useMemo(() => {
+    if (destination !== 'provider' || !currentProvider) return '';
+    const providerType = currentProvider && 'type' in currentProvider 
+      ? (currentProvider.type === 'venue' ? 'venue' : 'promoter') 
+      : 'venue';
+    const friendlyId = currentProvider?.venue_id || '01';
+    return currentProvider?.company_id 
+      ? `/company/${currentProvider.company_id}/${providerType}/${friendlyId}/overview`
+      : `/${providerType}/${friendlyId}/overview`;
+  }, [destination, currentProvider]);
+
+  // Memoized overview path for company
+  const companyOverviewPath = useMemo(() => {
+    if (destination !== 'company' || !currentCompany) return '';
+    return `/company/${urlCompanyId || currentCompany.company_id || currentCompany.id}/overview`;
+  }, [destination, currentCompany, urlCompanyId]);
+
+
+  // Navigation configuration for each destination
+  // Determine inventory label based on feature toggle
+  const inventoryLabel = currentProvider && 'inventory_enabled' in currentProvider && currentProvider.inventory_enabled 
+    ? (labels.inventory || 'Inventory')
+    : 'Booking Types';
+
+  const navigationConfig: Record<Destination, NavItem[]> = {
+    provider: [
+      { icon: <HomeIcon />, label: labels.home || 'Home', to: `${routePrefix}/home` || '/', end: true },
+      { icon: <BookingsIcon />, label: labels.bookings || 'Bookings', to: `${routePrefix}/bookings` || '/bookings' },
+      { icon: <InventoryIcon />, label: inventoryLabel, to: `${routePrefix}/inventory` || '/booking-types' },
+      { icon: <LoyaltyIcon />, label: labels.loyalty || 'Loyalty', to: `${routePrefix}/loyalty` || '/loyalty' },
+      { icon: <CustomersIcon />, label: labels.customers || 'Customers', to: `${routePrefix}/customers` || '/customers' },
+      { icon: <ReportsIcon />, label: labels.reports || 'Reports', to: `${routePrefix}/reports` || '/reports' },
+      { icon: <AnalyticsIcon />, label: labels.analytics || 'Analytics', to: `${routePrefix}/analytics` || '/analytics' },
+      { icon: <MarketingIcon />, label: labels.marketing || 'Marketing', to: `${routePrefix}/marketing` || '/marketing/affiliates', end: false },
+      { icon: <SettingsIcon />, label: labels.settings || 'Settings', to: `${routePrefix}/settings` || '/settings/general', end: false },
+    ],
+    admin: [
+      { icon: <HomeIcon />, label: 'Home', to: '/admin', end: true },
+      { icon: <CompanyIcon />, label: 'Companies', to: '/admin/companies' },
+      { icon: <ProvidersIcon />, label: 'Providers', to: '/admin/providers' },
+      { icon: <UsersIcon />, label: 'Users', to: '/admin/users', end: false },
+      { icon: <CustomersIcon />, label: 'Customers', to: '/admin/customers' },
+      { icon: <ReportsIcon />, label: 'Reports', to: '/admin/reports' },
+      { icon: <AnalyticsIcon />, label: 'Analytics', to: '/admin/analytics' },
+      { icon: <PaymentsIcon />, label: 'Payments', to: '/admin/payments' },
+      { icon: <SettingsIcon />, label: 'Settings', to: '/admin/settings', end: false },
+      { icon: <DebugIcon />, label: 'Debugging', to: '/admin/debugging', end: false },
+    ],
+    company: [
+      { icon: <HomeIcon />, label: labels.home || 'Home', to: `${routePrefix}`, end: true },
+      { icon: <ProvidersIcon />, label: labels.providers || 'Providers', to: `${routePrefix}/providers` },
+      { icon: <BookingsIcon />, label: labels.bookings || 'Bookings', to: `${routePrefix}/bookings` },
+      { icon: <InventoryIcon />, label: labels.inventory || 'Inventory', to: `${routePrefix}/inventory` },
+      { icon: <CustomersIcon />, label: labels.customers || 'Customers', to: `${routePrefix}/customers` },
+      { icon: <ReportsIcon />, label: labels.reports || 'Reports', to: `${routePrefix}/reports` },
+      { icon: <AnalyticsIcon />, label: labels.analytics || 'Analytics', to: `${routePrefix}/analytics` },
+      { icon: <SettingsIcon />, label: labels.settings || 'Settings', to: `${routePrefix}/settings`, end: false },
+    ],
+  };
+
+  // Filter nav items based on visibility settings (only for provider/company destinations)
+  const navItems = navigationConfig[destination].filter((item) => {
+    // Admin destination doesn't use visibility settings
+    if (destination === 'admin') return true;
+    
+    // Settings should always be visible
+    if (item.label === labels.settings || item.label === 'Settings') return true;
+    
+    // Check visibility for each item based on its key
+    const labelKey = Object.entries(labels).find(([_, value]) => value === item.label)?.[0] as keyof typeof visibility;
+    if (labelKey && visibility[labelKey] === false) return false;
+    
+    // Also check by default label name for items that haven't been customized
+    const defaultLabelMap: Record<string, keyof typeof visibility> = {
+      'Home': 'home',
+      'Bookings': 'bookings',
+      'Inventory': 'inventory',
+      'Loyalty': 'loyalty',
+      'Customers': 'customers',
+      'Reports': 'reports',
+      'Analytics': 'analytics',
+      'Marketing': 'marketing',
+      'Providers': 'providers',
+    };
+    
+    const visibilityKey = defaultLabelMap[item.label];
+    if (visibilityKey && visibility[visibilityKey] === false) return false;
+    
+    return true;
+  });
+
+  // Render header content based on destination
+  const renderHeader = () => {
+    switch (destination) {
+      case 'admin':
+        return (
+          <div className={`group flex items-center gap-2 self-stretch bg-surface-secondary hover:bg-surface-secondary-hover active:bg-surface-secondary-pressed p-2 rounded-lg transition-colors cursor-pointer ${
+            collapsed ? 'justify-center' : ''
+          }`}>
+            <div className="w-[47px] h-[47px] rounded-full relative flex items-center justify-center flex-shrink-0 border border-border-primary bg-fill-secondary/20 overflow-hidden">
+              <img src={AdminLogo} alt="Admin Panel Logo" className="w-full h-full object-cover relative z-10" />
+            </div>
+            {!collapsed && (
+              <div className="flex flex-1 flex-col items-start gap-1 min-w-0">
+                <h3 className="text-label-primary text-[15px] font-semibold leading-[18px] whitespace-nowrap">
+                  Admin Panel
+                </h3>
+                <div className="flex justify-center items-center gap-2 bg-surface-tertiary group-hover:bg-surface-tertiary-hover transition-colors px-2 py-1 rounded-lg">
+                  <span className="text-label-secondary text-[10px] leading-3 font-mono font-semibold whitespace-nowrap">
+                    Super Admin
+                  </span>
+                </div>
+              </div>
+            )}
+          </div>
+        );
+      
+      case 'company':
+        // Show skeleton while loading
+        if (isLoadingCompany) {
+          return (
+            <div className={cn(
+              "flex items-center gap-2 self-stretch p-2 rounded-lg bg-surface-secondary",
+              collapsed ? "justify-center" : ""
+            )}>
+              <div className="w-[47px] h-[47px] rounded-full bg-surface-tertiary animate-pulse flex-shrink-0" />
+              {!collapsed && (
+                <div className="flex flex-1 flex-col items-start gap-2 min-w-0">
+                  <div className="h-[18px] w-32 bg-surface-tertiary animate-pulse rounded" />
+                  <div className="h-5 w-24 bg-surface-tertiary animate-pulse rounded-lg" />
+                </div>
+              )}
+            </div>
+          );
+        }
+        return (
+          <NavLink 
+            to={companyOverviewPath}
+            end={false}
+            onClick={() => setMobileMenuOpen(false)}
+            className={({ isActive }) => cn(
+              "group flex items-center gap-2 self-stretch p-2 rounded-lg transition-colors cursor-pointer",
+              collapsed ? "justify-center" : "",
+              isActive 
+                ? "bg-gradient-to-tr from-gradient-stop1 via-gradient-stop2 to-gradient-stop3" 
+                : "bg-surface-secondary hover:bg-surface-secondary-hover active:bg-surface-secondary-pressed"
+            )}
+          >
+            {({ isActive }) => (
+              <>
+                <div className="w-[47px] h-[47px] rounded-full relative flex items-center justify-center flex-shrink-0 overflow-hidden">
+                  {currentCompany?.avatar_url ? (
+                    <img src={currentCompany.avatar_url} alt={currentCompany.name} className="w-full h-full object-cover" />
+                  ) : (
+                    <>
+                      <svg width="47" height="47" viewBox="0 0 47 47" fill="none" className="absolute">
+                        <circle cx="23.5" cy="23.5" r="22.5" className={cn(
+                          "fillOpacity-20 strokeWidth-2",
+                          isActive ? "fill-fill-primary-alt stroke-fill-primary-alt" : "fill-fill-secondary stroke-fill-secondary"
+                        )} fillOpacity="0.2" strokeWidth="2" />
+                      </svg>
+                      <span className={cn(
+                        "font-bold text-lg relative z-10",
+                        isActive ? "text-label-primary-alt" : "text-label-secondary"
+                      )}>{currentCompany?.name?.[0] || ''}</span>
+                    </>
+                  )}
+                </div>
+                {!collapsed && currentCompany && (
+                  <div className="flex flex-1 flex-col items-start gap-1 min-w-0">
+                    <h3 className={cn(
+                      "text-[15px] font-semibold leading-[18px] whitespace-nowrap",
+                      isActive ? "text-label-primary-alt" : "text-label-primary"
+                    )}>
+                      {currentCompany.name}
+                    </h3>
+                    <div className={cn(
+                      "flex justify-center items-center gap-2 px-2 py-1 rounded-lg transition-colors",
+                      isActive 
+                        ? "bg-white/20 dark:bg-black/20" 
+                        : "bg-surface-tertiary group-hover:bg-surface-tertiary-hover"
+                    )}>
+                      <span className={cn(
+                        "text-[10px] leading-3 font-mono font-semibold whitespace-nowrap",
+                        isActive ? "text-label-primary-alt" : "text-label-secondary"
+                      )}>
+                        Company ID: {currentCompany.company_id || '—'}
+                      </span>
+                    </div>
+                  </div>
+                )}
+              </>
+            )}
+          </NavLink>
+        );
+      
+      case 'provider':
+        // Show skeleton while loading
+        if (isLoadingProvider) {
+          return (
+            <div className={cn(
+              "flex items-center gap-2 self-stretch p-2 rounded-lg bg-surface-secondary",
+              collapsed ? "justify-center" : ""
+            )}>
+              <div className="w-[47px] h-[47px] rounded-full bg-surface-tertiary animate-pulse flex-shrink-0" />
+              {!collapsed && (
+                <div className="flex flex-1 flex-col items-start gap-2 min-w-0">
+                  <div className="h-[18px] w-32 bg-surface-tertiary animate-pulse rounded" />
+                  <div className="h-5 w-20 bg-surface-tertiary animate-pulse rounded-lg" />
+                </div>
+              )}
+            </div>
+          );
+        }
+        return (
+          <NavLink 
+            to={providerOverviewPath}
+            end={false}
+            onClick={() => setMobileMenuOpen(false)}
+            className={({ isActive }) => cn(
+              "group flex items-center gap-2 self-stretch p-2 rounded-lg transition-colors cursor-pointer max-sm:p-3",
+              collapsed ? "justify-center" : "",
+              isActive 
+                ? "bg-gradient-to-tr from-gradient-stop1 via-gradient-stop2 to-gradient-stop3" 
+                : "bg-surface-secondary hover:bg-surface-secondary-hover active:bg-surface-secondary-pressed"
+            )}
+          >
+            {({ isActive }) => (
+              <>
+                <div className={cn("w-[47px] h-[47px] max-sm:w-[52px] max-sm:h-[52px] rounded-full relative flex items-center justify-center flex-shrink-0 overflow-hidden", currentProvider && 'avatar_url' in currentProvider && currentProvider.avatar_url && "border border-border-primary")}>
+                  {currentProvider && 'avatar_url' in currentProvider && currentProvider.avatar_url ? (
+                    <img src={currentProvider.avatar_url} alt={currentProvider.name} className="w-full h-full object-cover" />
+                  ) : (
+                    <>
+                      <svg width="47" height="47" viewBox="0 0 47 47" fill="none" className="absolute">
+                        <circle cx="23.5" cy="23.5" r="22.5" className={cn(
+                          "fillOpacity-20 strokeWidth-2",
+                          isActive ? "fill-fill-primary-alt stroke-fill-primary-alt" : "fill-fill-secondary stroke-fill-secondary"
+                        )} fillOpacity="0.2" strokeWidth="2" />
+                      </svg>
+                      <span className={cn(
+                        "font-bold text-lg relative z-10",
+                        isActive ? "text-label-primary-alt" : "text-label-secondary"
+                      )}>{currentProvider?.name?.[0] || ''}</span>
+                    </>
+                  )}
+                </div>
+                {!collapsed && currentProvider && (
+                  <div className="flex flex-1 flex-col items-start gap-1 min-w-0">
+                    <h3 className={cn(
+                      "text-[15px] font-semibold leading-[18px] whitespace-nowrap max-sm:text-[17px] max-sm:leading-[20px]",
+                      isActive ? "text-label-primary-alt" : "text-label-primary"
+                    )}>
+                      {currentProvider.name}
+                    </h3>
+                    <div className={cn(
+                      "flex justify-center items-center gap-2 px-2 py-1 rounded-lg transition-colors",
+                      isActive 
+                        ? "bg-white/20 dark:bg-black/20" 
+                        : "bg-surface-tertiary group-hover:bg-surface-tertiary-hover"
+                    )}>
+                      <span className={cn(
+                        "text-[10px] leading-3 font-mono font-semibold whitespace-nowrap max-sm:text-[12px] max-sm:leading-4",
+                        isActive ? "text-label-primary-alt" : "text-label-secondary"
+                      )}>
+                        {currentProvider && 'type' in currentProvider 
+                          ? `${currentProvider.type === 'venue' ? 'Venue' : 'Promoter'} ID: ${currentProvider.venue_id || '—'}`
+                          : `Venue ID: ${currentProvider.venue_id || '—'}`}
+                      </span>
+                    </div>
+                  </div>
+                )}
+              </>
+            )}
+          </NavLink>
+        );
+    }
+  };
+
+  // Render back navigation based on destination
+  const renderBackNavigation = () => {
+    // Admin destination never shows back navigation (it's the top level)
+    if (destination === 'admin') {
+      return null;
+    }
+
+    // For providers with admin access
+    if (destination === 'provider' && hasAdminAccess) {
+      return (
+        <div className="flex flex-col items-start gap-1 self-stretch">
+          {/* Back to Admin Panel */}
+          <div className="flex items-start self-stretch">
+            {collapsed ? (
+              <Tooltip delayDuration={100}>
+                <TooltipTrigger asChild>
+                  <NavLink
+                    to="/admin"
+                    onClick={() => setMobileMenuOpen(false)}
+                    className="group flex items-center justify-center w-full p-2 rounded-lg hover:bg-surface-secondary-hover active:bg-surface-secondary-pressed transition-colors"
+                  >
+                    <div className="w-6 h-6 flex-shrink-0">
+                      <svg width="24" height="24" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M7.5265 4.86842C9.1925 3.17961 9.9701 2.74305 10.9049 2.45584C11.8397 2.16862 12.7957 2.16862 13.7305 2.45584C14.6653 2.74305 15.4429 3.17961 17.1089 4.86842L19.8327 7.62955C21.4987 9.31836 21.9294 10.1066 22.2127 11.0542C22.496 12.0018 22.496 12.9709 22.2127 13.9185C21.9294 14.8661 21.4987 15.6543 19.8327 17.3431L17.1089 20.1042C15.4429 21.793 14.6653 22.2296 13.7305 22.5168C12.7957 22.804 11.8397 22.804 10.9049 22.5168C9.9701 22.2296 9.1925 21.793 7.5265 20.1042L4.80266 17.3431C3.13666 15.6543 2.70599 14.8661 2.42266 13.9185C2.13933 12.9709 2.13933 12.0018 2.42266 11.0542C2.70599 10.1066 3.13666 9.31836 4.80266 7.62955L7.5265 4.86842ZM9.02372 6.30766L6.26118 9.10803C4.96243 10.4246 4.6069 10.9575 4.39663 11.6607C4.23154 12.2128 4.23154 12.7598 4.39663 13.312C4.6048 14.0082 4.95534 14.5374 6.22249 15.8254L9.02375 18.665C10.2943 19.9495 10.8164 20.3048 11.5032 20.5158C12.0479 20.6832 12.5875 20.6832 13.1322 20.5158C13.8259 20.3027 14.3516 19.9423 15.6504 18.6258L18.3742 15.8646C19.6729 14.5481 20.0285 14.0152 20.2387 13.312C20.4038 12.7598 20.4038 12.2128 20.2387 11.6607C20.0285 10.9575 19.6729 10.4246 18.3742 9.10803L15.6504 6.3469C14.3516 5.03038 13.8259 4.66998 13.1322 4.45683C12.5875 4.28948 12.0479 4.28948 11.5032 4.45683C10.8164 4.66784 10.2943 5.02318 9.02372 6.30766ZM15.8147 11.4923C16.3685 10.9309 17.2664 10.9309 17.8202 11.4923C18.3739 12.0537 18.374 12.9638 17.8202 13.5252L13.3535 18.0531C12.7997 18.6144 11.9018 18.6144 11.348 18.0531L10.6958 17.392C10.5739 17.2684 10.5424 17.2107 10.5217 17.1414C10.501 17.0721 10.501 17.0011 10.5217 16.9318C10.5424 16.8625 10.5739 16.8048 10.6958 16.6812L15.8147 11.4923ZM8.35774 14.0054C8.49112 13.8702 8.67213 13.7944 8.86075 13.7949L11.4696 13.801C11.612 13.8013 11.7272 13.9186 11.7268 14.063C11.7267 14.1307 11.7006 14.1958 11.654 14.2444L11.5164 14.3881L9.88948 16.0226C9.73826 16.1745 9.49432 16.174 9.34376 16.0214L8.35774 15.0219C8.08085 14.7412 8.08085 14.2861 8.35774 14.0054Z" className="fill-fill-primary"/>
+                      </svg>
+                    </div>
+                  </NavLink>
+                </TooltipTrigger>
+                <TooltipContent side="right" sideOffset={8}>
+                  <p>Back to Admin Panel</p>
+                </TooltipContent>
+              </Tooltip>
+            ) : (
+              <NavLink to="/admin" onClick={() => setMobileMenuOpen(false)} className="group flex items-center gap-2 w-full p-2 rounded-lg hover:bg-surface-secondary-hover active:bg-surface-secondary-pressed transition-colors">
+                <div className="w-6 h-6 flex-shrink-0">
+                <svg width="24" height="24" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M7.5265 4.86842C9.1925 3.17961 9.9701 2.74305 10.9049 2.45584C11.8397 2.16862 12.7957 2.16862 13.7305 2.45584C14.6653 2.74305 15.4429 3.17961 17.1089 4.86842L19.8327 7.62955C21.4987 9.31836 21.9294 10.1066 22.2127 11.0542C22.496 12.0018 22.496 12.9709 22.2127 13.9185C21.9294 14.8661 21.4987 15.6543 19.8327 17.3431L17.1089 20.1042C15.4429 21.793 14.6653 22.2296 13.7305 22.5168C12.7957 22.804 11.8397 22.804 10.9049 22.5168C9.9701 22.2296 9.1925 21.793 7.5265 20.1042L4.80266 17.3431C3.13666 15.6543 2.70599 14.8661 2.42266 13.9185C2.13933 12.9709 2.13933 12.0018 2.42266 11.0542C2.70599 10.1066 3.13666 9.31836 4.80266 7.62955L7.5265 4.86842ZM9.02372 6.30766L6.26118 9.10803C4.96243 10.4246 4.6069 10.9575 4.39663 11.6607C4.23154 12.2128 4.23154 12.7598 4.39663 13.312C4.6048 14.0082 4.95534 14.5374 6.22249 15.8254L9.02375 18.665C10.2943 19.9495 10.8164 20.3048 11.5032 20.5158C12.0479 20.6832 12.5875 20.6832 13.1322 20.5158C13.8259 20.3027 14.3516 19.9423 15.6504 18.6258L18.3742 15.8646C19.6729 14.5481 20.0285 14.0152 20.2387 13.312C20.4038 12.7598 20.4038 12.2128 20.2387 11.6607C20.0285 10.9575 19.6729 10.4246 18.3742 9.10803L15.6504 6.3469C14.3516 5.03038 13.8259 4.66998 13.1322 4.45683C12.5875 4.28948 12.0479 4.28948 11.5032 4.45683C10.8164 4.66784 10.2943 5.02318 9.02372 6.30766ZM15.8147 11.4923C16.3685 10.9309 17.2664 10.9309 17.8202 11.4923C18.3739 12.0537 18.374 12.9638 17.8202 13.5252L13.3535 18.0531C12.7997 18.6144 11.9018 18.6144 11.348 18.0531L10.6958 17.392C10.5739 17.2684 10.5424 17.2107 10.5217 17.1414C10.501 17.0721 10.501 17.0011 10.5217 16.9318C10.5424 16.8625 10.5739 16.8048 10.6958 16.6812L15.8147 11.4923ZM8.35774 14.0054C8.49112 13.8702 8.67213 13.7944 8.86075 13.7949L11.4696 13.801C11.612 13.8013 11.7272 13.9186 11.7268 14.063C11.7267 14.1307 11.7006 14.1958 11.654 14.2444L11.5164 14.3881L9.88948 16.0226C9.73826 16.1745 9.49432 16.174 9.34376 16.0214L8.35774 15.0219C8.08085 14.7412 8.08085 14.2861 8.35774 14.0054Z" className="fill-fill-primary"/>
+                  </svg>
+                </div>
+                <span className="text-label-primary text-[13px] font-medium leading-4 whitespace-nowrap">Back to Admin Panel</span>
+              </NavLink>
+            )}
+          </div>
+
+          {/* Back to Company (if provider belongs to a company) */}
+          {/* Show immediately if we have company_id - no need to wait for loading */}
+          {currentProvider?.company_id && (
+            <div className="flex items-start self-stretch">
+              {collapsed ? (
+                <Tooltip delayDuration={100}>
+                  <TooltipTrigger asChild>
+                    <NavLink
+                      to={`/company/${urlCompanyId || currentProvider.company_id}`}
+                      onClick={() => setMobileMenuOpen(false)}
+                      className="group flex items-center justify-center w-full p-2 rounded-lg hover:bg-surface-secondary-hover active:bg-surface-secondary-pressed transition-colors"
+                    >
+                      <div className="relative w-6 h-6 flex-shrink-0">
+                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" className="absolute inset-0 group-hover:opacity-0 transition-opacity">
+                          <path d="M19.5 18.75H4.5V17.25H5.25V6C5.25 5.58579 5.58579 5.25 6 5.25H16.5C16.9142 5.25 17.25 5.58579 17.25 6V9.75H18.75V17.25H19.5V18.75ZM15.75 17.25H17.25V11.25H12.75V17.25H14.25V12.75H15.75V17.25ZM15.75 9.75V6.75H6.75V17.25H11.25V9.75H15.75ZM8.25 11.25H9.75V12.75H8.25V11.25ZM8.25 14.25H9.75V15.75H8.25V14.25ZM8.25 8.25H9.75V9.75H8.25V8.25Z" className="fill-fill-primary" />
+                        </svg>
+                        <IconArrowInternalReturn size={24} className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity" />
+                      </div>
+                    </NavLink>
+                  </TooltipTrigger>
+                  <TooltipContent side="right" sideOffset={8}>
+                    <p>Back to Company</p>
+                  </TooltipContent>
+                </Tooltip>
+              ) : (
+                <NavLink
+                  to={`/company/${urlCompanyId || currentProvider.company_id}`}
+                  onClick={() => setMobileMenuOpen(false)}
+                  className="group flex items-center gap-2 w-full p-2 rounded-lg hover:bg-surface-secondary-hover active:bg-surface-secondary-pressed transition-colors"
+                >
+                  <div className="relative w-6 h-6 flex-shrink-0">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" className="absolute inset-0 group-hover:opacity-0 transition-opacity">
+                      <path d="M19.5 18.75H4.5V17.25H5.25V6C5.25 5.58579 5.58579 5.25 6 5.25H16.5C16.9142 5.25 17.25 5.58579 17.25 6V9.75H18.75V17.25H19.5V18.75ZM15.75 17.25H17.25V11.25H12.75V17.25H14.25V12.75H15.75V17.25ZM15.75 9.75V6.75H6.75V17.25H11.25V9.75H15.75ZM8.25 11.25H9.75V12.75H8.25V11.25ZM8.25 14.25H9.75V15.75H8.25V14.25ZM8.25 8.25H9.75V9.75H8.25V8.25Z" className="fill-fill-primary" />
+                    </svg>
+                    <IconArrowInternalReturn size={24} className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity" />
+                  </div>
+                  <span className="text-label-primary text-[13px] font-medium leading-4 whitespace-nowrap">Back to Company</span>
+                </NavLink>
+              )}
+            </div>
+          )}
+        </div>
+      );
+    }
+
+    // Show "Back to Admin Panel" for company destinations if user has admin access
+    if (destination === 'company' && hasAdminAccess) {
+      return (
+        <div className="flex items-start self-stretch">
+          {collapsed ? (
+            <Tooltip delayDuration={100}>
+              <TooltipTrigger asChild>
+                <NavLink
+                  to="/admin"
+                  onClick={() => setMobileMenuOpen(false)}
+                  className="group flex items-center justify-center w-full p-2 rounded-lg hover:bg-surface-secondary-hover active:bg-surface-secondary-pressed transition-colors"
+                >
+                  <div className="relative w-6 h-6 flex-shrink-0">
+                    <svg width="24" height="24" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg" className="absolute inset-0 group-hover:opacity-0 transition-opacity">
+                      <path d="M7.5265 4.86842C9.1925 3.17961 9.9701 2.74305 10.9049 2.45584C11.8397 2.16862 12.7957 2.16862 13.7305 2.45584C14.6653 2.74305 15.4429 3.17961 17.1089 4.86842L19.8327 7.62955C21.4987 9.31836 21.9294 10.1066 22.2127 11.0542C22.496 12.0018 22.496 12.9709 22.2127 13.9185C21.9294 14.8661 21.4987 15.6543 19.8327 17.3431L17.1089 20.1042C15.4429 21.793 14.6653 22.2296 13.7305 22.5168C12.7957 22.804 11.8397 22.804 10.9049 22.5168C9.9701 22.2296 9.1925 21.793 7.5265 20.1042L4.80266 17.3431C3.13666 15.6543 2.70599 14.8661 2.42266 13.9185C2.13933 12.9709 2.13933 12.0018 2.42266 11.0542C2.70599 10.1066 3.13666 9.31836 4.80266 7.62955L7.5265 4.86842ZM9.02372 6.30766L6.26118 9.10803C4.96243 10.4246 4.6069 10.9575 4.39663 11.6607C4.23154 12.2128 4.23154 12.7598 4.39663 13.312C4.6048 14.0082 4.95534 14.5374 6.22249 15.8254L9.02375 18.665C10.2943 19.9495 10.8164 20.3048 11.5032 20.5158C12.0479 20.6832 12.5875 20.6832 13.1322 20.5158C13.8259 20.3027 14.3516 19.9423 15.6504 18.6258L18.3742 15.8646C19.6729 14.5481 20.0285 14.0152 20.2387 13.312C20.4038 12.7598 20.4038 12.2128 20.2387 11.6607C20.0285 10.9575 19.6729 10.4246 18.3742 9.10803L15.6504 6.3469C14.3516 5.03038 13.8259 4.66998 13.1322 4.45683C12.5875 4.28948 12.0479 4.28948 11.5032 4.45683C10.8164 4.66784 10.2943 5.02318 9.02372 6.30766ZM15.8147 11.4923C16.3685 10.9309 17.2664 10.9309 17.8202 11.4923C18.3739 12.0537 18.374 12.9638 17.8202 13.5252L13.3535 18.0531C12.7997 18.6144 11.9018 18.6144 11.348 18.0531L10.6958 17.392C10.5739 17.2684 10.5424 17.2107 10.5217 17.1414C10.501 17.0721 10.501 17.0011 10.5217 16.9318C10.5424 16.8625 10.5739 16.8048 10.6958 16.6812L15.8147 11.4923ZM8.35774 14.0054C8.49112 13.8702 8.67213 13.7944 8.86075 13.7949L11.4696 13.801C11.612 13.8013 11.7272 13.9186 11.7268 14.063C11.7267 14.1307 11.7006 14.1958 11.654 14.2444L11.5164 14.3881L9.88948 16.0226C9.73826 16.1745 9.49432 16.174 9.34376 16.0214L8.35774 15.0219C8.08085 14.7412 8.08085 14.2861 8.35774 14.0054Z" className="fill-fill-primary"/>
+                    </svg>
+                    <IconArrowInternalReturn size={24} className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity" />
+                  </div>
+                </NavLink>
+              </TooltipTrigger>
+              <TooltipContent side="right" sideOffset={8}>
+                <p>Back to Admin Panel</p>
+              </TooltipContent>
+            </Tooltip>
+          ) : (
+            <NavLink to="/admin" onClick={() => setMobileMenuOpen(false)} className="group flex items-center gap-2 w-full p-2 rounded-lg hover:bg-surface-secondary-hover active:bg-surface-secondary-pressed transition-colors">
+              <div className="relative w-6 h-6 flex-shrink-0">
+                <svg width="24" height="24" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg" className="absolute inset-0 group-hover:opacity-0 transition-opacity">
+                  <path d="M7.5265 4.86842C9.1925 3.17961 9.9701 2.74305 10.9049 2.45584C11.8397 2.16862 12.7957 2.16862 13.7305 2.45584C14.6653 2.74305 15.4429 3.17961 17.1089 4.86842L19.8327 7.62955C21.4987 9.31836 21.9294 10.1066 22.2127 11.0542C22.496 12.0018 22.496 12.9709 22.2127 13.9185C21.9294 14.8661 21.4987 15.6543 19.8327 17.3431L17.1089 20.1042C15.4429 21.793 14.6653 22.2296 13.7305 22.5168C12.7957 22.804 11.8397 22.804 10.9049 22.5168C9.9701 22.2296 9.1925 21.793 7.5265 20.1042L4.80266 17.3431C3.13666 15.6543 2.70599 14.8661 2.42266 13.9185C2.13933 12.9709 2.13933 12.0018 2.42266 11.0542C2.70599 10.1066 3.13666 9.31836 4.80266 7.62955L7.5265 4.86842ZM9.02372 6.30766L6.26118 9.10803C4.96243 10.4246 4.6069 10.9575 4.39663 11.6607C4.23154 12.2128 4.23154 12.7598 4.39663 13.312C4.6048 14.0082 4.95534 14.5374 6.22249 15.8254L9.02375 18.665C10.2943 19.9495 10.8164 20.3048 11.5032 20.5158C12.0479 20.6832 12.5875 20.6832 13.1322 20.5158C13.8259 20.3027 14.3516 19.9423 15.6504 18.6258L18.3742 15.8646C19.6729 14.5481 20.0285 14.0152 20.2387 13.312C20.4038 12.7598 20.4038 12.2128 20.2387 11.6607C20.0285 10.9575 19.6729 10.4246 18.3742 9.10803L15.6504 6.3469C14.3516 5.03038 13.8259 4.66998 13.1322 4.45683C12.5875 4.28948 12.0479 4.28948 11.5032 4.45683C10.8164 4.66784 10.2943 5.02318 9.02372 6.30766ZM15.8147 11.4923C16.3685 10.9309 17.2664 10.9309 17.8202 11.4923C18.3739 12.0537 18.374 12.9638 17.8202 13.5252L13.3535 18.0531C12.7997 18.6144 11.9018 18.6144 11.348 18.0531L10.6958 17.392C10.5739 17.2684 10.5424 17.2107 10.5217 17.1414C10.501 17.0721 10.501 17.0011 10.5217 16.9318C10.5424 16.8625 10.5739 16.8048 10.6958 16.6812L15.8147 11.4923ZM8.35774 14.0054C8.49112 13.8702 8.67213 13.7944 8.86075 13.7949L11.4696 13.801C11.612 13.8013 11.7272 13.9186 11.7268 14.063C11.7267 14.1307 11.7006 14.1958 11.654 14.2444L11.5164 14.3881L9.88948 16.0226C9.73826 16.1745 9.49432 16.174 9.34376 16.0214L8.35774 15.0219C8.08085 14.7412 8.08085 14.2861 8.35774 14.0054Z" className="fill-fill-primary"/>
+                </svg>
+                <IconArrowInternalReturn size={24} className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity" />
+              </div>
+              <span className="text-label-primary text-[13px] font-medium leading-4 whitespace-nowrap">Back to Admin Panel</span>
+            </NavLink>
+          )}
+        </div>
+      );
+    }
+
+    // Show back to company only if provider has a company_id (and user is not an admin)
+    if (destination === 'provider' && currentProvider?.company_id && !hasAdminAccess) {
+      return (
+        <div className="flex items-start self-stretch">
+          {collapsed ? (
+            <Tooltip delayDuration={100}>
+              <TooltipTrigger asChild>
+                <NavLink
+                  to={`/company/${urlCompanyId || currentProvider.company_id}`}
+                  onClick={() => setMobileMenuOpen(false)}
+                  className="group flex items-center justify-center w-full p-2 rounded-lg hover:bg-surface-secondary-hover active:bg-surface-secondary-pressed transition-colors"
+                >
+                  <svg width="24" height="24" viewBox="0 0 32 32" fill="none" className="group-hover:hidden">
+                    <path d="M25 24.6667H7V23H8V8C8 7.44772 8.44772 7 9 7H22C22.5523 7 23 7.44772 23 8V13H25V23H25.6667V24.6667H25ZM21 23H23V15H17V23H19V17H21V23ZM21 13V9H9V23H15V13H21ZM11 15H13V17H11V15ZM11 19H13V21H11V19ZM11 11H13V13H11V11Z" className="fill-fill-primary" />
+                  </svg>
+                  <IconArrowInternalReturn size={24} className="hidden group-hover:block" />
+                </NavLink>
+              </TooltipTrigger>
+              <TooltipContent side="right" sideOffset={8}>
+                <p>Back to Company</p>
+              </TooltipContent>
+            </Tooltip>
+          ) : (
+            <NavLink
+              to={`/company/${urlCompanyId || currentProvider.company_id}`}
+              onClick={() => setMobileMenuOpen(false)}
+              className="group flex items-center gap-2 w-full p-2 rounded-lg hover:bg-surface-secondary-hover active:bg-surface-secondary-pressed transition-colors"
+            >
+              <svg width="24" height="24" viewBox="0 0 32 32" fill="none" className="flex-shrink-0 group-hover:hidden">
+                <path d="M25 24.6667H7V23H8V8C8 7.44772 8.44772 7 9 7H22C22.5523 7 23 7.44772 23 8V13H25V23H25.6667V24.6667H25ZM21 23H23V15H17V23H19V17H21V23ZM21 13V9H9V23H15V13H21ZM11 15H13V17H11V15ZM11 19H13V21H11V19ZM11 11H13V13H11V11Z" className="fill-fill-primary" />
+              </svg>
+              <IconArrowInternalReturn size={24} className="flex-shrink-0 hidden group-hover:block" />
+              <span className="text-label-primary text-[13px] font-medium leading-4 whitespace-nowrap">Back to Company</span>
+            </NavLink>
+          )}
+        </div>
+      );
+    }
+
+    return null;
+  };
+
+  return (
+    <TooltipProvider delayDuration={200}>
+      <aside className={`hidden sm:flex flex-col items-start bg-surface-secondary p-2 border-border-primary fixed top-12 z-20 overflow-y-auto transition-all duration-300 left-0 border-r rtl:left-auto rtl:right-0 rtl:border-r-0 rtl:border-l ${
+        collapsed ? 'w-[72px] h-[calc(100vh-3rem)]' : 'w-[268px] h-[calc(100vh-3rem)]'
+      } ${
+        mobileMenuOpen ? 'max-sm:!flex max-sm:w-full max-sm:h-[calc(100vh-3rem)] max-sm:border-r-0 max-sm:border-l-0' : ''
+      }`}>
+        <div className="flex flex-col items-start gap-1 w-full">
+          {/* Back Navigation (if applicable) */}
+          {renderBackNavigation()}
+
+          {/* Header Content */}
+          <div className="flex w-full flex-col items-start">
+            {renderHeader()}
+          </div>
+
+          {/* Navigation Links */}
+          <nav className="flex flex-col items-start gap-1 w-full pt-2">
+            {navItems.map((item) => (
+              <SidebarNavLink
+                key={item.to}
+                icon={item.icon}
+                label={item.label}
+                to={item.to}
+                end={item.end}
+                destination={destination}
+              />
+            ))}
+          </nav>
+        </div>
+      </aside>
+    </TooltipProvider>
+  );
+};
+
+interface SidebarNavLinkProps {
+  icon: React.ReactNode;
+  label: string;
+  to: string;
+  end?: boolean;
+  destination: Destination;
+}
+
+const SidebarNavLink: React.FC<SidebarNavLinkProps> = ({ icon, label, to, end, destination }) => {
+  const { collapsed, setMobileMenuOpen } = useSidebar();
+  const location = useLocation();
+
+  const handleClick = () => {
+    // Close mobile menu when a nav item is clicked
+    setMobileMenuOpen(false);
+  };
+  
+  const linkContent = (
+    <NavLink
+      to={to}
+      end={end}
+    className={({ isActive }) => {
+        // Special handling for Users to include Roles (admin only)
+        let shouldBeActive = isActive;
+        if (to === '/admin/users' && destination === 'admin') {
+          shouldBeActive = isActive || 
+                          location.pathname === '/admin/roles' ||
+                          location.pathname.startsWith('/admin/roles/');
+        }
+        
+        // Special handling for Settings routes with secondary nav
+        if (to.includes('/settings') && !end) {
+          shouldBeActive = location.pathname.startsWith(to);
+          
+          // For company and provider contexts, user detail pages live under settings/team
+          // but route as /users/:id — keep Settings active for these paths
+          if (!shouldBeActive && (destination === 'company' || destination === 'provider')) {
+            const settingsPrefix = to.replace('/settings', '');
+            shouldBeActive = location.pathname.startsWith(`${settingsPrefix}/users/`) ||
+                            location.pathname.startsWith(`${settingsPrefix}/overview/team`);
+          }
+        }
+
+        // Special handling for Debugging routes with secondary nav  
+        if (to.includes('/debugging') && !end) {
+          shouldBeActive = location.pathname.startsWith(to);
+        }
+
+        // Special handling for Marketing routes
+        if (to.includes('/marketing') && !end) {
+          shouldBeActive = location.pathname.startsWith(to) || 
+                          location.pathname.includes('/marketing');
+        }
+
+        // Special handling for Inventory/Booking Types routes
+        // Match both /inventory and /booking-types paths
+        if (to.includes('/inventory') && destination === 'provider') {
+          const routePrefixMatch = to.replace('/inventory', '');
+          shouldBeActive = location.pathname.startsWith(to) || 
+                          location.pathname.startsWith(`${routePrefixMatch}/booking-types`);
+        }
+
+        // Special handling for Home routes - match based on /home at end of path
+        if (to.endsWith('/home') && end) {
+          shouldBeActive = location.pathname.endsWith('/home');
+        }
+        
+        // Special handling for company home (exact match on company root)
+        if (destination === 'company' && end && !to.includes('/')) {
+          // Company home is the root company path
+          const companyMatch = location.pathname.match(/^\/company\/[^/]+$/);
+          shouldBeActive = !!companyMatch;
+        }
+        
+        return cn(
+          "flex items-center gap-2 w-full p-2 rounded-lg transition-colors hover:bg-surface-secondary-hover active:bg-surface-secondary-pressed max-sm:py-2.5",
+          collapsed ? 'justify-center' : '',
+          shouldBeActive && "bg-gradient-to-tr from-gradient-stop1 via-gradient-stop2 to-gradient-stop3 [&_path]:!fill-fill-primary-alt [&_span]:text-label-primary-alt"
+        );
+      }}
+    >
+      <div className="flex-shrink-0 max-sm:[&_svg]:w-[26px] max-sm:[&_svg]:h-[26px]">
+        {icon}
+      </div>
+      {!collapsed && (
+        <span className="text-[13px] font-medium leading-4 text-label-primary whitespace-nowrap max-sm:text-[15px] max-sm:leading-5">
+          {label}
+        </span>
+      )}
+    </NavLink>
+  );
+
+  const navLinkWithClick = (
+    <div onClick={handleClick} className="w-full">
+      {linkContent}
+    </div>
+  );
+
+  if (collapsed) {
+    return (
+      <Tooltip delayDuration={100}>
+        <TooltipTrigger asChild>
+          <div onClick={handleClick} className="w-full">
+            {linkContent}
+          </div>
+        </TooltipTrigger>
+        <TooltipContent side="right" sideOffset={8}>
+          <p>{label}</p>
+        </TooltipContent>
+      </Tooltip>
+    );
+  }
+
+  return navLinkWithClick;
+};
+
+export default UnifiedSidebar;