@licklist/design 0.78.5-dev.35 → 0.78.5-dev.36

package/src/v2/navigation/DashboardLayout/DashboardLayout.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 import { TopNavigation } from './TopNavigation'
-import { ProviderSidebar } from './ProviderSidebar'
+import { ProviderSidebar, NavItem } from './ProviderSidebar'
 import { AdminSidebar } from './AdminSidebar'
 import { DashboardFooter } from './DashboardFooter'
 import './DashboardLayout.scss'
@@ -32,6 +32,12 @@ export interface DashboardLayoutProps {
     userInitials?: string
     
     userName?: string
+
+    userEmail?: string
+
+    userId?: number
+
+    userRole?: string
     
     inboxCount?: number
     
@@ -48,6 +54,10 @@ export interface DashboardLayoutProps {
     onBellClick?: () => void
     
     onHelpClick?: () => void
+
+    onProfileClick?: () => void
+
+    onLogoutClick?: () => void
     
     hasAdminAccess?: boolean
     
@@ -60,35 +70,44 @@ export interface DashboardLayoutProps {
     showFooter?: boolean
 
     userPanelOpen?: boolean
+
+    /** Custom navigation items for provider sidebar */
+    navItems?: NavItem[]
 }
 
 export const DashboardLayout: React.FC<DashboardLayoutProps> = ({
-    destination = 'provider',
-    sidebarExpanded = true,
+    destination,
+    sidebarExpanded,
     onSidebarToggle,
-    providerName = "Sharky's Soft Play",
-    providerId = "123",
+    providerName,
+    providerId,
     providerImage,
     providerType = 'venue',
-    companyName = "Entertainment Group",
-    companyId = "456",
+    companyName,
+    companyId,
     companyImage,
-    userInitials = "GA",
-    userName = "Godwin",
-    inboxCount = 3,
-    bellCount = 12,
+    userInitials,
+    userName,
+    userEmail,
+    userId,
+    userRole,
+    inboxCount = 0,
+    bellCount = 0,
     activePath = '/home',
     onNavigation,
     onUserClick,
     onInboxClick,
     onBellClick,
     onHelpClick,
+    onProfileClick,
+    onLogoutClick,
     hasAdminAccess = false,
     children,
     isMobile = false,
-    version = '1.0.0',
+    version,
     showFooter = true,
     userPanelOpen = false,
+    navItems,
 }) => {
     const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
 
@@ -122,6 +141,7 @@ export const DashboardLayout: React.FC<DashboardLayoutProps> = ({
                 onNavigation={onNavigation}
                 showBackToAdmin={hasAdminAccess && destination !== 'admin'}
                 onBackToAdmin={() => onNavigation?.('/admin')}
+                navItems={navItems}
             />
         )
     }
@@ -137,12 +157,17 @@ export const DashboardLayout: React.FC<DashboardLayoutProps> = ({
                 onSidebarToggle={handleSidebarToggle}
                 userInitials={userInitials}
                 userName={userName}
+                userEmail={userEmail}
+                userId={userId}
+                userRole={userRole}
                 inboxCount={inboxCount}
                 notificationCount={bellCount}
                 onUserClick={onUserClick}
                 onInboxClick={onInboxClick}
                 onNotificationClick={onBellClick}
                 onHelpClick={onHelpClick}
+                onProfileClick={onProfileClick}
+                onLogoutClick={onLogoutClick}
                 mobileMenuOpen={mobileMenuOpen}
                 onMobileMenuToggle={() => setMobileMenuOpen(!mobileMenuOpen)}
                 userPanelOpen={userPanelOpen}

package/src/v2/navigation/DashboardLayout/ProviderSidebar.tsx

@@ -3,6 +3,14 @@ import './ProviderSidebar.scss'
 import { EntityHeader } from '../../components/EntityHeader'
 import { Tooltip } from '../../components/Tooltip'
 
+export interface NavItem {
+    id: string
+    label: string
+    path: string
+    icon: React.ReactNode
+    end?: boolean
+}
+
 export interface ProviderSidebarProps {
     expanded?: boolean
     providerName?: string
@@ -13,14 +21,8 @@ export interface ProviderSidebarProps {
     activePath?: string
     showBackToAdmin?: boolean
     onBackToAdmin?: () => void
-}
-
-interface NavItem {
-    id: string
-    label: string
-    path: string
-    icon: React.ReactNode
-    end?: boolean
+    /** Custom navigation items - if not provided, uses default items */
+    navItems?: NavItem[]
 }
 
 
@@ -96,30 +98,46 @@ const BackArrowIcon = () => (
     </svg>
 )
 
+// Export icons for reuse
+export {
+    HomeIcon,
+    FlowsIcon,
+    InventoryIcon,
+    LoyaltyIcon,
+    CustomersIcon,
+    ReportsIcon,
+    AnalyticsIcon,
+    MarketingIcon,
+    WaiversIcon,
+    SettingsIcon,
+}
+
+// Default navigation items
+const defaultNavItems: NavItem[] = [
+    { id: 'home', label: 'Home', path: '/home', icon: <HomeIcon />, end: true },
+    { id: 'flows', label: 'Flows', path: '/flows', icon: <FlowsIcon /> },
+    { id: 'inventory', label: 'Inventory', path: '/inventory', icon: <InventoryIcon /> },
+    { id: 'loyalty', label: 'Loyalty', path: '/loyalty', icon: <LoyaltyIcon /> },
+    { id: 'customers', label: 'Customers', path: '/customers', icon: <CustomersIcon /> },
+    { id: 'reports', label: 'Reports', path: '/reports', icon: <ReportsIcon /> },
+    { id: 'analytics', label: 'Analytics', path: '/analytics', icon: <AnalyticsIcon /> },
+    { id: 'marketing', label: 'Marketing', path: '/marketing', icon: <MarketingIcon /> },
+    { id: 'waivers', label: 'Waivers', path: '/waivers', icon: <WaiversIcon /> },
+    { id: 'settings', label: 'Settings', path: '/settings', icon: <SettingsIcon /> },
+]
+
 export const ProviderSidebar: React.FC<ProviderSidebarProps> = ({
     expanded = true,
-    providerName = "Sharky's Soft Play",
-    providerId = '01',
+    providerName,
+    providerId,
     providerImage,
     providerType = 'venue',
     onNavigation,
     activePath = '/home',
     showBackToAdmin = false,
     onBackToAdmin,
+    navItems = defaultNavItems,
 }) => {
-    
-    const navItems: NavItem[] = [
-        { id: 'home', label: 'Home', path: '/home', icon: <HomeIcon />, end: true },
-        { id: 'flows', label: 'Flows', path: '/flows', icon: <FlowsIcon /> },
-        { id: 'inventory', label: 'Inventory', path: '/inventory', icon: <InventoryIcon /> },
-        { id: 'loyalty', label: 'Loyalty', path: '/loyalty', icon: <LoyaltyIcon /> },
-        { id: 'customers', label: 'Customers', path: '/customers', icon: <CustomersIcon /> },
-        { id: 'reports', label: 'Reports', path: '/reports', icon: <ReportsIcon /> },
-        { id: 'analytics', label: 'Analytics', path: '/analytics', icon: <AnalyticsIcon /> },
-        { id: 'marketing', label: 'Marketing', path: '/marketing', icon: <MarketingIcon /> },
-        { id: 'waivers', label: 'Waivers', path: '/waivers', icon: <WaiversIcon /> },
-        { id: 'settings', label: 'Settings', path: '/settings', icon: <SettingsIcon /> },
-    ]
 
     const isActive = (item: NavItem) => {
         if (item.end) {

package/src/v2/navigation/DashboardLayout/TopNavigation.tsx

@@ -3,18 +3,25 @@ import './TopNavigation.scss'
 import BookedLogoMark from './assets/BookedLogo_Mark.png'
 import { UserAvatar } from '../../components/UserAvatar'
 import { Tooltip } from '../../components/Tooltip'
+import { UserPanel } from '../../components/UserPanel'
+
 export interface TopNavigationProps {
     sidebarCollapsed?: boolean
     onSidebarToggle?: () => void
     userInitials?: string
     userName?: string
+    userEmail?: string
     userAvatarUrl?: string
+    userId?: number
+    userRole?: string
     inboxCount?: number
     notificationCount?: number
     onUserClick?: () => void
     onInboxClick?: () => void
     onNotificationClick?: () => void
     onHelpClick?: () => void
+    onProfileClick?: () => void
+    onLogoutClick?: () => void
     mobileMenuOpen?: boolean
     onMobileMenuToggle?: () => void
     sidebarToggleDisabled?: boolean
@@ -124,17 +131,22 @@ export const TopNavigation: React.FC<TopNavigationProps> = ({
     onSidebarToggle,
     userInitials = 'U',
     userName = 'User',
+    userEmail,
     userAvatarUrl,
+    userId,
+    userRole,
     inboxCount = 0,
     notificationCount = 0,
     onUserClick,
     onInboxClick,
     onNotificationClick,
     onHelpClick,
+    onProfileClick,
+    onLogoutClick,
     mobileMenuOpen = false,
     onMobileMenuToggle,
     sidebarToggleDisabled = false,
-    userPanelOpen,
+    userPanelOpen = false,
 }) => {
     const [hoveredItem, setHoveredItem] = useState<string | null>(null)
     const [isNotificationActive, setIsNotificationActive] = useState(false)
@@ -239,6 +251,20 @@ export const TopNavigation: React.FC<TopNavigationProps> = ({
                     </button>
                 </Tooltip>
             </div>
+
+            {/* User Panel */}
+            <UserPanel
+                isOpen={userPanelOpen}
+                onClose={() => onUserClick?.()}
+                userName={userName}
+                email={userEmail}
+                initials={userInitials}
+                avatarUrl={userAvatarUrl}
+                userNumber={userId}
+                userRole={userRole}
+                onProfileClick={onProfileClick}
+                onLogoutClick={onLogoutClick}
+            />
         </header>
     )
 }

package/src/v2/navigation/DashboardLayout/index.ts

@@ -1,5 +1,19 @@
 export { DashboardLayout, type DashboardLayoutProps, type DestinationType } from './DashboardLayout'
-export { ProviderSidebar, type ProviderSidebarProps } from './ProviderSidebar'
+export { 
+    ProviderSidebar, 
+    type ProviderSidebarProps, 
+    type NavItem,
+    HomeIcon,
+    FlowsIcon,
+    InventoryIcon,
+    LoyaltyIcon,
+    CustomersIcon,
+    ReportsIcon,
+    AnalyticsIcon,
+    MarketingIcon,
+    WaiversIcon,
+    SettingsIcon,
+} from './ProviderSidebar'
 export { AdminSidebar, type AdminSidebarProps } from './AdminSidebar'
 export { TopNavigation, type TopNavigationProps } from './TopNavigation'
 export { DashboardFooter, type DashboardFooterProps } from './DashboardFooter'