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

package/src/v2/components/NPSScore/NPSScore.tsx

@@ -0,0 +1,209 @@
+import React, { useState } from 'react'
+import './NPSScore.scss'
+
+export interface NPSScoreProps {
+    /** User's first name for personalized greeting */
+    firstName?: string
+    /** Callback when NPS is submitted */
+    onSubmit?: (data: NPSSubmitData) => void
+    /** Callback when dismissed */
+    onDismiss?: () => void
+}
+
+export interface NPSSubmitData {
+    score: number
+    role: string
+    reason?: string
+}
+
+const roleOptions = [
+    { value: 'owner', label: 'Business Owner' },
+    { value: 'manager', label: 'Manager' },
+    { value: 'finance', label: 'Finance' },
+    { value: 'marketing', label: 'Marketing' },
+    { value: 'staff', label: 'Staff Member' },
+    { value: 'other', label: 'Other' },
+]
+
+// Icons
+const IconSad = ({ size = 24, className = '' }: { size?: number; className?: string }) => (
+    <svg width={size} height={size} viewBox="0 0 32 32" fill="none" className={className}>
+        <path d="M16 6C21.5228 6 26 10.4771 26 16C26 21.5228 21.5228 26 16 26C10.4771 26 6 21.5228 6 16C6 10.4771 10.4771 6 16 6ZM16 8C11.5817 8 8 11.5817 8 16C8 20.4183 11.5817 24 16 24C20.4183 24 24 20.4183 24 16C24 11.5817 20.4183 8 16 8ZM16 16C18.7614 16 21 18.2386 21 21H19C19 19.3431 17.6569 18 16 18C14.3431 18 13 19.3431 13 21H11C11 18.2386 13.2386 16 16 16ZM13.5 12C14.3284 12 15 12.6716 15 13.5C15 14.3284 14.3284 15 13.5 15C12.6716 15 12 14.3284 12 13.5C12 12.6716 12.6716 12 13.5 12ZM18.5 12C19.3284 12 20 12.6716 20 13.5C20 14.3284 19.3284 15 18.5 15C17.6716 15 17 14.3284 17 13.5C17 12.6716 17.6716 12 18.5 12Z" fill="currentColor" />
+    </svg>
+)
+
+const IconBigSmile = ({ size = 24, className = '' }: { size?: number; className?: string }) => (
+    <svg width={size} height={size} viewBox="0 0 32 32" fill="none" className={className}>
+        <path d="M16 6C21.5228 6 26 10.4771 26 16C26 21.5228 21.5228 26 16 26C10.4771 26 6 21.5228 6 16C6 10.4771 10.4771 6 16 6ZM16 8C11.5817 8 8 11.5817 8 16C8 20.4183 11.5817 24 16 24C20.4183 24 24 20.4183 24 16C24 11.5817 20.4183 8 16 8ZM21 17C21 19.7614 18.7614 22 16 22C13.2386 22 11 19.7614 11 17H21ZM13.5 11C14.3284 11 15 11.6716 15 12.5C15 13.3284 14.3284 14 13.5 14C12.6716 14 12 13.3284 12 12.5C12 11.6716 12.6716 11 13.5 11ZM18.5 11C19.3284 11 20 11.6716 20 12.5C20 13.3284 19.3284 14 18.5 14C17.6716 14 17 13.3284 17 12.5C17 11.6716 17.6716 11 18.5 11Z" fill="currentColor" />
+    </svg>
+)
+
+export const NPSScore: React.FC<NPSScoreProps> = ({
+    firstName,
+    onSubmit,
+    onDismiss,
+}) => {
+    const [selectedScore, setSelectedScore] = useState<number | null>(null)
+    const [reason, setReason] = useState('')
+    const [role, setRole] = useState('')
+    const [isSubmitting, setIsSubmitting] = useState(false)
+    const [errors, setErrors] = useState<{ reason?: string; role?: string }>({})
+    const [showReasonField, setShowReasonField] = useState(false)
+    const [isSubmitted, setIsSubmitted] = useState(false)
+
+    const handleSubmit = async () => {
+        if (!selectedScore) return
+
+        // Validate required fields - reason required for all scores
+        const newErrors: { reason?: string; role?: string } = {}
+        if (!reason.trim()) {
+            newErrors.reason = 'Please provide a reason for your score'
+        }
+        if (!role) {
+            newErrors.role = 'Please select your role'
+        }
+
+        if (Object.keys(newErrors).length > 0) {
+            setErrors(newErrors)
+            return
+        }
+
+        setErrors({})
+        setIsSubmitting(true)
+
+        try {
+            await onSubmit?.({
+                score: selectedScore,
+                role,
+                reason: reason.trim() || undefined,
+            })
+            setIsSubmitted(true)
+        } finally {
+            setIsSubmitting(false)
+        }
+    }
+
+    if (isSubmitted) {
+        return (
+            <div className="nps-score">
+                <div className="nps-score__container">
+                    <div className="nps-score__success">
+                        <IconBigSmile size={48} className="nps-score__success-icon" />
+                        <h3 className="nps-score__success-title">Thank you!</h3>
+                        <p className="nps-score__success-message">Your feedback has been submitted successfully.</p>
+                    </div>
+                </div>
+            </div>
+        )
+    }
+
+    return (
+        <div className="nps-score">
+            <div className="nps-score__container">
+                {/* Question */}
+                <h3 className="nps-score__question">
+                    {firstName ? `Hey ${firstName}, how` : 'How'} likely would you be to recommend Booked it to a friend or colleague?
+                </h3>
+
+                {/* Scale labels */}
+                <div className="nps-score__labels">
+                    <div className="nps-score__label">
+                        <IconSad size={24} className="nps-score__label-icon" />
+                        <span>Not Likely</span>
+                    </div>
+                    <div className="nps-score__label nps-score__label--desktop">
+                        <span>Most Likely</span>
+                        <IconBigSmile size={24} className="nps-score__label-icon" />
+                    </div>
+                </div>
+
+                {/* Score buttons */}
+                <div className="nps-score__buttons">
+                    {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((score) => (
+                        <button
+                            key={score}
+                            onClick={() => setSelectedScore(score)}
+                            className={`nps-score__button ${selectedScore === score ? 'nps-score__button--selected' : ''}`}
+                        >
+                            {score}
+                        </button>
+                    ))}
+                </div>
+
+                {/* Mobile label for Most Likely */}
+                <div className="nps-score__label nps-score__label--mobile">
+                    <span>Most Likely</span>
+                    <IconBigSmile size={24} className="nps-score__label-icon" />
+                </div>
+
+                {/* Expanded section after score selection */}
+                {selectedScore !== null && (
+                    <div className="nps-score__expanded">
+                        {/* Reason textarea - always visible */}
+                        <div className="nps-score__field">
+                            <label className="nps-score__field-label">
+                                Reason for this score?
+                            </label>
+                            <textarea
+                                value={reason}
+                                onChange={(e) => {
+                                    setReason(e.target.value)
+                                    if (errors.reason) setErrors(prev => ({ ...prev, reason: undefined }))
+                                }}
+                                placeholder=""
+                                className={`nps-score__textarea ${errors.reason ? 'nps-score__textarea--error' : ''}`}
+                            />
+                            {errors.reason ? (
+                                <p className="nps-score__error">{errors.reason}</p>
+                            ) : (
+                                <p className="nps-score__hint">
+                                    Help us improve by explaining your score.
+                                </p>
+                            )}
+                        </div>
+
+                        {/* Role selection */}
+                        <div className="nps-score__field nps-score__field--roles">
+                            <label className="nps-score__field-label">
+                                The role that best describes you?
+                            </label>
+                            <div className="nps-score__roles">
+                                {roleOptions.map((option) => (
+                                    <label key={option.value} className="nps-score__role">
+                                        <input
+                                            type="radio"
+                                            name="role"
+                                            value={option.value}
+                                            checked={role === option.value}
+                                            onChange={(e) => {
+                                                setRole(e.target.value)
+                                                if (errors.role) setErrors(prev => ({ ...prev, role: undefined }))
+                                            }}
+                                            className="nps-score__role-input"
+                                        />
+                                        <span className="nps-score__role-radio"></span>
+                                        <span className="nps-score__role-label">{option.label}</span>
+                                    </label>
+                                ))}
+                            </div>
+                            {errors.role && (
+                                <p className="nps-score__error">{errors.role}</p>
+                            )}
+                        </div>
+
+                        {/* Submit button */}
+                        <button
+                            onClick={handleSubmit}
+                            disabled={isSubmitting}
+                            className="nps-score__submit"
+                        >
+                            {isSubmitting ? 'Submitting...' : 'Submit'}
+                        </button>
+                    </div>
+                )}
+            </div>
+        </div>
+    )
+}
+
+export default NPSScore

