@licklist/design 0.78.5-dev.92 → 0.78.5-dev.94

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/SidebarUserElement/SidebarUserElement.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import { useTranslation } from 'react-i18next'
 import './SidebarUserElement.scss'
 
 // Icon assets for dropdown menu items
@@ -47,6 +48,7 @@ export const SidebarUserElement: React.FC<SidebarUserElementProps> = ({
     onUserClick,
     className,
 }) => {
+    const { t } = useTranslation(['Design'])
     const userInfo = (
         <div className="sidebar-user-element__user-info">
             <div className="sidebar-user-element__avatar" data-property-1="No User">
@@ -70,7 +72,7 @@ export const SidebarUserElement: React.FC<SidebarUserElementProps> = ({
                         <div className="sidebar-user-element__dropdown-icon" data-icon="Admin">
                             <AdminIcon />
                         </div>
-                        <div className="sidebar-user-element__dropdown-text">Site Admin</div>
+                        <div className="sidebar-user-element__dropdown-text">{t('siteAdmin')}</div>
                     </div>
                 </div>
 
@@ -82,7 +84,7 @@ export const SidebarUserElement: React.FC<SidebarUserElementProps> = ({
                         <div className="sidebar-user-element__dropdown-icon" data-icon="User Settings">
                             <ProfileIcon />
                         </div>
-                        <div className="sidebar-user-element__dropdown-text">Profile</div>
+                        <div className="sidebar-user-element__dropdown-text">{t('profile')}</div>
                     </div>
                 </div>
 
@@ -94,7 +96,7 @@ export const SidebarUserElement: React.FC<SidebarUserElementProps> = ({
                         <div className="sidebar-user-element__dropdown-icon" data-icon="Log out">
                             <LogoutIcon />
                         </div>
-                        <div className="sidebar-user-element__dropdown-text">Log Out</div>
+                        <div className="sidebar-user-element__dropdown-text">{t('logOut')}</div>
                     </div>
                 </div>
             </div>

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/pages/RoleSelection/RoleSelectionPage.tsx

@@ -1,4 +1,5 @@
 import React, { useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import { Button } from '../../components/Button'
 import { ArrowLeftIcon } from '../../icons'
 import './RoleSelectionPage.scss'
@@ -32,17 +33,18 @@ export interface RoleSelectionPageProps {
 // ─── Component ────────────────────────────────────────────────────────────────
 
 export const RoleSelectionPage: React.FC<RoleSelectionPageProps> = ({
-  pageTitle = 'Add User',
+  pageTitle,
   userName,
   roles,
   defaultRole,
-  submitLabel = 'Send Invitation',
+  submitLabel,
   onSubmit,
   onBack,
   onCancel,
   isLoading = false,
   error,
 }) => {
+  const { t } = useTranslation(['Design'])
   const [selectedRole, setSelectedRole] = useState<string>(
     defaultRole ?? roles[0]?.value ?? ''
   )
@@ -51,10 +53,10 @@ export const RoleSelectionPage: React.FC<RoleSelectionPageProps> = ({
     <div className="role-selection-page">
       {/* ── Header ── */}
       <header className="role-selection-page__header">
-        <h1 className="role-selection-page__title">{pageTitle}</h1>
+        <h1 className="role-selection-page__title">{pageTitle ?? t('addUser')}</h1>
         {onCancel && (
           <Button variant="secondary-soft" onClick={onCancel}>
-            Cancel
+            {t('cancel')}
           </Button>
         )}
       </header>
@@ -64,7 +66,7 @@ export const RoleSelectionPage: React.FC<RoleSelectionPageProps> = ({
         {onBack && (
           <button className="role-selection-page__back" type="button" onClick={onBack}>
             <ArrowLeftIcon />
-            Back
+            {t('back')}
           </button>
         )}
 
@@ -76,10 +78,10 @@ export const RoleSelectionPage: React.FC<RoleSelectionPageProps> = ({
 
         <div className="role-selection-page__step-header">
           <h2 className="role-selection-page__step-title">
-            What sort of user is {userName ? <strong>{userName}</strong> : 'this user'}?
+            {t('whatSortOfUser')} {userName ? <strong>{userName}</strong> : t('thisUser')}?
           </h2>
           <p className="role-selection-page__step-desc">
-            Permissions can be customised after the user is created.
+            {t('permissionsCustomisableAfterCreation')}
           </p>
         </div>
 
@@ -119,7 +121,7 @@ export const RoleSelectionPage: React.FC<RoleSelectionPageProps> = ({
           isLoading={isLoading}
           disabled={isLoading || !selectedRole}
         >
-          {submitLabel}
+          {submitLabel ?? t('sendInvitation')}
         </Button>
       </div>
     </div>

package/src/v2/pages/UserDetails/UserDetailsPage.tsx

@@ -1,4 +1,5 @@
 import React, { useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import { Button } from '../../components/Button'
 import { FormField } from '../../components/FormField'
 import { UserAvatar } from '../../components/UserAvatar'
@@ -57,7 +58,7 @@ function getInitials(fullName: string): string {
 // ─── Component ────────────────────────────────────────────────────────────────
 
 export const UserDetailsPage: React.FC<UserDetailsPageProps> = ({
-  pageTitle = 'Add User',
+  pageTitle,
   existingUser,
   defaultFirstName = '',
   defaultLastName = '',
@@ -67,6 +68,7 @@ export const UserDetailsPage: React.FC<UserDetailsPageProps> = ({
   isLoading = false,
   error,
 }) => {
+  const { t } = useTranslation(['Design'])
   const [firstName, setFirstName] = useState(defaultFirstName)
   const [lastName, setLastName] = useState(defaultLastName)
   const [fieldErrors, setFieldErrors] = useState<{ firstName?: string; lastName?: string }>({})
@@ -79,8 +81,8 @@ export const UserDetailsPage: React.FC<UserDetailsPageProps> = ({
     }
 
     const errs: { firstName?: string; lastName?: string } = {}
-    if (!firstName.trim()) errs.firstName = 'First name is required'
-    if (!lastName.trim()) errs.lastName = 'Last name is required'
+    if (!firstName.trim()) errs.firstName = t('firstNameRequired')
+    if (!lastName.trim()) errs.lastName = t('lastNameRequired')
 
     if (Object.keys(errs).length > 0) {
       setFieldErrors(errs)
@@ -95,10 +97,10 @@ export const UserDetailsPage: React.FC<UserDetailsPageProps> = ({
     <div className="user-details-page">
       {/* ── Header ── */}
       <header className="user-details-page__header">
-        <h1 className="user-details-page__title">{pageTitle}</h1>
+        <h1 className="user-details-page__title">{pageTitle ?? t('addUser')}</h1>
         {onCancel && (
           <Button variant="secondary-soft" onClick={onCancel}>
-            Cancel
+            {t('cancel')}
           </Button>
         )}
       </header>
@@ -108,7 +110,7 @@ export const UserDetailsPage: React.FC<UserDetailsPageProps> = ({
         {onBack && (
           <button className="user-details-page__back" type="button" onClick={onBack}>
             <ArrowLeftIcon />
-            Back
+            {t('back')}
           </button>
         )}
 
@@ -122,9 +124,9 @@ export const UserDetailsPage: React.FC<UserDetailsPageProps> = ({
           /* ── Existing user found ── */
           <div className="user-details-page__existing">
             <div className="user-details-page__step-header">
-              <h2 className="user-details-page__step-title">Existing User Found</h2>
+              <h2 className="user-details-page__step-title">{t('existingUserFound')}</h2>
               <p className="user-details-page__step-desc">
-                A user with this email already exists in the system.
+                {t('existingUserFoundDesc')}
               </p>
             </div>
 
@@ -141,7 +143,7 @@ export const UserDetailsPage: React.FC<UserDetailsPageProps> = ({
 
             {existingUser.assignments && existingUser.assignments.length > 0 && (
               <div className="user-details-page__assignments">
-                <p className="user-details-page__assignments-label">Current assignments</p>
+                <p className="user-details-page__assignments-label">{t('currentAssignments')}</p>
                 <ul className="user-details-page__assignment-list">
                   {existingUser.assignments.map((a) => (
                     <li key={a.id} className="user-details-page__assignment-item">
@@ -162,19 +164,19 @@ export const UserDetailsPage: React.FC<UserDetailsPageProps> = ({
             )}
 
             <Button variant="primary" onClick={handleNext} isLoading={isLoading} disabled={isLoading}>
-              Continue
+              {t('continue')}
             </Button>
           </div>
         ) : (
           /* ── New user — name form ── */
           <div className="user-details-page__form">
             <div className="user-details-page__step-header">
-              <h2 className="user-details-page__step-title">User Details</h2>
+              <h2 className="user-details-page__step-title">{t('userDetailsStepTitle')}</h2>
             </div>
 
             <div className="user-details-page__fields">
               <FormField
-                label="First Name"
+                label={t('firstName')}
                 value={firstName}
                 onChange={(e) => {
                   setFirstName(e.target.value)
@@ -186,7 +188,7 @@ export const UserDetailsPage: React.FC<UserDetailsPageProps> = ({
                 disabled={isLoading}
               />
               <FormField
-                label="Last Name"
+                label={t('lastName')}
                 value={lastName}
                 onChange={(e) => {
                   setLastName(e.target.value)
@@ -200,7 +202,7 @@ export const UserDetailsPage: React.FC<UserDetailsPageProps> = ({
             </div>
 
             <Button variant="primary" onClick={handleNext} isLoading={isLoading} disabled={isLoading}>
-              Next
+              {t('next')}
             </Button>
           </div>
         )}

package/src/v2/pages/auth/AuthLayout/AuthLayout.tsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react'
+import { useTranslation } from 'react-i18next'
 import './AuthLayout.scss'
 import { DashboardFooter } from '../../../navigation/DashboardLayout/DashboardFooter'
 import { AuthBgDecorationIcon, BookedLogo } from '../../../icons'
@@ -17,6 +18,7 @@ export interface AuthLayoutProps {
 }
 
 export const AuthLayout: React.FC<AuthLayoutProps> = ({ badgeLabel, icon, title, subtitle, children, version, error, successMessage }) => {
+  const { t } = useTranslation(['Design'])
   const [dismissed, setDismissed] = useState(false)
 
   useEffect(() => {
@@ -31,10 +33,10 @@ export const AuthLayout: React.FC<AuthLayoutProps> = ({ badgeLabel, icon, title,
       <AuthBgDecorationIcon />
 
       {showError && (
-        <Alert variant="error" title="Error" message={error} className="auth-layout__alert" onDismiss={() => setDismissed(true)} />
+        <Alert variant="error" title={t('errorTitle')} message={error} className="auth-layout__alert" onDismiss={() => setDismissed(true)} />
       )}
       {showSuccess && (
-        <Alert variant="success" title="Success" message={successMessage} className="auth-layout__alert" onDismiss={() => setDismissed(true)} />
+        <Alert variant="success" title={t('successTitle')} message={successMessage} className="auth-layout__alert" onDismiss={() => setDismissed(true)} />
       )}
 
       <div className="auth-layout__card">