@licklist/design 0.78.5-dev.9 → 0.78.5-dev.90

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

@@ -0,0 +1,201 @@
+import { Meta, StoryObj } from '@storybook/react'
+import React from 'react'
+import { FigmasTopHat } from './FigmasTopHat'
+
+export default {
+    title: 'v2/Navigation/Figma Top Hat',
+    component: FigmasTopHat,
+    argTypes: {
+        variant: {
+            control: 'select',
+            options: ['desktop', 'mobile'],
+            description: 'Desktop or mobile variant',
+        },
+        inboxCount: {
+            control: 'number',
+            description: 'Number of inbox notifications',
+        },
+        bellCount: {
+            control: 'number',
+            description: 'Number of bell notifications',
+        },
+        userInitials: {
+            control: 'text',
+            description: 'User initials to display',
+        },
+        onSidebarToggle: { action: 'sidebar toggle clicked' },
+        onUserClick: { action: 'user clicked' },
+        onInboxClick: { action: 'inbox clicked' },
+        onBellClick: { action: 'bell clicked' },
+        onDiscClick: { action: 'disc clicked' },
+    },
+    parameters: {
+        layout: 'fullscreen',
+    },
+} as Meta
+
+type Story = StoryObj<typeof FigmasTopHat>
+
+export const Desktop: Story = {
+    args: {
+        variant: 'desktop',
+        inboxCount: 3,
+        bellCount: 12,
+        userInitials: 'WW',
+    },
+    decorators: [
+        (Story) => (
+            <div style={{ width: '100%', height: '60px', borderBottom: '1px solid #E8E9EF' }}>
+                <Story />
+            </div>
+        ),
+    ],
+}
+
+export const Mobile: Story = {
+    args: {
+        variant: 'mobile',
+        inboxCount: 3,
+        bellCount: 12,
+        userInitials: 'WW',
+    },
+    decorators: [
+        (Story) => (
+            <div style={{ width: '370px', height: '60px', borderBottom: '1px solid #E8E9EF' }}>
+                <Story />
+            </div>
+        ),
+    ],
+}
+
+export const DesktopNoNotifications: Story = {
+    args: {
+        variant: 'desktop',
+        inboxCount: 0,
+        bellCount: 0,
+        userInitials: 'JD',
+    },
+    decorators: [
+        (Story) => (
+            <div style={{ width: '100%', height: '60px', borderBottom: '1px solid #E8E9EF' }}>
+                <Story />
+            </div>
+        ),
+    ],
+}
+
+export const MobileNoNotifications: Story = {
+    args: {
+        variant: 'mobile',
+        inboxCount: 0,
+        bellCount: 0,
+        userInitials: 'JD',
+    },
+    decorators: [
+        (Story) => (
+            <div style={{ width: '370px', height: '60px', borderBottom: '1px solid #E8E9EF' }}>
+                <Story />
+            </div>
+        ),
+    ],
+}
+
+export const DesktopHighNotifications: Story = {
+    args: {
+        variant: 'desktop',
+        inboxCount: 99,
+        bellCount: 5,
+        userInitials: 'AB',
+    },
+    decorators: [
+        (Story) => (
+            <div style={{ width: '100%', height: '60px', borderBottom: '1px solid #E8E9EF' }}>
+                <Story />
+            </div>
+        ),
+    ],
+}
+
+export const MobileHighNotifications: Story = {
+    args: {
+        variant: 'mobile',
+        inboxCount: 99,
+        bellCount: 5,
+        userInitials: 'AB',
+    },
+    decorators: [
+        (Story) => (
+            <div style={{ width: '370px', height: '60px', borderBottom: '1px solid #E8E9EF' }}>
+                <Story />
+            </div>
+        ),
+    ],
+}
+
+export const Interactive: Story = {
+    render: function (args) {
+        const [variant, setVariant] = React.useState<'desktop' | 'mobile'>('desktop');
+        const [inboxCount, setInboxCount] = React.useState(3);
+        const [bellCount, setBellCount] = React.useState(12);
+
+        return (
+            <div style={{ width: variant === 'desktop' ? '100%' : '370px', height: '60px', borderBottom: '1px solid #E8E9EF' }}>
+                <FigmasTopHat
+                    {...args}
+                    variant={variant}
+                    inboxCount={inboxCount}
+                    bellCount={bellCount}
+                    onSidebarToggle={() => alert('Sidebar toggle clicked!')}
+                    onUserClick={() => alert('User clicked!')}
+                    onInboxClick={() => setInboxCount(0)}
+                    onBellClick={() => setBellCount(0)}
+                    onDiscClick={() => alert('Disc clicked!')}
+                />
+                <div style={{ position: 'absolute', top: '70px', left: '16px', display: 'flex', gap: '8px', flexDirection: 'column' }}>
+                    <button
+                        onClick={() => setVariant(variant === 'desktop' ? 'mobile' : 'desktop')}
+                        style={{
+                            padding: '8px 16px',
+                            backgroundColor: '#14215A',
+                            color: 'white',
+                            border: 'none',
+                            borderRadius: '4px',
+                            cursor: 'pointer'
+                        }}
+                    >
+                        Toggle {variant === 'desktop' ? 'Mobile' : 'Desktop'}
+                    </button>
+                    <button
+                        onClick={() => setInboxCount(Math.floor(Math.random() * 20))}
+                        style={{
+                            padding: '8px 16px',
+                            backgroundColor: '#e9faf7',
+                            color: '#121E52',
+                            border: '1px solid #E8E9EF',
+                            borderRadius: '4px',
+                            cursor: 'pointer'
+                        }}
+                    >
+                        Random Inbox Count
+                    </button>
+                    <button
+                        onClick={() => setBellCount(Math.floor(Math.random() * 20))}
+                        style={{
+                            padding: '8px 16px',
+                            backgroundColor: '#fff2e8',
+                            color: '#121E52',
+                            border: '1px solid #E8E9EF',
+                            borderRadius: '4px',
+                            cursor: 'pointer'
+                        }}
+                    >
+                        Random Bell Count
+                    </button>
+                </div>
+            </div>
+        );
+    },
+    args: {
+        userInitials: 'WW',
+    },
+}

