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

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 import { Chart, ChartProps } from '../chart';
 import { MetricCard } from '../metric-card';
 import { Select } from '../../components/Select/Select';
@@ -74,6 +75,8 @@ export const Dashboard: React.FC<DashboardProps> = ({
   isLoading,
   isRefreshing = false,
 }) => {
+  const { t } = useTranslation(['Design']);
+
   const handleFilterChange = React.useCallback((filter: 'Today' | 'Yesterday' | 'This Week') => {
     onFilterChange?.(filter);
   }, [onFilterChange]);
@@ -82,10 +85,10 @@ export const Dashboard: React.FC<DashboardProps> = ({
 
   const getTimePeriodText = (filter: 'Today' | 'Yesterday' | 'This Week'): string => {
     switch (filter) {
-      case 'Today': return 'today';
-      case 'Yesterday': return 'yesterday';
-      case 'This Week': return 'this week';
-      default: return 'today';
+      case 'Today': return t('dashboardToday');
+      case 'Yesterday': return t('dashboardYesterday');
+      case 'This Week': return t('dashboardThisWeek');
+      default: return t('dashboardToday');
     }
   };
 
@@ -115,8 +118,8 @@ export const Dashboard: React.FC<DashboardProps> = ({
             onBookingTypeChange?.(newBookingType);
           }}
         >
-          <option value="Bookings For">Bookings For</option>
-          <option value="Bookings Made">Bookings Made</option>
+          <option value="Bookings For">{t('bookingsFor')}</option>
+          <option value="Bookings Made">{t('bookingsMade')}</option>
         </Select>
 
         <div className="dashboard__filter-container">
@@ -130,9 +133,9 @@ export const Dashboard: React.FC<DashboardProps> = ({
             }}
             className={showRefreshing ? 'select--refreshing' : ''}
           >
-            <option value="Today">Today</option>
-            <option value="Yesterday">Yesterday</option>
-            <option value="This Week">This Week</option>
+            <option value="Today">{t('dashboardTodayOption')}</option>
+            <option value="Yesterday">{t('dashboardYesterdayOption')}</option>
+            <option value="This Week">{t('dashboardThisWeekOption')}</option>
           </Select>
           
           {showRefreshing && (
@@ -146,7 +149,7 @@ export const Dashboard: React.FC<DashboardProps> = ({
       <div className="dashboard__metrics-grid">
         <MetricCard
           icon="https://api.builder.io/api/v1/image/assets/TEMP/a9080a040516a2aee8e202c1fecbbf08f0f4f7b0?placeholderIfAbsent=true"
-          title={metrics.totalBookings.label || "Total Bookings"}
+          title={metrics.totalBookings.label || t('totalBookings')}
           value={metrics.totalBookings.value}
           performance={{
             icon: getTrendIcon(metrics.totalBookings.change, metrics.totalBookings.is_positive),
@@ -159,7 +162,7 @@ export const Dashboard: React.FC<DashboardProps> = ({
 
         <MetricCard
           icon="https://api.builder.io/api/v1/image/assets/TEMP/d2cc0fb13dfe9a16e4258917cb2c331c1f0e1189?placeholderIfAbsent=true"
-          title={metrics.revenue.label || "Revenue"}
+          title={metrics.revenue.label || t('revenue')}
           value={metrics.revenue.value}
           performance={{
             icon: getTrendIcon(metrics.revenue.change, metrics.revenue.is_positive),
@@ -172,8 +175,8 @@ export const Dashboard: React.FC<DashboardProps> = ({
 
         <MetricCard
           icon="https://api.builder.io/api/v1/image/assets/TEMP/8c83d255f42836d5497be545d10a8ad9295aa968?placeholderIfAbsent=true"
-          title={metrics.numberOfPeople.label || `People booked in ${getTimePeriodText(timeFilter)}`}
-          value={metrics.numberOfPeople.formatted_value || `${metrics.numberOfPeople.value} people`}
+          title={metrics.numberOfPeople.label || t('peopleBookedIn', { period: getTimePeriodText(timeFilter) })}
+          value={metrics.numberOfPeople.formatted_value || t('peopleSuffix', { count: metrics.numberOfPeople.value })}
           performance={{
             icon: getTrendIcon(metrics.numberOfPeople.change, metrics.numberOfPeople.is_positive),
             text: metrics.numberOfPeople.change,
@@ -185,7 +188,7 @@ export const Dashboard: React.FC<DashboardProps> = ({
 
         <MetricCard
           icon="https://api.builder.io/api/v1/image/assets/TEMP/265ca1f3a6e063263764400beb86070a49b952cb?placeholderIfAbsent=true"
-          title={metrics.busiestTime.label || (timeFilter === 'This Week' ? 'Busiest day' : 'Busiest time')}
+          title={metrics.busiestTime.label || (timeFilter === 'This Week' ? t('busiestDay') : t('busiestTime'))}
           value={metrics.busiestTime.value}
           performance={{
             text: `${metrics.busiestTime.peopleText} // ${metrics.busiestTime.bookingText}`,
@@ -221,12 +224,12 @@ export const Dashboard: React.FC<DashboardProps> = ({
               <div className="dashboard__venue-section">
                 <VenueCard
                   icon='https://api.builder.io/api/v1/image/assets/TEMP/b44b83b1f30b882d65f942ec883e90ae34fdb2d0?placeholderIfAbsent=true'
-                  title='In venue'
+                  title={t('inVenue')}
                   value={metrics.peopleInVenue.formatted_value || '0'}
                 />
                 <VenueCard
                   icon={<VenueIcon />}
-                  title="Open until"
+                  title={t('openUntil')}
                   value={metrics.workHours?.message?.replace('Open until ', '') || ''}
                   shadowColor='#121E52'
                 />

package/src/v2/icons/index.tsx

@@ -770,6 +770,21 @@ export const SettingsPageDashboardIcon = ({ size = 24, className = '' }: { size?
   </svg>
 )
 
+export const BookedItMarkIcon = ({ size = 24, className = '' }: { size?: number; className?: string } = {}) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
+    <defs>
+      <linearGradient id="bookedit-mark-gradient" x1="2" y1="16" x2="20" y2="8" gradientUnits="userSpaceOnUse">
+        <stop stopColor="#7C3AED" />
+        <stop offset="0.5" stopColor="#6366F1" />
+        <stop offset="1" stopColor="#3B82F6" />
+      </linearGradient>
+    </defs>
+    <path d="M6.85 4.27C8.08 3.02 8.65 2.72 9.32 2.51C9.99 2.3 10.67 2.3 11.34 2.51C12.01 2.72 12.58 3.02 13.81 4.27L15.87 6.35C17.1 7.6 17.43 8.18 17.64 8.87C17.85 9.56 17.85 10.26 17.64 10.95C17.43 11.64 17.1 12.22 15.87 13.47L13.81 15.55C12.58 16.8 12.01 17.1 11.34 17.31C10.67 17.52 9.99 17.52 9.32 17.31C8.65 17.1 8.08 16.8 6.85 15.55L4.79 13.47C3.56 12.22 3.23 11.64 3.02 10.95C2.81 10.26 2.81 9.56 3.02 8.87C3.23 8.18 3.56 7.6 4.79 6.35L6.85 4.27Z" fill="url(#bookedit-mark-gradient)" />
+    <path d="M12.5 8.5C12.91 8.08 13.57 8.08 13.98 8.5C14.39 8.92 14.39 9.59 13.98 10.01L10.76 13.28C10.35 13.7 9.69 13.7 9.28 13.28L8.81 12.81C8.72 12.72 8.7 12.68 8.68 12.63C8.67 12.57 8.67 12.52 8.68 12.46C8.7 12.41 8.72 12.37 8.81 12.28L12.5 8.5Z" fill="white" />
+    <path d="M7.62 10.17C7.72 10.06 7.86 10 8 10H9.89C9.99 10 10.08 10.09 10.08 10.19C10.08 10.24 10.06 10.28 10.03 10.31L9.93 10.41L8.73 11.64C8.62 11.75 8.44 11.75 8.33 11.64L7.62 10.93C7.42 10.72 7.42 10.38 7.62 10.17Z" fill="white" />
+  </svg>
+)
+
 export const SettingsPageWaiversIcon = ({ size = 24, className = '', ...props }: React.SVGProps<SVGSVGElement> & { size?: number; className?: string } = {}) => (
   <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
     <path d="M29.3657 27.8354C31.4117 26.4405 34.0772 25.7503 37.729 26.1685L38.4731 26.2661L38.6235 26.2974C39.3599 26.4857 39.8491 27.2053 39.7339 27.9731C39.6184 28.741 38.9395 29.2849 38.1802 29.2485L38.0278 29.2339L37.395 29.1489C34.308 28.7933 32.394 29.4019 31.0562 30.314C29.5595 31.3345 28.5809 32.8586 27.5396 34.6099C26.5775 36.2279 25.4604 38.2594 23.6812 39.4409C21.8382 40.6643 19.5533 40.8605 16.5776 39.8687L15.9731 39.6548L15.8325 39.5933C15.1516 39.2557 14.8228 38.4502 15.0952 37.7231C15.3681 36.996 16.1461 36.6045 16.8813 36.7983L17.0278 36.8452L17.5229 37.021C19.9234 37.8245 21.1853 37.498 22.0229 36.9419C23.1024 36.2249 23.8614 34.9277 24.9614 33.0776C25.9824 31.3606 27.2536 29.2757 29.3657 27.8354ZM22.0132 6.82178C22.3878 6.08288 23.2909 5.78703 24.0298 6.16162L30.855 9.62256L30.9878 9.69775C31.6279 10.1082 31.8654 10.9454 31.5142 11.6382L21.6284 31.1382C21.5083 31.375 21.327 31.5762 21.104 31.7202L14.7261 35.8394C14.2781 36.1287 13.7106 36.1585 13.2349 35.9175C12.759 35.6762 12.4459 35.2001 12.4146 34.6675L11.9673 27.0884C11.9517 26.8234 12.0075 26.5586 12.1274 26.3218L22.0132 6.82178ZM14.9878 27.3149L15.2583 31.9224L19.1372 29.4185L28.1606 11.6196L24.0112 9.51611L14.9878 27.3149Z" fill="currentColor"/>

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

@@ -1,4 +1,5 @@
 import React from 'react'
+import { useTranslation } from 'react-i18next'
 import './DashboardFooter.scss'
 
 export interface DashboardFooterProps {
@@ -8,16 +9,17 @@ export interface DashboardFooterProps {
 export const DashboardFooter: React.FC<DashboardFooterProps> = ({
     version
 }) => {
+    const { t } = useTranslation(['Design'])
     const currentYear = new Date().getFullYear()
 
     return (
         <footer className="dashboard-footer">
             <div className="dashboard-footer__content">
                 <div className="dashboard-footer__version">
-                    Version: <span>{version}</span>
+                    {t('versionLabel')}<span>{version}</span>
                 </div>
                 <div className="dashboard-footer__copyright">
-                    © Booked it {currentYear}
+                    {t('copyright', { year: currentYear })}
                 </div>
             </div>
         </footer>

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/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">

package/src/v2/shadcn/_reference/auth/CreatePasswordForm.tsx

@@ -16,7 +16,7 @@ export const CreatePasswordForm: React.FC = () => {
   const [showError, setShowError] = useState(false);
   const navigate = useNavigate();
   const { showSuccess, showError: showNotifyError } = useNotify();
-  const { t } = useTranslation(['Design', 'Validation']);
+  const { t } = useTranslation(['Design', 'User', 'Validation']);
   
   // Password strength calculation
   const hasNumber = /\d/.test(password);
@@ -75,7 +75,7 @@ export const CreatePasswordForm: React.FC = () => {
       });
 
       if (error) {
-        showNotifyError('Update failed', error.message || 'Failed to update password');
+        showNotifyError(t('updateFailed', { ns: 'User' }), error.message);
         return;
       }
 
@@ -84,7 +84,7 @@ export const CreatePasswordForm: React.FC = () => {
       if (currentUser) {
         const { error: profileError } = await supabase
           .from('profiles')
-          .update({ 
+          .update({
             force_password_reset: false,
             password_last_changed_at: new Date().toISOString()
           })
@@ -95,12 +95,12 @@ export const CreatePasswordForm: React.FC = () => {
         }
       }
 
-      showSuccess('Password updated successfully!');
-      
+      showSuccess(t('passwordUpdatedSuccessfully', { ns: 'User' }));
+
       // Get user's primary role and assignments to determine dashboard
       const { data: { user } } = await supabase.auth.getUser();
       if (!user) {
-        showNotifyError('Authentication failed');
+        showNotifyError(t('authenticationFailed', { ns: 'User' }));
         navigate('/auth');
         return;
       }
@@ -110,7 +110,7 @@ export const CreatePasswordForm: React.FC = () => {
 
       if (roleError) {
         console.error('Error fetching role:', roleError);
-        showNotifyError('Failed to determine user permissions');
+        showNotifyError(t('failedToDeterminePermissions', { ns: 'User' }));
         navigate('/auth');
         return;
       }
@@ -161,10 +161,10 @@ export const CreatePasswordForm: React.FC = () => {
       }
 
       // No assignments found - show error
-      showNotifyError('No dashboard access configured. Please contact your administrator.');
+      showNotifyError(t('noDashboardAccess', { ns: 'User' }));
       navigate('/auth');
     } catch (error) {
-      showNotifyError('An unexpected error occurred');
+      showNotifyError(t('unexpectedError', { ns: 'User' }));
     } finally {
       setIsSubmitting(false);
     }

package/src/v2/shadcn/_reference/auth/CreatePasswordPanel.tsx

@@ -1,16 +1,18 @@
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 import { CreatePasswordForm } from './CreatePasswordForm';
 import { AuthLayout } from './AuthLayout';
 import { IconUser } from '../../../icons';
 export const CreatePasswordPanel: React.FC = () => {
+  const { t } = useTranslation(['User']);
   return (
     <AuthLayout
-      badgeLabel="Create new password"
+      badgeLabel={t('createNewPassword')}
       icon={
         <IconUser className="w-16 h-16 text-fill-primary" />
       }
-      title="Create new password"
-      subtitle="Secure your account."
+      title={t('createNewPassword')}
+      subtitle={t('createNewPasswordSubtitle')}
     >
       <CreatePasswordForm />
     </AuthLayout>

package/src/v2/shadcn/_reference/auth/LoginForm.tsx

@@ -11,18 +11,22 @@ import { useNavigate } from 'react-router-dom';
 import { useAuth } from '@/contexts/AuthContext';
 import { supabase } from '@/integrations/supabase/client';
 
-const loginSchema = z.object({
-  email: z.string().email('Invalid email address'),
-  password: z.string().min(1, 'Password is required'),
-});
-
-type LoginFormData = z.infer<typeof loginSchema>;
+type LoginFormData = {
+  email: string;
+  password: string;
+};
 
 export const LoginForm: React.FC = () => {
   const navigate = useNavigate();
   const { signIn } = useAuth();
   const { showSuccess, showError } = useNotify();
-  const { t } = useTranslation(['Design']);
+  const { t } = useTranslation(['Design', 'User', 'Validation']);
+
+  const loginSchema = z.object({
+    email: z.string().email(t('invalidEmailAddress', { ns: 'Validation' })),
+    password: z.string().min(1, t('passwordRequired', { ns: 'Validation' })),
+  });
+
   const form = useForm<LoginFormData>({
     resolver: zodResolver(loginSchema),
     defaultValues: {
@@ -37,14 +41,14 @@ export const LoginForm: React.FC = () => {
       const { error } = await signIn(data.email, data.password);
       
       if (error) {
-        showError('Sign in failed', error.message || 'Failed to sign in');
+        showError(t('signInFailed', { ns: 'User' }), error.message);
         return;
       }
-      
+
       // Get user's primary role and assignments to determine dashboard
       const { data: { user } } = await supabase.auth.getUser();
       if (!user) {
-        showError('Authentication failed');
+        showError(t('authenticationFailed', { ns: 'User' }));
         return;
       }
 
@@ -58,7 +62,7 @@ export const LoginForm: React.FC = () => {
       if (profile?.status === 'suspended') {
         // Log them out immediately
         await supabase.auth.signOut();
-        showError('Account Suspended', 'Your account has been suspended. Please contact your administrator or account manager for assistance.');
+        showError(t('accountSuspendedTitle', { ns: 'User' }), t('accountSuspended', { ns: 'User' }));
         return;
       }
 
@@ -67,7 +71,7 @@ export const LoginForm: React.FC = () => {
 
       if (roleError) {
         console.error('Error fetching role:', roleError);
-        showError('Failed to determine user permissions');
+        showError(t('failedToDeterminePermissions', { ns: 'User' }));
         return;
       }
 
@@ -75,7 +79,7 @@ export const LoginForm: React.FC = () => {
 
       // Super admins and system admins go to admin dashboard
       if (primaryRole === 'super_admin' || primaryRole === 'system_admin') {
-        showSuccess('Welcome back, Admin!');
+        showSuccess(t('welcomeBackAdmin', { ns: 'User' }));
         navigate('/admin');
         return;
       }
@@ -90,7 +94,7 @@ export const LoginForm: React.FC = () => {
 
       if (companyAssignments && companyAssignments.length > 0) {
         const companyId = companyAssignments[0].company_id;
-        showSuccess('Welcome back!');
+        showSuccess(t('welcomeBack', { ns: 'User' }));
         navigate(`/company/${companyId}`);
         return;
       }
@@ -115,18 +119,18 @@ export const LoginForm: React.FC = () => {
         if (provider) {
           const providerType = provider.type === 'venue' ? 'venue' : 'promoter';
           const friendlyId = provider.venue_id || '01';
-          showSuccess('Welcome back!');
+          showSuccess(t('welcomeBack', { ns: 'User' }));
           navigate(`/${providerType}/${friendlyId}`);
           return;
         }
       }
 
       // No assignments found - show error
-      showError('No dashboard access configured. Please contact your administrator.');
+      showError(t('noDashboardAccess', { ns: 'User' }));
       console.error('User has role but no company/provider assignments');
     } catch (error) {
       console.error('Login error:', error);
-      showError('An unexpected error occurred');
+      showError(t('unexpectedError', { ns: 'User' }));
     }
   };
 

package/src/v2/shadcn/_reference/auth/LoginPanel.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router-dom';
 import { LoginForm } from './LoginForm';
 import { AuthLayout } from './AuthLayout';
@@ -8,6 +9,7 @@ import { Alert, AlertDescription } from '../ui/alert';
 export const LoginPanel: React.FC = () => {
   const location = useLocation();
   const [showSuspendedAlert, setShowSuspendedAlert] = useState(false);
+  const { t } = useTranslation(['User']);
 
   useEffect(() => {
     // Check if user was redirected due to suspension
@@ -19,17 +21,17 @@ export const LoginPanel: React.FC = () => {
 
   return (
     <AuthLayout
-      badgeLabel="Log in"
+      badgeLabel={t('logIn')}
       icon={
         <IconLogin className="w-16 h-16 text-fill-primary" />
       }
-      title="Log in"
-      subtitle="Access your account."
+      title={t('logIn')}
+      subtitle={t('loginSubtitle')}
     >
       {showSuspendedAlert && (
         <Alert className="mb-4 border-status-error bg-status-error/10">
           <AlertDescription className="text-label-primary text-sm">
-            Your account has been suspended. Please contact your administrator or account manager for assistance.
+            {t('accountSuspended')}
           </AlertDescription>
         </Alert>
       )}