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

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

@@ -8,6 +8,9 @@ export interface AdminSidebarProps {
     onNavigation?: (path: string) => void
     activePath?: string
     adminLogoUrl?: string
+    userAvatarUrl?: string
+    userName?: string
+    userRole?: string
 }
 
 interface NavItem {
@@ -73,20 +76,24 @@ const SettingsIcon = () => (
     </svg>
 )
 
+/* DebugIcon - reserved for future use
 const DebugIcon = () => (
     <svg width="24" height="24" viewBox="0 0 32 32" fill="none">
         <path d="M17 23.9C19.2822 23.4367 21 21.419 21 19V16C21 15.299 20.8564 14.6219 20.5846 14H11.4154C11.1436 14.6219 11 15.299 11 16V19C11 21.419 12.7178 23.4367 15 23.9V18H17V23.9ZM9.5358 21.6907C9.19061 20.8623 9 19.9534 9 19H6V17H9V16C9 15.3573 9.08661 14.7348 9.2488 14.1436L7.0359 12.866L8.0359 11.134L10.0564 12.3005C10.1199 12.1985 10.1861 12.0984 10.2547 12H21.7453C21.8139 12.0984 21.88 12.1985 21.9436 12.3005L23.9641 11.134L24.9641 12.866L22.7512 14.1436C22.9134 14.7348 23 15.3573 23 16V17H26V19H23C23 19.9534 22.8094 20.8623 22.4642 21.6907L24.9641 23.134L23.9641 24.866L21.4383 23.4077C20.1549 24.9893 18.1955 26 16 26C13.8045 26 11.8451 24.9893 10.5617 23.4077L8.0359 24.866L7.0359 23.134L9.5358 21.6907ZM12 10C12 7.79086 13.7909 6 16 6C18.2091 6 20 7.79086 20 10H12Z" fill="currentColor" />
     </svg>
 )
+*/
 
 export const AdminSidebar: React.FC<AdminSidebarProps> = ({
     expanded = true,
     onNavigation,
     activePath = '/admin',
     adminLogoUrl,
+    userAvatarUrl,
+    userName,
+    userRole,
 }) => {
     const navItems: NavItem[] = [
-        { id: 'home', label: 'Home', path: '/admin', icon: <HomeIcon />, end: true },
         { id: 'companies', label: 'Companies', path: '/admin/companies', icon: <CompanyIcon /> },
         { id: 'providers', label: 'Providers', path: '/admin/providers', icon: <ProvidersIcon /> },
         { id: 'users', label: 'Users', path: '/admin/users', icon: <UsersIcon /> },
@@ -95,9 +102,10 @@ export const AdminSidebar: React.FC<AdminSidebarProps> = ({
         { id: 'analytics', label: 'Analytics', path: '/admin/analytics', icon: <AnalyticsIcon /> },
         { id: 'payments', label: 'Payments', path: '/admin/payments', icon: <PaymentsIcon /> },
         { id: 'settings', label: 'Settings', path: '/admin/settings/general', icon: <SettingsIcon /> },
-        { id: 'debugging', label: 'Debugging', path: '/admin/debugging', icon: <DebugIcon /> },
     ]
 
+    const isHomeActive = activePath === '/admin' || activePath === '/admin/' || activePath === '/'
+
     const isActive = (item: NavItem) => {
         if (item.end) {
             return activePath === item.path || activePath === item.path + '/'
@@ -113,37 +121,43 @@ export const AdminSidebar: React.FC<AdminSidebarProps> = ({
         <aside className={`admin-sidebar admin-sidebar--${expanded ? 'expanded' : 'collapsed'}`}>
             <div className="admin-sidebar__content">
                 {expanded ? (
-                    <div className="admin-sidebar__header">
-                        <div className="admin-sidebar__avatar">
-                            <img src={adminLogoUrl || AdminLogo} alt="Admin Panel" />
+                    <button
+                        type="button"
+                        className={`admin-sidebar__header ${isHomeActive ? 'admin-sidebar__header--active' : ''}`}
+                        onClick={() => handleNavClick('/admin')}
+                    >
+                        <div className={`admin-sidebar__avatar${userAvatarUrl ? ' admin-sidebar__avatar--photo' : ''}`}>
+                            <img src={userAvatarUrl || adminLogoUrl || AdminLogo} alt={userName || 'Admin Panel'} />
                         </div>
                         <div className="admin-sidebar__header-text">
-                            <h3 className="admin-sidebar__title">Admin Panel</h3>
+                            <h3 className="admin-sidebar__title">{userName || 'Admin Panel'}</h3>
                             <div className="admin-sidebar__badge">
-                                <span>Super Admin</span>
+                                <span>{userRole || 'Super Admin'}</span>
                             </div>
                         </div>
-                    </div>
+                    </button>
                 ) : (
-                    <Tooltip content="Admin Panel" side="right" sideOffset={8} delayDuration={100}>
-                        <div className="admin-sidebar__header admin-sidebar__header--collapsed">
-                            <div className="admin-sidebar__avatar">
-                                <img src={adminLogoUrl || AdminLogo} alt="Admin Panel" />
+                    <Tooltip content={userName || 'Admin Panel'} side="right" sideOffset={8} delayDuration={100}>
+                        <button
+                            type="button"
+                            className={`admin-sidebar__header admin-sidebar__header--collapsed ${isHomeActive ? 'admin-sidebar__header--active' : ''}`}
+                            onClick={() => handleNavClick('/admin')}
+                        >
+                            <div className={`admin-sidebar__avatar${userAvatarUrl ? ' admin-sidebar__avatar--photo' : ''}`}>
+                                <img src={userAvatarUrl || adminLogoUrl || AdminLogo} alt={userName || 'Admin Panel'} />
                             </div>
-                        </div>
+                        </button>
                     </Tooltip>
                 )}
 
                 <nav className="admin-sidebar__nav">
                     {navItems.map((item) => {
-                        const linkContent = (
-                            <div 
+                        const linkButton = (
+                            <button
                                 key={item.id}
                                 className={`admin-sidebar__link ${isActive(item) ? 'admin-sidebar__link--active' : ''} ${expanded ? '' : 'admin-sidebar__link--collapsed'}`}
                                 onClick={() => handleNavClick(item.path)}
-                                role="button"
-                                tabIndex={0}
-                                onKeyDown={(e) => e.key === 'Enter' && handleNavClick(item.path)}
+                                type="button"
                             >
                                 <div className="admin-sidebar__icon">
                                     {item.icon}
@@ -151,18 +165,18 @@ export const AdminSidebar: React.FC<AdminSidebarProps> = ({
                                 {expanded && (
                                     <span className="admin-sidebar__link-text">{item.label}</span>
                                 )}
-                            </div>
+                            </button>
                         )
 
                         if (!expanded) {
                             return (
                                 <Tooltip key={item.id} content={item.label} side="right" sideOffset={8} delayDuration={100}>
-                                    {linkContent}
+                                    {linkButton}
                                 </Tooltip>
                             )
                         }
 
-                        return linkContent
+                        return linkButton
                     })}
                 </nav>
             </div>

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

@@ -10,6 +10,7 @@
     &__body {
         display: flex;
         flex: 1;
+        min-height: 0;
         position: relative;
         overflow: hidden;
     }
@@ -43,20 +44,20 @@
 
     &__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;
+        min-height: 0;
     }
 
     &__content {
         flex: 1;
+        min-height: 0;
         overflow-y: auto;
         padding-left: var(--container-padding-desktop, 32px);
         padding-right: var(--container-padding-desktop, 32px);
-
         @media (max-width: 768px) {
             padding-left: var(--container-padding-mobile, 16px);
             padding-right: var(--container-padding-mobile, 16px);

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

@@ -38,7 +38,9 @@ export interface DashboardLayoutProps {
     userId?: number
 
     userRole?: string
-    
+
+    userAvatarUrl?: string
+
     inboxCount?: number
     
     bellCount?: number
@@ -73,6 +75,9 @@ export interface DashboardLayoutProps {
 
     /** Custom navigation items for provider sidebar */
     navItems?: NavItem[]
+
+    /** Called when the Booked it logo in the top nav is clicked */
+    onLogoClick?: () => void
 }
 
 export const DashboardLayout: React.FC<DashboardLayoutProps> = ({
@@ -91,6 +96,7 @@ export const DashboardLayout: React.FC<DashboardLayoutProps> = ({
     userEmail,
     userId,
     userRole,
+    userAvatarUrl,
     inboxCount = 0,
     bellCount = 0,
     activePath = '/home',
@@ -108,6 +114,7 @@ export const DashboardLayout: React.FC<DashboardLayoutProps> = ({
     showFooter = true,
     userPanelOpen = false,
     navItems,
+    onLogoClick,
 }) => {
     const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
 
@@ -137,13 +144,23 @@ export const DashboardLayout: React.FC<DashboardLayoutProps> = ({
         }
     }
 
+    const handleNavigation = (path: string) => {
+        if (isMobile) {
+            setMobileMenuOpen(false)
+        }
+        onNavigation?.(path)
+    }
+
     const renderSidebar = () => {
         if (destination === 'admin') {
             return (
                 <AdminSidebar
                     expanded={sidebarExpanded}
                     activePath={activePath}
-                    onNavigation={onNavigation}
+                    onNavigation={handleNavigation}
+                    userName={userName}
+                    userRole={userRole}
+                    userAvatarUrl={userAvatarUrl}
                 />
             )
         }
@@ -156,9 +173,9 @@ export const DashboardLayout: React.FC<DashboardLayoutProps> = ({
                 providerImage={destination === 'company' ? companyImage : providerImage}
                 providerType={providerType}
                 activePath={activePath}
-                onNavigation={onNavigation}
-                showBackToAdmin={hasAdminAccess && destination !== 'admin'}
-                onBackToAdmin={() => onNavigation?.('/admin')}
+                onNavigation={handleNavigation}
+                showBackToAdmin={hasAdminAccess}
+                onBackToAdmin={() => handleNavigation('/admin')}
                 navItems={navItems}
             />
         )
@@ -189,6 +206,7 @@ export const DashboardLayout: React.FC<DashboardLayoutProps> = ({
                 mobileMenuOpen={mobileMenuOpen}
                 onMobileMenuToggle={() => setMobileMenuOpen(!mobileMenuOpen)}
                 userPanelOpen={userPanelOpen}
+                onLogoClick={onLogoClick}
             />
 
             

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

@@ -114,7 +114,6 @@ export {
 
 // 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 /> },
@@ -192,11 +191,11 @@ export const ProviderSidebar: React.FC<ProviderSidebarProps> = ({
                 
                 {expanded ? (
                     <div
-                        className={`provider-sidebar__header ${activePath?.startsWith('/profile') ? 'provider-sidebar__link--active' : ''}`}
-                        onClick={() => handleNavClick('/profile')}
+                        className={`provider-sidebar__header ${activePath === '/home' || activePath === '/' ? 'provider-sidebar__link--active' : ''}`}
+                        onClick={() => handleNavClick('/home')}
                         role="button"
                         tabIndex={0}
-                        onKeyDown={(e) => e.key === 'Enter' && handleNavClick('/profile')}
+                        onKeyDown={(e) => e.key === 'Enter' && handleNavClick('/home')}
                         style={{ cursor: 'pointer' }}
                     >
                         <EntityHeader
@@ -211,11 +210,11 @@ export const ProviderSidebar: React.FC<ProviderSidebarProps> = ({
                 ) : (
                     <Tooltip content={providerName} side="right" sideOffset={8} delayDuration={100}>
                         <div
-                            className={`provider-sidebar__header provider-sidebar__header--collapsed ${activePath?.startsWith('/profile') ? 'provider-sidebar__link--active' : ''}`}
-                            onClick={() => handleNavClick('/profile')}
+                            className={`provider-sidebar__header provider-sidebar__header--collapsed ${activePath === '/home' || activePath === '/' ? 'provider-sidebar__link--active' : ''}`}
+                            onClick={() => handleNavClick('/home')}
                             role="button"
                             tabIndex={0}
-                            onKeyDown={(e) => e.key === 'Enter' && handleNavClick('/profile')}
+                            onKeyDown={(e) => e.key === 'Enter' && handleNavClick('/home')}
                             style={{ cursor: 'pointer' }}
                         >
                             <EntityHeader

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

@@ -75,7 +75,22 @@
         }
     }
 
-    
+    &__logo-btn {
+        display: flex;
+        align-items: center;
+        background: none;
+        border: none;
+        padding: 0;
+        cursor: pointer;
+        border-radius: 4px;
+
+        &:focus-visible {
+            outline: 2px solid var(--fills-main-fill-primary, #14215A);
+            outline-offset: 2px;
+        }
+    }
+
+
     &__logo-mark {
         height: 36px;
         width: 36px;

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

@@ -26,6 +26,7 @@ export interface TopNavigationProps {
     onMobileMenuToggle?: () => void
     sidebarToggleDisabled?: boolean
     userPanelOpen?: boolean
+    onLogoClick?: () => void
 }
 const SidebarOpenIcon = () => (
   <svg width="40" height="40" viewBox="0 0 40 40" fill="none">
@@ -43,38 +44,6 @@ const SidebarCollapsedIcon = () => (
     <path d="M29 10C30.6569 10 32 11.3431 32 13V27C32 28.6569 30.6569 30 29 30H11C9.34315 30 8 28.6569 8 27V13C8 11.3431 9.34315 10 11 10H29ZM14 28H29C29.5523 28 30 27.5523 30 27V13C30 12.4477 29.5523 12 29 12H14V28ZM11 12C10.4477 12 10 12.4477 10 13V27C10 27.5523 10.4477 28 11 28H12V12H11Z" fill="var(--fills-main-fill-secondary, #626A90)"/>
   </svg>
 )
-const InboxIcon = ({ active, hovered }: { active?: boolean; hovered?: boolean }) => (
-    <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
-        {(hovered && !active) && (
-            <path d="M11 10H21L22.5 18H19L18 20L16 20.5L14 20L13 18H9.5L11 10Z" fill="var(--fills-main-fill-secondary, #626A90)" fillOpacity="0.3"/>
-        )}
-        {active && (
-            <path d="M11 10H21L22.5 18H19L18 20L16 20.5L14 20L13 18H9.5L11 10Z" fill="white" fillOpacity="0.3"/>
-        )}
-        <path d="M8.02381 7.78307C8.12549 7.32553 8.5313 7 9 7H23C23.4687 7 23.8745 7.32553 23.9762 7.78307L25.9762 16.7831C25.992 16.8543 26 16.927 26 17V24C26 24.5523 25.5523 25 25 25H7C6.44772 25 6 24.5523 6 24V17C6 16.927 6.00799 16.8543 6.02381 16.7831L8.02381 7.78307ZM9.80217 9L8.24662 16H13C13 17.6569 14.3431 19 16 19C17.6569 19 19 17.6569 19 16H23.7534L22.1978 9H9.80217ZM20.584 18C19.8124 19.7659 18.0503 21 16 21C13.9497 21 12.1876 19.7659 11.416 18H8V23H24V18H20.584Z" fill={active ? 'white' : 'var(--fills-main-fill-secondary, #626A90)'}/>
-    </svg>
-)
-const NotificationIcon = ({ active, hovered }: { active?: boolean; hovered?: boolean }) => {
-    if (active) {
-        return (
-            <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
-                <path d="M22 14C22 10.6863 19.3137 8 16 8C12.6863 8 10 10.6863 10 14V22H22V14ZM24 22.6667L24.4 23.2C24.5657 23.4209 24.5209 23.7343 24.3 23.9C24.2135 23.9649 24.1082 24 24 24H8C7.72386 24 7.5 23.7761 7.5 23.5C7.5 23.3918 7.53509 23.2865 7.6 23.2L8 22.6667V14C8 9.58172 11.5817 6 16 6C20.4183 6 24 9.58172 24 14V22.6667ZM13.5 25H18.5C18.5 26.3807 17.3807 27.5 16 27.5C14.6193 27.5 13.5 26.3807 13.5 25Z" fill="white" />
-            </svg>
-        )
-    }
-    if (hovered) {
-        return (
-            <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
-                <path d="M22.4874 15.5353C23.2901 12.3202 21.3346 9.06324 18.1196 8.26054C14.9045 7.45785 11.6475 9.41342 10.8448 12.6284L8.90696 20.3902L20.5496 23.297L22.4874 15.5353ZM22.3285 24.4283L22.5874 25.0426C22.6947 25.2971 22.5753 25.5903 22.3208 25.6976C22.2212 25.7396 22.1105 25.7481 22.0055 25.7219L6.48205 21.8461C6.21413 21.7792 6.05118 21.5078 6.11806 21.2399C6.14427 21.1349 6.20382 21.0413 6.28775 20.9731L6.80502 20.5525L8.9044 12.144C9.97467 7.85727 14.3173 5.24985 18.604 6.32011C22.8907 7.39038 25.4981 11.733 24.4279 16.0197L22.3285 24.4283ZM15.4569 25.1176L20.308 26.3288C19.9735 27.6683 18.6164 28.4832 17.2768 28.1487C15.9373 27.8143 15.1224 26.4572 15.4569 25.1176Z" fill="var(--fills-main-fill-secondary, #626A90)"/>
-            </svg>
-        )
-    }
-    return (
-        <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
-            <path d="M22 14C22 10.6863 19.3137 8 16 8C12.6863 8 10 10.6863 10 14V22H22V14ZM24 22.6667L24.4 23.2C24.5657 23.4209 24.5209 23.7343 24.3 23.9C24.2135 23.9649 24.1082 24 24 24H8C7.72386 24 7.5 23.7761 7.5 23.5C7.5 23.3918 7.53509 23.2865 7.6 23.2L8 22.6667V14C8 9.58172 11.5817 6 16 6C20.4183 6 24 9.58172 24 14V22.6667ZM13.5 25H18.5C18.5 26.3807 17.3807 27.5 16 27.5C14.6193 27.5 13.5 26.3807 13.5 25Z" fill="var(--fills-main-fill-secondary, #626A90)"/>
-        </svg>
-    )
-}
 const HelpIcon = ({ hovered }: { hovered?: boolean }) => (
     <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
         {hovered && (
@@ -135,10 +104,7 @@ export const TopNavigation: React.FC<TopNavigationProps> = ({
     userAvatarUrl,
     userId,
     userRole,
-    inboxCount = 0,
-    notificationCount = 0,
     onUserClick,
-    onInboxClick,
     onNotificationClick,
     onHelpClick,
     onProfileClick,
@@ -147,16 +113,15 @@ export const TopNavigation: React.FC<TopNavigationProps> = ({
     onMobileMenuToggle,
     sidebarToggleDisabled = false,
     userPanelOpen = false,
+    onLogoClick,
 }) => {
     const [hoveredItem, setHoveredItem] = useState<string | null>(null)
     const [isNotificationActive, setIsNotificationActive] = useState(false)
     const handleUserClick = () => {
         onUserClick?.()
     }
-    const handleNotificationClick = () => {
-        setIsNotificationActive(!isNotificationActive)
-        onNotificationClick?.()
-    }
+    // handleNotificationClick - temporarily hidden from UI
+    void isNotificationActive; void setIsNotificationActive; void onNotificationClick;
     return (
         <header className="top-navigation">
             
@@ -186,8 +151,22 @@ export const TopNavigation: React.FC<TopNavigationProps> = ({
                     </button>
                 </Tooltip>
                 
-                <img src={BookedLogoMark} alt="Booked it" className="top-navigation__logo-mark" />
-                <BookedLogoFull className="top-navigation__logo-full" />
+                {onLogoClick ? (
+                    <button
+                        className="top-navigation__logo-btn"
+                        onClick={onLogoClick}
+                        aria-label="Go to home"
+                        type="button"
+                    >
+                        <img src={BookedLogoMark} alt="Booked it" className="top-navigation__logo-mark" />
+                        <BookedLogoFull className="top-navigation__logo-full" />
+                    </button>
+                ) : (
+                    <>
+                        <img src={BookedLogoMark} alt="Booked it" className="top-navigation__logo-mark" />
+                        <BookedLogoFull className="top-navigation__logo-full" />
+                    </>
+                )}
             </div>
             
             <div className="top-navigation__right">

package/src/v2/navigation/FigmasAdminSideBar/FigmasAdminSideBar.tsx

@@ -8,7 +8,7 @@ export interface FigmasAdminSideBarProps {
 
 export const FigmasAdminSideBar: React.FC<FigmasAdminSideBarProps> = ({
     expanded = true,
-    onToggle,
+    onToggle: _onToggle,
 }) => {
     const homeIcon = (
         <div className="figmas-admin-sidebar__icon">

package/src/v2/navigation/FigmasSideBar/FigmasSideBar.tsx

@@ -26,9 +26,7 @@ export const FigmasSideBar: React.FC<FigmasSideBarProps> = ({
     venueName = "Sharky's Soft Play",
     venueId = "123",
     venueImage,
-    onToggle,
     navigationItems,
-    onNavigation,
     activePath,
     authCredentials,
 }) => {
@@ -38,6 +36,7 @@ export const FigmasSideBar: React.FC<FigmasSideBarProps> = ({
         : navigationItems || []
 
     const isActive = (path: string) => activePath === path
+    void accessibleItems; void isActive;
     const icon = (
         <div className="figmas-sidebar__icon">
             <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">

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

@@ -1,11 +1,11 @@
 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'
+import logoDesktop1 from './assets/logo-desktop-1.svg?url'
+import logoDesktop2 from './assets/logo-desktop-2.svg?url'
+import discIcon from './assets/disc-icon.svg?url'
+import inboxIcon from './assets/inbox-icon.svg?url'
+import bellIcon from './assets/bell-icon.svg?url'
+import userIcon from './assets/user-icon.svg?url'
 
 // Image assets loaded from local assets folder
 const SidebarToggleIcon = () => (

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

@@ -12,4 +12,4 @@
     &--collapsed {
         width: 60px; // Collapsed width for icon-only mode
     }
-}
+}

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

@@ -124,4 +124,3 @@ export const Navigation: React.FC<NavigationProps> = ({
         </nav>
     )
 }
-

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

@@ -1,3 +1,2 @@
 export { Navigation } from './Navigation'
 export type { NavigationProps } from './Navigation'
-

package/src/v2/navigation/SideBarToggleLarge/SideBarToggleLarge.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import './SideBarToggleLarge.scss'
-import sidebarIcon from './assets/sidebar-icon.svg'
+import sidebarIcon from './assets/sidebar-icon.svg?url'
 
 export interface SideBarToggleLargeProps {
     variant?: 'default' | 'hover' | 'pressed'

package/src/v2/navigation/TopHatControlDisc/TopHatControlDisc.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import './TopHatControlDisc.scss'
-import discIcon from './assets/disc-icon.svg'
+import discIcon from './assets/disc-icon.svg?url'
 
 export interface TopHatControlDiscProps {
   variant?: 'default' | 'hover' | 'pressed'

package/src/v2/navigation/config.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import type { NavigationItem } from '../types/navigation'
 
 // Icon components (these would be your actual icon imports)

package/src/v2/shadcn/_reference/AccountManagerCard.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { IconTelephone, IconMail } from '../../icons';
+
+interface AccountManagerCardProps {
+  fullName: string;
+  email: string;
+  avatarUrl: string | null;
+  companyPhone: string | null;
+}
+
+const AccountManagerCard: React.FC<AccountManagerCardProps> = ({
+  fullName,
+  email,
+  avatarUrl,
+  companyPhone,
+}) => {
+  return (
+    <div className="flex items-center gap-4 p-4 bg-surface-secondary border border-border-primary rounded-lg">
+      <div className="w-12 h-12 rounded-full flex items-center justify-center flex-shrink-0 overflow-hidden bg-surface-tertiary border border-border-primary">
+        {avatarUrl ? (
+          <img src={avatarUrl} alt={fullName} className="w-full h-full object-cover" />
+        ) : (
+          <span className="text-label-secondary font-bold text-sm">
+            {fullName[0]?.toUpperCase() || '?'}
+          </span>
+        )}
+      </div>
+      <div className="flex flex-col gap-1 flex-1 min-w-0">
+        <span className="text-label-primary text-sm font-semibold">{fullName}</span>
+        <div className="flex items-center gap-1.5">
+          <IconMail size={14} className="fill-fill-secondary flex-shrink-0" />
+          <span className="text-label-secondary text-xs truncate">{email}</span>
+        </div>
+        {companyPhone && (
+          <div className="flex items-center gap-1.5">
+            <IconTelephone size={14} className="fill-fill-secondary flex-shrink-0" />
+            <span className="text-label-secondary text-xs">{companyPhone}</span>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default AccountManagerCard;