package/src/v2/components/NPSScore/index.ts

@@ -0,0 +1,2 @@
+export { NPSScore } from './NPSScore'
+export type { NPSScoreProps, NPSSubmitData } from './NPSScore'

package/src/v2/dashboard-analytics/dashboard/Dashboard.stories.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { Dashboard } from './Dashboard';
+import { NPSScore } from '../../components/NPSScore';
 
 type TimeFilter = 'Today' | 'Yesterday' | 'This Week';
 type DatasetType = 'Bookings For' | 'Bookings Made';
@@ -261,4 +262,37 @@ export const ThisWeek = () => {
       }}
     />
   );
+};
+
+export const WithNPSScore = () => {
+  const [timeFilter, setTimeFilter] = useState<TimeFilter>('Today');
+
+  return (
+    <div style={{ padding: '24px' }}>
+      <NPSScore
+        firstName="Godwin"
+        onSubmit={(data) => {
+          console.log('NPS Submitted:', data);
+          return Promise.resolve();
+        }}
+      />
+      <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>
+  );
 };

package/src/v2/index.ts

@@ -28,6 +28,9 @@ export type { EntityHeaderProps } from './components/EntityHeader'
 // Tooltip Component
 export { Tooltip } from './components/Tooltip'
 export type { TooltipProps } from './components/Tooltip'
