@licklist/design 0.78.5-dev.8 → 0.78.5-dev.81

package/src/v2/navigation/DashboardLayout/DashboardLayout.scss

@@ -0,0 +1,96 @@
+.dashboard-layout {
+    display: flex;
+    flex-direction: column;
+    width: 100vw;
+    height: 100vh;
+    background: var(--surfaces-main-background-primary, #ffffff);
+    position: relative;
+    overflow: hidden;
+
+    &__body {
+        display: flex;
+        flex: 1;
+        position: relative;
+        overflow: hidden;
+    }
+
+    &__sidebar {
+        position: fixed;
+        left: 0;
+        top: 48px;
+        bottom: 0;
+        z-index: 20;
+        overflow-y: auto;
+        overflow-x: hidden;
+        transition: width 0.3s ease;
+        background: var(--surfaces-main-background-secondary, #F8F8FA);
+        border-right: 1px solid var(--borders-main-border-primary, #E8E9EF);
+        display: flex;
+        flex-direction: column;
+
+        &--mobile-open {
+            width: 100% !important;
+        }
+
+        .provider-sidebar,
+        .admin-sidebar {
+            flex: 1;
+            border-right: none;
+            height: 100%;
+            overflow-y: auto;
+        }
+    }
+
+    &__main {
+        flex: 1;
+        height: calc(100vh - 48px);
+        display: flex;
+        flex-direction: column;
+        transition: margin-left 0.3s ease;
+        background: var(--surfaces-main-background-primary, #ffffff);
+        overflow: hidden;
+    }
+
+    &__content {
+        flex: 1;
+        overflow-y: auto;
+
+        @media (max-width: 768px) {
+            padding-left: var(--container-padding-mobile, 16px);
+            padding-right: var(--container-padding-mobile, 16px);
+        }
+    }
+
+    &__overlay {
+        position: fixed;
+        inset: 0;
+        background: rgba(0, 0, 0, 0.5);
+        z-index: 15;
+    }
+}
+
+
+@media (max-width: 768px) {
+    .dashboard-layout {
+        &__sidebar {
+            display: none;
+            width: 0 !important;
+            
+            &--mobile-open {
+                display: flex;
+                width: 100% !important;
+                height: calc(100vh - 48px) !important;
+                top: 48px !important;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                z-index: 25;
+                background: var(--surfaces-main-background-secondary, #F8F8FA);
+            }
+        }
+
+        &__main {
+            margin-left: 0 !important;
+        }
+    }
+}

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

@@ -0,0 +1,370 @@
+import { Meta, StoryObj } from '@storybook/react'
+import React, { useState } from 'react'
+import { DashboardLayout, DestinationType } from './DashboardLayout'
+import { Dashboard } from '../../dashboard-analytics/dashboard/Dashboard'
+import { UserPanel } from '../../components/UserPanel'
+
+export default {
+    title: 'v2/Dashboard Layout/Combined Layout',
+    component: DashboardLayout,
+    argTypes: {
+        destination: {
+            control: 'select',
+            options: ['admin', 'provider', 'company'],
+            description: 'The type of dashboard destination',
+        },
+        sidebarExpanded: {
+            control: 'boolean',
+            description: 'Whether the sidebar is expanded',
+        },
+        providerName: {
+            control: 'text',
+            description: 'Name of the venue/provider',
+        },
+        providerId: {
+            control: 'text',
+            description: 'ID of the venue/provider',
+        },
+        userInitials: {
+            control: 'text',
+            description: 'User initials to display in top hat',
+        },
+        inboxCount: {
+            control: 'number',
+            description: 'Number of inbox notifications',
+        },
+        bellCount: {
+            control: 'number',
+            description: 'Number of bell notifications',
+        },
+        hasAdminAccess: {
+            control: 'boolean',
+            description: 'Whether user has admin access',
+        },
+        isMobile: {
+            control: 'boolean',
+            description: 'Mobile view mode',
+        },
+        onSidebarToggle: { action: 'sidebar toggled' },
+        onNavigation: { action: 'navigation clicked' },
+        onUserClick: { action: 'user clicked' },
+        onInboxClick: { action: 'inbox clicked' },
+        onBellClick: { action: 'bell clicked' },
+    },
+    parameters: {
+        layout: 'fullscreen',
+    },
+} as Meta<typeof DashboardLayout>
+
+type Story = StoryObj<typeof DashboardLayout>
+
+const SampleContent: React.FC<{ title: string; description?: string }> = ({ title, description }) => (
+    <div style={{ padding: '24px' }}>
+        <h1 style={{ 
+            fontFamily: 'var(--font-family-sans)', 
+            fontSize: '24px', 
+            fontWeight: 600, 
+            color: 'var(--labels-main-label-primary)',
+            marginBottom: '16px'
+        }}>
+            {title}
+        </h1>
+        {description && (
+            <p style={{ 
+                fontFamily: 'var(--font-family-sans)', 
+                fontSize: '14px', 
+                color: 'var(--labels-main-label-secondary)',
+                marginBottom: '24px'
+            }}>
+                {description}
+            </p>
+        )}
+        <div style={{
+            display: 'grid',
+            gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
+            gap: '16px',
+        }}>
+            {[1, 2, 3, 4].map((i) => (
+                <div 
+                    key={i}
+                    style={{
+                        background: 'var(--surfaces-main-background-secondary)',
+                        borderRadius: '12px',
+                        padding: '20px',
+                        border: '1px solid var(--borders-main-border-primary)',
+                    }}
+                >
+                    <div style={{ 
+                        fontFamily: 'var(--font-family-sans)', 
+                        fontSize: '14px', 
+                        fontWeight: 500,
+                        color: 'var(--labels-main-label-secondary)',
+                        marginBottom: '8px'
+                    }}>
+                        Card {i}
+                    </div>
+                    <div style={{ 
+                        fontFamily: 'var(--font-family-sans)', 
+                        fontSize: '28px', 
+                        fontWeight: 600,
+                        color: 'var(--labels-main-label-primary)'
+                    }}>
+                        {Math.floor(Math.random() * 1000)}
+                    </div>
+                </div>
+            ))}
+        </div>
+    </div>
+)
+
+export const Default: Story = {
+    args: {
+        destination: 'provider',
+        sidebarExpanded: true,
+        providerName: "Sharky's Soft Play",
+        providerId: "123",
+        userInitials: 'GA',
+        inboxCount: 3,
+        bellCount: 12,
+        activePath: '/home',
+        hasAdminAccess: false,
+    },
+    render: (args) => (
+        <DashboardLayout {...args}>
+            <SampleContent 
+                title="Provider Dashboard" 
+                description="Combined layout with top navigation and sidebar working together."
+            />
+        </DashboardLayout>
+    ),
+}
+
+export const Interactive: Story = {
+    render: function InteractiveStory(args) {
+        const [destination, setDestination] = useState<DestinationType>('admin')
+        const [expanded, setExpanded] = useState(false)
+        const [currentPath, setCurrentPath] = useState('/home')
+        const [inboxCount, setInboxCount] = useState(0)
+        const [bellCount, setBellCount] = useState(12)
+        const [userPanelOpen, setUserPanelOpen] = useState(false)
+
+        const destinations: { type: DestinationType; label: string }[] = [
+            { type: 'admin', label: 'Admin' },
+            { type: 'company', label: 'Company' },
+            { type: 'provider', label: 'Provider' },
+        ]
+
+        return (
+            <>
+                <DashboardLayout
+                    {...args}
+                    destination={destination}
+                    sidebarExpanded={expanded}
+                    onSidebarToggle={() => setExpanded(!expanded)}
+                    activePath={currentPath}
+                    onNavigation={(path) => {
+                        setCurrentPath(path)
+                        if (path === '/admin') {
+                            setDestination('admin')
+                        }
+                    }}
+                    inboxCount={inboxCount}
+                    bellCount={bellCount}
+                    onInboxClick={() => setInboxCount(0)}
+                    onBellClick={() => setBellCount(0)}
+                    onUserClick={() => setUserPanelOpen(true)}
+                    userPanelOpen={userPanelOpen}
+                    hasAdminAccess={true}
+                >
+                    <div style={{ padding: '24px' }}>
+                        <h1 style={{ 
+                            fontFamily: 'var(--font-family-sans)', 
+                            fontSize: '24px', 
+                            fontWeight: 600, 
+                            color: 'var(--labels-main-label-primary)',
+                            marginBottom: '16px'
+                        }}>
+                            Interactive Combined Layout
+                        </h1>
+                        
+                        <div style={{ display: 'flex', gap: '8px', marginBottom: '16px', flexWrap: 'wrap' }}>
+                            {destinations.map(dest => (
+                                <button
+                                    key={dest.type}
+                                    onClick={() => setDestination(dest.type)}
+                                    style={{
+                                        padding: '8px 16px',
+                                        backgroundColor: destination === dest.type ? 'var(--fills-main-fill-primary)' : 'var(--surfaces-main-background-secondary)',
+                                        color: destination === dest.type ? 'white' : 'var(--labels-main-label-primary)',
+                                        border: '1px solid var(--borders-main-border-primary)',
+                                        borderRadius: '6px',
+                                        cursor: 'pointer',
+                                        fontFamily: 'var(--font-family-sans)',
+                                        fontSize: '13px',
+                                    }}
+                                >
+                                    {dest.label}
+                                </button>
+                            ))}
+                            <button
+                                onClick={() => setExpanded(!expanded)}
+                                style={{
+                                    padding: '8px 16px',
+                                    backgroundColor: 'var(--surfaces-main-surface-tertiary)',
+                                    color: 'var(--labels-main-label-primary)',
+                                    border: '1px solid var(--borders-main-border-primary)',
+                                    borderRadius: '6px',
+                                    cursor: 'pointer',
+                                    fontFamily: 'var(--font-family-sans)',
+                                    fontSize: '13px',
+                                }}
+                            >
+                                {expanded ? 'Collapse' : 'Expand'} Sidebar
+                            </button>
+                        </div>
+
+                        <p style={{ fontFamily: 'var(--font-family-sans)', fontSize: '13px', color: 'var(--labels-main-label-secondary)' }}>
+                            Destination: <strong>{destination}</strong> | 
+                            Sidebar: <strong>{expanded ? 'Expanded' : 'Collapsed'}</strong> | 
+                            Inbox: <strong>{inboxCount}</strong> | 
+                            Notifications: <strong>{bellCount}</strong>
+                        </p>
+                    </div>
+                </DashboardLayout>
+
+                <UserPanel
+                    isOpen={userPanelOpen}
+                    onClose={() => setUserPanelOpen(false)}
+                    userName="Godwin Adebimpe"
+                    firstName="Godwin"
+                    email="godwin.adebimpe@booked.it"
+                    initials="GA"
+                    userNumber={15}
+                    userRole="Super Admin"
+                    onProfileClick={() => {
+                        console.log('Profile clicked')
+                        setUserPanelOpen(false)
+                    }}
+                    onLogoutClick={() => {
+                        console.log('Logout clicked')
+                        setUserPanelOpen(false)
+                    }}
+                />
+            </>
+        )
+    },
+    args: {
+        providerName: "Sharky's Soft Play",
+        providerId: "123",
+        companyName: "Entertainment Ltd",
+        companyId: "C-789",
+        userInitials: 'GA',
+    },
+}
+
+const mockMetrics = {
+    totalBookings: { value: '24', change: '+8 vs yesterday', is_positive: true },
+    revenue: { value: '£1,240.50', change: '+£450 vs yesterday', is_positive: true },
+    numberOfPeople: { value: '89', change: '+12 vs yesterday', is_positive: true },
+    busiestTime: { value: '14:00 - 15:00', peopleText: '18 people', bookingText: '6 bookings' },
+    workHours: { company_name: "Sharky's Soft Play", is_open: true, status: 'Open', message: 'Open until 18:00', opens_at: '09:00' },
+    peopleInVenue: { value: '30', formatted_value: '30', description: 'people currently in venue' }
+}
+
+const mockBookingsData = [
+    { time: '09:00', value: 8, participants: 16 },
+    { time: '10:00', value: 6, participants: 12 },
+    { time: '11:00', value: 7, participants: 14 },
+    { time: '12:00', value: 8, participants: 16 },
+    { time: '13:00', value: 9, participants: 18 },
+    { time: '14:00', value: 6, participants: 12 },
+    { time: '15:00', value: 5, participants: 10 },
+]
+
+const mockRevenueData = [
+    { time: '09:00', value: 125.75 },
+    { time: '10:00', value: 95.50 },
+    { time: '11:00', value: 110.25 },
+    { time: '12:00', value: 128.00 },
+    { time: '13:00', value: 145.75 },
+    { time: '14:00', value: 98.50 },
+    { time: '15:00', value: 85.25 },
+]
+
+type TimeFilter = 'Today' | 'Yesterday' | 'This Week'
+
+export const LayoutWithDashboard: Story = {
+    render: function LayoutWithDashboardStory() {
+        const [destination, setDestination] = useState<DestinationType>('provider')
+        const [expanded, setExpanded] = useState(true)
+        const [currentPath, setCurrentPath] = useState('/home')
+        const [timeFilter, setTimeFilter] = useState<TimeFilter>('Today')
+        const [userPanelOpen, setUserPanelOpen] = useState(false)
+
+        const handleNavigation = (path: string) => {
+            setCurrentPath(path)
+            if (path === '/admin') {
+                setDestination('admin')
+            }
+        }
+
+        return (
+            <>
+                <DashboardLayout
+                    destination={destination}
+                    sidebarExpanded={expanded}
+                    onSidebarToggle={() => setExpanded(!expanded)}
+                    activePath={currentPath}
+                    onNavigation={handleNavigation}
+                    providerName="Sharky's Soft Play"
+                    providerId="123"
+                    userInitials="GA"
+                    userName="Godwin"
+                    inboxCount={3}
+                    bellCount={12}
+                    hasAdminAccess={true}
+                    onUserClick={() => setUserPanelOpen(true)}
+                    userPanelOpen={userPanelOpen}
+                >
+                    {currentPath === '/home' ? (
+                        <Dashboard
+                            timeFilter={timeFilter}
+                            metrics={mockMetrics}
+                            bookingsChart={{ title: 'Bookings', subtitle: 'Today', data: mockBookingsData, isRevenue: false }}
+                            revenueChart={{ title: 'Revenue', subtitle: 'Today', data: mockRevenueData, isRevenue: true }}
+                            onFilterChange={setTimeFilter}
+                        />
+                    ) : (
+                        <div style={{ padding: '24px' }}>
+                            <h1 style={{ fontFamily: 'var(--font-family-sans)', fontSize: '24px', fontWeight: 600, color: 'var(--labels-main-label-primary)', marginBottom: '16px' }}>
+                                {currentPath.replace('/', '').replace(/-/g, ' ').replace(/\b\w/g, l => l.toUpperCase()) || 'Page'}
+                            </h1>
+                            <p style={{ fontFamily: 'var(--font-family-sans)', fontSize: '14px', color: 'var(--labels-main-label-secondary)' }}>
+                                Content for {currentPath} will be displayed here.
+                            </p>
+                        </div>
+                    )}
+                </DashboardLayout>
+
+                <UserPanel
+                    isOpen={userPanelOpen}
+                    onClose={() => setUserPanelOpen(false)}
+                    userName="Godwin Adebimpe"
+                    firstName="Godwin"
+                    email="godwin.adebimpe@booked.it"
+                    initials="GA"
+                    userNumber={15}
+                    userRole="Super Admin"
+                    onProfileClick={() => {
+                        console.log('Profile clicked')
+                        setUserPanelOpen(false)
+                    }}
+                    onLogoutClick={() => {
+                        console.log('Logout clicked')
+                        setUserPanelOpen(false)
+                    }}
+                />
+            </>
+        )
+    },
+}

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

@@ -0,0 +1,234 @@
+import React, { useState, useEffect, useCallback } from 'react'
+import { TopNavigation } from './TopNavigation'
+import { ProviderSidebar, NavItem } from './ProviderSidebar'
+import { AdminSidebar } from './AdminSidebar'
+import { DashboardFooter } from './DashboardFooter'
+import './DashboardLayout.scss'
+
+export type DestinationType = 'admin' | 'provider' | 'company'
+
+export interface DashboardLayoutProps {
+    
+    destination: DestinationType
+    
+    sidebarExpanded?: boolean
+    
+    onSidebarToggle?: () => void
+    
+    providerName?: string
+    
+    providerId?: string
+    
+    providerImage?: string
+    
+    providerType?: 'venue' | 'promoter'
+    
+    companyName?: string
+    
+    companyId?: string
+    
+    companyImage?: string
+    
+    userInitials?: string
+    
+    userName?: string
+
+    userEmail?: string
+
+    userId?: number
+
+    userRole?: string
+    
+    inboxCount?: number
+    
+    bellCount?: number
+    
+    activePath?: string
+    
+    onNavigation?: (path: string) => void
+    
+    onUserClick?: () => void
+    
+    onInboxClick?: () => void
+    
+    onBellClick?: () => void
+    
+    onHelpClick?: () => void
+
+    onProfileClick?: () => void
+
+    onLogoutClick?: () => void
+    
+    hasAdminAccess?: boolean
+    
+    children?: React.ReactNode
+    
+    isMobile?: boolean
+    
+    version?: string
+    
+    showFooter?: boolean
+
+    userPanelOpen?: boolean
+
+    /** Custom navigation items for provider sidebar */
+    navItems?: NavItem[]
+}
+
+export const DashboardLayout: React.FC<DashboardLayoutProps> = ({
+    destination,
+    sidebarExpanded,
+    onSidebarToggle,
+    providerName,
+    providerId,
+    providerImage,
+    providerType = 'venue',
+    companyName,
+    companyId,
+    companyImage,
+    userInitials,
+    userName,
+    userEmail,
+    userId,
+    userRole,
+    inboxCount = 0,
+    bellCount = 0,
+    activePath = '/home',
+    onNavigation,
+    onUserClick,
+    onInboxClick,
+    onBellClick,
+    onHelpClick,
+    onProfileClick,
+    onLogoutClick,
+    hasAdminAccess = false,
+    children,
+    isMobile = false,
+    version,
+    showFooter = true,
+    userPanelOpen = false,
+    navItems,
+}) => {
+    const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
+
+    const handleKeyDown = useCallback((event: KeyboardEvent) => {
+        const target = event.target as HTMLElement
+        if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable) {
+            return
+        }
+
+        if (event.key === '[' && sidebarExpanded) {
+            onSidebarToggle?.()
+        } else if (event.key === ']' && !sidebarExpanded) {
+            onSidebarToggle?.()
+        }
+    }, [sidebarExpanded, onSidebarToggle])
+
+    useEffect(() => {
+        document.addEventListener('keydown', handleKeyDown)
+        return () => document.removeEventListener('keydown', handleKeyDown)
+    }, [handleKeyDown])
+
+    const handleSidebarToggle = () => {
+        if (isMobile) {
+            setMobileMenuOpen(!mobileMenuOpen)
+        } else {
+            onSidebarToggle?.()
+        }
+    }
+
+    const renderSidebar = () => {
+        if (destination === 'admin') {
+            return (
+                <AdminSidebar
+                    expanded={sidebarExpanded}
+                    activePath={activePath}
+                    onNavigation={onNavigation}
+                />
+            )
+        }
+
+        return (
+            <ProviderSidebar
+                expanded={sidebarExpanded}
+                providerName={destination === 'company' ? companyName : providerName}
+                providerId={destination === 'company' ? companyId : providerId}
+                providerImage={destination === 'company' ? companyImage : providerImage}
+                providerType={providerType}
+                activePath={activePath}
+                onNavigation={onNavigation}
+                showBackToAdmin={hasAdminAccess && destination !== 'admin'}
+                onBackToAdmin={() => onNavigation?.('/admin')}
+                navItems={navItems}
+            />
+        )
+    }
+
+    const sidebarWidth = sidebarExpanded ? 268 : 72
+    const topHatHeight = 48
+
+    return (
+        <div className="dashboard-layout">
+            
+            <TopNavigation
+                sidebarCollapsed={!sidebarExpanded}
+                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}
+            />
+
+            
+            <div className="dashboard-layout__body">
+                
+                <aside 
+                    className={`dashboard-layout__sidebar ${mobileMenuOpen ? 'dashboard-layout__sidebar--mobile-open' : ''}`}
+                    style={{ 
+                        width: isMobile ? (mobileMenuOpen ? '100%' : 0) : sidebarWidth,
+                        top: topHatHeight 
+                    }}
+                >
+                    {renderSidebar()}
+                </aside>
+
+                
+                <main 
+                    id="scrollable"
+                    className="dashboard-layout__main"
+                    style={{ 
+                        marginLeft: isMobile ? 0 : sidebarWidth,
+                        marginTop: topHatHeight 
+                    }}
+                >
+                    <div id="main" className="dashboard-layout__content">
+                        {children}
+                    </div>
+                    {showFooter && <DashboardFooter version={version} />}
+                </main>
+            </div>
+
+            
+            {isMobile && mobileMenuOpen && (
+                <div 
+                    className="dashboard-layout__overlay"
+                    onClick={() => setMobileMenuOpen(false)}
+                />
+            )}
+        </div>
+    )
+}
+
+export default DashboardLayout