package/src/v2/navigation/FigmasTopHat/FigmasTopHat.tsx

@@ -0,0 +1,158 @@
+import React from 'react'
+import './FigmasTopHat.scss'
+import logoDesktop1 from './assets/logo-desktop-1.svg'
+import logoDesktop2 from './assets/logo-desktop-2.svg'
+import discIcon from './assets/disc-icon.svg'
+import inboxIcon from './assets/inbox-icon.svg'
+import bellIcon from './assets/bell-icon.svg'
+import userIcon from './assets/user-icon.svg'
+
+// Image assets loaded from local assets folder
+const SidebarToggleIcon = () => (
+    <svg width="24" height="20" viewBox="0 0 24 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <rect x="3" y="3" width="18" height="2" rx="1" fill="var(--fills-main-fill-primary, #14215A)" />
+        <rect x="3" y="9" width="18" height="2" rx="1" fill="var(--fills-main-fill-primary, #14215A)" />
+        <rect x="3" y="15" width="18" height="2" rx="1" fill="var(--fills-main-fill-primary, #14215A)" />
+    </svg>
+)
+
+const MobileLogoShape1 = () => (
+    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M9 1L11.5 5.5L16.5 6L13 9L14 14L9 11.5L4 14L5 9L1.5 6L6.5 5.5L9 1Z" fill="var(--fills-main-fill-primary, #14215A)" stroke="var(--fills-main-fill-primary, #14215A)" strokeWidth="0.5" />
+    </svg>
+)
+
+const MobileLogoShape2 = () => (
+    <svg width="112" height="29" viewBox="0 0 112 29" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <rect x="0" y="0" width="112" height="29" rx="4" fill="var(--surfaces-main-background-primary, #ffffff)" stroke="var(--borders-main-border-primary, #E8E9EF)" strokeWidth="1" />
+        <text x="56" y="18" textAnchor="middle" fontFamily="Geist" fontSize="11" fontWeight="600" fill="var(--labels-main-label-primary, #121E52)">Booked it</text>
+    </svg>
+)
+
+export interface FigmasTopHatProps {
+    variant?: 'desktop' | 'mobile'
+    onSidebarToggle?: () => void
+    onUserClick?: () => void
+    onInboxClick?: () => void
+    onBellClick?: () => void
+    onDiscClick?: () => void
+    inboxCount?: number
+    bellCount?: number
+    userInitials?: string
+}
+
+export const FigmasTopHat: React.FC<FigmasTopHatProps> = ({
+    variant = 'desktop',
+    onSidebarToggle,
+    onUserClick,
+    onInboxClick,
+    onBellClick,
+    onDiscClick,
+    inboxCount = 3,
+    bellCount = 12,
+    userInitials = 'WW',
+}) => {
+    const sidebarToggleIcon = (
+        <div className="figmas-tophat__sidebar-icon">
+            <SidebarToggleIcon />
+        </div>
+    )
+
+    const logoIcon = (
+        <div className="figmas-tophat__logo">
+            <div className="figmas-tophat__logo-shape1">
+                <img alt="Logo shape 1" className="figmas-tophat__logo-img" src={logoDesktop1} />
+            </div>
+            <div className="figmas-tophat__logo-shape2">
+                <img alt="Logo shape 2" className="figmas-tophat__logo-img" src={logoDesktop2} />
+            </div>
+        </div>
+    )
+
+    const mobileLogoIcon = (
+        <div className="figmas-tophat__mobile-logo">
+            <div className="figmas-tophat__mobile-logo-shape1">
+                <MobileLogoShape1 />
+            </div>
+            <div className="figmas-tophat__mobile-logo-shape2">
+                <MobileLogoShape2 />
+            </div>
+        </div>
+    )
+
+    const userControls = (
+        <div className="figmas-tophat__user-controls">
+            {/* Disc Control */}
+            <div className="figmas-tophat__control figmas-tophat__control--disc" onClick={onDiscClick}>
+                <div className="figmas-tophat__control-icon">
+                    <div className="figmas-tophat__control-icon-inner">
+                        <img alt="Disc icon" className="figmas-tophat__control-icon-img" src={discIcon} />
+                    </div>
+                </div>
+                <p className="figmas-tophat__user-initials">{userInitials}</p>
+            </div>
+
+            {/* Inbox Control */}
+            <div className="figmas-tophat__control figmas-tophat__control--inbox" onClick={onInboxClick}>
+                <div className="figmas-tophat__control-icon">
+                    <div className="figmas-tophat__control-icon-inner">
+                        <img alt="Inbox icon" className="figmas-tophat__control-icon-img" src={inboxIcon} />
+                    </div>
+                </div>
+                {inboxCount > 0 && (
+                    <div className="figmas-tophat__notification-badge figmas-tophat__notification-badge--teal">
+                        <span>{inboxCount}</span>
+                    </div>
+                )}
+            </div>
+
+            {/* Bell Control */}
+            <div className="figmas-tophat__control figmas-tophat__control--bell" onClick={onBellClick}>
+                <div className="figmas-tophat__control-icon">
+                    <div className="figmas-tophat__control-icon-inner">
+                        <img alt="Bell icon" className="figmas-tophat__control-icon-img" src={bellIcon} />
+                    </div>
+                </div>
+                {bellCount > 0 && (
+                    <div className="figmas-tophat__notification-badge figmas-tophat__notification-badge--orange">
+                        <span>{bellCount}</span>
+                    </div>
+                )}
+            </div>
+
+            {/* User Control */}
+            <div className="figmas-tophat__control figmas-tophat__control--user" onClick={onUserClick}>
+                <div className="figmas-tophat__control-icon">
+                    <div className="figmas-tophat__control-icon-inner">
+                        <img alt="User icon" className="figmas-tophat__control-icon-img" src={userIcon} />
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+
+    if (variant === 'mobile') {
+        return (
+            <div className="figmas-tophat figmas-tophat--mobile">
+                <div className="figmas-tophat__mobile-logo-container">
+                    {mobileLogoIcon}
+                </div>
+                {userControls}
+            </div>
+        )
+    }
+
+    return (
+        <div className="figmas-tophat figmas-tophat--desktop">
+            <div className="figmas-tophat__left-elements">
+                <div className="figmas-tophat__sidebar-toggle" onClick={onSidebarToggle}>
+                    {sidebarToggleIcon}
+                </div>
+                <div className="figmas-tophat__logo-container">
+                    {logoIcon}
+                </div>
+            </div>
+            {userControls}
+        </div>
+    )
+}

package/src/v2/navigation/FigmasTopHat/assets/bell-icon.svg

@@ -0,0 +1,3 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 18C8 18.5523 8.44772 19 9 19H13C13.5523 19 14 18.5523 14 18M8 18V16M14 18V16M8 18C5.79086 18 4 16.2091 4 14V9C4 6.79086 5.79086 5 8 5H14C16.2091 5 18 6.79086 18 9V14C18 16.2091 16.2091 18 14 18" stroke="var(--fills-main-fill-primary, #14215A)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+</svg>

package/src/v2/navigation/FigmasTopHat/assets/disc-icon.svg

@@ -0,0 +1,4 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="11" cy="11" r="10" fill="var(--fills-main-fill-primary, #14215A)" opacity="0.1" />
+<circle cx="11" cy="11" r="6" fill="var(--fills-main-fill-primary, #14215A)" />
+</svg>

package/src/v2/navigation/FigmasTopHat/assets/inbox-icon.svg

@@ -0,0 +1,3 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 6L11 11L19 6M3 6V16C3 16.5523 3.44772 17 4 17H18C18.5523 17 19 16.5523 19 16V6M3 6H19" stroke="var(--fills-main-fill-primary, #14215A)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+</svg>

package/src/v2/navigation/FigmasTopHat/assets/logo-desktop-1.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 1L11.5 5.5L16.5 6L13 9L14 14L9 11.5L4 14L5 9L1.5 6L6.5 5.5L9 1Z" fill="var(--fills-main-fill-primary, #14215A)" stroke="var(--fills-main-fill-primary, #14215A)" strokeWidth="0.5" />
+</svg>

package/src/v2/navigation/FigmasTopHat/assets/logo-desktop-2.svg

@@ -0,0 +1,4 @@
+<svg width="112" height="29" viewBox="0 0 112 29" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0" y="0" width="112" height="29" rx="4" fill="var(--surfaces-main-background-primary, #ffffff)" stroke="var(--borders-main-border-primary, #E8E9EF)" strokeWidth="1" />
+<text x="56" y="18" textAnchor="middle" fontFamily="Geist" fontSize="11" fontWeight="600" fill="var(--labels-main-label-primary, #121E52)">Booked it</text>
+</svg>

package/src/v2/navigation/FigmasTopHat/assets/user-icon.svg

@@ -0,0 +1,4 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="11" cy="7" r="3" stroke="var(--fills-main-fill-primary, #14215A)" strokeWidth="1.5"/>
+<path d="M5 18C5 14.134 8.13401 11 12 11C15.866 11 19 14.134 19 18" stroke="var(--fills-main-fill-primary, #14215A)" strokeWidth="1.5" strokeLinecap="round"/>
+</svg>

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

@@ -0,0 +1,2 @@
+export { FigmasTopHat } from './FigmasTopHat'
+export type { FigmasTopHatProps } from './FigmasTopHat'

package/src/v2/navigation/Navigation/Navigation.scss

@@ -0,0 +1,15 @@
+.navigation {
+    width: 100%;
+    height: 100%;
+    padding: 0 8px;
+    display: inline-flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+    gap: 4px;
+    background: var(--fills-background-primary, #FFFFFF);
+
+    &--collapsed {
+        width: 60px; // Collapsed width for icon-only mode
+    }
+}

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

@@ -0,0 +1,137 @@
+import { Meta, StoryObj } from '@storybook/react'
+import React, { useState } from 'react'
+import { Navigation } from './Navigation'
+
+export default {
+    title: 'v2/Navigation/Navigation',
+    component: Navigation,
+    parameters: {
+        layout: 'fullscreen',
+    },
+    argTypes: {
+        isCollapsed: {
+            control: 'boolean',
+            description: 'Toggle between expanded (with labels) and collapsed (icons only) navigation',
+        },
+        activeItem: {
+            control: 'select',
+            options: ['home', 'companies', 'venues', 'promoters', 'admin', 'users', 'customers', 'reports', 'analytics', 'payments', 'settings'],
+            description: 'Which navigation item is currently active',
+        },
+    },
+} as Meta
+
+type Story = StoryObj<typeof Navigation>
+
+// Default expanded navigation
+export const Expanded: Story = {
+    args: {
+        isCollapsed: false,
+        activeItem: 'home',
+    },
+    render: (args) => (
+        <div style={{ width: '250px', height: '100vh', background: 'var(--fills-background-primary, #FFFFFF)', borderRight: '1px solid #E5E7EB' }}>
+            <Navigation {...args} />
+        </div>
+    ),
+}
+
+// Collapsed navigation (icons only)
+export const Collapsed: Story = {
+    args: {
+        isCollapsed: true,
+        activeItem: 'home',
+    },
+    render: (args) => (
+        <div style={{ width: '76px', height: '100vh', background: 'var(--fills-background-primary, #FFFFFF)', borderRight: '1px solid #E5E7EB' }}>
+            <Navigation {...args} />
+        </div>
+    ),
+}
+
+// Interactive with toggle
+export const Interactive: Story = {
+    render: function () {
+        const [isCollapsed, setIsCollapsed] = useState(false);
+        const [activeItem, setActiveItem] = useState('home');
+
+        return (
+            <div style={{ display: 'flex', height: '100vh' }}>
+                <div style={{ width: isCollapsed ? '76px' : '250px', background: 'var(--fills-background-primary, #FFFFFF)', borderRight: '1px solid #E5E7EB', transition: 'width 0.3s ease' }}>
+                    <div style={{ padding: '16px', borderBottom: '1px solid #E5E7EB' }}>
+                        <button
+                            onClick={() => setIsCollapsed(!isCollapsed)}
+                            style={{
+                                padding: '8px 12px',
+                                background: '#14215A',
+                                color: 'white',
+                                border: 'none',
+                                borderRadius: '6px',
+                                cursor: 'pointer',
+                                fontSize: '13px',
+                                fontWeight: '500',
+                            }}
+                        >
+                            {isCollapsed ? '→' : '←'}
+                        </button>
+                    </div>
+                    <Navigation
+                        isCollapsed={isCollapsed}
+                        activeItem={activeItem}
+                        onItemClick={setActiveItem}
+                    />
+                </div>
+                <div style={{ flex: 1, padding: '24px', background: '#F9FAFB' }}>
+                    <h1 style={{ fontSize: '24px', fontWeight: '600', color: '#111827', marginBottom: '8px' }}>
+                        Active Page: {activeItem.charAt(0).toUpperCase() + activeItem.slice(1)}
+                    </h1>
+                    <p style={{ color: '#6B7280' }}>Click a navigation item to change the active page</p>
+                </div>
+            </div>
+        );
+    },
+}
+
+// Different active states
+export const ActiveOnCompanies: Story = {
+    args: {
+        isCollapsed: false,
+        activeItem: 'companies',
+    },
+    render: (args) => (
+        <div style={{ width: '250px', height: '100vh', background: 'var(--fills-background-primary, #FFFFFF)', borderRight: '1px solid #E5E7EB' }}>
+            <Navigation {...args} />
+        </div>
+    ),
+}
+
+export const ActiveOnSettings: Story = {
+    args: {
+        isCollapsed: false,
+        activeItem: 'settings',
+    },
+    render: (args) => (
+        <div style={{ width: '250px', height: '100vh', background: 'var(--fills-background-primary, #FFFFFF)', borderRight: '1px solid #E5E7EB' }}>
+            <Navigation {...args} />
+        </div>
+    ),
+}
+
+// Mobile viewport
+export const Mobile: Story = {
+    args: {
+        isCollapsed: false,
+        activeItem: 'home',
+    },
+    parameters: {
+        viewport: {
+            defaultViewport: 'mobile1',
+        },
+    },
+    render: (args) => (
+        <div style={{ width: '100%', height: '100vh', background: 'var(--fills-background-primary, #FFFFFF)' }}>
+            <Navigation {...args} />
+        </div>
+    ),
+}
+

package/src/v2/navigation/Navigation/Navigation.tsx

@@ -0,0 +1,127 @@
+import React from 'react'
+import { NavigationItem } from '../NavigationItem'
+import { NavigationSection } from '../NavigationSection'
+import {
+    DashboardIcon,
+    CompanyIcon,
+    VenueIcon,
+    MarketingIcon,
+    AdminIcon,
+    ProfileIcon,
+    CustomersIcon,
+    ReportsIcon,
+    AnalyticsIcon,
+    PaymentsIcon,
+    SettingsIcon,
+} from '../../icons'
+import './Navigation.scss'
+
+export interface NavigationProps {
+    isCollapsed?: boolean
+    activeItem?: string
+    onItemClick?: (item: string) => void
+}
+
+export const Navigation: React.FC<NavigationProps> = ({
+    isCollapsed = false,
+    activeItem = 'home',
+    onItemClick,
+}) => {
+    const handleClick = (item: string) => {
+        if (onItemClick) {
+            onItemClick(item)
+        }
+    }
+
+    return (
+        <nav className={`navigation ${isCollapsed ? 'navigation--collapsed' : ''}`}>
+            <NavigationSection title="Admin" isCollapsed={isCollapsed} />
+            <NavigationItem
+                icon={<DashboardIcon />}
+                label="Home"
+                isActive={activeItem === 'home'}
+                isCollapsed={isCollapsed}
+                onClick={() => handleClick('home')}
+            />
+
+            <NavigationSection title="Providers" isCollapsed={isCollapsed} />
+            <NavigationItem
+                icon={<CompanyIcon />}
+                label="Companies"
+                isActive={activeItem === 'companies'}
+                isCollapsed={isCollapsed}
+                onClick={() => handleClick('companies')}
+            />
+            <NavigationItem
+                icon={<VenueIcon />}
+                label="Venues"
+                isActive={activeItem === 'venues'}
+                isCollapsed={isCollapsed}
+                onClick={() => handleClick('venues')}
+            />
+            <NavigationItem
+                icon={<MarketingIcon />}
+                label="Promoters"
+                isActive={activeItem === 'promoters'}
+                isCollapsed={isCollapsed}
+                onClick={() => handleClick('promoters')}
+            />
+
+            <NavigationSection title="Users" isCollapsed={isCollapsed} />
+            <NavigationItem
+                icon={<AdminIcon />}
+                label="Booked it Admin"
+                isActive={activeItem === 'admin'}
+                isCollapsed={isCollapsed}
+                onClick={() => handleClick('admin')}
+            />
+            <NavigationItem
+                icon={<ProfileIcon />}
+                label="Users"
+                isActive={activeItem === 'users'}
+                isCollapsed={isCollapsed}
+                onClick={() => handleClick('users')}
+            />
+            <NavigationItem
+                icon={<CustomersIcon />}
+                label="Customers"
+                isActive={activeItem === 'customers'}
+                isCollapsed={isCollapsed}
+                onClick={() => handleClick('customers')}
+            />
+
+            <NavigationSection title="Reporting" isCollapsed={isCollapsed} />
+            <NavigationItem
+                icon={<ReportsIcon />}
+                label="Reports"
+                isActive={activeItem === 'reports'}
+                isCollapsed={isCollapsed}
+                onClick={() => handleClick('reports')}
+            />
+            <NavigationItem
+                icon={<AnalyticsIcon />}
+                label="Analytics"
+                isActive={activeItem === 'analytics'}
+                isCollapsed={isCollapsed}
+                onClick={() => handleClick('analytics')}
+            />
+            <NavigationItem
+                icon={<PaymentsIcon />}
+                label="Payments"
+                isActive={activeItem === 'payments'}
+                isCollapsed={isCollapsed}
+                onClick={() => handleClick('payments')}
+            />
+
+            <NavigationSection title="More" isCollapsed={isCollapsed} />
+            <NavigationItem
+                icon={<SettingsIcon />}
+                label="Settings"
+                isActive={activeItem === 'settings'}
+                isCollapsed={isCollapsed}
+                onClick={() => handleClick('settings')}
+            />
+        </nav>
+    )
+}
+