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

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

@@ -1,201 +0,0 @@
-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

@@ -1,158 +0,0 @@
-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

@@ -1,3 +0,0 @@
-<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

@@ -1,4 +0,0 @@
-<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

@@ -1,3 +0,0 @@
-<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

@@ -1,3 +0,0 @@
-<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

@@ -1,4 +0,0 @@
-<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

@@ -1,4 +0,0 @@
-<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

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

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

@@ -1,15 +0,0 @@
-.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

@@ -1,137 +0,0 @@
-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

@@ -1,127 +0,0 @@
-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>
-    )
-}
-