+// NPSScore Component
+export { NPSScore } from './components/NPSScore'
+export type { NPSScoreProps, NPSSubmitData } from './components/NPSScore'
 
 // UserPanel Component
 export { UserPanel } from './components/UserPanel'
@@ -72,6 +75,35 @@ export type { SidebarUserElementProps } from './navigation/SidebarUserElement'
 export { SidebarWithAuth } from './navigation/SidebarWithAuth'
 export type { SidebarWithAuthProps } from './navigation/SidebarWithAuth'
 
+// Dashboard Layout (Complete layout with sidebar, tophat, and content area)
+export { 
+    DashboardLayout, 
+    ProviderSidebar, 
+    AdminSidebar, 
+    TopNavigation, 
+    DashboardFooter,
+    // Sidebar Icons
+    HomeIcon,
+    FlowsIcon,
+    InventoryIcon,
+    LoyaltyIcon,
+    CustomersIcon,
+    ReportsIcon,
+    AnalyticsIcon,
+    MarketingIcon,
+    WaiversIcon,
+    SettingsIcon,
+} from './navigation/DashboardLayout'
+export type { 
+    DashboardLayoutProps, 
+    DestinationType,
+    ProviderSidebarProps,
+    NavItem,
+    AdminSidebarProps, 
+    TopNavigationProps, 
+    DashboardFooterProps 
+} from './navigation/DashboardLayout'
+
 // Navigation Configuration
 export { NAVIGATION_ITEMS } from './navigation/config'
 

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

@@ -6,7 +6,7 @@ export interface DashboardFooterProps {
 }
 
 export const DashboardFooter: React.FC<DashboardFooterProps> = ({
-    version = '1.0.0'
+    version
 }) => {
     const currentYear = new Date().getFullYear()
 

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

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

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

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

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

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

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

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