Add platform email templates, staff invitations, and quota tracking

- Add PlatformEmailTemplate model and API for superuser-managed email templates
- Add PlatformStaffInvitation model with email sending via Celery tasks
- Add platform staff invite page and acceptance flow with auto-login
- Add quota tracking models (DailyAppointmentUsage, DailyAPIUsage, StorageUsage)
- Add quota status API endpoints and frontend banners
- Add storage usage service for tenant media tracking
- Fix platform user deletion with raw SQL to handle multi-tenant FK constraints
- Update EditPlatformUserModal with archive/delete buttons
- Update PlatformSidebar with email templates link for superusers
- Configure console email backend and Celery eager mode for local development

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

.idea/smoothschedule.iml

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module version="4">
+  <component name="PyDocumentationSettings">
+    <option name="format" value="PLAIN" />
+    <option name="myDocStringFormat" value="Plain" />
+  </component>
+  <component name="TemplatesService">
+    <option name="TEMPLATE_CONFIGURATION" value="Jinja2" />
+    <option name="TEMPLATE_FOLDERS">
+      <list>
+        <option value="$MODULE_DIR$/smoothschedule/templates" />
+      </list>
+    </option>
+  </component>
+  <component name="TestRunnerService">
+    <option name="PROJECT_TEST_RUNNER" value="py.test" />
+  </component>
+</module>

activepieces-fork/packages/react-ui/src/app/components/sidebar/ap-sidebar-item.tsx

@@ -2,6 +2,7 @@ import { LockKeyhole } from 'lucide-react';
 import { ComponentType, SVGProps } from 'react';
 import { Link, useLocation } from 'react-router-dom';
 
+import { useEmbedding } from '@/components/embed-provider';
 import { buttonVariants } from '@/components/ui/button';
 import { Dot } from '@/components/ui/dot';
 import {
@@ -15,6 +16,7 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from '@/components/ui/tooltip';
+import { authenticationSession } from '@/lib/authentication-session';
 import { cn } from '@/lib/utils';
 
 export type SidebarItemType = {

activepieces-fork/packages/react-ui/src/app/components/sidebar/sidebar-header.tsx

@@ -42,7 +42,7 @@ export const AppSidebarHeader = () => {
                 <div
                   className={cn(
                     buttonVariants({ variant: 'ghost', size: 'icon' }),
-                    'w-full flex items-center justify-center h-9',
+                    'w-full flex items-center justify-center h-[52px]',
                   )}
                 >
                   <img
@@ -54,7 +54,7 @@ export const AppSidebarHeader = () => {
                     alt={t('home')}
                     className={cn(
                       'object-contain',
-                      state === 'collapsed' ? 'h-5 w-5' : 'w-full h-9',
+                      state === 'collapsed' ? 'h-5 w-5' : 'w-full h-[52px]',
                     )}
                     draggable={false}
                   />

activepieces-fork/packages/react-ui/src/app/routes/authenticate/index.tsx

@@ -9,14 +9,22 @@ const AuthenticatePage = () => {
 
   const searchParams = new URLSearchParams(location.search);
   const response = searchParams.get('response');
+  const token = searchParams.get('token');
+  const redirectTo = searchParams.get('redirect') || '/flows';
 
   useEffect(() => {
     if (response) {
+      // Handle full response object (legacy)
       const decodedResponse = JSON.parse(response);
       authenticationSession.saveResponse(decodedResponse, false);
-      navigate('/flows');
+      navigate(redirectTo);
+    } else if (token) {
+      // Handle standalone JWT token (from embedded mode new tab)
+      // Save token directly to localStorage for persistence in new tabs
+      authenticationSession.saveToken(token);
+      navigate(redirectTo);
     }
-  }, [response]);
+  }, [response, token, redirectTo, navigate]);
 
   return <>Please wait...</>;
 };

activepieces-fork/packages/react-ui/src/components/show-powered-by.tsx

@@ -23,7 +23,7 @@ const ShowPoweredBy = ({ show, position = 'sticky' }: ShowPoweredByProps) => {
           },
         )}
       >
-        <div className=" text-sm transition">Built with</div>
+        <div className=" text-sm transition">Powered by</div>
         <div className="justify-center flex items-center gap-1">
           <svg
             width={15}

activepieces-fork/packages/react-ui/src/lib/authentication-session.ts

@@ -19,6 +19,14 @@ export const authenticationSession = {
     ApStorage.getInstance().setItem(tokenKey, response.token);
     window.dispatchEvent(new Event('storage'));
   },
+  /**
+   * Save a standalone JWT token directly.
+   * Used for auto-authentication when opening new tabs from embedded mode.
+   */
+  saveToken(token: string) {
+    ApStorage.getInstance().setItem(tokenKey, token);
+    window.dispatchEvent(new Event('storage'));
+  },
   isJwtExpired(token: string): boolean {
     if (!token) {
       return true;

activepieces-fork/packages/react-ui/src/lib/navigation-utils.tsx

@@ -2,10 +2,13 @@ import { useNavigate, useSearchParams } from 'react-router-dom';
 
 import { useEmbedding } from '../components/embed-provider';
 
+import { authenticationSession } from './authentication-session';
+
 export const useNewWindow = () => {
   const { embedState } = useEmbedding();
   const navigate = useNavigate();
   if (embedState.isEmbedded) {
+    // In embedded mode, navigate within the iframe (don't open new tabs)
     return (route: string, searchParams?: string) =>
       navigate({
         pathname: route,
@@ -21,6 +24,35 @@ export const useNewWindow = () => {
   }
 };
 
+/**
+ * Opens a route in a new browser tab with automatic authentication.
+ * For embedded contexts where sessionStorage isn't shared across tabs,
+ * this passes the JWT token via URL for auto-login.
+ */
+export const useOpenInNewTab = () => {
+  const { embedState } = useEmbedding();
+
+  return (route: string, searchParams?: string) => {
+    const token = authenticationSession.getToken();
+
+    if (embedState.isEmbedded && token) {
+      // In embedded mode, pass token for auto-authentication in new tab
+      const encodedRedirect = encodeURIComponent(
+        `${route}${searchParams ? '?' + searchParams : ''}`,
+      );
+      const authUrl = `/authenticate?token=${encodeURIComponent(token)}&redirect=${encodedRedirect}`;
+      window.open(authUrl, '_blank', 'noopener');
+    } else {
+      // Non-embedded mode - token is already in localStorage
+      window.open(
+        `${route}${searchParams ? '?' + searchParams : ''}`,
+        '_blank',
+        'noopener noreferrer',
+      );
+    }
+  };
+};
+
 export const FROM_QUERY_PARAM = 'from';
 /**State param is for oauth2 flow, it is used to redirect to the page after login*/
 export const STATE_QUERY_PARAM = 'state';

activepieces-fork/packages/server/api/src/app/flags/theme.ts

@@ -67,6 +67,6 @@ export const defaultTheme = generateTheme({
     primaryColor: '#6e41e2',
     websiteName: 'Automation Builder',
     fullLogoUrl: 'https://smoothschedule.nyc3.digitaloceanspaces.com/static/images/automation-builder-logo-light.svg',
-    favIconUrl: 'https://cdn.activepieces.com/brand/favicon.ico',
+    favIconUrl: 'https://smoothschedule.nyc3.digitaloceanspaces.com/static/images/logo-branding.png',
-    logoIconUrl: 'https://cdn.activepieces.com/brand/logo.svg',
+    logoIconUrl: 'https://smoothschedule.nyc3.digitaloceanspaces.com/static/images/logo-branding.png',
 })

frontend/nginx.conf

@@ -54,6 +54,15 @@ http {
             proxy_set_header X-Forwarded-Proto $scheme;
         }
 
+        # Proxy Auth requests to Django
+        location /auth/ {
+            proxy_pass http://django:5000;
+            proxy_set_header Host $host;
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_set_header X-Forwarded-Proto $scheme;
+        }
+
         # Proxy Admin requests to Django
         location /admin/ {
             proxy_pass http://django:5000;

frontend/src/App.tsx

@@ -66,10 +66,12 @@ const PlatformStaff = React.lazy(() => import('./pages/platform/PlatformStaff'))
 const PlatformSettings = React.lazy(() => import('./pages/platform/PlatformSettings'));
 const BillingManagement = React.lazy(() => import('./pages/platform/BillingManagement'));
 const PlatformStaffEmail = React.lazy(() => import('./pages/platform/PlatformStaffEmail'));
+const PlatformEmailTemplates = React.lazy(() => import('./pages/platform/PlatformEmailTemplates'));
 const ProfileSettings = React.lazy(() => import('./pages/ProfileSettings'));
 const VerifyEmail = React.lazy(() => import('./pages/VerifyEmail'));
 const EmailVerificationRequired = React.lazy(() => import('./pages/EmailVerificationRequired'));
 const AcceptInvitePage = React.lazy(() => import('./pages/AcceptInvitePage'));
+const PlatformStaffInvitePage = React.lazy(() => import('./pages/platform/PlatformStaffInvitePage'));
 const TenantOnboardPage = React.lazy(() => import('./pages/TenantOnboardPage'));
 const TenantLandingPage = React.lazy(() => import('./pages/TenantLandingPage'));
 const Tickets = React.lazy(() => import('./pages/Tickets')); // Import Tickets page
@@ -130,6 +132,8 @@ const PublicPage = React.lazy(() => import('./pages/PublicPage')); // Import Pub
 const BookingFlow = React.lazy(() => import('./pages/BookingFlow')); // Import Booking Flow
 const Locations = React.lazy(() => import('./pages/Locations')); // Import Locations management page
 const MediaGalleryPage = React.lazy(() => import('./pages/MediaGalleryPage')); // Import Media Gallery page
+const POS = React.lazy(() => import('./pages/POS')); // Import Point of Sale page
+const Products = React.lazy(() => import('./pages/Products')); // Import Products management page
 
 // Settings pages
 const SettingsLayout = React.lazy(() => import('./layouts/SettingsLayout'));
@@ -373,6 +377,7 @@ const AppContent: React.FC = () => {
           <Route path="/verify-email" element={<VerifyEmail />} />
           <Route path="/accept-invite" element={<AcceptInvitePage />} />
           <Route path="/accept-invite/:token" element={<AcceptInvitePage />} />
+          <Route path="/platform-staff-invite" element={<PlatformStaffInvitePage />} />
           <Route path="/tenant-onboard" element={<TenantOnboardPage />} />
           <Route path="/sign/:token" element={<ContractSigning />} />
           <Route path="*" element={<Navigate to="/" replace />} />
@@ -409,6 +414,7 @@ const AppContent: React.FC = () => {
             <Route path="/verify-email" element={<VerifyEmail />} />
             <Route path="/accept-invite" element={<AcceptInvitePage />} />
             <Route path="/accept-invite/:token" element={<AcceptInvitePage />} />
+            <Route path="/platform-staff-invite" element={<PlatformStaffInvitePage />} />
             <Route path="/tenant-onboard" element={<TenantOnboardPage />} />
             <Route path="/sign/:token" element={<ContractSigning />} />
             <Route path="*" element={<Navigate to="/" replace />} />
@@ -417,10 +423,10 @@ const AppContent: React.FC = () => {
       );
     }
 
-    // For platform subdomain, only /platform/login exists - everything else renders nothing
+    // For platform subdomain, only specific paths exist - everything else renders nothing
     if (isPlatformSubdomain) {
       const path = window.location.pathname;
-      const allowedPaths = ['/platform/login', '/mfa-verify', '/verify-email'];
+      const allowedPaths = ['/platform/login', '/mfa-verify', '/verify-email', '/platform-staff-invite'];
 
       // If not an allowed path, render nothing
       if (!allowedPaths.includes(path)) {
@@ -433,6 +439,7 @@ const AppContent: React.FC = () => {
             <Route path="/platform/login" element={<PlatformLoginPage />} />
             <Route path="/mfa-verify" element={<MFAVerifyPage />} />
             <Route path="/verify-email" element={<VerifyEmail />} />
+            <Route path="/platform-staff-invite" element={<PlatformStaffInvitePage />} />
           </Routes>
         </Suspense>
       );
@@ -458,6 +465,7 @@ const AppContent: React.FC = () => {
           <Route path="/verify-email" element={<VerifyEmail />} />
           <Route path="/accept-invite" element={<AcceptInvitePage />} />
           <Route path="/accept-invite/:token" element={<AcceptInvitePage />} />
+          <Route path="/platform-staff-invite" element={<PlatformStaffInvitePage />} />
           <Route path="/tenant-onboard" element={<TenantOnboardPage />} />
           <Route path="/sign/:token" element={<ContractSigning />} />
           <Route path="*" element={<Navigate to="/" replace />} />
@@ -597,6 +605,7 @@ const AppContent: React.FC = () => {
               <>
                 <Route path="/platform/settings" element={<PlatformSettings />} />
                 <Route path="/platform/billing" element={<BillingManagement />} />
+                <Route path="/platform/email-templates" element={<PlatformEmailTemplates />} />
               </>
             )}
             <Route path="/platform/profile" element={<ProfileSettings />} />
@@ -765,6 +774,18 @@ const AppContent: React.FC = () => {
           <Route path="/login" element={<Navigate to="/dashboard" replace />} />
           <Route path="/sign/:token" element={<ContractSigning />} />
 
+          {/* Point of Sale - Full screen mode outside BusinessLayout */}
+          <Route
+            path="/dashboard/pos"
+            element={
+              canAccess('can_access_pos') ? (
+                <POS />
+              ) : (
+                <Navigate to="/dashboard" />
+              )
+            }
+          />
+
           {/* Dashboard routes inside BusinessLayout */}
           <Route
             element={
@@ -989,6 +1010,17 @@ const AppContent: React.FC = () => {
                 )
               }
             />
+            {/* Products Management */}
+            <Route
+              path="/dashboard/products"
+              element={
+                canAccess('can_access_pos') ? (
+                  <Products />
+                ) : (
+                  <Navigate to="/dashboard" />
+                )
+              }
+            />
             {/* Settings Routes with Nested Layout */}
             {/* Owners have full access, staff need can_access_settings permission */}
             {canAccess('can_access_settings') ? (

frontend/src/__tests__/App.test.tsx

@@ -0,0 +1,583 @@
+/**
+ * Unit Tests for App Component
+ *
+ * Test Coverage:
+ * - Router setup and initialization
+ * - Loading states
+ * - Error states
+ * - Basic rendering
+ * - QueryClient provider
+ * - Toaster component
+ *
+ * Note: Due to complex routing logic based on subdomains and authentication state,
+ * detailed routing tests are covered in E2E tests. These unit tests focus on
+ * basic component rendering and state handling.
+ */
+
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, waitFor } from '@testing-library/react';
+import App from '../App';
+
+// Mock all lazy-loaded pages to avoid Suspense issues in tests
+vi.mock('../pages/LoginPage', () => ({
+  default: () => <div data-testid="login-page">Login Page</div>,
+}));
+
+vi.mock('../pages/marketing/HomePage', () => ({
+  default: () => <div data-testid="home-page">Home Page</div>,
+}));
+
+vi.mock('../pages/Dashboard', () => ({
+  default: () => <div data-testid="dashboard">Dashboard</div>,
+}));
+
+vi.mock('../pages/platform/PlatformDashboard', () => ({
+  default: () => <div data-testid="platform-dashboard">Platform Dashboard</div>,
+}));
+
+vi.mock('../pages/customer/CustomerDashboard', () => ({
+  default: () => <div data-testid="customer-dashboard">Customer Dashboard</div>,
+}));
+
+// Mock all layouts
+vi.mock('../layouts/BusinessLayout', () => ({
+  default: () => <div data-testid="business-layout">Business Layout</div>,
+}));
+
+vi.mock('../layouts/PlatformLayout', () => ({
+  default: () => <div data-testid="platform-layout">Platform Layout</div>,
+}));
+
+vi.mock('../layouts/CustomerLayout', () => ({
+  default: () => <div data-testid="customer-layout">Customer Layout</div>,
+}));
+
+vi.mock('../layouts/MarketingLayout', () => ({
+  default: () => <div data-testid="marketing-layout">Marketing Layout</div>,
+}));
+
+// Mock hooks
+const mockUseCurrentUser = vi.fn();
+const mockUseCurrentBusiness = vi.fn();
+const mockUseMasquerade = vi.fn();
+const mockUseLogout = vi.fn();
+const mockUseUpdateBusiness = vi.fn();
+const mockUsePlanFeatures = vi.fn();
+
+vi.mock('../hooks/useAuth', () => ({
+  useCurrentUser: () => mockUseCurrentUser(),
+  useMasquerade: () => mockUseMasquerade(),
+  useLogout: () => mockUseLogout(),
+}));
+
+vi.mock('../hooks/useBusiness', () => ({
+  useCurrentBusiness: () => mockUseCurrentBusiness(),
+  useUpdateBusiness: () => mockUseUpdateBusiness(),
+}));
+
+vi.mock('../hooks/usePlanFeatures', () => ({
+  usePlanFeatures: () => mockUsePlanFeatures(),
+}));
+
+// Mock react-hot-toast
+vi.mock('react-hot-toast', () => ({
+  Toaster: () => <div data-testid="toaster">Toaster</div>,
+}));
+
+// Mock cookies utility
+vi.mock('../utils/cookies', () => ({
+  setCookie: vi.fn(),
+  deleteCookie: vi.fn(),
+  getCookie: vi.fn(),
+}));
+
+// Mock i18n
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => {
+      const translations: Record<string, string> = {
+        'common.loading': 'Loading...',
+        'common.error': 'Error',
+        'common.reload': 'Reload',
+      };
+      return translations[key] || key;
+    },
+  }),
+}));
+
+describe('App', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+
+    // Default mock implementations
+    mockUseCurrentUser.mockReturnValue({
+      data: null,
+      isLoading: false,
+      error: null,
+    });
+
+    mockUseCurrentBusiness.mockReturnValue({
+      data: null,
+      isLoading: false,
+      error: null,
+    });
+
+    mockUseMasquerade.mockReturnValue({
+      mutate: vi.fn(),
+    });
+
+    mockUseLogout.mockReturnValue({
+      mutate: vi.fn(),
+    });
+
+    mockUseUpdateBusiness.mockReturnValue({
+      mutate: vi.fn(),
+    });
+
+    mockUsePlanFeatures.mockReturnValue({
+      canUse: vi.fn(() => true),
+    });
+
+    // Mock window.location
+    delete (window as any).location;
+    (window as any).location = {
+      hostname: 'localhost',
+      port: '5173',
+      protocol: 'http:',
+      pathname: '/',
+      search: '',
+      hash: '',
+      href: 'http://localhost:5173/',
+      reload: vi.fn(),
+      replace: vi.fn(),
+    };
+
+    // Mock localStorage
+    const localStorageMock = {
+      getItem: vi.fn(() => null),
+      setItem: vi.fn(),
+      removeItem: vi.fn(),
+      clear: vi.fn(),
+    };
+    Object.defineProperty(window, 'localStorage', {
+      value: localStorageMock,
+      writable: true,
+    });
+
+    // Mock matchMedia for dark mode
+    Object.defineProperty(window, 'matchMedia', {
+      writable: true,
+      value: vi.fn().mockImplementation((query) => ({
+        matches: false,
+        media: query,
+        onchange: null,
+        addListener: vi.fn(),
+        removeListener: vi.fn(),
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
+        dispatchEvent: vi.fn(),
+      })),
+    });
+
+    // Mock documentElement classList for dark mode
+    document.documentElement.classList.toggle = vi.fn();
+  });
+
+  describe('Component Rendering', () => {
+    it('should render App component without crashing', () => {
+      expect(() => render(<App />)).not.toThrow();
+    });
+
+    it('should render toaster component for notifications', () => {
+      render(<App />);
+      expect(screen.getByTestId('toaster')).toBeInTheDocument();
+    });
+
+    it('should render with QueryClientProvider wrapper', () => {
+      const { container } = render(<App />);
+      expect(container.firstChild).toBeTruthy();
+    });
+  });
+
+  describe('Loading State', () => {
+    it('should show loading screen when user data is loading', () => {
+      mockUseCurrentUser.mockReturnValue({
+        data: null,
+        isLoading: true,
+        error: null,
+      });
+
+      render(<App />);
+
+      expect(screen.getByText('Loading...')).toBeInTheDocument();
+    });
+
+    it('should show loading spinner in loading screen', () => {
+      mockUseCurrentUser.mockReturnValue({
+        data: null,
+        isLoading: true,
+        error: null,
+      });
+
+      const { container } = render(<App />);
+
+      const spinner = container.querySelector('.animate-spin');
+      expect(spinner).toBeInTheDocument();
+    });
+
+    it('should show loading screen when processing URL tokens', () => {
+      (window as any).location.search = '?access_token=test&refresh_token=test';
+
+      render(<App />);
+
+      expect(screen.getByText('Loading...')).toBeInTheDocument();
+    });
+  });
+
+  describe('Error State', () => {
+    it('should show error screen when user fetch fails', async () => {
+      mockUseCurrentUser.mockReturnValue({
+        data: null,
+        isLoading: false,
+        error: new Error('Failed to fetch user'),
+      });
+
+      render(<App />);
+
+      await waitFor(() => {
+        expect(screen.getByText('Error')).toBeInTheDocument();
+        expect(screen.getByText('Failed to fetch user')).toBeInTheDocument();
+      });
+    });
+
+    it('should show reload button in error screen', async () => {
+      mockUseCurrentUser.mockReturnValue({
+        data: null,
+        isLoading: false,
+        error: new Error('Network error'),
+      });
+
+      render(<App />);
+
+      await waitFor(() => {
+        const reloadButton = screen.getByRole('button', { name: /reload/i });
+        expect(reloadButton).toBeInTheDocument();
+      });
+    });
+
+    it('should display error message in error screen', async () => {
+      const errorMessage = 'Connection timeout';
+      mockUseCurrentUser.mockReturnValue({
+        data: null,
+        isLoading: false,
+        error: new Error(errorMessage),
+      });
+
+      render(<App />);
+
+      await waitFor(() => {
+        expect(screen.getByText(errorMessage)).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Dark Mode', () => {
+    it('should initialize dark mode from localStorage when set to true', () => {
+      window.localStorage.getItem = vi.fn((key) => {
+        if (key === 'darkMode') return 'true';
+        return null;
+      });
+
+      render(<App />);
+
+      expect(window.localStorage.getItem).toHaveBeenCalledWith('darkMode');
+    });
+
+    it('should initialize dark mode from localStorage when set to false', () => {
+      window.localStorage.getItem = vi.fn((key) => {
+        if (key === 'darkMode') return 'false';
+        return null;
+      });
+
+      render(<App />);
+
+      expect(window.localStorage.getItem).toHaveBeenCalledWith('darkMode');
+    });
+
+    it('should check system preference when dark mode not in localStorage', () => {
+      const mockMatchMedia = vi.fn().mockImplementation((query) => ({
+        matches: query === '(prefers-color-scheme: dark)',
+        media: query,
+        onchange: null,
+        addListener: vi.fn(),
+        removeListener: vi.fn(),
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
+        dispatchEvent: vi.fn(),
+      }));
+
+      Object.defineProperty(window, 'matchMedia', {
+        writable: true,
+        value: mockMatchMedia,
+      });
+
+      render(<App />);
+
+      expect(mockMatchMedia).toHaveBeenCalledWith('(prefers-color-scheme: dark)');
+    });
+
+    it('should apply dark mode class to documentElement', () => {
+      window.localStorage.getItem = vi.fn((key) => {
+        if (key === 'darkMode') return 'true';
+        return null;
+      });
+
+      render(<App />);
+
+      expect(document.documentElement.classList.toggle).toHaveBeenCalled();
+    });
+  });
+
+  describe('Customer Users', () => {
+    const customerUser = {
+      id: '3',
+      email: 'customer@demo.com',
+      role: 'customer',
+      name: 'Customer User',
+      email_verified: true,
+      business_subdomain: 'demo',
+    };
+
+    const business = {
+      id: '1',
+      name: 'Demo Business',
+      subdomain: 'demo',
+      status: 'Active',
+      primaryColor: '#2563eb',
+    };
+
+    beforeEach(() => {
+      (window as any).location.hostname = 'demo.lvh.me';
+    });
+
+    it('should show loading when business is loading for customer', () => {
+      mockUseCurrentUser.mockReturnValue({
+        data: customerUser,
+        isLoading: false,
+        error: null,
+      });
+
+      mockUseCurrentBusiness.mockReturnValue({
+        data: null,
+        isLoading: true,
+        error: null,
+      });
+
+      render(<App />);
+
+      expect(screen.getByText('Loading...')).toBeInTheDocument();
+    });
+
+    it('should show error when business not found for customer', async () => {
+      mockUseCurrentUser.mockReturnValue({
+        data: customerUser,
+        isLoading: false,
+        error: null,
+      });
+
+      mockUseCurrentBusiness.mockReturnValue({
+        data: null,
+        isLoading: false,
+        error: null,
+      });
+
+      render(<App />);
+
+      await waitFor(() => {
+        expect(screen.getByText('Business Not Found')).toBeInTheDocument();
+      });
+    });
+
+    it('should show error message for customer without business', async () => {
+      mockUseCurrentUser.mockReturnValue({
+        data: customerUser,
+        isLoading: false,
+        error: null,
+      });
+
+      mockUseCurrentBusiness.mockReturnValue({
+        data: null,
+        isLoading: false,
+        error: null,
+      });
+
+      render(<App />);
+
+      await waitFor(() => {
+        expect(screen.getByText(/unable to load business data/i)).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('URL Token Processing', () => {
+    it('should detect tokens in URL parameters', () => {
+      (window as any).location.search = '?access_token=abc123&refresh_token=xyz789';
+
+      render(<App />);
+
+      // Should show loading while processing tokens
+      expect(screen.getByText('Loading...')).toBeInTheDocument();
+    });
+
+    it('should not trigger processing without both tokens', () => {
+      mockUseCurrentUser.mockReturnValue({
+        data: null,
+        isLoading: false,
+        error: null,
+      });
+
+      (window as any).location.search = '?access_token=abc123';
+
+      render(<App />);
+
+      // Should not be processing tokens (would show loading if it was)
+      // Instead should render normal unauthenticated state
+    });
+
+    it('should not trigger processing with empty tokens', () => {
+      mockUseCurrentUser.mockReturnValue({
+        data: null,
+        isLoading: false,
+        error: null,
+      });
+
+      (window as any).location.search = '';
+
+      render(<App />);
+
+      // Should render normal state, not loading from token processing
+    });
+  });
+
+  describe('Root Domain Detection', () => {
+    it('should detect localhost as root domain', () => {
+      (window as any).location.hostname = 'localhost';
+
+      mockUseCurrentUser.mockReturnValue({
+        data: null,
+        isLoading: false,
+        error: null,
+      });
+
+      render(<App />);
+
+      // Root domain should render marketing layout or login for unauthenticated users
+      // The exact behavior is tested in integration tests
+    });
+
+    it('should detect 127.0.0.1 as root domain', () => {
+      (window as any).location.hostname = '127.0.0.1';
+
+      mockUseCurrentUser.mockReturnValue({
+        data: null,
+        isLoading: false,
+        error: null,
+      });
+
+      render(<App />);
+
+      // Similar to localhost test
+    });
+
+    it('should detect lvh.me as root domain', () => {
+      (window as any).location.hostname = 'lvh.me';
+
+      mockUseCurrentUser.mockReturnValue({
+        data: null,
+        isLoading: false,
+        error: null,
+      });
+
+      render(<App />);
+
+      // Root domain behavior
+    });
+
+    it('should detect platform.lvh.me as subdomain', () => {
+      (window as any).location.hostname = 'platform.lvh.me';
+
+      mockUseCurrentUser.mockReturnValue({
+        data: null,
+        isLoading: false,
+        error: null,
+      });
+
+      render(<App />);
+
+      // Platform subdomain behavior - different from root
+    });
+
+    it('should detect business.lvh.me as subdomain', () => {
+      (window as any).location.hostname = 'demo.lvh.me';
+
+      mockUseCurrentUser.mockReturnValue({
+        data: null,
+        isLoading: false,
+        error: null,
+      });
+
+      render(<App />);
+
+      // Business subdomain behavior
+    });
+  });
+
+  describe('SEO Meta Tags', () => {
+    it('should handle subdomain routing for SEO', () => {
+      (window as any).location.hostname = 'demo.lvh.me';
+
+      mockUseCurrentUser.mockReturnValue({
+        data: null,
+        isLoading: false,
+        error: null,
+      });
+
+      // Meta tag manipulation happens in useEffect via DOM manipulation
+      // This is best tested in E2E tests
+      expect(() => render(<App />)).not.toThrow();
+    });
+
+    it('should handle root domain routing for SEO', () => {
+      (window as any).location.hostname = 'localhost';
+
+      mockUseCurrentUser.mockReturnValue({
+        data: null,
+        isLoading: false,
+        error: null,
+      });
+
+      // Root domain behavior for marketing pages
+      expect(() => render(<App />)).not.toThrow();
+    });
+  });
+
+  describe('Query Client Configuration', () => {
+    it('should configure query client with refetchOnWindowFocus disabled', () => {
+      const { container } = render(<App />);
+      expect(container).toBeTruthy();
+      // QueryClient config is tested implicitly by successful rendering
+    });
+
+    it('should configure query client with retry limit', () => {
+      const { container } = render(<App />);
+      expect(container).toBeTruthy();
+      // QueryClient retry config is applied during instantiation
+    });
+
+    it('should configure query client with staleTime', () => {
+      const { container } = render(<App />);
+      expect(container).toBeTruthy();
+      // QueryClient staleTime config is applied during instantiation
+    });
+  });
+});

frontend/src/billing/__tests__/featureCatalog.test.ts

@@ -0,0 +1,206 @@
+/**
+ * Tests for Feature Catalog
+ *
+ * TDD: These tests define the expected behavior of the feature catalog utilities.
+ */
+
+import { describe, it, expect } from 'vitest';
+import {
+  FEATURE_CATALOG,
+  BOOLEAN_FEATURES,
+  INTEGER_FEATURES,
+  getFeatureInfo,
+  isCanonicalFeature,
+  getFeaturesByType,
+  getFeaturesByCategory,
+  getAllCategories,
+  formatCategoryName,
+} from '../featureCatalog';
+
+describe('Feature Catalog', () => {
+  describe('Constants', () => {
+    it('exports BOOLEAN_FEATURES array', () => {
+      expect(Array.isArray(BOOLEAN_FEATURES)).toBe(true);
+      expect(BOOLEAN_FEATURES.length).toBeGreaterThan(0);
+    });
+
+    it('exports INTEGER_FEATURES array', () => {
+      expect(Array.isArray(INTEGER_FEATURES)).toBe(true);
+      expect(INTEGER_FEATURES.length).toBeGreaterThan(0);
+    });
+
+    it('exports FEATURE_CATALOG array combining both types', () => {
+      expect(Array.isArray(FEATURE_CATALOG)).toBe(true);
+      expect(FEATURE_CATALOG.length).toBe(BOOLEAN_FEATURES.length + INTEGER_FEATURES.length);
+    });
+
+    it('all boolean features have correct type', () => {
+      BOOLEAN_FEATURES.forEach((feature) => {
+        expect(feature.type).toBe('boolean');
+        expect(feature).toHaveProperty('code');
+        expect(feature).toHaveProperty('name');
+        expect(feature).toHaveProperty('description');
+        expect(feature).toHaveProperty('category');
+      });
+    });
+
+    it('all integer features have correct type', () => {
+      INTEGER_FEATURES.forEach((feature) => {
+        expect(feature.type).toBe('integer');
+        expect(feature).toHaveProperty('code');
+        expect(feature).toHaveProperty('name');
+        expect(feature).toHaveProperty('description');
+        expect(feature).toHaveProperty('category');
+      });
+    });
+
+    it('all feature codes are unique', () => {
+      const codes = FEATURE_CATALOG.map((f) => f.code);
+      const uniqueCodes = new Set(codes);
+      expect(uniqueCodes.size).toBe(codes.length);
+    });
+  });
+
+  describe('getFeatureInfo', () => {
+    it('returns feature info for valid code', () => {
+      const feature = getFeatureInfo('sms_enabled');
+      expect(feature).toBeDefined();
+      expect(feature?.code).toBe('sms_enabled');
+      expect(feature?.type).toBe('boolean');
+    });
+
+    it('returns undefined for invalid code', () => {
+      const feature = getFeatureInfo('invalid_feature');
+      expect(feature).toBeUndefined();
+    });
+
+    it('returns correct feature for integer type', () => {
+      const feature = getFeatureInfo('max_users');
+      expect(feature).toBeDefined();
+      expect(feature?.code).toBe('max_users');
+      expect(feature?.type).toBe('integer');
+    });
+  });
+
+  describe('isCanonicalFeature', () => {
+    it('returns true for features in catalog', () => {
+      expect(isCanonicalFeature('sms_enabled')).toBe(true);
+      expect(isCanonicalFeature('max_users')).toBe(true);
+      expect(isCanonicalFeature('api_access')).toBe(true);
+    });
+
+    it('returns false for features not in catalog', () => {
+      expect(isCanonicalFeature('custom_feature')).toBe(false);
+      expect(isCanonicalFeature('nonexistent')).toBe(false);
+      expect(isCanonicalFeature('')).toBe(false);
+    });
+  });
+
+  describe('getFeaturesByType', () => {
+    it('returns all boolean features', () => {
+      const booleanFeatures = getFeaturesByType('boolean');
+      expect(booleanFeatures.length).toBe(BOOLEAN_FEATURES.length);
+      expect(booleanFeatures.every((f) => f.type === 'boolean')).toBe(true);
+    });
+
+    it('returns all integer features', () => {
+      const integerFeatures = getFeaturesByType('integer');
+      expect(integerFeatures.length).toBe(INTEGER_FEATURES.length);
+      expect(integerFeatures.every((f) => f.type === 'integer')).toBe(true);
+    });
+  });
+
+  describe('getFeaturesByCategory', () => {
+    it('returns features for communication category', () => {
+      const features = getFeaturesByCategory('communication');
+      expect(features.length).toBeGreaterThan(0);
+      expect(features.every((f) => f.category === 'communication')).toBe(true);
+    });
+
+    it('returns features for limits category', () => {
+      const features = getFeaturesByCategory('limits');
+      expect(features.length).toBeGreaterThan(0);
+      expect(features.every((f) => f.category === 'limits')).toBe(true);
+    });
+
+    it('returns features for access category', () => {
+      const features = getFeaturesByCategory('access');
+      expect(features.length).toBeGreaterThan(0);
+      expect(features.every((f) => f.category === 'access')).toBe(true);
+    });
+
+    it('returns empty array for non-existent category', () => {
+      const features = getFeaturesByCategory('nonexistent' as any);
+      expect(features.length).toBe(0);
+    });
+  });
+
+  describe('getAllCategories', () => {
+    it('returns array of unique categories', () => {
+      const categories = getAllCategories();
+      expect(Array.isArray(categories)).toBe(true);
+      expect(categories.length).toBeGreaterThan(0);
+
+      // Check for duplicates
+      const uniqueCategories = new Set(categories);
+      expect(uniqueCategories.size).toBe(categories.length);
+    });
+
+    it('includes expected categories', () => {
+      const categories = getAllCategories();
+      expect(categories).toContain('communication');
+      expect(categories).toContain('limits');
+      expect(categories).toContain('access');
+      expect(categories).toContain('branding');
+      expect(categories).toContain('support');
+      expect(categories).toContain('integrations');
+      expect(categories).toContain('security');
+      expect(categories).toContain('scheduling');
+    });
+  });
+
+  describe('formatCategoryName', () => {
+    it('formats category names correctly', () => {
+      expect(formatCategoryName('communication')).toBe('Communication');
+      expect(formatCategoryName('limits')).toBe('Limits & Quotas');
+      expect(formatCategoryName('access')).toBe('Access & Features');
+      expect(formatCategoryName('branding')).toBe('Branding & Customization');
+      expect(formatCategoryName('support')).toBe('Support');
+      expect(formatCategoryName('integrations')).toBe('Integrations');
+      expect(formatCategoryName('security')).toBe('Security & Compliance');
+      expect(formatCategoryName('scheduling')).toBe('Scheduling & Booking');
+    });
+  });
+
+  describe('Specific Feature Validation', () => {
+    it('includes sms_enabled feature', () => {
+      const feature = getFeatureInfo('sms_enabled');
+      expect(feature).toMatchObject({
+        code: 'sms_enabled',
+        name: 'SMS Messaging',
+        type: 'boolean',
+        category: 'communication',
+      });
+    });
+
+    it('includes max_users feature', () => {
+      const feature = getFeatureInfo('max_users');
+      expect(feature).toMatchObject({
+        code: 'max_users',
+        name: 'Maximum Team Members',
+        type: 'integer',
+        category: 'limits',
+      });
+    });
+
+    it('includes api_access feature', () => {
+      const feature = getFeatureInfo('api_access');
+      expect(feature).toMatchObject({
+        code: 'api_access',
+        name: 'API Access',
+        type: 'boolean',
+        category: 'access',
+      });
+    });
+  });
+});

frontend/src/billing/components/FeaturePicker.tsx

@@ -9,6 +9,7 @@
 import React, { useState, useMemo } from 'react';
 import { Check, Sliders, Search, X } from 'lucide-react';
 import type { Feature, PlanFeatureWrite } from '../../hooks/useBillingAdmin';
+import { isWipFeature } from '../featureCatalog';
 
 export interface FeaturePickerProps {
   /** Available features from the API */
@@ -168,8 +169,13 @@ export const FeaturePicker: React.FC<FeaturePickerProps> = ({
                     className="mt-0.5 rounded border-gray-300 dark:border-gray-600"
                   />
                   <div className="flex-1 min-w-0">
-                    <span className="text-sm font-medium text-gray-900 dark:text-white">
+                    <span className="text-sm font-medium text-gray-900 dark:text-white flex items-center gap-1.5">
                       {feature.name}
+                      {isWipFeature(feature.code) && (
+                        <span className="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-400">
+                          WIP
+                        </span>
+                      )}
                     </span>
                     <code className="text-xs text-gray-400 dark:text-gray-500 block mt-0.5 font-mono">
                       {feature.code}
@@ -219,8 +225,13 @@ export const FeaturePicker: React.FC<FeaturePickerProps> = ({
                       className="mt-0.5 rounded border-gray-300 dark:border-gray-600"
                     />
                     <div className="flex-1 min-w-0">
-                      <span className="text-sm font-medium text-gray-900 dark:text-white block">
+                      <span className="text-sm font-medium text-gray-900 dark:text-white flex items-center gap-1.5">
                         {feature.name}
+                        {isWipFeature(feature.code) && (
+                          <span className="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-400">
+                            WIP
+                          </span>
+                        )}
                       </span>
                       <code className="text-xs text-gray-400 dark:text-gray-500 font-mono">
                         {feature.code}

frontend/src/billing/components/__tests__/AddOnEditorModal.test.tsx

@@ -0,0 +1,530 @@
+/**
+ * Tests for AddOnEditorModal Component
+ *
+ * TDD: These tests define the expected behavior of the AddOnEditorModal component.
+ */
+
+// Mocks must come BEFORE imports
+vi.mock('@tanstack/react-query', () => ({
+  useQuery: vi.fn(),
+  useMutation: vi.fn(),
+  useQueryClient: vi.fn(),
+}));
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => key,
+    i18n: { language: 'en' },
+  }),
+  Trans: ({ children }: { children: React.ReactNode }) => children,
+}));
+
+vi.mock('../FeaturePicker', () => ({
+  FeaturePicker: ({ onChange, selectedFeatures }: any) =>
+    React.createElement('div', { 'data-testid': 'feature-picker' }, [
+      React.createElement('input', {
+        key: 'feature-input',
+        type: 'text',
+        'data-testid': 'feature-picker-input',
+        onChange: (e: any) => {
+          if (e.target.value === 'add-feature') {
+            onChange([
+              ...selectedFeatures,
+              { feature_code: 'test_feature', bool_value: true, int_value: null },
+            ]);
+          }
+        },
+      }),
+      React.createElement(
+        'div',
+        { key: 'feature-count' },
+        `Selected: ${selectedFeatures.length}`
+      ),
+    ]),
+}));
+
+import React from 'react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { useQuery, useMutation } from '@tanstack/react-query';
+import { AddOnEditorModal } from '../AddOnEditorModal';
+import type { AddOnProduct } from '../../../hooks/useBillingAdmin';
+
+const mockUseQuery = useQuery as unknown as ReturnType<typeof vi.fn>;
+const mockUseMutation = useMutation as unknown as ReturnType<typeof vi.fn>;
+
+describe('AddOnEditorModal', () => {
+  const mockOnClose = vi.fn();
+  const mockMutateAsync = vi.fn();
+
+  const mockFeatures = [
+    { id: 1, code: 'sms_enabled', name: 'SMS Enabled', description: 'SMS messaging', feature_type: 'boolean' as const },
+    { id: 2, code: 'max_users', name: 'Max Users', description: 'User limit', feature_type: 'integer' as const },
+  ];
+
+  const mockAddon: AddOnProduct = {
+    id: 1,
+    code: 'test_addon',
+    name: 'Test Add-On',
+    description: 'Test description',
+    price_monthly_cents: 1000,
+    price_one_time_cents: 500,
+    stripe_product_id: 'prod_test',
+    stripe_price_id: 'price_test',
+    is_stackable: true,
+    is_active: true,
+    features: [
+      {
+        id: 1,
+        feature: mockFeatures[0],
+        bool_value: true,
+        int_value: null,
+        value: true,
+      },
+    ],
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+
+    // Mock useFeatures
+    mockUseQuery.mockReturnValue({
+      data: mockFeatures,
+      isLoading: false,
+      error: null,
+    });
+
+    // Mock mutations
+    mockUseMutation.mockReturnValue({
+      mutateAsync: mockMutateAsync,
+      isPending: false,
+      error: null,
+    });
+  });
+
+  describe('Rendering', () => {
+    it('renders create mode when no addon is provided', () => {
+      render(<AddOnEditorModal isOpen={true} onClose={mockOnClose} />);
+
+      expect(screen.getByRole('heading', { name: /create add-on/i })).toBeInTheDocument();
+    });
+
+    it('renders edit mode when addon is provided', () => {
+      render(<AddOnEditorModal isOpen={true} onClose={mockOnClose} addon={mockAddon} />);
+
+      expect(screen.getByText(`Edit ${mockAddon.name}`)).toBeInTheDocument();
+    });
+
+    it('renders all form fields', () => {
+      render(<AddOnEditorModal isOpen={true} onClose={mockOnClose} />);
+
+      expect(screen.getByText('Code')).toBeInTheDocument();
+      expect(screen.getByText('Name')).toBeInTheDocument();
+      expect(screen.getByText('Description')).toBeInTheDocument();
+      expect(screen.getByText('Monthly Price')).toBeInTheDocument();
+      expect(screen.getByText('One-Time Price')).toBeInTheDocument();
+      expect(screen.getByText(/active.*available for purchase/i)).toBeInTheDocument();
+      expect(screen.getByText(/stackable.*can purchase multiple/i)).toBeInTheDocument();
+    });
+
+    it('populates form fields in edit mode', () => {
+      render(<AddOnEditorModal isOpen={true} onClose={mockOnClose} addon={mockAddon} />);
+
+      expect(screen.getByDisplayValue(mockAddon.code)).toBeInTheDocument();
+      expect(screen.getByDisplayValue(mockAddon.name)).toBeInTheDocument();
+      expect(screen.getByDisplayValue(mockAddon.description!)).toBeInTheDocument();
+      expect(screen.getByDisplayValue('10.00')).toBeInTheDocument(); // $10.00
+      expect(screen.getByDisplayValue('5.00')).toBeInTheDocument(); // $5.00
+    });
+
+    it('disables code field in edit mode', () => {
+      render(<AddOnEditorModal isOpen={true} onClose={mockOnClose} addon={mockAddon} />);
+
+      const codeInput = screen.getByDisplayValue(mockAddon.code);
+      expect(codeInput).toBeDisabled();
+    });
+
+    it('shows loading state when features are loading', () => {
+      mockUseQuery.mockReturnValueOnce({
+        data: undefined,
+        isLoading: true,
+        error: null,
+      });
+
+      render(<AddOnEditorModal isOpen={true} onClose={mockOnClose} />);
+
+      // In reality, the FeaturePicker doesn't render when loading
+      // But our mock always renders. Instead, let's verify modal still renders
+      expect(screen.getByRole('heading', { name: /create add-on/i })).toBeInTheDocument();
+    });
+
+    it('renders FeaturePicker component', () => {
+      render(<AddOnEditorModal isOpen={true} onClose={mockOnClose} />);
+
+      expect(screen.getByTestId('feature-picker')).toBeInTheDocument();
+    });
+  });
+
+  describe('Form Validation', () => {
+    it('shows error when code is empty', async () => {
+      const user = userEvent.setup();
+      render(<AddOnEditorModal isOpen={true} onClose={mockOnClose} />);
+
+      const submitButton = screen.getByRole('button', { name: /create add-on/i });
+      await user.click(submitButton);
+
+      expect(screen.getByText(/code is required/i)).toBeInTheDocument();
+      expect(mockMutateAsync).not.toHaveBeenCalled();
+    });
+
+    it('shows error when code has invalid characters', async () => {
+      const user = userEvent.setup();
+      render(<AddOnEditorModal isOpen={true} onClose={mockOnClose} />);
+
+      const codeInput = screen.getByPlaceholderText(/sms_credits_pack/i);
+      await user.type(codeInput, 'Invalid Code!');
+
+      const submitButton = screen.getByRole('button', { name: /create add-on/i });
+      await user.click(submitButton);
+
+      expect(screen.getByText(/code must be lowercase letters, numbers, and underscores only/i)).toBeInTheDocument();
+      expect(mockMutateAsync).not.toHaveBeenCalled();
+    });
+
+    it('shows error when name is empty', async () => {
+      const user = userEvent.setup();
+      render(<AddOnEditorModal isOpen={true} onClose={mockOnClose} />);
+
+      const codeInput = screen.getByPlaceholderText(/sms_credits_pack/i);
+      await user.type(codeInput, 'valid_code');
+
+      const submitButton = screen.getByRole('button', { name: /create add-on/i });
+      await user.click(submitButton);
+
+      expect(screen.getByText(/name is required/i)).toBeInTheDocument();
+      expect(mockMutateAsync).not.toHaveBeenCalled();
+    });
+
+    it('validates price inputs have correct attributes', () => {
+      render(<AddOnEditorModal isOpen={true} onClose={mockOnClose} />);
+
+      // The inputs have type=number so negative values are prevented by HTML validation
+      const priceInputs = screen.getAllByDisplayValue('0.00');
+      const monthlyPriceInput = priceInputs[0];
+      expect(monthlyPriceInput).toHaveAttribute('type', 'number');
+      expect(monthlyPriceInput).toHaveAttribute('min', '0');
+    });
+
+    it('clears error when user corrects invalid input', async () => {
+      const user = userEvent.setup();
+      render(<AddOnEditorModal isOpen={true} onClose={mockOnClose} />);
+
+      const submitButton = screen.getByRole('button', { name: /create add-on/i });
+      await user.click(submitButton);
+
+      expect(screen.getByText(/code is required/i)).toBeInTheDocument();
+
+      const codeInput = screen.getByPlaceholderText(/sms_credits_pack/i);
+      await user.type(codeInput, 'valid_code');
+
+      expect(screen.queryByText(/code is required/i)).not.toBeInTheDocument();
+    });
+  });
+
+  describe('User Interactions', () => {
+    it('updates code field', async () => {
+      const user = userEvent.setup();
+      render(<AddOnEditorModal isOpen={true} onClose={mockOnClose} />);
+
+      const codeInput = screen.getByPlaceholderText(/sms_credits_pack/i);
+      await user.type(codeInput, 'test_addon');
+
+      expect(screen.getByDisplayValue('test_addon')).toBeInTheDocument();
+    });
+
+    it('updates name field', async () => {
+      const user = userEvent.setup();
+      render(<AddOnEditorModal isOpen={true} onClose={mockOnClose} />);
+
+      const nameInput = screen.getByPlaceholderText(/sms credits pack/i);
+      await user.type(nameInput, 'Test Add-On');
+
+      expect(screen.getByDisplayValue('Test Add-On')).toBeInTheDocument();
+    });
+
+    it('updates description field', async () => {
+      const user = userEvent.setup();
+      render(<AddOnEditorModal isOpen={true} onClose={mockOnClose} />);
+
+      const descriptionInput = screen.getByPlaceholderText(/description of the add-on/i);
+      await user.type(descriptionInput, 'Test description');
+
+      expect(screen.getByDisplayValue('Test description')).toBeInTheDocument();
+    });
+
+    it('toggles is_active checkbox', async () => {
+      const user = userEvent.setup();
+      render(<AddOnEditorModal isOpen={true} onClose={mockOnClose} />);
+
+      const activeCheckbox = screen.getByRole('checkbox', { name: /active.*available for purchase/i });
+      expect(activeCheckbox).toBeChecked(); // Default is true
+
+      await user.click(activeCheckbox);
+      expect(activeCheckbox).not.toBeChecked();
+    });
+
+    it('toggles is_stackable checkbox', async () => {
+      const user = userEvent.setup();
+      render(<AddOnEditorModal isOpen={true} onClose={mockOnClose} />);
+
+      const stackableCheckbox = screen.getByRole('checkbox', { name: /stackable.*can purchase multiple/i });
+      expect(stackableCheckbox).not.toBeChecked(); // Default is false
+
+      await user.click(stackableCheckbox);
+      expect(stackableCheckbox).toBeChecked();
+    });
+
+    it('updates monthly price', async () => {
+      const user = userEvent.setup();
+      render(<AddOnEditorModal isOpen={true} onClose={mockOnClose} />);
+
+      const priceInputs = screen.getAllByDisplayValue('0.00');
+      const monthlyPriceInput = priceInputs[0];
+      await user.clear(monthlyPriceInput);
+      await user.type(monthlyPriceInput, '15.99');
+
+      expect(screen.getByDisplayValue('15.99')).toBeInTheDocument();
+    });
+
+    it('updates one-time price', async () => {
+      const user = userEvent.setup();
+      render(<AddOnEditorModal isOpen={true} onClose={mockOnClose} />);
+
+      const priceInputs = screen.getAllByDisplayValue('0.00');
+      const oneTimePriceInput = priceInputs[1]; // Second one is one-time
+      await user.clear(oneTimePriceInput);
+      await user.type(oneTimePriceInput, '9.99');
+
+      expect(screen.getByDisplayValue('9.99')).toBeInTheDocument();
+    });
+
+    it('can add features using FeaturePicker', async () => {
+      const user = userEvent.setup();
+      render(<AddOnEditorModal isOpen={true} onClose={mockOnClose} />);
+
+      const featureInput = screen.getByTestId('feature-picker-input');
+      await user.type(featureInput, 'add-feature');
+
+      expect(screen.getByText('Selected: 1')).toBeInTheDocument();
+    });
+  });
+
+  describe('Form Submission', () => {
+    it('creates addon with valid data', async () => {
+      const user = userEvent.setup();
+      mockMutateAsync.mockResolvedValueOnce({});
+
+      render(<AddOnEditorModal isOpen={true} onClose={mockOnClose} />);
+
+      await user.type(screen.getByPlaceholderText(/sms_credits_pack/i), 'new_addon');
+      await user.type(screen.getByPlaceholderText(/sms credits pack/i), 'New Add-On');
+      await user.type(screen.getByPlaceholderText(/description of the add-on/i), 'Description');
+
+      const monthlyPriceInputs = screen.getAllByDisplayValue('0.00');
+      const monthlyPriceInput = monthlyPriceInputs[0];
+      await user.clear(monthlyPriceInput);
+      await user.type(monthlyPriceInput, '19.99');
+
+      const submitButton = screen.getByRole('button', { name: /create add-on/i });
+      await user.click(submitButton);
+
+      await waitFor(() => {
+        expect(mockMutateAsync).toHaveBeenCalledWith(
+          expect.objectContaining({
+            code: 'new_addon',
+            name: 'New Add-On',
+            description: 'Description',
+            price_monthly_cents: 1999,
+            price_one_time_cents: 0,
+            is_stackable: false,
+            is_active: true,
+            features: [],
+          })
+        );
+      });
+
+      await waitFor(() => {
+        expect(mockOnClose).toHaveBeenCalled();
+      });
+    });
+
+    it('updates addon in edit mode', async () => {
+      const user = userEvent.setup();
+      mockMutateAsync.mockResolvedValueOnce({});
+
+      render(<AddOnEditorModal isOpen={true} onClose={mockOnClose} addon={mockAddon} />);
+
+      const nameInput = screen.getByDisplayValue(mockAddon.name);
+      await user.clear(nameInput);
+      await user.type(nameInput, 'Updated Name');
+
+      const submitButton = screen.getByRole('button', { name: /save changes/i });
+      await user.click(submitButton);
+
+      await waitFor(() => {
+        expect(mockMutateAsync).toHaveBeenCalledWith(
+          expect.objectContaining({
+            id: mockAddon.id,
+            name: 'Updated Name',
+          })
+        );
+      });
+
+      await waitFor(() => {
+        expect(mockOnClose).toHaveBeenCalled();
+      });
+    });
+
+    it('includes selected features in payload', async () => {
+      const user = userEvent.setup();
+      mockMutateAsync.mockResolvedValueOnce({});
+
+      render(<AddOnEditorModal isOpen={true} onClose={mockOnClose} />);
+
+      await user.type(screen.getByPlaceholderText(/sms_credits_pack/i), 'addon_with_features');
+      await user.type(screen.getByPlaceholderText(/sms credits pack/i), 'Add-On With Features');
+
+      // Add a feature using the mocked FeaturePicker
+      const featureInput = screen.getByTestId('feature-picker-input');
+      await user.type(featureInput, 'add-feature');
+
+      const submitButton = screen.getByRole('button', { name: /create add-on/i });
+      await user.click(submitButton);
+
+      await waitFor(() => {
+        expect(mockMutateAsync).toHaveBeenCalledWith(
+          expect.objectContaining({
+            features: [
+              { feature_code: 'test_feature', bool_value: true, int_value: null },
+            ],
+          })
+        );
+      });
+    });
+
+    it('shows loading state during submission', () => {
+      // We can't easily test the actual pending state since mocking is complex
+      // Instead, let's verify that the button is enabled by default (not pending)
+      render(<AddOnEditorModal isOpen={true} onClose={mockOnClose} />);
+
+      const submitButton = screen.getByRole('button', { name: /create add-on/i });
+
+      // Submit button should be enabled when not pending
+      expect(submitButton).not.toBeDisabled();
+    });
+
+    it('handles submission error gracefully', async () => {
+      const user = userEvent.setup();
+      const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+      mockMutateAsync.mockRejectedValueOnce(new Error('API Error'));
+
+      render(<AddOnEditorModal isOpen={true} onClose={mockOnClose} />);
+
+      await user.type(screen.getByPlaceholderText(/sms_credits_pack/i), 'test_addon');
+      await user.type(screen.getByPlaceholderText(/sms credits pack/i), 'Test Add-On');
+
+      const submitButton = screen.getByRole('button', { name: /create add-on/i });
+      await user.click(submitButton);
+
+      await waitFor(() => {
+        expect(consoleSpy).toHaveBeenCalledWith(
+          'Failed to save add-on:',
+          expect.any(Error)
+        );
+      });
+
+      expect(mockOnClose).not.toHaveBeenCalled();
+      consoleSpy.mockRestore();
+    });
+  });
+
+  describe('Modal Behavior', () => {
+    it('calls onClose when cancel button is clicked', async () => {
+      const user = userEvent.setup();
+      render(<AddOnEditorModal isOpen={true} onClose={mockOnClose} />);
+
+      const cancelButton = screen.getByText(/cancel/i);
+      await user.click(cancelButton);
+
+      expect(mockOnClose).toHaveBeenCalled();
+    });
+
+    it('does not render when isOpen is false', () => {
+      render(<AddOnEditorModal isOpen={false} onClose={mockOnClose} />);
+
+      expect(screen.queryByText(/create add-on/i)).not.toBeInTheDocument();
+    });
+
+    it('resets form when modal is reopened', () => {
+      const { rerender } = render(
+        <AddOnEditorModal isOpen={true} onClose={mockOnClose} addon={mockAddon} />
+      );
+
+      expect(screen.getByDisplayValue(mockAddon.name)).toBeInTheDocument();
+
+      rerender(<AddOnEditorModal isOpen={false} onClose={mockOnClose} addon={mockAddon} />);
+      rerender(<AddOnEditorModal isOpen={true} onClose={mockOnClose} />);
+
+      // Should show create mode with empty fields
+      expect(screen.getByRole('heading', { name: /create add-on/i })).toBeInTheDocument();
+      expect(screen.queryByDisplayValue(mockAddon.name)).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Stripe Integration', () => {
+    it('shows info alert when no Stripe product ID is configured', () => {
+      render(<AddOnEditorModal isOpen={true} onClose={mockOnClose} />);
+
+      expect(
+        screen.getByText(/configure stripe ids to enable purchasing/i)
+      ).toBeInTheDocument();
+    });
+
+    it('hides info alert when Stripe product ID is entered', async () => {
+      const user = userEvent.setup();
+      render(<AddOnEditorModal isOpen={true} onClose={mockOnClose} />);
+
+      const stripeProductInput = screen.getByPlaceholderText(/prod_\.\.\./i);
+      await user.type(stripeProductInput, 'prod_test123');
+
+      expect(
+        screen.queryByText(/configure stripe ids to enable purchasing/i)
+      ).not.toBeInTheDocument();
+    });
+
+    it('includes Stripe IDs in submission payload', async () => {
+      const user = userEvent.setup();
+      mockMutateAsync.mockResolvedValueOnce({});
+
+      render(<AddOnEditorModal isOpen={true} onClose={mockOnClose} />);
+
+      await user.type(screen.getByPlaceholderText(/sms_credits_pack/i), 'addon_with_stripe');
+      await user.type(screen.getByPlaceholderText(/sms credits pack/i), 'Add-On With Stripe');
+      await user.type(screen.getByPlaceholderText(/prod_\.\.\./i), 'prod_test');
+      await user.type(screen.getByPlaceholderText(/price_\.\.\./i), 'price_test');
+
+      const submitButton = screen.getByRole('button', { name: /create add-on/i });
+      await user.click(submitButton);
+
+      await waitFor(() => {
+        expect(mockMutateAsync).toHaveBeenCalledWith(
+          expect.objectContaining({
+            stripe_product_id: 'prod_test',
+            stripe_price_id: 'price_test',
+          })
+        );
+      });
+    });
+  });
+});

frontend/src/billing/components/__tests__/PlanDetailPanel.test.tsx

@@ -0,0 +1,586 @@
+/**
+ * Tests for PlanDetailPanel Component
+ *
+ * TDD: These tests define the expected behavior of the PlanDetailPanel component.
+ */
+
+// Mocks must come BEFORE imports
+vi.mock('@tanstack/react-query', () => ({
+  useQuery: vi.fn(),
+  useMutation: vi.fn(),
+  useQueryClient: vi.fn(),
+}));
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => key,
+    i18n: { language: 'en' },
+  }),
+  Trans: ({ children }: { children: React.ReactNode }) => children,
+}));
+
+vi.mock('../../../hooks/useAuth', () => ({
+  useCurrentUser: vi.fn(),
+}));
+
+import React from 'react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { useMutation } from '@tanstack/react-query';
+import { useCurrentUser } from '../../../hooks/useAuth';
+import { PlanDetailPanel } from '../PlanDetailPanel';
+import type { PlanWithVersions, AddOnProduct, PlanVersion } from '../../../hooks/useBillingAdmin';
+
+const mockUseMutation = useMutation as unknown as ReturnType<typeof vi.fn>;
+const mockUseCurrentUser = useCurrentUser as unknown as ReturnType<typeof vi.fn>;
+
+describe('PlanDetailPanel', () => {
+  const mockOnEdit = vi.fn();
+  const mockOnDuplicate = vi.fn();
+  const mockOnCreateVersion = vi.fn();
+  const mockOnEditVersion = vi.fn();
+  const mockMutateAsync = vi.fn();
+
+  const mockPlanVersion: PlanVersion = {
+    id: 1,
+    plan: {} as any,
+    version: 1,
+    name: 'Version 1',
+    is_public: true,
+    is_legacy: false,
+    starts_at: null,
+    ends_at: null,
+    price_monthly_cents: 2999,
+    price_yearly_cents: 29990,
+    transaction_fee_percent: '2.5',
+    transaction_fee_fixed_cents: 30,
+    trial_days: 14,
+    sms_price_per_message_cents: 1,
+    masked_calling_price_per_minute_cents: 5,
+    proxy_number_monthly_fee_cents: 1000,
+    default_auto_reload_enabled: false,
+    default_auto_reload_threshold_cents: 0,
+    default_auto_reload_amount_cents: 0,
+    is_most_popular: false,
+    show_price: true,
+    marketing_features: ['Feature 1', 'Feature 2'],
+    stripe_product_id: 'prod_test',
+    stripe_price_id_monthly: 'price_monthly',
+    stripe_price_id_yearly: 'price_yearly',
+    is_available: true,
+    features: [
+      {
+        id: 1,
+        feature: { id: 1, code: 'test_feature', name: 'Test Feature', description: '', feature_type: 'boolean' },
+        bool_value: true,
+        int_value: null,
+        value: true,
+      },
+    ],
+    subscriber_count: 5,
+    created_at: '2024-01-01T00:00:00Z',
+  };
+
+  const mockPlan: PlanWithVersions = {
+    id: 1,
+    code: 'pro',
+    name: 'Pro Plan',
+    description: 'Professional plan for businesses',
+    is_active: true,
+    display_order: 1,
+    total_subscribers: 10,
+    versions: [mockPlanVersion],
+    active_version: mockPlanVersion,
+  };
+
+  const mockAddon: AddOnProduct = {
+    id: 1,
+    code: 'extra_users',
+    name: 'Extra Users',
+    description: 'Add more users to your account',
+    price_monthly_cents: 500,
+    price_one_time_cents: 0,
+    stripe_product_id: 'prod_addon',
+    stripe_price_id: 'price_addon',
+    is_stackable: true,
+    is_active: true,
+    features: [],
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+
+    // Mock mutations
+    mockUseMutation.mockReturnValue({
+      mutate: vi.fn(),
+      mutateAsync: mockMutateAsync,
+      isPending: false,
+      error: null,
+    });
+
+    // Mock current user (non-superuser by default)
+    mockUseCurrentUser.mockReturnValue({
+      data: { is_superuser: false },
+      isLoading: false,
+      error: null,
+    });
+  });
+
+  describe('Empty State', () => {
+    it('renders empty state when no plan or addon provided', () => {
+      render(
+        <PlanDetailPanel
+          plan={null}
+          addon={null}
+          onEdit={mockOnEdit}
+          onDuplicate={mockOnDuplicate}
+          onCreateVersion={mockOnCreateVersion}
+          onEditVersion={mockOnEditVersion}
+        />
+      );
+
+      expect(screen.getByText(/select a plan or add-on from the catalog/i)).toBeInTheDocument();
+    });
+  });
+
+  describe('Plan Details', () => {
+    it('renders plan header with name and code', () => {
+      render(
+        <PlanDetailPanel
+          plan={mockPlan}
+          addon={null}
+          onEdit={mockOnEdit}
+          onDuplicate={mockOnDuplicate}
+          onCreateVersion={mockOnCreateVersion}
+          onEditVersion={mockOnEditVersion}
+        />
+      );
+
+      expect(screen.getByText(mockPlan.name)).toBeInTheDocument();
+      // Code appears in header and Overview section
+      expect(screen.getAllByText(mockPlan.code).length).toBeGreaterThan(0);
+      expect(screen.getByText(mockPlan.description!)).toBeInTheDocument();
+    });
+
+    it('shows inactive badge when plan is not active', () => {
+      const inactivePlan = { ...mockPlan, is_active: false };
+
+      render(
+        <PlanDetailPanel
+          plan={inactivePlan}
+          addon={null}
+          onEdit={mockOnEdit}
+          onDuplicate={mockOnDuplicate}
+          onCreateVersion={mockOnCreateVersion}
+          onEditVersion={mockOnEditVersion}
+        />
+      );
+
+      // There may be multiple "Inactive" texts (badge and overview section)
+      expect(screen.getAllByText(/inactive/i).length).toBeGreaterThan(0);
+    });
+
+    it('displays subscriber count', () => {
+      render(
+        <PlanDetailPanel
+          plan={mockPlan}
+          addon={null}
+          onEdit={mockOnEdit}
+          onDuplicate={mockOnDuplicate}
+          onCreateVersion={mockOnCreateVersion}
+          onEditVersion={mockOnEditVersion}
+        />
+      );
+
+      expect(screen.getByText(/10 subscribers/i)).toBeInTheDocument();
+    });
+
+    it('displays pricing information', () => {
+      render(
+        <PlanDetailPanel
+          plan={mockPlan}
+          addon={null}
+          onEdit={mockOnEdit}
+          onDuplicate={mockOnDuplicate}
+          onCreateVersion={mockOnCreateVersion}
+          onEditVersion={mockOnEditVersion}
+        />
+      );
+
+      expect(screen.getByText(/\$29.99\/mo/i)).toBeInTheDocument();
+    });
+
+    it('shows "Free" when price is 0', () => {
+      const freePlan = {
+        ...mockPlan,
+        active_version: {
+          ...mockPlanVersion,
+          price_monthly_cents: 0,
+        },
+      };
+
+      render(
+        <PlanDetailPanel
+          plan={freePlan}
+          addon={null}
+          onEdit={mockOnEdit}
+          onDuplicate={mockOnDuplicate}
+          onCreateVersion={mockOnCreateVersion}
+          onEditVersion={mockOnEditVersion}
+        />
+      );
+
+      expect(screen.getByText(/free/i)).toBeInTheDocument();
+    });
+  });
+
+  describe('Action Buttons', () => {
+    it('renders Edit button and calls onEdit when clicked', async () => {
+      const user = userEvent.setup();
+      render(
+        <PlanDetailPanel
+          plan={mockPlan}
+          addon={null}
+          onEdit={mockOnEdit}
+          onDuplicate={mockOnDuplicate}
+          onCreateVersion={mockOnCreateVersion}
+          onEditVersion={mockOnEditVersion}
+        />
+      );
+
+      const editButton = screen.getByRole('button', { name: /edit/i });
+      await user.click(editButton);
+
+      expect(mockOnEdit).toHaveBeenCalledTimes(1);
+    });
+
+    it('renders Duplicate button and calls onDuplicate when clicked', async () => {
+      const user = userEvent.setup();
+      render(
+        <PlanDetailPanel
+          plan={mockPlan}
+          addon={null}
+          onEdit={mockOnEdit}
+          onDuplicate={mockOnDuplicate}
+          onCreateVersion={mockOnCreateVersion}
+          onEditVersion={mockOnEditVersion}
+        />
+      );
+
+      const duplicateButton = screen.getByRole('button', { name: /duplicate/i });
+      await user.click(duplicateButton);
+
+      expect(mockOnDuplicate).toHaveBeenCalledTimes(1);
+    });
+
+    it('renders New Version button and calls onCreateVersion when clicked', async () => {
+      const user = userEvent.setup();
+      render(
+        <PlanDetailPanel
+          plan={mockPlan}
+          addon={null}
+          onEdit={mockOnEdit}
+          onDuplicate={mockOnDuplicate}
+          onCreateVersion={mockOnCreateVersion}
+          onEditVersion={mockOnEditVersion}
+        />
+      );
+
+      const newVersionButton = screen.getByRole('button', { name: /new version/i });
+      await user.click(newVersionButton);
+
+      expect(mockOnCreateVersion).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('Collapsible Sections', () => {
+    it('renders Overview section', () => {
+      render(
+        <PlanDetailPanel
+          plan={mockPlan}
+          addon={null}
+          onEdit={mockOnEdit}
+          onDuplicate={mockOnDuplicate}
+          onCreateVersion={mockOnCreateVersion}
+          onEditVersion={mockOnEditVersion}
+        />
+      );
+
+      expect(screen.getByText('Overview')).toBeInTheDocument();
+      expect(screen.getByText(/plan code/i)).toBeInTheDocument();
+    });
+
+    it('renders Pricing section with price details', () => {
+      render(
+        <PlanDetailPanel
+          plan={mockPlan}
+          addon={null}
+          onEdit={mockOnEdit}
+          onDuplicate={mockOnDuplicate}
+          onCreateVersion={mockOnCreateVersion}
+          onEditVersion={mockOnEditVersion}
+        />
+      );
+
+      expect(screen.getByText('Pricing')).toBeInTheDocument();
+      // Monthly price
+      expect(screen.getByText('$29.99')).toBeInTheDocument();
+      // Yearly price
+      expect(screen.getByText('$299.90')).toBeInTheDocument();
+    });
+
+    it('renders Features section', () => {
+      render(
+        <PlanDetailPanel
+          plan={mockPlan}
+          addon={null}
+          onEdit={mockOnEdit}
+          onDuplicate={mockOnDuplicate}
+          onCreateVersion={mockOnCreateVersion}
+          onEditVersion={mockOnEditVersion}
+        />
+      );
+
+      expect(screen.getByText(/features \(1\)/i)).toBeInTheDocument();
+      expect(screen.getByText('Test Feature')).toBeInTheDocument();
+    });
+
+    it('toggles section visibility when clicked', async () => {
+      const user = userEvent.setup();
+      render(
+        <PlanDetailPanel
+          plan={mockPlan}
+          addon={null}
+          onEdit={mockOnEdit}
+          onDuplicate={mockOnDuplicate}
+          onCreateVersion={mockOnCreateVersion}
+          onEditVersion={mockOnEditVersion}
+        />
+      );
+
+      // Overview should be expanded by default
+      expect(screen.getByText(/plan code/i)).toBeVisible();
+
+      // Click to collapse
+      const overviewButton = screen.getByRole('button', { name: /overview/i });
+      await user.click(overviewButton);
+
+      // Content should be hidden now
+      expect(screen.queryByText(/plan code/i)).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Versions Section', () => {
+    it('renders versions list', async () => {
+      const user = userEvent.setup();
+      render(
+        <PlanDetailPanel
+          plan={mockPlan}
+          addon={null}
+          onEdit={mockOnEdit}
+          onDuplicate={mockOnDuplicate}
+          onCreateVersion={mockOnCreateVersion}
+          onEditVersion={mockOnEditVersion}
+        />
+      );
+
+      // Versions section header should be visible
+      expect(screen.getByText(/versions \(1\)/i)).toBeInTheDocument();
+
+      // Expand Versions section
+      const versionsButton = screen.getByRole('button', { name: /versions \(1\)/i });
+      await user.click(versionsButton);
+
+      expect(screen.getByText('v1')).toBeInTheDocument();
+      expect(screen.getAllByText('Version 1').length).toBeGreaterThan(0);
+    });
+
+    it('shows subscriber count for each version', async () => {
+      const user = userEvent.setup();
+      render(
+        <PlanDetailPanel
+          plan={mockPlan}
+          addon={null}
+          onEdit={mockOnEdit}
+          onDuplicate={mockOnDuplicate}
+          onCreateVersion={mockOnCreateVersion}
+          onEditVersion={mockOnEditVersion}
+        />
+      );
+
+      // Expand Versions section
+      const versionsButton = screen.getByRole('button', { name: /versions \(1\)/i });
+      await user.click(versionsButton);
+
+      expect(screen.getByText(/5 subscribers/i)).toBeInTheDocument();
+    });
+  });
+
+  describe('Danger Zone', () => {
+    it('renders Danger Zone section', () => {
+      render(
+        <PlanDetailPanel
+          plan={mockPlan}
+          addon={null}
+          onEdit={mockOnEdit}
+          onDuplicate={mockOnDuplicate}
+          onCreateVersion={mockOnCreateVersion}
+          onEditVersion={mockOnEditVersion}
+        />
+      );
+
+      expect(screen.getByText('Danger Zone')).toBeInTheDocument();
+    });
+
+    it('prevents deletion when plan has subscribers', async () => {
+      const user = userEvent.setup();
+      render(
+        <PlanDetailPanel
+          plan={mockPlan}
+          addon={null}
+          onEdit={mockOnEdit}
+          onDuplicate={mockOnDuplicate}
+          onCreateVersion={mockOnCreateVersion}
+          onEditVersion={mockOnEditVersion}
+        />
+      );
+
+      // Expand Danger Zone
+      const dangerZoneButton = screen.getByRole('button', { name: /danger zone/i });
+      await user.click(dangerZoneButton);
+
+      // Should show warning message
+      expect(screen.getByText(/has 10 active subscriber\(s\) and cannot be deleted/i)).toBeInTheDocument();
+
+      // Delete button should not exist
+      expect(screen.queryByRole('button', { name: /delete plan/i })).not.toBeInTheDocument();
+    });
+
+    it('shows delete button when plan has no subscribers', async () => {
+      const user = userEvent.setup();
+      const planWithoutSubscribers = { ...mockPlan, total_subscribers: 0 };
+
+      render(
+        <PlanDetailPanel
+          plan={planWithoutSubscribers}
+          addon={null}
+          onEdit={mockOnEdit}
+          onDuplicate={mockOnDuplicate}
+          onCreateVersion={mockOnCreateVersion}
+          onEditVersion={mockOnEditVersion}
+        />
+      );
+
+      // Expand Danger Zone
+      const dangerZoneButton = screen.getByRole('button', { name: /danger zone/i });
+      await user.click(dangerZoneButton);
+
+      // Delete button should exist
+      expect(screen.getByRole('button', { name: /delete plan/i })).toBeInTheDocument();
+    });
+
+    it('shows force push button for superusers with subscribers', async () => {
+      const user = userEvent.setup();
+      // Mock superuser
+      mockUseCurrentUser.mockReturnValue({
+        data: { is_superuser: true },
+        isLoading: false,
+        error: null,
+      });
+
+      render(
+        <PlanDetailPanel
+          plan={mockPlan}
+          addon={null}
+          onEdit={mockOnEdit}
+          onDuplicate={mockOnDuplicate}
+          onCreateVersion={mockOnCreateVersion}
+          onEditVersion={mockOnEditVersion}
+        />
+      );
+
+      // Expand Danger Zone
+      const dangerZoneButton = screen.getByRole('button', { name: /danger zone/i });
+      await user.click(dangerZoneButton);
+
+      // Should show force push button
+      expect(screen.getByRole('button', { name: /force push to subscribers/i })).toBeInTheDocument();
+    });
+
+    it('does not show force push button for non-superusers', async () => {
+      const user = userEvent.setup();
+      render(
+        <PlanDetailPanel
+          plan={mockPlan}
+          addon={null}
+          onEdit={mockOnEdit}
+          onDuplicate={mockOnDuplicate}
+          onCreateVersion={mockOnCreateVersion}
+          onEditVersion={mockOnEditVersion}
+        />
+      );
+
+      // Expand Danger Zone
+      const dangerZoneButton = screen.getByRole('button', { name: /danger zone/i });
+      await user.click(dangerZoneButton);
+
+      // Should NOT show force push button
+      expect(screen.queryByRole('button', { name: /force push to subscribers/i })).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Add-On Details', () => {
+    it('renders add-on header with name and code', () => {
+      render(
+        <PlanDetailPanel
+          plan={null}
+          addon={mockAddon}
+          onEdit={mockOnEdit}
+          onDuplicate={mockOnDuplicate}
+          onCreateVersion={mockOnCreateVersion}
+          onEditVersion={mockOnEditVersion}
+        />
+      );
+
+      expect(screen.getByText(mockAddon.name)).toBeInTheDocument();
+      expect(screen.getByText(mockAddon.code)).toBeInTheDocument();
+      expect(screen.getByText(mockAddon.description!)).toBeInTheDocument();
+    });
+
+    it('displays add-on pricing', () => {
+      render(
+        <PlanDetailPanel
+          plan={null}
+          addon={mockAddon}
+          onEdit={mockOnEdit}
+          onDuplicate={mockOnDuplicate}
+          onCreateVersion={mockOnCreateVersion}
+          onEditVersion={mockOnEditVersion}
+        />
+      );
+
+      expect(screen.getByText('$5.00')).toBeInTheDocument(); // Monthly price
+      expect(screen.getByText('$0.00')).toBeInTheDocument(); // One-time price
+    });
+
+    it('renders Edit button for add-on', async () => {
+      const user = userEvent.setup();
+      render(
+        <PlanDetailPanel
+          plan={null}
+          addon={mockAddon}
+          onEdit={mockOnEdit}
+          onDuplicate={mockOnDuplicate}
+          onCreateVersion={mockOnCreateVersion}
+          onEditVersion={mockOnEditVersion}
+        />
+      );
+
+      const editButton = screen.getByRole('button', { name: /edit/i });
+      await user.click(editButton);
+
+      expect(mockOnEdit).toHaveBeenCalledTimes(1);
+    });
+  });
+});

frontend/src/billing/featureCatalog.ts

@@ -34,6 +34,8 @@ export interface FeatureCatalogEntry {
   description: string;
   type: FeatureType;
   category: FeatureCategory;
+  /** Feature is work-in-progress and not yet enforced */
+  wip?: boolean;
 }
 
 export type FeatureCategory =
@@ -66,13 +68,6 @@ export const BOOLEAN_FEATURES: FeatureCatalogEntry[] = [
     type: 'boolean',
     category: 'communication',
   },
-  {
-    code: 'proxy_number_enabled',
-    name: 'Proxy Phone Numbers',
-    description: 'Use proxy phone numbers for customer communication',
-    type: 'boolean',
-    category: 'communication',
-  },
 
   // Payments & Commerce
   {
@@ -88,6 +83,7 @@ export const BOOLEAN_FEATURES: FeatureCatalogEntry[] = [
     description: 'Use Point of Sale (POS) system',
     type: 'boolean',
     category: 'access',
+    wip: true,
   },
 
   // Scheduling & Booking
@@ -97,27 +93,7 @@ export const BOOLEAN_FEATURES: FeatureCatalogEntry[] = [
     description: 'Schedule recurring appointments',
     type: 'boolean',
     category: 'scheduling',
-  },
+    wip: true,
-  {
-    code: 'group_bookings',
-    name: 'Group Bookings',
-    description: 'Allow multiple customers per appointment',
-    type: 'boolean',
-    category: 'scheduling',
-  },
-  {
-    code: 'waitlist',
-    name: 'Waitlist',
-    description: 'Enable waitlist for fully booked slots',
-    type: 'boolean',
-    category: 'scheduling',
-  },
-  {
-    code: 'can_add_video_conferencing',
-    name: 'Video Conferencing',
-    description: 'Add video conferencing to events',
-    type: 'boolean',
-    category: 'scheduling',
   },
 
   // Access & Features
@@ -127,13 +103,7 @@ export const BOOLEAN_FEATURES: FeatureCatalogEntry[] = [
     description: 'Access the public API for integrations',
     type: 'boolean',
     category: 'access',
-  },
+    wip: true,
-  {
-    code: 'can_use_analytics',
-    name: 'Analytics Dashboard',
-    description: 'Access business analytics and reporting',
-    type: 'boolean',
-    category: 'access',
   },
   {
     code: 'can_use_tasks',
@@ -149,19 +119,13 @@ export const BOOLEAN_FEATURES: FeatureCatalogEntry[] = [
     type: 'boolean',
     category: 'access',
   },
-  {
-    code: 'customer_portal',
-    name: 'Customer Portal',
-    description: 'Branded self-service portal for customers',
-    type: 'boolean',
-    category: 'access',
-  },
   {
     code: 'custom_fields',
     name: 'Custom Fields',
-    description: 'Create custom data fields for resources and events',
+    description: 'Add custom intake fields to services for customer booking',
     type: 'boolean',
     category: 'access',
+    wip: true,
   },
   {
     code: 'can_export_data',
@@ -169,44 +133,26 @@ export const BOOLEAN_FEATURES: FeatureCatalogEntry[] = [
     description: 'Export data (appointments, customers, etc.)',
     type: 'boolean',
     category: 'access',
+    wip: true,
   },
   {
-    code: 'can_use_mobile_app',
+    code: 'mobile_app_access',
     name: 'Mobile App',
     description: 'Access the mobile app for field employees',
     type: 'boolean',
     category: 'access',
+    wip: true,
+  },
+  {
+    code: 'proxy_number_enabled',
+    name: 'Proxy Phone Numbers',
+    description: 'Assign dedicated phone numbers to staff for customer communication',
+    type: 'boolean',
+    category: 'communication',
+    wip: true,
   },
 
   // Integrations
-  {
-    code: 'calendar_sync',
-    name: 'Calendar Sync',
-    description: 'Sync with Google Calendar, Outlook, etc.',
-    type: 'boolean',
-    category: 'integrations',
-  },
-  {
-    code: 'webhooks_enabled',
-    name: 'Webhooks',
-    description: 'Send webhook notifications for events',
-    type: 'boolean',
-    category: 'integrations',
-  },
-  {
-    code: 'can_use_plugins',
-    name: 'Plugin Integrations',
-    description: 'Use third-party plugin integrations',
-    type: 'boolean',
-    category: 'integrations',
-  },
-  {
-    code: 'can_create_plugins',
-    name: 'Create Plugins',
-    description: 'Create custom plugins for automation',
-    type: 'boolean',
-    category: 'integrations',
-  },
   {
     code: 'can_manage_oauth_credentials',
     name: 'Manage OAuth',
@@ -217,21 +163,7 @@ export const BOOLEAN_FEATURES: FeatureCatalogEntry[] = [
 
   // Branding
   {
-    code: 'custom_branding',
+    code: 'custom_domain',
-    name: 'Custom Branding',
-    description: 'Customize branding colors, logo, and styling',
-    type: 'boolean',
-    category: 'branding',
-  },
-  {
-    code: 'remove_branding',
-    name: 'Remove Branding',
-    description: 'Remove SmoothSchedule branding from customer-facing pages',
-    type: 'boolean',
-    category: 'branding',
-  },
-  {
-    code: 'can_use_custom_domain',
     name: 'Custom Domain',
     description: 'Configure a custom domain for your booking page',
     type: 'boolean',
@@ -245,6 +177,7 @@ export const BOOLEAN_FEATURES: FeatureCatalogEntry[] = [
     description: 'Get priority customer support response',
     type: 'boolean',
     category: 'support',
+    wip: true,
   },
 
   // Security & Compliance
@@ -254,6 +187,7 @@ export const BOOLEAN_FEATURES: FeatureCatalogEntry[] = [
     description: 'Require two-factor authentication for users',
     type: 'boolean',
     category: 'security',
+    wip: true,
   },
   {
     code: 'sso_enabled',
@@ -261,20 +195,15 @@ export const BOOLEAN_FEATURES: FeatureCatalogEntry[] = [
     description: 'Enable SSO authentication for team members',
     type: 'boolean',
     category: 'security',
+    wip: true,
   },
   {
-    code: 'can_delete_data',
+    code: 'audit_logs',
-    name: 'Delete Data',
+    name: 'Audit Logs',
-    description: 'Permanently delete data',
+    description: 'Track changes and download audit logs',
-    type: 'boolean',
-    category: 'security',
-  },
-  {
-    code: 'can_download_logs',
-    name: 'Download Logs',
-    description: 'Download system logs',
     type: 'boolean',
     category: 'security',
+    wip: true,
   },
 ];
 
@@ -406,6 +335,14 @@ export const isCanonicalFeature = (code: string): boolean => {
   return featureMap.has(code);
 };
 
+/**
+ * Check if a feature is work-in-progress (not yet enforced)
+ */
+export const isWipFeature = (code: string): boolean => {
+  const feature = featureMap.get(code);
+  return feature?.wip ?? false;
+};
+
 /**
  * Get all features by type
  */

frontend/src/components/AppointmentQuotaBanner.tsx

@@ -0,0 +1,150 @@
+/**
+ * AppointmentQuotaBanner Component
+ *
+ * Shows a warning banner when the user has reached 90% of their monthly
+ * appointment quota. Dismissable per-user per-billing-period.
+ *
+ * This is different from QuotaWarningBanner which handles grace period
+ * overages for permanent limits like max_users.
+ */
+
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+import { AlertTriangle, X, TrendingUp, Calendar } from 'lucide-react';
+import { useQuotaStatus, useDismissQuotaBanner } from '../hooks/useQuotaStatus';
+
+interface AppointmentQuotaBannerProps {
+  /** Only show for owners/managers who can take action */
+  userRole?: string;
+}
+
+const AppointmentQuotaBanner: React.FC<AppointmentQuotaBannerProps> = ({ userRole }) => {
+  const { t } = useTranslation();
+  const { data: quotaStatus, isLoading } = useQuotaStatus();
+  const dismissMutation = useDismissQuotaBanner();
+
+  // Don't show while loading or if no data
+  if (isLoading || !quotaStatus) {
+    return null;
+  }
+
+  // Don't show if banner shouldn't be shown
+  if (!quotaStatus.warning.show_banner) {
+    return null;
+  }
+
+  // Only show for owners and managers who can take action
+  if (userRole && !['owner', 'manager'].includes(userRole)) {
+    return null;
+  }
+
+  const { appointments, billing_period } = quotaStatus;
+
+  // Don't show if unlimited
+  if (appointments.is_unlimited) {
+    return null;
+  }
+
+  const isOverQuota = appointments.is_over_quota;
+  const percentage = Math.round(appointments.usage_percentage);
+
+  const handleDismiss = () => {
+    dismissMutation.mutate();
+  };
+
+  // Format billing period for display
+  const billingPeriodDisplay = new Date(
+    billing_period.year,
+    billing_period.month - 1
+  ).toLocaleDateString(undefined, { month: 'long', year: 'numeric' });
+
+  return (
+    <div
+      className={`border-b ${
+        isOverQuota
+          ? 'bg-gradient-to-r from-red-500 to-red-600 text-white'
+          : 'bg-gradient-to-r from-amber-400 to-amber-500 text-amber-950'
+      }`}
+    >
+      <div className="max-w-7xl mx-auto px-4 py-3 sm:px-6 lg:px-8">
+        <div className="flex items-center justify-between flex-wrap gap-2">
+          {/* Left: Warning Info */}
+          <div className="flex items-center gap-3 flex-1">
+            <div
+              className={`p-2 rounded-full ${
+                isOverQuota ? 'bg-white/20' : 'bg-amber-600/20'
+              }`}
+            >
+              {isOverQuota ? (
+                <AlertTriangle className="h-5 w-5" />
+              ) : (
+                <TrendingUp className="h-5 w-5" />
+              )}
+            </div>
+            <div className="flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-3">
+              <span className="font-semibold text-sm sm:text-base">
+                {isOverQuota
+                  ? t('quota.appointmentBanner.overTitle', 'Appointment Quota Exceeded')
+                  : t('quota.appointmentBanner.warningTitle', 'Approaching Appointment Limit')}
+              </span>
+              <span className="text-sm opacity-90 flex items-center gap-1">
+                <Calendar className="h-4 w-4 hidden sm:inline" />
+                {t('quota.appointmentBanner.usage', '{{used}} of {{limit}} ({{percentage}}%)', {
+                  used: appointments.count,
+                  limit: appointments.limit,
+                  percentage,
+                })}
+                {' • '}
+                {billingPeriodDisplay}
+              </span>
+            </div>
+          </div>
+
+          {/* Right: Actions */}
+          <div className="flex items-center gap-2">
+            {isOverQuota && appointments.overage_count > 0 && (
+              <span className="text-xs sm:text-sm px-2 py-1 bg-white/20 rounded">
+                {t('quota.appointmentBanner.overage', '+{{count}} @ $0.10 each', {
+                  count: appointments.overage_count,
+                })}
+              </span>
+            )}
+            <Link
+              to="/dashboard/settings/billing"
+              className={`inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${
+                isOverQuota
+                  ? 'bg-white text-red-600 hover:bg-red-50'
+                  : 'bg-amber-700 text-white hover:bg-amber-800'
+              }`}
+            >
+              {t('quota.appointmentBanner.upgrade', 'Upgrade Plan')}
+            </Link>
+            <button
+              onClick={handleDismiss}
+              disabled={dismissMutation.isPending}
+              className={`p-1.5 rounded-md transition-colors ${
+                isOverQuota ? 'hover:bg-white/20' : 'hover:bg-amber-600/20'
+              }`}
+              aria-label={t('common.dismiss', 'Dismiss')}
+            >
+              <X className="h-5 w-5" />
+            </button>
+          </div>
+        </div>
+
+        {/* Additional info for over-quota */}
+        {isOverQuota && (
+          <div className="mt-2 text-sm opacity-90">
+            {t(
+              'quota.appointmentBanner.overageInfo',
+              'Appointments over your limit will be billed at $0.10 each at the end of your billing cycle.'
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default AppointmentQuotaBanner;

frontend/src/components/PlatformSidebar.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link, useLocation } from 'react-router-dom';
-import { LayoutDashboard, Building2, MessageSquare, Settings, Users, Shield, HelpCircle, Code, Mail, CreditCard, Inbox } from 'lucide-react';
+import { LayoutDashboard, Building2, MessageSquare, Settings, Users, Shield, HelpCircle, Code, Mail, CreditCard, Inbox, FileText } from 'lucide-react';
 import { User } from '../types';
 import SmoothScheduleLogo from './SmoothScheduleLogo';
 
@@ -81,6 +81,10 @@ const PlatformSidebar: React.FC<PlatformSidebarProps> = ({ user, isCollapsed, to
               <Shield size={18} className="shrink-0" />
               {!isCollapsed && <span>{t('nav.staff')}</span>}
             </Link>
+            <Link to="/platform/email-templates" className={getNavClass('/platform/email-templates')} title={t('nav.emailTemplates', 'Email Templates')}>
+              <FileText size={18} className="shrink-0" />
+              {!isCollapsed && <span>{t('nav.emailTemplates', 'Email Templates')}</span>}
+            </Link>
             <Link to="/platform/billing" className={getNavClass('/platform/billing')} title="Billing Management">
               <CreditCard size={18} className="shrink-0" />
               {!isCollapsed && <span>Billing</span>}

frontend/src/components/Sidebar.tsx

@@ -17,10 +17,13 @@ import {
   CalendarOff,
   Image,
   BarChart3,
+  ShoppingCart,
+  Package,
 } from 'lucide-react';
 import { Business, User } from '../types';
 import { useLogout } from '../hooks/useAuth';
 import { usePlanFeatures } from '../hooks/usePlanFeatures';
+import { useEntitlements, FEATURE_CODES } from '../hooks/useEntitlements';
 import SmoothScheduleLogo from './SmoothScheduleLogo';
 import UnfinishedBadge from './ui/UnfinishedBadge';
 import {
@@ -41,6 +44,7 @@ const Sidebar: React.FC<SidebarProps> = ({ business, user, isCollapsed, toggleCo
   const { role } = user;
   const logoutMutation = useLogout();
   const { canUse } = usePlanFeatures();
+  const { hasFeature } = useEntitlements();
 
   // Helper to check if user has a specific staff permission
   // Owners always have all permissions
@@ -139,6 +143,24 @@ const Sidebar: React.FC<SidebarProps> = ({ business, user, isCollapsed, toggleCo
           )}
         </SidebarSection>
 
+        {/* Point of Sale Section - Requires tenant feature AND user permission */}
+        {hasFeature(FEATURE_CODES.CAN_USE_POS) && hasPermission('can_access_pos') && (
+          <SidebarSection title={t('nav.sections.pos', 'Point of Sale')} isCollapsed={isCollapsed}>
+            <SidebarItem
+              to="/dashboard/pos"
+              icon={ShoppingCart}
+              label={t('nav.pos', 'Point of Sale')}
+              isCollapsed={isCollapsed}
+            />
+            <SidebarItem
+              to="/dashboard/products"
+              icon={Package}
+              label={t('nav.products', 'Products')}
+              isCollapsed={isCollapsed}
+            />
+          </SidebarSection>
+        )}
+
         {/* Staff-only: My Schedule and My Availability */}
         {((isStaff && hasPermission('can_access_my_schedule')) ||
           ((role === 'staff' || role === 'resource') && hasPermission('can_access_my_availability'))) && (

frontend/src/components/StorageQuotaBanner.tsx

@@ -0,0 +1,179 @@
+/**
+ * StorageQuotaBanner Component
+ *
+ * Shows a warning banner when the user has reached 90% of their database
+ * storage quota. This helps business owners be aware of storage usage
+ * and potential overage charges.
+ *
+ * Storage is measured periodically by a backend task and cached.
+ */
+
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+import { AlertTriangle, X, Database, HardDrive } from 'lucide-react';
+import { useQuotaStatus } from '../hooks/useQuotaStatus';
+
+interface StorageQuotaBannerProps {
+  /** Only show for owners/managers who can take action */
+  userRole?: string;
+  /** Callback when banner is dismissed */
+  onDismiss?: () => void;
+}
+
+const StorageQuotaBanner: React.FC<StorageQuotaBannerProps> = ({ userRole, onDismiss }) => {
+  const { t } = useTranslation();
+  const { data: quotaStatus, isLoading } = useQuotaStatus();
+
+  // Don't show while loading or if no data
+  if (isLoading || !quotaStatus) {
+    return null;
+  }
+
+  const { storage, billing_period } = quotaStatus;
+
+  // Don't show if unlimited
+  if (storage.is_unlimited) {
+    return null;
+  }
+
+  // Don't show if not at warning threshold
+  if (!storage.is_at_warning_threshold) {
+    return null;
+  }
+
+  // Only show for owners and managers who can take action
+  if (userRole && !['owner', 'manager'].includes(userRole)) {
+    return null;
+  }
+
+  const isOverQuota = storage.is_over_quota;
+  const percentage = Math.round(storage.usage_percentage);
+
+  // Format storage sizes for display
+  const formatSize = (mb: number): string => {
+    if (mb >= 1024) {
+      return `${(mb / 1024).toFixed(1)} GB`;
+    }
+    return `${mb.toFixed(1)} MB`;
+  };
+
+  const currentDisplay = formatSize(storage.current_size_mb);
+  const limitDisplay = formatSize(storage.quota_limit_mb);
+  const overageDisplay = storage.overage_mb > 0 ? formatSize(storage.overage_mb) : null;
+
+  // Format billing period for display
+  const billingPeriodDisplay = new Date(
+    billing_period.year,
+    billing_period.month - 1
+  ).toLocaleDateString(undefined, { month: 'long', year: 'numeric' });
+
+  // Format last measured time
+  const lastMeasuredDisplay = storage.last_measured_at
+    ? new Date(storage.last_measured_at).toLocaleString(undefined, {
+        month: 'short',
+        day: 'numeric',
+        hour: 'numeric',
+        minute: '2-digit',
+      })
+    : null;
+
+  return (
+    <div
+      className={`border-b ${
+        isOverQuota
+          ? 'bg-gradient-to-r from-purple-600 to-purple-700 text-white'
+          : 'bg-gradient-to-r from-purple-400 to-purple-500 text-purple-950'
+      }`}
+    >
+      <div className="max-w-7xl mx-auto px-4 py-3 sm:px-6 lg:px-8">
+        <div className="flex items-center justify-between flex-wrap gap-2">
+          {/* Left: Warning Info */}
+          <div className="flex items-center gap-3 flex-1">
+            <div
+              className={`p-2 rounded-full ${
+                isOverQuota ? 'bg-white/20' : 'bg-purple-600/20'
+              }`}
+            >
+              {isOverQuota ? (
+                <AlertTriangle className="h-5 w-5" />
+              ) : (
+                <Database className="h-5 w-5" />
+              )}
+            </div>
+            <div className="flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-3">
+              <span className="font-semibold text-sm sm:text-base">
+                {isOverQuota
+                  ? t('quota.storageBanner.overTitle', 'Storage Quota Exceeded')
+                  : t('quota.storageBanner.warningTitle', 'Approaching Storage Limit')}
+              </span>
+              <span className="text-sm opacity-90 flex items-center gap-1">
+                <HardDrive className="h-4 w-4 hidden sm:inline" />
+                {t('quota.storageBanner.usage', '{{used}} of {{limit}} ({{percentage}}%)', {
+                  used: currentDisplay,
+                  limit: limitDisplay,
+                  percentage,
+                })}
+                {' • '}
+                {billingPeriodDisplay}
+              </span>
+            </div>
+          </div>
+
+          {/* Right: Actions */}
+          <div className="flex items-center gap-2">
+            {isOverQuota && overageDisplay && (
+              <span className="text-xs sm:text-sm px-2 py-1 bg-white/20 rounded">
+                {t('quota.storageBanner.overage', '+{{size}} @ $0.50/GB', {
+                  size: overageDisplay,
+                })}
+              </span>
+            )}
+            <Link
+              to="/dashboard/settings/billing"
+              className={`inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${
+                isOverQuota
+                  ? 'bg-white text-purple-600 hover:bg-purple-50'
+                  : 'bg-purple-700 text-white hover:bg-purple-800'
+              }`}
+            >
+              {t('quota.storageBanner.upgrade', 'Upgrade Plan')}
+            </Link>
+            {onDismiss && (
+              <button
+                onClick={onDismiss}
+                className={`p-1.5 rounded-md transition-colors ${
+                  isOverQuota ? 'hover:bg-white/20' : 'hover:bg-purple-600/20'
+                }`}
+                aria-label={t('common.dismiss', 'Dismiss')}
+              >
+                <X className="h-5 w-5" />
+              </button>
+            )}
+          </div>
+        </div>
+
+        {/* Additional info for over-quota */}
+        {isOverQuota && (
+          <div className="mt-2 text-sm opacity-90">
+            {t(
+              'quota.storageBanner.overageInfo',
+              'Storage over your limit will be billed at $0.50 per GB at the end of your billing cycle.'
+            )}
+          </div>
+        )}
+
+        {/* Last measured timestamp */}
+        {lastMeasuredDisplay && (
+          <div className="mt-1 text-xs opacity-70">
+            {t('quota.storageBanner.lastMeasured', 'Last measured: {{time}}', {
+              time: lastMeasuredDisplay,
+            })}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default StorageQuotaBanner;

frontend/src/components/Timeline/__tests__/CurrentTimeIndicator.test.tsx

@@ -0,0 +1,123 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { render, screen, act } from '@testing-library/react';
+import CurrentTimeIndicator from '../CurrentTimeIndicator';
+
+describe('CurrentTimeIndicator', () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+    vi.useRealTimers();
+  });
+
+  it('renders the current time indicator', () => {
+    const startTime = new Date('2024-01-01T08:00:00');
+    const now = new Date('2024-01-01T10:00:00');
+    vi.setSystemTime(now);
+
+    render(<CurrentTimeIndicator startTime={startTime} hourWidth={100} />);
+
+    const indicator = document.querySelector('#current-time-indicator');
+    expect(indicator).toBeInTheDocument();
+  });
+
+  it('displays the current time', () => {
+    const startTime = new Date('2024-01-01T08:00:00');
+    const now = new Date('2024-01-01T10:30:00');
+    vi.setSystemTime(now);
+
+    render(<CurrentTimeIndicator startTime={startTime} hourWidth={100} />);
+
+    expect(screen.getByText('10:30 AM')).toBeInTheDocument();
+  });
+
+  it('calculates correct position based on time difference', () => {
+    const startTime = new Date('2024-01-01T08:00:00');
+    const now = new Date('2024-01-01T10:00:00'); // 2 hours after start
+    vi.setSystemTime(now);
+
+    render(<CurrentTimeIndicator startTime={startTime} hourWidth={100} />);
+
+    const indicator = document.querySelector('#current-time-indicator');
+    expect(indicator).toHaveStyle({ left: '200px' }); // 2 hours * 100px
+  });
+
+  it('does not render when current time is before start time', () => {
+    const startTime = new Date('2024-01-01T10:00:00');
+    const now = new Date('2024-01-01T08:00:00'); // Before start time
+    vi.setSystemTime(now);
+
+    render(<CurrentTimeIndicator startTime={startTime} hourWidth={100} />);
+
+    const indicator = document.querySelector('#current-time-indicator');
+    expect(indicator).not.toBeInTheDocument();
+  });
+
+  it('updates position every minute', () => {
+    const startTime = new Date('2024-01-01T08:00:00');
+    const initialTime = new Date('2024-01-01T10:00:00');
+    vi.setSystemTime(initialTime);
+
+    render(<CurrentTimeIndicator startTime={startTime} hourWidth={100} />);
+
+    const indicator = document.querySelector('#current-time-indicator');
+    expect(indicator).toHaveStyle({ left: '200px' });
+
+    // Advance time by 1 minute
+    act(() => {
+      vi.advanceTimersByTime(60000);
+    });
+
+    // Position should update (120 minutes + 1 minute = 121 minutes)
+    // 121 minutes * (100px / 60 minutes) = 201.67px
+    expect(indicator).toBeInTheDocument();
+  });
+
+  it('renders with correct styling', () => {
+    const startTime = new Date('2024-01-01T08:00:00');
+    const now = new Date('2024-01-01T10:00:00');
+    vi.setSystemTime(now);
+
+    render(<CurrentTimeIndicator startTime={startTime} hourWidth={100} />);
+
+    const indicator = document.querySelector('#current-time-indicator');
+    expect(indicator).toHaveClass('absolute', 'top-0', 'bottom-0', 'w-px', 'bg-red-500', 'z-30', 'pointer-events-none');
+  });
+
+  it('renders the red dot at the top', () => {
+    const startTime = new Date('2024-01-01T08:00:00');
+    const now = new Date('2024-01-01T10:00:00');
+    vi.setSystemTime(now);
+
+    render(<CurrentTimeIndicator startTime={startTime} hourWidth={100} />);
+
+    const indicator = document.querySelector('#current-time-indicator');
+    const dot = indicator?.querySelector('.rounded-full');
+    expect(dot).toBeInTheDocument();
+    expect(dot).toHaveClass('bg-red-500');
+  });
+
+  it('works with different hourWidth values', () => {
+    const startTime = new Date('2024-01-01T08:00:00');
+    const now = new Date('2024-01-01T10:00:00'); // 2 hours after start
+    vi.setSystemTime(now);
+
+    render(<CurrentTimeIndicator startTime={startTime} hourWidth={150} />);
+
+    const indicator = document.querySelector('#current-time-indicator');
+    expect(indicator).toHaveStyle({ left: '300px' }); // 2 hours * 150px
+  });
+
+  it('handles fractional hour positions', () => {
+    const startTime = new Date('2024-01-01T08:00:00');
+    const now = new Date('2024-01-01T08:30:00'); // 30 minutes after start
+    vi.setSystemTime(now);
+
+    render(<CurrentTimeIndicator startTime={startTime} hourWidth={100} />);
+
+    const indicator = document.querySelector('#current-time-indicator');
+    expect(indicator).toHaveStyle({ left: '50px' }); // 0.5 hours * 100px
+  });
+});

frontend/src/components/Timeline/__tests__/DraggableEvent.test.tsx

@@ -0,0 +1,228 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { DraggableEvent } from '../DraggableEvent';
+
+// Mock DnD Kit
+vi.mock('@dnd-kit/core', () => ({
+  DndContext: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+  useDraggable: vi.fn(() => ({
+    attributes: {},
+    listeners: {},
+    setNodeRef: vi.fn(),
+    transform: null,
+    isDragging: false,
+  })),
+}));
+
+vi.mock('@dnd-kit/utilities', () => ({
+  CSS: {
+    Translate: {
+      toString: (transform: any) => transform ? `translate3d(${transform.x}px, ${transform.y}px, 0)` : undefined,
+    },
+  },
+}));
+
+describe('DraggableEvent', () => {
+  const defaultProps = {
+    id: 1,
+    title: 'Test Event',
+    serviceName: 'Test Service',
+    status: 'CONFIRMED' as const,
+    isPaid: false,
+    start: new Date('2024-01-01T10:00:00'),
+    end: new Date('2024-01-01T11:00:00'),
+    laneIndex: 0,
+    height: 80,
+    left: 100,
+    width: 200,
+    top: 10,
+    onResizeStart: vi.fn(),
+  };
+
+  it('renders the event title', () => {
+    render(<DraggableEvent {...defaultProps} />);
+    expect(screen.getByText('Test Event')).toBeInTheDocument();
+  });
+
+  it('renders the service name when provided', () => {
+    render(<DraggableEvent {...defaultProps} />);
+    expect(screen.getByText('Test Service')).toBeInTheDocument();
+  });
+
+  it('does not render service name when not provided', () => {
+    render(<DraggableEvent {...defaultProps} serviceName={undefined} />);
+    expect(screen.queryByText('Test Service')).not.toBeInTheDocument();
+  });
+
+  it('displays the start time formatted correctly', () => {
+    render(<DraggableEvent {...defaultProps} />);
+    expect(screen.getByText('10:00 AM')).toBeInTheDocument();
+  });
+
+  it('applies correct position styles', () => {
+    const { container } = render(<DraggableEvent {...defaultProps} />);
+    const eventElement = container.querySelector('.absolute.rounded-b');
+
+    expect(eventElement).toHaveStyle({
+      left: '100px',
+      width: '200px',
+      top: '10px',
+      height: '80px',
+    });
+  });
+
+  it('applies confirmed status border color', () => {
+    const { container } = render(
+      <DraggableEvent {...defaultProps} status="CONFIRMED" />
+    );
+    const eventElement = container.querySelector('.absolute.rounded-b');
+    expect(eventElement).toHaveClass('border-blue-500');
+  });
+
+  it('applies completed status border color', () => {
+    const { container } = render(
+      <DraggableEvent {...defaultProps} status="COMPLETED" />
+    );
+    const eventElement = container.querySelector('.absolute.rounded-b');
+    expect(eventElement).toHaveClass('border-green-500');
+  });
+
+  it('applies cancelled status border color', () => {
+    const { container } = render(
+      <DraggableEvent {...defaultProps} status="CANCELLED" />
+    );
+    const eventElement = container.querySelector('.absolute.rounded-b');
+    expect(eventElement).toHaveClass('border-red-500');
+  });
+
+  it('applies no-show status border color', () => {
+    const { container } = render(
+      <DraggableEvent {...defaultProps} status="NO_SHOW" />
+    );
+    const eventElement = container.querySelector('.absolute.rounded-b');
+    expect(eventElement).toHaveClass('border-gray-500');
+  });
+
+  it('applies green border when paid', () => {
+    const { container } = render(
+      <DraggableEvent {...defaultProps} isPaid={true} />
+    );
+    const eventElement = container.querySelector('.absolute.rounded-b');
+    expect(eventElement).toHaveClass('border-green-500');
+  });
+
+  it('applies default brand border color for scheduled status', () => {
+    const { container } = render(
+      <DraggableEvent {...defaultProps} status="SCHEDULED" />
+    );
+    const eventElement = container.querySelector('.absolute.rounded-b');
+    expect(eventElement).toHaveClass('border-brand-500');
+  });
+
+  it('calls onResizeStart when top resize handle is clicked', () => {
+    const onResizeStart = vi.fn();
+    const { container } = render(
+      <DraggableEvent {...defaultProps} onResizeStart={onResizeStart} />
+    );
+
+    const topHandle = container.querySelector('.cursor-ns-resize');
+    if (topHandle) {
+      fireEvent.mouseDown(topHandle);
+      expect(onResizeStart).toHaveBeenCalledWith(
+        expect.any(Object),
+        'left',
+        1
+      );
+    }
+  });
+
+  it('calls onResizeStart when bottom resize handle is clicked', () => {
+    const onResizeStart = vi.fn();
+    const { container } = render(
+      <DraggableEvent {...defaultProps} onResizeStart={onResizeStart} />
+    );
+
+    const handles = container.querySelectorAll('.cursor-ns-resize');
+    const bottomHandle = handles[handles.length - 1]; // Get the last one (bottom)
+
+    if (bottomHandle) {
+      fireEvent.mouseDown(bottomHandle);
+      expect(onResizeStart).toHaveBeenCalledWith(
+        expect.any(Object),
+        'right',
+        1
+      );
+    }
+  });
+
+  it('renders grip icon', () => {
+    const { container } = render(<DraggableEvent {...defaultProps} />);
+    const gripIcon = container.querySelector('svg');
+    expect(gripIcon).toBeInTheDocument();
+  });
+
+  it('applies hover styles', () => {
+    const { container } = render(<DraggableEvent {...defaultProps} />);
+    const eventElement = container.querySelector('.absolute.rounded-b');
+    expect(eventElement).toHaveClass('group', 'hover:shadow-md');
+  });
+
+  it('renders with correct base styling classes', () => {
+    const { container } = render(<DraggableEvent {...defaultProps} />);
+    const eventElement = container.querySelector('.absolute.rounded-b');
+    expect(eventElement).toHaveClass(
+      'absolute',
+      'rounded-b',
+      'overflow-hidden',
+      'group',
+      'bg-brand-100'
+    );
+  });
+
+  it('has two resize handles', () => {
+    const { container } = render(<DraggableEvent {...defaultProps} />);
+    const handles = container.querySelectorAll('.cursor-ns-resize');
+    expect(handles).toHaveLength(2);
+  });
+
+  it('stops propagation when resize handle is clicked', () => {
+    const onResizeStart = vi.fn();
+    const { container } = render(
+      <DraggableEvent {...defaultProps} onResizeStart={onResizeStart} />
+    );
+
+    const topHandle = container.querySelector('.cursor-ns-resize');
+    const mockEvent = {
+      stopPropagation: vi.fn(),
+    } as any;
+
+    if (topHandle) {
+      fireEvent.mouseDown(topHandle, mockEvent);
+      // The event handler should call stopPropagation to prevent drag
+      expect(onResizeStart).toHaveBeenCalled();
+    }
+  });
+
+  it('renders content area with cursor-move', () => {
+    const { container } = render(<DraggableEvent {...defaultProps} />);
+    const contentArea = container.querySelector('.cursor-move');
+    expect(contentArea).toBeInTheDocument();
+    expect(contentArea).toHaveClass('select-none');
+  });
+
+  it('applies different heights correctly', () => {
+    const { container } = render(
+      <DraggableEvent {...defaultProps} height={100} />
+    );
+    const eventElement = container.querySelector('.absolute.rounded-b');
+    expect(eventElement).toHaveStyle({ height: '100px' });
+  });
+
+  it('applies different widths correctly', () => {
+    const { container } = render(
+      <DraggableEvent {...defaultProps} width={300} />
+    );
+    const eventElement = container.querySelector('.absolute.rounded-b');
+    expect(eventElement).toHaveStyle({ width: '300px' });
+  });
+});

frontend/src/components/Timeline/__tests__/ResourceRow.test.tsx

@@ -0,0 +1,243 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import ResourceRow from '../ResourceRow';
+import { Event } from '../../../lib/layoutAlgorithm';
+
+// Mock DnD Kit
+vi.mock('@dnd-kit/core', () => ({
+  DndContext: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+  useDroppable: vi.fn(() => ({
+    setNodeRef: vi.fn(),
+    isOver: false,
+  })),
+  useDraggable: vi.fn(() => ({
+    attributes: {},
+    listeners: {},
+    setNodeRef: vi.fn(),
+    transform: null,
+    isDragging: false,
+  })),
+}));
+
+vi.mock('@dnd-kit/utilities', () => ({
+  CSS: {
+    Translate: {
+      toString: (transform: any) => transform ? `translate3d(${transform.x}px, ${transform.y}px, 0)` : undefined,
+    },
+  },
+}));
+
+describe('ResourceRow', () => {
+  const mockEvents: Event[] = [
+    {
+      id: 1,
+      resourceId: 1,
+      title: 'Event 1',
+      serviceName: 'Service 1',
+      start: new Date('2024-01-01T10:00:00'),
+      end: new Date('2024-01-01T11:00:00'),
+      status: 'CONFIRMED',
+    },
+    {
+      id: 2,
+      resourceId: 1,
+      title: 'Event 2',
+      serviceName: 'Service 2',
+      start: new Date('2024-01-01T14:00:00'),
+      end: new Date('2024-01-01T15:00:00'),
+      status: 'SCHEDULED',
+    },
+  ];
+
+  const defaultProps = {
+    resourceId: 1,
+    resourceName: 'Test Resource',
+    events: mockEvents,
+    startTime: new Date('2024-01-01T08:00:00'),
+    endTime: new Date('2024-01-01T18:00:00'),
+    hourWidth: 100,
+    eventHeight: 80,
+    onResizeStart: vi.fn(),
+  };
+
+  it('renders the resource name', () => {
+    render(<ResourceRow {...defaultProps} />);
+    expect(screen.getByText('Test Resource')).toBeInTheDocument();
+  });
+
+  it('renders all events', () => {
+    render(<ResourceRow {...defaultProps} />);
+    expect(screen.getByText('Event 1')).toBeInTheDocument();
+    expect(screen.getByText('Event 2')).toBeInTheDocument();
+  });
+
+  it('renders with no events', () => {
+    render(<ResourceRow {...defaultProps} events={[]} />);
+    expect(screen.getByText('Test Resource')).toBeInTheDocument();
+    expect(screen.queryByText('Event 1')).not.toBeInTheDocument();
+  });
+
+  it('applies sticky positioning to resource name column', () => {
+    const { container } = render(<ResourceRow {...defaultProps} />);
+    const nameColumn = container.querySelector('.sticky');
+    expect(nameColumn).toBeInTheDocument();
+    expect(nameColumn).toHaveClass('left-0', 'z-10');
+  });
+
+  it('renders grid lines for each hour', () => {
+    const { container } = render(<ResourceRow {...defaultProps} />);
+    const gridLines = container.querySelectorAll('.border-r.border-gray-100');
+    // 10 hours from 8am to 6pm
+    expect(gridLines.length).toBe(10);
+  });
+
+  it('calculates correct row height based on events', () => {
+    // Test with overlapping events that require multiple lanes
+    const overlappingEvents: Event[] = [
+      {
+        id: 1,
+        resourceId: 1,
+        title: 'Event 1',
+        start: new Date('2024-01-01T10:00:00'),
+        end: new Date('2024-01-01T11:00:00'),
+      },
+      {
+        id: 2,
+        resourceId: 1,
+        title: 'Event 2',
+        start: new Date('2024-01-01T10:30:00'),
+        end: new Date('2024-01-01T11:30:00'),
+      },
+    ];
+
+    const { container } = render(
+      <ResourceRow {...defaultProps} events={overlappingEvents} />
+    );
+
+    const rowContent = container.querySelector('.relative.flex-grow');
+    // With 2 lanes and eventHeight of 80, expect height: (2 * 80) + 20 = 180
+    expect(rowContent?.parentElement).toHaveStyle({ height: expect.any(String) });
+  });
+
+  it('applies droppable area styling', () => {
+    const { container } = render(<ResourceRow {...defaultProps} />);
+    const droppableArea = container.querySelector('.relative.flex-grow');
+    expect(droppableArea).toHaveClass('transition-colors');
+  });
+
+  it('renders border between rows', () => {
+    const { container } = render(<ResourceRow {...defaultProps} />);
+    const row = container.querySelector('.flex.border-b');
+    expect(row).toHaveClass('border-gray-200');
+  });
+
+  it('applies hover effect to resource name', () => {
+    const { container } = render(<ResourceRow {...defaultProps} />);
+    const nameColumn = container.querySelector('.bg-gray-50');
+    expect(nameColumn).toHaveClass('group-hover:bg-gray-100', 'transition-colors');
+  });
+
+  it('calculates total width correctly', () => {
+    const { container } = render(<ResourceRow {...defaultProps} />);
+    const rowContent = container.querySelector('.relative.flex-grow');
+    // 10 hours * 100px = 1000px
+    expect(rowContent).toHaveStyle({ width: '1000px' });
+  });
+
+  it('positions events correctly within the row', () => {
+    const { container } = render(<ResourceRow {...defaultProps} />);
+    const events = container.querySelectorAll('.absolute.rounded-b');
+    expect(events.length).toBe(2);
+  });
+
+  it('renders resource name with fixed width', () => {
+    const { container } = render(<ResourceRow {...defaultProps} />);
+    const nameColumn = screen.getByText('Test Resource').closest('.w-48');
+    expect(nameColumn).toBeInTheDocument();
+    expect(nameColumn).toHaveClass('flex-shrink-0');
+  });
+
+  it('handles single event correctly', () => {
+    const singleEvent: Event[] = [
+      {
+        id: 1,
+        resourceId: 1,
+        title: 'Single Event',
+        start: new Date('2024-01-01T10:00:00'),
+        end: new Date('2024-01-01T11:00:00'),
+      },
+    ];
+
+    render(<ResourceRow {...defaultProps} events={singleEvent} />);
+    expect(screen.getByText('Single Event')).toBeInTheDocument();
+  });
+
+  it('passes resize handler to events', () => {
+    const onResizeStart = vi.fn();
+    render(<ResourceRow {...defaultProps} onResizeStart={onResizeStart} />);
+    // Events should be rendered with the resize handler passed down
+    const resizeHandles = document.querySelectorAll('.cursor-ns-resize');
+    expect(resizeHandles.length).toBeGreaterThan(0);
+  });
+
+  it('applies correct event height to draggable events', () => {
+    const { container } = render(<ResourceRow {...defaultProps} eventHeight={100} />);
+    const events = container.querySelectorAll('.absolute.rounded-b');
+    // Each event should have height of eventHeight - 4 = 96px
+    events.forEach(event => {
+      expect(event).toHaveStyle({ height: '96px' });
+    });
+  });
+
+  it('handles different hour widths', () => {
+    const { container } = render(<ResourceRow {...defaultProps} hourWidth={150} />);
+    const rowContent = container.querySelector('.relative.flex-grow');
+    // 10 hours * 150px = 1500px
+    expect(rowContent).toHaveStyle({ width: '1500px' });
+  });
+
+  it('renders grid lines with correct width', () => {
+    const { container } = render(<ResourceRow {...defaultProps} hourWidth={120} />);
+    const gridLine = container.querySelector('.border-r.border-gray-100');
+    expect(gridLine).toHaveStyle({ width: '120px' });
+  });
+
+  it('calculates layout for overlapping events', () => {
+    const overlappingEvents: Event[] = [
+      {
+        id: 1,
+        resourceId: 1,
+        title: 'Event 1',
+        start: new Date('2024-01-01T10:00:00'),
+        end: new Date('2024-01-01T12:00:00'),
+      },
+      {
+        id: 2,
+        resourceId: 1,
+        title: 'Event 2',
+        start: new Date('2024-01-01T11:00:00'),
+        end: new Date('2024-01-01T13:00:00'),
+      },
+      {
+        id: 3,
+        resourceId: 1,
+        title: 'Event 3',
+        start: new Date('2024-01-01T11:30:00'),
+        end: new Date('2024-01-01T13:30:00'),
+      },
+    ];
+
+    render(<ResourceRow {...defaultProps} events={overlappingEvents} />);
+    // All three events should be rendered
+    expect(screen.getByText('Event 1')).toBeInTheDocument();
+    expect(screen.getByText('Event 2')).toBeInTheDocument();
+    expect(screen.getByText('Event 3')).toBeInTheDocument();
+  });
+
+  it('sets droppable id with resource id', () => {
+    const { container } = render(<ResourceRow {...defaultProps} resourceId={42} />);
+    // The droppable area should have the resource id in its data
+    const droppableArea = container.querySelector('.relative.flex-grow');
+    expect(droppableArea).toBeInTheDocument();
+  });
+});

frontend/src/components/Timeline/__tests__/TimelineRow.test.tsx

@@ -0,0 +1,276 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import TimelineRow from '../TimelineRow';
+import { Event } from '../../../lib/layoutAlgorithm';
+
+// Mock DnD Kit
+vi.mock('@dnd-kit/core', () => ({
+  DndContext: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+  useDroppable: vi.fn(() => ({
+    setNodeRef: vi.fn(),
+    isOver: false,
+  })),
+  useDraggable: vi.fn(() => ({
+    attributes: {},
+    listeners: {},
+    setNodeRef: vi.fn(),
+    transform: null,
+    isDragging: false,
+  })),
+}));
+
+vi.mock('@dnd-kit/utilities', () => ({
+  CSS: {
+    Translate: {
+      toString: (transform: any) => transform ? `translate3d(${transform.x}px, ${transform.y}px, 0)` : undefined,
+    },
+  },
+}));
+
+describe('TimelineRow', () => {
+  const mockEvents: Event[] = [
+    {
+      id: 1,
+      resourceId: 1,
+      title: 'Event 1',
+      serviceName: 'Service 1',
+      start: new Date('2024-01-01T10:00:00'),
+      end: new Date('2024-01-01T11:00:00'),
+      status: 'CONFIRMED',
+      isPaid: false,
+    },
+    {
+      id: 2,
+      resourceId: 1,
+      title: 'Event 2',
+      serviceName: 'Service 2',
+      start: new Date('2024-01-01T14:00:00'),
+      end: new Date('2024-01-01T15:00:00'),
+      status: 'SCHEDULED',
+      isPaid: true,
+    },
+  ];
+
+  const defaultProps = {
+    resourceId: 1,
+    events: mockEvents,
+    startTime: new Date('2024-01-01T08:00:00'),
+    endTime: new Date('2024-01-01T18:00:00'),
+    hourWidth: 100,
+    eventHeight: 80,
+    height: 100,
+    onResizeStart: vi.fn(),
+  };
+
+  it('renders all events', () => {
+    render(<TimelineRow {...defaultProps} />);
+    expect(screen.getByText('Event 1')).toBeInTheDocument();
+    expect(screen.getByText('Event 2')).toBeInTheDocument();
+  });
+
+  it('renders event service names', () => {
+    render(<TimelineRow {...defaultProps} />);
+    expect(screen.getByText('Service 1')).toBeInTheDocument();
+    expect(screen.getByText('Service 2')).toBeInTheDocument();
+  });
+
+  it('renders with no events', () => {
+    render(<TimelineRow {...defaultProps} events={[]} />);
+    expect(screen.queryByText('Event 1')).not.toBeInTheDocument();
+  });
+
+  it('applies correct height from prop', () => {
+    const { container } = render(<TimelineRow {...defaultProps} height={150} />);
+    const row = container.querySelector('.relative.border-b');
+    expect(row).toHaveStyle({ height: '150px' });
+  });
+
+  it('calculates total width correctly', () => {
+    const { container } = render(<TimelineRow {...defaultProps} />);
+    const row = container.querySelector('.relative.border-b');
+    // 10 hours * 100px = 1000px
+    expect(row).toHaveStyle({ width: '1000px' });
+  });
+
+  it('renders grid lines for each hour', () => {
+    const { container } = render(<TimelineRow {...defaultProps} />);
+    const gridLines = container.querySelectorAll('.border-r.border-gray-100');
+    // 10 hours from 8am to 6pm
+    expect(gridLines.length).toBe(10);
+  });
+
+  it('applies droppable area styling', () => {
+    const { container } = render(<TimelineRow {...defaultProps} />);
+    const row = container.querySelector('.relative.border-b');
+    expect(row).toHaveClass('transition-colors', 'group');
+  });
+
+  it('renders border with dark mode support', () => {
+    const { container } = render(<TimelineRow {...defaultProps} />);
+    const row = container.querySelector('.relative.border-b');
+    expect(row).toHaveClass('border-gray-200', 'dark:border-gray-700');
+  });
+
+  it('handles different hour widths', () => {
+    const { container } = render(<TimelineRow {...defaultProps} hourWidth={150} />);
+    const row = container.querySelector('.relative.border-b');
+    // 10 hours * 150px = 1500px
+    expect(row).toHaveStyle({ width: '1500px' });
+  });
+
+  it('renders grid lines with correct width', () => {
+    const { container } = render(<TimelineRow {...defaultProps} hourWidth={120} />);
+    const gridLine = container.querySelector('.border-r.border-gray-100');
+    expect(gridLine).toHaveStyle({ width: '120px' });
+  });
+
+  it('positions events correctly within the row', () => {
+    const { container } = render(<TimelineRow {...defaultProps} />);
+    const events = container.querySelectorAll('.absolute.rounded-b');
+    expect(events.length).toBe(2);
+  });
+
+  it('passes event status to draggable events', () => {
+    render(<TimelineRow {...defaultProps} />);
+    // Events should render with their status (visible in the DOM)
+    expect(screen.getByText('Event 1')).toBeInTheDocument();
+    expect(screen.getByText('Event 2')).toBeInTheDocument();
+  });
+
+  it('passes isPaid prop to draggable events', () => {
+    const { container } = render(<TimelineRow {...defaultProps} />);
+    // Second event is paid, should have green border
+    const events = container.querySelectorAll('.absolute.rounded-b');
+    expect(events.length).toBe(2);
+  });
+
+  it('passes resize handler to events', () => {
+    const onResizeStart = vi.fn();
+    render(<TimelineRow {...defaultProps} onResizeStart={onResizeStart} />);
+    // Events should be rendered with the resize handler passed down
+    const resizeHandles = document.querySelectorAll('.cursor-ns-resize');
+    expect(resizeHandles.length).toBeGreaterThan(0);
+  });
+
+  it('calculates layout for overlapping events', () => {
+    const overlappingEvents: Event[] = [
+      {
+        id: 1,
+        resourceId: 1,
+        title: 'Event 1',
+        start: new Date('2024-01-01T10:00:00'),
+        end: new Date('2024-01-01T12:00:00'),
+      },
+      {
+        id: 2,
+        resourceId: 1,
+        title: 'Event 2',
+        start: new Date('2024-01-01T11:00:00'),
+        end: new Date('2024-01-01T13:00:00'),
+      },
+      {
+        id: 3,
+        resourceId: 1,
+        title: 'Event 3',
+        start: new Date('2024-01-01T11:30:00'),
+        end: new Date('2024-01-01T13:30:00'),
+      },
+    ];
+
+    render(<TimelineRow {...defaultProps} events={overlappingEvents} />);
+    // All three events should be rendered
+    expect(screen.getByText('Event 1')).toBeInTheDocument();
+    expect(screen.getByText('Event 2')).toBeInTheDocument();
+    expect(screen.getByText('Event 3')).toBeInTheDocument();
+  });
+
+  it('applies correct event height to draggable events', () => {
+    const { container } = render(<TimelineRow {...defaultProps} eventHeight={100} />);
+    const events = container.querySelectorAll('.absolute.rounded-b');
+    // Each event should have height of eventHeight - 4 = 96px
+    events.forEach(event => {
+      expect(event).toHaveStyle({ height: '96px' });
+    });
+  });
+
+  it('handles single event correctly', () => {
+    const singleEvent: Event[] = [
+      {
+        id: 1,
+        resourceId: 1,
+        title: 'Single Event',
+        start: new Date('2024-01-01T10:00:00'),
+        end: new Date('2024-01-01T11:00:00'),
+      },
+    ];
+
+    render(<TimelineRow {...defaultProps} events={singleEvent} />);
+    expect(screen.getByText('Single Event')).toBeInTheDocument();
+  });
+
+  it('renders grid with pointer-events-none', () => {
+    const { container } = render(<TimelineRow {...defaultProps} />);
+    const gridContainer = container.querySelector('.pointer-events-none.flex');
+    expect(gridContainer).toBeInTheDocument();
+    expect(gridContainer).toHaveClass('absolute', 'inset-0');
+  });
+
+  it('applies dark mode styling to grid lines', () => {
+    const { container } = render(<TimelineRow {...defaultProps} />);
+    const gridLine = container.querySelector('.border-r');
+    expect(gridLine).toHaveClass('dark:border-gray-700/50');
+  });
+
+  it('sets droppable id with resource id', () => {
+    const { container } = render(<TimelineRow {...defaultProps} resourceId={42} />);
+    // The droppable area should have the resource id in its data
+    const droppableArea = container.querySelector('.relative.border-b');
+    expect(droppableArea).toBeInTheDocument();
+  });
+
+  it('renders events with correct top positioning based on lane', () => {
+    const { container } = render(<TimelineRow {...defaultProps} />);
+    const events = container.querySelectorAll('.absolute.rounded-b');
+    // Events should be positioned with top: (laneIndex * eventHeight) + 10
+    expect(events.length).toBe(2);
+  });
+
+  it('handles events without service name', () => {
+    const eventsNoService: Event[] = [
+      {
+        id: 1,
+        resourceId: 1,
+        title: 'Event Without Service',
+        start: new Date('2024-01-01T10:00:00'),
+        end: new Date('2024-01-01T11:00:00'),
+      },
+    ];
+
+    render(<TimelineRow {...defaultProps} events={eventsNoService} />);
+    expect(screen.getByText('Event Without Service')).toBeInTheDocument();
+  });
+
+  it('handles events without status', () => {
+    const eventsNoStatus: Event[] = [
+      {
+        id: 1,
+        resourceId: 1,
+        title: 'Event Without Status',
+        start: new Date('2024-01-01T10:00:00'),
+        end: new Date('2024-01-01T11:00:00'),
+      },
+    ];
+
+    render(<TimelineRow {...defaultProps} events={eventsNoStatus} />);
+    expect(screen.getByText('Event Without Status')).toBeInTheDocument();
+  });
+
+  it('memoizes event layout calculation', () => {
+    const { rerender } = render(<TimelineRow {...defaultProps} />);
+    expect(screen.getByText('Event 1')).toBeInTheDocument();
+
+    // Rerender with same events
+    rerender(<TimelineRow {...defaultProps} />);
+    expect(screen.getByText('Event 1')).toBeInTheDocument();
+  });
+});

frontend/src/components/__tests__/ConnectOnboarding.test.tsx

@@ -0,0 +1,812 @@
+/**
+ * Tests for ConnectOnboarding component
+ *
+ * Tests the Stripe Connect onboarding component for paid-tier businesses.
+ * Covers:
+ * - Rendering different states (active, onboarding, needs onboarding)
+ * - Account details display
+ * - User interactions (start onboarding, refresh link)
+ * - Error handling
+ * - Loading states
+ * - Account type labels
+ * - Window location redirects
+ */
+
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import React from 'react';
+import ConnectOnboarding from '../ConnectOnboarding';
+import { ConnectAccountInfo } from '../../api/payments';
+
+// Mock hooks
+const mockUseConnectOnboarding = vi.fn();
+const mockUseRefreshConnectLink = vi.fn();
+
+vi.mock('../../hooks/usePayments', () => ({
+  useConnectOnboarding: () => mockUseConnectOnboarding(),
+  useRefreshConnectLink: () => mockUseRefreshConnectLink(),
+}));
+
+// Mock react-i18next
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string, params?: Record<string, unknown>) => {
+      const translations: Record<string, string> = {
+        'payments.stripeConnected': 'Stripe Connected',
+        'payments.stripeConnectedDesc': 'Your Stripe account is connected and ready to accept payments',
+        'payments.accountDetails': 'Account Details',
+        'payments.accountType': 'Account Type',
+        'payments.status': 'Status',
+        'payments.charges': 'Charges',
+        'payments.payouts': 'Payouts',
+        'payments.enabled': 'Enabled',
+        'payments.disabled': 'Disabled',
+        'payments.accountId': 'Account ID',
+        'payments.completeOnboarding': 'Complete Onboarding',
+        'payments.onboardingIncomplete': 'Please complete your Stripe account setup to accept payments',
+        'payments.continueOnboarding': 'Continue Onboarding',
+        'payments.connectWithStripe': 'Connect with Stripe',
+        'payments.tierPaymentDescription': `Connect your Stripe account to accept payments with your ${params?.tier} plan`,
+        'payments.securePaymentProcessing': 'Secure payment processing',
+        'payments.automaticPayouts': 'Automatic payouts to your bank',
+        'payments.pciCompliance': 'PCI compliance handled for you',
+        'payments.failedToStartOnboarding': 'Failed to start onboarding',
+        'payments.failedToRefreshLink': 'Failed to refresh link',
+        'payments.openStripeDashboard': 'Open Stripe Dashboard',
+        'payments.standardConnect': 'Standard',
+        'payments.expressConnect': 'Express',
+        'payments.customConnect': 'Custom',
+        'payments.connect': 'Connect',
+      };
+      return translations[key] || key;
+    },
+  }),
+}));
+
+// Test data factory
+const createMockConnectAccount = (
+  overrides?: Partial<ConnectAccountInfo>
+): ConnectAccountInfo => ({
+  id: 1,
+  business: 1,
+  business_name: 'Test Business',
+  business_subdomain: 'testbiz',
+  stripe_account_id: 'acct_test123',
+  account_type: 'standard',
+  status: 'active',
+  charges_enabled: true,
+  payouts_enabled: true,
+  details_submitted: true,
+  onboarding_complete: true,
+  onboarding_link: null,
+  onboarding_link_expires_at: null,
+  is_onboarding_link_valid: false,
+  created_at: '2024-01-01T00:00:00Z',
+  updated_at: '2024-01-01T00:00:00Z',
+  ...overrides,
+});
+
+// Helper to wrap component with providers
+const createWrapper = () => {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: { retry: false },
+      mutations: { retry: false },
+    },
+  });
+  return ({ children }: { children: React.ReactNode }) => (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  );
+};
+
+describe('ConnectOnboarding', () => {
+  const mockMutateAsync = vi.fn();
+  let originalLocation: Location;
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+
+    // Save original location
+    originalLocation = window.location;
+
+    // Mock window.location
+    delete (window as any).location;
+    window.location = {
+      ...originalLocation,
+      origin: 'http://testbiz.lvh.me:5173',
+      href: 'http://testbiz.lvh.me:5173/payments',
+    } as Location;
+
+    mockUseConnectOnboarding.mockReturnValue({
+      mutateAsync: mockMutateAsync,
+      isPending: false,
+    });
+
+    mockUseRefreshConnectLink.mockReturnValue({
+      mutateAsync: mockMutateAsync,
+      isPending: false,
+    });
+  });
+
+  afterEach(() => {
+    // Restore original location
+    window.location = originalLocation;
+  });
+
+  describe('Active Account State', () => {
+    it('should render active status when account is active and charges enabled', () => {
+      const account = createMockConnectAccount({
+        status: 'active',
+        charges_enabled: true,
+      });
+
+      render(
+        <ConnectOnboarding connectAccount={account} tier="Professional" />,
+        { wrapper: createWrapper() }
+      );
+
+      expect(screen.getByText('Stripe Connected')).toBeInTheDocument();
+      expect(screen.getByText(/Your Stripe account is connected/)).toBeInTheDocument();
+    });
+
+    it('should display account details for active account', () => {
+      const account = createMockConnectAccount({
+        account_type: 'express',
+        status: 'active',
+        stripe_account_id: 'acct_test456',
+      });
+
+      render(
+        <ConnectOnboarding connectAccount={account} tier="Professional" />,
+        { wrapper: createWrapper() }
+      );
+
+      expect(screen.getByText('Account Details')).toBeInTheDocument();
+      expect(screen.getByText('Express')).toBeInTheDocument();
+      expect(screen.getByText('active')).toBeInTheDocument();
+      expect(screen.getByText('acct_test456')).toBeInTheDocument();
+    });
+
+    it('should show enabled charges and payouts', () => {
+      const account = createMockConnectAccount({
+        charges_enabled: true,
+        payouts_enabled: true,
+      });
+
+      render(
+        <ConnectOnboarding connectAccount={account} tier="Professional" />,
+        { wrapper: createWrapper() }
+      );
+
+      const enabledLabels = screen.getAllByText('Enabled');
+      expect(enabledLabels).toHaveLength(2); // Charges and Payouts
+    });
+
+    it('should show disabled charges and payouts', () => {
+      const account = createMockConnectAccount({
+        status: 'restricted',
+        charges_enabled: false,
+        payouts_enabled: false,
+      });
+
+      render(
+        <ConnectOnboarding connectAccount={account} tier="Professional" />,
+        { wrapper: createWrapper() }
+      );
+
+      const disabledLabels = screen.getAllByText('Disabled');
+      expect(disabledLabels).toHaveLength(2); // Charges and Payouts
+    });
+
+    it('should show Stripe dashboard link when active', () => {
+      const account = createMockConnectAccount({
+        status: 'active',
+        charges_enabled: true,
+      });
+
+      render(
+        <ConnectOnboarding connectAccount={account} tier="Professional" />,
+        { wrapper: createWrapper() }
+      );
+
+      const dashboardLink = screen.getByText('Open Stripe Dashboard');
+      expect(dashboardLink).toBeInTheDocument();
+      expect(dashboardLink.closest('a')).toHaveAttribute(
+        'href',
+        'https://dashboard.stripe.com'
+      );
+      expect(dashboardLink.closest('a')).toHaveAttribute('target', '_blank');
+    });
+  });
+
+  describe('Account Type Labels', () => {
+    it('should display standard account type', () => {
+      const account = createMockConnectAccount({ account_type: 'standard' });
+
+      render(
+        <ConnectOnboarding connectAccount={account} tier="Professional" />,
+        { wrapper: createWrapper() }
+      );
+
+      expect(screen.getByText('Standard')).toBeInTheDocument();
+    });
+
+    it('should display express account type', () => {
+      const account = createMockConnectAccount({ account_type: 'express' });
+
+      render(
+        <ConnectOnboarding connectAccount={account} tier="Professional" />,
+        { wrapper: createWrapper() }
+      );
+
+      expect(screen.getByText('Express')).toBeInTheDocument();
+    });
+
+    it('should display custom account type', () => {
+      const account = createMockConnectAccount({ account_type: 'custom' });
+
+      render(
+        <ConnectOnboarding connectAccount={account} tier="Professional" />,
+        { wrapper: createWrapper() }
+      );
+
+      expect(screen.getByText('Custom')).toBeInTheDocument();
+    });
+  });
+
+  describe('Account Status Display', () => {
+    it('should show active status with green styling', () => {
+      const account = createMockConnectAccount({ status: 'active' });
+
+      const { container } = render(
+        <ConnectOnboarding connectAccount={account} tier="Professional" />,
+        { wrapper: createWrapper() }
+      );
+
+      const statusBadge = screen.getByText('active');
+      expect(statusBadge).toHaveClass('bg-green-100', 'text-green-800');
+    });
+
+    it('should show onboarding status with yellow styling', () => {
+      const account = createMockConnectAccount({ status: 'onboarding' });
+
+      const { container } = render(
+        <ConnectOnboarding connectAccount={account} tier="Professional" />,
+        { wrapper: createWrapper() }
+      );
+
+      const statusBadge = screen.getByText('onboarding');
+      expect(statusBadge).toHaveClass('bg-yellow-100', 'text-yellow-800');
+    });
+
+    it('should show restricted status with red styling', () => {
+      const account = createMockConnectAccount({ status: 'restricted' });
+
+      const { container } = render(
+        <ConnectOnboarding connectAccount={account} tier="Professional" />,
+        { wrapper: createWrapper() }
+      );
+
+      const statusBadge = screen.getByText('restricted');
+      expect(statusBadge).toHaveClass('bg-red-100', 'text-red-800');
+    });
+  });
+
+  describe('Onboarding in Progress State', () => {
+    it('should show onboarding warning when status is onboarding', () => {
+      const account = createMockConnectAccount({
+        status: 'onboarding',
+        onboarding_complete: false,
+      });
+
+      render(
+        <ConnectOnboarding connectAccount={account} tier="Professional" />,
+        { wrapper: createWrapper() }
+      );
+
+      expect(screen.getByText('Complete Onboarding')).toBeInTheDocument();
+      expect(screen.getByText(/Please complete your Stripe account setup/)).toBeInTheDocument();
+    });
+
+    it('should show onboarding warning when onboarding_complete is false', () => {
+      const account = createMockConnectAccount({
+        status: 'active',
+        onboarding_complete: false,
+      });
+
+      render(
+        <ConnectOnboarding connectAccount={account} tier="Professional" />,
+        { wrapper: createWrapper() }
+      );
+
+      expect(screen.getByText('Complete Onboarding')).toBeInTheDocument();
+    });
+
+    it('should render continue onboarding button', () => {
+      const account = createMockConnectAccount({
+        status: 'onboarding',
+        onboarding_complete: false,
+      });
+
+      render(
+        <ConnectOnboarding connectAccount={account} tier="Professional" />,
+        { wrapper: createWrapper() }
+      );
+
+      const button = screen.getByRole('button', { name: /continue onboarding/i });
+      expect(button).toBeInTheDocument();
+    });
+
+    it('should call refresh link mutation when continue button clicked', async () => {
+      const account = createMockConnectAccount({
+        status: 'onboarding',
+        onboarding_complete: false,
+      });
+
+      mockMutateAsync.mockResolvedValue({
+        url: 'https://connect.stripe.com/setup/test',
+      });
+
+      render(
+        <ConnectOnboarding connectAccount={account} tier="Professional" />,
+        { wrapper: createWrapper() }
+      );
+
+      const button = screen.getByRole('button', { name: /continue onboarding/i });
+      fireEvent.click(button);
+
+      await waitFor(() => {
+        expect(mockMutateAsync).toHaveBeenCalledWith({
+          refreshUrl: 'http://testbiz.lvh.me:5173/payments?connect=refresh',
+          returnUrl: 'http://testbiz.lvh.me:5173/payments?connect=complete',
+        });
+      });
+    });
+
+    it('should redirect to Stripe URL after refresh link success', async () => {
+      const account = createMockConnectAccount({
+        status: 'onboarding',
+        onboarding_complete: false,
+      });
+
+      const stripeUrl = 'https://connect.stripe.com/setup/test123';
+      mockMutateAsync.mockResolvedValue({ url: stripeUrl });
+
+      render(
+        <ConnectOnboarding connectAccount={account} tier="Professional" />,
+        { wrapper: createWrapper() }
+      );
+
+      const button = screen.getByRole('button', { name: /continue onboarding/i });
+      fireEvent.click(button);
+
+      await waitFor(() => {
+        expect(window.location.href).toBe(stripeUrl);
+      });
+    });
+
+    it('should show loading state while refreshing link', () => {
+      const account = createMockConnectAccount({
+        status: 'onboarding',
+        onboarding_complete: false,
+      });
+
+      mockUseRefreshConnectLink.mockReturnValue({
+        mutateAsync: mockMutateAsync,
+        isPending: true,
+      });
+
+      render(
+        <ConnectOnboarding connectAccount={account} tier="Professional" />,
+        { wrapper: createWrapper() }
+      );
+
+      const button = screen.getByRole('button', { name: /continue onboarding/i });
+      expect(button).toBeDisabled();
+    });
+  });
+
+  describe('Needs Onboarding State', () => {
+    it('should show onboarding info when no account exists', () => {
+      render(
+        <ConnectOnboarding connectAccount={null} tier="Professional" />,
+        { wrapper: createWrapper() }
+      );
+
+      expect(screen.getAllByText('Connect with Stripe').length).toBeGreaterThan(0);
+      expect(
+        screen.getByText(/Connect your Stripe account to accept payments with your Professional plan/)
+      ).toBeInTheDocument();
+    });
+
+    it('should show feature list when no account exists', () => {
+      render(
+        <ConnectOnboarding connectAccount={null} tier="Professional" />,
+        { wrapper: createWrapper() }
+      );
+
+      expect(screen.getByText('Secure payment processing')).toBeInTheDocument();
+      expect(screen.getByText('Automatic payouts to your bank')).toBeInTheDocument();
+      expect(screen.getByText('PCI compliance handled for you')).toBeInTheDocument();
+    });
+
+    it('should render start onboarding button when no account', () => {
+      render(
+        <ConnectOnboarding connectAccount={null} tier="Professional" />,
+        { wrapper: createWrapper() }
+      );
+
+      const buttons = screen.getAllByRole('button', { name: /connect with stripe/i });
+      expect(buttons.length).toBeGreaterThan(0);
+    });
+
+    it('should call onboarding mutation when start button clicked', async () => {
+      mockMutateAsync.mockResolvedValue({
+        url: 'https://connect.stripe.com/express/oauth',
+      });
+
+      render(
+        <ConnectOnboarding connectAccount={null} tier="Professional" />,
+        { wrapper: createWrapper() }
+      );
+
+      const button = screen.getByRole('button', { name: /connect with stripe/i });
+      fireEvent.click(button);
+
+      await waitFor(() => {
+        expect(mockMutateAsync).toHaveBeenCalledWith({
+          refreshUrl: 'http://testbiz.lvh.me:5173/payments?connect=refresh',
+          returnUrl: 'http://testbiz.lvh.me:5173/payments?connect=complete',
+        });
+      });
+    });
+
+    it('should redirect to Stripe URL after onboarding start', async () => {
+      const stripeUrl = 'https://connect.stripe.com/express/oauth/authorize';
+      mockMutateAsync.mockResolvedValue({ url: stripeUrl });
+
+      render(
+        <ConnectOnboarding connectAccount={null} tier="Professional" />,
+        { wrapper: createWrapper() }
+      );
+
+      const button = screen.getByRole('button', { name: /connect with stripe/i });
+      fireEvent.click(button);
+
+      await waitFor(() => {
+        expect(window.location.href).toBe(stripeUrl);
+      });
+    });
+
+    it('should show loading state while starting onboarding', () => {
+      mockUseConnectOnboarding.mockReturnValue({
+        mutateAsync: mockMutateAsync,
+        isPending: true,
+      });
+
+      const { container } = render(
+        <ConnectOnboarding connectAccount={null} tier="Professional" />,
+        { wrapper: createWrapper() }
+      );
+
+      // Find the button by its Stripe brand color class
+      const button = container.querySelector('button.bg-\\[\\#635BFF\\]');
+      expect(button).toBeInTheDocument();
+      expect(button).toBeDisabled();
+    });
+  });
+
+  describe('Error Handling', () => {
+    it('should show error message when onboarding fails', async () => {
+      mockMutateAsync.mockRejectedValue({
+        response: {
+          data: {
+            error: 'Stripe account creation failed',
+          },
+        },
+      });
+
+      render(
+        <ConnectOnboarding connectAccount={null} tier="Professional" />,
+        { wrapper: createWrapper() }
+      );
+
+      const button = screen.getByRole('button', { name: /connect with stripe/i });
+      fireEvent.click(button);
+
+      await waitFor(() => {
+        expect(screen.getByText('Stripe account creation failed')).toBeInTheDocument();
+      });
+    });
+
+    it('should show default error message when no error detail provided', async () => {
+      mockMutateAsync.mockRejectedValue(new Error('Network error'));
+
+      render(
+        <ConnectOnboarding connectAccount={null} tier="Professional" />,
+        { wrapper: createWrapper() }
+      );
+
+      const button = screen.getByRole('button', { name: /connect with stripe/i });
+      fireEvent.click(button);
+
+      await waitFor(() => {
+        expect(screen.getByText('Failed to start onboarding')).toBeInTheDocument();
+      });
+    });
+
+    it('should show error when refresh link fails', async () => {
+      const account = createMockConnectAccount({
+        status: 'onboarding',
+        onboarding_complete: false,
+      });
+
+      mockMutateAsync.mockRejectedValue({
+        response: {
+          data: {
+            error: 'Link expired',
+          },
+        },
+      });
+
+      render(
+        <ConnectOnboarding connectAccount={account} tier="Professional" />,
+        { wrapper: createWrapper() }
+      );
+
+      const button = screen.getByRole('button', { name: /continue onboarding/i });
+      fireEvent.click(button);
+
+      await waitFor(() => {
+        expect(screen.getByText('Link expired')).toBeInTheDocument();
+      });
+    });
+
+    it('should clear previous error when starting new action', async () => {
+      mockMutateAsync.mockRejectedValueOnce({
+        response: {
+          data: {
+            error: 'First error',
+          },
+        },
+      });
+
+      render(
+        <ConnectOnboarding connectAccount={null} tier="Professional" />,
+        { wrapper: createWrapper() }
+      );
+
+      const button = screen.getByRole('button', { name: /connect with stripe/i });
+
+      // First click - causes error
+      fireEvent.click(button);
+      await waitFor(() => {
+        expect(screen.getByText('First error')).toBeInTheDocument();
+      });
+
+      // Second click - should clear error before mutation
+      mockMutateAsync.mockResolvedValue({ url: 'https://stripe.com' });
+      fireEvent.click(button);
+
+      // Error should eventually disappear (after mutation starts)
+      await waitFor(() => {
+        expect(screen.queryByText('First error')).not.toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Props Handling', () => {
+    it('should use tier in description', () => {
+      render(
+        <ConnectOnboarding connectAccount={null} tier="Premium" />,
+        { wrapper: createWrapper() }
+      );
+
+      expect(
+        screen.getByText(/Connect your Stripe account to accept payments with your Premium plan/)
+      ).toBeInTheDocument();
+    });
+
+    it('should call onSuccess callback when provided', async () => {
+      const onSuccess = vi.fn();
+      const account = createMockConnectAccount({
+        status: 'active',
+        charges_enabled: true,
+      });
+
+      render(
+        <ConnectOnboarding
+          connectAccount={account}
+          tier="Professional"
+          onSuccess={onSuccess}
+        />,
+        { wrapper: createWrapper() }
+      );
+
+      // onSuccess is not called in the current implementation
+      // This test documents the prop exists but isn't used
+      expect(onSuccess).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('Return URLs', () => {
+    it('should generate correct return URLs based on window location', async () => {
+      mockMutateAsync.mockResolvedValue({
+        url: 'https://stripe.com',
+      });
+
+      render(
+        <ConnectOnboarding connectAccount={null} tier="Professional" />,
+        { wrapper: createWrapper() }
+      );
+
+      const button = screen.getByRole('button', { name: /connect with stripe/i });
+      fireEvent.click(button);
+
+      await waitFor(() => {
+        expect(mockMutateAsync).toHaveBeenCalledWith({
+          refreshUrl: 'http://testbiz.lvh.me:5173/payments?connect=refresh',
+          returnUrl: 'http://testbiz.lvh.me:5173/payments?connect=complete',
+        });
+      });
+    });
+
+    it('should use same return URLs for both onboarding and refresh', async () => {
+      const account = createMockConnectAccount({
+        status: 'onboarding',
+        onboarding_complete: false,
+      });
+
+      mockMutateAsync.mockResolvedValue({
+        url: 'https://stripe.com',
+      });
+
+      const { rerender } = render(
+        <ConnectOnboarding connectAccount={null} tier="Professional" />,
+        { wrapper: createWrapper() }
+      );
+
+      // Test start onboarding
+      const startButton = screen.getByRole('button', { name: /connect with stripe/i });
+      fireEvent.click(startButton);
+
+      await waitFor(() => {
+        expect(mockMutateAsync).toHaveBeenCalledWith({
+          refreshUrl: 'http://testbiz.lvh.me:5173/payments?connect=refresh',
+          returnUrl: 'http://testbiz.lvh.me:5173/payments?connect=complete',
+        });
+      });
+
+      mockMutateAsync.mockClear();
+
+      // Test refresh link
+      rerender(
+        <ConnectOnboarding connectAccount={account} tier="Professional" />
+      );
+
+      const refreshButton = screen.getByRole('button', { name: /continue onboarding/i });
+      fireEvent.click(refreshButton);
+
+      await waitFor(() => {
+        expect(mockMutateAsync).toHaveBeenCalledWith({
+          refreshUrl: 'http://testbiz.lvh.me:5173/payments?connect=refresh',
+          returnUrl: 'http://testbiz.lvh.me:5173/payments?connect=complete',
+        });
+      });
+    });
+  });
+
+  describe('UI Elements', () => {
+    it('should have proper styling for active account banner', () => {
+      const account = createMockConnectAccount({
+        status: 'active',
+        charges_enabled: true,
+      });
+
+      const { container } = render(
+        <ConnectOnboarding connectAccount={account} tier="Professional" />,
+        { wrapper: createWrapper() }
+      );
+
+      const banner = container.querySelector('.bg-green-50');
+      expect(banner).toBeInTheDocument();
+      expect(banner).toHaveClass('border', 'border-green-200', 'rounded-lg');
+    });
+
+    it('should have proper styling for onboarding warning', () => {
+      const account = createMockConnectAccount({
+        status: 'onboarding',
+        onboarding_complete: false,
+      });
+
+      const { container } = render(
+        <ConnectOnboarding connectAccount={account} tier="Professional" />,
+        { wrapper: createWrapper() }
+      );
+
+      const warning = container.querySelector('.bg-yellow-50');
+      expect(warning).toBeInTheDocument();
+      expect(warning).toHaveClass('border', 'border-yellow-200', 'rounded-lg');
+    });
+
+    it('should have proper styling for start onboarding section', () => {
+      const { container } = render(
+        <ConnectOnboarding connectAccount={null} tier="Professional" />,
+        { wrapper: createWrapper() }
+      );
+
+      const infoBox = container.querySelector('.bg-blue-50');
+      expect(infoBox).toBeInTheDocument();
+      expect(infoBox).toHaveClass('border', 'border-blue-200', 'rounded-lg');
+    });
+
+    it('should have Stripe brand color on connect button', () => {
+      render(
+        <ConnectOnboarding connectAccount={null} tier="Professional" />,
+        { wrapper: createWrapper() }
+      );
+
+      const button = screen.getByRole('button', { name: /connect with stripe/i });
+      expect(button).toHaveClass('bg-[#635BFF]');
+    });
+  });
+
+  describe('Conditional Rendering', () => {
+    it('should not show active banner when charges disabled', () => {
+      const account = createMockConnectAccount({
+        status: 'active',
+        charges_enabled: false,
+      });
+
+      render(
+        <ConnectOnboarding connectAccount={account} tier="Professional" />,
+        { wrapper: createWrapper() }
+      );
+
+      expect(screen.queryByText('Stripe Connected')).not.toBeInTheDocument();
+    });
+
+    it('should not show Stripe dashboard link when not active', () => {
+      const account = createMockConnectAccount({
+        status: 'onboarding',
+        charges_enabled: false,
+      });
+
+      render(
+        <ConnectOnboarding connectAccount={account} tier="Professional" />,
+        { wrapper: createWrapper() }
+      );
+
+      expect(screen.queryByText('Open Stripe Dashboard')).not.toBeInTheDocument();
+    });
+
+    it('should show account details even when not fully active', () => {
+      const account = createMockConnectAccount({
+        status: 'restricted',
+        charges_enabled: false,
+      });
+
+      render(
+        <ConnectOnboarding connectAccount={account} tier="Professional" />,
+        { wrapper: createWrapper() }
+      );
+
+      expect(screen.getByText('Account Details')).toBeInTheDocument();
+    });
+
+    it('should not show onboarding warning when complete', () => {
+      const account = createMockConnectAccount({
+        status: 'active',
+        onboarding_complete: true,
+      });
+
+      render(
+        <ConnectOnboarding connectAccount={account} tier="Professional" />,
+        { wrapper: createWrapper() }
+      );
+
+      expect(screen.queryByText('Complete Onboarding')).not.toBeInTheDocument();
+    });
+  });
+});

frontend/src/components/__tests__/DevQuickLogin.test.tsx

@@ -0,0 +1,797 @@
+/**
+ * Unit tests for DevQuickLogin component
+ *
+ * Tests quick login functionality for development environment.
+ * Covers:
+ * - Environment checks (production vs development)
+ * - Component rendering (embedded vs floating)
+ * - User filtering (all, platform, business)
+ * - Quick login functionality
+ * - Subdomain redirects
+ * - API error handling
+ * - Loading states
+ * - Minimize/maximize toggle
+ */
+
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { DevQuickLogin } from '../DevQuickLogin';
+import * as apiClient from '../../api/client';
+import * as cookies from '../../utils/cookies';
+import * as domain from '../../utils/domain';
+
+// Mock modules
+vi.mock('../../api/client');
+vi.mock('../../utils/cookies');
+vi.mock('../../utils/domain');
+
+// Helper to wrap component with QueryClient
+const createWrapper = () => {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: { retry: false },
+      mutations: { retry: false },
+    },
+  });
+  return ({ children }: { children: React.ReactNode }) => (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  );
+};
+
+describe('DevQuickLogin', () => {
+  const mockPost = vi.fn();
+  const mockGet = vi.fn();
+  const mockSetCookie = vi.fn();
+  const mockGetBaseDomain = vi.fn();
+  const mockBuildSubdomainUrl = vi.fn();
+
+  // Store original values
+  const originalEnv = import.meta.env.PROD;
+  const originalLocation = window.location;
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+
+    // Mock API client
+    vi.mocked(apiClient).default = {
+      post: mockPost,
+      get: mockGet,
+    } as any;
+
+    // Mock cookie utilities
+    vi.mocked(cookies.setCookie).mockImplementation(mockSetCookie);
+
+    // Mock domain utilities
+    vi.mocked(domain.getBaseDomain).mockReturnValue('lvh.me');
+    vi.mocked(domain.buildSubdomainUrl).mockImplementation(
+      (subdomain, path) => `http://${subdomain}.lvh.me:5173${path}`
+    );
+
+    // Mock window.location
+    delete (window as any).location;
+    window.location = {
+      ...originalLocation,
+      hostname: 'platform.lvh.me',
+      port: '5173',
+      href: '',
+    } as any;
+
+    // Mock localStorage
+    const localStorageMock = {
+      getItem: vi.fn(),
+      setItem: vi.fn(),
+      removeItem: vi.fn(),
+      clear: vi.fn(),
+    };
+    Object.defineProperty(window, 'localStorage', {
+      value: localStorageMock,
+      writable: true,
+    });
+
+    // Mock alert
+    window.alert = vi.fn();
+
+    // Set development environment
+    (import.meta.env as any).PROD = false;
+  });
+
+  afterEach(() => {
+    // Restore environment
+    (import.meta.env as any).PROD = originalEnv;
+    window.location = originalLocation;
+  });
+
+  describe('Environment Checks', () => {
+    it('should not render in production environment', () => {
+      (import.meta.env as any).PROD = true;
+
+      const { container } = render(<DevQuickLogin />, { wrapper: createWrapper() });
+
+      expect(container.firstChild).toBeNull();
+      expect(screen.queryByText(/Quick Login/i)).not.toBeInTheDocument();
+    });
+
+    it('should render in development environment', () => {
+      (import.meta.env as any).PROD = false;
+
+      render(<DevQuickLogin />, { wrapper: createWrapper() });
+
+      expect(screen.getByText(/Quick Login \(Dev Only\)/i)).toBeInTheDocument();
+    });
+  });
+
+  describe('Component Rendering', () => {
+    it('should render as floating widget by default', () => {
+      const { container } = render(<DevQuickLogin />, { wrapper: createWrapper() });
+
+      const widget = container.firstChild as HTMLElement;
+      expect(widget).toHaveClass('fixed', 'bottom-4', 'right-4', 'z-50');
+    });
+
+    it('should render as embedded when embedded prop is true', () => {
+      const { container } = render(<DevQuickLogin embedded />, { wrapper: createWrapper() });
+
+      const widget = container.firstChild as HTMLElement;
+      expect(widget).toHaveClass('w-full', 'bg-gray-50');
+      expect(widget).not.toHaveClass('fixed');
+    });
+
+    it('should render minimize button when not embedded', () => {
+      render(<DevQuickLogin />, { wrapper: createWrapper() });
+
+      const minimizeButton = screen.getByText('×');
+      expect(minimizeButton).toBeInTheDocument();
+    });
+
+    it('should not render minimize button when embedded', () => {
+      render(<DevQuickLogin embedded />, { wrapper: createWrapper() });
+
+      const minimizeButton = screen.queryByText('×');
+      expect(minimizeButton).not.toBeInTheDocument();
+    });
+
+    it('should render all user buttons', () => {
+      render(<DevQuickLogin />, { wrapper: createWrapper() });
+
+      expect(screen.getByText('Platform Superuser')).toBeInTheDocument();
+      expect(screen.getByText('Platform Manager')).toBeInTheDocument();
+      expect(screen.getByText('Platform Sales')).toBeInTheDocument();
+      expect(screen.getByText('Platform Support')).toBeInTheDocument();
+      expect(screen.getByText('Business Owner')).toBeInTheDocument();
+      expect(screen.getByText('Staff (Full Access)')).toBeInTheDocument();
+      expect(screen.getByText('Staff (Limited)')).toBeInTheDocument();
+      expect(screen.getByText('Customer')).toBeInTheDocument();
+    });
+
+    it('should render password hint', () => {
+      render(<DevQuickLogin />, { wrapper: createWrapper() });
+
+      expect(screen.getByText(/Password for all:/i)).toBeInTheDocument();
+      expect(screen.getByText('test123')).toBeInTheDocument();
+    });
+
+    it('should render user roles as subtitles', () => {
+      render(<DevQuickLogin />, { wrapper: createWrapper() });
+
+      expect(screen.getByText('SUPERUSER')).toBeInTheDocument();
+      expect(screen.getByText('PLATFORM_MANAGER')).toBeInTheDocument();
+      expect(screen.getByText('TENANT_OWNER')).toBeInTheDocument();
+      expect(screen.getByText('CUSTOMER')).toBeInTheDocument();
+    });
+  });
+
+  describe('User Filtering', () => {
+    it('should show all users when filter is "all"', () => {
+      render(<DevQuickLogin filter="all" />, { wrapper: createWrapper() });
+
+      expect(screen.getByText('Platform Superuser')).toBeInTheDocument();
+      expect(screen.getByText('Business Owner')).toBeInTheDocument();
+      expect(screen.getByText('Customer')).toBeInTheDocument();
+    });
+
+    it('should show only platform users when filter is "platform"', () => {
+      render(<DevQuickLogin filter="platform" />, { wrapper: createWrapper() });
+
+      expect(screen.getByText('Platform Superuser')).toBeInTheDocument();
+      expect(screen.getByText('Platform Manager')).toBeInTheDocument();
+      expect(screen.queryByText('Business Owner')).not.toBeInTheDocument();
+      expect(screen.queryByText('Customer')).not.toBeInTheDocument();
+    });
+
+    it('should show only business users when filter is "business"', () => {
+      render(<DevQuickLogin filter="business" />, { wrapper: createWrapper() });
+
+      expect(screen.getByText('Business Owner')).toBeInTheDocument();
+      expect(screen.getByText('Staff (Full Access)')).toBeInTheDocument();
+      expect(screen.queryByText('Platform Superuser')).not.toBeInTheDocument();
+      expect(screen.queryByText('Customer')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Minimize/Maximize Toggle', () => {
+    it('should minimize when minimize button is clicked', () => {
+      render(<DevQuickLogin />, { wrapper: createWrapper() });
+
+      const minimizeButton = screen.getByText('×');
+      fireEvent.click(minimizeButton);
+
+      expect(screen.getByText('🔓 Quick Login')).toBeInTheDocument();
+      expect(screen.queryByText('Platform Superuser')).not.toBeInTheDocument();
+    });
+
+    it('should maximize when minimized widget is clicked', () => {
+      render(<DevQuickLogin />, { wrapper: createWrapper() });
+
+      // Minimize first
+      const minimizeButton = screen.getByText('×');
+      fireEvent.click(minimizeButton);
+
+      // Then maximize
+      const maximizeButton = screen.getByText('🔓 Quick Login');
+      fireEvent.click(maximizeButton);
+
+      expect(screen.getByText(/Quick Login \(Dev Only\)/i)).toBeInTheDocument();
+      expect(screen.getByText('Platform Superuser')).toBeInTheDocument();
+    });
+
+    it('should not show minimize toggle when embedded', () => {
+      render(<DevQuickLogin embedded />, { wrapper: createWrapper() });
+
+      // Should always show full widget
+      expect(screen.getByText('Platform Superuser')).toBeInTheDocument();
+
+      // No minimize button
+      expect(screen.queryByText('×')).not.toBeInTheDocument();
+      expect(screen.queryByText('🔓 Quick Login')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Quick Login Functionality', () => {
+    it('should call login API with correct credentials', async () => {
+      mockPost.mockResolvedValueOnce({
+        data: { access: 'test-token', refresh: 'refresh-token' },
+      });
+      mockGet.mockResolvedValueOnce({
+        data: {
+          role: 'superuser',
+          business_subdomain: null,
+        },
+      });
+
+      render(<DevQuickLogin />, { wrapper: createWrapper() });
+
+      const button = screen.getByText('Platform Superuser').parentElement!;
+      fireEvent.click(button);
+
+      await waitFor(() => {
+        expect(mockPost).toHaveBeenCalledWith('/auth/login/', {
+          email: 'superuser@platform.com',
+          password: 'test123',
+        });
+      });
+    });
+
+    it('should store token in cookie after successful login', async () => {
+      mockPost.mockResolvedValueOnce({
+        data: { access: 'test-token', refresh: 'refresh-token' },
+      });
+      mockGet.mockResolvedValueOnce({
+        data: {
+          role: 'superuser',
+          business_subdomain: null,
+        },
+      });
+
+      render(<DevQuickLogin />, { wrapper: createWrapper() });
+
+      const button = screen.getByText('Platform Superuser').parentElement!;
+      fireEvent.click(button);
+
+      await waitFor(() => {
+        expect(mockSetCookie).toHaveBeenCalledWith('access_token', 'test-token', 7);
+      });
+    });
+
+    it('should clear masquerade stack after login', async () => {
+      mockPost.mockResolvedValueOnce({
+        data: { access: 'test-token', refresh: 'refresh-token' },
+      });
+      mockGet.mockResolvedValueOnce({
+        data: {
+          role: 'superuser',
+          business_subdomain: null,
+        },
+      });
+
+      render(<DevQuickLogin />, { wrapper: createWrapper() });
+
+      const button = screen.getByText('Platform Superuser').parentElement!;
+      fireEvent.click(button);
+
+      await waitFor(() => {
+        expect(localStorage.removeItem).toHaveBeenCalledWith('masquerade_stack');
+      });
+    });
+
+    it('should fetch user data after login', async () => {
+      mockPost.mockResolvedValueOnce({
+        data: { access: 'test-token', refresh: 'refresh-token' },
+      });
+      mockGet.mockResolvedValueOnce({
+        data: {
+          role: 'superuser',
+          business_subdomain: null,
+        },
+      });
+
+      render(<DevQuickLogin />, { wrapper: createWrapper() });
+
+      const button = screen.getByText('Platform Superuser').parentElement!;
+      fireEvent.click(button);
+
+      await waitFor(() => {
+        expect(mockGet).toHaveBeenCalledWith('/auth/me/');
+      });
+    });
+  });
+
+  describe('Subdomain Redirects', () => {
+    it('should redirect platform users to platform subdomain', async () => {
+      mockPost.mockResolvedValueOnce({
+        data: { access: 'test-token', refresh: 'refresh-token' },
+      });
+      mockGet.mockResolvedValueOnce({
+        data: {
+          role: 'superuser',
+          business_subdomain: null,
+        },
+      });
+
+      // Mock current location as non-platform subdomain
+      window.location.hostname = 'demo.lvh.me';
+
+      render(<DevQuickLogin />, { wrapper: createWrapper() });
+
+      const button = screen.getByText('Platform Superuser').parentElement!;
+      fireEvent.click(button);
+
+      await waitFor(() => {
+        expect(window.location.href).toBe('http://platform.lvh.me:5173/dashboard');
+      });
+    });
+
+    it('should redirect business users to their subdomain', async () => {
+      mockPost.mockResolvedValueOnce({
+        data: { access: 'test-token', refresh: 'refresh-token' },
+      });
+      mockGet.mockResolvedValueOnce({
+        data: {
+          role: 'tenant_owner',
+          business_subdomain: 'demo',
+        },
+      });
+
+      // Mock current location as platform subdomain
+      window.location.hostname = 'platform.lvh.me';
+
+      render(<DevQuickLogin />, { wrapper: createWrapper() });
+
+      const button = screen.getByText('Business Owner').parentElement!;
+      fireEvent.click(button);
+
+      await waitFor(() => {
+        expect(window.location.href).toBe('http://demo.lvh.me:5173/dashboard');
+      });
+    });
+
+    it('should navigate to dashboard when already on correct subdomain', async () => {
+      mockPost.mockResolvedValueOnce({
+        data: { access: 'test-token', refresh: 'refresh-token' },
+      });
+      mockGet.mockResolvedValueOnce({
+        data: {
+          role: 'superuser',
+          business_subdomain: null,
+        },
+      });
+
+      // Already on platform subdomain
+      window.location.hostname = 'platform.lvh.me';
+
+      render(<DevQuickLogin />, { wrapper: createWrapper() });
+
+      const button = screen.getByText('Platform Superuser').parentElement!;
+      fireEvent.click(button);
+
+      await waitFor(() => {
+        expect(window.location.href).toBe('/dashboard');
+      });
+    });
+
+    it('should redirect platform_manager to platform subdomain', async () => {
+      mockPost.mockResolvedValueOnce({
+        data: { access: 'test-token', refresh: 'refresh-token' },
+      });
+      mockGet.mockResolvedValueOnce({
+        data: {
+          role: 'platform_manager',
+          business_subdomain: null,
+        },
+      });
+
+      window.location.hostname = 'demo.lvh.me';
+
+      render(<DevQuickLogin />, { wrapper: createWrapper() });
+
+      const button = screen.getByText('Platform Manager').parentElement!;
+      fireEvent.click(button);
+
+      await waitFor(() => {
+        expect(window.location.href).toBe('http://platform.lvh.me:5173/dashboard');
+      });
+    });
+
+    it('should redirect platform_support to platform subdomain', async () => {
+      mockPost.mockResolvedValueOnce({
+        data: { access: 'test-token', refresh: 'refresh-token' },
+      });
+      mockGet.mockResolvedValueOnce({
+        data: {
+          role: 'platform_support',
+          business_subdomain: null,
+        },
+      });
+
+      window.location.hostname = 'demo.lvh.me';
+
+      render(<DevQuickLogin />, { wrapper: createWrapper() });
+
+      const button = screen.getByText('Platform Support').parentElement!;
+      fireEvent.click(button);
+
+      await waitFor(() => {
+        expect(window.location.href).toBe('http://platform.lvh.me:5173/dashboard');
+      });
+    });
+  });
+
+  describe('Loading States', () => {
+    it('should show loading state on clicked button', async () => {
+      mockPost.mockImplementation(
+        () =>
+          new Promise((resolve) => {
+            setTimeout(() => resolve({ data: { access: 'token' } }), 100);
+          })
+      );
+
+      const { container } = render(<DevQuickLogin />, { wrapper: createWrapper() });
+
+      const buttons = container.querySelectorAll('button');
+      const button = Array.from(buttons).find((b) =>
+        b.textContent?.includes('Platform Superuser')
+      ) as HTMLButtonElement;
+      fireEvent.click(button);
+
+      await waitFor(() => {
+        expect(screen.getByText('Logging in...')).toBeInTheDocument();
+        expect(button.querySelector('.animate-spin')).toBeInTheDocument();
+      });
+    });
+
+    it('should disable all buttons during login', async () => {
+      mockPost.mockImplementation(
+        () =>
+          new Promise((resolve) => {
+            setTimeout(() => resolve({ data: { access: 'token' } }), 100);
+          })
+      );
+
+      const { container } = render(<DevQuickLogin />, { wrapper: createWrapper() });
+
+      const buttons = container.querySelectorAll('button');
+      const button = Array.from(buttons).find((b) =>
+        b.textContent?.includes('Platform Superuser')
+      ) as HTMLButtonElement;
+      fireEvent.click(button);
+
+      const allButtons = screen.getAllByRole('button').filter((b) => !b.textContent?.includes('×'));
+      allButtons.forEach((btn) => {
+        expect(btn).toBeDisabled();
+      });
+    });
+
+    it('should show loading spinner with correct styling', async () => {
+      mockPost.mockImplementation(
+        () =>
+          new Promise((resolve) => {
+            setTimeout(() => resolve({ data: { access: 'token' } }), 100);
+          })
+      );
+
+      const { container } = render(<DevQuickLogin />, { wrapper: createWrapper() });
+
+      const buttons = container.querySelectorAll('button');
+      const button = Array.from(buttons).find((b) =>
+        b.textContent?.includes('Platform Superuser')
+      ) as HTMLButtonElement;
+      fireEvent.click(button);
+
+      await waitFor(() => {
+        const spinner = button.querySelector('.animate-spin');
+        expect(spinner).toBeInTheDocument();
+        expect(spinner).toHaveClass('h-4', 'w-4');
+      });
+    });
+
+    it('should clear loading state after successful login', async () => {
+      mockPost.mockResolvedValueOnce({
+        data: { access: 'test-token', refresh: 'refresh-token' },
+      });
+      mockGet.mockResolvedValueOnce({
+        data: {
+          role: 'superuser',
+          business_subdomain: null,
+        },
+      });
+
+      render(<DevQuickLogin />, { wrapper: createWrapper() });
+
+      const button = screen.getByText('Platform Superuser').parentElement!;
+      fireEvent.click(button);
+
+      await waitFor(() => {
+        expect(screen.queryByText('Logging in...')).not.toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Error Handling', () => {
+    it('should show alert on login API failure', async () => {
+      const error = new Error('Invalid credentials');
+      mockPost.mockRejectedValueOnce(error);
+
+      render(<DevQuickLogin />, { wrapper: createWrapper() });
+
+      const button = screen.getByText('Platform Superuser').parentElement!;
+      fireEvent.click(button);
+
+      await waitFor(() => {
+        expect(window.alert).toHaveBeenCalledWith(
+          'Failed to login as Platform Superuser: Invalid credentials'
+        );
+      });
+    });
+
+    it('should show alert on user data fetch failure', async () => {
+      mockPost.mockResolvedValueOnce({
+        data: { access: 'test-token', refresh: 'refresh-token' },
+      });
+      mockGet.mockRejectedValueOnce(new Error('Failed to fetch user'));
+
+      render(<DevQuickLogin />, { wrapper: createWrapper() });
+
+      const button = screen.getByText('Platform Superuser').parentElement!;
+      fireEvent.click(button);
+
+      await waitFor(() => {
+        expect(window.alert).toHaveBeenCalledWith(
+          'Failed to login as Platform Superuser: Failed to fetch user'
+        );
+      });
+    });
+
+    it('should log error to console', async () => {
+      const consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+      const error = new Error('Network error');
+      mockPost.mockRejectedValueOnce(error);
+
+      render(<DevQuickLogin />, { wrapper: createWrapper() });
+
+      const button = screen.getByText('Platform Superuser').parentElement!;
+      fireEvent.click(button);
+
+      await waitFor(() => {
+        expect(consoleErrorSpy).toHaveBeenCalledWith('Quick login failed:', error);
+      });
+
+      consoleErrorSpy.mockRestore();
+    });
+
+    it('should clear loading state on error', async () => {
+      mockPost.mockRejectedValueOnce(new Error('Login failed'));
+
+      render(<DevQuickLogin />, { wrapper: createWrapper() });
+
+      const button = screen.getByText('Platform Superuser').parentElement!;
+      fireEvent.click(button);
+
+      await waitFor(() => {
+        expect(screen.queryByText('Logging in...')).not.toBeInTheDocument();
+      });
+    });
+
+    it('should re-enable buttons after error', async () => {
+      mockPost.mockRejectedValueOnce(new Error('Login failed'));
+
+      render(<DevQuickLogin />, { wrapper: createWrapper() });
+
+      const button = screen.getByText('Platform Superuser').parentElement!;
+      fireEvent.click(button);
+
+      await waitFor(() => {
+        const allButtons = screen
+          .getAllByRole('button')
+          .filter((b) => !b.textContent?.includes('×'));
+        allButtons.forEach((btn) => {
+          expect(btn).not.toBeDisabled();
+        });
+      });
+    });
+
+    it('should handle error with no message', async () => {
+      mockPost.mockRejectedValueOnce({});
+
+      render(<DevQuickLogin />, { wrapper: createWrapper() });
+
+      const button = screen.getByText('Platform Superuser').parentElement!;
+      fireEvent.click(button);
+
+      await waitFor(() => {
+        expect(window.alert).toHaveBeenCalledWith(
+          'Failed to login as Platform Superuser: Unknown error'
+        );
+      });
+    });
+  });
+
+  describe('Button Styling', () => {
+    it('should apply correct color classes to platform superuser', () => {
+      const { container } = render(<DevQuickLogin />, { wrapper: createWrapper() });
+
+      // Find the button that contains "Platform Superuser"
+      const buttons = container.querySelectorAll('button');
+      const button = Array.from(buttons).find((b) =>
+        b.textContent?.includes('Platform Superuser')
+      );
+      expect(button).toHaveClass('bg-purple-600', 'hover:bg-purple-700');
+    });
+
+    it('should apply correct color classes to platform manager', () => {
+      const { container } = render(<DevQuickLogin />, { wrapper: createWrapper() });
+
+      const buttons = container.querySelectorAll('button');
+      const button = Array.from(buttons).find((b) => b.textContent?.includes('Platform Manager'));
+      expect(button).toHaveClass('bg-blue-600', 'hover:bg-blue-700');
+    });
+
+    it('should apply correct color classes to business owner', () => {
+      const { container } = render(<DevQuickLogin />, { wrapper: createWrapper() });
+
+      const buttons = container.querySelectorAll('button');
+      const button = Array.from(buttons).find((b) => b.textContent?.includes('Business Owner'));
+      expect(button).toHaveClass('bg-indigo-600', 'hover:bg-indigo-700');
+    });
+
+    it('should apply correct color classes to customer', () => {
+      const { container } = render(<DevQuickLogin />, { wrapper: createWrapper() });
+
+      const buttons = container.querySelectorAll('button');
+      const button = Array.from(buttons).find((b) => b.textContent?.includes('Customer'));
+      expect(button).toHaveClass('bg-orange-600', 'hover:bg-orange-700');
+    });
+
+    it('should have consistent button styling', () => {
+      const { container } = render(<DevQuickLogin />, { wrapper: createWrapper() });
+
+      const buttons = container.querySelectorAll('button');
+      const button = Array.from(buttons).find((b) =>
+        b.textContent?.includes('Platform Superuser')
+      );
+      expect(button).toHaveClass(
+        'text-white',
+        'px-3',
+        'py-2',
+        'rounded',
+        'text-sm',
+        'font-medium',
+        'transition-colors'
+      );
+    });
+
+    it('should apply disabled styling when loading', async () => {
+      mockPost.mockImplementation(
+        () =>
+          new Promise((resolve) => {
+            setTimeout(() => resolve({ data: { access: 'token' } }), 100);
+          })
+      );
+
+      const { container } = render(<DevQuickLogin />, { wrapper: createWrapper() });
+
+      const buttons = container.querySelectorAll('button');
+      const button = Array.from(buttons).find((b) =>
+        b.textContent?.includes('Platform Superuser')
+      ) as HTMLButtonElement;
+      fireEvent.click(button);
+
+      expect(button).toHaveClass('disabled:opacity-50', 'disabled:cursor-not-allowed');
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('should render all user buttons with button role', () => {
+      render(<DevQuickLogin />, { wrapper: createWrapper() });
+
+      const buttons = screen.getAllByRole('button').filter((b) => !b.textContent?.includes('×'));
+      expect(buttons.length).toBeGreaterThan(0);
+    });
+
+    it('should have descriptive button text', () => {
+      render(<DevQuickLogin />, { wrapper: createWrapper() });
+
+      expect(screen.getByText('Platform Superuser')).toBeInTheDocument();
+      expect(screen.getByText('SUPERUSER')).toBeInTheDocument();
+    });
+
+    it('should indicate loading state visually', async () => {
+      mockPost.mockImplementation(
+        () =>
+          new Promise((resolve) => {
+            setTimeout(() => resolve({ data: { access: 'token' } }), 100);
+          })
+      );
+
+      render(<DevQuickLogin />, { wrapper: createWrapper() });
+
+      const button = screen.getByText('Platform Superuser').parentElement!;
+      fireEvent.click(button);
+
+      expect(screen.getByText('Logging in...')).toBeInTheDocument();
+    });
+  });
+
+  describe('Multiple User Logins', () => {
+    it('should handle logging in as different users sequentially', async () => {
+      mockPost
+        .mockResolvedValueOnce({
+          data: { access: 'token1', refresh: 'refresh1' },
+        })
+        .mockResolvedValueOnce({
+          data: { access: 'token2', refresh: 'refresh2' },
+        });
+
+      mockGet
+        .mockResolvedValueOnce({
+          data: { role: 'superuser', business_subdomain: null },
+        })
+        .mockResolvedValueOnce({
+          data: { role: 'tenant_owner', business_subdomain: 'demo' },
+        });
+
+      render(<DevQuickLogin />, { wrapper: createWrapper() });
+
+      // Login as superuser
+      const superuserButton = screen.getByText('Platform Superuser').parentElement!;
+      fireEvent.click(superuserButton);
+
+      await waitFor(() => {
+        expect(mockPost).toHaveBeenCalledWith('/auth/login/', {
+          email: 'superuser@platform.com',
+          password: 'test123',
+        });
+      });
+
+      // Login as owner
+      const ownerButton = screen.getByText('Business Owner').parentElement!;
+      fireEvent.click(ownerButton);
+
+      await waitFor(() => {
+        expect(mockPost).toHaveBeenCalledWith('/auth/login/', {
+          email: 'owner@demo.com',
+          password: 'test123',
+        });
+      });
+    });
+  });
+});

frontend/src/components/__tests__/EmailTemplateSelector.test.tsx

@@ -0,0 +1,367 @@
+/**
+ * Unit tests for EmailTemplateSelector component
+ *
+ * Tests the deprecated EmailTemplateSelector component that now displays
+ * a deprecation notice instead of an actual selector.
+ *
+ * Covers:
+ * - Component rendering
+ * - Deprecation notice display
+ * - Props handling (className, disabled, etc.)
+ * - Translation strings
+ * - Disabled state of the selector
+ */
+
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import EmailTemplateSelector from '../EmailTemplateSelector';
+
+// Mock react-i18next
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string, fallback?: string) => fallback || key,
+  }),
+}));
+
+// Mock lucide-react icons
+vi.mock('lucide-react', () => ({
+  AlertTriangle: () => <div data-testid="alert-triangle-icon">⚠</div>,
+  Mail: () => <div data-testid="mail-icon">✉</div>,
+}));
+
+describe('EmailTemplateSelector', () => {
+  const defaultProps = {
+    value: undefined,
+    onChange: vi.fn(),
+  };
+
+  describe('Component Rendering', () => {
+    it('renders the component successfully', () => {
+      const { container } = render(<EmailTemplateSelector {...defaultProps} />);
+      expect(container).toBeInTheDocument();
+    });
+
+    it('renders deprecation notice with warning icon', () => {
+      render(<EmailTemplateSelector {...defaultProps} />);
+
+      const alertIcon = screen.getByTestId('alert-triangle-icon');
+      expect(alertIcon).toBeInTheDocument();
+    });
+
+    it('renders mail icon in the disabled selector', () => {
+      render(<EmailTemplateSelector {...defaultProps} />);
+
+      const mailIcon = screen.getByTestId('mail-icon');
+      expect(mailIcon).toBeInTheDocument();
+    });
+
+    it('renders deprecation title', () => {
+      render(<EmailTemplateSelector {...defaultProps} />);
+
+      expect(screen.getByText('Custom Email Templates Deprecated')).toBeInTheDocument();
+    });
+
+    it('renders deprecation message', () => {
+      render(<EmailTemplateSelector {...defaultProps} />);
+
+      expect(
+        screen.getByText(/Custom email templates have been replaced with system email templates/)
+      ).toBeInTheDocument();
+    });
+
+    it('renders disabled select element', () => {
+      render(<EmailTemplateSelector {...defaultProps} />);
+
+      const select = screen.getByRole('combobox');
+      expect(select).toBeInTheDocument();
+      expect(select).toBeDisabled();
+    });
+
+    it('renders disabled option text', () => {
+      render(<EmailTemplateSelector {...defaultProps} />);
+
+      expect(screen.getByText('Custom templates no longer available')).toBeInTheDocument();
+    });
+  });
+
+  describe('Props Handling', () => {
+    it('accepts value prop without errors', () => {
+      render(<EmailTemplateSelector {...defaultProps} value={123} />);
+
+      // Component should render without errors
+      expect(screen.getByRole('combobox')).toBeInTheDocument();
+    });
+
+    it('accepts string value prop', () => {
+      render(<EmailTemplateSelector {...defaultProps} value="template-123" />);
+
+      expect(screen.getByRole('combobox')).toBeInTheDocument();
+    });
+
+    it('accepts undefined value prop', () => {
+      render(<EmailTemplateSelector {...defaultProps} value={undefined} />);
+
+      expect(screen.getByRole('combobox')).toBeInTheDocument();
+    });
+
+    it('accepts category prop without errors', () => {
+      render(<EmailTemplateSelector {...defaultProps} category="appointment" />);
+
+      expect(screen.getByRole('combobox')).toBeInTheDocument();
+    });
+
+    it('accepts placeholder prop without errors', () => {
+      render(<EmailTemplateSelector {...defaultProps} placeholder="Select template" />);
+
+      expect(screen.getByRole('combobox')).toBeInTheDocument();
+    });
+
+    it('accepts required prop without errors', () => {
+      render(<EmailTemplateSelector {...defaultProps} required={true} />);
+
+      expect(screen.getByRole('combobox')).toBeInTheDocument();
+    });
+
+    it('accepts disabled prop without errors', () => {
+      render(<EmailTemplateSelector {...defaultProps} disabled={true} />);
+
+      // Selector is always disabled due to deprecation
+      expect(screen.getByRole('combobox')).toBeDisabled();
+    });
+
+    it('applies custom className', () => {
+      const { container } = render(
+        <EmailTemplateSelector {...defaultProps} className="custom-test-class" />
+      );
+
+      const wrapper = container.firstChild as HTMLElement;
+      expect(wrapper).toHaveClass('custom-test-class');
+    });
+
+    it('applies multiple classes correctly', () => {
+      const { container } = render(
+        <EmailTemplateSelector {...defaultProps} className="class-one class-two" />
+      );
+
+      const wrapper = container.firstChild as HTMLElement;
+      expect(wrapper).toHaveClass('class-one');
+      expect(wrapper).toHaveClass('class-two');
+    });
+  });
+
+  describe('Deprecation Notice Styling', () => {
+    it('applies warning background color', () => {
+      const { container } = render(<EmailTemplateSelector {...defaultProps} />);
+
+      const warningBox = container.querySelector('.bg-amber-50');
+      expect(warningBox).toBeInTheDocument();
+    });
+
+    it('applies warning border color', () => {
+      const { container } = render(<EmailTemplateSelector {...defaultProps} />);
+
+      const warningBox = container.querySelector('.border-amber-200');
+      expect(warningBox).toBeInTheDocument();
+    });
+
+    it('applies dark mode warning background', () => {
+      const { container } = render(<EmailTemplateSelector {...defaultProps} />);
+
+      const warningBox = container.querySelector('.dark\\:bg-amber-900\\/20');
+      expect(warningBox).toBeInTheDocument();
+    });
+
+    it('applies dark mode warning border', () => {
+      const { container } = render(<EmailTemplateSelector {...defaultProps} />);
+
+      const warningBox = container.querySelector('.dark\\:border-amber-800');
+      expect(warningBox).toBeInTheDocument();
+    });
+  });
+
+  describe('Disabled Selector Styling', () => {
+    it('applies opacity to disabled selector', () => {
+      const { container } = render(<EmailTemplateSelector {...defaultProps} />);
+
+      const selectorWrapper = container.querySelector('.opacity-50');
+      expect(selectorWrapper).toBeInTheDocument();
+    });
+
+    it('applies pointer-events-none to disabled selector', () => {
+      const { container } = render(<EmailTemplateSelector {...defaultProps} />);
+
+      const selectorWrapper = container.querySelector('.pointer-events-none');
+      expect(selectorWrapper).toBeInTheDocument();
+    });
+
+    it('applies disabled cursor style', () => {
+      render(<EmailTemplateSelector {...defaultProps} />);
+
+      const select = screen.getByRole('combobox');
+      expect(select).toHaveClass('cursor-not-allowed');
+    });
+
+    it('applies gray background to disabled select', () => {
+      render(<EmailTemplateSelector {...defaultProps} />);
+
+      const select = screen.getByRole('combobox');
+      expect(select).toHaveClass('bg-gray-100');
+    });
+
+    it('applies gray text color to disabled select', () => {
+      render(<EmailTemplateSelector {...defaultProps} />);
+
+      const select = screen.getByRole('combobox');
+      expect(select).toHaveClass('text-gray-500');
+    });
+  });
+
+  describe('Translation Strings', () => {
+    it('uses correct translation key for deprecation title', () => {
+      render(<EmailTemplateSelector {...defaultProps} />);
+
+      // Since we're mocking useTranslation to return fallback text,
+      // we can verify the component renders the expected fallback
+      expect(screen.getByText('Custom Email Templates Deprecated')).toBeInTheDocument();
+    });
+
+    it('uses correct translation key for deprecation message', () => {
+      render(<EmailTemplateSelector {...defaultProps} />);
+
+      // Verify the component renders the expected fallback message
+      expect(
+        screen.getByText(/Custom email templates have been replaced/)
+      ).toBeInTheDocument();
+    });
+
+    it('uses correct translation key for unavailable message', () => {
+      render(<EmailTemplateSelector {...defaultProps} />);
+
+      // Verify the component renders the expected fallback
+      expect(screen.getByText('Custom templates no longer available')).toBeInTheDocument();
+    });
+  });
+
+  describe('onChange Handler', () => {
+    it('does not call onChange when component is rendered', () => {
+      const onChange = vi.fn();
+      render(<EmailTemplateSelector {...defaultProps} onChange={onChange} />);
+
+      expect(onChange).not.toHaveBeenCalled();
+    });
+
+    it('does not call onChange when component is re-rendered', () => {
+      const onChange = vi.fn();
+      const { rerender } = render(
+        <EmailTemplateSelector {...defaultProps} onChange={onChange} />
+      );
+
+      rerender(<EmailTemplateSelector {...defaultProps} onChange={onChange} />);
+
+      expect(onChange).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('Component Structure', () => {
+    it('renders main wrapper with space-y-2 class', () => {
+      const { container } = render(<EmailTemplateSelector {...defaultProps} />);
+
+      const wrapper = container.querySelector('.space-y-2');
+      expect(wrapper).toBeInTheDocument();
+    });
+
+    it('renders warning box with flex layout', () => {
+      const { container } = render(<EmailTemplateSelector {...defaultProps} />);
+
+      const warningBox = container.querySelector('.flex.items-start');
+      expect(warningBox).toBeInTheDocument();
+    });
+
+    it('renders warning box with gap between icon and text', () => {
+      const { container } = render(<EmailTemplateSelector {...defaultProps} />);
+
+      const warningBox = container.querySelector('.gap-3');
+      expect(warningBox).toBeInTheDocument();
+    });
+
+    it('renders warning icon', () => {
+      render(<EmailTemplateSelector {...defaultProps} />);
+
+      const alertIcon = screen.getByTestId('alert-triangle-icon');
+      expect(alertIcon).toBeInTheDocument();
+    });
+
+    it('renders mail icon', () => {
+      render(<EmailTemplateSelector {...defaultProps} />);
+
+      const mailIcon = screen.getByTestId('mail-icon');
+      expect(mailIcon).toBeInTheDocument();
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('renders select with combobox role', () => {
+      render(<EmailTemplateSelector {...defaultProps} />);
+
+      const select = screen.getByRole('combobox');
+      expect(select).toBeInTheDocument();
+    });
+
+    it('indicates disabled state for screen readers', () => {
+      render(<EmailTemplateSelector {...defaultProps} />);
+
+      const select = screen.getByRole('combobox');
+      expect(select).toHaveAttribute('disabled');
+    });
+
+    it('renders visible deprecation notice for screen readers', () => {
+      render(<EmailTemplateSelector {...defaultProps} />);
+
+      // The deprecation title should be accessible
+      const title = screen.getByText('Custom Email Templates Deprecated');
+      expect(title).toBeVisible();
+    });
+
+    it('renders visible deprecation message for screen readers', () => {
+      render(<EmailTemplateSelector {...defaultProps} />);
+
+      const message = screen.getByText(
+        /Custom email templates have been replaced with system email templates/
+      );
+      expect(message).toBeVisible();
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('handles empty className gracefully', () => {
+      const { container } = render(<EmailTemplateSelector {...defaultProps} className="" />);
+
+      const wrapper = container.firstChild as HTMLElement;
+      expect(wrapper).toHaveClass('space-y-2');
+    });
+
+    it('handles null onChange gracefully', () => {
+      // Component should not crash even with null onChange
+      expect(() => {
+        render(<EmailTemplateSelector {...defaultProps} onChange={null as any} />);
+      }).not.toThrow();
+    });
+
+    it('handles all props together', () => {
+      render(
+        <EmailTemplateSelector
+          value={123}
+          onChange={vi.fn()}
+          category="appointment"
+          placeholder="Select template"
+          required={true}
+          disabled={true}
+          className="custom-class"
+        />
+      );
+
+      expect(screen.getByRole('combobox')).toBeInTheDocument();
+      expect(screen.getByText('Custom Email Templates Deprecated')).toBeInTheDocument();
+    });
+  });
+});

frontend/src/components/__tests__/LanguageSelector.test.tsx

@@ -1,13 +1,16 @@
-import { describe, it, expect, vi } from 'vitest';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { render, screen, fireEvent } from '@testing-library/react';
 import LanguageSelector from '../LanguageSelector';
 
+// Create mock function for changeLanguage
+const mockChangeLanguage = vi.fn();
+
 // Mock react-i18next
 vi.mock('react-i18next', () => ({
   useTranslation: () => ({
     i18n: {
       language: 'en',
-      changeLanguage: vi.fn(),
+      changeLanguage: mockChangeLanguage,
     },
   }),
 }));
@@ -22,6 +25,10 @@ vi.mock('../../i18n', () => ({
 }));
 
 describe('LanguageSelector', () => {
+  beforeEach(() => {
+    mockChangeLanguage.mockClear();
+  });
+
   describe('dropdown variant', () => {
     it('renders dropdown button', () => {
       render(<LanguageSelector />);
@@ -63,6 +70,71 @@ describe('LanguageSelector', () => {
       const { container } = render(<LanguageSelector className="custom-class" />);
       expect(container.firstChild).toHaveClass('custom-class');
     });
+
+    it('changes language when clicking a language option in dropdown', () => {
+      render(<LanguageSelector />);
+      const button = screen.getByRole('button');
+      fireEvent.click(button);
+
+      const spanishOption = screen.getByText('Español').closest('button');
+      expect(spanishOption).toBeInTheDocument();
+
+      fireEvent.click(spanishOption!);
+
+      expect(mockChangeLanguage).toHaveBeenCalledWith('es');
+    });
+
+    it('closes dropdown when language is selected', () => {
+      render(<LanguageSelector />);
+      const button = screen.getByRole('button');
+      fireEvent.click(button);
+
+      expect(screen.getByRole('listbox')).toBeInTheDocument();
+
+      const frenchOption = screen.getByText('Français').closest('button');
+      fireEvent.click(frenchOption!);
+
+      expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
+    });
+
+    it('closes dropdown when clicking outside', () => {
+      render(<LanguageSelector />);
+      const button = screen.getByRole('button');
+      fireEvent.click(button);
+
+      expect(screen.getByRole('listbox')).toBeInTheDocument();
+
+      // Click outside the dropdown
+      fireEvent.mouseDown(document.body);
+
+      expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
+    });
+
+    it('does not close dropdown when clicking inside dropdown', () => {
+      render(<LanguageSelector />);
+      const button = screen.getByRole('button');
+      fireEvent.click(button);
+
+      expect(screen.getByRole('listbox')).toBeInTheDocument();
+
+      const listbox = screen.getByRole('listbox');
+      fireEvent.mouseDown(listbox);
+
+      expect(screen.getByRole('listbox')).toBeInTheDocument();
+    });
+
+    it('toggles dropdown open/closed on button clicks', () => {
+      render(<LanguageSelector />);
+      const button = screen.getByRole('button');
+
+      // Open dropdown
+      fireEvent.click(button);
+      expect(screen.getByRole('listbox')).toBeInTheDocument();
+
+      // Close dropdown
+      fireEvent.click(button);
+      expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
+    });
   });
 
   describe('inline variant', () => {
@@ -89,5 +161,51 @@ describe('LanguageSelector', () => {
       render(<LanguageSelector variant="inline" />);
       expect(screen.getByText(/🇺🇸/)).toBeInTheDocument();
     });
+
+    it('changes language when clicking a language button', () => {
+      render(<LanguageSelector variant="inline" />);
+
+      const spanishButton = screen.getByText(/Español/).closest('button');
+      expect(spanishButton).toBeInTheDocument();
+
+      fireEvent.click(spanishButton!);
+
+      expect(mockChangeLanguage).toHaveBeenCalledWith('es');
+    });
+
+    it('calls changeLanguage with correct code for each language', () => {
+      render(<LanguageSelector variant="inline" />);
+
+      // Test English
+      const englishButton = screen.getByText(/English/).closest('button');
+      fireEvent.click(englishButton!);
+      expect(mockChangeLanguage).toHaveBeenCalledWith('en');
+
+      mockChangeLanguage.mockClear();
+
+      // Test French
+      const frenchButton = screen.getByText(/Français/).closest('button');
+      fireEvent.click(frenchButton!);
+      expect(mockChangeLanguage).toHaveBeenCalledWith('fr');
+    });
+
+    it('hides flags when showFlag is false', () => {
+      render(<LanguageSelector variant="inline" showFlag={false} />);
+
+      // Flags should not be visible
+      expect(screen.queryByText('🇺🇸')).not.toBeInTheDocument();
+      expect(screen.queryByText('🇪🇸')).not.toBeInTheDocument();
+      expect(screen.queryByText('🇫🇷')).not.toBeInTheDocument();
+
+      // But names should still be there
+      expect(screen.getByText('English')).toBeInTheDocument();
+      expect(screen.getByText('Español')).toBeInTheDocument();
+      expect(screen.getByText('Français')).toBeInTheDocument();
+    });
+
+    it('applies custom className', () => {
+      const { container } = render(<LanguageSelector variant="inline" className="custom-inline-class" />);
+      expect(container.firstChild).toHaveClass('custom-inline-class');
+    });
   });
 });

frontend/src/components/__tests__/QuickAddAppointment.test.tsx

@@ -0,0 +1,805 @@
+/**
+ * Unit tests for QuickAddAppointment component
+ *
+ * Tests cover:
+ * - Component rendering
+ * - Form fields and validation
+ * - User interactions (filling forms, submitting)
+ * - API integration (mock mutations)
+ * - Success/error states
+ * - Form reset after successful submission
+ */
+
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import React from 'react';
+import QuickAddAppointment from '../QuickAddAppointment';
+
+// Mock dependencies
+const mockServices = vi.fn();
+const mockResources = vi.fn();
+const mockCustomers = vi.fn();
+const mockCreateAppointment = vi.fn();
+
+vi.mock('../../hooks/useServices', () => ({
+  useServices: () => mockServices(),
+}));
+
+vi.mock('../../hooks/useResources', () => ({
+  useResources: () => mockResources(),
+}));
+
+vi.mock('../../hooks/useCustomers', () => ({
+  useCustomers: () => mockCustomers(),
+}));
+
+vi.mock('../../hooks/useAppointments', () => ({
+  useCreateAppointment: () => mockCreateAppointment(),
+}));
+
+// Mock react-i18next
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string, defaultValue?: string) => defaultValue || key,
+  }),
+}));
+
+// Mock date-fns format
+vi.mock('date-fns', () => ({
+  format: (date: Date, formatStr: string) => {
+    if (formatStr === 'yyyy-MM-dd') {
+      const year = date.getFullYear();
+      const month = String(date.getMonth() + 1).padStart(2, '0');
+      const day = String(date.getDate()).padStart(2, '0');
+      return `${year}-${month}-${day}`;
+    }
+    return date.toISOString();
+  },
+}));
+
+describe('QuickAddAppointment', () => {
+  const mockMutateAsync = vi.fn();
+
+  // Helper functions to get form elements by label text (since labels don't have htmlFor)
+  const getSelectByLabel = (labelText: string) => {
+    const label = screen.getByText(labelText);
+    return label.parentElement?.querySelector('select') as HTMLSelectElement;
+  };
+
+  const getInputByLabel = (labelText: string, type: string = 'text') => {
+    const label = screen.getByText(labelText);
+    return label.parentElement?.querySelector(`input[type="${type}"]`) as HTMLInputElement;
+  };
+
+  const mockServiceData = [
+    { id: '1', name: 'Haircut', durationMinutes: 30, price: '25.00' },
+    { id: '2', name: 'Massage', durationMinutes: 60, price: '80.00' },
+    { id: '3', name: 'Consultation', durationMinutes: 15, price: '0.00' },
+  ];
+
+  const mockResourceData = [
+    { id: '1', name: 'Room 1' },
+    { id: '2', name: 'Chair A' },
+    { id: '3', name: 'Therapist Jane' },
+  ];
+
+  const mockCustomerData = [
+    { id: '1', name: 'John Doe', email: 'john@example.com', status: 'Active' },
+    { id: '2', name: 'Jane Smith', email: 'jane@example.com', status: 'Active' },
+    { id: '3', name: 'Inactive User', email: 'inactive@example.com', status: 'Inactive' },
+  ];
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+
+    mockServices.mockReturnValue({
+      data: mockServiceData,
+      isLoading: false,
+    });
+
+    mockResources.mockReturnValue({
+      data: mockResourceData,
+      isLoading: false,
+    });
+
+    mockCustomers.mockReturnValue({
+      data: mockCustomerData,
+      isLoading: false,
+    });
+
+    mockCreateAppointment.mockReturnValue({
+      mutateAsync: mockMutateAsync,
+      isPending: false,
+    });
+
+    mockMutateAsync.mockResolvedValue({
+      id: '123',
+      service: 1,
+      start_time: new Date().toISOString(),
+    });
+  });
+
+  describe('Rendering', () => {
+    it('should render the component', () => {
+      render(<QuickAddAppointment />);
+      expect(screen.getByText('Quick Add Appointment')).toBeInTheDocument();
+    });
+
+    it('should render all form fields', () => {
+      render(<QuickAddAppointment />);
+
+      expect(screen.getByText('Customer')).toBeInTheDocument();
+      expect(screen.getByText('Service *')).toBeInTheDocument();
+      expect(screen.getByText('Resource')).toBeInTheDocument();
+      expect(screen.getByText('Date *')).toBeInTheDocument();
+      expect(screen.getByText('Time *')).toBeInTheDocument();
+      expect(screen.getByText('Notes')).toBeInTheDocument();
+    });
+
+    it('should render customer dropdown with active customers only', () => {
+      render(<QuickAddAppointment />);
+
+      const customerSelect = getSelectByLabel('Customer');
+      const options = Array.from(customerSelect.options);
+
+      // Should have walk-in option + 2 active customers (not inactive)
+      expect(options).toHaveLength(3);
+      expect(options[0].textContent).toContain('Walk-in');
+      expect(options[1].textContent).toContain('John Doe');
+      expect(options[2].textContent).toContain('Jane Smith');
+      expect(options.find(opt => opt.textContent?.includes('Inactive User'))).toBeUndefined();
+    });
+
+    it('should render service dropdown with all services', () => {
+      render(<QuickAddAppointment />);
+
+      const serviceSelect = getSelectByLabel('Service *');
+      const options = Array.from(serviceSelect.options);
+
+      expect(options).toHaveLength(4); // placeholder + 3 services
+      expect(options[0].textContent).toContain('Select service');
+      expect(options[1].textContent).toContain('Haircut');
+      expect(options[2].textContent).toContain('Massage');
+      expect(options[3].textContent).toContain('Consultation');
+    });
+
+    it('should render resource dropdown with unassigned option', () => {
+      render(<QuickAddAppointment />);
+
+      const resourceSelect = getSelectByLabel('Resource');
+      const options = Array.from(resourceSelect.options);
+
+      expect(options).toHaveLength(4); // unassigned + 3 resources
+      expect(options[0].textContent).toContain('Unassigned');
+      expect(options[1].textContent).toContain('Room 1');
+      expect(options[2].textContent).toContain('Chair A');
+      expect(options[3].textContent).toContain('Therapist Jane');
+    });
+
+    it('should render time slots from 6am to 10pm in 15-minute intervals', () => {
+      render(<QuickAddAppointment />);
+
+      const timeSelect = getSelectByLabel('Time *');
+      const options = Array.from(timeSelect.options);
+
+      // 6am to 10pm = 17 hours * 4 slots per hour = 68 slots
+      expect(options).toHaveLength(68);
+      expect(options[0].value).toBe('06:00');
+      expect(options[options.length - 1].value).toBe('22:45');
+    });
+
+    it('should render submit button', () => {
+      render(<QuickAddAppointment />);
+
+      const submitButton = screen.getByRole('button', { name: /Add Appointment/i });
+      expect(submitButton).toBeInTheDocument();
+    });
+
+    it('should set default date to today', () => {
+      render(<QuickAddAppointment />);
+
+      const dateInput = getInputByLabel('Date *', 'date');
+      const today = new Date();
+      const expectedDate = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}-${String(today.getDate()).padStart(2, '0')}`;
+
+      expect(dateInput.value).toBe(expectedDate);
+    });
+
+    it('should set default time to 09:00', () => {
+      render(<QuickAddAppointment />);
+
+      const timeSelect = getSelectByLabel('Time *');
+      expect(timeSelect.value).toBe('09:00');
+    });
+
+    it('should render notes textarea', () => {
+      render(<QuickAddAppointment />);
+
+      const notesTextarea = screen.getByPlaceholderText('Optional notes...');
+      expect(notesTextarea).toBeInTheDocument();
+      expect(notesTextarea.tagName).toBe('TEXTAREA');
+    });
+  });
+
+  describe('Form Validation', () => {
+    it('should disable submit button when service is not selected', () => {
+      render(<QuickAddAppointment />);
+
+      const submitButton = screen.getByRole('button', { name: /Add Appointment/i });
+      expect(submitButton).toBeDisabled();
+    });
+
+    it('should enable submit button when service is selected', async () => {
+      const user = userEvent.setup();
+      render(<QuickAddAppointment />);
+
+      const serviceSelect = getSelectByLabel('Service *');
+      await user.selectOptions(serviceSelect, '1');
+
+      const submitButton = screen.getByRole('button', { name: /Add Appointment/i });
+      expect(submitButton).not.toBeDisabled();
+    });
+
+    it('should mark service field as required', () => {
+      render(<QuickAddAppointment />);
+
+      const serviceSelect = getSelectByLabel('Service *');
+      expect(serviceSelect).toHaveAttribute('required');
+    });
+
+    it('should mark date field as required', () => {
+      render(<QuickAddAppointment />);
+
+      const dateInput = getInputByLabel('Date *', 'date');
+      expect(dateInput).toHaveAttribute('required');
+    });
+
+    it('should mark time field as required', () => {
+      render(<QuickAddAppointment />);
+
+      const timeSelect = getSelectByLabel('Time *');
+      expect(timeSelect).toHaveAttribute('required');
+    });
+
+    it('should set minimum date to today', () => {
+      render(<QuickAddAppointment />);
+
+      const dateInput = getInputByLabel('Date *', 'date');
+      const today = new Date();
+      const expectedMin = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}-${String(today.getDate()).padStart(2, '0')}`;
+
+      expect(dateInput.min).toBe(expectedMin);
+    });
+  });
+
+  describe('User Interactions', () => {
+    it('should allow selecting a customer', async () => {
+      const user = userEvent.setup();
+      render(<QuickAddAppointment />);
+
+      const customerSelect = getSelectByLabel('Customer');
+      await user.selectOptions(customerSelect, '1');
+
+      expect(customerSelect.value).toBe('1');
+    });
+
+    it('should allow selecting a service', async () => {
+      const user = userEvent.setup();
+      render(<QuickAddAppointment />);
+
+      const serviceSelect = getSelectByLabel('Service *');
+      await user.selectOptions(serviceSelect, '2');
+
+      expect(serviceSelect.value).toBe('2');
+    });
+
+    it('should allow selecting a resource', async () => {
+      const user = userEvent.setup();
+      render(<QuickAddAppointment />);
+
+      const resourceSelect = getSelectByLabel('Resource');
+      await user.selectOptions(resourceSelect, '3');
+
+      expect(resourceSelect.value).toBe('3');
+    });
+
+    it('should allow changing the date', async () => {
+      const user = userEvent.setup();
+      render(<QuickAddAppointment />);
+
+      const dateInput = getInputByLabel('Date *', 'date');
+      await user.clear(dateInput);
+      await user.type(dateInput, '2025-12-31');
+
+      expect(dateInput.value).toBe('2025-12-31');
+    });
+
+    it('should allow changing the time', async () => {
+      const user = userEvent.setup();
+      render(<QuickAddAppointment />);
+
+      const timeSelect = getSelectByLabel('Time *');
+      await user.selectOptions(timeSelect, '14:30');
+
+      expect(timeSelect.value).toBe('14:30');
+    });
+
+    it('should allow entering notes', async () => {
+      const user = userEvent.setup();
+      render(<QuickAddAppointment />);
+
+      const notesTextarea = screen.getByPlaceholderText('Optional notes...');
+      await user.type(notesTextarea, 'Customer requested early morning slot');
+
+      expect(notesTextarea).toHaveValue('Customer requested early morning slot');
+    });
+
+    it('should display selected service duration', async () => {
+      const user = userEvent.setup();
+      render(<QuickAddAppointment />);
+
+      const serviceSelect = getSelectByLabel('Service *');
+      await user.selectOptions(serviceSelect, '2'); // Massage - 60 minutes
+
+      // Duration text is split across elements, so use regex matching
+      expect(screen.getByText(/Duration:/i)).toBeInTheDocument();
+      expect(screen.getByText(/60.*minutes/i)).toBeInTheDocument();
+    });
+
+    it('should not display duration when no service selected', () => {
+      render(<QuickAddAppointment />);
+
+      expect(screen.queryByText('Duration')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Form Submission', () => {
+    it('should call createAppointment with correct data when form is submitted', async () => {
+      const user = userEvent.setup();
+      render(<QuickAddAppointment />);
+
+      // Fill out the form
+      await user.selectOptions(getSelectByLabel('Customer'), '1');
+      await user.selectOptions(getSelectByLabel('Service *'), '1');
+      await user.selectOptions(getSelectByLabel('Resource'), '2');
+      await user.selectOptions(getSelectByLabel('Time *'), '10:00');
+
+      const notesTextarea = screen.getByPlaceholderText('Optional notes...');
+      await user.type(notesTextarea, 'Test appointment');
+
+      // Submit
+      const submitButton = screen.getByRole('button', { name: /Add Appointment/i });
+      await user.click(submitButton);
+
+      await waitFor(() => {
+        expect(mockMutateAsync).toHaveBeenCalled();
+      });
+
+      const callArgs = mockMutateAsync.mock.calls[0][0];
+      expect(callArgs).toMatchObject({
+        customerId: '1',
+        customerName: 'John Doe',
+        serviceId: '1',
+        resourceId: '2',
+        durationMinutes: 30,
+        status: 'Scheduled',
+        notes: 'Test appointment',
+      });
+    });
+
+    it('should send walk-in appointment when no customer selected', async () => {
+      const user = userEvent.setup();
+      render(<QuickAddAppointment />);
+
+      await user.selectOptions(getSelectByLabel('Service *'), '1');
+
+      const submitButton = screen.getByRole('button', { name: /Add Appointment/i });
+      await user.click(submitButton);
+
+      await waitFor(() => {
+        expect(mockMutateAsync).toHaveBeenCalledWith(
+          expect.objectContaining({
+            customerId: undefined,
+            customerName: 'Walk-in',
+          })
+        );
+      });
+    });
+
+    it('should send null resourceId when unassigned', async () => {
+      const user = userEvent.setup();
+      render(<QuickAddAppointment />);
+
+      await user.selectOptions(getSelectByLabel('Service *'), '1');
+      // Keep resource as unassigned (default empty value)
+
+      const submitButton = screen.getByRole('button', { name: /Add Appointment/i });
+      await user.click(submitButton);
+
+      await waitFor(() => {
+        expect(mockMutateAsync).toHaveBeenCalledWith(
+          expect.objectContaining({
+            resourceId: null,
+          })
+        );
+      });
+    });
+
+    it('should use service duration when creating appointment', async () => {
+      const user = userEvent.setup();
+      render(<QuickAddAppointment />);
+
+      await user.selectOptions(getSelectByLabel('Service *'), '2'); // Massage - 60 min
+
+      const submitButton = screen.getByRole('button', { name: /Add Appointment/i });
+      await user.click(submitButton);
+
+      await waitFor(() => {
+        expect(mockMutateAsync).toHaveBeenCalledWith(
+          expect.objectContaining({
+            durationMinutes: 60,
+          })
+        );
+      });
+    });
+
+    it('should use default 60 minutes when service has no duration', async () => {
+      const user = userEvent.setup();
+
+      mockServices.mockReturnValue({
+        data: [{ id: '1', name: 'Test Service', price: '10.00' }], // No durationMinutes
+        isLoading: false,
+      });
+
+      render(<QuickAddAppointment />);
+
+      await user.selectOptions(getSelectByLabel('Service *'), '1');
+
+      const submitButton = screen.getByRole('button', { name: /Add Appointment/i });
+      await user.click(submitButton);
+
+      await waitFor(() => {
+        expect(mockMutateAsync).toHaveBeenCalledWith(
+          expect.objectContaining({
+            durationMinutes: 60,
+          })
+        );
+      });
+    });
+
+    it('should calculate start time correctly from date and time', async () => {
+      const user = userEvent.setup();
+      render(<QuickAddAppointment />);
+
+      await user.selectOptions(getSelectByLabel('Service *'), '1');
+      await user.selectOptions(getSelectByLabel('Time *'), '14:30');
+
+      const submitButton = screen.getByRole('button', { name: /Add Appointment/i });
+      await user.click(submitButton);
+
+      await waitFor(() => {
+        expect(mockMutateAsync).toHaveBeenCalled();
+      });
+
+      const callArgs = mockMutateAsync.mock.calls[0][0];
+      const startTime = callArgs.startTime;
+
+      // Verify time is set correctly (uses today's date by default)
+      expect(startTime.getHours()).toBe(14);
+      expect(startTime.getMinutes()).toBe(30);
+      expect(startTime instanceof Date).toBe(true);
+    });
+
+    it('should prevent submission if required fields are missing', async () => {
+      const user = userEvent.setup();
+      render(<QuickAddAppointment />);
+
+      // Don't select service
+      const submitButton = screen.getByRole('button', { name: /Add Appointment/i });
+      await user.click(submitButton);
+
+      // Should not call mutation
+      expect(mockMutateAsync).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('Success State', () => {
+    it('should show success state after successful submission', async () => {
+      const user = userEvent.setup();
+      render(<QuickAddAppointment />);
+
+      await user.selectOptions(getSelectByLabel('Service *'), '1');
+
+      const submitButton = screen.getByRole('button', { name: /Add Appointment/i });
+      await user.click(submitButton);
+
+      await waitFor(() => {
+        expect(screen.getByText('Created!')).toBeInTheDocument();
+      });
+    });
+
+    it('should reset form after successful submission', async () => {
+      const user = userEvent.setup();
+      render(<QuickAddAppointment />);
+
+      // Fill out form
+      await user.selectOptions(getSelectByLabel('Customer'), '1');
+      await user.selectOptions(getSelectByLabel('Service *'), '2');
+      await user.selectOptions(getSelectByLabel('Resource'), '3');
+
+      const notesTextarea = screen.getByPlaceholderText('Optional notes...');
+      await user.type(notesTextarea, 'Test notes');
+
+      const submitButton = screen.getByRole('button', { name: /Add Appointment/i });
+      await user.click(submitButton);
+
+      await waitFor(() => {
+        expect(getSelectByLabel('Customer').value).toBe('');
+        expect(getSelectByLabel('Service *').value).toBe('');
+        expect(getSelectByLabel('Resource').value).toBe('');
+        expect(getSelectByLabel('Time *').value).toBe('09:00');
+        expect(notesTextarea).toHaveValue('');
+      });
+    });
+
+    it('should call onSuccess callback when provided', async () => {
+      const user = userEvent.setup();
+      const onSuccess = vi.fn();
+      render(<QuickAddAppointment onSuccess={onSuccess} />);
+
+      await user.selectOptions(getSelectByLabel('Service *'), '1');
+
+      const submitButton = screen.getByRole('button', { name: /Add Appointment/i });
+      await user.click(submitButton);
+
+      await waitFor(() => {
+        expect(onSuccess).toHaveBeenCalled();
+      });
+    });
+
+    it('should hide success state after 2 seconds', async () => {
+      vi.useFakeTimers();
+      try {
+        const user = userEvent.setup({ delay: null });
+        render(<QuickAddAppointment />);
+
+        await user.selectOptions(getSelectByLabel('Service *'), '1');
+
+        const submitButton = screen.getByRole('button', { name: /Add Appointment/i });
+        await user.click(submitButton);
+
+        // Wait for Created! to appear
+        await waitFor(() => {
+          expect(screen.getByText('Created!')).toBeInTheDocument();
+        });
+
+        // Fast-forward time by 2 seconds
+        await vi.advanceTimersByTimeAsync(2000);
+
+        // Success message should be hidden
+        expect(screen.queryByText('Created!')).not.toBeInTheDocument();
+      } finally {
+        vi.useRealTimers();
+      }
+    });
+  });
+
+  describe('Loading State', () => {
+    it('should disable submit button when mutation is pending', () => {
+      mockCreateAppointment.mockReturnValue({
+        mutateAsync: mockMutateAsync,
+        isPending: true,
+      });
+
+      render(<QuickAddAppointment />);
+
+      const submitButton = screen.getByRole('button', { name: /Creating.../i });
+      expect(submitButton).toBeDisabled();
+    });
+
+    it('should show loading spinner when mutation is pending', () => {
+      mockCreateAppointment.mockReturnValue({
+        mutateAsync: mockMutateAsync,
+        isPending: true,
+      });
+
+      render(<QuickAddAppointment />);
+
+      expect(screen.getByText('Creating...')).toBeInTheDocument();
+      expect(document.querySelector('.animate-spin')).toBeInTheDocument();
+    });
+  });
+
+  describe('Error Handling', () => {
+    it('should handle API errors gracefully', async () => {
+      const user = userEvent.setup();
+      const consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+
+      mockMutateAsync.mockRejectedValueOnce(new Error('Network error'));
+
+      render(<QuickAddAppointment />);
+
+      await user.selectOptions(getSelectByLabel('Service *'), '1');
+
+      const submitButton = screen.getByRole('button', { name: /Add Appointment/i });
+      await user.click(submitButton);
+
+      await waitFor(() => {
+        expect(consoleErrorSpy).toHaveBeenCalledWith(
+          'Failed to create appointment:',
+          expect.any(Error)
+        );
+      });
+
+      consoleErrorSpy.mockRestore();
+    });
+
+    it('should not reset form on error', async () => {
+      const user = userEvent.setup();
+      const consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+
+      mockMutateAsync.mockRejectedValueOnce(new Error('Network error'));
+
+      render(<QuickAddAppointment />);
+
+      await user.selectOptions(getSelectByLabel('Service *'), '1');
+      await user.selectOptions(getSelectByLabel('Customer'), '1');
+
+      const submitButton = screen.getByRole('button', { name: /Add Appointment/i });
+      await user.click(submitButton);
+
+      // Wait for error to be handled
+      await waitFor(() => {
+        expect(consoleErrorSpy).toHaveBeenCalled();
+      });
+
+      // Form should retain values
+      expect(getSelectByLabel('Service *').value).toBe('1');
+      expect(getSelectByLabel('Customer').value).toBe('1');
+
+      consoleErrorSpy.mockRestore();
+    });
+  });
+
+  describe('Empty States', () => {
+    it('should handle no services available', () => {
+      mockServices.mockReturnValue({
+        data: [],
+        isLoading: false,
+      });
+
+      render(<QuickAddAppointment />);
+
+      const serviceSelect = getSelectByLabel('Service *');
+      const options = Array.from(serviceSelect.options);
+
+      expect(options).toHaveLength(1); // Only placeholder
+      expect(options[0].textContent).toContain('Select service');
+    });
+
+    it('should handle no resources available', () => {
+      mockResources.mockReturnValue({
+        data: [],
+        isLoading: false,
+      });
+
+      render(<QuickAddAppointment />);
+
+      const resourceSelect = getSelectByLabel('Resource');
+      const options = Array.from(resourceSelect.options);
+
+      expect(options).toHaveLength(1); // Only unassigned option
+      expect(options[0].textContent).toContain('Unassigned');
+    });
+
+    it('should handle no customers available', () => {
+      mockCustomers.mockReturnValue({
+        data: [],
+        isLoading: false,
+      });
+
+      render(<QuickAddAppointment />);
+
+      const customerSelect = getSelectByLabel('Customer');
+      const options = Array.from(customerSelect.options);
+
+      expect(options).toHaveLength(1); // Only walk-in option
+      expect(options[0].textContent).toContain('Walk-in');
+    });
+
+    it('should handle undefined data gracefully', () => {
+      mockServices.mockReturnValue({
+        data: undefined,
+        isLoading: false,
+      });
+
+      mockResources.mockReturnValue({
+        data: undefined,
+        isLoading: false,
+      });
+
+      mockCustomers.mockReturnValue({
+        data: undefined,
+        isLoading: false,
+      });
+
+      render(<QuickAddAppointment />);
+
+      expect(screen.getByText('Quick Add Appointment')).toBeInTheDocument();
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('should have proper form structure', () => {
+      const { container } = render(<QuickAddAppointment />);
+
+      const form = container.querySelector('form');
+      expect(form).toBeInTheDocument();
+    });
+
+    it('should have accessible submit button', () => {
+      render(<QuickAddAppointment />);
+
+      const submitButton = screen.getByRole('button', { name: /Add Appointment/i });
+      expect(submitButton).toHaveAttribute('type', 'submit');
+    });
+  });
+
+  describe('Integration', () => {
+    it('should render complete workflow', async () => {
+      const user = userEvent.setup();
+      const onSuccess = vi.fn();
+
+      render(<QuickAddAppointment onSuccess={onSuccess} />);
+
+      // 1. Component renders
+      expect(screen.getByText('Quick Add Appointment')).toBeInTheDocument();
+
+      // 2. Select all fields
+      await user.selectOptions(getSelectByLabel('Customer'), '1');
+      await user.selectOptions(getSelectByLabel('Service *'), '2');
+      await user.selectOptions(getSelectByLabel('Resource'), '3');
+      await user.selectOptions(getSelectByLabel('Time *'), '15:00');
+
+      const notesTextarea = screen.getByPlaceholderText('Optional notes...');
+      await user.type(notesTextarea, 'Full test');
+
+      // 3. See duration display
+      expect(screen.getByText(/Duration:/i)).toBeInTheDocument();
+      expect(screen.getByText(/60.*minutes/i)).toBeInTheDocument();
+
+      // 4. Submit form
+      const submitButton = screen.getByRole('button', { name: /Add Appointment/i });
+      await user.click(submitButton);
+
+      // 5. Verify API call
+      await waitFor(() => {
+        expect(mockMutateAsync).toHaveBeenCalled();
+      });
+
+      expect(mockMutateAsync).toHaveBeenCalledWith(
+        expect.objectContaining({
+          customerId: '1',
+          serviceId: '2',
+          resourceId: '3',
+          durationMinutes: 60,
+          notes: 'Full test',
+        })
+      );
+
+      // 6. See success state
+      await waitFor(() => {
+        expect(screen.getByText('Created!')).toBeInTheDocument();
+      });
+
+      // 7. Callback fired
+      expect(onSuccess).toHaveBeenCalled();
+
+      // 8. Form reset
+      await waitFor(() => {
+        expect(getSelectByLabel('Customer').value).toBe('');
+      });
+    });
+  });
+});

frontend/src/components/__tests__/ResourceDetailModal.test.tsx

@@ -0,0 +1,836 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { render, screen, fireEvent, cleanup } from '@testing-library/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import ResourceDetailModal from '../ResourceDetailModal';
+import { Resource } from '../../types';
+
+// Mock react-i18next
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string, defaultValue?: string) => defaultValue || key,
+  }),
+}));
+
+// Mock Portal component
+vi.mock('../Portal', () => ({
+  default: ({ children }: { children: React.ReactNode }) => <div data-testid="portal">{children}</div>,
+}));
+
+// Mock Google Maps API
+vi.mock('@react-google-maps/api', () => ({
+  useJsApiLoader: vi.fn(() => ({
+    isLoaded: false,
+    loadError: null,
+  })),
+  GoogleMap: ({ children }: { children: React.ReactNode }) => (
+    <div data-testid="google-map">{children}</div>
+  ),
+  Marker: () => <div data-testid="map-marker" />,
+}));
+
+// Mock hooks
+vi.mock('../../hooks/useResourceLocation', () => ({
+  useResourceLocation: vi.fn(),
+  useLiveResourceLocation: vi.fn(() => ({
+    refresh: vi.fn(),
+  })),
+}));
+
+import { useResourceLocation, useLiveResourceLocation } from '../../hooks/useResourceLocation';
+import { useJsApiLoader } from '@react-google-maps/api';
+
+const createWrapper = () => {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+      },
+    },
+  });
+  return ({ children }: { children: React.ReactNode }) => (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  );
+};
+
+describe('ResourceDetailModal', () => {
+  const mockResource: Resource = {
+    id: 'resource-1',
+    name: 'John Smith',
+    type: 'STAFF',
+    maxConcurrentEvents: 1,
+    userId: 'user-1',
+  };
+
+  const mockOnClose = vi.fn();
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+
+    // Default mock implementations
+    vi.mocked(useResourceLocation).mockReturnValue({
+      data: undefined,
+      isLoading: false,
+      error: null,
+    } as any);
+
+    vi.mocked(useLiveResourceLocation).mockReturnValue({
+      refresh: vi.fn(),
+    } as any);
+
+    vi.mocked(useJsApiLoader).mockReturnValue({
+      isLoaded: false,
+      loadError: null,
+    } as any);
+
+    // Mock environment variable
+    import.meta.env.VITE_GOOGLE_MAPS_API_KEY = '';
+  });
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  describe('Rendering', () => {
+    it('renders modal with resource name', () => {
+      render(<ResourceDetailModal resource={mockResource} onClose={mockOnClose} />, {
+        wrapper: createWrapper(),
+      });
+
+      expect(screen.getByText('John Smith')).toBeInTheDocument();
+      expect(screen.getByText('Staff Member')).toBeInTheDocument();
+    });
+
+    it('renders inside Portal', () => {
+      render(<ResourceDetailModal resource={mockResource} onClose={mockOnClose} />, {
+        wrapper: createWrapper(),
+      });
+
+      expect(screen.getByTestId('portal')).toBeInTheDocument();
+    });
+
+    it('displays Current Location heading', () => {
+      render(<ResourceDetailModal resource={mockResource} onClose={mockOnClose} />, {
+        wrapper: createWrapper(),
+      });
+
+      expect(screen.getByText('Current Location')).toBeInTheDocument();
+    });
+  });
+
+  describe('Close functionality', () => {
+    it('calls onClose when X button is clicked', () => {
+      render(<ResourceDetailModal resource={mockResource} onClose={mockOnClose} />, {
+        wrapper: createWrapper(),
+      });
+
+      const closeButtons = screen.getAllByRole('button');
+      const xButton = closeButtons[0]; // First button is the X in header
+      fireEvent.click(xButton);
+
+      expect(mockOnClose).toHaveBeenCalledTimes(1);
+    });
+
+    it('calls onClose when footer Close button is clicked', () => {
+      render(<ResourceDetailModal resource={mockResource} onClose={mockOnClose} />, {
+        wrapper: createWrapper(),
+      });
+
+      const closeButtons = screen.getAllByRole('button', { name: /close/i });
+      const footerButton = closeButtons[1]; // Second button is in footer
+      fireEvent.click(footerButton);
+
+      expect(mockOnClose).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('Loading state', () => {
+    it('displays loading spinner when location is loading', () => {
+      vi.mocked(useResourceLocation).mockReturnValue({
+        data: undefined,
+        isLoading: true,
+        error: null,
+      } as any);
+
+      render(<ResourceDetailModal resource={mockResource} onClose={mockOnClose} />, {
+        wrapper: createWrapper(),
+      });
+
+      const spinner = document.querySelector('.animate-spin');
+      expect(spinner).toBeInTheDocument();
+    });
+  });
+
+  describe('Error state', () => {
+    it('displays error message when location fetch fails', () => {
+      vi.mocked(useResourceLocation).mockReturnValue({
+        data: undefined,
+        isLoading: false,
+        error: new Error('Failed to load'),
+      } as any);
+
+      render(<ResourceDetailModal resource={mockResource} onClose={mockOnClose} />, {
+        wrapper: createWrapper(),
+      });
+
+      expect(screen.getByText('Failed to load location')).toBeInTheDocument();
+    });
+  });
+
+  describe('No location data state', () => {
+    it('displays no location message when hasLocation is false', () => {
+      vi.mocked(useResourceLocation).mockReturnValue({
+        data: {
+          hasLocation: false,
+          isTracking: false,
+          message: 'Staff has not started tracking',
+        },
+        isLoading: false,
+        error: null,
+      } as any);
+
+      render(<ResourceDetailModal resource={mockResource} onClose={mockOnClose} />, {
+        wrapper: createWrapper(),
+      });
+
+      expect(screen.getByText('Staff has not started tracking')).toBeInTheDocument();
+      expect(screen.getByText('Location will appear when staff is en route')).toBeInTheDocument();
+    });
+
+    it('displays default no location message when message is not provided', () => {
+      vi.mocked(useResourceLocation).mockReturnValue({
+        data: {
+          hasLocation: false,
+          isTracking: false,
+        },
+        isLoading: false,
+        error: null,
+      } as any);
+
+      render(<ResourceDetailModal resource={mockResource} onClose={mockOnClose} />, {
+        wrapper: createWrapper(),
+      });
+
+      expect(screen.getByText('No location data available')).toBeInTheDocument();
+    });
+  });
+
+  describe('Active job display', () => {
+    it('displays active job when en route', () => {
+      vi.mocked(useResourceLocation).mockReturnValue({
+        data: {
+          hasLocation: true,
+          latitude: 40.7128,
+          longitude: -74.0060,
+          isTracking: true,
+          activeJob: {
+            id: 1,
+            title: 'Haircut - Jane Doe',
+            status: 'EN_ROUTE',
+            statusDisplay: 'En Route',
+          },
+        },
+        isLoading: false,
+        error: null,
+      } as any);
+
+      render(<ResourceDetailModal resource={mockResource} onClose={mockOnClose} />, {
+        wrapper: createWrapper(),
+      });
+
+      expect(screen.getByText('En Route')).toBeInTheDocument();
+      expect(screen.getByText('Haircut - Jane Doe')).toBeInTheDocument();
+      expect(screen.getByText('Live')).toBeInTheDocument();
+    });
+
+    it('displays active job when in progress', () => {
+      vi.mocked(useResourceLocation).mockReturnValue({
+        data: {
+          hasLocation: true,
+          latitude: 40.7128,
+          longitude: -74.0060,
+          isTracking: true,
+          activeJob: {
+            id: 1,
+            title: 'Massage - John Smith',
+            status: 'IN_PROGRESS',
+            statusDisplay: 'In Progress',
+          },
+        },
+        isLoading: false,
+        error: null,
+      } as any);
+
+      render(<ResourceDetailModal resource={mockResource} onClose={mockOnClose} />, {
+        wrapper: createWrapper(),
+      });
+
+      expect(screen.getByText('In Progress')).toBeInTheDocument();
+      expect(screen.getByText('Massage - John Smith')).toBeInTheDocument();
+    });
+
+    it('does not display active job section when no active job', () => {
+      vi.mocked(useResourceLocation).mockReturnValue({
+        data: {
+          hasLocation: true,
+          latitude: 40.7128,
+          longitude: -74.0060,
+          isTracking: false,
+          activeJob: null,
+        },
+        isLoading: false,
+        error: null,
+      } as any);
+
+      render(<ResourceDetailModal resource={mockResource} onClose={mockOnClose} />, {
+        wrapper: createWrapper(),
+      });
+
+      expect(screen.queryByText('En Route')).not.toBeInTheDocument();
+      expect(screen.queryByText('In Progress')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Google Maps fallback (no API key)', () => {
+    it('displays coordinates when maps API is not available', () => {
+      vi.mocked(useResourceLocation).mockReturnValue({
+        data: {
+          hasLocation: true,
+          latitude: 40.7128,
+          longitude: -74.0060,
+          isTracking: false,
+          activeJob: null,
+        },
+        isLoading: false,
+        error: null,
+      } as any);
+
+      import.meta.env.VITE_GOOGLE_MAPS_API_KEY = '';
+
+      render(<ResourceDetailModal resource={mockResource} onClose={mockOnClose} />, {
+        wrapper: createWrapper(),
+      });
+
+      expect(screen.getByText('GPS Coordinates')).toBeInTheDocument();
+      expect(screen.getByText(/40.712800, -74.006000/)).toBeInTheDocument();
+      expect(screen.getByText('Open in Google Maps')).toBeInTheDocument();
+    });
+
+    it('displays speed when available in fallback mode', () => {
+      vi.mocked(useResourceLocation).mockReturnValue({
+        data: {
+          hasLocation: true,
+          latitude: 40.7128,
+          longitude: -74.0060,
+          speed: 10, // m/s
+          isTracking: false,
+          activeJob: null,
+        },
+        isLoading: false,
+        error: null,
+      } as any);
+
+      render(<ResourceDetailModal resource={mockResource} onClose={mockOnClose} />, {
+        wrapper: createWrapper(),
+      });
+
+      // Speed is converted from m/s to mph: 10 * 2.237 = 22.37 mph
+      // Appears in both fallback view and details grid
+      const speedLabels = screen.getAllByText('Speed');
+      expect(speedLabels.length).toBeGreaterThan(0);
+      const speedValues = screen.getAllByText(/22.4 mph/);
+      expect(speedValues.length).toBeGreaterThan(0);
+    });
+
+    it('displays heading when available in fallback mode', () => {
+      vi.mocked(useResourceLocation).mockReturnValue({
+        data: {
+          hasLocation: true,
+          latitude: 40.7128,
+          longitude: -74.0060,
+          heading: 180,
+          isTracking: false,
+          activeJob: null,
+        },
+        isLoading: false,
+        error: null,
+      } as any);
+
+      render(<ResourceDetailModal resource={mockResource} onClose={mockOnClose} />, {
+        wrapper: createWrapper(),
+      });
+
+      // Appears in both fallback view and details grid
+      const headingLabels = screen.getAllByText('Heading');
+      expect(headingLabels.length).toBeGreaterThan(0);
+      const headingValues = screen.getAllByText(/180°/);
+      expect(headingValues.length).toBeGreaterThan(0);
+    });
+
+    it('renders Google Maps link with correct coordinates', () => {
+      vi.mocked(useResourceLocation).mockReturnValue({
+        data: {
+          hasLocation: true,
+          latitude: 40.7128,
+          longitude: -74.0060,
+          isTracking: false,
+          activeJob: null,
+        },
+        isLoading: false,
+        error: null,
+      } as any);
+
+      render(<ResourceDetailModal resource={mockResource} onClose={mockOnClose} />, {
+        wrapper: createWrapper(),
+      });
+
+      const link = screen.getByRole('link', { name: /open in google maps/i });
+      expect(link).toHaveAttribute(
+        'href',
+        'https://www.google.com/maps?q=40.7128,-74.006'
+      );
+      expect(link).toHaveAttribute('target', '_blank');
+      expect(link).toHaveAttribute('rel', 'noopener noreferrer');
+    });
+  });
+
+  describe('Google Maps display (with API key)', () => {
+    it('renders Google Map when API is loaded', () => {
+      // Note: This test verifies the Google Maps rendering logic
+      // In actual usage, API key would be provided via environment variable
+      // For testing, we mock the loader to return isLoaded: true
+
+      // Mock the global google object that the Marker component expects
+      (global as any).google = {
+        maps: {
+          SymbolPath: {
+            CIRCLE: 0,
+          },
+        },
+      };
+
+      vi.mocked(useJsApiLoader).mockReturnValue({
+        isLoaded: true,
+        loadError: null,
+      } as any);
+
+      vi.mocked(useResourceLocation).mockReturnValue({
+        data: {
+          hasLocation: true,
+          latitude: 40.7128,
+          longitude: -74.0060,
+          isTracking: false,
+          activeJob: null,
+        },
+        isLoading: false,
+        error: null,
+      } as any);
+
+      // Temporarily set API key for this test
+      const originalKey = import.meta.env.VITE_GOOGLE_MAPS_API_KEY;
+      (import.meta.env as any).VITE_GOOGLE_MAPS_API_KEY = 'test-key';
+
+      const { unmount } = render(
+        <ResourceDetailModal resource={mockResource} onClose={mockOnClose} />,
+        { wrapper: createWrapper() }
+      );
+
+      expect(screen.getByTestId('google-map')).toBeInTheDocument();
+      expect(screen.getByTestId('map-marker')).toBeInTheDocument();
+
+      // Cleanup
+      unmount();
+      (import.meta.env as any).VITE_GOOGLE_MAPS_API_KEY = originalKey;
+      delete (global as any).google;
+    });
+
+    it('shows loading spinner while maps API loads', () => {
+      vi.mocked(useResourceLocation).mockReturnValue({
+        data: {
+          hasLocation: true,
+          latitude: 40.7128,
+          longitude: -74.0060,
+          isTracking: false,
+          activeJob: null,
+        },
+        isLoading: false,
+        error: null,
+      } as any);
+
+      vi.mocked(useJsApiLoader).mockReturnValue({
+        isLoaded: false,
+        loadError: null,
+      } as any);
+
+      import.meta.env.VITE_GOOGLE_MAPS_API_KEY = 'test-api-key';
+
+      render(<ResourceDetailModal resource={mockResource} onClose={mockOnClose} />, {
+        wrapper: createWrapper(),
+      });
+
+      const spinner = document.querySelector('.animate-spin');
+      expect(spinner).toBeInTheDocument();
+    });
+  });
+
+  describe('Location details display', () => {
+    it('displays last update timestamp', () => {
+      vi.mocked(useResourceLocation).mockReturnValue({
+        data: {
+          hasLocation: true,
+          latitude: 40.7128,
+          longitude: -74.0060,
+          timestamp: '2024-01-15T14:30:00Z',
+          isTracking: false,
+          activeJob: null,
+        },
+        isLoading: false,
+        error: null,
+      } as any);
+
+      render(<ResourceDetailModal resource={mockResource} onClose={mockOnClose} />, {
+        wrapper: createWrapper(),
+      });
+
+      expect(screen.getByText('Last Update')).toBeInTheDocument();
+      // Timestamp is formatted using toLocaleString, just verify it's present
+      const timestampElement = screen.getByText(/2024/);
+      expect(timestampElement).toBeInTheDocument();
+    });
+
+    it('displays accuracy when available', () => {
+      vi.mocked(useResourceLocation).mockReturnValue({
+        data: {
+          hasLocation: true,
+          latitude: 40.7128,
+          longitude: -74.0060,
+          accuracy: 15,
+          isTracking: false,
+          activeJob: null,
+        },
+        isLoading: false,
+        error: null,
+      } as any);
+
+      render(<ResourceDetailModal resource={mockResource} onClose={mockOnClose} />, {
+        wrapper: createWrapper(),
+      });
+
+      expect(screen.getByText('Accuracy')).toBeInTheDocument();
+      expect(screen.getByText('15m')).toBeInTheDocument();
+    });
+
+    it('displays accuracy in kilometers when over 1000m', () => {
+      vi.mocked(useResourceLocation).mockReturnValue({
+        data: {
+          hasLocation: true,
+          latitude: 40.7128,
+          longitude: -74.0060,
+          accuracy: 2500,
+          isTracking: false,
+          activeJob: null,
+        },
+        isLoading: false,
+        error: null,
+      } as any);
+
+      render(<ResourceDetailModal resource={mockResource} onClose={mockOnClose} />, {
+        wrapper: createWrapper(),
+      });
+
+      expect(screen.getByText('2.5km')).toBeInTheDocument();
+    });
+
+    it('displays speed when available', () => {
+      vi.mocked(useResourceLocation).mockReturnValue({
+        data: {
+          hasLocation: true,
+          latitude: 40.7128,
+          longitude: -74.0060,
+          speed: 15, // m/s
+          isTracking: false,
+          activeJob: null,
+        },
+        isLoading: false,
+        error: null,
+      } as any);
+
+      render(<ResourceDetailModal resource={mockResource} onClose={mockOnClose} />, {
+        wrapper: createWrapper(),
+      });
+
+      // Speed section in details
+      const speedLabels = screen.getAllByText('Speed');
+      expect(speedLabels.length).toBeGreaterThan(0);
+      // 15 m/s * 2.237 = 33.6 mph
+      const speedValues = screen.getAllByText(/33.6 mph/);
+      expect(speedValues.length).toBeGreaterThan(0);
+    });
+
+    it('displays heading when available', () => {
+      vi.mocked(useResourceLocation).mockReturnValue({
+        data: {
+          hasLocation: true,
+          latitude: 40.7128,
+          longitude: -74.0060,
+          heading: 270,
+          isTracking: false,
+          activeJob: null,
+        },
+        isLoading: false,
+        error: null,
+      } as any);
+
+      render(<ResourceDetailModal resource={mockResource} onClose={mockOnClose} />, {
+        wrapper: createWrapper(),
+      });
+
+      const headingLabels = screen.getAllByText('Heading');
+      expect(headingLabels.length).toBeGreaterThan(0);
+      const headingValues = screen.getAllByText(/270°/);
+      expect(headingValues.length).toBeGreaterThan(0);
+    });
+
+    it('does not display speed when null', () => {
+      vi.mocked(useResourceLocation).mockReturnValue({
+        data: {
+          hasLocation: true,
+          latitude: 40.7128,
+          longitude: -74.0060,
+          speed: null,
+          isTracking: false,
+          activeJob: null,
+        },
+        isLoading: false,
+        error: null,
+      } as any);
+
+      render(<ResourceDetailModal resource={mockResource} onClose={mockOnClose} />, {
+        wrapper: createWrapper(),
+      });
+
+      expect(screen.queryByText('Speed')).not.toBeInTheDocument();
+    });
+
+    it('displays speed when 0', () => {
+      vi.mocked(useResourceLocation).mockReturnValue({
+        data: {
+          hasLocation: true,
+          latitude: 40.7128,
+          longitude: -74.0060,
+          speed: 0,
+          isTracking: false,
+          activeJob: null,
+        },
+        isLoading: false,
+        error: null,
+      } as any);
+
+      render(<ResourceDetailModal resource={mockResource} onClose={mockOnClose} />, {
+        wrapper: createWrapper(),
+      });
+
+      const speedLabels = screen.getAllByText('Speed');
+      expect(speedLabels.length).toBeGreaterThan(0);
+      const speedValues = screen.getAllByText(/0.0 mph/);
+      expect(speedValues.length).toBeGreaterThan(0);
+    });
+  });
+
+  describe('Live tracking indicator', () => {
+    it('displays live tracking badge when tracking is active', () => {
+      vi.mocked(useResourceLocation).mockReturnValue({
+        data: {
+          hasLocation: true,
+          latitude: 40.7128,
+          longitude: -74.0060,
+          isTracking: true,
+          activeJob: {
+            id: 1,
+            title: 'Test Job',
+            status: 'EN_ROUTE',
+            statusDisplay: 'En Route',
+          },
+        },
+        isLoading: false,
+        error: null,
+      } as any);
+
+      render(<ResourceDetailModal resource={mockResource} onClose={mockOnClose} />, {
+        wrapper: createWrapper(),
+      });
+
+      expect(screen.getByText('Live')).toBeInTheDocument();
+      const liveBadge = screen.getByText('Live').parentElement;
+      expect(liveBadge?.querySelector('.animate-pulse')).toBeInTheDocument();
+    });
+
+    it('does not display live tracking badge when not tracking', () => {
+      vi.mocked(useResourceLocation).mockReturnValue({
+        data: {
+          hasLocation: true,
+          latitude: 40.7128,
+          longitude: -74.0060,
+          isTracking: false,
+          activeJob: null,
+        },
+        isLoading: false,
+        error: null,
+      } as any);
+
+      render(<ResourceDetailModal resource={mockResource} onClose={mockOnClose} />, {
+        wrapper: createWrapper(),
+      });
+
+      expect(screen.queryByText('Live')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Live location updates hook', () => {
+    it('calls useLiveResourceLocation with resource ID', () => {
+      vi.mocked(useResourceLocation).mockReturnValue({
+        data: {
+          hasLocation: true,
+          latitude: 40.7128,
+          longitude: -74.0060,
+          isTracking: true,
+          activeJob: null,
+        },
+        isLoading: false,
+        error: null,
+      } as any);
+
+      render(<ResourceDetailModal resource={mockResource} onClose={mockOnClose} />, {
+        wrapper: createWrapper(),
+      });
+
+      expect(useLiveResourceLocation).toHaveBeenCalledWith('resource-1', {
+        enabled: true,
+      });
+    });
+
+    it('disables live updates when tracking is false', () => {
+      vi.mocked(useResourceLocation).mockReturnValue({
+        data: {
+          hasLocation: true,
+          latitude: 40.7128,
+          longitude: -74.0060,
+          isTracking: false,
+          activeJob: null,
+        },
+        isLoading: false,
+        error: null,
+      } as any);
+
+      render(<ResourceDetailModal resource={mockResource} onClose={mockOnClose} />, {
+        wrapper: createWrapper(),
+      });
+
+      expect(useLiveResourceLocation).toHaveBeenCalledWith('resource-1', {
+        enabled: false,
+      });
+    });
+  });
+
+  describe('Status color coding', () => {
+    it('applies yellow styling for EN_ROUTE status', () => {
+      vi.mocked(useResourceLocation).mockReturnValue({
+        data: {
+          hasLocation: true,
+          latitude: 40.7128,
+          longitude: -74.0060,
+          isTracking: true,
+          activeJob: {
+            id: 1,
+            title: 'Test Job',
+            status: 'EN_ROUTE',
+            statusDisplay: 'En Route',
+          },
+        },
+        isLoading: false,
+        error: null,
+      } as any);
+
+      render(<ResourceDetailModal resource={mockResource} onClose={mockOnClose} />, {
+        wrapper: createWrapper(),
+      });
+
+      // Find the parent container with the colored border and background
+      const statusSection = screen.getByText('En Route').closest('.p-4');
+      expect(statusSection?.className).toMatch(/yellow/);
+    });
+
+    it('applies blue styling for IN_PROGRESS status', () => {
+      vi.mocked(useResourceLocation).mockReturnValue({
+        data: {
+          hasLocation: true,
+          latitude: 40.7128,
+          longitude: -74.0060,
+          isTracking: true,
+          activeJob: {
+            id: 1,
+            title: 'Test Job',
+            status: 'IN_PROGRESS',
+            statusDisplay: 'In Progress',
+          },
+        },
+        isLoading: false,
+        error: null,
+      } as any);
+
+      render(<ResourceDetailModal resource={mockResource} onClose={mockOnClose} />, {
+        wrapper: createWrapper(),
+      });
+
+      // Find the parent container with the colored border and background
+      const statusSection = screen.getByText('In Progress').closest('.p-4');
+      expect(statusSection?.className).toMatch(/blue/);
+    });
+
+    it('applies gray styling for other status', () => {
+      vi.mocked(useResourceLocation).mockReturnValue({
+        data: {
+          hasLocation: true,
+          latitude: 40.7128,
+          longitude: -74.0060,
+          isTracking: true,
+          activeJob: {
+            id: 1,
+            title: 'Test Job',
+            status: 'COMPLETED',
+            statusDisplay: 'Completed',
+          },
+        },
+        isLoading: false,
+        error: null,
+      } as any);
+
+      render(<ResourceDetailModal resource={mockResource} onClose={mockOnClose} />, {
+        wrapper: createWrapper(),
+      });
+
+      // Find the parent container with the colored border and background
+      const statusSection = screen.getByText('Completed').closest('.p-4');
+      expect(statusSection?.className).toMatch(/gray/);
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('has accessible close button label', () => {
+      render(<ResourceDetailModal resource={mockResource} onClose={mockOnClose} />, {
+        wrapper: createWrapper(),
+      });
+
+      const srOnly = document.querySelector('.sr-only');
+      expect(srOnly?.textContent).toBe('common.close');
+    });
+
+    it('renders with proper heading hierarchy', () => {
+      render(<ResourceDetailModal resource={mockResource} onClose={mockOnClose} />, {
+        wrapper: createWrapper(),
+      });
+
+      const heading = screen.getByRole('heading', { level: 3 });
+      expect(heading).toHaveTextContent('John Smith');
+    });
+  });
+});

frontend/src/components/__tests__/StaffPermissions.test.tsx

@@ -0,0 +1,348 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import React from 'react';
+import StaffPermissions, {
+  PERMISSION_CONFIGS,
+  SETTINGS_PERMISSION_CONFIGS,
+  getDefaultPermissions,
+} from '../StaffPermissions';
+
+// Mock react-i18next BEFORE imports
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string, fallback?: string) => fallback || key,
+  }),
+}));
+
+// Mock lucide-react icons
+vi.mock('lucide-react', () => ({
+  ChevronDown: () => React.createElement('div', { 'data-testid': 'chevron-down' }),
+  ChevronRight: () => React.createElement('div', { 'data-testid': 'chevron-right' }),
+}));
+
+describe('StaffPermissions', () => {
+  const defaultProps = {
+    role: 'staff' as const,
+    permissions: {},
+    onChange: vi.fn(),
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('rendering', () => {
+    it('renders component with title', () => {
+      render(React.createElement(StaffPermissions, defaultProps));
+      expect(screen.getByText('Staff Permissions')).toBeInTheDocument();
+    });
+
+    it('renders all regular permission checkboxes', () => {
+      render(React.createElement(StaffPermissions, defaultProps));
+
+      PERMISSION_CONFIGS.forEach((config) => {
+        expect(screen.getByText(config.labelDefault)).toBeInTheDocument();
+        expect(screen.getByText(config.hintDefault)).toBeInTheDocument();
+      });
+    });
+
+    it('renders business settings section', () => {
+      render(React.createElement(StaffPermissions, defaultProps));
+      expect(screen.getByText('Can access business settings')).toBeInTheDocument();
+    });
+
+    it('does not show settings sub-permissions when settings is disabled', () => {
+      render(
+        React.createElement(StaffPermissions, {
+          ...defaultProps,
+          permissions: { can_access_settings: false },
+        })
+      );
+
+      // Settings sub-permissions should not be visible
+      expect(screen.queryByText('General Settings')).not.toBeInTheDocument();
+      expect(screen.queryByText('Business Hours')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('permission toggling', () => {
+    it('calls onChange when regular permission is toggled', () => {
+      const onChange = vi.fn();
+      render(
+        React.createElement(StaffPermissions, {
+          ...defaultProps,
+          onChange,
+        })
+      );
+
+      const checkbox = screen
+        .getByText('Can invite new staff members')
+        .closest('label')
+        ?.querySelector('input');
+      if (checkbox) {
+        fireEvent.click(checkbox);
+      }
+
+      expect(onChange).toHaveBeenCalledWith(
+        expect.objectContaining({ can_invite_staff: true })
+      );
+    });
+
+    it('reflects checked state from permissions prop', () => {
+      render(
+        React.createElement(StaffPermissions, {
+          ...defaultProps,
+          permissions: { can_invite_staff: true },
+        })
+      );
+
+      const checkbox = screen
+        .getByText('Can invite new staff members')
+        .closest('label')
+        ?.querySelector('input') as HTMLInputElement;
+
+      expect(checkbox.checked).toBe(true);
+    });
+
+    it('uses default values for unconfigured permissions', () => {
+      render(React.createElement(StaffPermissions, defaultProps));
+
+      // can_manage_own_appointments has defaultValue: true
+      const checkbox = screen
+        .getByText('Can manage own appointments')
+        .closest('label')
+        ?.querySelector('input') as HTMLInputElement;
+
+      expect(checkbox.checked).toBe(true);
+    });
+  });
+
+  describe('business settings section', () => {
+    it('expands settings section when settings checkbox is enabled', () => {
+      const onChange = vi.fn();
+      render(
+        React.createElement(StaffPermissions, {
+          ...defaultProps,
+          onChange,
+        })
+      );
+
+      // Find all checkboxes and get the last one (settings checkbox)
+      const checkboxes = screen.getAllByRole('checkbox');
+      const settingsCheckbox = checkboxes[checkboxes.length - 1];
+
+      fireEvent.click(settingsCheckbox);
+
+      expect(onChange).toHaveBeenCalledWith(
+        expect.objectContaining({ can_access_settings: true })
+      );
+    });
+
+    it('shows settings sub-permissions when expanded', async () => {
+      render(
+        React.createElement(StaffPermissions, {
+          ...defaultProps,
+          permissions: { can_access_settings: true },
+        })
+      );
+
+      const settingsDiv = screen.getByText('Can access business settings').closest('div');
+      if (settingsDiv) {
+        fireEvent.click(settingsDiv);
+      }
+
+      await waitFor(() => {
+        expect(screen.getByText('General Settings')).toBeInTheDocument();
+        expect(screen.getByText('Business Hours')).toBeInTheDocument();
+      });
+    });
+
+    it('shows multiple enabled sub-settings count', () => {
+      render(
+        React.createElement(StaffPermissions, {
+          ...defaultProps,
+          permissions: {
+            can_access_settings: true,
+            can_access_settings_general: true,
+            can_access_settings_business_hours: true,
+          },
+          onChange: vi.fn(),
+        })
+      );
+
+      // The component should render with settings enabled
+      expect(screen.getByText(/\(2\/\d+ enabled\)/)).toBeInTheDocument();
+    });
+
+    it('shows enabled settings count badge', () => {
+      render(
+        React.createElement(StaffPermissions, {
+          ...defaultProps,
+          permissions: {
+            can_access_settings: true,
+            can_access_settings_general: true,
+            can_access_settings_branding: true,
+          },
+        })
+      );
+
+      expect(screen.getByText(/2\/\d+ enabled/)).toBeInTheDocument();
+    });
+
+    it('toggles expansion with chevron button', async () => {
+      render(
+        React.createElement(StaffPermissions, {
+          ...defaultProps,
+          permissions: { can_access_settings: true },
+        })
+      );
+
+      // Find and click the chevron button
+      const chevronButton = screen.getByTestId('chevron-right').closest('button');
+      if (chevronButton) {
+        fireEvent.click(chevronButton);
+      }
+
+      await waitFor(() => {
+        expect(screen.getByText('General Settings')).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('settings sub-permissions', () => {
+    it('shows select all and select none buttons when expanded', async () => {
+      render(
+        React.createElement(StaffPermissions, {
+          ...defaultProps,
+          permissions: { can_access_settings: true },
+        })
+      );
+
+      const settingsDiv = screen.getByText('Can access business settings').closest('div');
+      if (settingsDiv) {
+        fireEvent.click(settingsDiv);
+      }
+
+      await waitFor(() => {
+        expect(screen.getByText('Select All')).toBeInTheDocument();
+        expect(screen.getByText('Select None')).toBeInTheDocument();
+      });
+    });
+
+    it('selects all settings when select all is clicked', async () => {
+      const onChange = vi.fn();
+      render(
+        React.createElement(StaffPermissions, {
+          ...defaultProps,
+          permissions: { can_access_settings: true },
+          onChange,
+        })
+      );
+
+      const settingsDiv = screen.getByText('Can access business settings').closest('div');
+      if (settingsDiv) {
+        fireEvent.click(settingsDiv);
+      }
+
+      await waitFor(() => {
+        const selectAllButton = screen.getByText('Select All');
+        fireEvent.click(selectAllButton);
+      });
+
+      expect(onChange).toHaveBeenCalled();
+      const lastCall = onChange.mock.calls[onChange.mock.calls.length - 1][0];
+
+      SETTINGS_PERMISSION_CONFIGS.forEach((config) => {
+        expect(lastCall[config.key]).toBe(true);
+      });
+    });
+
+    it('shows expanded state when settings has sub-permissions enabled', () => {
+      render(
+        React.createElement(StaffPermissions, {
+          ...defaultProps,
+          permissions: {
+            can_access_settings: true,
+            can_access_settings_general: true,
+          },
+          onChange: vi.fn(),
+        })
+      );
+
+      // Should show the settings count badge
+      expect(screen.getByText(/1\/\d+ enabled/)).toBeInTheDocument();
+    });
+
+    it('toggles individual settings permission', async () => {
+      const onChange = vi.fn();
+      render(
+        React.createElement(StaffPermissions, {
+          ...defaultProps,
+          permissions: { can_access_settings: true },
+          onChange,
+        })
+      );
+
+      const settingsDiv = screen.getByText('Can access business settings').closest('div');
+      if (settingsDiv) {
+        fireEvent.click(settingsDiv);
+      }
+
+      await waitFor(() => {
+        const generalCheckbox = screen
+          .getByText('General Settings')
+          .closest('label')
+          ?.querySelector('input');
+        if (generalCheckbox) {
+          fireEvent.click(generalCheckbox);
+        }
+      });
+
+      expect(onChange).toHaveBeenCalledWith(
+        expect.objectContaining({ can_access_settings_general: true })
+      );
+    });
+  });
+
+  describe('variant props', () => {
+    it('accepts invite variant', () => {
+      render(
+        React.createElement(StaffPermissions, {
+          ...defaultProps,
+          variant: 'invite',
+        })
+      );
+
+      expect(screen.getByText('Staff Permissions')).toBeInTheDocument();
+    });
+
+    it('accepts edit variant', () => {
+      render(
+        React.createElement(StaffPermissions, {
+          ...defaultProps,
+          variant: 'edit',
+        })
+      );
+
+      expect(screen.getByText('Staff Permissions')).toBeInTheDocument();
+    });
+  });
+
+  describe('getDefaultPermissions helper', () => {
+    it('returns default values for all permissions', () => {
+      const defaults = getDefaultPermissions();
+
+      expect(defaults).toHaveProperty('can_access_settings', false);
+      expect(defaults).toHaveProperty('can_manage_own_appointments', true);
+      expect(defaults).toHaveProperty('can_invite_staff', false);
+
+      PERMISSION_CONFIGS.forEach((config) => {
+        expect(defaults).toHaveProperty(config.key, config.defaultValue);
+      });
+
+      SETTINGS_PERMISSION_CONFIGS.forEach((config) => {
+        expect(defaults).toHaveProperty(config.key, config.defaultValue);
+      });
+    });
+  });
+});

frontend/src/components/__tests__/UserProfileDropdown.test.tsx

@@ -0,0 +1,241 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import React from 'react';
+import UserProfileDropdown from '../UserProfileDropdown';
+import { User } from '../../types';
+
+// Mock react-router-dom BEFORE imports
+vi.mock('react-router-dom', () => ({
+  Link: ({ to, children, ...props }: any) =>
+    React.createElement('a', { ...props, href: to }, children),
+  useLocation: () => ({ pathname: '/dashboard' }),
+}));
+
+// Mock react-i18next
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string, fallback?: string) => fallback || key,
+  }),
+}));
+
+// Mock lucide-react icons
+vi.mock('lucide-react', () => ({
+  User: () => React.createElement('div', { 'data-testid': 'user-icon' }),
+  Settings: () => React.createElement('div', { 'data-testid': 'settings-icon' }),
+  LogOut: () => React.createElement('div', { 'data-testid': 'logout-icon' }),
+  ChevronDown: () => React.createElement('div', { 'data-testid': 'chevron-icon' }),
+}));
+
+// Mock useAuth hook
+const mockLogout = vi.fn();
+vi.mock('../../hooks/useAuth', () => ({
+  useLogout: () => ({
+    mutate: mockLogout,
+    isPending: false,
+  }),
+}));
+
+describe('UserProfileDropdown', () => {
+  const mockUser: User = {
+    id: 1,
+    email: 'john@example.com',
+    name: 'John Doe',
+    role: 'owner' as any,
+    phone: '',
+    isActive: true,
+    permissions: {},
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('rendering', () => {
+    it('renders user name', () => {
+      render(React.createElement(UserProfileDropdown, { user: mockUser }));
+      expect(screen.getByText('John Doe')).toBeInTheDocument();
+    });
+
+    it('renders formatted role', () => {
+      render(React.createElement(UserProfileDropdown, { user: mockUser }));
+      expect(screen.getByText('Owner')).toBeInTheDocument();
+    });
+
+    it('renders formatted role with underscores replaced', () => {
+      const staffUser = { ...mockUser, role: 'platform_manager' as any };
+      render(React.createElement(UserProfileDropdown, { user: staffUser }));
+      expect(screen.getByText('Platform Manager')).toBeInTheDocument();
+    });
+
+    it('renders user avatar when avatarUrl is provided', () => {
+      const userWithAvatar = { ...mockUser, avatarUrl: 'https://example.com/avatar.jpg' };
+      const { container } = render(React.createElement(UserProfileDropdown, { user: userWithAvatar }));
+      const img = container.querySelector('img[alt="John Doe"]');
+      expect(img).toBeInTheDocument();
+      expect(img).toHaveAttribute('src', 'https://example.com/avatar.jpg');
+    });
+
+    it('renders user initials when no avatar', () => {
+      render(React.createElement(UserProfileDropdown, { user: mockUser }));
+      expect(screen.getByText('JD')).toBeInTheDocument();
+    });
+
+    it('renders single letter initial for single name', () => {
+      const singleNameUser = { ...mockUser, name: 'Madonna' };
+      render(React.createElement(UserProfileDropdown, { user: singleNameUser }));
+      expect(screen.getByText('M')).toBeInTheDocument();
+    });
+
+    it('renders first two initials for multi-word name', () => {
+      const multiNameUser = { ...mockUser, name: 'John Paul Jones' };
+      render(React.createElement(UserProfileDropdown, { user: multiNameUser }));
+      expect(screen.getByText('JP')).toBeInTheDocument();
+    });
+  });
+
+  describe('dropdown interaction', () => {
+    it('is closed by default', () => {
+      render(React.createElement(UserProfileDropdown, { user: mockUser }));
+      expect(screen.queryByText('Profile Settings')).not.toBeInTheDocument();
+    });
+
+    it('opens dropdown when button clicked', () => {
+      render(React.createElement(UserProfileDropdown, { user: mockUser }));
+      const button = screen.getByRole('button');
+      fireEvent.click(button);
+      expect(screen.getByText('Profile Settings')).toBeInTheDocument();
+    });
+
+    it('shows user email in dropdown header', () => {
+      render(React.createElement(UserProfileDropdown, { user: mockUser }));
+      const button = screen.getByRole('button');
+      fireEvent.click(button);
+      expect(screen.getByText('john@example.com')).toBeInTheDocument();
+    });
+
+    it('closes dropdown when clicking outside', async () => {
+      const { container } = render(React.createElement(UserProfileDropdown, { user: mockUser }));
+      const button = screen.getByRole('button');
+      fireEvent.click(button);
+      expect(screen.getByText('Profile Settings')).toBeInTheDocument();
+
+      // Click outside
+      fireEvent.mouseDown(document.body);
+      await waitFor(() => {
+        expect(screen.queryByText('Profile Settings')).not.toBeInTheDocument();
+      });
+    });
+
+    it('closes dropdown on escape key', async () => {
+      render(React.createElement(UserProfileDropdown, { user: mockUser }));
+      const button = screen.getByRole('button');
+      fireEvent.click(button);
+      expect(screen.getByText('Profile Settings')).toBeInTheDocument();
+
+      fireEvent.keyDown(document, { key: 'Escape' });
+      await waitFor(() => {
+        expect(screen.queryByText('Profile Settings')).not.toBeInTheDocument();
+      });
+    });
+
+    it('sets aria-expanded attribute correctly', () => {
+      render(React.createElement(UserProfileDropdown, { user: mockUser }));
+      const button = screen.getByRole('button');
+      expect(button).toHaveAttribute('aria-expanded', 'false');
+
+      fireEvent.click(button);
+      expect(button).toHaveAttribute('aria-expanded', 'true');
+    });
+  });
+
+  describe('navigation', () => {
+    it('links to /profile for non-platform routes', () => {
+      const { container } = render(React.createElement(UserProfileDropdown, { user: mockUser }));
+      const button = screen.getByRole('button');
+      fireEvent.click(button);
+
+      const link = container.querySelector('a[href="/profile"]');
+      expect(link).toBeInTheDocument();
+    });
+
+    it('profile settings link renders correctly', () => {
+      render(React.createElement(UserProfileDropdown, { user: mockUser }));
+      const button = screen.getByRole('button');
+      fireEvent.click(button);
+
+      expect(screen.getByText('Profile Settings')).toBeInTheDocument();
+    });
+
+    it('closes dropdown when profile link is clicked', async () => {
+      render(React.createElement(UserProfileDropdown, { user: mockUser }));
+      const button = screen.getByRole('button');
+      fireEvent.click(button);
+
+      const profileLink = screen.getByText('Profile Settings');
+      fireEvent.click(profileLink);
+
+      await waitFor(() => {
+        expect(screen.queryByText('Sign Out')).not.toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('sign out', () => {
+    it('renders sign out button', () => {
+      render(React.createElement(UserProfileDropdown, { user: mockUser }));
+      const button = screen.getByRole('button');
+      fireEvent.click(button);
+      expect(screen.getByText('Sign Out')).toBeInTheDocument();
+    });
+
+    it('calls logout when sign out clicked', () => {
+      render(React.createElement(UserProfileDropdown, { user: mockUser }));
+      const button = screen.getByRole('button');
+      fireEvent.click(button);
+
+      const signOutButton = screen.getByText('Sign Out');
+      fireEvent.click(signOutButton);
+
+      expect(mockLogout).toHaveBeenCalled();
+    });
+
+    it('sign out button is functional', () => {
+      render(React.createElement(UserProfileDropdown, { user: mockUser }));
+      const button = screen.getByRole('button');
+      fireEvent.click(button);
+
+      const signOutButton = screen.getByText('Sign Out').closest('button');
+      expect(signOutButton).not.toBeDisabled();
+    });
+  });
+
+  describe('variants', () => {
+    it('applies default variant styles', () => {
+      const { container } = render(React.createElement(UserProfileDropdown, { user: mockUser }));
+      const button = container.querySelector('button');
+      expect(button?.className).toContain('border-gray-200');
+    });
+
+    it('applies light variant styles', () => {
+      const { container } = render(
+        React.createElement(UserProfileDropdown, {
+          user: mockUser,
+          variant: 'light',
+        })
+      );
+      const button = container.querySelector('button');
+      expect(button?.className).toContain('border-white/20');
+    });
+
+    it('shows white text in light variant', () => {
+      const { container } = render(
+        React.createElement(UserProfileDropdown, {
+          user: mockUser,
+          variant: 'light',
+        })
+      );
+      const userName = screen.getByText('John Doe');
+      expect(userName.className).toContain('text-white');
+    });
+  });
+});

frontend/src/components/booking/__tests__/ManualSchedulingRequest.test.tsx

@@ -0,0 +1,297 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import React from 'react';
+import { ManualSchedulingRequest } from '../ManualSchedulingRequest';
+
+// Mock Lucide icons
+vi.mock('lucide-react', () => ({
+  Phone: () => <span data-testid="icon-phone" />,
+  Calendar: () => <span data-testid="icon-calendar" />,
+  Clock: () => <span data-testid="icon-clock" />,
+  Check: () => <span data-testid="icon-check" />,
+}));
+
+describe('ManualSchedulingRequest', () => {
+  const mockService = {
+    id: 1,
+    name: 'Consultation',
+    description: 'Professional consultation',
+    duration: 60,
+    price_cents: 10000,
+    photos: [],
+    capture_preferred_time: true,
+  };
+
+  const mockServiceNoPreferredTime = {
+    ...mockService,
+    capture_preferred_time: false,
+  };
+
+  const defaultProps = {
+    service: mockService,
+    onPreferredTimeChange: vi.fn(),
+    preferredDate: null,
+    preferredTimeNotes: '',
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('renders the call message', () => {
+    render(React.createElement(ManualSchedulingRequest, defaultProps));
+    expect(screen.getByText("We'll call you to schedule")).toBeInTheDocument();
+    expect(screen.getByText(/Our team will contact you within 24 hours/)).toBeInTheDocument();
+  });
+
+  it('displays service name in message', () => {
+    render(React.createElement(ManualSchedulingRequest, defaultProps));
+    expect(screen.getByText(/Consultation/)).toBeInTheDocument();
+  });
+
+  it('shows phone icon', () => {
+    render(React.createElement(ManualSchedulingRequest, defaultProps));
+    expect(screen.getByTestId('icon-phone')).toBeInTheDocument();
+  });
+
+  it('shows preferred time section when capture_preferred_time is true', () => {
+    render(React.createElement(ManualSchedulingRequest, defaultProps));
+    expect(screen.getByText('I have a preferred time')).toBeInTheDocument();
+  });
+
+  it('hides preferred time section when capture_preferred_time is false', () => {
+    const props = { ...defaultProps, service: mockServiceNoPreferredTime };
+    render(React.createElement(ManualSchedulingRequest, props));
+    expect(screen.queryByText('I have a preferred time')).not.toBeInTheDocument();
+  });
+
+  it('shows checkbox for preferred time', () => {
+    render(React.createElement(ManualSchedulingRequest, defaultProps));
+    const checkbox = screen.getByText('I have a preferred time').closest('div[class*="cursor-pointer"]');
+    expect(checkbox).toBeInTheDocument();
+  });
+
+  it('toggles preferred time inputs when checkbox is clicked', () => {
+    render(React.createElement(ManualSchedulingRequest, defaultProps));
+
+    // Initially hidden
+    expect(screen.queryByPlaceholderText('e.g., Morning, After 2pm, Weekends only')).not.toBeInTheDocument();
+
+    // Click to show
+    const checkbox = screen.getByText('I have a preferred time').closest('div[class*="cursor-pointer"]');
+    fireEvent.click(checkbox!);
+
+    // Now visible
+    expect(screen.getByPlaceholderText('e.g., Morning, After 2pm, Weekends only')).toBeInTheDocument();
+  });
+
+  it('displays date input when preferred time is enabled', () => {
+    render(React.createElement(ManualSchedulingRequest, defaultProps));
+
+    const checkbox = screen.getByText('I have a preferred time').closest('div[class*="cursor-pointer"]');
+    fireEvent.click(checkbox!);
+
+    const dateInput = document.querySelector('input[type="date"]');
+    expect(dateInput).toBeInTheDocument();
+  });
+
+  it('displays time notes input when preferred time is enabled', () => {
+    render(React.createElement(ManualSchedulingRequest, defaultProps));
+
+    const checkbox = screen.getByText('I have a preferred time').closest('div[class*="cursor-pointer"]');
+    fireEvent.click(checkbox!);
+
+    expect(screen.getByPlaceholderText('e.g., Morning, After 2pm, Weekends only')).toBeInTheDocument();
+  });
+
+  it('calls onPreferredTimeChange with null when toggling off', () => {
+    const onPreferredTimeChange = vi.fn();
+    const props = { ...defaultProps, onPreferredTimeChange, preferredDate: '2024-12-20', preferredTimeNotes: 'Morning' };
+
+    render(React.createElement(ManualSchedulingRequest, props));
+
+    // Should be enabled initially
+    const checkbox = screen.getByText('I have a preferred time').closest('div[class*="cursor-pointer"]');
+    fireEvent.click(checkbox!);
+
+    expect(onPreferredTimeChange).toHaveBeenCalledWith(null, '');
+  });
+
+  it('calls onPreferredTimeChange when date changes', () => {
+    const onPreferredTimeChange = vi.fn();
+    const props = { ...defaultProps, onPreferredTimeChange };
+
+    render(React.createElement(ManualSchedulingRequest, props));
+
+    const checkbox = screen.getByText('I have a preferred time').closest('div[class*="cursor-pointer"]');
+    fireEvent.click(checkbox!);
+
+    const dateInput = document.querySelector('input[type="date"]') as HTMLInputElement;
+    fireEvent.change(dateInput, { target: { value: '2024-12-25' } });
+
+    expect(onPreferredTimeChange).toHaveBeenCalledWith('2024-12-25', '');
+  });
+
+  it('calls onPreferredTimeChange when notes change', () => {
+    const onPreferredTimeChange = vi.fn();
+    const props = { ...defaultProps, onPreferredTimeChange };
+
+    render(React.createElement(ManualSchedulingRequest, props));
+
+    const checkbox = screen.getByText('I have a preferred time').closest('div[class*="cursor-pointer"]');
+    fireEvent.click(checkbox!);
+
+    const notesInput = screen.getByPlaceholderText('e.g., Morning, After 2pm, Weekends only');
+    fireEvent.change(notesInput, { target: { value: 'Afternoon preferred' } });
+
+    expect(onPreferredTimeChange).toHaveBeenCalledWith(null, 'Afternoon preferred');
+  });
+
+  it('shows calendar icon when inputs are visible', () => {
+    render(React.createElement(ManualSchedulingRequest, defaultProps));
+
+    const checkbox = screen.getByText('I have a preferred time').closest('div[class*="cursor-pointer"]');
+    fireEvent.click(checkbox!);
+
+    expect(screen.getByTestId('icon-calendar')).toBeInTheDocument();
+  });
+
+  it('shows clock icon when inputs are visible', () => {
+    render(React.createElement(ManualSchedulingRequest, defaultProps));
+
+    const checkbox = screen.getByText('I have a preferred time').closest('div[class*="cursor-pointer"]');
+    fireEvent.click(checkbox!);
+
+    expect(screen.getByTestId('icon-clock')).toBeInTheDocument();
+  });
+
+  it('displays "What happens next?" section', () => {
+    render(React.createElement(ManualSchedulingRequest, defaultProps));
+    expect(screen.getByText('What happens next?')).toBeInTheDocument();
+  });
+
+  it('displays three steps in "What happens next?"', () => {
+    render(React.createElement(ManualSchedulingRequest, defaultProps));
+    expect(screen.getByText('Complete your booking request')).toBeInTheDocument();
+    expect(screen.getByText("We'll call you within 24 hours to schedule")).toBeInTheDocument();
+    expect(screen.getByText('Confirm your appointment time over the phone')).toBeInTheDocument();
+  });
+
+  it('sets minimum date to tomorrow', () => {
+    render(React.createElement(ManualSchedulingRequest, defaultProps));
+
+    const checkbox = screen.getByText('I have a preferred time').closest('div[class*="cursor-pointer"]');
+    fireEvent.click(checkbox!);
+
+    const dateInput = document.querySelector('input[type="date"]') as HTMLInputElement;
+    expect(dateInput).toHaveAttribute('min');
+
+    const minDate = dateInput.getAttribute('min');
+    const tomorrow = new Date();
+    tomorrow.setDate(tomorrow.getDate() + 1);
+    const expectedMin = tomorrow.toISOString().split('T')[0];
+
+    expect(minDate).toBe(expectedMin);
+  });
+
+  it('shows check icon when preferred time is selected', () => {
+    render(React.createElement(ManualSchedulingRequest, defaultProps));
+
+    const checkbox = screen.getByText('I have a preferred time').closest('div[class*="cursor-pointer"]');
+    fireEvent.click(checkbox!);
+
+    expect(screen.getByTestId('icon-check')).toBeInTheDocument();
+  });
+
+  it('displays preferred date label', () => {
+    render(React.createElement(ManualSchedulingRequest, defaultProps));
+
+    const checkbox = screen.getByText('I have a preferred time').closest('div[class*="cursor-pointer"]');
+    fireEvent.click(checkbox!);
+
+    expect(screen.getByText('Preferred Date')).toBeInTheDocument();
+  });
+
+  it('displays time preference label', () => {
+    render(React.createElement(ManualSchedulingRequest, defaultProps));
+
+    const checkbox = screen.getByText('I have a preferred time').closest('div[class*="cursor-pointer"]');
+    fireEvent.click(checkbox!);
+
+    expect(screen.getByText('Time Preference')).toBeInTheDocument();
+  });
+
+  it('displays helper text for time preference', () => {
+    render(React.createElement(ManualSchedulingRequest, defaultProps));
+
+    const checkbox = screen.getByText('I have a preferred time').closest('div[class*="cursor-pointer"]');
+    fireEvent.click(checkbox!);
+
+    expect(screen.getByText('Any general time preferences that would work for you')).toBeInTheDocument();
+  });
+
+  it('highlights checkbox area when preferred time is selected', () => {
+    render(React.createElement(ManualSchedulingRequest, defaultProps));
+
+    const checkboxArea = screen.getByText('I have a preferred time').closest('div[class*="cursor-pointer"]');
+
+    // Not highlighted initially
+    expect(checkboxArea).not.toHaveClass('border-blue-500');
+
+    fireEvent.click(checkboxArea!);
+
+    // Highlighted after click
+    expect(checkboxArea).toHaveClass('border-blue-500');
+  });
+
+  it('preserves existing date when notes change', () => {
+    const onPreferredTimeChange = vi.fn();
+    const props = { ...defaultProps, onPreferredTimeChange, preferredDate: '2024-12-20' };
+
+    render(React.createElement(ManualSchedulingRequest, props));
+
+    // Inputs should already be visible since preferredDate is set
+    const notesInput = screen.getByPlaceholderText('e.g., Morning, After 2pm, Weekends only');
+    fireEvent.change(notesInput, { target: { value: 'Morning' } });
+
+    expect(onPreferredTimeChange).toHaveBeenCalledWith('2024-12-20', 'Morning');
+  });
+
+  it('preserves existing notes when date changes', () => {
+    const onPreferredTimeChange = vi.fn();
+    const props = { ...defaultProps, onPreferredTimeChange, preferredTimeNotes: 'Morning' };
+
+    render(React.createElement(ManualSchedulingRequest, props));
+
+    // Inputs should already be visible since preferredTimeNotes is set
+    const dateInput = document.querySelector('input[type="date"]') as HTMLInputElement;
+    expect(dateInput).toBeTruthy();
+
+    fireEvent.change(dateInput, { target: { value: '2024-12-25' } });
+
+    expect(onPreferredTimeChange).toHaveBeenCalledWith('2024-12-25', 'Morning');
+  });
+
+  it('initializes with preferred time enabled when date is set', () => {
+    const props = { ...defaultProps, preferredDate: '2024-12-20' };
+    render(React.createElement(ManualSchedulingRequest, props));
+
+    // Should show inputs immediately
+    expect(screen.getByPlaceholderText('e.g., Morning, After 2pm, Weekends only')).toBeInTheDocument();
+  });
+
+  it('initializes with preferred time enabled when notes are set', () => {
+    const props = { ...defaultProps, preferredTimeNotes: 'Morning preferred' };
+    render(React.createElement(ManualSchedulingRequest, props));
+
+    // Should show inputs immediately
+    expect(screen.getByPlaceholderText('e.g., Morning, After 2pm, Weekends only')).toBeInTheDocument();
+  });
+
+  it('displays step numbers in order', () => {
+    render(React.createElement(ManualSchedulingRequest, defaultProps));
+
+    const stepNumbers = screen.getAllByText(/^[123]$/);
+    expect(stepNumbers).toHaveLength(3);
+  });
+});

frontend/src/components/booking/__tests__/PaymentSection.test.tsx

@@ -0,0 +1,229 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import React from 'react';
+import { PaymentSection } from '../PaymentSection';
+
+// Mock Lucide icons
+vi.mock('lucide-react', () => ({
+  CreditCard: () => <span data-testid="icon-credit-card" />,
+  ShieldCheck: () => <span data-testid="icon-shield-check" />,
+  Lock: () => <span data-testid="icon-lock" />,
+}));
+
+describe('PaymentSection', () => {
+  const mockService = {
+    id: 1,
+    name: 'Haircut',
+    description: 'A professional haircut',
+    duration: 30,
+    price_cents: 2500,
+    photos: [],
+    deposit_amount_cents: 0,
+  };
+
+  const mockServiceWithDeposit = {
+    ...mockService,
+    deposit_amount_cents: 1000,
+  };
+
+  const defaultProps = {
+    service: mockService,
+    onPaymentComplete: vi.fn(),
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it('renders payment form', () => {
+    render(React.createElement(PaymentSection, defaultProps));
+    expect(screen.getByText('Card Details')).toBeInTheDocument();
+    expect(screen.getByPlaceholderText('0000 0000 0000 0000')).toBeInTheDocument();
+    expect(screen.getByPlaceholderText('MM / YY')).toBeInTheDocument();
+    expect(screen.getByPlaceholderText('123')).toBeInTheDocument();
+  });
+
+  it('displays service total price', () => {
+    render(React.createElement(PaymentSection, defaultProps));
+    expect(screen.getByText('Service Total')).toBeInTheDocument();
+    const prices = screen.getAllByText('$25.00');
+    expect(prices.length).toBeGreaterThan(0);
+  });
+
+  it('displays tax line item', () => {
+    render(React.createElement(PaymentSection, defaultProps));
+    expect(screen.getByText('Tax (Estimated)')).toBeInTheDocument();
+    expect(screen.getByText('$0.00')).toBeInTheDocument();
+  });
+
+  it('displays total amount', () => {
+    render(React.createElement(PaymentSection, defaultProps));
+    const totals = screen.getAllByText('$25.00');
+    expect(totals.length).toBeGreaterThan(0);
+  });
+
+  it('formats card number input with spaces', () => {
+    render(React.createElement(PaymentSection, defaultProps));
+    const cardInput = screen.getByPlaceholderText('0000 0000 0000 0000') as HTMLInputElement;
+
+    fireEvent.change(cardInput, { target: { value: '4242424242424242' } });
+    expect(cardInput.value).toBe('4242 4242 4242 4242');
+  });
+
+  it('limits card number to 16 digits', () => {
+    render(React.createElement(PaymentSection, defaultProps));
+    const cardInput = screen.getByPlaceholderText('0000 0000 0000 0000') as HTMLInputElement;
+
+    fireEvent.change(cardInput, { target: { value: '42424242424242421234' } });
+    expect(cardInput.value).toBe('4242 4242 4242 4242');
+  });
+
+  it('removes non-digits from card input', () => {
+    render(React.createElement(PaymentSection, defaultProps));
+    const cardInput = screen.getByPlaceholderText('0000 0000 0000 0000') as HTMLInputElement;
+
+    fireEvent.change(cardInput, { target: { value: '4242-4242-4242-4242' } });
+    expect(cardInput.value).toBe('4242 4242 4242 4242');
+  });
+
+  it('handles expiry date input', () => {
+    render(React.createElement(PaymentSection, defaultProps));
+    const expiryInput = screen.getByPlaceholderText('MM / YY') as HTMLInputElement;
+
+    fireEvent.change(expiryInput, { target: { value: '12/25' } });
+    expect(expiryInput.value).toBe('12/25');
+  });
+
+  it('handles CVC input', () => {
+    render(React.createElement(PaymentSection, defaultProps));
+    const cvcInput = screen.getByPlaceholderText('123') as HTMLInputElement;
+
+    fireEvent.change(cvcInput, { target: { value: '123' } });
+    expect(cvcInput.value).toBe('123');
+  });
+
+  it('shows confirm booking button when no deposit', () => {
+    render(React.createElement(PaymentSection, defaultProps));
+    expect(screen.getByRole('button', { name: 'Confirm Booking' })).toBeInTheDocument();
+  });
+
+  it('shows deposit amount button when deposit required', () => {
+    render(React.createElement(PaymentSection, { ...defaultProps, service: mockServiceWithDeposit }));
+    expect(screen.getByRole('button', { name: 'Pay $10.00 Deposit' })).toBeInTheDocument();
+  });
+
+  it('displays deposit amount section when deposit required', () => {
+    render(React.createElement(PaymentSection, { ...defaultProps, service: mockServiceWithDeposit }));
+    expect(screen.getByText('Due Now (Deposit)')).toBeInTheDocument();
+    const depositAmounts = screen.getAllByText('$10.00');
+    expect(depositAmounts.length).toBeGreaterThan(0);
+    expect(screen.getByText('Due at appointment')).toBeInTheDocument();
+    expect(screen.getByText('$15.00')).toBeInTheDocument();
+  });
+
+  it('displays full payment message when no deposit', () => {
+    render(React.createElement(PaymentSection, defaultProps));
+    expect(screen.getByText(/Full payment will be collected at your appointment/)).toBeInTheDocument();
+  });
+
+  it('displays deposit message when deposit required', () => {
+    render(React.createElement(PaymentSection, { ...defaultProps, service: mockServiceWithDeposit }));
+    expect(screen.getByText(/A deposit of/)).toBeInTheDocument();
+    expect(screen.getByText(/will be charged now/)).toBeInTheDocument();
+  });
+
+  it('shows submit button text changes to processing', () => {
+    render(React.createElement(PaymentSection, defaultProps));
+    const submitButton = screen.getByRole('button', { name: 'Confirm Booking' });
+    expect(submitButton).not.toBeDisabled();
+  });
+
+  it('simulates payment processing timeout', async () => {
+    const onPaymentComplete = vi.fn();
+    render(React.createElement(PaymentSection, { ...defaultProps, onPaymentComplete }));
+
+    // The component uses setTimeout with 2000ms
+    // Just verify the timeout is reasonable
+    expect(onPaymentComplete).not.toHaveBeenCalled();
+  });
+
+  it('displays security message', () => {
+    render(React.createElement(PaymentSection, defaultProps));
+    expect(screen.getByText(/Your payment is secure/)).toBeInTheDocument();
+    expect(screen.getByText(/We use Stripe to process your payment/)).toBeInTheDocument();
+  });
+
+  it('shows shield check icon', () => {
+    render(React.createElement(PaymentSection, defaultProps));
+    expect(screen.getByTestId('icon-shield-check')).toBeInTheDocument();
+  });
+
+  it('shows credit card icon', () => {
+    render(React.createElement(PaymentSection, defaultProps));
+    expect(screen.getByTestId('icon-credit-card')).toBeInTheDocument();
+  });
+
+  it('shows lock icon for CVC field', () => {
+    render(React.createElement(PaymentSection, defaultProps));
+    expect(screen.getByTestId('icon-lock')).toBeInTheDocument();
+  });
+
+  it('displays payment summary section', () => {
+    render(React.createElement(PaymentSection, defaultProps));
+    expect(screen.getByText('Payment Summary')).toBeInTheDocument();
+  });
+
+  it('requires all form fields', () => {
+    const onPaymentComplete = vi.fn();
+    render(React.createElement(PaymentSection, { ...defaultProps, onPaymentComplete }));
+
+    const cardInput = screen.getByPlaceholderText('0000 0000 0000 0000');
+    const expiryInput = screen.getByPlaceholderText('MM / YY');
+    const cvcInput = screen.getByPlaceholderText('123');
+
+    expect(cardInput).toHaveAttribute('required');
+    expect(expiryInput).toHaveAttribute('required');
+    expect(cvcInput).toHaveAttribute('required');
+  });
+
+  it('calculates deposit correctly', () => {
+    const service = { ...mockService, deposit_amount_cents: 500 };
+    render(React.createElement(PaymentSection, { ...defaultProps, service }));
+
+    const amounts = screen.getAllByText('$5.00');
+    expect(amounts.length).toBeGreaterThan(0);
+  });
+
+  it('displays mock card icons', () => {
+    render(React.createElement(PaymentSection, defaultProps));
+    const mockCardIcons = document.querySelectorAll('.bg-gray-200.dark\\:bg-gray-600.rounded');
+    expect(mockCardIcons.length).toBeGreaterThanOrEqual(3);
+  });
+
+  it('handles large prices correctly', () => {
+    const expensiveService = { ...mockService, price_cents: 1000000 }; // $10,000
+    render(React.createElement(PaymentSection, { ...defaultProps, service: expensiveService }));
+    const prices = screen.getAllByText('$10000.00');
+    expect(prices.length).toBeGreaterThan(0);
+  });
+
+  it('handles zero deposit', () => {
+    const service = { ...mockService, deposit_amount_cents: 0 };
+    render(React.createElement(PaymentSection, { ...defaultProps, service }));
+    expect(screen.queryByText('Due Now (Deposit)')).not.toBeInTheDocument();
+  });
+
+  it('has disabled state for button during processing', () => {
+    render(React.createElement(PaymentSection, defaultProps));
+    const submitButton = screen.getByRole('button', { name: 'Confirm Booking' });
+
+    // Initially enabled
+    expect(submitButton).not.toBeDisabled();
+    // Button will be disabled when processing state is true
+  });
+});

frontend/src/components/dashboard/__tests__/OpenTicketsWidget.test.tsx

@@ -0,0 +1,492 @@
+/**
+ * Unit tests for OpenTicketsWidget component
+ *
+ * Tests cover:
+ * - Component rendering with tickets
+ * - Empty state when no tickets
+ * - Urgent ticket badge display
+ * - Ticket filtering (open/in_progress only)
+ * - Priority color coding
+ * - Overdue ticket handling
+ * - Link navigation
+ * - Edit mode controls
+ * - Internationalization (i18n)
+ */
+
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import React from 'react';
+import { BrowserRouter } from 'react-router-dom';
+import OpenTicketsWidget from '../OpenTicketsWidget';
+import { Ticket } from '../../../types';
+
+// Mock react-i18next
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string, options?: any) => {
+      const translations: Record<string, string> = {
+        'dashboard.openTickets': 'Open Tickets',
+        'dashboard.urgent': 'Urgent',
+        'dashboard.open': 'Open',
+        'dashboard.noOpenTickets': 'No open tickets',
+        'dashboard.overdue': 'Overdue',
+        'dashboard.viewAllTickets': `View all ${options?.count || 0} tickets`,
+      };
+      return translations[key] || key;
+    },
+  }),
+}));
+
+// Mock useDateFnsLocale hook
+vi.mock('../../../hooks/useDateFnsLocale', () => ({
+  useDateFnsLocale: () => undefined, // Returns undefined for default locale
+}));
+
+// Helper to render component with Router
+const renderWithRouter = (component: React.ReactElement) => {
+  return render(<BrowserRouter>{component}</BrowserRouter>);
+};
+
+describe('OpenTicketsWidget', () => {
+  const mockTickets: Ticket[] = [
+    {
+      id: '1',
+      tenant: 'test-tenant',
+      creator: 'user-1',
+      creatorEmail: 'user1@example.com',
+      creatorFullName: 'John Doe',
+      ticketType: 'support',
+      status: 'open',
+      priority: 'urgent',
+      subject: 'Critical bug in scheduler',
+      description: 'System is down',
+      category: 'bug',
+      createdAt: new Date(Date.now() - 2 * 60 * 60 * 1000).toISOString(), // 2 hours ago
+      updatedAt: new Date().toISOString(),
+      isOverdue: false,
+    },
+    {
+      id: '2',
+      tenant: 'test-tenant',
+      creator: 'user-2',
+      creatorEmail: 'user2@example.com',
+      creatorFullName: 'Jane Smith',
+      ticketType: 'support',
+      status: 'in_progress',
+      priority: 'high',
+      subject: 'Payment integration issue',
+      description: 'Stripe webhook failing',
+      category: 'bug',
+      createdAt: new Date(Date.now() - 24 * 60 * 60 * 1000).toISOString(), // 1 day ago
+      updatedAt: new Date().toISOString(),
+      isOverdue: false,
+    },
+    {
+      id: '3',
+      tenant: 'test-tenant',
+      creator: 'user-3',
+      creatorEmail: 'user3@example.com',
+      creatorFullName: 'Bob Johnson',
+      ticketType: 'support',
+      status: 'closed',
+      priority: 'low',
+      subject: 'Closed ticket',
+      description: 'This should not appear',
+      category: 'question',
+      createdAt: new Date(Date.now() - 48 * 60 * 60 * 1000).toISOString(),
+      updatedAt: new Date().toISOString(),
+    },
+    {
+      id: '4',
+      tenant: 'test-tenant',
+      creator: 'user-4',
+      creatorEmail: 'user4@example.com',
+      creatorFullName: 'Alice Williams',
+      ticketType: 'support',
+      status: 'open',
+      priority: 'medium',
+      subject: 'Overdue ticket',
+      description: 'This ticket is overdue',
+      category: 'bug',
+      createdAt: new Date(Date.now() - 72 * 60 * 60 * 1000).toISOString(),
+      updatedAt: new Date().toISOString(),
+      isOverdue: true,
+    },
+  ];
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('Rendering', () => {
+    it('should render the component', () => {
+      renderWithRouter(<OpenTicketsWidget tickets={mockTickets} />);
+      expect(screen.getByText('Open Tickets')).toBeInTheDocument();
+    });
+
+    it('should render title correctly', () => {
+      renderWithRouter(<OpenTicketsWidget tickets={mockTickets} />);
+      const title = screen.getByText('Open Tickets');
+      expect(title).toBeInTheDocument();
+      expect(title).toHaveClass('text-lg', 'font-semibold');
+    });
+
+    it('should render open ticket count', () => {
+      renderWithRouter(<OpenTicketsWidget tickets={mockTickets} />);
+      // 3 open/in_progress tickets (excluding closed)
+      expect(screen.getByText('3 Open')).toBeInTheDocument();
+    });
+  });
+
+  describe('Ticket Filtering', () => {
+    it('should only show open and in_progress tickets', () => {
+      renderWithRouter(<OpenTicketsWidget tickets={mockTickets} />);
+
+      // Should show these
+      expect(screen.getByText('Critical bug in scheduler')).toBeInTheDocument();
+      expect(screen.getByText('Payment integration issue')).toBeInTheDocument();
+      expect(screen.getByText('Overdue ticket')).toBeInTheDocument();
+
+      // Should NOT show closed ticket
+      expect(screen.queryByText('Closed ticket')).not.toBeInTheDocument();
+    });
+
+    it('should count urgent and overdue tickets', () => {
+      renderWithRouter(<OpenTicketsWidget tickets={mockTickets} />);
+
+      // 1 urgent + 1 overdue = 2 urgent total
+      expect(screen.getByText('2 Urgent')).toBeInTheDocument();
+    });
+
+    it('should handle tickets with only closed status', () => {
+      const closedTickets: Ticket[] = [
+        {
+          ...mockTickets[2],
+          status: 'closed',
+        },
+      ];
+
+      renderWithRouter(<OpenTicketsWidget tickets={closedTickets} />);
+      expect(screen.getByText('No open tickets')).toBeInTheDocument();
+    });
+  });
+
+  describe('Priority Display', () => {
+    it('should display urgent priority correctly', () => {
+      renderWithRouter(<OpenTicketsWidget tickets={mockTickets} />);
+
+      // Urgent priority text appears in the badge (multiple instances possible)
+      const urgentElements = screen.getAllByText(/Urgent/i);
+      expect(urgentElements.length).toBeGreaterThan(0);
+    });
+
+    it('should display high priority', () => {
+      renderWithRouter(<OpenTicketsWidget tickets={mockTickets} />);
+      const highElements = screen.getAllByText('high');
+      expect(highElements.length).toBeGreaterThan(0);
+    });
+
+    it('should display medium priority', () => {
+      renderWithRouter(<OpenTicketsWidget tickets={mockTickets} />);
+      const mediumElements = screen.getAllByText('medium');
+      expect(mediumElements.length).toBeGreaterThan(0);
+    });
+
+    it('should display overdue status instead of priority', () => {
+      renderWithRouter(<OpenTicketsWidget tickets={mockTickets} />);
+
+      // Overdue ticket should show "Overdue" instead of priority
+      const overdueElements = screen.getAllByText('Overdue');
+      expect(overdueElements.length).toBeGreaterThan(0);
+    });
+  });
+
+  describe('Empty State', () => {
+    it('should show empty state when no tickets', () => {
+      renderWithRouter(<OpenTicketsWidget tickets={[]} />);
+      expect(screen.getByText('No open tickets')).toBeInTheDocument();
+    });
+
+    it('should show empty state icon when no tickets', () => {
+      const { container } = renderWithRouter(<OpenTicketsWidget tickets={[]} />);
+
+      // Check for AlertCircle icon in empty state
+      const svg = container.querySelector('svg');
+      expect(svg).toBeInTheDocument();
+    });
+
+    it('should not show urgent badge when no tickets', () => {
+      renderWithRouter(<OpenTicketsWidget tickets={[]} />);
+      expect(screen.queryByText(/Urgent/)).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Ticket List Display', () => {
+    it('should limit display to 5 tickets', () => {
+      const manyTickets: Ticket[] = Array.from({ length: 10 }, (_, i) => ({
+        ...mockTickets[0],
+        id: `ticket-${i}`,
+        subject: `Ticket ${i + 1}`,
+        status: 'open' as const,
+      }));
+
+      renderWithRouter(<OpenTicketsWidget tickets={manyTickets} />);
+
+      // Should show first 5 tickets
+      expect(screen.getByText('Ticket 1')).toBeInTheDocument();
+      expect(screen.getByText('Ticket 5')).toBeInTheDocument();
+
+      // Should NOT show 6th ticket
+      expect(screen.queryByText('Ticket 6')).not.toBeInTheDocument();
+    });
+
+    it('should show "View all" link when more than 5 tickets', () => {
+      const manyTickets: Ticket[] = Array.from({ length: 7 }, (_, i) => ({
+        ...mockTickets[0],
+        id: `ticket-${i}`,
+        status: 'open' as const,
+      }));
+
+      renderWithRouter(<OpenTicketsWidget tickets={manyTickets} />);
+
+      // Should show link to view all 7 tickets
+      expect(screen.getByText('View all 7 tickets')).toBeInTheDocument();
+    });
+
+    it('should not show "View all" link when 5 or fewer tickets', () => {
+      const fewTickets = mockTickets.slice(0, 2);
+      renderWithRouter(<OpenTicketsWidget tickets={fewTickets} />);
+
+      expect(screen.queryByText(/View all/)).not.toBeInTheDocument();
+    });
+
+    it('should render timestamps for tickets', () => {
+      renderWithRouter(<OpenTicketsWidget tickets={mockTickets} />);
+
+      // Should have timestamp elements (date-fns formatDistanceToNow renders relative times)
+      const timestamps = screen.getAllByText(/ago/i);
+      expect(timestamps.length).toBeGreaterThan(0);
+    });
+  });
+
+  describe('Navigation Links', () => {
+    it('should render ticket items as links', () => {
+      renderWithRouter(<OpenTicketsWidget tickets={mockTickets} />);
+
+      const links = screen.getAllByRole('link');
+      expect(links.length).toBeGreaterThan(0);
+    });
+
+    it('should link to tickets dashboard', () => {
+      renderWithRouter(<OpenTicketsWidget tickets={mockTickets} />);
+
+      const links = screen.getAllByRole('link');
+      links.forEach(link => {
+        expect(link).toHaveAttribute('href', '/dashboard/tickets');
+      });
+    });
+
+    it('should have chevron icons on ticket links', () => {
+      const { container } = renderWithRouter(<OpenTicketsWidget tickets={mockTickets} />);
+
+      // ChevronRight icons should be present
+      const svgs = container.querySelectorAll('svg');
+      expect(svgs.length).toBeGreaterThan(0);
+    });
+  });
+
+  describe('Edit Mode', () => {
+    it('should not show edit controls when isEditing is false', () => {
+      const { container } = renderWithRouter(
+        <OpenTicketsWidget tickets={mockTickets} isEditing={false} />
+      );
+
+      const dragHandle = container.querySelector('.drag-handle');
+      expect(dragHandle).not.toBeInTheDocument();
+    });
+
+    it('should show drag handle when in edit mode', () => {
+      const { container } = renderWithRouter(
+        <OpenTicketsWidget tickets={mockTickets} isEditing={true} />
+      );
+
+      const dragHandle = container.querySelector('.drag-handle');
+      expect(dragHandle).toBeInTheDocument();
+    });
+
+    it('should show remove button when in edit mode', () => {
+      const { container } = renderWithRouter(
+        <OpenTicketsWidget tickets={mockTickets} isEditing={true} onRemove={vi.fn()} />
+      );
+
+      // Remove button exists (X icon button)
+      const removeButtons = container.querySelectorAll('button');
+      expect(removeButtons.length).toBeGreaterThan(0);
+    });
+
+    it('should call onRemove when remove button is clicked', async () => {
+      const user = userEvent.setup();
+      const handleRemove = vi.fn();
+
+      const { container } = renderWithRouter(
+        <OpenTicketsWidget tickets={mockTickets} isEditing={true} onRemove={handleRemove} />
+      );
+
+      // Find the remove button (X icon)
+      const removeButton = container.querySelector('button[class*="hover:text-red"]') as HTMLElement;
+      expect(removeButton).toBeInTheDocument();
+
+      await user.click(removeButton);
+      expect(handleRemove).toHaveBeenCalledTimes(1);
+    });
+
+    it('should apply padding when in edit mode', () => {
+      const { container } = renderWithRouter(
+        <OpenTicketsWidget tickets={mockTickets} isEditing={true} />
+      );
+
+      const paddedElement = container.querySelector('.pl-5');
+      expect(paddedElement).toBeInTheDocument();
+    });
+
+    it('should not apply padding when not in edit mode', () => {
+      const { container } = renderWithRouter(
+        <OpenTicketsWidget tickets={mockTickets} isEditing={false} />
+      );
+
+      // Title should not have pl-5 class
+      const title = screen.getByText('Open Tickets');
+      expect(title.parentElement).not.toHaveClass('pl-5');
+    });
+  });
+
+  describe('Styling', () => {
+    it('should apply container styles', () => {
+      const { container } = renderWithRouter(<OpenTicketsWidget tickets={mockTickets} />);
+
+      const widget = container.firstChild;
+      expect(widget).toHaveClass(
+        'h-full',
+        'p-4',
+        'bg-white',
+        'rounded-xl',
+        'border',
+        'border-gray-200',
+        'shadow-sm'
+      );
+    });
+
+    it('should apply dark mode styles', () => {
+      const { container } = renderWithRouter(<OpenTicketsWidget tickets={mockTickets} />);
+
+      const widget = container.firstChild;
+      expect(widget).toHaveClass('dark:bg-gray-800', 'dark:border-gray-700');
+    });
+
+    it('should apply priority background colors', () => {
+      const { container } = renderWithRouter(<OpenTicketsWidget tickets={mockTickets} />);
+
+      // Check for various priority bg classes
+      const redBg = container.querySelector('.bg-red-50');
+      const orangeBg = container.querySelector('.bg-orange-50');
+      const yellowBg = container.querySelector('.bg-yellow-50');
+
+      // At least one priority bg should be present
+      expect(redBg || orangeBg || yellowBg).toBeTruthy();
+    });
+  });
+
+  describe('Urgent Badge', () => {
+    it('should show urgent badge when urgent tickets exist', () => {
+      renderWithRouter(<OpenTicketsWidget tickets={mockTickets} />);
+
+      const urgentElements = screen.getAllByText(/Urgent/i);
+      expect(urgentElements.length).toBeGreaterThan(0);
+    });
+
+    it('should show correct urgent count', () => {
+      renderWithRouter(<OpenTicketsWidget tickets={mockTickets} />);
+
+      // 1 urgent + 1 overdue
+      expect(screen.getByText('2 Urgent')).toBeInTheDocument();
+    });
+
+    it('should not show urgent badge when no urgent tickets', () => {
+      const nonUrgentTickets: Ticket[] = [
+        {
+          ...mockTickets[0],
+          priority: 'low',
+          isOverdue: false,
+        },
+      ];
+
+      renderWithRouter(<OpenTicketsWidget tickets={nonUrgentTickets} />);
+      expect(screen.queryByText(/Urgent/)).not.toBeInTheDocument();
+    });
+
+    it('should include overdue tickets in urgent count', () => {
+      const tickets: Ticket[] = [
+        {
+          ...mockTickets[0],
+          priority: 'low',
+          isOverdue: true,
+          status: 'open',
+        },
+      ];
+
+      renderWithRouter(<OpenTicketsWidget tickets={tickets} />);
+      expect(screen.getByText('1 Urgent')).toBeInTheDocument();
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('should have semantic HTML structure', () => {
+      const { container } = renderWithRouter(<OpenTicketsWidget tickets={mockTickets} />);
+
+      const headings = container.querySelectorAll('h3');
+      expect(headings.length).toBeGreaterThan(0);
+    });
+
+    it('should have accessible links', () => {
+      renderWithRouter(<OpenTicketsWidget tickets={mockTickets} />);
+
+      const links = screen.getAllByRole('link');
+      expect(links.length).toBeGreaterThan(0);
+    });
+  });
+
+  describe('Integration', () => {
+    it('should render correctly with all props', () => {
+      const handleRemove = vi.fn();
+
+      renderWithRouter(
+        <OpenTicketsWidget
+          tickets={mockTickets}
+          isEditing={true}
+          onRemove={handleRemove}
+        />
+      );
+
+      expect(screen.getByText('Open Tickets')).toBeInTheDocument();
+      expect(screen.getByText('Critical bug in scheduler')).toBeInTheDocument();
+      expect(screen.getByText(/Urgent/)).toBeInTheDocument();
+    });
+
+    it('should handle mixed priority tickets', () => {
+      const mixedTickets: Ticket[] = [
+        { ...mockTickets[0], priority: 'urgent', status: 'open' },
+        { ...mockTickets[0], id: '2', priority: 'high', status: 'open' },
+        { ...mockTickets[0], id: '3', priority: 'medium', status: 'in_progress' },
+        { ...mockTickets[0], id: '4', priority: 'low', status: 'open' },
+      ];
+
+      renderWithRouter(<OpenTicketsWidget tickets={mixedTickets} />);
+
+      expect(screen.getByText('urgent')).toBeInTheDocument();
+      expect(screen.getByText('high')).toBeInTheDocument();
+      expect(screen.getByText('medium')).toBeInTheDocument();
+      expect(screen.getByText('low')).toBeInTheDocument();
+    });
+  });
+});

frontend/src/components/dashboard/__tests__/RecentActivityWidget.test.tsx

@@ -0,0 +1,576 @@
+/**
+ * Unit tests for RecentActivityWidget component
+ *
+ * Tests cover:
+ * - Component rendering with appointments and customers
+ * - Empty state when no activity
+ * - Activity type filtering and display (booking, cancellation, completion, new customer)
+ * - Icon and styling for different activity types
+ * - Timestamp display with date-fns
+ * - Activity sorting (most recent first)
+ * - Activity limit (max 10 items)
+ * - Edit mode controls
+ * - Internationalization (i18n)
+ */
+
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import React from 'react';
+import RecentActivityWidget from '../RecentActivityWidget';
+import { Appointment, Customer } from '../../../types';
+
+// Mock react-i18next
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string, options?: any) => {
+      const translations: Record<string, string> = {
+        'dashboard.recentActivity': 'Recent Activity',
+        'dashboard.noRecentActivity': 'No recent activity',
+        'dashboard.newBooking': 'New Booking',
+        'dashboard.customerBookedAppointment': `${options?.customerName || 'Customer'} booked an appointment`,
+        'dashboard.cancellation': 'Cancellation',
+        'dashboard.customerCancelledAppointment': `${options?.customerName || 'Customer'} cancelled appointment`,
+        'dashboard.completed': 'Completed',
+        'dashboard.customerAppointmentCompleted': `${options?.customerName || 'Customer'} appointment completed`,
+        'dashboard.newCustomer': 'New Customer',
+        'dashboard.customerSignedUp': `${options?.customerName || 'Customer'} signed up`,
+      };
+      return translations[key] || key;
+    },
+  }),
+}));
+
+// Mock useDateFnsLocale hook
+vi.mock('../../../hooks/useDateFnsLocale', () => ({
+  useDateFnsLocale: () => undefined,
+}));
+
+describe('RecentActivityWidget', () => {
+  const now = new Date();
+
+  const mockAppointments: Appointment[] = [
+    {
+      id: '1',
+      resourceId: 'resource-1',
+      customerId: 'customer-1',
+      customerName: 'John Doe',
+      serviceId: 'service-1',
+      startTime: new Date(now.getTime() - 2 * 60 * 60 * 1000), // 2 hours ago
+      durationMinutes: 60,
+      status: 'CONFIRMED',
+      notes: '',
+    },
+    {
+      id: '2',
+      resourceId: 'resource-1',
+      customerId: 'customer-2',
+      customerName: 'Jane Smith',
+      serviceId: 'service-1',
+      startTime: new Date(now.getTime() - 24 * 60 * 60 * 1000), // 1 day ago
+      durationMinutes: 90,
+      status: 'CANCELLED',
+      notes: '',
+    },
+    {
+      id: '3',
+      resourceId: 'resource-2',
+      customerId: 'customer-3',
+      customerName: 'Bob Johnson',
+      serviceId: 'service-2',
+      startTime: new Date(now.getTime() - 48 * 60 * 60 * 1000), // 2 days ago
+      durationMinutes: 120,
+      status: 'COMPLETED',
+      notes: '',
+    },
+    {
+      id: '4',
+      resourceId: 'resource-1',
+      customerId: 'customer-4',
+      customerName: 'Alice Williams',
+      serviceId: 'service-1',
+      startTime: new Date(now.getTime() - 5 * 60 * 60 * 1000), // 5 hours ago
+      durationMinutes: 45,
+      status: 'PENDING',
+      notes: '',
+    },
+  ];
+
+  const mockCustomers: Customer[] = [
+    {
+      id: 'customer-1',
+      name: 'New Customer One',
+      email: 'new1@example.com',
+      phone: '555-0001',
+      // No lastVisit = new customer
+    },
+    {
+      id: 'customer-2',
+      name: 'Returning Customer',
+      email: 'returning@example.com',
+      phone: '555-0002',
+      lastVisit: new Date(now.getTime() - 30 * 24 * 60 * 60 * 1000), // 30 days ago
+    },
+    {
+      id: 'customer-3',
+      name: 'New Customer Two',
+      email: 'new2@example.com',
+      phone: '555-0003',
+      // No lastVisit = new customer
+    },
+  ];
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('Rendering', () => {
+    it('should render the component', () => {
+      render(
+        <RecentActivityWidget appointments={mockAppointments} customers={mockCustomers} />
+      );
+      expect(screen.getByText('Recent Activity')).toBeInTheDocument();
+    });
+
+    it('should render title correctly', () => {
+      render(
+        <RecentActivityWidget appointments={mockAppointments} customers={mockCustomers} />
+      );
+      const title = screen.getByText('Recent Activity');
+      expect(title).toBeInTheDocument();
+      expect(title).toHaveClass('text-lg', 'font-semibold');
+    });
+  });
+
+  describe('Activity Types', () => {
+    it('should display booking activity for confirmed appointments', () => {
+      render(
+        <RecentActivityWidget appointments={mockAppointments} customers={mockCustomers} />
+      );
+      expect(screen.getByText('New Booking')).toBeInTheDocument();
+      expect(screen.getByText('John Doe booked an appointment')).toBeInTheDocument();
+    });
+
+    it('should display booking activity for pending appointments', () => {
+      render(
+        <RecentActivityWidget appointments={mockAppointments} customers={mockCustomers} />
+      );
+      expect(screen.getByText('Alice Williams booked an appointment')).toBeInTheDocument();
+    });
+
+    it('should display cancellation activity', () => {
+      render(
+        <RecentActivityWidget appointments={mockAppointments} customers={mockCustomers} />
+      );
+      expect(screen.getByText('Cancellation')).toBeInTheDocument();
+      expect(screen.getByText('Jane Smith cancelled appointment')).toBeInTheDocument();
+    });
+
+    it('should display completion activity', () => {
+      render(
+        <RecentActivityWidget appointments={mockAppointments} customers={mockCustomers} />
+      );
+      expect(screen.getByText('Completed')).toBeInTheDocument();
+      expect(screen.getByText('Bob Johnson appointment completed')).toBeInTheDocument();
+    });
+
+    it('should display new customer activity', () => {
+      render(
+        <RecentActivityWidget appointments={mockAppointments} customers={mockCustomers} />
+      );
+      expect(screen.getByText('New Customer')).toBeInTheDocument();
+      expect(screen.getByText('New Customer One signed up')).toBeInTheDocument();
+    });
+
+    it('should not display activity for returning customers', () => {
+      render(
+        <RecentActivityWidget appointments={mockAppointments} customers={mockCustomers} />
+      );
+      // Returning Customer should not appear in activity
+      expect(screen.queryByText('Returning Customer signed up')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Activity Sorting and Limiting', () => {
+    it('should sort activities by timestamp descending', () => {
+      render(
+        <RecentActivityWidget appointments={mockAppointments} customers={mockCustomers} />
+      );
+
+      const activities = screen.getAllByText(/booked|cancelled|completed|signed up/i);
+      // Most recent should be first (John Doe - 2 hours ago)
+      expect(activities[0]).toHaveTextContent('John Doe');
+    });
+
+    it('should limit display to 10 activities', () => {
+      const manyAppointments: Appointment[] = Array.from({ length: 15 }, (_, i) => ({
+        ...mockAppointments[0],
+        id: `appt-${i}`,
+        customerName: `Customer ${i}`,
+        startTime: new Date(now.getTime() - i * 60 * 60 * 1000),
+      }));
+
+      const { container } = render(
+        <RecentActivityWidget appointments={manyAppointments} customers={[]} />
+      );
+
+      // Count activity items (each has a unique key structure)
+      const activityItems = container.querySelectorAll('[class*="flex items-start gap-3"]');
+      expect(activityItems.length).toBeLessThanOrEqual(10);
+    });
+  });
+
+  describe('Empty State', () => {
+    it('should show empty state when no appointments or customers', () => {
+      render(<RecentActivityWidget appointments={[]} customers={[]} />);
+      expect(screen.getByText('No recent activity')).toBeInTheDocument();
+    });
+
+    it('should show empty state icon when no activity', () => {
+      const { container } = render(
+        <RecentActivityWidget appointments={[]} customers={[]} />
+      );
+
+      // Check for Calendar icon in empty state
+      const svg = container.querySelector('svg');
+      expect(svg).toBeInTheDocument();
+    });
+
+    it('should show empty state when only returning customers', () => {
+      const returningCustomers: Customer[] = [
+        {
+          id: 'customer-1',
+          name: 'Returning',
+          email: 'returning@example.com',
+          phone: '555-0001',
+          lastVisit: new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000),
+        },
+      ];
+
+      render(<RecentActivityWidget appointments={[]} customers={returningCustomers} />);
+      expect(screen.getByText('No recent activity')).toBeInTheDocument();
+    });
+  });
+
+  describe('Icons and Styling', () => {
+    it('should render activity icons', () => {
+      const { container } = render(
+        <RecentActivityWidget appointments={mockAppointments} customers={mockCustomers} />
+      );
+
+      // Multiple SVG icons should be present
+      const svgs = container.querySelectorAll('svg');
+      expect(svgs.length).toBeGreaterThan(0);
+    });
+
+    it('should apply correct icon background colors', () => {
+      const { container } = render(
+        <RecentActivityWidget appointments={mockAppointments} customers={mockCustomers} />
+      );
+
+      // Check for various icon background colors
+      const blueBg = container.querySelector('.bg-blue-100');
+      const redBg = container.querySelector('.bg-red-100');
+      const greenBg = container.querySelector('.bg-green-100');
+      const purpleBg = container.querySelector('.bg-purple-100');
+
+      // At least one should be present
+      expect(blueBg || redBg || greenBg || purpleBg).toBeTruthy();
+    });
+
+    it('should apply container styles', () => {
+      const { container } = render(
+        <RecentActivityWidget appointments={mockAppointments} customers={mockCustomers} />
+      );
+
+      const widget = container.firstChild;
+      expect(widget).toHaveClass(
+        'h-full',
+        'p-4',
+        'bg-white',
+        'rounded-xl',
+        'border',
+        'border-gray-200',
+        'shadow-sm'
+      );
+    });
+
+    it('should apply dark mode styles', () => {
+      const { container } = render(
+        <RecentActivityWidget appointments={mockAppointments} customers={mockCustomers} />
+      );
+
+      const widget = container.firstChild;
+      expect(widget).toHaveClass('dark:bg-gray-800', 'dark:border-gray-700');
+    });
+  });
+
+  describe('Timestamps', () => {
+    it('should display relative timestamps', () => {
+      render(
+        <RecentActivityWidget appointments={mockAppointments} customers={mockCustomers} />
+      );
+
+      // date-fns formatDistanceToNow renders "ago" in the text
+      const timestamps = screen.getAllByText(/ago/i);
+      expect(timestamps.length).toBeGreaterThan(0);
+    });
+  });
+
+  describe('Edit Mode', () => {
+    it('should not show edit controls when isEditing is false', () => {
+      const { container } = render(
+        <RecentActivityWidget
+          appointments={mockAppointments}
+          customers={mockCustomers}
+          isEditing={false}
+        />
+      );
+
+      const dragHandle = container.querySelector('.drag-handle');
+      expect(dragHandle).not.toBeInTheDocument();
+    });
+
+    it('should show drag handle when in edit mode', () => {
+      const { container } = render(
+        <RecentActivityWidget
+          appointments={mockAppointments}
+          customers={mockCustomers}
+          isEditing={true}
+        />
+      );
+
+      const dragHandle = container.querySelector('.drag-handle');
+      expect(dragHandle).toBeInTheDocument();
+    });
+
+    it('should show remove button when in edit mode', () => {
+      const { container } = render(
+        <RecentActivityWidget
+          appointments={mockAppointments}
+          customers={mockCustomers}
+          isEditing={true}
+          onRemove={vi.fn()}
+        />
+      );
+
+      // Remove button exists (X icon button)
+      const removeButtons = container.querySelectorAll('button');
+      expect(removeButtons.length).toBeGreaterThan(0);
+    });
+
+    it('should call onRemove when remove button is clicked', async () => {
+      const user = userEvent.setup();
+      const handleRemove = vi.fn();
+
+      const { container } = render(
+        <RecentActivityWidget
+          appointments={mockAppointments}
+          customers={mockCustomers}
+          isEditing={true}
+          onRemove={handleRemove}
+        />
+      );
+
+      // Find the remove button (X icon)
+      const removeButton = container.querySelector('button[class*="hover:text-red"]') as HTMLElement;
+      expect(removeButton).toBeInTheDocument();
+
+      await user.click(removeButton);
+      expect(handleRemove).toHaveBeenCalledTimes(1);
+    });
+
+    it('should apply padding when in edit mode', () => {
+      const { container } = render(
+        <RecentActivityWidget
+          appointments={mockAppointments}
+          customers={mockCustomers}
+          isEditing={true}
+        />
+      );
+
+      const paddedElement = container.querySelector('.pl-5');
+      expect(paddedElement).toBeInTheDocument();
+    });
+
+    it('should not apply padding when not in edit mode', () => {
+      render(
+        <RecentActivityWidget
+          appointments={mockAppointments}
+          customers={mockCustomers}
+          isEditing={false}
+        />
+      );
+
+      // Title should not be in a pl-5 container
+      const title = screen.getByText('Recent Activity');
+      expect(title).not.toHaveClass('pl-5');
+    });
+  });
+
+  describe('Activity Items Display', () => {
+    it('should display activity titles', () => {
+      render(
+        <RecentActivityWidget appointments={mockAppointments} customers={mockCustomers} />
+      );
+
+      expect(screen.getAllByText('New Booking').length).toBeGreaterThan(0);
+    });
+
+    it('should display activity descriptions', () => {
+      render(
+        <RecentActivityWidget appointments={mockAppointments} customers={mockCustomers} />
+      );
+
+      expect(screen.getByText('John Doe booked an appointment')).toBeInTheDocument();
+    });
+
+    it('should truncate long descriptions', () => {
+      const { container } = render(
+        <RecentActivityWidget appointments={mockAppointments} customers={mockCustomers} />
+      );
+
+      // Check for truncate class on description text
+      const descriptions = container.querySelectorAll('.truncate');
+      expect(descriptions.length).toBeGreaterThan(0);
+    });
+  });
+
+  describe('useMemo Optimization', () => {
+    it('should handle empty appointments array', () => {
+      render(<RecentActivityWidget appointments={[]} customers={mockCustomers} />);
+
+      // Should still show new customer activities
+      expect(screen.getByText('New Customer One signed up')).toBeInTheDocument();
+    });
+
+    it('should handle empty customers array', () => {
+      render(<RecentActivityWidget appointments={mockAppointments} customers={[]} />);
+
+      // Should still show appointment activities
+      expect(screen.getByText('John Doe booked an appointment')).toBeInTheDocument();
+    });
+
+    it('should limit new customers to 5 before adding to activity', () => {
+      const manyNewCustomers: Customer[] = Array.from({ length: 10 }, (_, i) => ({
+        id: `customer-${i}`,
+        name: `New Customer ${i}`,
+        email: `new${i}@example.com`,
+        phone: `555-000${i}`,
+        // No lastVisit
+      }));
+
+      const { container } = render(
+        <RecentActivityWidget appointments={[]} customers={manyNewCustomers} />
+      );
+
+      // Only 5 new customers should be added to activity (before the 10-item limit)
+      const activityItems = container.querySelectorAll('[class*="flex items-start gap-3"]');
+      expect(activityItems.length).toBeLessThanOrEqual(10);
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('should have semantic HTML structure', () => {
+      const { container } = render(
+        <RecentActivityWidget appointments={mockAppointments} customers={mockCustomers} />
+      );
+
+      const headings = container.querySelectorAll('h3');
+      expect(headings.length).toBeGreaterThan(0);
+    });
+
+    it('should have readable text', () => {
+      render(
+        <RecentActivityWidget appointments={mockAppointments} customers={mockCustomers} />
+      );
+
+      const title = screen.getByText('Recent Activity');
+      expect(title).toBeInTheDocument();
+    });
+  });
+
+  describe('Integration', () => {
+    it('should render correctly with all props', () => {
+      const handleRemove = vi.fn();
+
+      render(
+        <RecentActivityWidget
+          appointments={mockAppointments}
+          customers={mockCustomers}
+          isEditing={true}
+          onRemove={handleRemove}
+        />
+      );
+
+      expect(screen.getByText('Recent Activity')).toBeInTheDocument();
+      expect(screen.getByText('John Doe booked an appointment')).toBeInTheDocument();
+      expect(screen.getByText('New Customer One signed up')).toBeInTheDocument();
+    });
+
+    it('should handle mixed activity types', () => {
+      render(
+        <RecentActivityWidget appointments={mockAppointments} customers={mockCustomers} />
+      );
+
+      // Should have bookings, cancellations, completions, and new customers
+      expect(screen.getByText('New Booking')).toBeInTheDocument();
+      expect(screen.getByText('Cancellation')).toBeInTheDocument();
+      expect(screen.getByText('Completed')).toBeInTheDocument();
+      expect(screen.getByText('New Customer')).toBeInTheDocument();
+    });
+
+    it('should handle appointments with different statuses', () => {
+      const statusTestAppointments: Appointment[] = [
+        { ...mockAppointments[0], status: 'CONFIRMED' },
+        { ...mockAppointments[0], id: '2', status: 'PENDING' },
+        { ...mockAppointments[0], id: '3', status: 'CANCELLED' },
+        { ...mockAppointments[0], id: '4', status: 'COMPLETED' },
+      ];
+
+      render(<RecentActivityWidget appointments={statusTestAppointments} customers={[]} />);
+
+      // CONFIRMED and PENDING should show as bookings
+      const bookings = screen.getAllByText('New Booking');
+      expect(bookings.length).toBe(2);
+
+      // CANCELLED should show
+      expect(screen.getByText('Cancellation')).toBeInTheDocument();
+
+      // COMPLETED should show
+      expect(screen.getByText('Completed')).toBeInTheDocument();
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('should handle appointments with no customer name', () => {
+      const noNameAppointments: Appointment[] = [
+        {
+          ...mockAppointments[0],
+          customerName: '',
+        },
+      ];
+
+      render(<RecentActivityWidget appointments={noNameAppointments} customers={[]} />);
+
+      // Should still render activity (with empty customer name)
+      expect(screen.getByText('New Booking')).toBeInTheDocument();
+    });
+
+    it('should handle customers with no name', () => {
+      const noNameCustomers: Customer[] = [
+        {
+          id: 'customer-1',
+          name: '',
+          email: 'test@example.com',
+          phone: '555-0001',
+        },
+      ];
+
+      render(<RecentActivityWidget appointments={[]} customers={noNameCustomers} />);
+
+      // Should still render if there's a new customer
+      expect(screen.getByText('New Customer')).toBeInTheDocument();
+    });
+  });
+});

frontend/src/components/dashboard/__tests__/WidgetConfigModal.test.tsx

@@ -0,0 +1,576 @@
+/**
+ * Unit tests for WidgetConfigModal component
+ *
+ * Tests cover:
+ * - Component rendering and visibility
+ * - Modal open/close behavior
+ * - Widget list display
+ * - Widget toggle functionality
+ * - Active widget highlighting
+ * - Reset layout functionality
+ * - Widget icons display
+ * - Internationalization (i18n)
+ * - Accessibility
+ * - Backdrop click handling
+ */
+
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import React from 'react';
+import WidgetConfigModal from '../WidgetConfigModal';
+
+// Mock react-i18next
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => {
+      const translations: Record<string, string> = {
+        'dashboard.configureWidgets': 'Configure Widgets',
+        'dashboard.configureWidgetsDescription': 'Choose which widgets to display on your dashboard',
+        'dashboard.resetToDefault': 'Reset to Default',
+        'dashboard.done': 'Done',
+        // Widget titles
+        'dashboard.widgetTitles.appointmentsMetric': 'Total Appointments',
+        'dashboard.widgetTitles.customersMetric': 'Active Customers',
+        'dashboard.widgetTitles.servicesMetric': 'Services',
+        'dashboard.widgetTitles.resourcesMetric': 'Resources',
+        'dashboard.widgetTitles.revenueChart': 'Revenue',
+        'dashboard.widgetTitles.appointmentsChart': 'Appointments Trend',
+        'dashboard.widgetTitles.openTickets': 'Open Tickets',
+        'dashboard.widgetTitles.recentActivity': 'Recent Activity',
+        'dashboard.widgetTitles.capacityUtilization': 'Capacity Utilization',
+        'dashboard.widgetTitles.noShowRate': 'No-Show Rate',
+        'dashboard.widgetTitles.customerBreakdown': 'New vs Returning',
+        // Widget descriptions
+        'dashboard.widgetDescriptions.appointmentsMetric': 'Shows appointment count with weekly and monthly growth',
+        'dashboard.widgetDescriptions.customersMetric': 'Shows customer count with weekly and monthly growth',
+        'dashboard.widgetDescriptions.servicesMetric': 'Shows number of services offered',
+        'dashboard.widgetDescriptions.resourcesMetric': 'Shows number of resources available',
+        'dashboard.widgetDescriptions.revenueChart': 'Weekly revenue bar chart',
+        'dashboard.widgetDescriptions.appointmentsChart': 'Weekly appointments line chart',
+        'dashboard.widgetDescriptions.openTickets': 'Shows open support tickets requiring attention',
+        'dashboard.widgetDescriptions.recentActivity': 'Timeline of recent business events',
+        'dashboard.widgetDescriptions.capacityUtilization': 'Shows how booked your resources are this week',
+        'dashboard.widgetDescriptions.noShowRate': 'Percentage of appointments marked as no-show',
+        'dashboard.widgetDescriptions.customerBreakdown': 'Customer breakdown this month',
+      };
+      return translations[key] || key;
+    },
+  }),
+}));
+
+describe('WidgetConfigModal', () => {
+  const mockOnClose = vi.fn();
+  const mockOnToggleWidget = vi.fn();
+  const mockOnResetLayout = vi.fn();
+
+  const defaultProps = {
+    isOpen: true,
+    onClose: mockOnClose,
+    activeWidgets: ['appointments-metric', 'customers-metric', 'revenue-chart'],
+    onToggleWidget: mockOnToggleWidget,
+    onResetLayout: mockOnResetLayout,
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('Modal Visibility', () => {
+    it('should render when isOpen is true', () => {
+      render(<WidgetConfigModal {...defaultProps} />);
+      expect(screen.getByText('Configure Widgets')).toBeInTheDocument();
+    });
+
+    it('should not render when isOpen is false', () => {
+      render(<WidgetConfigModal {...defaultProps} isOpen={false} />);
+      expect(screen.queryByText('Configure Widgets')).not.toBeInTheDocument();
+    });
+
+    it('should return null when not open', () => {
+      const { container } = render(<WidgetConfigModal {...defaultProps} isOpen={false} />);
+      expect(container.firstChild).toBeNull();
+    });
+  });
+
+  describe('Modal Header', () => {
+    it('should render modal title', () => {
+      render(<WidgetConfigModal {...defaultProps} />);
+      const title = screen.getByText('Configure Widgets');
+      expect(title).toBeInTheDocument();
+      expect(title).toHaveClass('text-lg', 'font-semibold');
+    });
+
+    it('should render close button in header', () => {
+      const { container } = render(<WidgetConfigModal {...defaultProps} />);
+
+      // Close button (X icon) should be present
+      const closeButtons = container.querySelectorAll('button');
+      expect(closeButtons.length).toBeGreaterThan(0);
+    });
+
+    it('should call onClose when header close button is clicked', async () => {
+      const user = userEvent.setup();
+      const { container } = render(<WidgetConfigModal {...defaultProps} />);
+
+      // Find the X button in header
+      const buttons = container.querySelectorAll('button');
+      const closeButton = Array.from(buttons).find(btn =>
+        btn.querySelector('svg')
+      ) as HTMLElement;
+
+      if (closeButton) {
+        await user.click(closeButton);
+        expect(mockOnClose).toHaveBeenCalledTimes(1);
+      }
+    });
+  });
+
+  describe('Modal Content', () => {
+    it('should render description text', () => {
+      render(<WidgetConfigModal {...defaultProps} />);
+      expect(screen.getByText('Choose which widgets to display on your dashboard')).toBeInTheDocument();
+    });
+
+    it('should render all widget options', () => {
+      render(<WidgetConfigModal {...defaultProps} />);
+
+      // Check for widget titles
+      expect(screen.getByText('Total Appointments')).toBeInTheDocument();
+      expect(screen.getByText('Active Customers')).toBeInTheDocument();
+      expect(screen.getByText('Services')).toBeInTheDocument();
+      expect(screen.getByText('Resources')).toBeInTheDocument();
+      expect(screen.getByText('Revenue')).toBeInTheDocument();
+      expect(screen.getByText('Appointments Trend')).toBeInTheDocument();
+      expect(screen.getByText('Open Tickets')).toBeInTheDocument();
+      expect(screen.getByText('Recent Activity')).toBeInTheDocument();
+      expect(screen.getByText('Capacity Utilization')).toBeInTheDocument();
+      expect(screen.getByText('No-Show Rate')).toBeInTheDocument();
+      expect(screen.getByText('New vs Returning')).toBeInTheDocument();
+    });
+
+    it('should render widget descriptions', () => {
+      render(<WidgetConfigModal {...defaultProps} />);
+
+      expect(screen.getByText('Shows appointment count with weekly and monthly growth')).toBeInTheDocument();
+      expect(screen.getByText('Timeline of recent business events')).toBeInTheDocument();
+    });
+
+    it('should render widget icons', () => {
+      const { container } = render(<WidgetConfigModal {...defaultProps} />);
+
+      // Should have multiple SVG icons
+      const svgs = container.querySelectorAll('svg');
+      expect(svgs.length).toBeGreaterThan(10); // At least one per widget
+    });
+  });
+
+  describe('Widget Selection', () => {
+    it('should highlight active widgets', () => {
+      const { container } = render(<WidgetConfigModal {...defaultProps} />);
+
+      // Active widgets should have brand-500 border
+      const activeWidgets = container.querySelectorAll('.border-brand-500');
+      expect(activeWidgets.length).toBe(defaultProps.activeWidgets.length);
+    });
+
+    it('should show checkmark on active widgets', () => {
+      render(<WidgetConfigModal {...defaultProps} />);
+
+      // Check icons should be present for active widgets
+      const { container } = render(<WidgetConfigModal {...defaultProps} />);
+      const svgs = container.querySelectorAll('svg');
+
+      // Should have check icons (hard to test exact count due to other icons)
+      expect(svgs.length).toBeGreaterThan(0);
+    });
+
+    it('should not highlight inactive widgets', () => {
+      const { container } = render(<WidgetConfigModal {...defaultProps} />);
+
+      // Inactive widgets should have gray border
+      const inactiveWidgets = container.querySelectorAll('.border-gray-200');
+      expect(inactiveWidgets.length).toBeGreaterThan(0);
+    });
+
+    it('should call onToggleWidget when widget is clicked', async () => {
+      const user = userEvent.setup();
+      render(<WidgetConfigModal {...defaultProps} />);
+
+      const widget = screen.getByText('Total Appointments').closest('button');
+      expect(widget).toBeInTheDocument();
+
+      if (widget) {
+        await user.click(widget);
+        expect(mockOnToggleWidget).toHaveBeenCalledWith('appointments-metric');
+      }
+    });
+
+    it('should call onToggleWidget with correct widget ID', async () => {
+      const user = userEvent.setup();
+      render(<WidgetConfigModal {...defaultProps} />);
+
+      const revenueWidget = screen.getByText('Revenue').closest('button');
+      if (revenueWidget) {
+        await user.click(revenueWidget);
+        expect(mockOnToggleWidget).toHaveBeenCalledWith('revenue-chart');
+      }
+
+      const ticketsWidget = screen.getByText('Open Tickets').closest('button');
+      if (ticketsWidget) {
+        await user.click(ticketsWidget);
+        expect(mockOnToggleWidget).toHaveBeenCalledWith('open-tickets');
+      }
+    });
+
+    it('should allow toggling multiple widgets', async () => {
+      const user = userEvent.setup();
+      render(<WidgetConfigModal {...defaultProps} />);
+
+      const widget1 = screen.getByText('Services').closest('button');
+      const widget2 = screen.getByText('Resources').closest('button');
+
+      if (widget1) await user.click(widget1);
+      if (widget2) await user.click(widget2);
+
+      expect(mockOnToggleWidget).toHaveBeenCalledTimes(2);
+    });
+  });
+
+  describe('Active Widget Styling', () => {
+    it('should apply active styling to selected widgets', () => {
+      const { container } = render(<WidgetConfigModal {...defaultProps} />);
+
+      // Active widgets should have brand colors
+      const brandBg = container.querySelectorAll('.bg-brand-50');
+      expect(brandBg.length).toBeGreaterThan(0);
+    });
+
+    it('should apply inactive styling to unselected widgets', () => {
+      const { container } = render(
+        <WidgetConfigModal
+          {...defaultProps}
+          activeWidgets={['appointments-metric']} // Only one active
+        />
+      );
+
+      // Many widgets should have gray styling
+      const grayBorders = container.querySelectorAll('.border-gray-200');
+      expect(grayBorders.length).toBeGreaterThan(5);
+    });
+
+    it('should apply different icon colors for active vs inactive', () => {
+      const { container } = render(<WidgetConfigModal {...defaultProps} />);
+
+      // Active widgets should have brand icon colors
+      const brandIcons = container.querySelectorAll('.text-brand-600');
+      expect(brandIcons.length).toBeGreaterThan(0);
+
+      // Inactive widgets should have gray icon colors
+      const grayIcons = container.querySelectorAll('.text-gray-500');
+      expect(grayIcons.length).toBeGreaterThan(0);
+    });
+  });
+
+  describe('Modal Footer', () => {
+    it('should render reset button', () => {
+      render(<WidgetConfigModal {...defaultProps} />);
+      expect(screen.getByText('Reset to Default')).toBeInTheDocument();
+    });
+
+    it('should render done button', () => {
+      render(<WidgetConfigModal {...defaultProps} />);
+      expect(screen.getByText('Done')).toBeInTheDocument();
+    });
+
+    it('should call onResetLayout when reset button is clicked', async () => {
+      const user = userEvent.setup();
+      render(<WidgetConfigModal {...defaultProps} />);
+
+      const resetButton = screen.getByText('Reset to Default');
+      await user.click(resetButton);
+
+      expect(mockOnResetLayout).toHaveBeenCalledTimes(1);
+    });
+
+    it('should call onClose when done button is clicked', async () => {
+      const user = userEvent.setup();
+      render(<WidgetConfigModal {...defaultProps} />);
+
+      const doneButton = screen.getByText('Done');
+      await user.click(doneButton);
+
+      expect(mockOnClose).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('Backdrop Interaction', () => {
+    it('should render backdrop', () => {
+      const { container } = render(<WidgetConfigModal {...defaultProps} />);
+
+      // Backdrop div with bg-black/50
+      const backdrop = container.querySelector('.bg-black\\/50');
+      expect(backdrop).toBeInTheDocument();
+    });
+
+    it('should call onClose when backdrop is clicked', async () => {
+      const user = userEvent.setup();
+      const { container } = render(<WidgetConfigModal {...defaultProps} />);
+
+      const backdrop = container.querySelector('.bg-black\\/50') as HTMLElement;
+      expect(backdrop).toBeInTheDocument();
+
+      if (backdrop) {
+        await user.click(backdrop);
+        expect(mockOnClose).toHaveBeenCalledTimes(1);
+      }
+    });
+
+    it('should not call onClose when modal content is clicked', async () => {
+      const user = userEvent.setup();
+      const { container } = render(<WidgetConfigModal {...defaultProps} />);
+
+      // Click on modal content, not backdrop
+      const modalContent = container.querySelector('.bg-white') as HTMLElement;
+      if (modalContent) {
+        await user.click(modalContent);
+        expect(mockOnClose).not.toHaveBeenCalled();
+      }
+    });
+  });
+
+  describe('Widget Grid Layout', () => {
+    it('should display widgets in a grid', () => {
+      const { container } = render(<WidgetConfigModal {...defaultProps} />);
+
+      // Grid container should exist
+      const grid = container.querySelector('.grid');
+      expect(grid).toBeInTheDocument();
+      expect(grid).toHaveClass('grid-cols-1', 'sm:grid-cols-2');
+    });
+
+    it('should render all 11 widgets', () => {
+      render(<WidgetConfigModal {...defaultProps} />);
+
+      // Count widget buttons
+      const widgetButtons = screen.getAllByRole('button');
+      // Should have 11 widget buttons + 2 footer buttons + 1 close button = 14 total
+      expect(widgetButtons.length).toBeGreaterThanOrEqual(11);
+    });
+  });
+
+  describe('Styling', () => {
+    it('should apply modal container styles', () => {
+      const { container } = render(<WidgetConfigModal {...defaultProps} />);
+
+      const modal = container.querySelector('.bg-white');
+      expect(modal).toHaveClass(
+        'bg-white',
+        'rounded-xl',
+        'shadow-xl',
+        'max-w-2xl',
+        'w-full'
+      );
+    });
+
+    it('should apply dark mode styles', () => {
+      const { container } = render(<WidgetConfigModal {...defaultProps} />);
+
+      const modal = container.querySelector('.dark\\:bg-gray-800');
+      expect(modal).toBeInTheDocument();
+    });
+
+    it('should make modal scrollable', () => {
+      const { container } = render(<WidgetConfigModal {...defaultProps} />);
+
+      const scrollableContent = container.querySelector('.overflow-y-auto');
+      expect(scrollableContent).toBeInTheDocument();
+    });
+
+    it('should apply max height to modal', () => {
+      const { container } = render(<WidgetConfigModal {...defaultProps} />);
+
+      const modal = container.querySelector('.max-h-\\[80vh\\]');
+      expect(modal).toBeInTheDocument();
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('should have semantic HTML structure', () => {
+      const { container } = render(<WidgetConfigModal {...defaultProps} />);
+
+      const headings = container.querySelectorAll('h2');
+      expect(headings.length).toBeGreaterThan(0);
+    });
+
+    it('should have accessible buttons', () => {
+      render(<WidgetConfigModal {...defaultProps} />);
+
+      const buttons = screen.getAllByRole('button');
+      expect(buttons.length).toBeGreaterThan(0);
+    });
+
+    it('should have clear button text', () => {
+      render(<WidgetConfigModal {...defaultProps} />);
+
+      expect(screen.getByText('Done')).toBeInTheDocument();
+      expect(screen.getByText('Reset to Default')).toBeInTheDocument();
+    });
+
+    it('should have descriptive widget names', () => {
+      render(<WidgetConfigModal {...defaultProps} />);
+
+      expect(screen.getByText('Total Appointments')).toBeInTheDocument();
+      expect(screen.getByText('Recent Activity')).toBeInTheDocument();
+    });
+  });
+
+  describe('Widget Descriptions', () => {
+    it('should show description for each widget', () => {
+      render(<WidgetConfigModal {...defaultProps} />);
+
+      // Check a few widget descriptions
+      expect(screen.getByText('Shows appointment count with weekly and monthly growth')).toBeInTheDocument();
+      expect(screen.getByText('Timeline of recent business events')).toBeInTheDocument();
+      expect(screen.getByText('Shows how booked your resources are this week')).toBeInTheDocument();
+    });
+
+    it('should display descriptions in smaller text', () => {
+      const { container } = render(<WidgetConfigModal {...defaultProps} />);
+
+      const descriptions = container.querySelectorAll('.text-xs');
+      expect(descriptions.length).toBeGreaterThan(0);
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('should handle empty activeWidgets array', () => {
+      render(<WidgetConfigModal {...defaultProps} activeWidgets={[]} />);
+
+      // Should still render all widgets, just none selected
+      expect(screen.getByText('Total Appointments')).toBeInTheDocument();
+
+      // No checkmarks should be visible
+      const { container } = render(<WidgetConfigModal {...defaultProps} activeWidgets={[]} />);
+      const activeWidgets = container.querySelectorAll('.border-brand-500');
+      expect(activeWidgets.length).toBe(0);
+    });
+
+    it('should handle all widgets active', () => {
+      const allWidgets = [
+        'appointments-metric',
+        'customers-metric',
+        'services-metric',
+        'resources-metric',
+        'revenue-chart',
+        'appointments-chart',
+        'open-tickets',
+        'recent-activity',
+        'capacity-utilization',
+        'no-show-rate',
+        'customer-breakdown',
+      ];
+
+      const { container } = render(
+        <WidgetConfigModal {...defaultProps} activeWidgets={allWidgets} />
+      );
+
+      // All widgets should have active styling
+      const activeWidgets = container.querySelectorAll('.border-brand-500');
+      expect(activeWidgets.length).toBe(11);
+    });
+
+    it('should handle rapid widget toggling', async () => {
+      const user = userEvent.setup();
+      render(<WidgetConfigModal {...defaultProps} />);
+
+      const widget = screen.getByText('Services').closest('button');
+
+      if (widget) {
+        await user.click(widget);
+        await user.click(widget);
+        await user.click(widget);
+
+        expect(mockOnToggleWidget).toHaveBeenCalledTimes(3);
+      }
+    });
+  });
+
+  describe('Internationalization', () => {
+    it('should use translations for modal title', () => {
+      render(<WidgetConfigModal {...defaultProps} />);
+      expect(screen.getByText('Configure Widgets')).toBeInTheDocument();
+    });
+
+    it('should use translations for widget titles', () => {
+      render(<WidgetConfigModal {...defaultProps} />);
+      expect(screen.getByText('Total Appointments')).toBeInTheDocument();
+      expect(screen.getByText('Recent Activity')).toBeInTheDocument();
+    });
+
+    it('should use translations for widget descriptions', () => {
+      render(<WidgetConfigModal {...defaultProps} />);
+      expect(screen.getByText('Timeline of recent business events')).toBeInTheDocument();
+    });
+
+    it('should use translations for buttons', () => {
+      render(<WidgetConfigModal {...defaultProps} />);
+      expect(screen.getByText('Done')).toBeInTheDocument();
+      expect(screen.getByText('Reset to Default')).toBeInTheDocument();
+    });
+  });
+
+  describe('Integration', () => {
+    it('should render correctly with all props', () => {
+      const handleClose = vi.fn();
+      const handleToggle = vi.fn();
+      const handleReset = vi.fn();
+
+      render(
+        <WidgetConfigModal
+          isOpen={true}
+          onClose={handleClose}
+          activeWidgets={['appointments-metric', 'revenue-chart']}
+          onToggleWidget={handleToggle}
+          onResetLayout={handleReset}
+        />
+      );
+
+      expect(screen.getByText('Configure Widgets')).toBeInTheDocument();
+      expect(screen.getByText('Total Appointments')).toBeInTheDocument();
+      expect(screen.getByText('Done')).toBeInTheDocument();
+    });
+
+    it('should support complete user workflow', async () => {
+      const user = userEvent.setup();
+      const handleClose = vi.fn();
+      const handleToggle = vi.fn();
+      const handleReset = vi.fn();
+
+      render(
+        <WidgetConfigModal
+          isOpen={true}
+          onClose={handleClose}
+          activeWidgets={['appointments-metric']}
+          onToggleWidget={handleToggle}
+          onResetLayout={handleReset}
+        />
+      );
+
+      // User toggles a widget
+      const widget = screen.getByText('Revenue').closest('button');
+      if (widget) await user.click(widget);
+      expect(handleToggle).toHaveBeenCalledWith('revenue-chart');
+
+      // User resets layout
+      const resetButton = screen.getByText('Reset to Default');
+      await user.click(resetButton);
+      expect(handleReset).toHaveBeenCalledTimes(1);
+
+      // User closes modal
+      const doneButton = screen.getByText('Done');
+      await user.click(doneButton);
+      expect(handleClose).toHaveBeenCalledTimes(1);
+    });
+  });
+});

frontend/src/components/email/__tests__/EmailComposer.test.tsx

@@ -0,0 +1,373 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import EmailComposer from '../EmailComposer';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import type { StaffEmail } from '../../../types';
+
+// Mock react-i18next
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => key,
+  }),
+}));
+
+// Mock react-hot-toast
+vi.mock('react-hot-toast', () => ({
+  default: {
+    success: vi.fn(),
+    error: vi.fn(),
+  },
+}));
+
+// Mock hooks
+vi.mock('../../../hooks/useStaffEmail', () => ({
+  useCreateDraft: vi.fn(() => ({
+    mutateAsync: vi.fn(),
+    isPending: false,
+  })),
+  useUpdateDraft: vi.fn(() => ({
+    mutateAsync: vi.fn(),
+    isPending: false,
+  })),
+  useSendEmail: vi.fn(() => ({
+    mutateAsync: vi.fn(),
+    isPending: false,
+  })),
+  useUploadAttachment: vi.fn(() => ({
+    mutateAsync: vi.fn(),
+  })),
+  useContactSearch: vi.fn(() => ({
+    data: [],
+  })),
+  useUserEmailAddresses: vi.fn(() => ({
+    data: [
+      {
+        id: 1,
+        email_address: 'test@example.com',
+        display_name: 'Test User',
+      },
+    ],
+  })),
+}));
+
+describe('EmailComposer', () => {
+  const defaultProps = {
+    onClose: vi.fn(),
+    onSent: vi.fn(),
+  };
+
+  const mockReplyToEmail: StaffEmail = {
+    id: 1,
+    owner: 1,
+    emailAddress: 1,
+    folder: 1,
+    fromAddress: 'sender@example.com',
+    fromName: 'Sender Name',
+    toAddresses: ['test@example.com'],
+    ccAddresses: [],
+    bccAddresses: [],
+    subject: 'Original Subject',
+    snippet: 'Email snippet',
+    bodyText: 'Original email body',
+    bodyHtml: '<p>Original email body</p>',
+    messageId: 'message-123',
+    inReplyTo: null,
+    references: '',
+    status: 'SENT',
+    threadId: 'thread-123',
+    emailDate: '2025-01-15T10:00:00Z',
+    isRead: true,
+    isStarred: false,
+    isImportant: false,
+    isAnswered: false,
+    isPermanentlyDeleted: false,
+    deletedAt: null,
+    hasAttachments: false,
+    attachmentCount: 0,
+    attachments: [],
+    labels: [],
+    createdAt: '2025-01-15T10:00:00Z',
+    updatedAt: '2025-01-15T10:00:00Z',
+  };
+
+  const createWrapper = () => {
+    const queryClient = new QueryClient({
+      defaultOptions: {
+        queries: { retry: false },
+        mutations: { retry: false },
+      },
+    });
+    return ({ children }: { children: React.ReactNode }) => (
+      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    );
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('renders new message mode', () => {
+    render(<EmailComposer {...defaultProps} />, { wrapper: createWrapper() });
+    expect(screen.getByText('New Message')).toBeInTheDocument();
+  });
+
+  it('renders reply mode with subject prefixed', () => {
+    render(<EmailComposer {...defaultProps} replyTo={mockReplyToEmail} />, {
+      wrapper: createWrapper(),
+    });
+    expect(screen.getByText('Reply')).toBeInTheDocument();
+    expect(screen.getByDisplayValue('Re: Original Subject')).toBeInTheDocument();
+  });
+
+  it('renders forward mode with subject prefixed', () => {
+    render(<EmailComposer {...defaultProps} forwardFrom={mockReplyToEmail} />, {
+      wrapper: createWrapper(),
+    });
+    expect(screen.getByText('Forward')).toBeInTheDocument();
+    expect(screen.getByDisplayValue('Fwd: Original Subject')).toBeInTheDocument();
+  });
+
+  it('populates recipient in reply mode', () => {
+    render(<EmailComposer {...defaultProps} replyTo={mockReplyToEmail} />, {
+      wrapper: createWrapper(),
+    });
+    expect(screen.getByDisplayValue('sender@example.com')).toBeInTheDocument();
+  });
+
+  it('renders minimized state', () => {
+    render(<EmailComposer {...defaultProps} />, { wrapper: createWrapper() });
+
+    const buttons = screen.getAllByRole('button');
+    const minimizeButton = buttons.find((btn) =>
+      btn.querySelector('svg')?.classList.contains('lucide-minimize-2')
+    );
+    if (minimizeButton) {
+      fireEvent.click(minimizeButton);
+    }
+
+    expect(screen.getByText('New Message')).toBeInTheDocument();
+  });
+
+  it('expands from minimized state', () => {
+    render(<EmailComposer {...defaultProps} />, { wrapper: createWrapper() });
+
+    // Minimize
+    let buttons = screen.getAllByRole('button');
+    const minimizeButton = buttons.find((btn) =>
+      btn.querySelector('svg')?.classList.contains('lucide-minimize-2')
+    );
+    if (minimizeButton) {
+      fireEvent.click(minimizeButton);
+    }
+
+    // Maximize
+    buttons = screen.getAllByRole('button');
+    const maximizeButton = buttons.find((btn) =>
+      btn.querySelector('svg')?.classList.contains('lucide-maximize-2')
+    );
+    if (maximizeButton) {
+      fireEvent.click(maximizeButton);
+    }
+
+    expect(screen.getByPlaceholderText('recipient@example.com')).toBeInTheDocument();
+  });
+
+  it('calls onClose when close button clicked', () => {
+    render(<EmailComposer {...defaultProps} />, { wrapper: createWrapper() });
+
+    const buttons = screen.getAllByRole('button');
+    const closeButton = buttons.find((btn) =>
+      btn.querySelector('svg')?.classList.contains('lucide-x')
+    );
+    if (closeButton) {
+      fireEvent.click(closeButton);
+    }
+
+    expect(defaultProps.onClose).toHaveBeenCalled();
+  });
+
+  it('shows Cc field when Cc button clicked', () => {
+    render(<EmailComposer {...defaultProps} />, { wrapper: createWrapper() });
+
+    const ccButton = screen.getByText('Cc');
+    fireEvent.click(ccButton);
+
+    expect(screen.getByPlaceholderText('cc@example.com')).toBeInTheDocument();
+  });
+
+  it('shows Bcc field when Bcc button clicked', () => {
+    render(<EmailComposer {...defaultProps} />, { wrapper: createWrapper() });
+
+    const bccButton = screen.getByText('Bcc');
+    fireEvent.click(bccButton);
+
+    expect(screen.getByPlaceholderText('bcc@example.com')).toBeInTheDocument();
+  });
+
+  it('updates subject field', () => {
+    render(<EmailComposer {...defaultProps} />, { wrapper: createWrapper() });
+
+    const subjectInput = screen.getByPlaceholderText('Email subject');
+    fireEvent.change(subjectInput, { target: { value: 'Test Subject' } });
+
+    expect(subjectInput).toHaveValue('Test Subject');
+  });
+
+  it('updates body field', () => {
+    render(<EmailComposer {...defaultProps} />, { wrapper: createWrapper() });
+
+    const bodyTextarea = screen.getByPlaceholderText('Write your message...');
+    fireEvent.change(bodyTextarea, { target: { value: 'Test email body' } });
+
+    expect(bodyTextarea).toHaveValue('Test email body');
+  });
+
+  it('updates to field', () => {
+    render(<EmailComposer {...defaultProps} />, { wrapper: createWrapper() });
+
+    const toInput = screen.getByPlaceholderText('recipient@example.com');
+    fireEvent.change(toInput, { target: { value: 'test@example.com' } });
+
+    expect(toInput).toHaveValue('test@example.com');
+  });
+
+  it('updates cc field when shown', () => {
+    render(<EmailComposer {...defaultProps} />, { wrapper: createWrapper() });
+
+    fireEvent.click(screen.getByText('Cc'));
+    const ccInput = screen.getByPlaceholderText('cc@example.com');
+    fireEvent.change(ccInput, { target: { value: 'cc@example.com' } });
+
+    expect(ccInput).toHaveValue('cc@example.com');
+  });
+
+  it('updates bcc field when shown', () => {
+    render(<EmailComposer {...defaultProps} />, { wrapper: createWrapper() });
+
+    fireEvent.click(screen.getByText('Bcc'));
+    const bccInput = screen.getByPlaceholderText('bcc@example.com');
+    fireEvent.change(bccInput, { target: { value: 'bcc@example.com' } });
+
+    expect(bccInput).toHaveValue('bcc@example.com');
+  });
+
+  it('renders send button', () => {
+    render(<EmailComposer {...defaultProps} />, { wrapper: createWrapper() });
+
+    expect(screen.getByText('staffEmail.send')).toBeInTheDocument();
+  });
+
+  it('renders save draft button', () => {
+    render(<EmailComposer {...defaultProps} />, { wrapper: createWrapper() });
+
+    expect(screen.getByText('Save draft')).toBeInTheDocument();
+  });
+
+  it('renders formatting buttons', () => {
+    render(<EmailComposer {...defaultProps} />, { wrapper: createWrapper() });
+
+    const buttons = screen.getAllByRole('button');
+    const boldButton = buttons.find((btn) =>
+      btn.querySelector('svg')?.classList.contains('lucide-bold')
+    );
+    const italicButton = buttons.find((btn) =>
+      btn.querySelector('svg')?.classList.contains('lucide-italic')
+    );
+    const underlineButton = buttons.find((btn) =>
+      btn.querySelector('svg')?.classList.contains('lucide-underline')
+    );
+
+    expect(boldButton).toBeInTheDocument();
+    expect(italicButton).toBeInTheDocument();
+    expect(underlineButton).toBeInTheDocument();
+  });
+
+  it('renders attachment button', () => {
+    render(<EmailComposer {...defaultProps} />, { wrapper: createWrapper() });
+
+    // Attachment input is wrapped in a label, not a button
+    const paperclipIcons = document.querySelectorAll('.lucide-paperclip');
+    expect(paperclipIcons.length).toBeGreaterThan(0);
+  });
+
+  it('renders discard button', () => {
+    render(<EmailComposer {...defaultProps} />, { wrapper: createWrapper() });
+
+    const buttons = screen.getAllByRole('button');
+    const discardButton = buttons.find((btn) =>
+      btn.querySelector('svg')?.classList.contains('lucide-trash-2')
+    );
+
+    expect(discardButton).toBeInTheDocument();
+  });
+
+  it('renders from address selector', () => {
+    render(<EmailComposer {...defaultProps} />, { wrapper: createWrapper() });
+
+    expect(screen.getByText('From:')).toBeInTheDocument();
+    expect(screen.getByRole('combobox')).toBeInTheDocument();
+  });
+
+  it('populates from address with default value', async () => {
+    render(<EmailComposer {...defaultProps} />, { wrapper: createWrapper() });
+
+    await waitFor(() => {
+      const select = screen.getByRole('combobox');
+      expect(select).toHaveValue('1');
+    });
+  });
+
+  it('does not add Re: prefix if subject already has it', () => {
+    const emailWithReply = {
+      ...mockReplyToEmail,
+      subject: 'Re: Already Replied',
+    };
+
+    render(<EmailComposer {...defaultProps} replyTo={emailWithReply} />, {
+      wrapper: createWrapper(),
+    });
+
+    expect(screen.getByDisplayValue('Re: Already Replied')).toBeInTheDocument();
+  });
+
+  it('does not add Fwd: prefix if subject already has it', () => {
+    const emailWithFwd = {
+      ...mockReplyToEmail,
+      subject: 'Fwd: Already Forwarded',
+    };
+
+    render(<EmailComposer {...defaultProps} forwardFrom={emailWithFwd} />, {
+      wrapper: createWrapper(),
+    });
+
+    expect(screen.getByDisplayValue('Fwd: Already Forwarded')).toBeInTheDocument();
+  });
+
+  it('includes original message in reply body', () => {
+    render(<EmailComposer {...defaultProps} replyTo={mockReplyToEmail} />, {
+      wrapper: createWrapper(),
+    });
+
+    const bodyTextarea = screen.getByPlaceholderText('Write your message...');
+    const value = (bodyTextarea as HTMLTextAreaElement).value;
+    expect(value).toContain('Original email body');
+  });
+
+  it('includes original message in forward body', () => {
+    render(<EmailComposer {...defaultProps} forwardFrom={mockReplyToEmail} />, {
+      wrapper: createWrapper(),
+    });
+
+    const bodyTextarea = screen.getByPlaceholderText('Write your message...');
+    const value = (bodyTextarea as HTMLTextAreaElement).value;
+    expect(value).toContain('Original email body');
+  });
+
+  it('renders with all header fields', () => {
+    render(<EmailComposer {...defaultProps} />, { wrapper: createWrapper() });
+
+    expect(screen.getByText('From:')).toBeInTheDocument();
+    expect(screen.getByText('To:')).toBeInTheDocument();
+    expect(screen.getByText('Subject:')).toBeInTheDocument();
+  });
+});

frontend/src/components/email/__tests__/EmailViewer.test.tsx

@@ -0,0 +1,456 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import EmailViewer from '../EmailViewer';
+import type { StaffEmail } from '../../../types';
+
+// Mock react-i18next
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => key,
+  }),
+}));
+
+// Mock date-fns
+vi.mock('date-fns', () => ({
+  format: vi.fn(() => '2025-01-15 10:00 AM'),
+}));
+
+// Mock ResizeObserver
+class MockResizeObserver {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+}
+
+global.ResizeObserver = MockResizeObserver as any;
+
+describe('EmailViewer', () => {
+  const mockEmail: StaffEmail = {
+    id: 1,
+    owner: 1,
+    emailAddress: 1,
+    folder: 1,
+    fromAddress: 'sender@example.com',
+    fromName: 'Sender Name',
+    toAddresses: ['recipient@example.com'],
+    ccAddresses: [],
+    bccAddresses: [],
+    subject: 'Test Email Subject',
+    snippet: 'Email snippet',
+    bodyText: 'This is the email body text.',
+    bodyHtml: '<p>This is the email body HTML.</p>',
+    messageId: 'message-123',
+    inReplyTo: null,
+    references: '',
+    status: 'SENT',
+    threadId: 'thread-123',
+    emailDate: '2025-01-15T10:00:00Z',
+    isRead: true,
+    isStarred: false,
+    isImportant: false,
+    isAnswered: false,
+    isPermanentlyDeleted: false,
+    deletedAt: null,
+    hasAttachments: false,
+    attachmentCount: 0,
+    attachments: [],
+    labels: [],
+    createdAt: '2025-01-15T10:00:00Z',
+    updatedAt: '2025-01-15T10:00:00Z',
+  };
+
+  const defaultProps = {
+    email: mockEmail,
+    onReply: vi.fn(),
+    onReplyAll: vi.fn(),
+    onForward: vi.fn(),
+    onArchive: vi.fn(),
+    onTrash: vi.fn(),
+    onStar: vi.fn(),
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('renders loading state', () => {
+    render(<EmailViewer {...defaultProps} isLoading={true} />);
+    const spinner = document.querySelector('.animate-spin');
+    expect(spinner).toBeInTheDocument();
+  });
+
+  it('renders email subject', () => {
+    render(<EmailViewer {...defaultProps} />);
+    expect(screen.getByText('Test Email Subject')).toBeInTheDocument();
+  });
+
+  it('renders email from name', () => {
+    render(<EmailViewer {...defaultProps} />);
+    expect(screen.getByText('Sender Name')).toBeInTheDocument();
+  });
+
+  it('renders email from address', () => {
+    render(<EmailViewer {...defaultProps} />);
+    expect(screen.getByText('<sender@example.com>')).toBeInTheDocument();
+  });
+
+  it('renders email to addresses', () => {
+    render(<EmailViewer {...defaultProps} />);
+    expect(screen.getByText(/To:/)).toBeInTheDocument();
+    expect(screen.getByText(/recipient@example.com/)).toBeInTheDocument();
+  });
+
+  it('renders email date', () => {
+    render(<EmailViewer {...defaultProps} />);
+    expect(screen.getByText('2025-01-15 10:00 AM')).toBeInTheDocument();
+  });
+
+  it('renders HTML body by default', () => {
+    render(<EmailViewer {...defaultProps} />);
+    const iframe = screen.getByTitle('Email content');
+    expect(iframe).toBeInTheDocument();
+  });
+
+  it('renders plain text body when no HTML', () => {
+    const emailWithoutHtml = { ...mockEmail, bodyHtml: '' };
+    render(<EmailViewer {...defaultProps} email={emailWithoutHtml} />);
+    expect(screen.getByText('This is the email body text.')).toBeInTheDocument();
+  });
+
+  it('calls onReply when reply button clicked', () => {
+    render(<EmailViewer {...defaultProps} />);
+    const buttons = screen.getAllByRole('button');
+    const replyButton = buttons.find((btn) =>
+      btn.querySelector('svg')?.classList.contains('lucide-reply')
+    );
+    if (replyButton) {
+      fireEvent.click(replyButton);
+    }
+    expect(defaultProps.onReply).toHaveBeenCalled();
+  });
+
+  it('calls onReplyAll when reply all button clicked', () => {
+    render(<EmailViewer {...defaultProps} />);
+    const buttons = screen.getAllByRole('button');
+    const replyAllButton = buttons.find((btn) =>
+      btn.querySelector('svg')?.classList.contains('lucide-reply-all')
+    );
+    if (replyAllButton) {
+      fireEvent.click(replyAllButton);
+    }
+    expect(defaultProps.onReplyAll).toHaveBeenCalled();
+  });
+
+  it('calls onForward when forward button clicked', () => {
+    render(<EmailViewer {...defaultProps} />);
+    const buttons = screen.getAllByRole('button');
+    const forwardButton = buttons.find((btn) =>
+      btn.querySelector('svg')?.classList.contains('lucide-forward')
+    );
+    if (forwardButton) {
+      fireEvent.click(forwardButton);
+    }
+    expect(defaultProps.onForward).toHaveBeenCalled();
+  });
+
+  it('calls onArchive when archive button clicked', () => {
+    render(<EmailViewer {...defaultProps} />);
+    const buttons = screen.getAllByRole('button');
+    const archiveButton = buttons.find((btn) =>
+      btn.querySelector('svg')?.classList.contains('lucide-archive')
+    );
+    if (archiveButton) {
+      fireEvent.click(archiveButton);
+    }
+    expect(defaultProps.onArchive).toHaveBeenCalled();
+  });
+
+  it('calls onTrash when trash button clicked', () => {
+    render(<EmailViewer {...defaultProps} />);
+    const buttons = screen.getAllByRole('button');
+    const trashButton = buttons.find((btn) =>
+      btn.querySelector('svg')?.classList.contains('lucide-trash-2')
+    );
+    if (trashButton) {
+      fireEvent.click(trashButton);
+    }
+    expect(defaultProps.onTrash).toHaveBeenCalled();
+  });
+
+  it('calls onStar when star button clicked', () => {
+    render(<EmailViewer {...defaultProps} />);
+    const buttons = screen.getAllByRole('button');
+    const starButton = buttons.find((btn) =>
+      btn.querySelector('svg')?.classList.contains('lucide-star')
+    );
+    if (starButton) {
+      fireEvent.click(starButton);
+    }
+    expect(defaultProps.onStar).toHaveBeenCalled();
+  });
+
+  it('renders starred email with filled star', () => {
+    const starredEmail = { ...mockEmail, isStarred: true };
+    render(<EmailViewer {...defaultProps} email={starredEmail} />);
+    const star = document.querySelector('.fill-yellow-400');
+    expect(star).toBeInTheDocument();
+  });
+
+  it('renders CC addresses when present', () => {
+    const emailWithCc = {
+      ...mockEmail,
+      ccAddresses: ['cc1@example.com', 'cc2@example.com'],
+    };
+    render(<EmailViewer {...defaultProps} email={emailWithCc} />);
+    expect(screen.getByText(/Cc:/)).toBeInTheDocument();
+    expect(screen.getByText(/cc1@example.com, cc2@example.com/)).toBeInTheDocument();
+  });
+
+  it('does not render CC section when no CC addresses', () => {
+    render(<EmailViewer {...defaultProps} />);
+    expect(screen.queryByText(/Cc:/)).not.toBeInTheDocument();
+  });
+
+  it('renders labels when present', () => {
+    const emailWithLabels = {
+      ...mockEmail,
+      labels: [
+        { id: 1, owner: 1, name: 'Important', color: '#ff0000', createdAt: '2025-01-15T10:00:00Z' },
+        { id: 2, owner: 1, name: 'Work', color: '#00ff00', createdAt: '2025-01-15T10:00:00Z' },
+      ],
+    };
+    render(<EmailViewer {...defaultProps} email={emailWithLabels} />);
+    expect(screen.getByText('Important')).toBeInTheDocument();
+    expect(screen.getByText('Work')).toBeInTheDocument();
+  });
+
+  it('does not render labels section when no labels', () => {
+    render(<EmailViewer {...defaultProps} />);
+    const labels = screen.queryByText('Important');
+    expect(labels).not.toBeInTheDocument();
+  });
+
+  it('renders attachments when present', () => {
+    const emailWithAttachments = {
+      ...mockEmail,
+      hasAttachments: true,
+      attachmentCount: 2,
+      attachments: [
+        {
+          id: 1,
+          filename: 'document.pdf',
+          contentType: 'application/pdf',
+          size: 1024000,
+          url: 'http://example.com/doc.pdf',
+          createdAt: '2025-01-15T10:00:00Z',
+        },
+        {
+          id: 2,
+          filename: 'image.png',
+          contentType: 'image/png',
+          size: 512000,
+          url: 'http://example.com/img.png',
+          createdAt: '2025-01-15T10:00:00Z',
+        },
+      ],
+    };
+    render(<EmailViewer {...defaultProps} email={emailWithAttachments} />);
+    expect(screen.getByText('2 attachments')).toBeInTheDocument();
+    expect(screen.getByText('document.pdf')).toBeInTheDocument();
+    expect(screen.getByText('image.png')).toBeInTheDocument();
+  });
+
+  it('formats attachment sizes correctly', () => {
+    const emailWithAttachments = {
+      ...mockEmail,
+      hasAttachments: true,
+      attachmentCount: 1,
+      attachments: [
+        {
+          id: 1,
+          filename: 'document.pdf',
+          contentType: 'application/pdf',
+          size: 1024000,
+          url: 'http://example.com/doc.pdf',
+          createdAt: '2025-01-15T10:00:00Z',
+        },
+      ],
+    };
+    render(<EmailViewer {...defaultProps} email={emailWithAttachments} />);
+    expect(screen.getByText(/1\.0 MB|1000\.0 KB/)).toBeInTheDocument();
+  });
+
+  it('does not render attachments section when no attachments', () => {
+    render(<EmailViewer {...defaultProps} />);
+    expect(screen.queryByText(/attachment/)).not.toBeInTheDocument();
+  });
+
+  it('toggles between HTML and text view', () => {
+    render(<EmailViewer {...defaultProps} />);
+
+    const buttons = screen.getAllByRole('button');
+    const textViewButton = buttons.find((btn) =>
+      btn.querySelector('svg')?.classList.contains('lucide-file-text')
+    );
+
+    if (textViewButton) {
+      fireEvent.click(textViewButton);
+      expect(screen.getByText('This is the email body text.')).toBeInTheDocument();
+    }
+  });
+
+  it('does not show view mode toggle when no HTML body', () => {
+    const emailWithoutHtml = { ...mockEmail, bodyHtml: '' };
+    render(<EmailViewer {...defaultProps} email={emailWithoutHtml} />);
+
+    const buttons = screen.getAllByRole('button');
+    const htmlButton = buttons.find((btn) =>
+      btn.querySelector('svg')?.classList.contains('lucide-code')
+    );
+
+    expect(htmlButton).toBeUndefined();
+  });
+
+  it('renders quick reply button', () => {
+    render(<EmailViewer {...defaultProps} />);
+    expect(screen.getByText('staffEmail.clickToReply')).toBeInTheDocument();
+  });
+
+  it('calls onReply when quick reply button clicked', () => {
+    render(<EmailViewer {...defaultProps} />);
+    fireEvent.click(screen.getByText('staffEmail.clickToReply'));
+    expect(defaultProps.onReply).toHaveBeenCalled();
+  });
+
+  it('renders mark as read button when email is unread', () => {
+    const unreadEmail = { ...mockEmail, isRead: false };
+    render(<EmailViewer {...defaultProps} email={unreadEmail} onMarkRead={vi.fn()} />);
+
+    const buttons = screen.getAllByRole('button');
+    const markReadButton = buttons.find((btn) =>
+      btn.querySelector('svg')?.classList.contains('lucide-mail-open')
+    );
+
+    expect(markReadButton).toBeInTheDocument();
+  });
+
+  it('renders mark as unread button when email is read', () => {
+    render(<EmailViewer {...defaultProps} onMarkUnread={vi.fn()} />);
+
+    const buttons = screen.getAllByRole('button');
+    const markUnreadButton = buttons.find((btn) =>
+      btn.querySelector('svg')?.classList.contains('lucide-mail')
+    );
+
+    expect(markUnreadButton).toBeInTheDocument();
+  });
+
+  it('calls onMarkRead when mark as read button clicked', () => {
+    const onMarkRead = vi.fn();
+    const unreadEmail = { ...mockEmail, isRead: false };
+    render(<EmailViewer {...defaultProps} email={unreadEmail} onMarkRead={onMarkRead} />);
+
+    const buttons = screen.getAllByRole('button');
+    const markReadButton = buttons.find((btn) =>
+      btn.querySelector('svg')?.classList.contains('lucide-mail-open')
+    );
+
+    if (markReadButton) {
+      fireEvent.click(markReadButton);
+    }
+    expect(onMarkRead).toHaveBeenCalled();
+  });
+
+  it('calls onMarkUnread when mark as unread button clicked', () => {
+    const onMarkUnread = vi.fn();
+    render(<EmailViewer {...defaultProps} onMarkUnread={onMarkUnread} />);
+
+    const buttons = screen.getAllByRole('button');
+    const markUnreadButton = buttons.find((btn) =>
+      btn.querySelector('svg')?.classList.contains('lucide-mail')
+    );
+
+    if (markUnreadButton) {
+      fireEvent.click(markUnreadButton);
+    }
+    expect(onMarkUnread).toHaveBeenCalled();
+  });
+
+  it('renders restore button when in trash', () => {
+    const onRestore = vi.fn();
+    render(<EmailViewer {...defaultProps} isInTrash={true} onRestore={onRestore} />);
+
+    const buttons = screen.getAllByRole('button');
+    const restoreButton = buttons.find((btn) =>
+      btn.querySelector('svg')?.classList.contains('lucide-rotate-ccw')
+    );
+
+    expect(restoreButton).toBeInTheDocument();
+  });
+
+  it('calls onRestore when restore button clicked', () => {
+    const onRestore = vi.fn();
+    render(<EmailViewer {...defaultProps} isInTrash={true} onRestore={onRestore} />);
+
+    const buttons = screen.getAllByRole('button');
+    const restoreButton = buttons.find((btn) =>
+      btn.querySelector('svg')?.classList.contains('lucide-rotate-ccw')
+    );
+
+    if (restoreButton) {
+      fireEvent.click(restoreButton);
+    }
+    expect(onRestore).toHaveBeenCalled();
+  });
+
+  it('shows trash button when not in trash', () => {
+    render(<EmailViewer {...defaultProps} isInTrash={false} />);
+
+    const buttons = screen.getAllByRole('button');
+    const trashButton = buttons.find((btn) =>
+      btn.querySelector('svg')?.classList.contains('lucide-trash-2')
+    );
+
+    expect(trashButton).toBeInTheDocument();
+  });
+
+  it('does not show trash button when in trash', () => {
+    const onRestore = vi.fn();
+    render(<EmailViewer {...defaultProps} isInTrash={true} onRestore={onRestore} />);
+
+    const buttons = screen.getAllByRole('button');
+    const trashButtons = buttons.filter((btn) =>
+      btn.querySelector('svg')?.classList.contains('lucide-trash-2')
+    );
+
+    expect(trashButtons.length).toBe(0);
+  });
+
+  it('renders (No Subject) when subject is empty', () => {
+    const emailWithoutSubject = { ...mockEmail, subject: '' };
+    render(<EmailViewer {...defaultProps} email={emailWithoutSubject} />);
+    expect(screen.getByText('(No Subject)')).toBeInTheDocument();
+  });
+
+  it('renders avatar with first letter of sender name', () => {
+    render(<EmailViewer {...defaultProps} />);
+    const avatar = screen.getByText('S'); // First letter of "Sender Name"
+    expect(avatar).toBeInTheDocument();
+  });
+
+  it('uses email address for avatar when no name provided', () => {
+    const emailWithoutName = { ...mockEmail, fromName: '' };
+    render(<EmailViewer {...defaultProps} email={emailWithoutName} />);
+    const avatar = screen.getByText('S'); // First letter of "sender@example.com" (uppercase)
+    expect(avatar).toBeInTheDocument();
+  });
+
+  it('renders multiple to addresses', () => {
+    const emailWithMultipleTo = {
+      ...mockEmail,
+      toAddresses: ['to1@example.com', 'to2@example.com', 'to3@example.com'],
+    };
+    render(<EmailViewer {...defaultProps} email={emailWithMultipleTo} />);
+    expect(screen.getByText(/to1@example.com, to2@example.com, to3@example.com/)).toBeInTheDocument();
+  });
+});

frontend/src/components/help/__tests__/HelpSearch.test.tsx

@@ -0,0 +1,461 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import { HelpSearch } from '../HelpSearch';
+import * as useHelpSearchModule from '../../../hooks/useHelpSearch';
+
+// Mock the useHelpSearch hook
+vi.mock('../../../hooks/useHelpSearch');
+
+describe('HelpSearch', () => {
+  const mockSearch = vi.fn();
+  const defaultHookReturn = {
+    search: mockSearch,
+    results: [],
+    isSearching: false,
+    error: null,
+    hasApiKey: false,
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    vi.spyOn(useHelpSearchModule, 'useHelpSearch').mockReturnValue(defaultHookReturn);
+  });
+
+  afterEach(() => {
+    vi.clearAllTimers();
+  });
+
+  const renderWithRouter = (component: React.ReactElement) => {
+    return render(<MemoryRouter>{component}</MemoryRouter>);
+  };
+
+  describe('rendering', () => {
+    it('renders search input with default placeholder', () => {
+      renderWithRouter(<HelpSearch />);
+      expect(screen.getByPlaceholderText('Ask a question or search for help...')).toBeInTheDocument();
+    });
+
+    it('renders search input with custom placeholder', () => {
+      renderWithRouter(<HelpSearch placeholder="Search documentation..." />);
+      expect(screen.getByPlaceholderText('Search documentation...')).toBeInTheDocument();
+    });
+
+    it('applies custom className', () => {
+      const { container } = renderWithRouter(<HelpSearch className="custom-class" />);
+      expect(container.querySelector('.custom-class')).toBeInTheDocument();
+    });
+
+    it('shows search icon by default', () => {
+      renderWithRouter(<HelpSearch />);
+      const searchIcon = document.querySelector('svg');
+      expect(searchIcon).toBeInTheDocument();
+    });
+  });
+
+  describe('AI badge', () => {
+    it('shows AI badge when API key is present', () => {
+      vi.spyOn(useHelpSearchModule, 'useHelpSearch').mockReturnValue({
+        ...defaultHookReturn,
+        hasApiKey: true,
+      });
+      renderWithRouter(<HelpSearch />);
+      expect(screen.getByText('AI')).toBeInTheDocument();
+    });
+
+    it('does not show AI badge when API key is absent', () => {
+      renderWithRouter(<HelpSearch />);
+      expect(screen.queryByText('AI')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('search input behavior', () => {
+    it('updates query on input change', () => {
+      renderWithRouter(<HelpSearch />);
+      const input = screen.getByPlaceholderText('Ask a question or search for help...');
+
+      fireEvent.change(input, { target: { value: 'scheduler' } });
+      expect(input).toHaveValue('scheduler');
+    });
+
+    it('debounces search after input change', async () => {
+      vi.useFakeTimers();
+      renderWithRouter(<HelpSearch />);
+      const input = screen.getByPlaceholderText('Ask a question or search for help...');
+
+      fireEvent.change(input, { target: { value: 'scheduler' } });
+
+      // Should not call immediately
+      expect(mockSearch).not.toHaveBeenCalled();
+
+      // Fast-forward 300ms
+      vi.advanceTimersByTime(300);
+
+      expect(mockSearch).toHaveBeenCalledWith('scheduler');
+      vi.useRealTimers();
+    });
+
+    it('debounces multiple rapid inputs', async () => {
+      vi.useFakeTimers();
+      renderWithRouter(<HelpSearch />);
+      const input = screen.getByPlaceholderText('Ask a question or search for help...');
+
+      fireEvent.change(input, { target: { value: 's' } });
+      vi.advanceTimersByTime(100);
+
+      fireEvent.change(input, { target: { value: 'sc' } });
+      vi.advanceTimersByTime(100);
+
+      fireEvent.change(input, { target: { value: 'scheduler' } });
+      vi.advanceTimersByTime(300);
+
+      // Should only call once with the final value
+      expect(mockSearch).toHaveBeenCalledTimes(1);
+      expect(mockSearch).toHaveBeenCalledWith('scheduler');
+      vi.useRealTimers();
+    });
+
+    it('does not search for empty query', () => {
+      vi.useFakeTimers();
+      renderWithRouter(<HelpSearch />);
+      const input = screen.getByPlaceholderText('Ask a question or search for help...');
+
+      fireEvent.change(input, { target: { value: '   ' } });
+      vi.advanceTimersByTime(300);
+
+      expect(mockSearch).not.toHaveBeenCalled();
+      vi.useRealTimers();
+    });
+  });
+
+  describe('clear button', () => {
+    it('shows clear button when query is not empty', () => {
+      renderWithRouter(<HelpSearch />);
+      const input = screen.getByPlaceholderText('Ask a question or search for help...');
+
+      fireEvent.change(input, { target: { value: 'scheduler' } });
+
+      const clearButton = screen.getByRole('button');
+      expect(clearButton).toBeInTheDocument();
+    });
+
+    it('does not show clear button when query is empty', () => {
+      renderWithRouter(<HelpSearch />);
+      expect(screen.queryByRole('button')).not.toBeInTheDocument();
+    });
+
+    it('clears query and focuses input when clicked', () => {
+      renderWithRouter(<HelpSearch />);
+      const input = screen.getByPlaceholderText('Ask a question or search for help...') as HTMLInputElement;
+
+      fireEvent.change(input, { target: { value: 'scheduler' } });
+
+      const clearButton = screen.getByRole('button');
+      fireEvent.click(clearButton);
+
+      expect(input).toHaveValue('');
+    });
+  });
+
+  describe('loading state', () => {
+    it('shows loading spinner when searching', () => {
+      vi.spyOn(useHelpSearchModule, 'useHelpSearch').mockReturnValue({
+        ...defaultHookReturn,
+        isSearching: true,
+      });
+
+      renderWithRouter(<HelpSearch />);
+      const spinner = document.querySelector('.animate-spin');
+      expect(spinner).toBeInTheDocument();
+    });
+
+    it('shows search icon when not searching', () => {
+      renderWithRouter(<HelpSearch />);
+      const spinner = document.querySelector('.animate-spin');
+      expect(spinner).not.toBeInTheDocument();
+    });
+  });
+
+  describe('keyboard navigation', () => {
+    it('closes dropdown and blurs input on Escape key', () => {
+      vi.spyOn(useHelpSearchModule, 'useHelpSearch').mockReturnValue({
+        ...defaultHookReturn,
+        results: [
+          {
+            path: '/help/scheduler',
+            title: 'Scheduler',
+            description: 'Manage schedules',
+            category: 'Scheduling',
+            topics: ['scheduler', 'calendar'],
+            relevanceScore: 10,
+          },
+        ],
+      });
+
+      renderWithRouter(<HelpSearch />);
+      const input = screen.getByPlaceholderText('Ask a question or search for help...') as HTMLInputElement;
+
+      fireEvent.change(input, { target: { value: 'scheduler' } });
+      fireEvent.focus(input);
+
+      fireEvent.keyDown(input, { key: 'Escape' });
+
+      // Results should be hidden
+      expect(screen.queryByText('Scheduler')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('results dropdown', () => {
+    const mockResults = [
+      {
+        path: '/help/scheduler',
+        title: 'Scheduler',
+        description: 'Manage your schedules',
+        category: 'Scheduling',
+        topics: ['scheduler', 'calendar'],
+        relevanceScore: 10,
+        matchReason: 'Matched: title: scheduler',
+      },
+      {
+        path: '/help/services',
+        title: 'Services',
+        description: 'Configure services',
+        category: 'Services',
+        topics: ['services', 'booking'],
+        relevanceScore: 5,
+      },
+    ];
+
+    it('shows results when available and dropdown is open', () => {
+      vi.spyOn(useHelpSearchModule, 'useHelpSearch').mockReturnValue({
+        ...defaultHookReturn,
+        results: mockResults,
+      });
+
+      renderWithRouter(<HelpSearch />);
+      const input = screen.getByPlaceholderText('Ask a question or search for help...');
+
+      fireEvent.change(input, { target: { value: 'scheduler' } });
+      fireEvent.focus(input);
+
+      // Use getAllByText since titles appear in both the result and category badge
+      const schedulerElements = screen.getAllByText('Scheduler');
+      expect(schedulerElements.length).toBeGreaterThan(0);
+      const servicesElements = screen.getAllByText('Services');
+      expect(servicesElements.length).toBeGreaterThan(0);
+    });
+
+    it('shows match reason when available', () => {
+      vi.spyOn(useHelpSearchModule, 'useHelpSearch').mockReturnValue({
+        ...defaultHookReturn,
+        results: mockResults,
+      });
+
+      renderWithRouter(<HelpSearch />);
+      const input = screen.getByPlaceholderText('Ask a question or search for help...');
+
+      fireEvent.change(input, { target: { value: 'scheduler' } });
+      fireEvent.focus(input);
+
+      expect(screen.getByText('Matched: title: scheduler')).toBeInTheDocument();
+    });
+
+    it('shows description when match reason is not available', () => {
+      vi.spyOn(useHelpSearchModule, 'useHelpSearch').mockReturnValue({
+        ...defaultHookReturn,
+        results: mockResults,
+      });
+
+      renderWithRouter(<HelpSearch />);
+      const input = screen.getByPlaceholderText('Ask a question or search for help...');
+
+      fireEvent.change(input, { target: { value: 'services' } });
+      fireEvent.focus(input);
+
+      expect(screen.getByText('Configure services')).toBeInTheDocument();
+    });
+
+    it('shows category badge for each result', () => {
+      vi.spyOn(useHelpSearchModule, 'useHelpSearch').mockReturnValue({
+        ...defaultHookReturn,
+        results: mockResults,
+      });
+
+      renderWithRouter(<HelpSearch />);
+      const input = screen.getByPlaceholderText('Ask a question or search for help...');
+
+      fireEvent.change(input, { target: { value: 'scheduler' } });
+      fireEvent.focus(input);
+
+      expect(screen.getByText('Scheduling')).toBeInTheDocument();
+      // Services appears as both category and title - get all instances
+      const servicesElements = screen.getAllByText('Services');
+      expect(servicesElements.length).toBeGreaterThanOrEqual(1);
+    });
+
+    it('clears query and closes dropdown when result is clicked', () => {
+      vi.spyOn(useHelpSearchModule, 'useHelpSearch').mockReturnValue({
+        ...defaultHookReturn,
+        results: mockResults,
+      });
+
+      renderWithRouter(<HelpSearch />);
+      const input = screen.getByPlaceholderText('Ask a question or search for help...') as HTMLInputElement;
+
+      fireEvent.change(input, { target: { value: 'scheduler' } });
+      fireEvent.focus(input);
+
+      const resultLink = screen.getByText('Scheduler').closest('a');
+      fireEvent.click(resultLink!);
+
+      expect(input).toHaveValue('');
+    });
+  });
+
+  describe('empty states', () => {
+    it('renders component when no results found', () => {
+      const mockSearchFn = vi.fn();
+      vi.spyOn(useHelpSearchModule, 'useHelpSearch').mockReturnValue({
+        search: mockSearchFn,
+        results: [],
+        isSearching: false,
+        error: null,
+        hasApiKey: false,
+      });
+
+      const { container } = renderWithRouter(<HelpSearch />);
+      expect(container).toBeInTheDocument();
+      expect(screen.getByPlaceholderText('Ask a question or search for help...')).toBeInTheDocument();
+    });
+
+    it('does not show no results message while searching', () => {
+      vi.spyOn(useHelpSearchModule, 'useHelpSearch').mockReturnValue({
+        ...defaultHookReturn,
+        isSearching: true,
+        results: [],
+      });
+
+      renderWithRouter(<HelpSearch />);
+      const input = screen.getByPlaceholderText('Ask a question or search for help...');
+
+      fireEvent.change(input, { target: { value: 'scheduler' } });
+      fireEvent.focus(input);
+
+      expect(screen.queryByText(/No results found/)).not.toBeInTheDocument();
+    });
+  });
+
+  describe('error state', () => {
+    it('renders component when error is present', () => {
+      const mockSearchFn = vi.fn();
+      vi.spyOn(useHelpSearchModule, 'useHelpSearch').mockReturnValue({
+        search: mockSearchFn,
+        results: [],
+        isSearching: false,
+        error: 'Search failed. Please try again.',
+        hasApiKey: false,
+      });
+
+      const { container } = renderWithRouter(<HelpSearch />);
+      expect(container).toBeInTheDocument();
+      expect(screen.getByPlaceholderText('Ask a question or search for help...')).toBeInTheDocument();
+    });
+
+    it('handles error state without crashing', () => {
+      const mockSearchFn = vi.fn();
+      vi.spyOn(useHelpSearchModule, 'useHelpSearch').mockReturnValue({
+        search: mockSearchFn,
+        results: [],
+        isSearching: false,
+        error: 'Search failed',
+        hasApiKey: false,
+      });
+
+      const { container } = renderWithRouter(<HelpSearch />);
+      expect(container).toBeInTheDocument();
+    });
+  });
+
+  describe('click outside behavior', () => {
+    it('closes dropdown when clicking outside', () => {
+      vi.spyOn(useHelpSearchModule, 'useHelpSearch').mockReturnValue({
+        ...defaultHookReturn,
+        results: [
+          {
+            path: '/help/scheduler',
+            title: 'Scheduler',
+            description: 'Manage schedules',
+            category: 'Scheduling',
+            topics: ['scheduler'],
+            relevanceScore: 10,
+          },
+        ],
+      });
+
+      const { container } = renderWithRouter(<HelpSearch />);
+      const input = screen.getByPlaceholderText('Ask a question or search for help...');
+
+      fireEvent.change(input, { target: { value: 'scheduler' } });
+      fireEvent.focus(input);
+
+      expect(screen.getByText('Scheduler')).toBeInTheDocument();
+
+      // Click outside
+      fireEvent.mouseDown(container);
+
+      // Results should be hidden
+      expect(screen.queryByText('Scheduler')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('focus behavior', () => {
+    it('reopens dropdown on focus if results exist', () => {
+      vi.spyOn(useHelpSearchModule, 'useHelpSearch').mockReturnValue({
+        ...defaultHookReturn,
+        results: [
+          {
+            path: '/help/scheduler',
+            title: 'Scheduler',
+            description: 'Manage schedules',
+            category: 'Scheduling',
+            topics: ['scheduler'],
+            relevanceScore: 10,
+          },
+        ],
+      });
+
+      renderWithRouter(<HelpSearch />);
+      const input = screen.getByPlaceholderText('Ask a question or search for help...');
+
+      fireEvent.change(input, { target: { value: 'scheduler' } });
+      fireEvent.blur(input);
+
+      fireEvent.focus(input);
+
+      expect(screen.getByText('Scheduler')).toBeInTheDocument();
+    });
+
+    it('does not open dropdown on focus if query is empty', () => {
+      vi.spyOn(useHelpSearchModule, 'useHelpSearch').mockReturnValue({
+        ...defaultHookReturn,
+        results: [
+          {
+            path: '/help/scheduler',
+            title: 'Scheduler',
+            description: 'Manage schedules',
+            category: 'Scheduling',
+            topics: ['scheduler'],
+            relevanceScore: 10,
+          },
+        ],
+      });
+
+      renderWithRouter(<HelpSearch />);
+      const input = screen.getByPlaceholderText('Ask a question or search for help...');
+
+      fireEvent.focus(input);
+
+      expect(screen.queryByText('Scheduler')).not.toBeInTheDocument();
+    });
+  });
+});

frontend/src/components/help/__tests__/UnscheduledBookingDemo.test.tsx

@@ -0,0 +1,377 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { UnscheduledBookingDemo } from '../UnscheduledBookingDemo';
+
+describe('UnscheduledBookingDemo', () => {
+  describe('rendering', () => {
+    it('renders all sections by default', () => {
+      render(<UnscheduledBookingDemo />);
+
+      expect(screen.getByText('Service Settings')).toBeInTheDocument();
+      expect(screen.getByText('Customer Booking')).toBeInTheDocument();
+      expect(screen.getByText('Pending Requests')).toBeInTheDocument();
+    });
+
+    it('renders only service section when view is "service"', () => {
+      render(<UnscheduledBookingDemo view="service" />);
+
+      expect(screen.getByText('Service Settings')).toBeInTheDocument();
+      expect(screen.queryByText('Customer Booking')).not.toBeInTheDocument();
+      expect(screen.queryByText('Pending Requests')).not.toBeInTheDocument();
+    });
+
+    it('renders only customer section when view is "customer"', () => {
+      render(<UnscheduledBookingDemo view="customer" />);
+
+      expect(screen.queryByText('Service Settings')).not.toBeInTheDocument();
+      expect(screen.getByText('Customer Booking')).toBeInTheDocument();
+      expect(screen.queryByText('Pending Requests')).not.toBeInTheDocument();
+    });
+
+    it('renders only pending section when view is "pending"', () => {
+      render(<UnscheduledBookingDemo view="pending" />);
+
+      expect(screen.queryByText('Service Settings')).not.toBeInTheDocument();
+      expect(screen.queryByText('Customer Booking')).not.toBeInTheDocument();
+      expect(screen.getByText('Pending Requests')).toBeInTheDocument();
+    });
+
+    it('renders interactive demo caption', () => {
+      render(<UnscheduledBookingDemo />);
+      expect(screen.getByText('Interactive demo - click to explore the workflow')).toBeInTheDocument();
+    });
+  });
+
+  describe('service configuration section', () => {
+    it('shows "Requires Manual Scheduling" checkbox checked by default', () => {
+      render(<UnscheduledBookingDemo view="service" />);
+      expect(screen.getByText('Requires Manual Scheduling')).toBeInTheDocument();
+    });
+
+    it('toggles "Requires Manual Scheduling" on click', () => {
+      render(<UnscheduledBookingDemo view="service" />);
+
+      const checkbox = screen.getByText('Requires Manual Scheduling').closest('div');
+      expect(checkbox).toHaveClass('border-orange-500');
+
+      fireEvent.click(checkbox!);
+
+      expect(checkbox).not.toHaveClass('border-orange-500');
+    });
+
+    it('shows "Ask for Preferred Time" when manual scheduling is enabled', () => {
+      render(<UnscheduledBookingDemo view="service" />);
+      expect(screen.getByText('Ask for Preferred Time')).toBeInTheDocument();
+    });
+
+    it('hides "Ask for Preferred Time" when manual scheduling is disabled', () => {
+      render(<UnscheduledBookingDemo view="service" />);
+
+      const manualSchedulingCheckbox = screen.getByText('Requires Manual Scheduling').closest('div');
+      fireEvent.click(manualSchedulingCheckbox!);
+
+      expect(screen.queryByText('Ask for Preferred Time')).not.toBeInTheDocument();
+    });
+
+    it('toggles "Ask for Preferred Time" on click', () => {
+      render(<UnscheduledBookingDemo view="service" />);
+
+      const checkbox = screen.getByText('Ask for Preferred Time').closest('div');
+      expect(checkbox).toHaveClass('border-blue-500');
+
+      fireEvent.click(checkbox!);
+
+      expect(checkbox).not.toHaveClass('border-blue-500');
+    });
+  });
+
+  describe('customer booking section', () => {
+    it('shows manual scheduling message when enabled', () => {
+      render(<UnscheduledBookingDemo view="customer" />);
+      expect(screen.getByText("We'll call you to schedule")).toBeInTheDocument();
+    });
+
+    it('shows standard booking flow message when manual scheduling is disabled', () => {
+      render(<UnscheduledBookingDemo />);
+
+      const manualSchedulingCheckbox = screen.getByText('Requires Manual Scheduling').closest('div');
+      fireEvent.click(manualSchedulingCheckbox!);
+
+      expect(screen.getByText('Standard booking flow')).toBeInTheDocument();
+    });
+
+    it('shows "I have a preferred time" checkbox when capture is enabled', () => {
+      render(<UnscheduledBookingDemo view="customer" />);
+      expect(screen.getByText('I have a preferred time')).toBeInTheDocument();
+    });
+
+    it('hides "I have a preferred time" when capture is disabled', () => {
+      render(<UnscheduledBookingDemo />);
+
+      const captureCheckbox = screen.getByText('Ask for Preferred Time').closest('div');
+      fireEvent.click(captureCheckbox!);
+
+      expect(screen.queryByText('I have a preferred time')).not.toBeInTheDocument();
+    });
+
+    it('toggles "I have a preferred time" on click', () => {
+      render(<UnscheduledBookingDemo view="customer" />);
+
+      const checkbox = screen.getByText('I have a preferred time').closest('div');
+      expect(checkbox).toHaveClass('border-blue-500');
+
+      fireEvent.click(checkbox!);
+
+      expect(checkbox).not.toHaveClass('border-blue-500');
+    });
+
+    it('shows date and time inputs when customer has preferred time', () => {
+      render(<UnscheduledBookingDemo view="customer" />);
+
+      const dateInput = screen.getByDisplayValue('2025-12-26');
+      const timeInput = screen.getByDisplayValue('afternoons');
+
+      expect(dateInput).toBeInTheDocument();
+      expect(timeInput).toBeInTheDocument();
+    });
+
+    it('hides date and time inputs when customer does not have preferred time', () => {
+      render(<UnscheduledBookingDemo view="customer" />);
+
+      const checkbox = screen.getByText('I have a preferred time').closest('div');
+      fireEvent.click(checkbox!);
+
+      expect(screen.queryByDisplayValue('2025-12-26')).not.toBeInTheDocument();
+      expect(screen.queryByDisplayValue('afternoons')).not.toBeInTheDocument();
+    });
+
+    it('updates preferred date on input change', () => {
+      render(<UnscheduledBookingDemo view="customer" />);
+
+      const dateInput = screen.getByDisplayValue('2025-12-26') as HTMLInputElement;
+      fireEvent.change(dateInput, { target: { value: '2025-12-27' } });
+
+      expect(dateInput).toHaveValue('2025-12-27');
+    });
+
+    it('updates preferred time notes on input change', () => {
+      render(<UnscheduledBookingDemo view="customer" />);
+
+      const timeInput = screen.getByDisplayValue('afternoons') as HTMLInputElement;
+      fireEvent.change(timeInput, { target: { value: 'mornings' } });
+
+      expect(timeInput).toHaveValue('mornings');
+    });
+
+    it('shows request callback button', () => {
+      render(<UnscheduledBookingDemo view="customer" />);
+      expect(screen.getByText('Request Callback')).toBeInTheDocument();
+    });
+  });
+
+  describe('pending requests section', () => {
+    it('shows sample pending requests', () => {
+      render(<UnscheduledBookingDemo view="pending" />);
+
+      expect(screen.getByText('Jane Smith')).toBeInTheDocument();
+      expect(screen.getByText('Bob Johnson')).toBeInTheDocument();
+      expect(screen.getByText('Lisa Park')).toBeInTheDocument();
+    });
+
+    it('shows service name for each request', () => {
+      render(<UnscheduledBookingDemo view="pending" />);
+
+      const serviceNames = screen.getAllByText('Free Consultation');
+      expect(serviceNames).toHaveLength(3);
+    });
+
+    it('shows preferred date and time when available', () => {
+      render(<UnscheduledBookingDemo view="pending" />);
+
+      expect(screen.getByText('Prefers: Dec 26, afternoons')).toBeInTheDocument();
+      expect(screen.getByText('Prefers: Dec 27, 10:00 AM')).toBeInTheDocument();
+    });
+
+    it('shows "No preferred time" when not available', () => {
+      render(<UnscheduledBookingDemo view="pending" />);
+      expect(screen.getByText('No preferred time')).toBeInTheDocument();
+    });
+
+    it('toggles selection on pending item click', () => {
+      render(<UnscheduledBookingDemo view="pending" />);
+
+      const janeItem = screen.getByText('Jane Smith').closest('div');
+      expect(janeItem).not.toHaveClass('ring-2');
+
+      fireEvent.click(janeItem!);
+      expect(janeItem).toHaveClass('ring-2');
+
+      fireEvent.click(janeItem!);
+      expect(janeItem).not.toHaveClass('ring-2');
+    });
+
+    it('shows detail panel when item is selected', () => {
+      render(<UnscheduledBookingDemo view="pending" />);
+
+      const janeItem = screen.getByText('Jane Smith').closest('div');
+      fireEvent.click(janeItem!);
+
+      expect(screen.getByText('Preferred Schedule')).toBeInTheDocument();
+      expect(screen.getByText('December 26, 2025 - Afternoons')).toBeInTheDocument();
+    });
+
+    it('shows correct details for different selected items', () => {
+      render(<UnscheduledBookingDemo view="pending" />);
+
+      // Select Bob Johnson
+      const bobItem = screen.getByText('Bob Johnson').closest('div');
+      fireEvent.click(bobItem!);
+
+      expect(screen.getByText('December 27, 2025 - 10:00 AM')).toBeInTheDocument();
+
+      // Select Lisa Park
+      fireEvent.click(bobItem!);
+      const lisaItem = screen.getByText('Lisa Park').closest('div');
+      fireEvent.click(lisaItem!);
+
+      expect(screen.getByText('No preference specified')).toBeInTheDocument();
+    });
+
+    it('rotates chevron icon when item is selected', () => {
+      render(<UnscheduledBookingDemo view="pending" />);
+
+      const janeItem = screen.getByText('Jane Smith').closest('div');
+      const chevron = janeItem?.querySelector('svg');
+
+      expect(chevron).not.toHaveClass('rotate-90');
+
+      fireEvent.click(janeItem!);
+      expect(chevron).toHaveClass('rotate-90');
+    });
+  });
+
+  describe('integration - service and customer sections', () => {
+    it('updates customer section when service settings change', () => {
+      render(<UnscheduledBookingDemo />);
+
+      // Initially shows manual scheduling message
+      expect(screen.getByText("We'll call you to schedule")).toBeInTheDocument();
+
+      // Disable manual scheduling
+      const manualSchedulingCheckbox = screen.getByText('Requires Manual Scheduling').closest('div');
+      fireEvent.click(manualSchedulingCheckbox!);
+
+      // Should show standard booking flow
+      expect(screen.getByText('Standard booking flow')).toBeInTheDocument();
+      expect(screen.queryByText("We'll call you to schedule")).not.toBeInTheDocument();
+    });
+
+    it('hides preferred time fields when service setting is disabled', () => {
+      render(<UnscheduledBookingDemo />);
+
+      // Initially shows preferred time checkbox
+      expect(screen.getByText('I have a preferred time')).toBeInTheDocument();
+
+      // Disable preferred time capture
+      const captureCheckbox = screen.getByText('Ask for Preferred Time').closest('div');
+      fireEvent.click(captureCheckbox!);
+
+      // Should hide customer preferred time checkbox
+      expect(screen.queryByText('I have a preferred time')).not.toBeInTheDocument();
+    });
+
+    it('cascades changes through all sections', () => {
+      render(<UnscheduledBookingDemo />);
+
+      // Initially shows all manual scheduling features
+      expect(screen.getByText('Ask for Preferred Time')).toBeInTheDocument();
+      expect(screen.getByText('I have a preferred time')).toBeInTheDocument();
+      expect(screen.getByDisplayValue('2025-12-26')).toBeInTheDocument();
+
+      // Disable manual scheduling entirely
+      const manualSchedulingCheckbox = screen.getByText('Requires Manual Scheduling').closest('div');
+      fireEvent.click(manualSchedulingCheckbox!);
+
+      // All related features should be hidden
+      expect(screen.queryByText('Ask for Preferred Time')).not.toBeInTheDocument();
+      expect(screen.queryByText('I have a preferred time')).not.toBeInTheDocument();
+      expect(screen.queryByDisplayValue('2025-12-26')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('accessibility', () => {
+    it('uses proper labels for interactive elements', () => {
+      render(<UnscheduledBookingDemo view="service" />);
+
+      const manualSchedulingLabel = screen.getByText('Requires Manual Scheduling');
+      expect(manualSchedulingLabel.closest('label')).toBeInTheDocument();
+
+      const preferredTimeLabel = screen.getByText('Ask for Preferred Time');
+      expect(preferredTimeLabel.closest('label')).toBeInTheDocument();
+    });
+
+    it('date input has proper type attribute', () => {
+      render(<UnscheduledBookingDemo view="customer" />);
+
+      const dateInput = screen.getByDisplayValue('2025-12-26');
+      expect(dateInput).toHaveAttribute('type', 'date');
+    });
+
+    it('time notes input has proper type attribute', () => {
+      render(<UnscheduledBookingDemo view="customer" />);
+
+      const timeInput = screen.getByDisplayValue('afternoons');
+      expect(timeInput).toHaveAttribute('type', 'text');
+    });
+
+    it('time notes input has placeholder', () => {
+      render(<UnscheduledBookingDemo view="customer" />);
+
+      const checkbox = screen.getByText('I have a preferred time').closest('div');
+      fireEvent.click(checkbox!);
+      fireEvent.click(checkbox!);
+
+      const timeInput = screen.getByPlaceholderText('e.g., afternoons');
+      expect(timeInput).toBeInTheDocument();
+    });
+  });
+
+  describe('styling and visual feedback', () => {
+    it('applies correct border color when manual scheduling is enabled', () => {
+      render(<UnscheduledBookingDemo view="service" />);
+
+      const checkbox = screen.getByText('Requires Manual Scheduling').closest('div');
+      expect(checkbox).toHaveClass('border-orange-500');
+      expect(checkbox).toHaveClass('bg-orange-50');
+    });
+
+    it('applies correct border color when preferred time is enabled', () => {
+      render(<UnscheduledBookingDemo view="service" />);
+
+      const checkbox = screen.getByText('Ask for Preferred Time').closest('div');
+      expect(checkbox).toHaveClass('border-blue-500');
+      expect(checkbox).toHaveClass('bg-blue-50');
+    });
+
+    it('applies correct styling to pending request with preferred time', () => {
+      render(<UnscheduledBookingDemo view="pending" />);
+
+      const janePreference = screen.getByText('Prefers: Dec 26, afternoons');
+      expect(janePreference.closest('div')).toHaveClass('text-blue-600');
+    });
+
+    it('applies correct styling to pending request without preferred time', () => {
+      render(<UnscheduledBookingDemo view="pending" />);
+
+      const lisaPreference = screen.getByText('No preferred time');
+      expect(lisaPreference.closest('div')).toHaveClass('text-gray-400');
+    });
+
+    it('applies orange border to pending request items', () => {
+      render(<UnscheduledBookingDemo view="pending" />);
+
+      const janeItem = screen.getByText('Jane Smith').closest('div');
+      expect(janeItem).toHaveClass('border-orange-400');
+    });
+  });
+});

frontend/src/components/marketing/FeatureComparisonTable.tsx

@@ -52,8 +52,7 @@ const FEATURE_CATEGORIES = [
     key: 'branding',
     features: [
       { code: 'custom_domain', label: 'Custom domain' },
-      { code: 'custom_branding', label: 'Custom branding' },
+      { code: 'can_white_label', label: 'White label branding' },
-      { code: 'remove_branding', label: 'Remove branding' },
     ],
   },
   {

frontend/src/components/marketing/__tests__/AutomationShowcase.test.tsx

@@ -0,0 +1,242 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import React from 'react';
+import AutomationShowcase from '../AutomationShowcase';
+
+// Mock react-i18next
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string, fallback?: string | { days?: number }) => {
+      // Handle translation keys with nested structure
+      const translations: Record<string, string> = {
+        'marketing.plugins.badge': 'Automation & Plugins',
+        'marketing.plugins.headline': 'Automate Your Workflow',
+        'marketing.plugins.subheadline': 'Build powerful automations with our plugin system',
+        'marketing.plugins.examples.winback.title': 'Win-Back Campaign',
+        'marketing.plugins.examples.winback.description': 'Re-engage inactive customers',
+        'marketing.plugins.examples.winback.stats.retention': '+25% retention',
+        'marketing.plugins.examples.winback.stats.revenue': '$10k+ revenue',
+        'marketing.plugins.examples.noshow.title': 'No-Show Prevention',
+        'marketing.plugins.examples.noshow.description': 'Reduce missed appointments',
+        'marketing.plugins.examples.noshow.stats.reduction': '40% reduction',
+        'marketing.plugins.examples.noshow.stats.utilization': '95% utilization',
+        'marketing.plugins.examples.report.title': 'Daily Reports',
+        'marketing.plugins.examples.report.description': 'Automated scheduling reports',
+        'marketing.plugins.examples.report.stats.timeSaved': '2h saved/day',
+        'marketing.plugins.examples.report.stats.visibility': 'Real-time visibility',
+        'marketing.plugins.cta': 'Explore automation features',
+      };
+      return translations[key] || (typeof fallback === 'string' ? fallback : key);
+    },
+  }),
+}));
+
+// Mock framer-motion
+vi.mock('framer-motion', () => ({
+  motion: {
+    div: ({ children, ...props }: any) => React.createElement('div', props, children),
+  },
+  AnimatePresence: ({ children }: any) => React.createElement('div', null, children),
+}));
+
+// Mock lucide-react icons
+vi.mock('lucide-react', () => ({
+  Mail: () => React.createElement('div', { 'data-testid': 'mail-icon' }),
+  Calendar: () => React.createElement('div', { 'data-testid': 'calendar-icon' }),
+  Bell: () => React.createElement('div', { 'data-testid': 'bell-icon' }),
+  ArrowRight: () => React.createElement('div', { 'data-testid': 'arrow-right-icon' }),
+  Zap: () => React.createElement('div', { 'data-testid': 'zap-icon' }),
+  CheckCircle2: () => React.createElement('div', { 'data-testid': 'check-circle-icon' }),
+  Clock: () => React.createElement('div', { 'data-testid': 'clock-icon' }),
+  Search: () => React.createElement('div', { 'data-testid': 'search-icon' }),
+  FileText: () => React.createElement('div', { 'data-testid': 'file-text-icon' }),
+  MessageSquare: () => React.createElement('div', { 'data-testid': 'message-square-icon' }),
+  Sparkles: () => React.createElement('div', { 'data-testid': 'sparkles-icon' }),
+  ChevronRight: () => React.createElement('div', { 'data-testid': 'chevron-right-icon' }),
+}));
+
+// Mock WorkflowVisual component
+vi.mock('../WorkflowVisual', () => ({
+  default: ({ variant, trigger }: { variant: string; trigger: string }) =>
+    React.createElement(
+      'div',
+      { 'data-testid': 'workflow-visual', 'data-variant': variant },
+      trigger
+    ),
+}));
+
+describe('AutomationShowcase', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('rendering', () => {
+    it('renders component with headline and subheadline', () => {
+      render(React.createElement(AutomationShowcase));
+      expect(screen.getByText('Automate Your Workflow')).toBeInTheDocument();
+      expect(screen.getByText('Build powerful automations with our plugin system')).toBeInTheDocument();
+    });
+
+    it('renders badge with automation text', () => {
+      render(React.createElement(AutomationShowcase));
+      expect(screen.getByText('Automation & Plugins')).toBeInTheDocument();
+    });
+
+    it('renders all three automation examples', () => {
+      render(React.createElement(AutomationShowcase));
+      const winbackElements = screen.getAllByText('Win-Back Campaign');
+      expect(winbackElements.length).toBeGreaterThan(0);
+      expect(screen.getByText('No-Show Prevention')).toBeInTheDocument();
+      expect(screen.getByText('Daily Reports')).toBeInTheDocument();
+    });
+
+    it('renders example descriptions', () => {
+      render(React.createElement(AutomationShowcase));
+      expect(screen.getByText('Re-engage inactive customers')).toBeInTheDocument();
+      expect(screen.getByText('Reduce missed appointments')).toBeInTheDocument();
+      expect(screen.getByText('Automated scheduling reports')).toBeInTheDocument();
+    });
+
+    it('renders WorkflowVisual component', () => {
+      render(React.createElement(AutomationShowcase));
+      expect(screen.getByTestId('workflow-visual')).toBeInTheDocument();
+    });
+
+    it('renders CTA link', () => {
+      render(React.createElement(AutomationShowcase));
+      const ctaLink = screen.getByText('Explore automation features').closest('a');
+      expect(ctaLink).toBeInTheDocument();
+      expect(ctaLink).toHaveAttribute('href', '/features');
+    });
+  });
+
+  describe('tab switching', () => {
+    it('renders first example as active by default', () => {
+      const { container } = render(React.createElement(AutomationShowcase));
+      const workflowVisual = screen.getByTestId('workflow-visual');
+      expect(workflowVisual).toHaveAttribute('data-variant', 'winback');
+    });
+
+    it('switches to second example when clicked', () => {
+      render(React.createElement(AutomationShowcase));
+
+      const noShowButton = screen.getByText('No-Show Prevention').closest('button');
+      if (noShowButton) {
+        fireEvent.click(noShowButton);
+      }
+
+      const workflowVisual = screen.getByTestId('workflow-visual');
+      expect(workflowVisual).toHaveAttribute('data-variant', 'noshow');
+    });
+
+    it('switches to third example when clicked', () => {
+      render(React.createElement(AutomationShowcase));
+
+      const reportButton = screen.getByText('Daily Reports').closest('button');
+      if (reportButton) {
+        fireEvent.click(reportButton);
+      }
+
+      const workflowVisual = screen.getByTestId('workflow-visual');
+      expect(workflowVisual).toHaveAttribute('data-variant', 'report');
+    });
+
+    it('displays stats for active example', () => {
+      render(React.createElement(AutomationShowcase));
+
+      // First example (winback) should show its stats
+      expect(screen.getByText('+25% retention')).toBeInTheDocument();
+      expect(screen.getByText('$10k+ revenue')).toBeInTheDocument();
+    });
+
+    it('updates stats when switching examples', () => {
+      render(React.createElement(AutomationShowcase));
+
+      // Switch to no-show example
+      const noShowButton = screen.getByText('No-Show Prevention').closest('button');
+      if (noShowButton) {
+        fireEvent.click(noShowButton);
+      }
+
+      // Should show no-show stats
+      expect(screen.getByText('40% reduction')).toBeInTheDocument();
+      expect(screen.getByText('95% utilization')).toBeInTheDocument();
+    });
+  });
+
+  describe('icons', () => {
+    it('renders badge icon', () => {
+      render(React.createElement(AutomationShowcase));
+      expect(screen.getAllByTestId('zap-icon')).toHaveLength(1);
+    });
+
+    it('renders mail icon for winback example', () => {
+      render(React.createElement(AutomationShowcase));
+      expect(screen.getByTestId('mail-icon')).toBeInTheDocument();
+    });
+
+    it('renders bell icon for noshow example', () => {
+      render(React.createElement(AutomationShowcase));
+      expect(screen.getByTestId('bell-icon')).toBeInTheDocument();
+    });
+
+    it('renders calendar icon for report example', () => {
+      render(React.createElement(AutomationShowcase));
+      expect(screen.getByTestId('calendar-icon')).toBeInTheDocument();
+    });
+
+    it('renders check circle icons for stats', () => {
+      render(React.createElement(AutomationShowcase));
+      expect(screen.getAllByTestId('check-circle-icon').length).toBeGreaterThan(0);
+    });
+
+    it('renders arrow icon in CTA', () => {
+      render(React.createElement(AutomationShowcase));
+      expect(screen.getByTestId('arrow-right-icon')).toBeInTheDocument();
+    });
+  });
+
+  describe('interactive behavior', () => {
+    it('applies active styles to selected example button', () => {
+      const { container } = render(React.createElement(AutomationShowcase));
+
+      const buttons = container.querySelectorAll('button');
+      const activeButton = Array.from(buttons).find(btn =>
+        btn.className.includes('bg-white') && btn.className.includes('border-brand-500')
+      );
+      expect(activeButton).toBeDefined();
+    });
+
+    it('changes active button when different example is clicked', () => {
+      render(React.createElement(AutomationShowcase));
+
+      const noShowButton = screen.getByText('No-Show Prevention').closest('button');
+      if (noShowButton) {
+        fireEvent.click(noShowButton);
+        expect(noShowButton).toHaveClass('bg-white');
+      }
+    });
+
+    it('renders all example buttons as clickable', () => {
+      render(React.createElement(AutomationShowcase));
+
+      const buttons = screen.getAllByRole('button');
+      // Should have 3 example buttons
+      expect(buttons.length).toBeGreaterThanOrEqual(3);
+    });
+  });
+
+  describe('layout', () => {
+    it('renders in two-column grid layout', () => {
+      const { container } = render(React.createElement(AutomationShowcase));
+      const gridElement = container.querySelector('.grid.lg\\:grid-cols-2');
+      expect(gridElement).toBeInTheDocument();
+    });
+
+    it('renders stats in flex layout', () => {
+      const { container } = render(React.createElement(AutomationShowcase));
+      const statsContainer = container.querySelector('.flex.gap-4');
+      expect(statsContainer).toBeInTheDocument();
+    });
+  });
+});

frontend/src/components/marketing/__tests__/BenefitsSection.test.tsx

@@ -0,0 +1,165 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import BenefitsSection from '../BenefitsSection';
+
+// Mock react-i18next
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => {
+      const translations: Record<string, string> = {
+        'marketing.benefits.rapidDeployment.title': 'Rapid Deployment',
+        'marketing.benefits.rapidDeployment.description': 'Get started in minutes with our quick setup',
+        'marketing.benefits.enterpriseSecurity.title': 'Enterprise Security',
+        'marketing.benefits.enterpriseSecurity.description': 'Bank-level encryption and compliance',
+        'marketing.benefits.highPerformance.title': 'High Performance',
+        'marketing.benefits.highPerformance.description': 'Fast and reliable service at scale',
+        'marketing.benefits.expertSupport.title': 'Expert Support',
+        'marketing.benefits.expertSupport.description': '24/7 customer support from our team',
+      };
+      return translations[key] || key;
+    },
+  }),
+}));
+
+// Mock lucide-react icons
+vi.mock('lucide-react', () => ({
+  Rocket: () => React.createElement('div', { 'data-testid': 'rocket-icon' }),
+  Shield: () => React.createElement('div', { 'data-testid': 'shield-icon' }),
+  Zap: () => React.createElement('div', { 'data-testid': 'zap-icon' }),
+  Headphones: () => React.createElement('div', { 'data-testid': 'headphones-icon' }),
+}));
+
+describe('BenefitsSection', () => {
+  describe('rendering', () => {
+    it('renders component without errors', () => {
+      render(React.createElement(BenefitsSection));
+      expect(screen.getByText('Rapid Deployment')).toBeInTheDocument();
+    });
+
+    it('renders all four benefit cards', () => {
+      render(React.createElement(BenefitsSection));
+      expect(screen.getByText('Rapid Deployment')).toBeInTheDocument();
+      expect(screen.getByText('Enterprise Security')).toBeInTheDocument();
+      expect(screen.getByText('High Performance')).toBeInTheDocument();
+      expect(screen.getByText('Expert Support')).toBeInTheDocument();
+    });
+
+    it('renders all benefit descriptions', () => {
+      render(React.createElement(BenefitsSection));
+      expect(screen.getByText('Get started in minutes with our quick setup')).toBeInTheDocument();
+      expect(screen.getByText('Bank-level encryption and compliance')).toBeInTheDocument();
+      expect(screen.getByText('Fast and reliable service at scale')).toBeInTheDocument();
+      expect(screen.getByText('24/7 customer support from our team')).toBeInTheDocument();
+    });
+  });
+
+  describe('icons', () => {
+    it('renders rocket icon for rapid deployment', () => {
+      render(React.createElement(BenefitsSection));
+      expect(screen.getByTestId('rocket-icon')).toBeInTheDocument();
+    });
+
+    it('renders shield icon for enterprise security', () => {
+      render(React.createElement(BenefitsSection));
+      expect(screen.getByTestId('shield-icon')).toBeInTheDocument();
+    });
+
+    it('renders zap icon for high performance', () => {
+      render(React.createElement(BenefitsSection));
+      expect(screen.getByTestId('zap-icon')).toBeInTheDocument();
+    });
+
+    it('renders headphones icon for expert support', () => {
+      render(React.createElement(BenefitsSection));
+      expect(screen.getByTestId('headphones-icon')).toBeInTheDocument();
+    });
+  });
+
+  describe('layout', () => {
+    it('renders benefits in grid layout', () => {
+      const { container } = render(React.createElement(BenefitsSection));
+      const gridElement = container.querySelector('.grid.md\\:grid-cols-2.lg\\:grid-cols-4');
+      expect(gridElement).toBeInTheDocument();
+    });
+
+    it('renders each benefit card with proper structure', () => {
+      const { container } = render(React.createElement(BenefitsSection));
+      const cards = container.querySelectorAll('.text-center');
+      expect(cards.length).toBe(4);
+    });
+
+    it('renders in a section element', () => {
+      const { container } = render(React.createElement(BenefitsSection));
+      const section = container.querySelector('section');
+      expect(section).toBeInTheDocument();
+    });
+  });
+
+  describe('styling', () => {
+    it('applies correct background colors to section', () => {
+      const { container } = render(React.createElement(BenefitsSection));
+      const section = container.querySelector('.bg-white.dark\\:bg-gray-900');
+      expect(section).toBeInTheDocument();
+    });
+
+    it('applies proper spacing', () => {
+      const { container } = render(React.createElement(BenefitsSection));
+      const section = container.querySelector('.py-20');
+      expect(section).toBeInTheDocument();
+    });
+
+    it('renders titles with proper typography', () => {
+      render(React.createElement(BenefitsSection));
+      const titles = screen.getAllByRole('heading', { level: 3 });
+      expect(titles.length).toBe(4);
+    });
+  });
+
+  describe('content', () => {
+    it('displays all benefit titles as headings', () => {
+      render(React.createElement(BenefitsSection));
+      expect(screen.getByRole('heading', { name: 'Rapid Deployment' })).toBeInTheDocument();
+      expect(screen.getByRole('heading', { name: 'Enterprise Security' })).toBeInTheDocument();
+      expect(screen.getByRole('heading', { name: 'High Performance' })).toBeInTheDocument();
+      expect(screen.getByRole('heading', { name: 'Expert Support' })).toBeInTheDocument();
+    });
+
+    it('maintains correct order of benefits', () => {
+      const { container } = render(React.createElement(BenefitsSection));
+      const headings = container.querySelectorAll('h3');
+      expect(headings[0]).toHaveTextContent('Rapid Deployment');
+      expect(headings[1]).toHaveTextContent('Enterprise Security');
+      expect(headings[2]).toHaveTextContent('High Performance');
+      expect(headings[3]).toHaveTextContent('Expert Support');
+    });
+  });
+
+  describe('responsive design', () => {
+    it('applies responsive grid classes', () => {
+      const { container } = render(React.createElement(BenefitsSection));
+      const grid = container.querySelector('.md\\:grid-cols-2');
+      expect(grid).toBeInTheDocument();
+    });
+
+    it('applies responsive padding', () => {
+      const { container } = render(React.createElement(BenefitsSection));
+      const paddedElement = container.querySelector('.sm\\:px-6');
+      expect(paddedElement).toBeInTheDocument();
+    });
+  });
+
+  describe('hover effects', () => {
+    it('applies hover transform classes to cards', () => {
+      const { container } = render(React.createElement(BenefitsSection));
+      const hoverElements = container.querySelectorAll('.hover\\:-translate-y-1');
+      expect(hoverElements.length).toBe(4);
+    });
+
+    it('applies transition classes', () => {
+      const { container } = render(React.createElement(BenefitsSection));
+      const transitionElements = container.querySelectorAll('.transition-transform');
+      expect(transitionElements.length).toBeGreaterThan(0);
+    });
+  });
+});

frontend/src/components/marketing/__tests__/DynamicPricingCards.test.tsx

@@ -0,0 +1,337 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import React from 'react';
+import DynamicPricingCards from '../DynamicPricingCards';
+
+// Mock react-router-dom
+vi.mock('react-router-dom', () => ({
+  Link: ({ to, children, ...props }: any) =>
+    React.createElement('a', { href: to, ...props }, children),
+}));
+
+// Mock react-i18next
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string, fallback?: string | { days?: number }) => {
+      const translations: Record<string, string> = {
+        'marketing.pricing.monthly': 'Monthly',
+        'marketing.pricing.annual': 'Annual',
+        'marketing.pricing.savePercent': 'Save ~17%',
+        'marketing.pricing.mostPopular': 'Most Popular',
+        'marketing.pricing.custom': 'Custom',
+        'marketing.pricing.perYear': '/year',
+        'marketing.pricing.perMonth': '/month',
+        'marketing.pricing.contactSales': 'Contact Sales',
+        'marketing.pricing.getStartedFree': 'Get Started Free',
+        'marketing.pricing.startTrial': 'Start Free Trial',
+        'marketing.pricing.freeForever': 'Free forever',
+        'marketing.pricing.loadError': 'Unable to load pricing. Please try again later.',
+      };
+
+      // Handle dynamic trial days translation
+      if (key === 'marketing.pricing.trialDays' && typeof fallback === 'object' && fallback.days) {
+        return `${fallback.days}-day free trial`;
+      }
+
+      return translations[key] || (typeof fallback === 'string' ? fallback : key);
+    },
+  }),
+}));
+
+// Mock lucide-react icons
+vi.mock('lucide-react', () => ({
+  Check: () => React.createElement('div', { 'data-testid': 'check-icon' }),
+  Loader2: () => React.createElement('div', { 'data-testid': 'loader-icon' }),
+}));
+
+// Mock usePublicPlans hook
+const mockPlans = [
+  {
+    id: '1',
+    plan: {
+      id: '1',
+      name: 'Free',
+      code: 'free',
+      description: 'Free plan for getting started',
+      display_order: 0,
+    },
+    price_monthly_cents: 0,
+    price_yearly_cents: 0,
+    is_most_popular: false,
+    show_price: true,
+    marketing_features: ['Basic scheduling', 'Up to 10 appointments'],
+    trial_days: 0,
+  },
+  {
+    id: '2',
+    plan: {
+      id: '2',
+      name: 'Professional',
+      code: 'professional',
+      description: 'For growing businesses',
+      display_order: 1,
+    },
+    price_monthly_cents: 2900,
+    price_yearly_cents: 29000,
+    is_most_popular: true,
+    show_price: true,
+    marketing_features: ['Unlimited appointments', 'SMS reminders', 'Priority support'],
+    trial_days: 14,
+  },
+  {
+    id: '3',
+    plan: {
+      id: '3',
+      name: 'Enterprise',
+      code: 'enterprise',
+      description: 'For large organizations',
+      display_order: 2,
+    },
+    price_monthly_cents: 0,
+    price_yearly_cents: 0,
+    is_most_popular: false,
+    show_price: false,
+    marketing_features: ['Custom features', 'Dedicated support', 'SLA guarantee'],
+    trial_days: 0,
+  },
+];
+
+vi.mock('../../hooks/usePublicPlans', () => ({
+  usePublicPlans: vi.fn(),
+  formatPrice: (cents: number) => {
+    if (cents === 0) return '$0';
+    return `$${(cents / 100).toFixed(0)}`;
+  },
+}));
+
+import { usePublicPlans } from '../../hooks/usePublicPlans';
+
+describe('DynamicPricingCards', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    (usePublicPlans as any).mockReturnValue({
+      data: mockPlans,
+      isLoading: false,
+      error: null,
+    });
+  });
+
+  describe('loading state', () => {
+    it('renders loading spinner when loading', () => {
+      (usePublicPlans as any).mockReturnValue({
+        data: null,
+        isLoading: true,
+        error: null,
+      });
+
+      render(React.createElement(DynamicPricingCards));
+      expect(screen.getByTestId('loader-icon')).toBeInTheDocument();
+    });
+
+    it('does not render plans while loading', () => {
+      (usePublicPlans as any).mockReturnValue({
+        data: null,
+        isLoading: true,
+        error: null,
+      });
+
+      render(React.createElement(DynamicPricingCards));
+      expect(screen.queryByText('Free')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('error state', () => {
+    it('renders error message when there is an error', () => {
+      (usePublicPlans as any).mockReturnValue({
+        data: null,
+        isLoading: false,
+        error: new Error('Failed to load'),
+      });
+
+      render(React.createElement(DynamicPricingCards));
+      expect(screen.getByText('Unable to load pricing. Please try again later.')).toBeInTheDocument();
+    });
+
+    it('renders error message when plans data is null', () => {
+      (usePublicPlans as any).mockReturnValue({
+        data: null,
+        isLoading: false,
+        error: null,
+      });
+
+      render(React.createElement(DynamicPricingCards));
+      expect(screen.getByText('Unable to load pricing. Please try again later.')).toBeInTheDocument();
+    });
+  });
+
+  describe('billing toggle', () => {
+    it('renders billing period toggle buttons', () => {
+      render(React.createElement(DynamicPricingCards));
+      expect(screen.getByText('Monthly')).toBeInTheDocument();
+      expect(screen.getByText('Annual')).toBeInTheDocument();
+    });
+
+    it('defaults to monthly billing', () => {
+      render(React.createElement(DynamicPricingCards));
+      const monthlyButton = screen.getByText('Monthly').closest('button');
+      expect(monthlyButton).toHaveClass('bg-white');
+    });
+
+    it('switches to annual billing when clicked', () => {
+      render(React.createElement(DynamicPricingCards));
+      const annualButton = screen.getByText('Annual').closest('button');
+      if (annualButton) {
+        fireEvent.click(annualButton);
+        expect(annualButton).toHaveClass('bg-white');
+      }
+    });
+
+    it('displays save percentage text for annual billing', () => {
+      render(React.createElement(DynamicPricingCards));
+      expect(screen.getByText('Save ~17%')).toBeInTheDocument();
+    });
+  });
+
+  describe('plan cards rendering', () => {
+    it('renders all plan cards', () => {
+      render(React.createElement(DynamicPricingCards));
+      expect(screen.getByText('Free')).toBeInTheDocument();
+      expect(screen.getByText('Professional')).toBeInTheDocument();
+      expect(screen.getByText('Enterprise')).toBeInTheDocument();
+    });
+
+    it('renders plan descriptions', () => {
+      render(React.createElement(DynamicPricingCards));
+      expect(screen.getByText('Free plan for getting started')).toBeInTheDocument();
+      expect(screen.getByText('For growing businesses')).toBeInTheDocument();
+      expect(screen.getByText('For large organizations')).toBeInTheDocument();
+    });
+
+    it('displays plans in correct order', () => {
+      const { container } = render(React.createElement(DynamicPricingCards));
+      const planNames = Array.from(container.querySelectorAll('h3')).map((h3) => h3.textContent);
+      expect(planNames).toEqual(['Free', 'Professional', 'Enterprise']);
+    });
+  });
+
+  describe('most popular badge', () => {
+    it('renders most popular badge for the professional plan', () => {
+      render(React.createElement(DynamicPricingCards));
+      expect(screen.getByText('Most Popular')).toBeInTheDocument();
+    });
+
+    it('applies special styling to most popular card', () => {
+      const { container } = render(React.createElement(DynamicPricingCards));
+      const professionalCard = screen.getByText('Professional').closest('div');
+      expect(professionalCard).toHaveClass('bg-brand-600');
+    });
+  });
+
+  describe('pricing display', () => {
+    it('displays $0 for free plan', () => {
+      render(React.createElement(DynamicPricingCards));
+      expect(screen.getByText('$0')).toBeInTheDocument();
+    });
+
+    it('displays monthly price for professional plan', () => {
+      render(React.createElement(DynamicPricingCards));
+      expect(screen.getByText('$29')).toBeInTheDocument();
+    });
+
+    it('displays "Custom" for enterprise plan', () => {
+      render(React.createElement(DynamicPricingCards));
+      expect(screen.getByText('Custom')).toBeInTheDocument();
+    });
+
+    it('displays "Free forever" text for free plan', () => {
+      render(React.createElement(DynamicPricingCards));
+      expect(screen.getByText('Free forever')).toBeInTheDocument();
+    });
+
+    it('displays trial days for professional plan', () => {
+      render(React.createElement(DynamicPricingCards));
+      expect(screen.getByText('14-day free trial')).toBeInTheDocument();
+    });
+  });
+
+  describe('features display', () => {
+    it('renders features for free plan', () => {
+      render(React.createElement(DynamicPricingCards));
+      expect(screen.getByText('Basic scheduling')).toBeInTheDocument();
+      expect(screen.getByText('Up to 10 appointments')).toBeInTheDocument();
+    });
+
+    it('renders features for professional plan', () => {
+      render(React.createElement(DynamicPricingCards));
+      expect(screen.getByText('Unlimited appointments')).toBeInTheDocument();
+      expect(screen.getByText('SMS reminders')).toBeInTheDocument();
+      expect(screen.getByText('Priority support')).toBeInTheDocument();
+    });
+
+    it('renders check icons for features', () => {
+      render(React.createElement(DynamicPricingCards));
+      const checkIcons = screen.getAllByTestId('check-icon');
+      // Should have check icons for all features across all plans
+      expect(checkIcons.length).toBeGreaterThan(0);
+    });
+  });
+
+  describe('CTA buttons', () => {
+    it('renders "Get Started Free" for free plan', () => {
+      render(React.createElement(DynamicPricingCards));
+      expect(screen.getByText('Get Started Free')).toBeInTheDocument();
+    });
+
+    it('renders "Start Free Trial" for professional plan', () => {
+      render(React.createElement(DynamicPricingCards));
+      expect(screen.getByText('Start Free Trial')).toBeInTheDocument();
+    });
+
+    it('renders "Contact Sales" for enterprise plan', () => {
+      render(React.createElement(DynamicPricingCards));
+      expect(screen.getByText('Contact Sales')).toBeInTheDocument();
+    });
+
+    it('links to signup page with plan code for non-enterprise plans', () => {
+      render(React.createElement(DynamicPricingCards));
+      const freeLink = screen.getByText('Get Started Free').closest('a');
+      expect(freeLink).toHaveAttribute('href', '/signup?plan=free');
+    });
+
+    it('links to contact page for enterprise plan', () => {
+      render(React.createElement(DynamicPricingCards));
+      const enterpriseLink = screen.getByText('Contact Sales').closest('a');
+      expect(enterpriseLink).toHaveAttribute('href', '/contact');
+    });
+  });
+
+  describe('className prop', () => {
+    it('applies custom className to wrapper', () => {
+      const { container } = render(
+        React.createElement(DynamicPricingCards, { className: 'custom-class' })
+      );
+      const wrapper = container.querySelector('.custom-class');
+      expect(wrapper).toBeInTheDocument();
+    });
+
+    it('applies empty string as default className', () => {
+      render(React.createElement(DynamicPricingCards));
+      // Should render without errors
+      expect(screen.getByText('Free')).toBeInTheDocument();
+    });
+  });
+
+  describe('layout', () => {
+    it('renders plans in grid layout', () => {
+      const { container } = render(React.createElement(DynamicPricingCards));
+      const grid = container.querySelector('.grid');
+      expect(grid).toBeInTheDocument();
+    });
+
+    it('applies responsive grid classes', () => {
+      const { container } = render(React.createElement(DynamicPricingCards));
+      const grid = container.querySelector('.md\\:grid-cols-2.lg\\:grid-cols-3');
+      expect(grid).toBeInTheDocument();
+    });
+  });
+});

frontend/src/components/marketing/__tests__/FeatureComparisonTable.test.tsx

@@ -0,0 +1,369 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import FeatureComparisonTable from '../FeatureComparisonTable';
+
+// Mock react-i18next
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string, fallback?: string) => {
+      const translations: Record<string, string> = {
+        'marketing.pricing.featureComparison.features': 'Features',
+        'marketing.pricing.featureComparison.categories.limits': 'Limits',
+        'marketing.pricing.featureComparison.categories.communication': 'Communication',
+        'marketing.pricing.featureComparison.categories.booking': 'Booking',
+        'marketing.pricing.featureComparison.categories.integrations': 'Integrations',
+        'marketing.pricing.featureComparison.categories.branding': 'Branding',
+        'marketing.pricing.featureComparison.categories.enterprise': 'Enterprise',
+        'marketing.pricing.featureComparison.categories.support': 'Support',
+        'marketing.pricing.featureComparison.categories.storage': 'Storage',
+        'marketing.pricing.featureComparison.features.max_users': 'Team members',
+        'marketing.pricing.featureComparison.features.max_resources': 'Resources',
+        'marketing.pricing.featureComparison.features.email_enabled': 'Email notifications',
+        'marketing.pricing.featureComparison.features.sms_enabled': 'SMS reminders',
+        'marketing.pricing.featureComparison.features.online_booking': 'Online booking',
+        'marketing.pricing.featureComparison.features.api_access': 'API access',
+        'marketing.pricing.featureComparison.features.custom_branding': 'Custom branding',
+      };
+      return translations[key] || (fallback || key);
+    },
+  }),
+}));
+
+// Mock lucide-react icons
+vi.mock('lucide-react', () => ({
+  Check: () => React.createElement('div', { 'data-testid': 'check-icon' }),
+  X: () => React.createElement('div', { 'data-testid': 'x-icon' }),
+  Minus: () => React.createElement('div', { 'data-testid': 'minus-icon' }),
+  Loader2: () => React.createElement('div', { 'data-testid': 'loader-icon' }),
+}));
+
+// Mock usePublicPlans hook
+const mockPlans = [
+  {
+    id: '1',
+    plan: {
+      id: '1',
+      name: 'Free',
+      code: 'free',
+      description: 'Free plan',
+      display_order: 0,
+    },
+    price_monthly_cents: 0,
+    price_yearly_cents: 0,
+    is_most_popular: false,
+    show_price: true,
+    marketing_features: [],
+    trial_days: 0,
+    features: {
+      max_users: 1,
+      max_resources: 5,
+      email_enabled: true,
+      sms_enabled: false,
+      online_booking: true,
+      api_access: false,
+      custom_branding: false,
+      max_storage_mb: 500,
+    },
+  },
+  {
+    id: '2',
+    plan: {
+      id: '2',
+      name: 'Professional',
+      code: 'professional',
+      description: 'Professional plan',
+      display_order: 1,
+    },
+    price_monthly_cents: 2900,
+    price_yearly_cents: 29000,
+    is_most_popular: true,
+    show_price: true,
+    marketing_features: [],
+    trial_days: 14,
+    features: {
+      max_users: 0, // Unlimited
+      max_resources: 0, // Unlimited
+      email_enabled: true,
+      sms_enabled: true,
+      online_booking: true,
+      api_access: true,
+      custom_branding: true,
+      max_storage_mb: 5000,
+    },
+  },
+];
+
+vi.mock('../../hooks/usePublicPlans', () => ({
+  usePublicPlans: vi.fn(),
+  getPlanFeatureValue: (plan: any, featureCode: string) => {
+    return plan.features?.[featureCode];
+  },
+  formatLimit: (value: number) => {
+    if (value === 0) return 'Unlimited';
+    if (value >= 1000) return `${(value / 1000).toFixed(0)}k`;
+    return value.toString();
+  },
+}));
+
+import { usePublicPlans } from '../../hooks/usePublicPlans';
+
+describe('FeatureComparisonTable', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    (usePublicPlans as any).mockReturnValue({
+      data: mockPlans,
+      isLoading: false,
+      error: null,
+    });
+  });
+
+  describe('loading state', () => {
+    it('renders loading spinner when loading', () => {
+      (usePublicPlans as any).mockReturnValue({
+        data: null,
+        isLoading: true,
+        error: null,
+      });
+
+      render(React.createElement(FeatureComparisonTable));
+      expect(screen.getByTestId('loader-icon')).toBeInTheDocument();
+    });
+
+    it('does not render table while loading', () => {
+      (usePublicPlans as any).mockReturnValue({
+        data: null,
+        isLoading: true,
+        error: null,
+      });
+
+      render(React.createElement(FeatureComparisonTable));
+      expect(screen.queryByText('Features')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('error state', () => {
+    it('renders nothing when there is an error', () => {
+      (usePublicPlans as any).mockReturnValue({
+        data: null,
+        isLoading: false,
+        error: new Error('Failed to load'),
+      });
+
+      const { container } = render(React.createElement(FeatureComparisonTable));
+      expect(container.firstChild).toBeNull();
+    });
+
+    it('renders nothing when plans array is empty', () => {
+      (usePublicPlans as any).mockReturnValue({
+        data: [],
+        isLoading: false,
+        error: null,
+      });
+
+      const { container } = render(React.createElement(FeatureComparisonTable));
+      expect(container.firstChild).toBeNull();
+    });
+  });
+
+  describe('table structure', () => {
+    it('renders table element', () => {
+      const { container } = render(React.createElement(FeatureComparisonTable));
+      const table = container.querySelector('table');
+      expect(table).toBeInTheDocument();
+    });
+
+    it('renders table header with Features column', () => {
+      render(React.createElement(FeatureComparisonTable));
+      expect(screen.getByText('Features')).toBeInTheDocument();
+    });
+
+    it('renders plan names in header', () => {
+      render(React.createElement(FeatureComparisonTable));
+      expect(screen.getByText('Free')).toBeInTheDocument();
+      expect(screen.getByText('Professional')).toBeInTheDocument();
+    });
+
+    it('highlights most popular plan in header', () => {
+      const { container } = render(React.createElement(FeatureComparisonTable));
+      const professionalHeader = screen.getByText('Professional').closest('th');
+      expect(professionalHeader).toHaveClass('text-brand-600');
+    });
+  });
+
+  describe('category sections', () => {
+    it('renders all category headers', () => {
+      render(React.createElement(FeatureComparisonTable));
+      expect(screen.getByText('Limits')).toBeInTheDocument();
+      expect(screen.getByText('Communication')).toBeInTheDocument();
+      expect(screen.getByText('Booking')).toBeInTheDocument();
+      expect(screen.getByText('Integrations')).toBeInTheDocument();
+      expect(screen.getByText('Branding')).toBeInTheDocument();
+      expect(screen.getByText('Enterprise')).toBeInTheDocument();
+      expect(screen.getByText('Support')).toBeInTheDocument();
+      expect(screen.getByText('Storage')).toBeInTheDocument();
+    });
+
+    it('renders category headers with proper styling', () => {
+      const { container } = render(React.createElement(FeatureComparisonTable));
+      const categoryHeaders = container.querySelectorAll('.uppercase.tracking-wider');
+      expect(categoryHeaders.length).toBeGreaterThan(0);
+    });
+  });
+
+  describe('feature rows', () => {
+    it('renders feature labels', () => {
+      render(React.createElement(FeatureComparisonTable));
+      expect(screen.getByText('Team members')).toBeInTheDocument();
+      expect(screen.getByText('Resources')).toBeInTheDocument();
+      expect(screen.getByText('Email notifications')).toBeInTheDocument();
+      expect(screen.getByText('SMS reminders')).toBeInTheDocument();
+    });
+
+    it('displays boolean features with check/x icons', () => {
+      render(React.createElement(FeatureComparisonTable));
+      const checkIcons = screen.getAllByTestId('check-icon');
+      const xIcons = screen.getAllByTestId('x-icon');
+      expect(checkIcons.length).toBeGreaterThan(0);
+      expect(xIcons.length).toBeGreaterThan(0);
+    });
+
+    it('displays numeric limits correctly', () => {
+      render(React.createElement(FeatureComparisonTable));
+      // Free plan has limit of 1 user
+      expect(screen.getByText('1')).toBeInTheDocument();
+      // Professional plan has unlimited
+      expect(screen.getAllByText('Unlimited').length).toBeGreaterThan(0);
+    });
+  });
+
+  describe('storage display', () => {
+    it('displays storage in MB for values under 1000', () => {
+      render(React.createElement(FeatureComparisonTable));
+      expect(screen.getByText('500 MB')).toBeInTheDocument();
+    });
+
+    it('displays storage in GB for values over 1000', () => {
+      render(React.createElement(FeatureComparisonTable));
+      expect(screen.getByText('5 GB')).toBeInTheDocument();
+    });
+
+    it('displays unlimited for 0 storage value', () => {
+      const plansWithUnlimitedStorage = [
+        {
+          ...mockPlans[0],
+          features: { ...mockPlans[0].features, max_storage_mb: 0 },
+        },
+      ];
+
+      (usePublicPlans as any).mockReturnValue({
+        data: plansWithUnlimitedStorage,
+        isLoading: false,
+        error: null,
+      });
+
+      render(React.createElement(FeatureComparisonTable));
+      expect(screen.getByText('Unlimited')).toBeInTheDocument();
+    });
+  });
+
+  describe('most popular highlighting', () => {
+    it('applies background color to most popular plan columns', () => {
+      const { container } = render(React.createElement(FeatureComparisonTable));
+      const professionalCells = container.querySelectorAll('.bg-brand-50\\/50');
+      expect(professionalCells.length).toBeGreaterThan(0);
+    });
+
+    it('highlights most popular plan header', () => {
+      const { container } = render(React.createElement(FeatureComparisonTable));
+      const professionalHeader = screen.getByText('Professional').closest('th');
+      expect(professionalHeader).toHaveClass('bg-brand-50');
+    });
+  });
+
+  describe('className prop', () => {
+    it('applies custom className to wrapper', () => {
+      const { container } = render(
+        React.createElement(FeatureComparisonTable, { className: 'custom-class' })
+      );
+      const wrapper = container.querySelector('.custom-class');
+      expect(wrapper).toBeInTheDocument();
+    });
+
+    it('applies empty string as default className', () => {
+      render(React.createElement(FeatureComparisonTable));
+      expect(screen.getByText('Features')).toBeInTheDocument();
+    });
+  });
+
+  describe('responsive design', () => {
+    it('applies overflow-x-auto for horizontal scrolling', () => {
+      const { container } = render(React.createElement(FeatureComparisonTable));
+      const wrapper = container.querySelector('.overflow-x-auto');
+      expect(wrapper).toBeInTheDocument();
+    });
+
+    it('sets minimum width on table', () => {
+      const { container } = render(React.createElement(FeatureComparisonTable));
+      const table = container.querySelector('table.min-w-\\[800px\\]');
+      expect(table).toBeInTheDocument();
+    });
+  });
+
+  describe('plan sorting', () => {
+    it('displays plans in order by display_order', () => {
+      const { container } = render(React.createElement(FeatureComparisonTable));
+      const headers = container.querySelectorAll('th');
+      // First th is "Features", then plan names in order
+      expect(headers[1]).toHaveTextContent('Free');
+      expect(headers[2]).toHaveTextContent('Professional');
+    });
+  });
+
+  describe('feature value rendering', () => {
+    it('renders check icon for true boolean values', () => {
+      render(React.createElement(FeatureComparisonTable));
+      const checkIcons = screen.getAllByTestId('check-icon');
+      expect(checkIcons.length).toBeGreaterThan(0);
+    });
+
+    it('renders x icon for false boolean values', () => {
+      render(React.createElement(FeatureComparisonTable));
+      const xIcons = screen.getAllByTestId('x-icon');
+      expect(xIcons.length).toBeGreaterThan(0);
+    });
+
+    it('handles undefined feature values gracefully', () => {
+      const plansWithMissingFeatures = [
+        {
+          ...mockPlans[0],
+          features: {},
+        },
+      ];
+
+      (usePublicPlans as any).mockReturnValue({
+        data: plansWithMissingFeatures,
+        isLoading: false,
+        error: null,
+      });
+
+      render(React.createElement(FeatureComparisonTable));
+      // Should still render without errors
+      expect(screen.getByText('Features')).toBeInTheDocument();
+    });
+  });
+
+  describe('accessibility', () => {
+    it('uses semantic table structure', () => {
+      const { container } = render(React.createElement(FeatureComparisonTable));
+      expect(container.querySelector('thead')).toBeInTheDocument();
+      expect(container.querySelector('tbody')).toBeInTheDocument();
+    });
+
+    it('uses proper table headers', () => {
+      const { container } = render(React.createElement(FeatureComparisonTable));
+      const headers = container.querySelectorAll('th');
+      expect(headers.length).toBeGreaterThan(0);
+    });
+  });
+});

frontend/src/components/marketing/__tests__/TestimonialCard.test.tsx

@@ -0,0 +1,287 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import TestimonialCard from '../TestimonialCard';
+
+// Mock lucide-react icons
+vi.mock('lucide-react', () => ({
+  Star: () => React.createElement('div', { 'data-testid': 'star-icon' }),
+}));
+
+describe('TestimonialCard', () => {
+  const defaultProps = {
+    quote: 'This is an amazing product!',
+    author: 'John Doe',
+    role: 'CEO',
+    company: 'Acme Corp',
+  };
+
+  describe('rendering', () => {
+    it('renders component without errors', () => {
+      render(React.createElement(TestimonialCard, defaultProps));
+      expect(screen.getByText('This is an amazing product!')).toBeInTheDocument();
+    });
+
+    it('renders quote text with quotation marks', () => {
+      render(React.createElement(TestimonialCard, defaultProps));
+      const quote = screen.getByText(/"This is an amazing product!"/);
+      expect(quote).toBeInTheDocument();
+    });
+
+    it('renders author name', () => {
+      render(React.createElement(TestimonialCard, defaultProps));
+      expect(screen.getByText('John Doe')).toBeInTheDocument();
+    });
+
+    it('renders role and company', () => {
+      render(React.createElement(TestimonialCard, defaultProps));
+      expect(screen.getByText('CEO at Acme Corp')).toBeInTheDocument();
+    });
+  });
+
+  describe('rating stars', () => {
+    it('renders 5 stars by default', () => {
+      render(React.createElement(TestimonialCard, defaultProps));
+      const stars = screen.getAllByTestId('star-icon');
+      expect(stars).toHaveLength(5);
+    });
+
+    it('renders custom rating when provided', () => {
+      render(React.createElement(TestimonialCard, { ...defaultProps, rating: 4 }));
+      const stars = screen.getAllByTestId('star-icon');
+      expect(stars).toHaveLength(5);
+    });
+
+    it('renders 5 stars for rating of 5', () => {
+      render(React.createElement(TestimonialCard, { ...defaultProps, rating: 5 }));
+      const stars = screen.getAllByTestId('star-icon');
+      expect(stars).toHaveLength(5);
+    });
+
+    it('renders 5 stars for rating of 3', () => {
+      render(React.createElement(TestimonialCard, { ...defaultProps, rating: 3 }));
+      const stars = screen.getAllByTestId('star-icon');
+      expect(stars).toHaveLength(5);
+    });
+
+    it('renders 5 stars for rating of 1', () => {
+      render(React.createElement(TestimonialCard, { ...defaultProps, rating: 1 }));
+      const stars = screen.getAllByTestId('star-icon');
+      expect(stars).toHaveLength(5);
+    });
+
+    it('applies filled class to stars based on rating', () => {
+      const { container } = render(
+        React.createElement(TestimonialCard, { ...defaultProps, rating: 3 })
+      );
+      const filledStars = container.querySelectorAll('.fill-yellow-400');
+      // 3 filled stars (based on rating of 3)
+      expect(filledStars.length).toBe(3);
+    });
+  });
+
+  describe('avatar', () => {
+    it('renders avatar image when avatarUrl is provided', () => {
+      const propsWithAvatar = {
+        ...defaultProps,
+        avatarUrl: 'https://example.com/avatar.jpg',
+      };
+      render(React.createElement(TestimonialCard, propsWithAvatar));
+
+      const avatar = screen.getByRole('img');
+      expect(avatar).toBeInTheDocument();
+      expect(avatar).toHaveAttribute('src', 'https://example.com/avatar.jpg');
+      expect(avatar).toHaveAttribute('alt', 'John Doe');
+    });
+
+    it('renders initials when avatarUrl is not provided', () => {
+      render(React.createElement(TestimonialCard, defaultProps));
+
+      // Should not have an img element
+      expect(screen.queryByRole('img')).not.toBeInTheDocument();
+
+      // Should have initials displayed
+      expect(screen.getByText('J')).toBeInTheDocument();
+    });
+
+    it('displays first letter of author name as initial', () => {
+      const propsWithDifferentName = {
+        ...defaultProps,
+        author: 'Sarah Smith',
+      };
+      render(React.createElement(TestimonialCard, propsWithDifferentName));
+      expect(screen.getByText('S')).toBeInTheDocument();
+    });
+
+    it('handles empty author name gracefully', () => {
+      const propsWithEmptyName = {
+        ...defaultProps,
+        author: '',
+      };
+      const { container } = render(React.createElement(TestimonialCard, propsWithEmptyName));
+      // Should render without crashing
+      expect(container).toBeInTheDocument();
+    });
+  });
+
+  describe('content variations', () => {
+    it('renders long quotes correctly', () => {
+      const longQuote =
+        'This is a very long testimonial that contains multiple sentences. It talks about how amazing the product is and how it has helped the business grow. The service is exceptional and the support team is always responsive.';
+      const propsWithLongQuote = {
+        ...defaultProps,
+        quote: longQuote,
+      };
+      render(React.createElement(TestimonialCard, propsWithLongQuote));
+      expect(screen.getByText(new RegExp(longQuote))).toBeInTheDocument();
+    });
+
+    it('renders short quotes correctly', () => {
+      const shortQuote = 'Great!';
+      const propsWithShortQuote = {
+        ...defaultProps,
+        quote: shortQuote,
+      };
+      render(React.createElement(TestimonialCard, propsWithShortQuote));
+      expect(screen.getByText(new RegExp(shortQuote))).toBeInTheDocument();
+    });
+
+    it('renders quotes with special characters', () => {
+      const quoteWithSpecialChars = 'Amazing! Love it 100% - best product ever.';
+      const propsWithSpecialChars = {
+        ...defaultProps,
+        quote: quoteWithSpecialChars,
+      };
+      render(React.createElement(TestimonialCard, propsWithSpecialChars));
+      expect(screen.getByText(new RegExp('Amazing! Love it 100%'))).toBeInTheDocument();
+    });
+  });
+
+  describe('styling', () => {
+    it('applies card styling classes', () => {
+      const { container } = render(React.createElement(TestimonialCard, defaultProps));
+      const card = container.querySelector('.bg-white.dark\\:bg-gray-800');
+      expect(card).toBeInTheDocument();
+    });
+
+    it('applies border and shadow', () => {
+      const { container } = render(React.createElement(TestimonialCard, defaultProps));
+      const card = container.querySelector('.border.border-gray-200');
+      expect(card).toBeInTheDocument();
+    });
+
+    it('applies rounded corners', () => {
+      const { container } = render(React.createElement(TestimonialCard, defaultProps));
+      const card = container.querySelector('.rounded-2xl');
+      expect(card).toBeInTheDocument();
+    });
+
+    it('applies hover shadow effect', () => {
+      const { container } = render(React.createElement(TestimonialCard, defaultProps));
+      const card = container.querySelector('.hover\\:shadow-md');
+      expect(card).toBeInTheDocument();
+    });
+  });
+
+  describe('layout', () => {
+    it('uses flex column layout', () => {
+      const { container } = render(React.createElement(TestimonialCard, defaultProps));
+      const card = container.querySelector('.flex.flex-col');
+      expect(card).toBeInTheDocument();
+    });
+
+    it('applies proper padding', () => {
+      const { container } = render(React.createElement(TestimonialCard, defaultProps));
+      const card = container.querySelector('.p-6');
+      expect(card).toBeInTheDocument();
+    });
+  });
+
+  describe('semantic HTML', () => {
+    it('uses blockquote element for quote', () => {
+      const { container } = render(React.createElement(TestimonialCard, defaultProps));
+      const blockquote = container.querySelector('blockquote');
+      expect(blockquote).toBeInTheDocument();
+      expect(blockquote).toHaveTextContent('This is an amazing product!');
+    });
+
+    it('renders avatar image with proper alt text', () => {
+      const propsWithAvatar = {
+        ...defaultProps,
+        avatarUrl: 'https://example.com/avatar.jpg',
+      };
+      render(React.createElement(TestimonialCard, propsWithAvatar));
+
+      const avatar = screen.getByRole('img');
+      expect(avatar).toHaveAttribute('alt', defaultProps.author);
+    });
+  });
+
+  describe('different authors and companies', () => {
+    it('renders different author names correctly', () => {
+      const customProps = {
+        ...defaultProps,
+        author: 'Jane Smith',
+        role: 'CTO',
+        company: 'Tech Inc',
+      };
+      render(React.createElement(TestimonialCard, customProps));
+
+      expect(screen.getByText('Jane Smith')).toBeInTheDocument();
+      expect(screen.getByText('CTO at Tech Inc')).toBeInTheDocument();
+    });
+
+    it('handles long company names', () => {
+      const longCompanyProps = {
+        ...defaultProps,
+        company: 'Very Long Company Name International Corporation Ltd.',
+      };
+      render(React.createElement(TestimonialCard, longCompanyProps));
+
+      expect(
+        screen.getByText('CEO at Very Long Company Name International Corporation Ltd.')
+      ).toBeInTheDocument();
+    });
+
+    it('handles special characters in names', () => {
+      const specialCharProps = {
+        ...defaultProps,
+        author: "O'Brien",
+        company: 'Smith & Jones',
+      };
+      render(React.createElement(TestimonialCard, specialCharProps));
+
+      expect(screen.getByText("O'Brien")).toBeInTheDocument();
+      expect(screen.getByText('CEO at Smith & Jones')).toBeInTheDocument();
+    });
+  });
+
+  describe('edge cases', () => {
+    it('handles rating of 0', () => {
+      render(React.createElement(TestimonialCard, { ...defaultProps, rating: 0 }));
+      const stars = screen.getAllByTestId('star-icon');
+      expect(stars).toHaveLength(5);
+    });
+
+    it('handles very high rating', () => {
+      render(React.createElement(TestimonialCard, { ...defaultProps, rating: 10 }));
+      const stars = screen.getAllByTestId('star-icon');
+      expect(stars).toHaveLength(5);
+    });
+
+    it('handles empty quote', () => {
+      render(React.createElement(TestimonialCard, { ...defaultProps, quote: '' }));
+      expect(screen.getByRole('blockquote')).toBeInTheDocument();
+    });
+
+    it('handles empty role', () => {
+      render(React.createElement(TestimonialCard, { ...defaultProps, role: '' }));
+      expect(screen.getByText(/at Acme Corp/)).toBeInTheDocument();
+    });
+
+    it('handles empty company', () => {
+      render(React.createElement(TestimonialCard, { ...defaultProps, company: '' }));
+      expect(screen.getByText(/CEO at/)).toBeInTheDocument();
+    });
+  });
+});

frontend/src/components/marketing/__tests__/WorkflowVisual.test.tsx

@@ -0,0 +1,315 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import WorkflowVisual from '../WorkflowVisual';
+
+// Mock react-i18next
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => {
+      const translations: Record<string, string> = {
+        'marketing.plugins.aiCopilot.placeholder': 'Describe your automation...',
+        'marketing.plugins.aiCopilot.examples': 'Example: Send SMS reminders 2 hours before appointments',
+        'marketing.plugins.integrations.description': 'Integrate with your favorite apps',
+      };
+      return translations[key] || key;
+    },
+  }),
+}));
+
+// Mock framer-motion
+vi.mock('framer-motion', () => ({
+  motion: {
+    div: ({ children, ...props }: any) => React.createElement('div', props, children),
+  },
+}));
+
+// Mock lucide-react icons
+vi.mock('lucide-react', () => ({
+  Calendar: () => React.createElement('div', { 'data-testid': 'calendar-icon' }),
+  Mail: () => React.createElement('div', { 'data-testid': 'mail-icon' }),
+  MessageSquare: () => React.createElement('div', { 'data-testid': 'message-square-icon' }),
+  Clock: () => React.createElement('div', { 'data-testid': 'clock-icon' }),
+  Search: () => React.createElement('div', { 'data-testid': 'search-icon' }),
+  FileText: () => React.createElement('div', { 'data-testid': 'file-text-icon' }),
+  Sparkles: () => React.createElement('div', { 'data-testid': 'sparkles-icon' }),
+  ChevronRight: () => React.createElement('div', { 'data-testid': 'chevron-right-icon' }),
+}));
+
+describe('WorkflowVisual', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('rendering', () => {
+    it('renders component without errors', () => {
+      render(React.createElement(WorkflowVisual, { variant: 'noshow' }));
+      expect(screen.getByText('Event Created')).toBeInTheDocument();
+    });
+
+    it('renders AI Copilot input section', () => {
+      render(React.createElement(WorkflowVisual, { variant: 'noshow' }));
+      expect(screen.getByText('Describe your automation...')).toBeInTheDocument();
+    });
+
+    it('renders AI Copilot examples text', () => {
+      render(React.createElement(WorkflowVisual, { variant: 'noshow' }));
+      expect(screen.getByText('Example: Send SMS reminders 2 hours before appointments')).toBeInTheDocument();
+    });
+
+    it('renders integration badges section', () => {
+      render(React.createElement(WorkflowVisual, { variant: 'noshow' }));
+      expect(screen.getByText('Integrate with your favorite apps')).toBeInTheDocument();
+    });
+
+    it('renders integration app badges', () => {
+      render(React.createElement(WorkflowVisual, { variant: 'noshow' }));
+      expect(screen.getByText('Gmail')).toBeInTheDocument();
+      expect(screen.getByText('Slack')).toBeInTheDocument();
+      expect(screen.getByText('Sheets')).toBeInTheDocument();
+      expect(screen.getByText('Twilio')).toBeInTheDocument();
+      expect(screen.getByText('+1000 more')).toBeInTheDocument();
+    });
+  });
+
+  describe('winback variant', () => {
+    it('renders winback workflow blocks', () => {
+      render(React.createElement(WorkflowVisual, { variant: 'winback' }));
+      expect(screen.getByText('Schedule: Weekly')).toBeInTheDocument();
+      expect(screen.getByText('Find Inactive Customers')).toBeInTheDocument();
+      expect(screen.getByText('Send Email')).toBeInTheDocument();
+    });
+
+    it('renders correct icons for winback workflow', () => {
+      render(React.createElement(WorkflowVisual, { variant: 'winback' }));
+      expect(screen.getByTestId('clock-icon')).toBeInTheDocument();
+      expect(screen.getByTestId('search-icon')).toBeInTheDocument();
+      expect(screen.getByTestId('mail-icon')).toBeInTheDocument();
+    });
+
+    it('shows "When" label for trigger block', () => {
+      render(React.createElement(WorkflowVisual, { variant: 'winback' }));
+      expect(screen.getByText('When')).toBeInTheDocument();
+    });
+
+    it('shows "Then" labels for action blocks', () => {
+      render(React.createElement(WorkflowVisual, { variant: 'winback' }));
+      const thenLabels = screen.getAllByText('Then');
+      expect(thenLabels.length).toBe(2); // Two action blocks
+    });
+  });
+
+  describe('noshow variant', () => {
+    it('renders noshow workflow blocks', () => {
+      render(React.createElement(WorkflowVisual, { variant: 'noshow' }));
+      expect(screen.getByText('Event Created')).toBeInTheDocument();
+      expect(screen.getByText('Wait 2 Hours Before')).toBeInTheDocument();
+      expect(screen.getByText('Send SMS')).toBeInTheDocument();
+    });
+
+    it('renders correct icons for noshow workflow', () => {
+      render(React.createElement(WorkflowVisual, { variant: 'noshow' }));
+      expect(screen.getByTestId('calendar-icon')).toBeInTheDocument();
+      expect(screen.getByTestId('clock-icon')).toBeInTheDocument();
+      expect(screen.getByTestId('message-square-icon')).toBeInTheDocument();
+    });
+  });
+
+  describe('report variant', () => {
+    it('renders report workflow blocks', () => {
+      render(React.createElement(WorkflowVisual, { variant: 'report' }));
+      expect(screen.getByText('Daily at 6 PM')).toBeInTheDocument();
+      expect(screen.getByText("Get Tomorrow's Schedule")).toBeInTheDocument();
+      expect(screen.getByText('Send Summary')).toBeInTheDocument();
+    });
+
+    it('renders correct icons for report workflow', () => {
+      render(React.createElement(WorkflowVisual, { variant: 'report' }));
+      expect(screen.getByTestId('clock-icon')).toBeInTheDocument();
+      expect(screen.getByTestId('file-text-icon')).toBeInTheDocument();
+      expect(screen.getByTestId('mail-icon')).toBeInTheDocument();
+    });
+  });
+
+  describe('default variant', () => {
+    it('renders default workflow when no variant specified', () => {
+      render(React.createElement(WorkflowVisual, {}));
+      expect(screen.getByText('Event Created')).toBeInTheDocument();
+      expect(screen.getByText('Wait')).toBeInTheDocument();
+      expect(screen.getByText('Send Notification')).toBeInTheDocument();
+    });
+
+    it('uses noshow variant as default', () => {
+      render(React.createElement(WorkflowVisual, {}));
+      // Default should show noshow variant
+      expect(screen.getByText('Event Created')).toBeInTheDocument();
+    });
+  });
+
+  describe('workflow structure', () => {
+    it('renders trigger block with special styling', () => {
+      const { container } = render(React.createElement(WorkflowVisual, { variant: 'noshow' }));
+      const triggerBlock = container.querySelector('.from-brand-50.to-purple-50');
+      expect(triggerBlock).toBeInTheDocument();
+    });
+
+    it('renders action blocks with standard styling', () => {
+      const { container } = render(React.createElement(WorkflowVisual, { variant: 'noshow' }));
+      const actionBlocks = container.querySelectorAll('.bg-gray-50');
+      expect(actionBlocks.length).toBeGreaterThan(0);
+    });
+
+    it('renders chevron icons for each block', () => {
+      render(React.createElement(WorkflowVisual, { variant: 'noshow' }));
+      const chevronIcons = screen.getAllByTestId('chevron-right-icon');
+      expect(chevronIcons.length).toBe(3); // One per block
+    });
+  });
+
+  describe('icons', () => {
+    it('renders sparkles icon in AI input', () => {
+      render(React.createElement(WorkflowVisual, { variant: 'noshow' }));
+      expect(screen.getByTestId('sparkles-icon')).toBeInTheDocument();
+    });
+
+    it('renders appropriate icons for each workflow block type', () => {
+      render(React.createElement(WorkflowVisual, { variant: 'winback' }));
+      expect(screen.getByTestId('clock-icon')).toBeInTheDocument();
+      expect(screen.getByTestId('search-icon')).toBeInTheDocument();
+      expect(screen.getByTestId('mail-icon')).toBeInTheDocument();
+    });
+  });
+
+  describe('styling', () => {
+    it('applies card styling to container', () => {
+      const { container } = render(React.createElement(WorkflowVisual, { variant: 'noshow' }));
+      const card = container.querySelector('.bg-white.dark\\:bg-gray-800');
+      expect(card).toBeInTheDocument();
+    });
+
+    it('applies rounded corners', () => {
+      const { container } = render(React.createElement(WorkflowVisual, { variant: 'noshow' }));
+      const card = container.querySelector('.rounded-xl');
+      expect(card).toBeInTheDocument();
+    });
+
+    it('applies border and shadow', () => {
+      const { container } = render(React.createElement(WorkflowVisual, { variant: 'noshow' }));
+      const card = container.querySelector('.border.shadow-xl');
+      expect(card).toBeInTheDocument();
+    });
+
+    it('applies gradient background to AI input section', () => {
+      const { container } = render(React.createElement(WorkflowVisual, { variant: 'noshow' }));
+      const aiSection = container.querySelector('.from-purple-50.to-brand-50');
+      expect(aiSection).toBeInTheDocument();
+    });
+  });
+
+  describe('layout', () => {
+    it('uses flex column layout for workflow blocks', () => {
+      const { container } = render(React.createElement(WorkflowVisual, { variant: 'noshow' }));
+      const workflowContainer = container.querySelector('.flex.flex-col');
+      expect(workflowContainer).toBeInTheDocument();
+    });
+
+    it('applies proper padding to sections', () => {
+      const { container } = render(React.createElement(WorkflowVisual, { variant: 'noshow' }));
+      const paddedSection = container.querySelector('.p-6');
+      expect(paddedSection).toBeInTheDocument();
+    });
+  });
+
+  describe('integration badges', () => {
+    it('renders all integration app badges', () => {
+      render(React.createElement(WorkflowVisual, { variant: 'noshow' }));
+      expect(screen.getByText('Gmail')).toBeInTheDocument();
+      expect(screen.getByText('Slack')).toBeInTheDocument();
+      expect(screen.getByText('Sheets')).toBeInTheDocument();
+      expect(screen.getByText('Twilio')).toBeInTheDocument();
+    });
+
+    it('displays additional integrations count', () => {
+      render(React.createElement(WorkflowVisual, { variant: 'noshow' }));
+      expect(screen.getByText('+1000 more')).toBeInTheDocument();
+    });
+
+    it('separates integration section with border', () => {
+      const { container } = render(React.createElement(WorkflowVisual, { variant: 'noshow' }));
+      const integrationsSection = container.querySelector('.border-t');
+      expect(integrationsSection).toBeInTheDocument();
+    });
+  });
+
+  describe('variant switching', () => {
+    it('changes content when variant prop changes', () => {
+      const { rerender } = render(React.createElement(WorkflowVisual, { variant: 'noshow' }));
+      expect(screen.getByText('Event Created')).toBeInTheDocument();
+
+      rerender(React.createElement(WorkflowVisual, { variant: 'winback' }));
+      expect(screen.getByText('Schedule: Weekly')).toBeInTheDocument();
+    });
+
+    it('maintains AI input section across variants', () => {
+      const { rerender } = render(React.createElement(WorkflowVisual, { variant: 'noshow' }));
+      expect(screen.getByText('Describe your automation...')).toBeInTheDocument();
+
+      rerender(React.createElement(WorkflowVisual, { variant: 'report' }));
+      expect(screen.getByText('Describe your automation...')).toBeInTheDocument();
+    });
+
+    it('maintains integration badges across variants', () => {
+      const { rerender } = render(React.createElement(WorkflowVisual, { variant: 'noshow' }));
+      expect(screen.getByText('Gmail')).toBeInTheDocument();
+
+      rerender(React.createElement(WorkflowVisual, { variant: 'winback' }));
+      expect(screen.getByText('Gmail')).toBeInTheDocument();
+    });
+  });
+
+  describe('accessibility', () => {
+    it('renders semantic HTML structure', () => {
+      const { container } = render(React.createElement(WorkflowVisual, { variant: 'noshow' }));
+      expect(container.querySelector('div')).toBeInTheDocument();
+    });
+
+    it('includes descriptive text for workflow steps', () => {
+      render(React.createElement(WorkflowVisual, { variant: 'noshow' }));
+      expect(screen.getByText('When')).toBeInTheDocument();
+      expect(screen.getAllByText('Then').length).toBeGreaterThan(0);
+    });
+  });
+
+  describe('edge cases', () => {
+    it('handles undefined variant gracefully', () => {
+      render(React.createElement(WorkflowVisual, { variant: undefined as any }));
+      // Should fall back to default (noshow)
+      expect(screen.getByText('Event Created')).toBeInTheDocument();
+    });
+
+    it('handles invalid variant by using default', () => {
+      render(React.createElement(WorkflowVisual, { variant: 'invalid' as any }));
+      // Should fall back to default
+      expect(screen.getByText('Event Created')).toBeInTheDocument();
+    });
+  });
+
+  describe('block labels', () => {
+    it('displays "When" for trigger blocks', () => {
+      render(React.createElement(WorkflowVisual, { variant: 'winback' }));
+      expect(screen.getByText('When')).toBeInTheDocument();
+    });
+
+    it('displays "Then" for action blocks', () => {
+      render(React.createElement(WorkflowVisual, { variant: 'winback' }));
+      const thenLabels = screen.getAllByText('Then');
+      expect(thenLabels.length).toBeGreaterThan(0);
+    });
+
+    it('applies uppercase styling to block labels', () => {
+      const { container } = render(React.createElement(WorkflowVisual, { variant: 'noshow' }));
+      const labels = container.querySelectorAll('.uppercase');
+      expect(labels.length).toBeGreaterThan(0);
+    });
+  });
+});

frontend/src/components/platform/DynamicFeaturesEditor.tsx

@@ -12,6 +12,7 @@
 import React, { useMemo } from 'react';
 import { Key, AlertCircle } from 'lucide-react';
 import { useBillingFeatures, BillingFeature, FEATURE_CATEGORY_META } from '../../hooks/useBillingPlans';
+import { isWipFeature } from '../../billing/featureCatalog';
 
 export interface DynamicFeaturesEditorProps {
   /**
@@ -62,6 +63,11 @@ export interface DynamicFeaturesEditorProps {
    * Number of columns (default: 3)
    */
   columns?: 2 | 3 | 4;
+
+  /**
+   * Disable all inputs (for read-only mode)
+   */
+  disabled?: boolean;
 }
 
 const DynamicFeaturesEditor: React.FC<DynamicFeaturesEditorProps> = ({
@@ -74,6 +80,7 @@ const DynamicFeaturesEditor: React.FC<DynamicFeaturesEditorProps> = ({
   headerTitle = 'Features & Permissions',
   showDescriptions = false,
   columns = 3,
+  disabled = false,
 }) => {
   const { data: features, isLoading, error } = useBillingFeatures();
 
@@ -223,12 +230,13 @@ const DynamicFeaturesEditor: React.FC<DynamicFeaturesEditorProps> = ({
 
                 if (feature.feature_type === 'boolean') {
                   const isChecked = currentValue === true;
+                  const isInputDisabled = isDisabled || disabled;
 
                   return (
                     <label
                       key={feature.code}
                       className={`flex items-start gap-2 p-2 border border-gray-200 dark:border-gray-700 rounded-lg ${
-                        isDisabled
+                        isInputDisabled
                           ? 'opacity-50 cursor-not-allowed'
                           : 'hover:bg-gray-50 dark:hover:bg-gray-700/50 cursor-pointer'
                       }`}
@@ -237,12 +245,17 @@ const DynamicFeaturesEditor: React.FC<DynamicFeaturesEditorProps> = ({
                         type="checkbox"
                         checked={isChecked}
                         onChange={(e) => handleChange(feature, e.target.checked)}
-                        disabled={isDisabled}
+                        disabled={isInputDisabled}
                         className="mt-0.5 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500 disabled:opacity-50"
                       />
                       <div className="flex-1 min-w-0">
-                        <span className="text-sm text-gray-700 dark:text-gray-300 block">
+                        <span className="text-sm text-gray-700 dark:text-gray-300 flex items-center gap-1.5">
                           {feature.name}
+                          {isWipFeature(feature.code) && (
+                            <span className="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-400">
+                              WIP
+                            </span>
+                          )}
                         </span>
                         {showDescriptions && feature.description && (
                           <span className="text-xs text-gray-500 dark:text-gray-400 block mt-0.5">
@@ -261,10 +274,15 @@ const DynamicFeaturesEditor: React.FC<DynamicFeaturesEditorProps> = ({
                 return (
                   <div
                     key={feature.code}
-                    className="p-2 border border-gray-200 dark:border-gray-700 rounded-lg"
+                    className={`p-2 border border-gray-200 dark:border-gray-700 rounded-lg ${disabled ? 'opacity-50' : ''}`}
                   >
-                    <label className="text-sm text-gray-700 dark:text-gray-300 block mb-1">
+                    <label className="text-sm text-gray-700 dark:text-gray-300 flex items-center gap-1.5 mb-1">
                       {feature.name}
+                      {isWipFeature(feature.code) && (
+                        <span className="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-400">
+                          WIP
+                        </span>
+                      )}
                     </label>
                     <div className="flex items-center gap-2">
                       <input
@@ -275,7 +293,8 @@ const DynamicFeaturesEditor: React.FC<DynamicFeaturesEditorProps> = ({
                           const val = parseInt(e.target.value);
                           handleChange(feature, val === -1 ? null : val);
                         }}
-                        className="w-full px-2 py-1 text-sm border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-1 focus:ring-indigo-500"
+                        disabled={disabled}
+                        className="w-full px-2 py-1 text-sm border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-1 focus:ring-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed"
                       />
                     </div>
                     {showDescriptions && (

frontend/src/components/platform/FeaturesPermissionsEditor.tsx

@@ -12,6 +12,7 @@
 
 import React from 'react';
 import { Key } from 'lucide-react';
+import { isWipFeature } from '../../billing/featureCatalog';
 
 /**
  * Permission definition with metadata
@@ -117,21 +118,21 @@ export const PERMISSION_DEFINITIONS: PermissionDefinition[] = [
     category: 'customization',
   },
   {
-    key: 'remove_branding',
+    key: 'white_label',
     planKey: 'can_white_label',
     businessKey: 'can_white_label',
-    label: 'Remove Branding',
+    label: 'White Label',
-    description: 'Remove SmoothSchedule branding from customer-facing pages',
+    description: 'Customize branding and remove SmoothSchedule branding',
     category: 'customization',
   },
 
-  // Plugins & Automation
+  // Automations
   {
-    key: 'plugins',
+    key: 'automations',
-    planKey: 'can_use_plugins',
+    planKey: 'can_use_automations',
-    businessKey: 'can_use_plugins',
+    businessKey: 'can_use_automations',
-    label: 'Use Plugins',
+    label: 'Automations',
-    description: 'Install and use marketplace plugins',
+    description: 'Install and use marketplace automations',
     category: 'plugins',
   },
   {
@@ -141,16 +142,16 @@ export const PERMISSION_DEFINITIONS: PermissionDefinition[] = [
     label: 'Scheduled Tasks',
     description: 'Create automated scheduled tasks',
     category: 'plugins',
-    dependsOn: 'plugins',
+    dependsOn: 'automations',
   },
   {
-    key: 'create_plugins',
+    key: 'create_automations',
-    planKey: 'can_create_plugins',
+    planKey: 'can_create_automations',
-    businessKey: 'can_create_plugins',
+    businessKey: 'can_create_automations',
-    label: 'Create Plugins',
+    label: 'Create Automations',
-    description: 'Build custom plugins',
+    description: 'Build custom automations',
     category: 'plugins',
-    dependsOn: 'plugins',
+    dependsOn: 'automations',
   },
 
   // Advanced Features
@@ -172,7 +173,7 @@ export const PERMISSION_DEFINITIONS: PermissionDefinition[] = [
   },
   {
     key: 'calendar_sync',
-    planKey: 'calendar_sync',
+    planKey: 'can_use_calendar_sync',
     businessKey: 'can_use_calendar_sync',
     label: 'Calendar Sync',
     description: 'Sync with Google Calendar, etc.',
@@ -186,14 +187,6 @@ export const PERMISSION_DEFINITIONS: PermissionDefinition[] = [
     description: 'Export data to CSV/Excel',
     category: 'advanced',
   },
-  {
-    key: 'video_conferencing',
-    planKey: 'video_conferencing',
-    businessKey: 'can_add_video_conferencing',
-    label: 'Video Conferencing',
-    description: 'Add video links to appointments',
-    category: 'advanced',
-  },
   {
     key: 'advanced_reporting',
     planKey: 'advanced_reporting',
@@ -240,8 +233,8 @@ export const PERMISSION_DEFINITIONS: PermissionDefinition[] = [
     key: 'sso_enabled',
     planKey: 'sso_enabled',
     businessKey: 'sso_enabled',
-    label: 'SSO / SAML',
+    label: 'Single Sign-On (SSO)',
-    description: 'Single sign-on integration',
+    description: 'Enable SSO/SAML authentication for team members',
     category: 'enterprise',
   },
   {
@@ -499,8 +492,13 @@ const FeaturesPermissionsEditor: React.FC<FeaturesPermissionsEditorProps> = ({
                     className="mt-0.5 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500 disabled:opacity-50"
                   />
                   <div className="flex-1 min-w-0">
-                    <span className="text-sm text-gray-700 dark:text-gray-300 block">
+                    <span className="text-sm text-gray-700 dark:text-gray-300 flex items-center gap-1.5">
                       {def.label}
+                      {isWipFeature(def.planKey || def.key) && (
+                        <span className="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-400">
+                          WIP
+                        </span>
+                      )}
                     </span>
                     {showDescriptions && def.description && (
                       <span className="text-xs text-gray-500 dark:text-gray-400 block mt-0.5">

frontend/src/components/platform/__tests__/DynamicFeaturesEditor.test.tsx

@@ -0,0 +1,855 @@
+/**
+ * Unit tests for DynamicFeaturesEditor component
+ *
+ * Tests the dynamic features editor component including:
+ * - Basic rendering with loading and error states
+ * - Feature filtering by category and type
+ * - Boolean feature toggles
+ * - Integer feature inputs (limits)
+ * - Feature dependencies
+ * - Category grouping and sorting
+ * - User interactions (toggling, input changes)
+ */
+
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import DynamicFeaturesEditor from '../DynamicFeaturesEditor';
+import { BillingFeature } from '../../../hooks/useBillingPlans';
+
+// Mock the useBillingFeatures hook
+vi.mock('../../../hooks/useBillingPlans', () => ({
+  useBillingFeatures: vi.fn(),
+  FEATURE_CATEGORY_META: {
+    limits: { label: 'Limits', order: 0 },
+    payments: { label: 'Payments & Revenue', order: 1 },
+    communication: { label: 'Communication', order: 2 },
+    customization: { label: 'Customization', order: 3 },
+    plugins: { label: 'Plugins & Automation', order: 4 },
+    advanced: { label: 'Advanced Features', order: 5 },
+    scheduling: { label: 'Scheduling', order: 6 },
+    enterprise: { label: 'Enterprise & Security', order: 7 },
+  },
+}));
+
+// Import the mocked module to access the mock function
+import { useBillingFeatures } from '../../../hooks/useBillingPlans';
+
+const mockUseBillingFeatures = useBillingFeatures as ReturnType<typeof vi.fn>;
+
+// Mock feature data
+const createMockFeature = (overrides: Partial<BillingFeature> = {}): BillingFeature => ({
+  id: 1,
+  code: 'test_feature',
+  name: 'Test Feature',
+  description: 'Test feature description',
+  feature_type: 'boolean',
+  category: 'plugins',
+  tenant_field_name: 'can_test_feature',
+  display_order: 1,
+  is_overridable: true,
+  depends_on: null,
+  depends_on_code: null,
+  ...overrides,
+});
+
+const mockFeatures: BillingFeature[] = [
+  createMockFeature({
+    id: 1,
+    code: 'can_use_plugins',
+    name: 'Use Plugins',
+    description: 'Install and use marketplace plugins',
+    tenant_field_name: 'can_use_plugins',
+    category: 'plugins',
+    display_order: 1,
+  }),
+  createMockFeature({
+    id: 2,
+    code: 'can_use_tasks',
+    name: 'Scheduled Tasks',
+    description: 'Create automated scheduled tasks',
+    tenant_field_name: 'can_use_tasks',
+    category: 'plugins',
+    display_order: 2,
+    depends_on: 1,
+    depends_on_code: 'can_use_plugins',
+  }),
+  createMockFeature({
+    id: 3,
+    code: 'can_use_sms_reminders',
+    name: 'SMS Reminders',
+    description: 'Send SMS appointment reminders',
+    tenant_field_name: 'can_use_sms_reminders',
+    category: 'communication',
+    display_order: 1,
+  }),
+  createMockFeature({
+    id: 4,
+    code: 'max_users',
+    name: 'Max Users',
+    description: 'Maximum number of users',
+    feature_type: 'integer',
+    tenant_field_name: 'max_users',
+    category: 'limits',
+    display_order: 1,
+  }),
+];
+
+describe('DynamicFeaturesEditor', () => {
+  const mockOnChange = vi.fn();
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('Loading State', () => {
+    it('should render loading state', () => {
+      mockUseBillingFeatures.mockReturnValue({
+        data: undefined,
+        isLoading: true,
+        error: null,
+      });
+
+      render(
+        <DynamicFeaturesEditor
+          values={{}}
+          onChange={mockOnChange}
+        />
+      );
+
+      expect(screen.getByText('Features & Permissions')).toBeInTheDocument();
+      // Check for loading skeleton
+      const skeletons = document.querySelectorAll('.animate-pulse');
+      expect(skeletons.length).toBeGreaterThan(0);
+    });
+
+    it('should show custom header title in loading state', () => {
+      mockUseBillingFeatures.mockReturnValue({
+        data: undefined,
+        isLoading: true,
+        error: null,
+      });
+
+      render(
+        <DynamicFeaturesEditor
+          values={{}}
+          onChange={mockOnChange}
+          headerTitle="Custom Features"
+        />
+      );
+
+      expect(screen.getByText('Custom Features')).toBeInTheDocument();
+    });
+
+    it('should not show header in loading state when showHeader is false', () => {
+      mockUseBillingFeatures.mockReturnValue({
+        data: undefined,
+        isLoading: true,
+        error: null,
+      });
+
+      render(
+        <DynamicFeaturesEditor
+          values={{}}
+          onChange={mockOnChange}
+          showHeader={false}
+        />
+      );
+
+      expect(screen.queryByText('Features & Permissions')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Error State', () => {
+    it('should render error state', () => {
+      mockUseBillingFeatures.mockReturnValue({
+        data: undefined,
+        isLoading: false,
+        error: new Error('Failed to load'),
+      });
+
+      render(
+        <DynamicFeaturesEditor
+          values={{}}
+          onChange={mockOnChange}
+        />
+      );
+
+      expect(screen.getByText('Failed to load features from billing system')).toBeInTheDocument();
+    });
+
+    it('should show header in error state', () => {
+      mockUseBillingFeatures.mockReturnValue({
+        data: undefined,
+        isLoading: false,
+        error: new Error('Failed to load'),
+      });
+
+      render(
+        <DynamicFeaturesEditor
+          values={{}}
+          onChange={mockOnChange}
+        />
+      );
+
+      expect(screen.getByText('Features & Permissions')).toBeInTheDocument();
+    });
+  });
+
+  describe('Basic Rendering', () => {
+    beforeEach(() => {
+      mockUseBillingFeatures.mockReturnValue({
+        data: mockFeatures,
+        isLoading: false,
+        error: null,
+      });
+    });
+
+    it('should render with default header', () => {
+      render(
+        <DynamicFeaturesEditor
+          values={{}}
+          onChange={mockOnChange}
+        />
+      );
+
+      expect(screen.getByText('Features & Permissions')).toBeInTheDocument();
+    });
+
+    it('should render with custom header title', () => {
+      render(
+        <DynamicFeaturesEditor
+          values={{}}
+          onChange={mockOnChange}
+          headerTitle="Custom Title"
+        />
+      );
+
+      expect(screen.getByText('Custom Title')).toBeInTheDocument();
+      expect(screen.queryByText('Features & Permissions')).not.toBeInTheDocument();
+    });
+
+    it('should not render header when showHeader is false', () => {
+      render(
+        <DynamicFeaturesEditor
+          values={{}}
+          onChange={mockOnChange}
+          showHeader={false}
+        />
+      );
+
+      expect(screen.queryByText('Features & Permissions')).not.toBeInTheDocument();
+    });
+
+    it('should render all boolean features by default', () => {
+      render(
+        <DynamicFeaturesEditor
+          values={{}}
+          onChange={mockOnChange}
+        />
+      );
+
+      expect(screen.getByText('Use Plugins')).toBeInTheDocument();
+      expect(screen.getByText('Scheduled Tasks')).toBeInTheDocument();
+      expect(screen.getByText('SMS Reminders')).toBeInTheDocument();
+    });
+
+    it('should render category labels', () => {
+      render(
+        <DynamicFeaturesEditor
+          values={{}}
+          onChange={mockOnChange}
+        />
+      );
+
+      expect(screen.getByText('Plugins & Automation')).toBeInTheDocument();
+      expect(screen.getByText('Communication')).toBeInTheDocument();
+    });
+  });
+
+  describe('Feature Filtering', () => {
+    beforeEach(() => {
+      mockUseBillingFeatures.mockReturnValue({
+        data: mockFeatures,
+        isLoading: false,
+        error: null,
+      });
+    });
+
+    it('should filter by category', () => {
+      render(
+        <DynamicFeaturesEditor
+          values={{}}
+          onChange={mockOnChange}
+          categories={['plugins']}
+        />
+      );
+
+      expect(screen.getByText('Use Plugins')).toBeInTheDocument();
+      expect(screen.getByText('Scheduled Tasks')).toBeInTheDocument();
+      expect(screen.queryByText('SMS Reminders')).not.toBeInTheDocument();
+    });
+
+    it('should filter by feature type - boolean only', () => {
+      render(
+        <DynamicFeaturesEditor
+          values={{}}
+          onChange={mockOnChange}
+          featureType="boolean"
+        />
+      );
+
+      expect(screen.getByText('Use Plugins')).toBeInTheDocument();
+      expect(screen.getByText('SMS Reminders')).toBeInTheDocument();
+      expect(screen.queryByText('Max Users')).not.toBeInTheDocument();
+    });
+
+    it('should filter by feature type - integer only', () => {
+      render(
+        <DynamicFeaturesEditor
+          values={{}}
+          onChange={mockOnChange}
+          featureType="integer"
+        />
+      );
+
+      expect(screen.getByText('Max Users')).toBeInTheDocument();
+      expect(screen.queryByText('Use Plugins')).not.toBeInTheDocument();
+      expect(screen.queryByText('SMS Reminders')).not.toBeInTheDocument();
+    });
+
+    it('should exclude features by code', () => {
+      render(
+        <DynamicFeaturesEditor
+          values={{}}
+          onChange={mockOnChange}
+          excludeCodes={['can_use_plugins']}
+        />
+      );
+
+      expect(screen.queryByText('Use Plugins')).not.toBeInTheDocument();
+      expect(screen.getByText('Scheduled Tasks')).toBeInTheDocument();
+      expect(screen.getByText('SMS Reminders')).toBeInTheDocument();
+    });
+
+    it('should combine multiple filters', () => {
+      render(
+        <DynamicFeaturesEditor
+          values={{}}
+          onChange={mockOnChange}
+          categories={['plugins']}
+          featureType="boolean"
+          excludeCodes={['can_use_tasks']}
+        />
+      );
+
+      expect(screen.getByText('Use Plugins')).toBeInTheDocument();
+      expect(screen.queryByText('Scheduled Tasks')).not.toBeInTheDocument();
+      expect(screen.queryByText('SMS Reminders')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Boolean Features', () => {
+    beforeEach(() => {
+      mockUseBillingFeatures.mockReturnValue({
+        data: mockFeatures,
+        isLoading: false,
+        error: null,
+      });
+    });
+
+    it('should render unchecked checkbox for false value', () => {
+      render(
+        <DynamicFeaturesEditor
+          values={{ can_use_plugins: false }}
+          onChange={mockOnChange}
+        />
+      );
+
+      const checkbox = screen.getByRole('checkbox', { name: /Use Plugins/i });
+      expect(checkbox).not.toBeChecked();
+    });
+
+    it('should render checked checkbox for true value', () => {
+      render(
+        <DynamicFeaturesEditor
+          values={{ can_use_plugins: true }}
+          onChange={mockOnChange}
+        />
+      );
+
+      const checkbox = screen.getByRole('checkbox', { name: /Use Plugins/i });
+      expect(checkbox).toBeChecked();
+    });
+
+    it('should call onChange when checkbox is toggled', async () => {
+      const user = userEvent.setup();
+
+      render(
+        <DynamicFeaturesEditor
+          values={{ can_use_plugins: false }}
+          onChange={mockOnChange}
+        />
+      );
+
+      const checkbox = screen.getByRole('checkbox', { name: /Use Plugins/i });
+      await user.click(checkbox);
+
+      expect(mockOnChange).toHaveBeenCalledWith('can_use_plugins', true);
+    });
+
+    it('should show descriptions when showDescriptions is true', () => {
+      render(
+        <DynamicFeaturesEditor
+          values={{}}
+          onChange={mockOnChange}
+          showDescriptions={true}
+        />
+      );
+
+      expect(screen.getByText('Install and use marketplace plugins')).toBeInTheDocument();
+      expect(screen.getByText('Create automated scheduled tasks')).toBeInTheDocument();
+    });
+
+    it('should not show descriptions by default', () => {
+      render(
+        <DynamicFeaturesEditor
+          values={{}}
+          onChange={mockOnChange}
+        />
+      );
+
+      expect(screen.queryByText('Install and use marketplace plugins')).not.toBeInTheDocument();
+      expect(screen.queryByText('Create automated scheduled tasks')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Integer Features', () => {
+    beforeEach(() => {
+      mockUseBillingFeatures.mockReturnValue({
+        data: mockFeatures,
+        isLoading: false,
+        error: null,
+      });
+    });
+
+    it('should render number input for integer features', () => {
+      render(
+        <DynamicFeaturesEditor
+          values={{ max_users: 10 }}
+          onChange={mockOnChange}
+          featureType="integer"
+        />
+      );
+
+      const input = screen.getByDisplayValue('10');
+      expect(input).toHaveAttribute('type', 'number');
+    });
+
+    it('should render -1 for unlimited (null value)', () => {
+      render(
+        <DynamicFeaturesEditor
+          values={{ max_users: null }}
+          onChange={mockOnChange}
+          featureType="integer"
+        />
+      );
+
+      const input = screen.getByDisplayValue('-1');
+      expect(input).toBeInTheDocument();
+    });
+
+    it('should call onChange with null when -1 is entered', async () => {
+      const user = userEvent.setup();
+
+      render(
+        <DynamicFeaturesEditor
+          values={{ max_users: 10 }}
+          onChange={mockOnChange}
+          featureType="integer"
+        />
+      );
+
+      const input = screen.getByDisplayValue('10');
+      // Type -1 directly (this will trigger onChange for each character)
+      await user.clear(input);
+      await user.type(input, '-1');
+
+      // The final call should have -1 -> null conversion
+      await waitFor(() => {
+        const calls = mockOnChange.mock.calls;
+        const lastCall = calls[calls.length - 1];
+        expect(lastCall[0]).toBe('max_users');
+        expect(lastCall[1]).toBe(null);
+      });
+    });
+
+    it('should call onChange with number when value is entered', async () => {
+      const user = userEvent.setup();
+
+      render(
+        <DynamicFeaturesEditor
+          values={{ max_users: 10 }}
+          onChange={mockOnChange}
+          featureType="integer"
+        />
+      );
+
+      const input = screen.getByDisplayValue('10');
+      // Clear and type will trigger onChange for each character
+      await user.clear(input);
+      await user.type(input, '25');
+
+      // The final call should have the complete number
+      await waitFor(() => {
+        const calls = mockOnChange.mock.calls;
+        const lastCall = calls[calls.length - 1];
+        expect(lastCall[0]).toBe('max_users');
+        expect(lastCall[1]).toBe(25);
+      });
+    });
+
+    it('should show description with unlimited hint when showDescriptions is true', () => {
+      render(
+        <DynamicFeaturesEditor
+          values={{ max_users: 10 }}
+          onChange={mockOnChange}
+          featureType="integer"
+          showDescriptions={true}
+        />
+      );
+
+      expect(screen.getByText(/Maximum number of users.*-1 = unlimited/)).toBeInTheDocument();
+    });
+  });
+
+  describe('Feature Dependencies', () => {
+    beforeEach(() => {
+      mockUseBillingFeatures.mockReturnValue({
+        data: mockFeatures,
+        isLoading: false,
+        error: null,
+      });
+    });
+
+    it('should disable dependent feature when parent is disabled', () => {
+      render(
+        <DynamicFeaturesEditor
+          values={{ can_use_plugins: false, can_use_tasks: false }}
+          onChange={mockOnChange}
+        />
+      );
+
+      const tasksCheckbox = screen.getByRole('checkbox', { name: /Scheduled Tasks/i });
+      expect(tasksCheckbox).toBeDisabled();
+    });
+
+    it('should enable dependent feature when parent is enabled', () => {
+      render(
+        <DynamicFeaturesEditor
+          values={{ can_use_plugins: true, can_use_tasks: false }}
+          onChange={mockOnChange}
+        />
+      );
+
+      const tasksCheckbox = screen.getByRole('checkbox', { name: /Scheduled Tasks/i });
+      expect(tasksCheckbox).not.toBeDisabled();
+    });
+
+    it('should disable dependents when parent is toggled off', async () => {
+      const user = userEvent.setup();
+
+      render(
+        <DynamicFeaturesEditor
+          values={{ can_use_plugins: true, can_use_tasks: true }}
+          onChange={mockOnChange}
+        />
+      );
+
+      const pluginsCheckbox = screen.getByRole('checkbox', { name: /Use Plugins/i });
+      await user.click(pluginsCheckbox);
+
+      expect(mockOnChange).toHaveBeenCalledWith('can_use_plugins', false);
+      expect(mockOnChange).toHaveBeenCalledWith('can_use_tasks', false);
+    });
+
+    it('should show dependency hint when plugins are disabled', () => {
+      render(
+        <DynamicFeaturesEditor
+          values={{ can_use_plugins: false }}
+          onChange={mockOnChange}
+          categories={['plugins']}
+        />
+      );
+
+      expect(screen.getByText('Enable "Use Plugins" to allow dependent features')).toBeInTheDocument();
+    });
+
+    it('should not show dependency hint when plugins are enabled', () => {
+      render(
+        <DynamicFeaturesEditor
+          values={{ can_use_plugins: true }}
+          onChange={mockOnChange}
+          categories={['plugins']}
+        />
+      );
+
+      expect(screen.queryByText('Enable "Use Plugins" to allow dependent features')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Column Layout', () => {
+    beforeEach(() => {
+      mockUseBillingFeatures.mockReturnValue({
+        data: mockFeatures,
+        isLoading: false,
+        error: null,
+      });
+    });
+
+    it('should use 3 columns by default', () => {
+      const { container } = render(
+        <DynamicFeaturesEditor
+          values={{}}
+          onChange={mockOnChange}
+        />
+      );
+
+      const grid = container.querySelector('.grid-cols-3');
+      expect(grid).toBeInTheDocument();
+    });
+
+    it('should use 2 columns when specified', () => {
+      const { container } = render(
+        <DynamicFeaturesEditor
+          values={{}}
+          onChange={mockOnChange}
+          columns={2}
+        />
+      );
+
+      const grid = container.querySelector('.grid-cols-2');
+      expect(grid).toBeInTheDocument();
+    });
+
+    it('should use 4 columns when specified', () => {
+      const { container } = render(
+        <DynamicFeaturesEditor
+          values={{}}
+          onChange={mockOnChange}
+          columns={4}
+        />
+      );
+
+      const grid = container.querySelector('.grid-cols-4');
+      expect(grid).toBeInTheDocument();
+    });
+  });
+
+  describe('Category Sorting', () => {
+    it('should sort categories by order', () => {
+      mockUseBillingFeatures.mockReturnValue({
+        data: mockFeatures,
+        isLoading: false,
+        error: null,
+      });
+
+      const { container } = render(
+        <DynamicFeaturesEditor
+          values={{}}
+          onChange={mockOnChange}
+        />
+      );
+
+      const categoryHeaders = container.querySelectorAll('h4.uppercase');
+      const categoryTexts = Array.from(categoryHeaders).map(h => h.textContent);
+
+      // Limits (0) should come before Communication (2) which comes before Plugins (4)
+      const limitsIndex = categoryTexts.indexOf('Limits');
+      const communicationIndex = categoryTexts.indexOf('Communication');
+      const pluginsIndex = categoryTexts.indexOf('Plugins & Automation');
+
+      expect(limitsIndex).toBeLessThan(communicationIndex);
+      expect(communicationIndex).toBeLessThan(pluginsIndex);
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('should handle empty features array', () => {
+      mockUseBillingFeatures.mockReturnValue({
+        data: [],
+        isLoading: false,
+        error: null,
+      });
+
+      render(
+        <DynamicFeaturesEditor
+          values={{}}
+          onChange={mockOnChange}
+        />
+      );
+
+      expect(screen.getByText('Features & Permissions')).toBeInTheDocument();
+      // Should not crash, just render empty
+    });
+
+    it('should handle features without tenant_field_name', () => {
+      const featuresWithoutField = [
+        createMockFeature({
+          tenant_field_name: '',
+        }),
+      ];
+
+      mockUseBillingFeatures.mockReturnValue({
+        data: featuresWithoutField,
+        isLoading: false,
+        error: null,
+      });
+
+      render(
+        <DynamicFeaturesEditor
+          values={{}}
+          onChange={mockOnChange}
+        />
+      );
+
+      // Should filter out features without tenant_field_name
+      expect(screen.queryByText('Test Feature')).not.toBeInTheDocument();
+    });
+
+    it('should handle non-overridable features', () => {
+      const nonOverridableFeatures = [
+        createMockFeature({
+          is_overridable: false,
+        }),
+      ];
+
+      mockUseBillingFeatures.mockReturnValue({
+        data: nonOverridableFeatures,
+        isLoading: false,
+        error: null,
+      });
+
+      render(
+        <DynamicFeaturesEditor
+          values={{}}
+          onChange={mockOnChange}
+        />
+      );
+
+      // Should filter out non-overridable features
+      expect(screen.queryByText('Test Feature')).not.toBeInTheDocument();
+    });
+
+    it('should handle undefined values object', () => {
+      mockUseBillingFeatures.mockReturnValue({
+        data: mockFeatures,
+        isLoading: false,
+        error: null,
+      });
+
+      render(
+        <DynamicFeaturesEditor
+          values={{}}
+          onChange={mockOnChange}
+        />
+      );
+
+      const checkbox = screen.getByRole('checkbox', { name: /Use Plugins/i });
+      expect(checkbox).not.toBeChecked();
+    });
+  });
+
+  describe('Accessibility', () => {
+    beforeEach(() => {
+      mockUseBillingFeatures.mockReturnValue({
+        data: mockFeatures,
+        isLoading: false,
+        error: null,
+      });
+    });
+
+    it('should use semantic heading for main header', () => {
+      const { container } = render(
+        <DynamicFeaturesEditor
+          values={{}}
+          onChange={mockOnChange}
+        />
+      );
+
+      const mainHeading = container.querySelector('h3');
+      expect(mainHeading).toHaveTextContent('Features & Permissions');
+    });
+
+    it('should use semantic heading for category labels', () => {
+      const { container } = render(
+        <DynamicFeaturesEditor
+          values={{}}
+          onChange={mockOnChange}
+        />
+      );
+
+      const categoryHeadings = container.querySelectorAll('h4');
+      expect(categoryHeadings.length).toBeGreaterThan(0);
+    });
+
+    it('should have proper label association for checkboxes', () => {
+      render(
+        <DynamicFeaturesEditor
+          values={{}}
+          onChange={mockOnChange}
+        />
+      );
+
+      const checkbox = screen.getByRole('checkbox', { name: /Use Plugins/i });
+      expect(checkbox).toBeInTheDocument();
+    });
+
+    it('should have proper label for number inputs', () => {
+      render(
+        <DynamicFeaturesEditor
+          values={{ max_users: 10 }}
+          onChange={mockOnChange}
+          featureType="integer"
+        />
+      );
+
+      expect(screen.getByText('Max Users')).toBeInTheDocument();
+      expect(screen.getByDisplayValue('10')).toBeInTheDocument();
+    });
+  });
+
+  describe('Dark Mode Support', () => {
+    beforeEach(() => {
+      mockUseBillingFeatures.mockReturnValue({
+        data: mockFeatures,
+        isLoading: false,
+        error: null,
+      });
+    });
+
+    it('should include dark mode classes for header', () => {
+      const { container } = render(
+        <DynamicFeaturesEditor
+          values={{}}
+          onChange={mockOnChange}
+        />
+      );
+
+      const header = screen.getByText('Features & Permissions');
+      expect(header).toHaveClass('dark:text-white');
+    });
+
+    it('should include dark mode classes for descriptions', () => {
+      const { container } = render(
+        <DynamicFeaturesEditor
+          values={{}}
+          onChange={mockOnChange}
+        />
+      );
+
+      const description = container.querySelector('.text-xs.text-gray-500');
+      expect(description).toHaveClass('dark:text-gray-400');
+    });
+  });
+});

frontend/src/components/platform/__tests__/FeaturesPermissionsEditor.test.tsx

@@ -0,0 +1,695 @@
+/**
+ * Unit tests for FeaturesPermissionsEditor component
+ *
+ * Tests the static features/permissions editor component including:
+ * - Basic rendering with plan and business modes
+ * - Permission filtering by category
+ * - Boolean permission toggles
+ * - Permission dependencies
+ * - Category grouping and sorting
+ * - Mode-specific key mapping
+ * - User interactions
+ */
+
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import FeaturesPermissionsEditor, {
+  PERMISSION_DEFINITIONS,
+  getPermissionKey,
+  convertPermissions,
+} from '../FeaturesPermissionsEditor';
+
+describe('FeaturesPermissionsEditor', () => {
+  const mockOnChange = vi.fn();
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('Basic Rendering - Plan Mode', () => {
+    it('should render with default header in plan mode', () => {
+      render(
+        <FeaturesPermissionsEditor
+          mode="plan"
+          values={{}}
+          onChange={mockOnChange}
+        />
+      );
+
+      expect(screen.getByText('Features & Permissions')).toBeInTheDocument();
+    });
+
+    it('should render with custom header title', () => {
+      render(
+        <FeaturesPermissionsEditor
+          mode="plan"
+          values={{}}
+          onChange={mockOnChange}
+          headerTitle="Custom Permissions"
+        />
+      );
+
+      expect(screen.getByText('Custom Permissions')).toBeInTheDocument();
+      expect(screen.queryByText('Features & Permissions')).not.toBeInTheDocument();
+    });
+
+    it('should not render header when showHeader is false', () => {
+      render(
+        <FeaturesPermissionsEditor
+          mode="plan"
+          values={{}}
+          onChange={mockOnChange}
+          showHeader={false}
+        />
+      );
+
+      expect(screen.queryByText('Features & Permissions')).not.toBeInTheDocument();
+    });
+
+    it('should render all permissions by default', () => {
+      render(
+        <FeaturesPermissionsEditor
+          mode="plan"
+          values={{}}
+          onChange={mockOnChange}
+        />
+      );
+
+      // Check for some key permissions
+      expect(screen.getByText('Online Payments')).toBeInTheDocument();
+      expect(screen.getByText('SMS Reminders')).toBeInTheDocument();
+      expect(screen.getByText('Use Plugins')).toBeInTheDocument();
+    });
+
+    it('should render category labels', () => {
+      render(
+        <FeaturesPermissionsEditor
+          mode="plan"
+          values={{}}
+          onChange={mockOnChange}
+        />
+      );
+
+      expect(screen.getByText('Payments & Revenue')).toBeInTheDocument();
+      expect(screen.getByText('Communication')).toBeInTheDocument();
+      expect(screen.getByText('Plugins & Automation')).toBeInTheDocument();
+    });
+  });
+
+  describe('Basic Rendering - Business Mode', () => {
+    it('should render correctly in business mode', () => {
+      render(
+        <FeaturesPermissionsEditor
+          mode="business"
+          values={{}}
+          onChange={mockOnChange}
+        />
+      );
+
+      expect(screen.getByText('Features & Permissions')).toBeInTheDocument();
+      expect(screen.getByText('Online Payments')).toBeInTheDocument();
+    });
+
+    it('should use business keys in business mode', () => {
+      render(
+        <FeaturesPermissionsEditor
+          mode="business"
+          values={{ can_accept_payments: true }}
+          onChange={mockOnChange}
+        />
+      );
+
+      const checkbox = screen.getByRole('checkbox', { name: /Online Payments/i });
+      expect(checkbox).toBeChecked();
+    });
+  });
+
+  describe('Permission Filtering', () => {
+    it('should filter by category', () => {
+      render(
+        <FeaturesPermissionsEditor
+          mode="plan"
+          values={{}}
+          onChange={mockOnChange}
+          categories={['payments']}
+        />
+      );
+
+      expect(screen.getByText('Online Payments')).toBeInTheDocument();
+      expect(screen.queryByText('SMS Reminders')).not.toBeInTheDocument();
+      expect(screen.queryByText('Use Plugins')).not.toBeInTheDocument();
+    });
+
+    it('should filter by multiple categories', () => {
+      render(
+        <FeaturesPermissionsEditor
+          mode="plan"
+          values={{}}
+          onChange={mockOnChange}
+          categories={['payments', 'communication']}
+        />
+      );
+
+      expect(screen.getByText('Online Payments')).toBeInTheDocument();
+      expect(screen.getByText('SMS Reminders')).toBeInTheDocument();
+      expect(screen.queryByText('Use Plugins')).not.toBeInTheDocument();
+    });
+
+    it('should filter using includeOnly', () => {
+      render(
+        <FeaturesPermissionsEditor
+          mode="plan"
+          values={{}}
+          onChange={mockOnChange}
+          includeOnly={['can_accept_payments', 'sms_reminders']}
+        />
+      );
+
+      expect(screen.getByText('Online Payments')).toBeInTheDocument();
+      expect(screen.getByText('SMS Reminders')).toBeInTheDocument();
+      // Other permissions should not be visible
+      const checkboxes = screen.getAllByRole('checkbox');
+      expect(checkboxes).toHaveLength(2);
+    });
+
+    it('should exclude specific permissions', () => {
+      render(
+        <FeaturesPermissionsEditor
+          mode="plan"
+          values={{}}
+          onChange={mockOnChange}
+          categories={['payments']}
+          exclude={['can_accept_payments']}
+        />
+      );
+
+      expect(screen.queryByText('Online Payments')).not.toBeInTheDocument();
+      expect(screen.getByText('Process Refunds')).toBeInTheDocument();
+    });
+  });
+
+  describe('Permission Toggles', () => {
+    it('should render unchecked checkbox for false value in plan mode', () => {
+      render(
+        <FeaturesPermissionsEditor
+          mode="plan"
+          values={{ can_accept_payments: false }}
+          onChange={mockOnChange}
+        />
+      );
+
+      const checkbox = screen.getByRole('checkbox', { name: /Online Payments/i });
+      expect(checkbox).not.toBeChecked();
+    });
+
+    it('should render checked checkbox for true value in plan mode', () => {
+      render(
+        <FeaturesPermissionsEditor
+          mode="plan"
+          values={{ can_accept_payments: true }}
+          onChange={mockOnChange}
+        />
+      );
+
+      const checkbox = screen.getByRole('checkbox', { name: /Online Payments/i });
+      expect(checkbox).toBeChecked();
+    });
+
+    it('should call onChange when checkbox is toggled in plan mode', async () => {
+      const user = userEvent.setup();
+
+      render(
+        <FeaturesPermissionsEditor
+          mode="plan"
+          values={{ can_accept_payments: false }}
+          onChange={mockOnChange}
+        />
+      );
+
+      const checkbox = screen.getByRole('checkbox', { name: /Online Payments/i });
+      await user.click(checkbox);
+
+      expect(mockOnChange).toHaveBeenCalledWith('can_accept_payments', true);
+    });
+
+    it('should call onChange when checkbox is toggled in business mode', async () => {
+      const user = userEvent.setup();
+
+      render(
+        <FeaturesPermissionsEditor
+          mode="business"
+          values={{ can_accept_payments: false }}
+          onChange={mockOnChange}
+        />
+      );
+
+      const checkbox = screen.getByRole('checkbox', { name: /Online Payments/i });
+      await user.click(checkbox);
+
+      expect(mockOnChange).toHaveBeenCalledWith('can_accept_payments', true);
+    });
+  });
+
+  describe('Permission Dependencies', () => {
+    it('should disable dependent permission when parent is disabled', () => {
+      render(
+        <FeaturesPermissionsEditor
+          mode="plan"
+          values={{ can_use_plugins: false, can_use_tasks: false }}
+          onChange={mockOnChange}
+          categories={['plugins']}
+        />
+      );
+
+      const tasksCheckbox = screen.getByRole('checkbox', { name: /Scheduled Tasks/i });
+      expect(tasksCheckbox).toBeDisabled();
+    });
+
+    it('should enable dependent permission when parent is enabled', () => {
+      render(
+        <FeaturesPermissionsEditor
+          mode="plan"
+          values={{ can_use_plugins: true, can_use_tasks: false }}
+          onChange={mockOnChange}
+          categories={['plugins']}
+        />
+      );
+
+      const tasksCheckbox = screen.getByRole('checkbox', { name: /Scheduled Tasks/i });
+      expect(tasksCheckbox).not.toBeDisabled();
+    });
+
+    it('should disable dependents when parent is toggled off', async () => {
+      const user = userEvent.setup();
+
+      render(
+        <FeaturesPermissionsEditor
+          mode="plan"
+          values={{ can_use_plugins: true, can_use_tasks: true }}
+          onChange={mockOnChange}
+          categories={['plugins']}
+        />
+      );
+
+      const pluginsCheckbox = screen.getByRole('checkbox', { name: /Use Plugins/i });
+      await user.click(pluginsCheckbox);
+
+      expect(mockOnChange).toHaveBeenCalledWith('can_use_plugins', false);
+      expect(mockOnChange).toHaveBeenCalledWith('can_use_tasks', false);
+    });
+
+    it('should show dependency hint when plugins are disabled', () => {
+      render(
+        <FeaturesPermissionsEditor
+          mode="plan"
+          values={{ can_use_plugins: false }}
+          onChange={mockOnChange}
+          categories={['plugins']}
+        />
+      );
+
+      expect(screen.getByText('Enable "Use Plugins" to allow Scheduled Tasks and Create Plugins')).toBeInTheDocument();
+    });
+
+    it('should not show dependency hint when plugins are enabled', () => {
+      render(
+        <FeaturesPermissionsEditor
+          mode="plan"
+          values={{ can_use_plugins: true }}
+          onChange={mockOnChange}
+          categories={['plugins']}
+        />
+      );
+
+      expect(screen.queryByText('Enable "Use Plugins" to allow Scheduled Tasks and Create Plugins')).not.toBeInTheDocument();
+    });
+
+    it('should handle dependencies in business mode', () => {
+      render(
+        <FeaturesPermissionsEditor
+          mode="business"
+          values={{ can_use_plugins: false, can_use_tasks: false }}
+          onChange={mockOnChange}
+          categories={['plugins']}
+        />
+      );
+
+      const tasksCheckbox = screen.getByRole('checkbox', { name: /Scheduled Tasks/i });
+      expect(tasksCheckbox).toBeDisabled();
+    });
+  });
+
+  describe('Descriptions', () => {
+    it('should show descriptions when showDescriptions is true', () => {
+      render(
+        <FeaturesPermissionsEditor
+          mode="plan"
+          values={{}}
+          onChange={mockOnChange}
+          categories={['payments']}
+          showDescriptions={true}
+        />
+      );
+
+      expect(screen.getByText('Accept payments via Stripe Connect')).toBeInTheDocument();
+      expect(screen.getByText('Issue refunds for payments')).toBeInTheDocument();
+    });
+
+    it('should not show descriptions by default', () => {
+      render(
+        <FeaturesPermissionsEditor
+          mode="plan"
+          values={{}}
+          onChange={mockOnChange}
+          categories={['payments']}
+        />
+      );
+
+      expect(screen.queryByText('Accept payments via Stripe Connect')).not.toBeInTheDocument();
+      expect(screen.queryByText('Issue refunds for payments')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Column Layout', () => {
+    it('should use 3 columns by default', () => {
+      const { container } = render(
+        <FeaturesPermissionsEditor
+          mode="plan"
+          values={{}}
+          onChange={mockOnChange}
+        />
+      );
+
+      const grid = container.querySelector('.grid-cols-3');
+      expect(grid).toBeInTheDocument();
+    });
+
+    it('should use 2 columns when specified', () => {
+      const { container } = render(
+        <FeaturesPermissionsEditor
+          mode="plan"
+          values={{}}
+          onChange={mockOnChange}
+          columns={2}
+        />
+      );
+
+      const grid = container.querySelector('.grid-cols-2');
+      expect(grid).toBeInTheDocument();
+    });
+
+    it('should use 4 columns when specified', () => {
+      const { container } = render(
+        <FeaturesPermissionsEditor
+          mode="plan"
+          values={{}}
+          onChange={mockOnChange}
+          columns={4}
+        />
+      );
+
+      const grid = container.querySelector('.grid-cols-4');
+      expect(grid).toBeInTheDocument();
+    });
+  });
+
+  describe('Category Sorting', () => {
+    it('should sort categories by order', () => {
+      const { container } = render(
+        <FeaturesPermissionsEditor
+          mode="plan"
+          values={{}}
+          onChange={mockOnChange}
+        />
+      );
+
+      const categoryHeaders = container.querySelectorAll('h4.uppercase');
+      const categoryTexts = Array.from(categoryHeaders).map(h => h.textContent);
+
+      // Payments (1) should come before Communication (2) which comes before Plugins (4)
+      const paymentsIndex = categoryTexts.indexOf('Payments & Revenue');
+      const communicationIndex = categoryTexts.indexOf('Communication');
+      const pluginsIndex = categoryTexts.indexOf('Plugins & Automation');
+
+      expect(paymentsIndex).toBeLessThan(communicationIndex);
+      expect(communicationIndex).toBeLessThan(pluginsIndex);
+    });
+  });
+
+  describe('Helper Functions', () => {
+    describe('getPermissionKey', () => {
+      it('should return planKey in plan mode', () => {
+        const def = PERMISSION_DEFINITIONS.find(d => d.key === 'sms_reminders')!;
+        expect(getPermissionKey(def, 'plan')).toBe('sms_reminders');
+      });
+
+      it('should return businessKey in business mode', () => {
+        const def = PERMISSION_DEFINITIONS.find(d => d.key === 'sms_reminders')!;
+        expect(getPermissionKey(def, 'business')).toBe('can_use_sms_reminders');
+      });
+
+      it('should fallback to key if planKey not defined', () => {
+        const def = { ...PERMISSION_DEFINITIONS[0], planKey: undefined };
+        expect(getPermissionKey(def, 'plan')).toBe(def.key);
+      });
+
+      it('should fallback to key if businessKey not defined', () => {
+        const def = { ...PERMISSION_DEFINITIONS[0], businessKey: undefined };
+        expect(getPermissionKey(def, 'business')).toBe(def.key);
+      });
+    });
+
+    describe('convertPermissions', () => {
+      it('should convert from plan mode to business mode', () => {
+        const planValues = {
+          can_accept_payments: true,
+          sms_reminders: true,
+        };
+
+        const businessValues = convertPermissions(planValues, 'plan', 'business');
+
+        expect(businessValues.can_accept_payments).toBe(true);
+        expect(businessValues.can_use_sms_reminders).toBe(true);
+      });
+
+      it('should convert from business mode to plan mode', () => {
+        const businessValues = {
+          can_accept_payments: true,
+          can_use_sms_reminders: true,
+        };
+
+        const planValues = convertPermissions(businessValues, 'business', 'plan');
+
+        expect(planValues.can_accept_payments).toBe(true);
+        expect(planValues.sms_reminders).toBe(true);
+      });
+
+      it('should handle empty values', () => {
+        const result = convertPermissions({}, 'plan', 'business');
+        expect(result).toEqual({});
+      });
+
+      it('should only convert known permissions', () => {
+        const planValues = {
+          can_accept_payments: true,
+          unknown_permission: true,
+        };
+
+        const businessValues = convertPermissions(planValues, 'plan', 'business');
+
+        expect(businessValues.can_accept_payments).toBe(true);
+        expect(businessValues.unknown_permission).toBeUndefined();
+      });
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('should use semantic heading for main header', () => {
+      const { container } = render(
+        <FeaturesPermissionsEditor
+          mode="plan"
+          values={{}}
+          onChange={mockOnChange}
+        />
+      );
+
+      const mainHeading = container.querySelector('h3');
+      expect(mainHeading).toHaveTextContent('Features & Permissions');
+    });
+
+    it('should use semantic heading for category labels', () => {
+      const { container } = render(
+        <FeaturesPermissionsEditor
+          mode="plan"
+          values={{}}
+          onChange={mockOnChange}
+        />
+      );
+
+      const categoryHeadings = container.querySelectorAll('h4');
+      expect(categoryHeadings.length).toBeGreaterThan(0);
+    });
+
+    it('should have proper label association for checkboxes', () => {
+      render(
+        <FeaturesPermissionsEditor
+          mode="plan"
+          values={{}}
+          onChange={mockOnChange}
+        />
+      );
+
+      const checkbox = screen.getByRole('checkbox', { name: /Online Payments/i });
+      expect(checkbox).toBeInTheDocument();
+    });
+
+    it('should have disabled state for dependent checkboxes', () => {
+      render(
+        <FeaturesPermissionsEditor
+          mode="plan"
+          values={{ can_use_plugins: false }}
+          onChange={mockOnChange}
+          categories={['plugins']}
+        />
+      );
+
+      const tasksCheckbox = screen.getByRole('checkbox', { name: /Scheduled Tasks/i });
+      expect(tasksCheckbox).toBeDisabled();
+      expect(tasksCheckbox.closest('label')).toHaveClass('opacity-50', 'cursor-not-allowed');
+    });
+  });
+
+  describe('Dark Mode Support', () => {
+    it('should include dark mode classes for header', () => {
+      render(
+        <FeaturesPermissionsEditor
+          mode="plan"
+          values={{}}
+          onChange={mockOnChange}
+        />
+      );
+
+      const header = screen.getByText('Features & Permissions');
+      expect(header).toHaveClass('dark:text-white');
+    });
+
+    it('should include dark mode classes for descriptions', () => {
+      const { container } = render(
+        <FeaturesPermissionsEditor
+          mode="plan"
+          values={{}}
+          onChange={mockOnChange}
+        />
+      );
+
+      const description = container.querySelector('.text-xs.text-gray-500');
+      expect(description).toHaveClass('dark:text-gray-400');
+    });
+
+    it('should include dark mode classes for checkboxes', () => {
+      const { container } = render(
+        <FeaturesPermissionsEditor
+          mode="plan"
+          values={{}}
+          onChange={mockOnChange}
+          categories={['payments']}
+        />
+      );
+
+      const labels = container.querySelectorAll('label');
+      labels.forEach(label => {
+        expect(label).toHaveClass('dark:border-gray-700');
+      });
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('should handle empty categories array', () => {
+      render(
+        <FeaturesPermissionsEditor
+          mode="plan"
+          values={{}}
+          onChange={mockOnChange}
+          categories={[]}
+        />
+      );
+
+      expect(screen.getByText('Features & Permissions')).toBeInTheDocument();
+      // No permissions should be shown
+      const checkboxes = screen.queryAllByRole('checkbox');
+      expect(checkboxes).toHaveLength(0);
+    });
+
+    it('should handle undefined values for permissions', () => {
+      render(
+        <FeaturesPermissionsEditor
+          mode="plan"
+          values={{}}
+          onChange={mockOnChange}
+          categories={['payments']}
+        />
+      );
+
+      const checkbox = screen.getByRole('checkbox', { name: /Online Payments/i });
+      expect(checkbox).not.toBeChecked();
+    });
+
+    it('should toggle permission from undefined to true', async () => {
+      const user = userEvent.setup();
+
+      render(
+        <FeaturesPermissionsEditor
+          mode="plan"
+          values={{}}
+          onChange={mockOnChange}
+          categories={['payments']}
+        />
+      );
+
+      const checkbox = screen.getByRole('checkbox', { name: /Online Payments/i });
+      await user.click(checkbox);
+
+      expect(mockOnChange).toHaveBeenCalledWith('can_accept_payments', true);
+    });
+  });
+
+  describe('Hover States', () => {
+    it('should have hover classes on enabled checkboxes', () => {
+      const { container } = render(
+        <FeaturesPermissionsEditor
+          mode="plan"
+          values={{}}
+          onChange={mockOnChange}
+          categories={['payments']}
+        />
+      );
+
+      const labels = container.querySelectorAll('label');
+      labels.forEach(label => {
+        if (!label.classList.contains('cursor-not-allowed')) {
+          expect(label).toHaveClass('hover:bg-gray-50');
+          expect(label).toHaveClass('dark:hover:bg-gray-700/50');
+          expect(label).toHaveClass('cursor-pointer');
+        }
+      });
+    });
+
+    it('should not have hover classes on disabled checkboxes', () => {
+      const { container } = render(
+        <FeaturesPermissionsEditor
+          mode="plan"
+          values={{ can_use_plugins: false }}
+          onChange={mockOnChange}
+          categories={['plugins']}
+        />
+      );
+
+      const tasksCheckbox = screen.getByRole('checkbox', { name: /Scheduled Tasks/i });
+      const label = tasksCheckbox.closest('label');
+
+      expect(label).toHaveClass('cursor-not-allowed');
+      expect(label).not.toHaveClass('cursor-pointer');
+    });
+  });
+});

frontend/src/components/profile/__tests__/TwoFactorSetup.test.tsx

@@ -1,34 +1,77 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest';
+/**
+ * Unit tests for TwoFactorSetup component
+ *
+ * Tests the two-factor authentication setup and management wizard.
+ * Covers:
+ * - Initial rendering for enabled/disabled states
+ * - Step navigation (intro -> qrcode -> verify -> recovery -> complete)
+ * - QR code display and manual secret entry
+ * - Verification code input and submission
+ * - Recovery code display and download
+ * - Disable 2FA flow
+ * - Phone verification prompts
+ * - Error handling
+ * - User interactions (clicks, form inputs, copy, download)
+ */
+
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
 import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import React from 'react';
 import TwoFactorSetup from '../TwoFactorSetup';
 
+// Mock hooks with mutable state
+const mockSetupTOTP = vi.fn();
+const mockVerifyTOTP = vi.fn();
+const mockDisableTOTP = vi.fn();
+const mockRecoveryCodesRefetch = vi.fn();
+const mockRegenerateCodes = vi.fn();
+
+let mockSetupTOTPData: any = null;
+let mockSetupTOTPPending = false;
+let mockVerifyTOTPData: any = null;
+let mockVerifyTOTPPending = false;
+let mockDisableTOTPPending = false;
+let mockRecoveryCodesData: any = null;
+let mockRecoveryCodesFetching = false;
+let mockRegenerateCodesPending = false;
+
 vi.mock('../../../hooks/useProfile', () => ({
   useSetupTOTP: () => ({
-    mutateAsync: vi.fn().mockResolvedValue({ qr_code: 'base64qr', secret: 'ABCD1234' }),
+    mutateAsync: mockSetupTOTP,
-    data: null,
+    get data() { return mockSetupTOTPData; },
-    isPending: false,
+    get isPending() { return mockSetupTOTPPending; },
   }),
   useVerifyTOTP: () => ({
-    mutateAsync: vi.fn().mockResolvedValue({ recovery_codes: ['code1', 'code2'] }),
+    mutateAsync: mockVerifyTOTP,
-    data: null,
+    get data() { return mockVerifyTOTPData; },
-    isPending: false,
+    get isPending() { return mockVerifyTOTPPending; },
   }),
   useDisableTOTP: () => ({
-    mutateAsync: vi.fn().mockResolvedValue({}),
+    mutateAsync: mockDisableTOTP,
-    isPending: false,
+    get isPending() { return mockDisableTOTPPending; },
   }),
   useRecoveryCodes: () => ({
-    refetch: vi.fn().mockResolvedValue({ data: ['code1', 'code2'] }),
+    refetch: mockRecoveryCodesRefetch,
-    data: ['code1', 'code2'],
+    get data() { return mockRecoveryCodesData; },
-    isFetching: false,
+    get isFetching() { return mockRecoveryCodesFetching; },
   }),
   useRegenerateRecoveryCodes: () => ({
-    mutateAsync: vi.fn().mockResolvedValue({}),
+    mutateAsync: mockRegenerateCodes,
-    isPending: false,
+    get isPending() { return mockRegenerateCodesPending; },
   }),
 }));
 
+// Mock clipboard API
+Object.assign(navigator, {
+  clipboard: {
+    writeText: vi.fn(),
+  },
+});
+
+// Mock URL.createObjectURL and URL.revokeObjectURL
+global.URL.createObjectURL = vi.fn(() => 'mock-url');
+global.URL.revokeObjectURL = vi.fn();
+
 const defaultProps = {
   isEnabled: false,
   phoneVerified: false,
@@ -41,9 +84,25 @@ const defaultProps = {
 describe('TwoFactorSetup', () => {
   beforeEach(() => {
     vi.clearAllMocks();
+    vi.useFakeTimers();
+
+    // Reset mock state
+    mockSetupTOTPData = null;
+    mockSetupTOTPPending = false;
+    mockVerifyTOTPData = null;
+    mockVerifyTOTPPending = false;
+    mockDisableTOTPPending = false;
+    mockRecoveryCodesData = null;
+    mockRecoveryCodesFetching = false;
+    mockRegenerateCodesPending = false;
   });
 
-  it('renders modal with title when not enabled', () => {
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  describe('Initial Rendering', () => {
+    it('renders modal with setup title when not enabled', () => {
       render(React.createElement(TwoFactorSetup, defaultProps));
       expect(screen.getByText('Set Up Two-Factor Authentication')).toBeInTheDocument();
     });
@@ -69,12 +128,26 @@ describe('TwoFactorSetup', () => {
       expect(mockOnClose).toHaveBeenCalled();
     });
 
-  it('renders intro step content', () => {
+    it('shows Shield icon in header', () => {
+      render(React.createElement(TwoFactorSetup, defaultProps));
+      const shieldIcon = document.querySelector('.lucide-shield');
+      expect(shieldIcon).toBeInTheDocument();
+    });
+  });
+
+  describe('Intro Step', () => {
+    it('renders intro step content by default', () => {
       render(React.createElement(TwoFactorSetup, defaultProps));
       expect(screen.getByText('Secure Your Account')).toBeInTheDocument();
       expect(screen.getByText(/Two-factor authentication adds an extra layer of security/)).toBeInTheDocument();
     });
 
+    it('renders smartphone icon in intro', () => {
+      render(React.createElement(TwoFactorSetup, defaultProps));
+      const smartphoneIcon = document.querySelector('.lucide-smartphone');
+      expect(smartphoneIcon).toBeInTheDocument();
+    });
+
     it('renders Get Started button', () => {
       render(React.createElement(TwoFactorSetup, defaultProps));
       expect(screen.getByText('Get Started')).toBeInTheDocument();
@@ -88,42 +161,641 @@ describe('TwoFactorSetup', () => {
     it('shows SMS Backup Available when phone is verified', () => {
       render(React.createElement(TwoFactorSetup, { ...defaultProps, phoneVerified: true }));
       expect(screen.getByText('SMS Backup Available')).toBeInTheDocument();
+      expect(screen.getByText('Your verified phone can be used as a backup method.')).toBeInTheDocument();
     });
 
-  it('shows phone verification prompt when has phone but not verified', () => {
+    it('shows verify phone prompt when has phone but not verified', () => {
       render(React.createElement(TwoFactorSetup, { ...defaultProps, hasPhone: true }));
       expect(screen.getByText('Verify your phone number now')).toBeInTheDocument();
     });
 
+    it('calls onVerifyPhone when verify link clicked', () => {
+      const mockOnVerifyPhone = vi.fn();
+      const mockOnClose = vi.fn();
+      render(React.createElement(TwoFactorSetup, {
+        ...defaultProps,
+        hasPhone: true,
+        onVerifyPhone: mockOnVerifyPhone,
+        onClose: mockOnClose
+      }));
+
+      const verifyLink = screen.getByText('Verify your phone number now');
+      fireEvent.click(verifyLink);
+
+      expect(mockOnClose).toHaveBeenCalled();
+      expect(mockOnVerifyPhone).toHaveBeenCalled();
+    });
+
     it('shows add phone prompt when no phone', () => {
       render(React.createElement(TwoFactorSetup, defaultProps));
       expect(screen.getByText('Go to profile settings to add a phone number')).toBeInTheDocument();
     });
 
-  it('renders View Recovery Codes option when enabled', () => {
+    it('calls onClose when add phone link clicked', () => {
-    render(React.createElement(TwoFactorSetup, { ...defaultProps, isEnabled: true }));
+      const mockOnClose = vi.fn();
-    expect(screen.getByText('View Recovery Codes')).toBeInTheDocument();
+      render(React.createElement(TwoFactorSetup, { ...defaultProps, onClose: mockOnClose }));
+
+      const addPhoneLink = screen.getByText('Go to profile settings to add a phone number');
+      fireEvent.click(addPhoneLink);
+
+      expect(mockOnClose).toHaveBeenCalled();
     });
 
-  it('renders disable 2FA option when enabled', () => {
+    it('starts setup when Get Started button clicked', async () => {
+      mockSetupTOTP.mockResolvedValue({ qr_code: 'base64qr', secret: 'ABCD1234' });
+
+      render(React.createElement(TwoFactorSetup, defaultProps));
+
+      const getStartedButton = screen.getByText('Get Started');
+      fireEvent.click(getStartedButton);
+
+      await waitFor(() => {
+        expect(mockSetupTOTP).toHaveBeenCalled();
+      });
+    });
+
+    it('shows error when setup fails', async () => {
+      mockSetupTOTP.mockRejectedValue({
+        response: { data: { detail: 'Setup failed' } }
+      });
+
+      render(React.createElement(TwoFactorSetup, defaultProps));
+
+      const getStartedButton = screen.getByText('Get Started');
+      fireEvent.click(getStartedButton);
+
+      await waitFor(() => {
+        expect(screen.getByText('Setup failed')).toBeInTheDocument();
+      });
+    });
+
+    it('shows generic error when setup fails without detail', async () => {
+      mockSetupTOTP.mockRejectedValue(new Error('Network error'));
+
+      render(React.createElement(TwoFactorSetup, defaultProps));
+
+      const getStartedButton = screen.getByText('Get Started');
+      fireEvent.click(getStartedButton);
+
+      await waitFor(() => {
+        expect(screen.getByText('Failed to start 2FA setup')).toBeInTheDocument();
+      });
+    });
+
+    it('shows Setting up... text when setup is pending', () => {
+      mockSetupTOTPPending = true;
+
+      render(React.createElement(TwoFactorSetup, defaultProps));
+
+      expect(screen.getByText('Setting up...')).toBeInTheDocument();
+    });
+  });
+
+  describe('QR Code Step', () => {
+    beforeEach(() => {
+      mockSetupTOTPData = { qr_code: 'base64qr', secret: 'ABCD1234' };
+    });
+
+    it('displays QR code when data is available', () => {
+      render(React.createElement(TwoFactorSetup, defaultProps));
+
+      const qrImage = screen.queryByAltText('2FA QR Code');
+      if (qrImage) {
+        expect(qrImage).toHaveAttribute('src', 'data:image/png;base64,base64qr');
+      }
+    });
+
+    it('displays manual secret code', () => {
+      render(React.createElement(TwoFactorSetup, defaultProps));
+      expect(screen.getByText('ABCD1234')).toBeInTheDocument();
+    });
+
+    it('copies secret to clipboard when copy button clicked', async () => {
+      render(React.createElement(TwoFactorSetup, defaultProps));
+
+      const copyButton = document.querySelector('.lucide-copy')?.parentElement;
+      if (copyButton) {
+        fireEvent.click(copyButton);
+
+        expect(navigator.clipboard.writeText).toHaveBeenCalledWith('ABCD1234');
+
+        // Check icon changes to checkmark
+        await waitFor(() => {
+          const checkIcon = document.querySelector('.lucide-check');
+          expect(checkIcon).toBeInTheDocument();
+        });
+
+        // Icon reverts after timeout
+        vi.advanceTimersByTime(2000);
+        await waitFor(() => {
+          const copyIcon = document.querySelector('.lucide-copy');
+          expect(copyIcon).toBeTruthy();
+        });
+      }
+    });
+
+    it('navigates to verify step when Continue clicked', () => {
+      render(React.createElement(TwoFactorSetup, defaultProps));
+
+      const continueButton = screen.getByText('Continue');
+      fireEvent.click(continueButton);
+
+      expect(screen.getByText('Enter the 6-digit code from your authenticator app')).toBeInTheDocument();
+    });
+  });
+
+  describe('Verify Step', () => {
+    beforeEach(() => {
+      mockSetupTOTPData = { qr_code: 'base64qr', secret: 'ABCD1234' };
+    });
+
+    it('renders verification code input', () => {
+      render(React.createElement(TwoFactorSetup, defaultProps));
+
+      // Navigate to verify step
+      fireEvent.click(screen.getByText('Continue'));
+
+      const input = screen.getByPlaceholderText('000000');
+      expect(input).toBeInTheDocument();
+      expect(input).toHaveClass('text-center');
+    });
+
+    it('filters non-numeric input', () => {
+      render(React.createElement(TwoFactorSetup, defaultProps));
+
+      fireEvent.click(screen.getByText('Continue'));
+
+      const input = screen.getByPlaceholderText('000000') as HTMLInputElement;
+      fireEvent.change(input, { target: { value: 'abc123def' } });
+
+      expect(input.value).toBe('123');
+    });
+
+    it('limits input to 6 digits', () => {
+      render(React.createElement(TwoFactorSetup, defaultProps));
+
+      fireEvent.click(screen.getByText('Continue'));
+
+      const input = screen.getByPlaceholderText('000000') as HTMLInputElement;
+      fireEvent.change(input, { target: { value: '1234567890' } });
+
+      expect(input.value).toBe('123456');
+    });
+
+    it('disables verify button when code is incomplete', () => {
+      render(React.createElement(TwoFactorSetup, defaultProps));
+
+      fireEvent.click(screen.getByText('Continue'));
+
+      const input = screen.getByPlaceholderText('000000');
+      fireEvent.change(input, { target: { value: '12345' } });
+
+      const verifyButton = screen.getByRole('button', { name: /verify/i });
+      expect(verifyButton).toBeDisabled();
+    });
+
+    it('enables verify button when code is 6 digits', () => {
+      render(React.createElement(TwoFactorSetup, defaultProps));
+
+      fireEvent.click(screen.getByText('Continue'));
+
+      const input = screen.getByPlaceholderText('000000');
+      fireEvent.change(input, { target: { value: '123456' } });
+
+      const verifyButton = screen.getByRole('button', { name: /verify/i });
+      expect(verifyButton).not.toBeDisabled();
+    });
+
+    it('verifies code successfully', async () => {
+      mockVerifyTOTP.mockResolvedValue({ recovery_codes: ['CODE1', 'CODE2', 'CODE3', 'CODE4', 'CODE5', 'CODE6'] });
+
+      render(React.createElement(TwoFactorSetup, defaultProps));
+
+      fireEvent.click(screen.getByText('Continue'));
+
+      const input = screen.getByPlaceholderText('000000');
+      fireEvent.change(input, { target: { value: '123456' } });
+
+      const verifyButton = screen.getByRole('button', { name: /verify/i });
+      fireEvent.click(verifyButton);
+
+      await waitFor(() => {
+        expect(mockVerifyTOTP).toHaveBeenCalledWith('123456');
+      });
+    });
+
+    it('shows error when verification fails', async () => {
+      mockVerifyTOTP.mockRejectedValue({
+        response: { data: { detail: 'Invalid code' } }
+      });
+
+      render(React.createElement(TwoFactorSetup, defaultProps));
+
+      fireEvent.click(screen.getByText('Continue'));
+
+      const input = screen.getByPlaceholderText('000000');
+      fireEvent.change(input, { target: { value: '123456' } });
+
+      const verifyButton = screen.getByRole('button', { name: /verify/i });
+      fireEvent.click(verifyButton);
+
+      await waitFor(() => {
+        expect(screen.getByText('Invalid code')).toBeInTheDocument();
+      });
+    });
+
+    it('shows generic error when verification fails without detail', async () => {
+      mockVerifyTOTP.mockRejectedValue(new Error('Network error'));
+
+      render(React.createElement(TwoFactorSetup, defaultProps));
+
+      fireEvent.click(screen.getByText('Continue'));
+
+      const input = screen.getByPlaceholderText('000000');
+      fireEvent.change(input, { target: { value: '123456' } });
+
+      const verifyButton = screen.getByRole('button', { name: /verify/i });
+      fireEvent.click(verifyButton);
+
+      await waitFor(() => {
+        expect(screen.getByText('Invalid verification code')).toBeInTheDocument();
+      });
+    });
+
+    it('navigates back to QR code step when Back clicked', () => {
+      render(React.createElement(TwoFactorSetup, defaultProps));
+
+      fireEvent.click(screen.getByText('Continue'));
+
+      const backButton = screen.getByRole('button', { name: /back/i });
+      fireEvent.click(backButton);
+
+      expect(screen.getByText('Scan this QR code with your authenticator app')).toBeInTheDocument();
+    });
+
+    it('shows Verifying... text when verification is pending', () => {
+      mockVerifyTOTPPending = true;
+
+      render(React.createElement(TwoFactorSetup, defaultProps));
+
+      fireEvent.click(screen.getByText('Continue'));
+
+      expect(screen.getByText('Verifying...')).toBeInTheDocument();
+    });
+  });
+
+  describe('Recovery Codes Step', () => {
+    beforeEach(() => {
+      mockSetupTOTPData = { qr_code: 'base64qr', secret: 'ABCD1234' };
+      mockVerifyTOTPData = { recovery_codes: ['CODE1', 'CODE2', 'CODE3', 'CODE4', 'CODE5', 'CODE6'] };
+    });
+
+    it('displays recovery codes after verification', () => {
+      render(React.createElement(TwoFactorSetup, defaultProps));
+
+      expect(screen.getByText('CODE1')).toBeInTheDocument();
+      expect(screen.getByText('CODE2')).toBeInTheDocument();
+      expect(screen.getByText('CODE3')).toBeInTheDocument();
+    });
+
+    it('shows success message', () => {
+      render(React.createElement(TwoFactorSetup, defaultProps));
+
+      expect(screen.getByText('2FA Enabled Successfully!')).toBeInTheDocument();
+      expect(screen.getByText('Save these recovery codes in a safe place')).toBeInTheDocument();
+    });
+
+    it('shows warning about recovery codes', () => {
+      render(React.createElement(TwoFactorSetup, defaultProps));
+
+      expect(screen.getByText(/Each code can only be used once/)).toBeInTheDocument();
+    });
+
+    it('copies recovery codes to clipboard', async () => {
+      render(React.createElement(TwoFactorSetup, defaultProps));
+
+      const copyButton = screen.getByRole('button', { name: /copy/i });
+      fireEvent.click(copyButton);
+
+      expect(navigator.clipboard.writeText).toHaveBeenCalledWith('CODE1\nCODE2\nCODE3\nCODE4\nCODE5\nCODE6');
+
+      // Check button text changes
+      await waitFor(() => {
+        expect(screen.getByText('Copied!')).toBeInTheDocument();
+      });
+
+      // Reverts after timeout
+      vi.advanceTimersByTime(2000);
+      await waitFor(() => {
+        expect(screen.getByText('Copy')).toBeInTheDocument();
+      });
+    });
+
+    it('downloads recovery codes', () => {
+      render(React.createElement(TwoFactorSetup, defaultProps));
+
+      const downloadButton = screen.getByRole('button', { name: /download/i });
+      fireEvent.click(downloadButton);
+
+      // Check that blob and download were triggered
+      expect(global.URL.createObjectURL).toHaveBeenCalled();
+      expect(global.URL.revokeObjectURL).toHaveBeenCalled();
+    });
+
+    it('calls onSuccess and onClose when Done clicked', () => {
+      const mockOnSuccess = vi.fn();
+      const mockOnClose = vi.fn();
+
+      render(React.createElement(TwoFactorSetup, {
+        ...defaultProps,
+        onSuccess: mockOnSuccess,
+        onClose: mockOnClose
+      }));
+
+      const doneButton = screen.getByRole('button', { name: /done/i });
+      fireEvent.click(doneButton);
+
+      expect(mockOnSuccess).toHaveBeenCalled();
+      expect(mockOnClose).toHaveBeenCalled();
+    });
+  });
+
+  describe('Disable 2FA Flow', () => {
+    it('shows disable options when 2FA is enabled', () => {
       render(React.createElement(TwoFactorSetup, { ...defaultProps, isEnabled: true }));
+
+      expect(screen.getByText('View Recovery Codes')).toBeInTheDocument();
       expect(screen.getByText('Disable Two-Factor Authentication')).toBeInTheDocument();
     });
 
-  it('renders disable code input when enabled', () => {
+    it('renders disable code input', () => {
       render(React.createElement(TwoFactorSetup, { ...defaultProps, isEnabled: true }));
-    expect(screen.getByPlaceholderText('000000')).toBeInTheDocument();
+
+      const input = screen.getByPlaceholderText('000000');
+      expect(input).toBeInTheDocument();
     });
 
-  it('shows Shield icon in header', () => {
+    it('filters non-numeric input in disable code', () => {
-    render(React.createElement(TwoFactorSetup, defaultProps));
+      render(React.createElement(TwoFactorSetup, { ...defaultProps, isEnabled: true }));
-    const shieldIcon = document.querySelector('.lucide-shield');
+
-    expect(shieldIcon).toBeInTheDocument();
+      const input = screen.getByPlaceholderText('000000') as HTMLInputElement;
+      fireEvent.change(input, { target: { value: 'abc123def' } });
+
+      expect(input.value).toBe('123');
+    });
+
+    it('limits disable code to 6 digits', () => {
+      render(React.createElement(TwoFactorSetup, { ...defaultProps, isEnabled: true }));
+
+      const input = screen.getByPlaceholderText('000000') as HTMLInputElement;
+      fireEvent.change(input, { target: { value: '1234567890' } });
+
+      expect(input.value).toBe('123456');
+    });
+
+    it('disables button when code is incomplete', () => {
+      render(React.createElement(TwoFactorSetup, { ...defaultProps, isEnabled: true }));
+
+      const input = screen.getByPlaceholderText('000000');
+      fireEvent.change(input, { target: { value: '12345' } });
+
+      const disableButton = screen.getByText('Disable Two-Factor Authentication');
+      expect(disableButton).toBeDisabled();
+    });
+
+    it('disables 2FA successfully', async () => {
+      mockDisableTOTP.mockResolvedValue({});
+
+      const mockOnSuccess = vi.fn();
+      const mockOnClose = vi.fn();
+
+      render(React.createElement(TwoFactorSetup, {
+        ...defaultProps,
+        isEnabled: true,
+        onSuccess: mockOnSuccess,
+        onClose: mockOnClose
+      }));
+
+      const input = screen.getByPlaceholderText('000000');
+      fireEvent.change(input, { target: { value: '123456' } });
+
+      const disableButton = screen.getByText('Disable Two-Factor Authentication');
+      fireEvent.click(disableButton);
+
+      await waitFor(() => {
+        expect(mockDisableTOTP).toHaveBeenCalledWith('123456');
+        expect(mockOnSuccess).toHaveBeenCalled();
+        expect(mockOnClose).toHaveBeenCalled();
+      });
+    });
+
+    it('shows error when disable fails', async () => {
+      mockDisableTOTP.mockRejectedValue({
+        response: { data: { detail: 'Invalid code' } }
+      });
+
+      render(React.createElement(TwoFactorSetup, { ...defaultProps, isEnabled: true }));
+
+      const input = screen.getByPlaceholderText('000000');
+      fireEvent.change(input, { target: { value: '123456' } });
+
+      const disableButton = screen.getByText('Disable Two-Factor Authentication');
+      fireEvent.click(disableButton);
+
+      await waitFor(() => {
+        expect(screen.getByText('Invalid code')).toBeInTheDocument();
+      });
+    });
+
+    it('shows generic error when disable fails without detail', async () => {
+      mockDisableTOTP.mockRejectedValue(new Error('Network error'));
+
+      render(React.createElement(TwoFactorSetup, { ...defaultProps, isEnabled: true }));
+
+      const input = screen.getByPlaceholderText('000000');
+      fireEvent.change(input, { target: { value: '123456' } });
+
+      const disableButton = screen.getByText('Disable Two-Factor Authentication');
+      fireEvent.click(disableButton);
+
+      await waitFor(() => {
+        expect(screen.getByText('Invalid code')).toBeInTheDocument();
+      });
+    });
+
+    it('shows Disabling... text when disable is pending', () => {
+      mockDisableTOTPPending = true;
+
+      render(React.createElement(TwoFactorSetup, { ...defaultProps, isEnabled: true }));
+
+      expect(screen.getByText('Disabling...')).toBeInTheDocument();
+    });
+  });
+
+  describe('View Recovery Codes Flow', () => {
+    it('loads recovery codes when View Recovery Codes clicked', async () => {
+      mockRecoveryCodesRefetch.mockResolvedValue({
+        data: ['REC1', 'REC2', 'REC3', 'REC4', 'REC5', 'REC6']
+      });
+
+      render(React.createElement(TwoFactorSetup, { ...defaultProps, isEnabled: true }));
+
+      const viewButton = screen.getByText('View Recovery Codes');
+      fireEvent.click(viewButton);
+
+      await waitFor(() => {
+        expect(mockRecoveryCodesRefetch).toHaveBeenCalled();
+      });
+    });
+
+    it('shows error when loading recovery codes fails', async () => {
+      mockRecoveryCodesRefetch.mockRejectedValue({
+        response: { data: { detail: 'Failed to load' } }
+      });
+
+      render(React.createElement(TwoFactorSetup, { ...defaultProps, isEnabled: true }));
+
+      const viewButton = screen.getByText('View Recovery Codes');
+      fireEvent.click(viewButton);
+
+      await waitFor(() => {
+        expect(screen.getByText('Failed to load')).toBeInTheDocument();
+      });
+    });
+
+    it('shows generic error when loading fails without detail', async () => {
+      mockRecoveryCodesRefetch.mockRejectedValue(new Error('Network error'));
+
+      render(React.createElement(TwoFactorSetup, { ...defaultProps, isEnabled: true }));
+
+      const viewButton = screen.getByText('View Recovery Codes');
+      fireEvent.click(viewButton);
+
+      await waitFor(() => {
+        expect(screen.getByText('Failed to load recovery codes')).toBeInTheDocument();
+      });
+    });
+
+    it('displays recovery codes after loading', () => {
+      mockRecoveryCodesData = ['REC1', 'REC2', 'REC3', 'REC4'];
+
+      render(React.createElement(TwoFactorSetup, { ...defaultProps, isEnabled: true }));
+
+      expect(screen.getByText('REC1')).toBeInTheDocument();
+      expect(screen.getByText('REC2')).toBeInTheDocument();
+    });
+
+    it('navigates back to disable step', () => {
+      mockRecoveryCodesData = ['REC1', 'REC2'];
+
+      render(React.createElement(TwoFactorSetup, { ...defaultProps, isEnabled: true }));
+
+      const backButton = screen.getByText('← Back');
+      fireEvent.click(backButton);
+
+      expect(screen.getByText('Disable Two-Factor Authentication')).toBeInTheDocument();
+    });
+
+    it('copies recovery codes from view', async () => {
+      mockRecoveryCodesData = ['REC1', 'REC2'];
+
+      render(React.createElement(TwoFactorSetup, { ...defaultProps, isEnabled: true }));
+
+      const copyButton = screen.getByRole('button', { name: /copy/i });
+      fireEvent.click(copyButton);
+
+      expect(navigator.clipboard.writeText).toHaveBeenCalledWith('REC1\nREC2');
+    });
+
+    it('downloads recovery codes from view', () => {
+      mockRecoveryCodesData = ['REC1', 'REC2'];
+
+      render(React.createElement(TwoFactorSetup, { ...defaultProps, isEnabled: true }));
+
+      const downloadButton = screen.getByRole('button', { name: /download/i });
+      fireEvent.click(downloadButton);
+
+      expect(global.URL.createObjectURL).toHaveBeenCalled();
+    });
+
+    it('regenerates recovery codes', async () => {
+      mockRegenerateCodes.mockResolvedValue(['NEW1', 'NEW2']);
+      mockRecoveryCodesData = ['REC1', 'REC2'];
+
+      render(React.createElement(TwoFactorSetup, { ...defaultProps, isEnabled: true }));
+
+      const regenerateButton = screen.getByText('Regenerate Recovery Codes');
+      fireEvent.click(regenerateButton);
+
+      await waitFor(() => {
+        expect(mockRegenerateCodes).toHaveBeenCalled();
+      });
+    });
+
+    it('shows error when regenerate fails', async () => {
+      mockRegenerateCodes.mockRejectedValue({
+        response: { data: { detail: 'Regenerate failed' } }
+      });
+      mockRecoveryCodesData = ['REC1', 'REC2'];
+
+      render(React.createElement(TwoFactorSetup, { ...defaultProps, isEnabled: true }));
+
+      const regenerateButton = screen.getByText('Regenerate Recovery Codes');
+      fireEvent.click(regenerateButton);
+
+      await waitFor(() => {
+        expect(screen.getByText('Regenerate failed')).toBeInTheDocument();
+      });
+    });
+
+    it('shows generic error when regenerate fails without detail', async () => {
+      mockRegenerateCodes.mockRejectedValue(new Error('Network error'));
+      mockRecoveryCodesData = ['REC1', 'REC2'];
+
+      render(React.createElement(TwoFactorSetup, { ...defaultProps, isEnabled: true }));
+
+      const regenerateButton = screen.getByText('Regenerate Recovery Codes');
+      fireEvent.click(regenerateButton);
+
+      await waitFor(() => {
+        expect(screen.getByText('Failed to regenerate codes')).toBeInTheDocument();
+      });
+    });
+
+    it('shows Loading... text when fetching recovery codes', () => {
+      mockRecoveryCodesFetching = true;
+
+      render(React.createElement(TwoFactorSetup, { ...defaultProps, isEnabled: true }));
+
+      expect(screen.getByText('Loading...')).toBeInTheDocument();
+    });
+
+    it('shows Regenerating... text when regenerating codes', () => {
+      mockRecoveryCodesData = ['REC1', 'REC2'];
+      mockRegenerateCodesPending = true;
+
+      render(React.createElement(TwoFactorSetup, { ...defaultProps, isEnabled: true }));
+
+      expect(screen.getByText('Regenerating...')).toBeInTheDocument();
+    });
+  });
+
+  describe('Error Display', () => {
+    it('shows error with alert icon', async () => {
+      mockSetupTOTP.mockRejectedValue({
+        response: { data: { detail: 'Test error' } }
       });
 
-  it('renders smartphone icon in intro', () => {
       render(React.createElement(TwoFactorSetup, defaultProps));
-    const smartphoneIcon = document.querySelector('.lucide-smartphone');
+
-    expect(smartphoneIcon).toBeInTheDocument();
+      const getStartedButton = screen.getByText('Get Started');
+      fireEvent.click(getStartedButton);
+
+      await waitFor(() => {
+        expect(screen.getByText('Test error')).toBeInTheDocument();
+        const alertIcon = document.querySelector('.lucide-alert-triangle');
+        expect(alertIcon).toBeInTheDocument();
+      });
+    });
   });
 });

frontend/src/components/services/__tests__/CustomerPreview.test.tsx

@@ -0,0 +1,314 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { CustomerPreview } from '../CustomerPreview';
+import { Service, Business } from '../../../types';
+
+// Mock dependencies
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({ t: (key: string) => key }),
+}));
+
+// Mock Lucide icons
+vi.mock('lucide-react', () => ({
+  Clock: () => <span data-testid="icon-clock" />,
+  DollarSign: () => <span data-testid="icon-dollar-sign" />,
+  Image: () => <span data-testid="icon-image" />,
+  CheckCircle2: () => <span data-testid="icon-check-circle" />,
+  AlertCircle: () => <span data-testid="icon-alert-circle" />,
+}));
+
+// Mock Badge component
+vi.mock('../../ui/Badge', () => ({
+  default: ({ children, variant, size }: any) =>
+    <span data-testid={`badge-${variant}`} data-size={size}>{children}</span>,
+}));
+
+describe('CustomerPreview', () => {
+  const mockBusiness: Business = {
+    id: 'business-1',
+    name: 'Test Business',
+    primaryColor: '#2563eb',
+    secondaryColor: '#0ea5e9',
+  } as Business;
+
+  const mockService: Service = {
+    id: '1',
+    name: 'Haircut',
+    description: 'Professional haircut service',
+    price: 50,
+    durationMinutes: 60,
+    photos: [],
+    category: { id: 'cat1', name: 'Hair Services' },
+    variable_pricing: false,
+  } as Service;
+
+  const mockServiceWithPhoto: Service = {
+    ...mockService,
+    photos: ['https://example.com/photo.jpg'],
+  };
+
+  const mockServiceWithDeposit: Service = {
+    ...mockService,
+    deposit_amount: 10,
+  };
+
+  const mockServiceVariablePricing: Service = {
+    ...mockService,
+    variable_pricing: true,
+    deposit_amount: 25,
+  };
+
+  const defaultProps = {
+    service: mockService,
+    business: mockBusiness,
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('renders customer preview heading', () => {
+    render(React.createElement(CustomerPreview, defaultProps));
+    expect(screen.getByText('Customer Preview')).toBeInTheDocument();
+  });
+
+  it('shows live preview badge', () => {
+    render(React.createElement(CustomerPreview, defaultProps));
+    expect(screen.getByTestId('badge-info')).toBeInTheDocument();
+    expect(screen.getByText('Live Preview')).toBeInTheDocument();
+  });
+
+  it('displays service name', () => {
+    render(React.createElement(CustomerPreview, defaultProps));
+    expect(screen.getByText('Haircut')).toBeInTheDocument();
+  });
+
+  it('displays service description', () => {
+    render(React.createElement(CustomerPreview, defaultProps));
+    expect(screen.getByText('Professional haircut service')).toBeInTheDocument();
+  });
+
+  it('displays service category', () => {
+    render(React.createElement(CustomerPreview, defaultProps));
+    expect(screen.getByText('Hair Services')).toBeInTheDocument();
+  });
+
+  it('displays duration', () => {
+    render(React.createElement(CustomerPreview, defaultProps));
+    expect(screen.getByText('60 mins')).toBeInTheDocument();
+  });
+
+  it('shows clock icon for duration', () => {
+    render(React.createElement(CustomerPreview, defaultProps));
+    expect(screen.getByTestId('icon-clock')).toBeInTheDocument();
+  });
+
+  it('displays price', () => {
+    render(React.createElement(CustomerPreview, defaultProps));
+    expect(screen.getByText('50')).toBeInTheDocument();
+  });
+
+  it('shows dollar sign icon for price', () => {
+    render(React.createElement(CustomerPreview, defaultProps));
+    expect(screen.getByTestId('icon-dollar-sign')).toBeInTheDocument();
+  });
+
+  it('shows image icon when no photos', () => {
+    render(React.createElement(CustomerPreview, defaultProps));
+    expect(screen.getByTestId('icon-image')).toBeInTheDocument();
+  });
+
+  it('displays photo when available', () => {
+    const props = { ...defaultProps, service: mockServiceWithPhoto };
+    render(React.createElement(CustomerPreview, props));
+
+    const img = document.querySelector('img');
+    expect(img).toBeInTheDocument();
+    expect(img).toHaveAttribute('src', 'https://example.com/photo.jpg');
+    expect(img).toHaveAttribute('alt', 'Haircut');
+  });
+
+  it('displays deposit requirement when set', () => {
+    const props = { ...defaultProps, service: mockServiceWithDeposit };
+    render(React.createElement(CustomerPreview, props));
+
+    expect(screen.getByText(/Deposit required:/)).toBeInTheDocument();
+    expect(screen.getByText((content, element) => {
+      return element?.textContent === 'Deposit required: $10';
+    })).toBeInTheDocument();
+  });
+
+  it('does not show deposit when not required', () => {
+    render(React.createElement(CustomerPreview, defaultProps));
+    expect(screen.queryByText(/Deposit required:/)).not.toBeInTheDocument();
+  });
+
+  it('shows variable pricing badge', () => {
+    const props = { ...defaultProps, service: mockServiceVariablePricing };
+    render(React.createElement(CustomerPreview, props));
+
+    expect(screen.getByText('Variable')).toBeInTheDocument();
+  });
+
+  it('shows "Price varies" text for variable pricing', () => {
+    const props = { ...defaultProps, service: mockServiceVariablePricing };
+    render(React.createElement(CustomerPreview, props));
+
+    expect(screen.getByText('Price varies')).toBeInTheDocument();
+  });
+
+  it('shows deposit for variable pricing services', () => {
+    const props = { ...defaultProps, service: mockServiceVariablePricing };
+    render(React.createElement(CustomerPreview, props));
+
+    expect(screen.getByText(/Deposit required:/)).toBeInTheDocument();
+  });
+
+  it('displays info alert about preview', () => {
+    render(React.createElement(CustomerPreview, defaultProps));
+    expect(screen.getByTestId('icon-alert-circle')).toBeInTheDocument();
+    expect(screen.getByText(/This is how your service will appear to customers/)).toBeInTheDocument();
+  });
+
+  it('handles null service gracefully', () => {
+    const props = { ...defaultProps, service: null };
+    render(React.createElement(CustomerPreview, props));
+
+    expect(screen.getByText('New Service')).toBeInTheDocument();
+    expect(screen.getByText('Service description will appear here...')).toBeInTheDocument();
+  });
+
+  it('displays default category when not set', () => {
+    const serviceWithoutCategory = { ...mockService, category: undefined };
+    const props = { ...defaultProps, service: serviceWithoutCategory };
+    render(React.createElement(CustomerPreview, props));
+
+    expect(screen.getByText('General')).toBeInTheDocument();
+  });
+
+  it('uses preview data when provided', () => {
+    const previewData = {
+      name: 'Custom Name',
+      description: 'Custom Description',
+      price: 75,
+      durationMinutes: 90,
+    };
+    const props = { ...defaultProps, previewData };
+    render(React.createElement(CustomerPreview, props));
+
+    expect(screen.getByText('Custom Name')).toBeInTheDocument();
+    expect(screen.getByText('Custom Description')).toBeInTheDocument();
+    expect(screen.getByText('75')).toBeInTheDocument();
+    expect(screen.getByText('90 mins')).toBeInTheDocument();
+  });
+
+  it('preview data overrides service data', () => {
+    const previewData = { name: 'Preview Name' };
+    const props = { ...defaultProps, previewData };
+    render(React.createElement(CustomerPreview, props));
+
+    // Should show preview data instead of service data
+    expect(screen.getByText('Preview Name')).toBeInTheDocument();
+    expect(screen.queryByText('Haircut')).not.toBeInTheDocument();
+  });
+
+  it('formats price correctly', () => {
+    const props = { ...defaultProps, service: { ...mockService, price: 123 } };
+    render(React.createElement(CustomerPreview, props));
+
+    expect(screen.getByText('123')).toBeInTheDocument();
+  });
+
+  it('handles zero price', () => {
+    const props = { ...defaultProps, service: { ...mockService, price: 0 } };
+    render(React.createElement(CustomerPreview, props));
+
+    expect(screen.getByText('0')).toBeInTheDocument();
+  });
+
+  it('applies business colors to gradient', () => {
+    render(React.createElement(CustomerPreview, defaultProps));
+
+    // The gradient uses business colors in the style attribute
+    const gradientDiv = document.querySelector('[style*="gradient"]');
+    expect(gradientDiv).toBeInTheDocument();
+  });
+
+  it('displays deposit with correct formatting', () => {
+    const props = { ...defaultProps, service: { ...mockService, deposit_amount: 15 } };
+    render(React.createElement(CustomerPreview, props));
+
+    expect(screen.getByText((content, element) => {
+      return element?.textContent === 'Deposit required: $15';
+    })).toBeInTheDocument();
+  });
+
+  it('shows default duration when not set', () => {
+    const serviceWithoutDuration = { ...mockService, durationMinutes: undefined };
+    const props = { ...defaultProps, service: serviceWithoutDuration };
+    render(React.createElement(CustomerPreview, props));
+
+    expect(screen.getByText('30 mins')).toBeInTheDocument();
+  });
+
+  it('displays border styling to indicate selected preview', () => {
+    render(React.createElement(CustomerPreview, defaultProps));
+
+    const card = document.querySelector('.border-brand-600');
+    expect(card).toBeInTheDocument();
+  });
+
+  it('displays ring styling', () => {
+    render(React.createElement(CustomerPreview, defaultProps));
+
+    const card = document.querySelector('.ring-brand-600');
+    expect(card).toBeInTheDocument();
+  });
+
+  it('handles preview data with partial updates', () => {
+    const previewData = { price: 99 };
+    const props = { ...defaultProps, previewData };
+    render(React.createElement(CustomerPreview, props));
+
+    // Name should still be from service
+    expect(screen.getByText('Haircut')).toBeInTheDocument();
+    // Price should be from previewData
+    expect(screen.getByText('99')).toBeInTheDocument();
+  });
+
+  it('merges photos from preview data', () => {
+    const previewData = { photos: ['https://preview.com/new.jpg'] };
+    const props = { ...defaultProps, previewData };
+    render(React.createElement(CustomerPreview, props));
+
+    const img = document.querySelector('img');
+    expect(img).toHaveAttribute('src', 'https://preview.com/new.jpg');
+  });
+
+  it('handles empty photos array', () => {
+    const props = { ...defaultProps, service: { ...mockService, photos: [] } };
+    render(React.createElement(CustomerPreview, props));
+
+    expect(screen.getByTestId('icon-image')).toBeInTheDocument();
+  });
+
+  it('uses first photo only for cover', () => {
+    const serviceWithMultiplePhotos = {
+      ...mockService,
+      photos: ['https://first.com/1.jpg', 'https://second.com/2.jpg'],
+    };
+    const props = { ...defaultProps, service: serviceWithMultiplePhotos };
+    render(React.createElement(CustomerPreview, props));
+
+    const img = document.querySelector('img');
+    expect(img).toHaveAttribute('src', 'https://first.com/1.jpg');
+  });
+
+  it('displays horizontal card layout', () => {
+    render(React.createElement(CustomerPreview, defaultProps));
+
+    const cardContainer = document.querySelector('.flex.h-full');
+    expect(cardContainer).toBeInTheDocument();
+  });
+});

frontend/src/components/services/__tests__/ResourceSelector.test.tsx

@@ -0,0 +1,306 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import React from 'react';
+import { ResourceSelector } from '../ResourceSelector';
+import { Resource } from '../../../types';
+
+// Mock dependencies
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({ t: (key: string) => key }),
+}));
+
+// Mock Lucide icons
+vi.mock('lucide-react', () => ({
+  Users: () => <span data-testid="icon-users" />,
+  Search: () => <span data-testid="icon-search" />,
+  Check: () => <span data-testid="icon-check" />,
+  X: () => <span data-testid="icon-x" />,
+  AlertCircle: () => <span data-testid="icon-alert-circle" />,
+}));
+
+describe('ResourceSelector', () => {
+  const mockResources: Resource[] = [
+    {
+      id: '1',
+      name: 'John Doe',
+      type: 'STAFF',
+    } as Resource,
+    {
+      id: '2',
+      name: 'Jane Smith',
+      type: 'STAFF',
+    } as Resource,
+    {
+      id: '3',
+      name: 'Bob Johnson',
+      type: 'STAFF',
+    } as Resource,
+  ];
+
+  const defaultProps = {
+    resources: mockResources,
+    selectedIds: [],
+    allSelected: false,
+    onChange: vi.fn(),
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('renders the all staff toggle', () => {
+    render(React.createElement(ResourceSelector, defaultProps));
+    expect(screen.getByText('All Staff Available')).toBeInTheDocument();
+    expect(screen.getByText('Automatically include current and future staff')).toBeInTheDocument();
+  });
+
+  it('shows users icon', () => {
+    render(React.createElement(ResourceSelector, defaultProps));
+    expect(screen.getByTestId('icon-users')).toBeInTheDocument();
+  });
+
+  it('displays toggle switch', () => {
+    render(React.createElement(ResourceSelector, defaultProps));
+    const checkbox = document.querySelector('input[type="checkbox"]');
+    expect(checkbox).toBeInTheDocument();
+    expect(checkbox).not.toBeChecked();
+  });
+
+  it('shows staff list when allSelected is false', () => {
+    render(React.createElement(ResourceSelector, defaultProps));
+    expect(screen.getByText('John Doe')).toBeInTheDocument();
+    expect(screen.getByText('Jane Smith')).toBeInTheDocument();
+    expect(screen.getByText('Bob Johnson')).toBeInTheDocument();
+  });
+
+  it('hides staff list when allSelected is true', () => {
+    const props = { ...defaultProps, allSelected: true };
+    render(React.createElement(ResourceSelector, props));
+    expect(screen.queryByText('John Doe')).not.toBeInTheDocument();
+  });
+
+  it('calls onChange with all=true when toggling on', () => {
+    const onChange = vi.fn();
+    const props = { ...defaultProps, onChange };
+    render(React.createElement(ResourceSelector, props));
+
+    const checkbox = document.querySelector('input[type="checkbox"]') as HTMLInputElement;
+    fireEvent.click(checkbox);
+
+    expect(onChange).toHaveBeenCalledWith([], true);
+  });
+
+  it('calls onChange with all=false when toggling off', () => {
+    const onChange = vi.fn();
+    const props = { ...defaultProps, onChange, allSelected: true };
+    render(React.createElement(ResourceSelector, props));
+
+    const checkbox = document.querySelector('input[type="checkbox"]') as HTMLInputElement;
+    fireEvent.click(checkbox);
+
+    expect(onChange).toHaveBeenCalledWith([], false);
+  });
+
+  it('displays search input', () => {
+    render(React.createElement(ResourceSelector, defaultProps));
+    expect(screen.getByPlaceholderText('Search staff...')).toBeInTheDocument();
+  });
+
+  it('shows search icon', () => {
+    render(React.createElement(ResourceSelector, defaultProps));
+    expect(screen.getByTestId('icon-search')).toBeInTheDocument();
+  });
+
+  it('filters resources by search term', () => {
+    render(React.createElement(ResourceSelector, defaultProps));
+
+    const searchInput = screen.getByPlaceholderText('Search staff...');
+    fireEvent.change(searchInput, { target: { value: 'Doe' } });
+
+    expect(screen.getByText('John Doe')).toBeInTheDocument();
+    expect(screen.queryByText('Jane Smith')).not.toBeInTheDocument();
+    expect(screen.queryByText('Bob Johnson')).not.toBeInTheDocument();
+  });
+
+  it('search is case insensitive', () => {
+    render(React.createElement(ResourceSelector, defaultProps));
+
+    const searchInput = screen.getByPlaceholderText('Search staff...');
+    fireEvent.change(searchInput, { target: { value: 'JANE' } });
+
+    expect(screen.getByText('Jane Smith')).toBeInTheDocument();
+    expect(screen.queryByText('John Doe')).not.toBeInTheDocument();
+  });
+
+  it('shows no results message when search has no matches', () => {
+    render(React.createElement(ResourceSelector, defaultProps));
+
+    const searchInput = screen.getByPlaceholderText('Search staff...');
+    fireEvent.change(searchInput, { target: { value: 'Nonexistent' } });
+
+    expect(screen.getByText('No staff found matching "Nonexistent"')).toBeInTheDocument();
+  });
+
+  it('displays resource initials in avatar', () => {
+    render(React.createElement(ResourceSelector, defaultProps));
+
+    const initials = screen.getAllByText('J'); // John and Jane both start with J
+    expect(initials.length).toBeGreaterThan(0);
+  });
+
+  it('calls onChange when clicking a resource', () => {
+    const onChange = vi.fn();
+    const props = { ...defaultProps, onChange };
+    render(React.createElement(ResourceSelector, props));
+
+    const resource = screen.getByText('John Doe').closest('button');
+    fireEvent.click(resource!);
+
+    expect(onChange).toHaveBeenCalledWith(['1'], false);
+  });
+
+  it('adds resource to selection when not selected', () => {
+    const onChange = vi.fn();
+    const props = { ...defaultProps, onChange, selectedIds: ['2'] };
+    render(React.createElement(ResourceSelector, props));
+
+    const resource = screen.getByText('John Doe').closest('button');
+    fireEvent.click(resource!);
+
+    expect(onChange).toHaveBeenCalledWith(['2', '1'], false);
+  });
+
+  it('removes resource from selection when already selected', () => {
+    const onChange = vi.fn();
+    const props = { ...defaultProps, onChange, selectedIds: ['1', '2'] };
+    render(React.createElement(ResourceSelector, props));
+
+    const resource = screen.getByText('John Doe').closest('button');
+    fireEvent.click(resource!);
+
+    expect(onChange).toHaveBeenCalledWith(['2'], false);
+  });
+
+  it('highlights selected resources', () => {
+    const props = { ...defaultProps, selectedIds: ['1'] };
+    render(React.createElement(ResourceSelector, props));
+
+    const resource = screen.getByText('John Doe').closest('button');
+    expect(resource).toHaveClass('bg-brand-50');
+  });
+
+  it('shows check icon for selected resources', () => {
+    const props = { ...defaultProps, selectedIds: ['1'] };
+    render(React.createElement(ResourceSelector, props));
+
+    expect(screen.getByTestId('icon-check')).toBeInTheDocument();
+  });
+
+  it('does not toggle when allSelected is true', () => {
+    const onChange = vi.fn();
+    const props = { ...defaultProps, onChange, allSelected: true };
+    render(React.createElement(ResourceSelector, props));
+
+    // The resource list should be hidden, so we can't click on resources
+    expect(screen.queryByText('John Doe')).not.toBeInTheDocument();
+  });
+
+  it('displays selection count', () => {
+    const props = { ...defaultProps, selectedIds: ['1', '2'] };
+    render(React.createElement(ResourceSelector, props));
+
+    expect(screen.getByText('2 staff selected')).toBeInTheDocument();
+  });
+
+  it('shows warning when no staff selected', () => {
+    render(React.createElement(ResourceSelector, defaultProps));
+
+    expect(screen.getByText('At least one required')).toBeInTheDocument();
+    expect(screen.getByTestId('icon-alert-circle')).toBeInTheDocument();
+  });
+
+  it('does not show warning when staff are selected', () => {
+    const props = { ...defaultProps, selectedIds: ['1'] };
+    render(React.createElement(ResourceSelector, props));
+
+    expect(screen.queryByText('At least one required')).not.toBeInTheDocument();
+  });
+
+  it('displays all resources initially', () => {
+    render(React.createElement(ResourceSelector, defaultProps));
+
+    expect(screen.getByText('John Doe')).toBeInTheDocument();
+    expect(screen.getByText('Jane Smith')).toBeInTheDocument();
+    expect(screen.getByText('Bob Johnson')).toBeInTheDocument();
+  });
+
+  it('handles empty resources array', () => {
+    const props = { ...defaultProps, resources: [] };
+    render(React.createElement(ResourceSelector, props));
+
+    const searchInput = screen.getByPlaceholderText('Search staff...');
+    fireEvent.change(searchInput, { target: { value: 'test' } });
+
+    expect(screen.getByText('No staff found matching "test"')).toBeInTheDocument();
+  });
+
+  it('clears search when typing new term', () => {
+    render(React.createElement(ResourceSelector, defaultProps));
+
+    const searchInput = screen.getByPlaceholderText('Search staff...') as HTMLInputElement;
+
+    fireEvent.change(searchInput, { target: { value: 'John' } });
+    expect(searchInput.value).toBe('John');
+
+    fireEvent.change(searchInput, { target: { value: '' } });
+    expect(searchInput.value).toBe('');
+
+    // All resources visible again
+    expect(screen.getByText('John Doe')).toBeInTheDocument();
+    expect(screen.getByText('Jane Smith')).toBeInTheDocument();
+  });
+
+  it('toggle switch is checked when allSelected is true', () => {
+    const props = { ...defaultProps, allSelected: true };
+    render(React.createElement(ResourceSelector, props));
+
+    const checkbox = document.querySelector('input[type="checkbox"]') as HTMLInputElement;
+    expect(checkbox).toBeChecked();
+  });
+
+  it('shows correct selection count for multiple selections', () => {
+    const props = { ...defaultProps, selectedIds: ['1', '2', '3'] };
+    render(React.createElement(ResourceSelector, props));
+
+    expect(screen.getByText('3 staff selected')).toBeInTheDocument();
+  });
+
+  it('shows correct selection count for single selection', () => {
+    const props = { ...defaultProps, selectedIds: ['1'] };
+    render(React.createElement(ResourceSelector, props));
+
+    expect(screen.getByText('1 staff selected')).toBeInTheDocument();
+  });
+
+  it('updates display when selectedIds prop changes', () => {
+    const { rerender } = render(React.createElement(ResourceSelector, defaultProps));
+
+    expect(screen.getByText('0 staff selected')).toBeInTheDocument();
+
+    const newProps = { ...defaultProps, selectedIds: ['1', '2'] };
+    rerender(React.createElement(ResourceSelector, newProps));
+
+    expect(screen.getByText('2 staff selected')).toBeInTheDocument();
+  });
+
+  it('resource avatars have different styling when selected', () => {
+    const props = { ...defaultProps, selectedIds: ['1'] };
+    render(React.createElement(ResourceSelector, props));
+
+    const selectedButton = screen.getByText('John Doe').closest('button');
+    const unselectedButton = screen.getByText('Jane Smith').closest('button');
+
+    expect(selectedButton).toHaveClass('bg-brand-50');
+    expect(unselectedButton).not.toHaveClass('bg-brand-50');
+  });
+});

frontend/src/components/staff/RolePermissions.tsx

@@ -20,6 +20,8 @@ export interface PermissionSectionProps {
   variant?: 'default' | 'settings' | 'dangerous';
   readOnly?: boolean;
   columns?: 1 | 2;
+  lockedPermissions?: Record<string, string>; // key -> reason (forced on)
+  disabledPermissions?: Record<string, string>; // key -> reason (grayed out until parent enabled)
 }
 
 /**
@@ -36,6 +38,8 @@ export const PermissionSection: React.FC<PermissionSectionProps> = ({
   variant = 'default',
   readOnly = false,
   columns = 2,
+  lockedPermissions = {},
+  disabledPermissions = {},
 }) => {
   const { t } = useTranslation();
 
@@ -51,9 +55,9 @@ export const PermissionSection: React.FC<PermissionSectionProps> = ({
       hover: 'hover:bg-blue-100/50 dark:hover:bg-blue-900/20',
     },
     dangerous: {
-      container: 'p-3 bg-red-50/50 dark:bg-red-900/10 rounded-lg border border-red-100 dark:border-red-900/30',
+      container: 'p-3 bg-red-100 dark:bg-red-900/30 rounded-lg border border-red-200 dark:border-red-800/50',
       checkbox: 'text-red-600 focus:ring-red-500',
-      hover: 'hover:bg-red-100/50 dark:hover:bg-red-900/20',
+      hover: 'hover:bg-red-200/70 dark:hover:bg-red-900/40',
     },
   };
 
@@ -105,6 +109,10 @@ export const PermissionSection: React.FC<PermissionSectionProps> = ({
             checkboxClass={styles.checkbox}
             hoverClass={styles.hover}
             readOnly={readOnly}
+            locked={!!lockedPermissions[key]}
+            lockedReason={lockedPermissions[key]}
+            disabled={!!disabledPermissions[key]}
+            disabledReason={disabledPermissions[key]}
           />
         ))}
       </div>
@@ -120,6 +128,10 @@ interface PermissionCheckboxProps {
   checkboxClass?: string;
   hoverClass?: string;
   readOnly?: boolean;
+  locked?: boolean;
+  lockedReason?: string;
+  disabled?: boolean;
+  disabledReason?: string;
 }
 
 /**
@@ -133,21 +145,34 @@ export const PermissionCheckbox: React.FC<PermissionCheckboxProps> = ({
   checkboxClass = 'text-brand-600 focus:ring-brand-500',
   hoverClass = 'hover:bg-gray-50 dark:hover:bg-gray-700/50',
   readOnly = false,
+  locked = false,
+  lockedReason,
+  disabled = false,
+  disabledReason,
 }) => {
+  const isDisabled = readOnly || locked || disabled;
+  const tooltipReason = locked ? lockedReason : disabled ? disabledReason : undefined;
+
   return (
     <label
-      className={`flex items-center gap-2 p-2 rounded-lg cursor-pointer ${readOnly ? 'opacity-60 cursor-default' : hoverClass}`}
+      className={`flex items-center gap-2 p-2 rounded-lg cursor-pointer ${isDisabled ? 'opacity-60 cursor-default' : hoverClass}`}
+      title={tooltipReason}
     >
       <input
         type="checkbox"
         checked={checked}
         onChange={(e) => onChange(e.target.checked)}
-        disabled={readOnly}
+        disabled={isDisabled}
         className={`w-4 h-4 border-gray-300 dark:border-gray-600 rounded ${checkboxClass} disabled:opacity-50`}
       />
       <div>
-        <div className="text-sm font-medium text-gray-900 dark:text-white">
+        <div className="text-sm font-medium text-gray-900 dark:text-white flex items-center gap-1.5">
           {definition.label}
+          {locked && (
+            <span className="text-[10px] text-gray-400 dark:text-gray-500 font-normal">
+              (required)
+            </span>
+          )}
         </div>
         <div className="text-xs text-gray-500 dark:text-gray-400">
           {definition.description}
@@ -198,6 +223,21 @@ export const RolePermissionsEditor: React.FC<RolePermissionsEditorProps> = ({
       });
     }
 
+    // Schedule editing permissions are linked:
+    // - If enabling "edit others' schedules", also enable "edit own schedule"
+    // - "edit own schedule" can be disabled independently only if "edit others'" is off
+    if (value && key === 'can_edit_others_schedules') {
+      updates['can_edit_own_schedule'] = true;
+    }
+
+    // Prevent disabling "edit own schedule" if "edit others' schedules" is enabled
+    if (!value && key === 'can_edit_own_schedule') {
+      if (permissions['can_edit_others_schedules']) {
+        // Keep it enabled - can't disable own schedule editing while others' is enabled
+        updates['can_edit_own_schedule'] = true;
+      }
+    }
+
     onChange({ ...permissions, ...updates });
   };
 
@@ -213,9 +253,39 @@ export const RolePermissionsEditor: React.FC<RolePermissionsEditorProps> = ({
       updates['can_access_settings'] = true;
     }
 
+    // If enabling menu permissions including edit_others, ensure edit_own is also enabled
+    if (category === 'menu' && enable && updates['can_edit_others_schedules']) {
+      updates['can_edit_own_schedule'] = true;
+    }
+
     onChange({ ...permissions, ...updates });
   };
 
+  // Calculate which permissions are locked (cannot be unchecked due to dependencies)
+  const lockedPermissions: Record<string, string> = {};
+
+  // "Edit Own Schedule" is locked when "Edit Others' Schedules" is enabled
+  if (permissions['can_edit_others_schedules']) {
+    lockedPermissions['can_edit_own_schedule'] = t(
+      'settings.staffRoles.lockedByEditOthers',
+      'Required when "Edit Others\' Schedules" is enabled'
+    );
+  }
+
+  // Calculate which settings permissions are disabled (require "Access Settings" to be enabled first)
+  const disabledSettingsPermissions: Record<string, string> = {};
+  if (!permissions['can_access_settings']) {
+    // Disable all settings sub-permissions when main settings access is off
+    Object.keys(availablePermissions.settings).forEach((key) => {
+      if (key !== 'can_access_settings') {
+        disabledSettingsPermissions[key] = t(
+          'settings.staffRoles.requiresAccessSettings',
+          'Enable "Access Settings" first'
+        );
+      }
+    });
+  }
+
   return (
     <div className="space-y-6">
       {/* Menu Permissions */}
@@ -230,6 +300,7 @@ export const RolePermissionsEditor: React.FC<RolePermissionsEditorProps> = ({
         variant="default"
         readOnly={readOnly}
         columns={columns}
+        lockedPermissions={lockedPermissions}
       />
 
       {/* Settings Permissions */}
@@ -244,6 +315,8 @@ export const RolePermissionsEditor: React.FC<RolePermissionsEditorProps> = ({
         variant="settings"
         readOnly={readOnly}
         columns={columns}
+        lockedPermissions={lockedPermissions}
+        disabledPermissions={disabledSettingsPermissions}
       />
 
       {/* Dangerous Permissions */}
@@ -256,6 +329,7 @@ export const RolePermissionsEditor: React.FC<RolePermissionsEditorProps> = ({
         onSelectAll={() => toggleAllInCategory('dangerous', true)}
         onClearAll={() => toggleAllInCategory('dangerous', false)}
         variant="dangerous"
+        lockedPermissions={lockedPermissions}
         readOnly={readOnly}
         columns={columns}
       />

frontend/src/components/time-blocks/__tests__/TimeBlockCalendarOverlay.test.tsx

@@ -0,0 +1,628 @@
+/**
+ * Unit tests for TimeBlockCalendarOverlay component
+ *
+ * Tests cover:
+ * - Component rendering with blocked ranges
+ * - Business-level vs resource-level block styling
+ * - Hard block vs soft block visual differences
+ * - Tooltip display on hover
+ * - Multi-day range handling
+ * - Overlay positioning and width calculation
+ * - Click handlers for day navigation
+ */
+
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import React from 'react';
+import TimeBlockCalendarOverlay from '../TimeBlockCalendarOverlay';
+import { BlockedRange, BlockType, BlockPurpose } from '../../../types';
+
+describe('TimeBlockCalendarOverlay', () => {
+  const mockOnDayClick = vi.fn();
+
+  const defaultProps = {
+    blockedRanges: [] as BlockedRange[],
+    resourceId: 'resource-1',
+    viewDate: new Date('2025-12-26T00:00:00'),
+    zoomLevel: 1,
+    pixelsPerMinute: 2,
+    startHour: 0,
+    dayWidth: 200,
+    laneHeight: 60,
+    days: [
+      new Date('2025-12-26T00:00:00'),
+      new Date('2025-12-27T00:00:00'),
+      new Date('2025-12-28T00:00:00'),
+    ],
+    onDayClick: mockOnDayClick,
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('Component Rendering', () => {
+    it('should render without crashing when no blocked ranges', () => {
+      const { container } = render(<TimeBlockCalendarOverlay {...defaultProps} />);
+      expect(container).toBeInTheDocument();
+    });
+
+    it('should render with empty blocked ranges array', () => {
+      const { container } = render(
+        <TimeBlockCalendarOverlay {...defaultProps} blockedRanges={[]} />
+      );
+      expect(container).toBeInTheDocument();
+    });
+
+    it('should not render any overlays when blockedRanges is empty', () => {
+      const { container } = render(<TimeBlockCalendarOverlay {...defaultProps} />);
+      const overlays = container.querySelectorAll('[style*="position: absolute"]');
+      expect(overlays.length).toBe(0);
+    });
+  });
+
+  describe('Business-level Blocks', () => {
+    it('should render business-level block with gray background', () => {
+      const businessBlock: BlockedRange = {
+        start: '2025-12-26T09:00:00',
+        end: '2025-12-26T17:00:00',
+        block_type: 'HARD',
+        purpose: 'CLOSURE',
+        title: 'Business Closed',
+        resource_id: null, // Business-level
+      };
+
+      const { container } = render(
+        <TimeBlockCalendarOverlay {...defaultProps} blockedRanges={[businessBlock]} />
+      );
+
+      const overlay = container.querySelector('[style*="position: absolute"]');
+      expect(overlay).toBeInTheDocument();
+    });
+
+    it('should render business-level block without resource badge', () => {
+      const businessBlock: BlockedRange = {
+        start: '2025-12-26T09:00:00',
+        end: '2025-12-26T17:00:00',
+        block_type: 'HARD',
+        purpose: 'CLOSURE',
+        title: 'Business Closed',
+        resource_id: null,
+      };
+
+      const { container } = render(
+        <TimeBlockCalendarOverlay {...defaultProps} blockedRanges={[businessBlock]} />
+      );
+
+      // Should not have the "R" badge for resource blocks
+      const badge = container.querySelector('.bg-purple-600');
+      expect(badge).not.toBeInTheDocument();
+    });
+
+    it('should apply business-level blocks to all resources', () => {
+      const businessBlock: BlockedRange = {
+        start: '2025-12-26T09:00:00',
+        end: '2025-12-26T17:00:00',
+        block_type: 'HARD',
+        purpose: 'CLOSURE',
+        title: 'Company Holiday',
+        resource_id: null,
+      };
+
+      const { container } = render(
+        <TimeBlockCalendarOverlay {...defaultProps} blockedRanges={[businessBlock]} />
+      );
+
+      const overlays = container.querySelectorAll('[style*="position: absolute"]');
+      expect(overlays.length).toBeGreaterThan(0);
+    });
+  });
+
+  describe('Resource-level Blocks', () => {
+    it('should render resource-level hard block with purple stripes', () => {
+      const resourceBlock: BlockedRange = {
+        start: '2025-12-26T10:00:00',
+        end: '2025-12-26T12:00:00',
+        block_type: 'HARD',
+        purpose: 'UNAVAILABLE',
+        title: 'Staff Vacation',
+        resource_id: 'resource-1',
+      };
+
+      const { container } = render(
+        <TimeBlockCalendarOverlay {...defaultProps} blockedRanges={[resourceBlock]} />
+      );
+
+      const overlay = container.querySelector('[style*="position: absolute"]');
+      expect(overlay).toBeInTheDocument();
+    });
+
+    it('should render resource-level soft block with cyan background', () => {
+      const softBlock: BlockedRange = {
+        start: '2025-12-26T14:00:00',
+        end: '2025-12-26T15:00:00',
+        block_type: 'SOFT',
+        purpose: 'UNAVAILABLE',
+        title: 'Preferred Off',
+        resource_id: 'resource-1',
+      };
+
+      const { container } = render(
+        <TimeBlockCalendarOverlay {...defaultProps} blockedRanges={[softBlock]} />
+      );
+
+      const overlay = container.querySelector('[style*="position: absolute"]');
+      expect(overlay).toBeInTheDocument();
+    });
+
+    it('should show resource badge on resource-level blocks', () => {
+      const resourceBlock: BlockedRange = {
+        start: '2025-12-26T10:00:00',
+        end: '2025-12-26T12:00:00',
+        block_type: 'HARD',
+        purpose: 'UNAVAILABLE',
+        title: 'Staff Meeting',
+        resource_id: 'resource-1',
+      };
+
+      const { container } = render(
+        <TimeBlockCalendarOverlay {...defaultProps} blockedRanges={[resourceBlock]} />
+      );
+
+      const badge = container.querySelector('.bg-purple-600');
+      expect(badge).toBeInTheDocument();
+      expect(badge?.textContent).toBe('R');
+    });
+
+    it('should filter blocks by resource ID', () => {
+      const blocks: BlockedRange[] = [
+        {
+          start: '2025-12-26T09:00:00',
+          end: '2025-12-26T10:00:00',
+          block_type: 'HARD',
+          purpose: 'UNAVAILABLE',
+          title: 'Resource 1 Block',
+          resource_id: 'resource-1',
+        },
+        {
+          start: '2025-12-26T11:00:00',
+          end: '2025-12-26T12:00:00',
+          block_type: 'HARD',
+          purpose: 'UNAVAILABLE',
+          title: 'Resource 2 Block',
+          resource_id: 'resource-2',
+        },
+      ];
+
+      const { container } = render(
+        <TimeBlockCalendarOverlay {...defaultProps} blockedRanges={blocks} />
+      );
+
+      // Should only render one overlay for resource-1
+      const overlays = container.querySelectorAll('[style*="position: absolute"]');
+      expect(overlays.length).toBe(1);
+    });
+  });
+
+  describe('Multi-day Ranges', () => {
+    it('should render block spanning multiple days', () => {
+      const multiDayBlock: BlockedRange = {
+        start: '2025-12-26T14:00:00',
+        end: '2025-12-27T10:00:00',
+        block_type: 'HARD',
+        purpose: 'UNAVAILABLE',
+        title: 'Extended Leave',
+        resource_id: 'resource-1',
+      };
+
+      const { container } = render(
+        <TimeBlockCalendarOverlay {...defaultProps} blockedRanges={[multiDayBlock]} />
+      );
+
+      const overlays = container.querySelectorAll('[style*="position: absolute"]');
+      // Should create separate overlays for each day
+      expect(overlays.length).toBeGreaterThanOrEqual(1);
+    });
+
+    it('should handle blocks starting before view range', () => {
+      const block: BlockedRange = {
+        start: '2025-12-25T20:00:00', // Before first day
+        end: '2025-12-26T10:00:00',
+        block_type: 'HARD',
+        purpose: 'CLOSURE',
+        title: 'Overnight Closure',
+        resource_id: null,
+      };
+
+      const { container } = render(
+        <TimeBlockCalendarOverlay {...defaultProps} blockedRanges={[block]} />
+      );
+
+      const overlays = container.querySelectorAll('[style*="position: absolute"]');
+      expect(overlays.length).toBeGreaterThanOrEqual(1);
+    });
+
+    it('should handle blocks ending after view range', () => {
+      const block: BlockedRange = {
+        start: '2025-12-28T20:00:00',
+        end: '2025-12-29T10:00:00', // After last day
+        block_type: 'HARD',
+        purpose: 'CLOSURE',
+        title: 'Extended Closure',
+        resource_id: null,
+      };
+
+      const { container } = render(
+        <TimeBlockCalendarOverlay {...defaultProps} blockedRanges={[block]} />
+      );
+
+      const overlays = container.querySelectorAll('[style*="position: absolute"]');
+      expect(overlays.length).toBeGreaterThanOrEqual(1);
+    });
+  });
+
+  describe('Tooltip Display', () => {
+    it('should show tooltip on mouse enter', async () => {
+      const user = userEvent.setup();
+      const block: BlockedRange = {
+        start: '2025-12-26T09:00:00',
+        end: '2025-12-26T10:00:00',
+        block_type: 'HARD',
+        purpose: 'CLOSURE',
+        title: 'Holiday',
+        resource_id: null,
+      };
+
+      const { container } = render(
+        <TimeBlockCalendarOverlay {...defaultProps} blockedRanges={[block]} />
+      );
+
+      const overlay = container.querySelector('[style*="position: absolute"]');
+      expect(overlay).toBeInTheDocument();
+
+      if (overlay) {
+        await user.hover(overlay as HTMLElement);
+
+        await waitFor(() => {
+          const tooltip = container.querySelector('.fixed.z-\\[100\\]');
+          expect(tooltip).toBeInTheDocument();
+        });
+      }
+    });
+
+    it('should display block title in tooltip', async () => {
+      const user = userEvent.setup();
+      const block: BlockedRange = {
+        start: '2025-12-26T09:00:00',
+        end: '2025-12-26T10:00:00',
+        block_type: 'HARD',
+        purpose: 'CLOSURE',
+        title: 'Christmas Day',
+        resource_id: null,
+      };
+
+      const { container } = render(
+        <TimeBlockCalendarOverlay {...defaultProps} blockedRanges={[block]} />
+      );
+
+      const overlay = container.querySelector('[style*="position: absolute"]');
+      if (overlay) {
+        await user.hover(overlay as HTMLElement);
+
+        await waitFor(() => {
+          expect(screen.queryByText('Christmas Day')).toBeInTheDocument();
+        });
+      }
+    });
+
+    it('should hide tooltip on mouse leave', async () => {
+      const user = userEvent.setup();
+      const block: BlockedRange = {
+        start: '2025-12-26T09:00:00',
+        end: '2025-12-26T10:00:00',
+        block_type: 'HARD',
+        purpose: 'CLOSURE',
+        title: 'Holiday',
+        resource_id: null,
+      };
+
+      const { container } = render(
+        <TimeBlockCalendarOverlay {...defaultProps} blockedRanges={[block]} />
+      );
+
+      const overlay = container.querySelector('[style*="position: absolute"]');
+      if (overlay) {
+        await user.hover(overlay as HTMLElement);
+        await waitFor(() => {
+          const tooltip = container.querySelector('.fixed.z-\\[100\\]');
+          expect(tooltip).toBeInTheDocument();
+        });
+
+        await user.unhover(overlay as HTMLElement);
+        await waitFor(() => {
+          const tooltip = container.querySelector('.fixed.z-\\[100\\]');
+          expect(tooltip).not.toBeInTheDocument();
+        });
+      }
+    });
+
+    it('should display block type in tooltip', async () => {
+      const user = userEvent.setup();
+      const block: BlockedRange = {
+        start: '2025-12-26T09:00:00',
+        end: '2025-12-26T10:00:00',
+        block_type: 'SOFT',
+        purpose: 'UNAVAILABLE',
+        title: 'Lunch Break',
+        resource_id: 'resource-1',
+      };
+
+      const { container } = render(
+        <TimeBlockCalendarOverlay {...defaultProps} blockedRanges={[block]} />
+      );
+
+      const overlay = container.querySelector('[style*="position: absolute"]');
+      if (overlay) {
+        await user.hover(overlay as HTMLElement);
+
+        await waitFor(() => {
+          expect(screen.queryByText(/Soft Block/i)).toBeInTheDocument();
+        });
+      }
+    });
+  });
+
+  describe('Click Handlers', () => {
+    it('should call onDayClick when overlay is clicked', async () => {
+      const user = userEvent.setup();
+      const block: BlockedRange = {
+        start: '2025-12-26T09:00:00',
+        end: '2025-12-26T10:00:00',
+        block_type: 'HARD',
+        purpose: 'CLOSURE',
+        title: 'Holiday',
+        resource_id: null,
+      };
+
+      const { container } = render(
+        <TimeBlockCalendarOverlay {...defaultProps} blockedRanges={[block]} />
+      );
+
+      const overlay = container.querySelector('[style*="position: absolute"]');
+      if (overlay) {
+        await user.click(overlay as HTMLElement);
+        expect(mockOnDayClick).toHaveBeenCalledWith(defaultProps.days[0]);
+      }
+    });
+
+    it('should not call onDayClick when handler is not provided', async () => {
+      const user = userEvent.setup();
+      const block: BlockedRange = {
+        start: '2025-12-26T09:00:00',
+        end: '2025-12-26T10:00:00',
+        block_type: 'HARD',
+        purpose: 'CLOSURE',
+        title: 'Holiday',
+        resource_id: null,
+      };
+
+      const { container } = render(
+        <TimeBlockCalendarOverlay {...defaultProps} onDayClick={undefined} blockedRanges={[block]} />
+      );
+
+      const overlay = container.querySelector('[style*="position: absolute"]');
+      if (overlay) {
+        await user.click(overlay as HTMLElement);
+        expect(mockOnDayClick).not.toHaveBeenCalled();
+      }
+    });
+
+    it('should apply pointer cursor when onDayClick is provided', () => {
+      const block: BlockedRange = {
+        start: '2025-12-26T09:00:00',
+        end: '2025-12-26T10:00:00',
+        block_type: 'HARD',
+        purpose: 'CLOSURE',
+        title: 'Holiday',
+        resource_id: null,
+      };
+
+      const { container } = render(
+        <TimeBlockCalendarOverlay {...defaultProps} blockedRanges={[block]} />
+      );
+
+      const overlay = container.querySelector('[style*="position: absolute"]') as HTMLElement;
+      expect(overlay?.style.cursor).toBe('pointer');
+    });
+
+    it('should apply default cursor when onDayClick is not provided', () => {
+      const block: BlockedRange = {
+        start: '2025-12-26T09:00:00',
+        end: '2025-12-26T10:00:00',
+        block_type: 'HARD',
+        purpose: 'CLOSURE',
+        title: 'Holiday',
+        resource_id: null,
+      };
+
+      const { container } = render(
+        <TimeBlockCalendarOverlay {...defaultProps} onDayClick={undefined} blockedRanges={[block]} />
+      );
+
+      const overlay = container.querySelector('[style*="position: absolute"]') as HTMLElement;
+      expect(overlay?.style.cursor).toBe('default');
+    });
+  });
+
+  describe('Overlay Positioning', () => {
+    it('should calculate left position based on day index and start time', () => {
+      const block: BlockedRange = {
+        start: '2025-12-26T10:00:00', // 10 AM
+        end: '2025-12-26T12:00:00',
+        block_type: 'HARD',
+        purpose: 'CLOSURE',
+        title: 'Block',
+        resource_id: null,
+      };
+
+      const { container } = render(
+        <TimeBlockCalendarOverlay {...defaultProps} blockedRanges={[block]} />
+      );
+
+      const overlay = container.querySelector('[style*="position: absolute"]') as HTMLElement;
+      expect(overlay).toBeInTheDocument();
+      expect(overlay.style.left).toBeTruthy();
+    });
+
+    it('should calculate width based on duration', () => {
+      const block: BlockedRange = {
+        start: '2025-12-26T10:00:00',
+        end: '2025-12-26T12:00:00', // 2 hours
+        block_type: 'HARD',
+        purpose: 'CLOSURE',
+        title: 'Block',
+        resource_id: null,
+      };
+
+      const { container } = render(
+        <TimeBlockCalendarOverlay {...defaultProps} blockedRanges={[block]} />
+      );
+
+      const overlay = container.querySelector('[style*="position: absolute"]') as HTMLElement;
+      expect(overlay).toBeInTheDocument();
+      expect(overlay.style.width).toBeTruthy();
+    });
+
+    it('should handle all-day blocks', () => {
+      const block: BlockedRange = {
+        start: '2025-12-26T00:00:00',
+        end: '2025-12-27T00:00:00', // 24 hours
+        block_type: 'HARD',
+        purpose: 'CLOSURE',
+        title: 'All Day',
+        resource_id: null,
+      };
+
+      const { container } = render(
+        <TimeBlockCalendarOverlay {...defaultProps} blockedRanges={[block]} />
+      );
+
+      const overlays = container.querySelectorAll('[style*="position: absolute"]');
+      expect(overlays.length).toBeGreaterThanOrEqual(1);
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('should handle blocks with no time_block_id', () => {
+      const block: BlockedRange = {
+        start: '2025-12-26T09:00:00',
+        end: '2025-12-26T10:00:00',
+        block_type: 'HARD',
+        purpose: 'BUSINESS_HOURS',
+        title: 'Business Hours',
+        resource_id: null,
+        // time_block_id is undefined
+      };
+
+      const { container } = render(
+        <TimeBlockCalendarOverlay {...defaultProps} blockedRanges={[block]} />
+      );
+
+      const overlay = container.querySelector('[style*="position: absolute"]');
+      expect(overlay).toBeInTheDocument();
+    });
+
+    it('should handle very short blocks (< 1 hour)', () => {
+      const block: BlockedRange = {
+        start: '2025-12-26T10:00:00',
+        end: '2025-12-26T10:15:00', // 15 minutes
+        block_type: 'SOFT',
+        purpose: 'UNAVAILABLE',
+        title: 'Quick Break',
+        resource_id: 'resource-1',
+      };
+
+      const { container } = render(
+        <TimeBlockCalendarOverlay {...defaultProps} blockedRanges={[block]} />
+      );
+
+      const overlay = container.querySelector('[style*="position: absolute"]');
+      expect(overlay).toBeInTheDocument();
+    });
+
+    it('should handle blocks outside visible day range', () => {
+      const block: BlockedRange = {
+        start: '2025-12-30T09:00:00', // After last visible day
+        end: '2025-12-30T17:00:00',
+        block_type: 'HARD',
+        purpose: 'CLOSURE',
+        title: 'Future Block',
+        resource_id: null,
+      };
+
+      const { container } = render(
+        <TimeBlockCalendarOverlay {...defaultProps} blockedRanges={[block]} />
+      );
+
+      const overlays = container.querySelectorAll('[style*="position: absolute"]');
+      expect(overlays.length).toBe(0);
+    });
+
+    it('should handle multiple blocks on same resource', () => {
+      const blocks: BlockedRange[] = [
+        {
+          start: '2025-12-26T09:00:00',
+          end: '2025-12-26T10:00:00',
+          block_type: 'HARD',
+          purpose: 'UNAVAILABLE',
+          title: 'Block 1',
+          resource_id: 'resource-1',
+        },
+        {
+          start: '2025-12-26T14:00:00',
+          end: '2025-12-26T15:00:00',
+          block_type: 'SOFT',
+          purpose: 'UNAVAILABLE',
+          title: 'Block 2',
+          resource_id: 'resource-1',
+        },
+      ];
+
+      const { container } = render(
+        <TimeBlockCalendarOverlay {...defaultProps} blockedRanges={blocks} />
+      );
+
+      const overlays = container.querySelectorAll('[style*="position: absolute"]');
+      expect(overlays.length).toBe(2);
+    });
+
+    it('should handle mixed business and resource blocks', () => {
+      const blocks: BlockedRange[] = [
+        {
+          start: '2025-12-26T09:00:00',
+          end: '2025-12-26T10:00:00',
+          block_type: 'HARD',
+          purpose: 'CLOSURE',
+          title: 'Business Block',
+          resource_id: null,
+        },
+        {
+          start: '2025-12-26T14:00:00',
+          end: '2025-12-26T15:00:00',
+          block_type: 'SOFT',
+          purpose: 'UNAVAILABLE',
+          title: 'Resource Block',
+          resource_id: 'resource-1',
+        },
+      ];
+
+      const { container } = render(
+        <TimeBlockCalendarOverlay {...defaultProps} blockedRanges={blocks} />
+      );
+
+      const overlays = container.querySelectorAll('[style*="position: absolute"]');
+      expect(overlays.length).toBe(2);
+    });
+  });
+});

frontend/src/components/time-blocks/__tests__/TimeBlockCreatorModal.test.tsx

@@ -0,0 +1,934 @@
+/**
+ * Unit tests for TimeBlockCreatorModal component
+ *
+ * Tests cover:
+ * - Modal open/close functionality
+ * - Preset selection and configuration
+ * - Step-by-step wizard navigation
+ * - Form field rendering and validation
+ * - Recurrence type selection (NONE, WEEKLY, MONTHLY, YEARLY, HOLIDAY)
+ * - Date/time picker interactions
+ * - Block level selection (business, location, resource)
+ * - Staff mode behavior
+ * - Form submission
+ * - Edit mode vs create mode
+ */
+
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import React from 'react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import TimeBlockCreatorModal from '../TimeBlockCreatorModal';
+import { Holiday, Resource, Location, TimeBlockListItem } from '../../../types';
+
+// Mock dependencies
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string, fallback?: string) => fallback || key,
+  }),
+}));
+
+vi.mock('../Portal', () => ({
+  default: ({ children }: { children: React.ReactNode }) => <div data-testid="portal">{children}</div>,
+}));
+
+vi.mock('../LocationSelector', () => ({
+  LocationSelector: ({ value, onChange, label }: any) => (
+    <div data-testid="location-selector">
+      <label>{label}</label>
+      <select value={value || ''} onChange={(e) => onChange(Number(e.target.value) || null)}>
+        <option value="">Select location</option>
+        <option value="1">Location 1</option>
+        <option value="2">Location 2</option>
+      </select>
+    </div>
+  ),
+  useShouldShowLocationSelector: () => false,
+  useAutoSelectLocation: () => {},
+}));
+
+vi.mock('../../../hooks/usePlanFeatures', () => ({
+  usePlanFeatures: () => ({
+    canUse: () => false,
+  }),
+}));
+
+const createWrapper = () => {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+      },
+    },
+  });
+
+  return ({ children }: { children: React.ReactNode }) => (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  );
+};
+
+describe('TimeBlockCreatorModal', () => {
+  const mockOnClose = vi.fn();
+  const mockOnSubmit = vi.fn();
+
+  const mockHolidays: Holiday[] = [
+    { code: 'new_years_day', name: "New Year's Day", country: 'US' },
+    { code: 'christmas', name: 'Christmas Day', country: 'US' },
+  ];
+
+  const mockResources: Resource[] = [
+    { id: '1', name: 'Resource 1', type: 'STAFF', email: '', phone: '' },
+    { id: '2', name: 'Resource 2', type: 'ROOM', email: '', phone: '' },
+  ];
+
+  const mockLocations: Location[] = [
+    { id: 1, name: 'Location 1' },
+    { id: 2, name: 'Location 2' },
+  ];
+
+  const defaultProps = {
+    isOpen: true,
+    onClose: mockOnClose,
+    onSubmit: mockOnSubmit,
+    isSubmitting: false,
+    holidays: mockHolidays,
+    resources: mockResources,
+    locations: mockLocations,
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('Modal Rendering', () => {
+    it('should not render when isOpen is false', () => {
+      render(<TimeBlockCreatorModal {...defaultProps} isOpen={false} />, { wrapper: createWrapper() });
+      expect(screen.queryByText('Create Time Block')).not.toBeInTheDocument();
+    });
+
+    it('should render when isOpen is true', () => {
+      render(<TimeBlockCreatorModal {...defaultProps} />, { wrapper: createWrapper() });
+      expect(screen.getByText('Create Time Block')).toBeInTheDocument();
+    });
+
+    it('should render in portal', () => {
+      render(<TimeBlockCreatorModal {...defaultProps} />, { wrapper: createWrapper() });
+      expect(screen.getByTestId('portal')).toBeInTheDocument();
+    });
+
+    it('should show Edit mode title when editing block', () => {
+      const editingBlock: TimeBlockListItem = {
+        id: '1',
+        title: 'Test Block',
+        block_type: 'HARD',
+        recurrence_type: 'NONE',
+        all_day: true,
+        start_date: '2025-12-25',
+        is_business_wide: true,
+      };
+
+      render(<TimeBlockCreatorModal {...defaultProps} editingBlock={editingBlock} />, { wrapper: createWrapper() });
+      expect(screen.getByText('Edit Time Block')).toBeInTheDocument();
+    });
+
+    it('should call onClose when clicking X button', async () => {
+      const user = userEvent.setup();
+      render(<TimeBlockCreatorModal {...defaultProps} />, { wrapper: createWrapper() });
+
+      const closeButtons = screen.getAllByRole('button');
+      const xButton = closeButtons.find(btn => btn.querySelector('svg'));
+
+      if (xButton) {
+        await user.click(xButton);
+        expect(mockOnClose).toHaveBeenCalled();
+      }
+    });
+
+    it('should call onClose when clicking Cancel button', async () => {
+      const user = userEvent.setup();
+      render(<TimeBlockCreatorModal {...defaultProps} />, { wrapper: createWrapper() });
+
+      const cancelButton = screen.getByText('Cancel');
+      await user.click(cancelButton);
+
+      expect(mockOnClose).toHaveBeenCalled();
+    });
+  });
+
+  describe('Preset Selection Step', () => {
+    it('should show preset step by default for new blocks', () => {
+      render(<TimeBlockCreatorModal {...defaultProps} />, { wrapper: createWrapper() });
+      expect(screen.getByText('Block Weekends')).toBeInTheDocument();
+      expect(screen.getByText('Daily Lunch Break')).toBeInTheDocument();
+      expect(screen.getByText('Vacation / Time Off')).toBeInTheDocument();
+    });
+
+    it('should skip preset step when editing block', () => {
+      const editingBlock: TimeBlockListItem = {
+        id: '1',
+        title: 'Test Block',
+        block_type: 'HARD',
+        recurrence_type: 'NONE',
+        all_day: true,
+        start_date: '2025-12-25',
+        is_business_wide: true,
+      };
+
+      render(<TimeBlockCreatorModal {...defaultProps} editingBlock={editingBlock} />, { wrapper: createWrapper() });
+      expect(screen.queryByText('Block Weekends')).not.toBeInTheDocument();
+      expect(screen.getByText('Block Name')).toBeInTheDocument();
+    });
+
+    it('should render all preset options', () => {
+      render(<TimeBlockCreatorModal {...defaultProps} />, { wrapper: createWrapper() });
+
+      expect(screen.getByText('Block Weekends')).toBeInTheDocument();
+      expect(screen.getByText('Daily Lunch Break')).toBeInTheDocument();
+      expect(screen.getByText('Vacation / Time Off')).toBeInTheDocument();
+      expect(screen.getByText('Holiday')).toBeInTheDocument();
+      expect(screen.getByText('Monthly Closure')).toBeInTheDocument();
+      expect(screen.getByText('Custom Block')).toBeInTheDocument();
+    });
+
+    it('should navigate to details step when clicking preset', async () => {
+      const user = userEvent.setup();
+      render(<TimeBlockCreatorModal {...defaultProps} />, { wrapper: createWrapper() });
+
+      const weekendPreset = screen.getByText('Block Weekends');
+      await user.click(weekendPreset);
+
+      await waitFor(() => {
+        expect(screen.getByText('Block Name')).toBeInTheDocument();
+      });
+    });
+
+    it('should pre-fill form with preset configuration', async () => {
+      const user = userEvent.setup();
+      render(<TimeBlockCreatorModal {...defaultProps} />, { wrapper: createWrapper() });
+
+      const lunchPreset = screen.getByText('Daily Lunch Break');
+      await user.click(lunchPreset);
+
+      await waitFor(() => {
+        const titleInput = screen.getByPlaceholderText(/e.g., Christmas Day/i) as HTMLInputElement;
+        expect(titleInput.value).toBe('Lunch Break');
+      });
+    });
+  });
+
+  describe('Details Step', () => {
+    it('should render block name input', async () => {
+      const user = userEvent.setup();
+      render(<TimeBlockCreatorModal {...defaultProps} />, { wrapper: createWrapper() });
+
+      // Go to details step
+      await user.click(screen.getByText('Custom Block'));
+
+      expect(screen.getByText('Block Name')).toBeInTheDocument();
+      expect(screen.getByPlaceholderText(/e.g., Christmas Day/i)).toBeInTheDocument();
+    });
+
+    it('should render description textarea', async () => {
+      const user = userEvent.setup();
+      render(<TimeBlockCreatorModal {...defaultProps} />, { wrapper: createWrapper() });
+
+      await user.click(screen.getByText('Custom Block'));
+
+      expect(screen.getByText(/Description/i)).toBeInTheDocument();
+      expect(screen.getByPlaceholderText(/Add any notes/i)).toBeInTheDocument();
+    });
+
+    it('should allow typing in name field', async () => {
+      const user = userEvent.setup();
+      render(<TimeBlockCreatorModal {...defaultProps} />, { wrapper: createWrapper() });
+
+      await user.click(screen.getByText('Custom Block'));
+
+      const nameInput = screen.getByPlaceholderText(/e.g., Christmas Day/i);
+      await user.clear(nameInput);
+      await user.type(nameInput, 'Holiday Party');
+
+      expect(nameInput).toHaveValue('Holiday Party');
+    });
+
+    it('should render block level selector in non-staff mode', async () => {
+      const user = userEvent.setup();
+      render(<TimeBlockCreatorModal {...defaultProps} />, { wrapper: createWrapper() });
+
+      await user.click(screen.getByText('Custom Block'));
+
+      expect(screen.getByText('Block Level')).toBeInTheDocument();
+      expect(screen.getByText('Business-wide')).toBeInTheDocument();
+      expect(screen.getByText('Specific Resource')).toBeInTheDocument();
+    });
+
+    it('should not render block level selector in staff mode', async () => {
+      const user = userEvent.setup();
+      render(<TimeBlockCreatorModal {...defaultProps} staffMode={true} staffResourceId="1" />, { wrapper: createWrapper() });
+
+      await user.click(screen.getByText('Custom Block'));
+
+      expect(screen.queryByText('Block Level')).not.toBeInTheDocument();
+    });
+
+    it('should render hard/soft block type selector in non-staff mode', async () => {
+      const user = userEvent.setup();
+      render(<TimeBlockCreatorModal {...defaultProps} />, { wrapper: createWrapper() });
+
+      await user.click(screen.getByText('Custom Block'));
+
+      expect(screen.getByText('Block Type')).toBeInTheDocument();
+      expect(screen.getByText('Hard Block')).toBeInTheDocument();
+      expect(screen.getByText('Soft Block')).toBeInTheDocument();
+    });
+
+    it('should not render block type selector in staff mode', async () => {
+      const user = userEvent.setup();
+      render(<TimeBlockCreatorModal {...defaultProps} staffMode={true} staffResourceId="1" />, { wrapper: createWrapper() });
+
+      await user.click(screen.getByText('Custom Block'));
+
+      expect(screen.queryByText('Block Type')).not.toBeInTheDocument();
+    });
+
+    it('should render resource selector when resource level is selected', async () => {
+      const user = userEvent.setup();
+      render(<TimeBlockCreatorModal {...defaultProps} />, { wrapper: createWrapper() });
+
+      await user.click(screen.getByText('Custom Block'));
+
+      const resourceLevelButton = screen.getByText('Specific Resource');
+      await user.click(resourceLevelButton);
+
+      await waitFor(() => {
+        expect(screen.getByText(/Select a resource/i)).toBeInTheDocument();
+      });
+    });
+
+    it('should render all day / specific hours toggle', async () => {
+      const user = userEvent.setup();
+      render(<TimeBlockCreatorModal {...defaultProps} />, { wrapper: createWrapper() });
+
+      await user.click(screen.getByText('Custom Block'));
+
+      expect(screen.getByText('Duration')).toBeInTheDocument();
+      expect(screen.getByText('All Day')).toBeInTheDocument();
+      expect(screen.getByText('Specific Hours')).toBeInTheDocument();
+    });
+
+    it('should show time pickers when specific hours is selected', async () => {
+      const user = userEvent.setup();
+      render(<TimeBlockCreatorModal {...defaultProps} />, { wrapper: createWrapper() });
+
+      await user.click(screen.getByText('Custom Block'));
+
+      const specificHoursButton = screen.getByText('Specific Hours');
+      await user.click(specificHoursButton);
+
+      await waitFor(() => {
+        expect(screen.getByText('Start Time')).toBeInTheDocument();
+        expect(screen.getByText('End Time')).toBeInTheDocument();
+      });
+    });
+
+    it('should disable Continue button when title is empty', async () => {
+      const user = userEvent.setup();
+      render(<TimeBlockCreatorModal {...defaultProps} />, { wrapper: createWrapper() });
+
+      await user.click(screen.getByText('Custom Block'));
+
+      const continueButton = screen.getByText('Continue');
+      expect(continueButton).toBeDisabled();
+    });
+
+    it('should enable Continue button when title is filled', async () => {
+      const user = userEvent.setup();
+      render(<TimeBlockCreatorModal {...defaultProps} />, { wrapper: createWrapper() });
+
+      await user.click(screen.getByText('Custom Block'));
+
+      const nameInput = screen.getByPlaceholderText(/e.g., Christmas Day/i);
+      await user.type(nameInput, 'Test Block');
+
+      const continueButton = screen.getByText('Continue');
+      expect(continueButton).not.toBeDisabled();
+    });
+  });
+
+  describe('Schedule Step', () => {
+    it('should render recurrence type selector', async () => {
+      const user = userEvent.setup();
+      render(<TimeBlockCreatorModal {...defaultProps} />, { wrapper: createWrapper() });
+
+      await user.click(screen.getByText('Custom Block'));
+      await user.type(screen.getByPlaceholderText(/e.g., Christmas Day/i), 'Test');
+      await user.click(screen.getByText('Continue'));
+
+      await waitFor(() => {
+        expect(screen.getByText('How often?')).toBeInTheDocument();
+      });
+    });
+
+    it('should render all recurrence options', async () => {
+      const user = userEvent.setup();
+      render(<TimeBlockCreatorModal {...defaultProps} />, { wrapper: createWrapper() });
+
+      await user.click(screen.getByText('Custom Block'));
+      await user.type(screen.getByPlaceholderText(/e.g., Christmas Day/i), 'Test');
+      await user.click(screen.getByText('Continue'));
+
+      await waitFor(() => {
+        expect(screen.getByText('One-time')).toBeInTheDocument();
+        expect(screen.getByText('Weekly')).toBeInTheDocument();
+        expect(screen.getByText('Monthly')).toBeInTheDocument();
+        expect(screen.getByText('Yearly')).toBeInTheDocument();
+        expect(screen.getByText('Holiday')).toBeInTheDocument();
+      });
+    });
+
+    it('should show calendar when NONE recurrence is selected', async () => {
+      const user = userEvent.setup();
+      render(<TimeBlockCreatorModal {...defaultProps} />, { wrapper: createWrapper() });
+
+      await user.click(screen.getByText('Custom Block'));
+      await user.type(screen.getByPlaceholderText(/e.g., Christmas Day/i), 'Test');
+      await user.click(screen.getByText('Continue'));
+
+      await waitFor(() => {
+        expect(screen.getByText('Select Date(s)')).toBeInTheDocument();
+      });
+    });
+
+    it('should show day selector when WEEKLY recurrence is selected', async () => {
+      const user = userEvent.setup();
+      render(<TimeBlockCreatorModal {...defaultProps} />, { wrapper: createWrapper() });
+
+      await user.click(screen.getByText('Custom Block'));
+      await user.type(screen.getByPlaceholderText(/e.g., Christmas Day/i), 'Test');
+      await user.click(screen.getByText('Continue'));
+
+      const weeklyButton = screen.getByText('Weekly');
+      await user.click(weeklyButton);
+
+      await waitFor(() => {
+        expect(screen.getByText('Select Days')).toBeInTheDocument();
+        expect(screen.getByText('Mon')).toBeInTheDocument();
+        expect(screen.getByText('Tue')).toBeInTheDocument();
+      });
+    });
+
+    it('should show day of month selector when MONTHLY recurrence is selected', async () => {
+      const user = userEvent.setup();
+      render(<TimeBlockCreatorModal {...defaultProps} />, { wrapper: createWrapper() });
+
+      await user.click(screen.getByText('Custom Block'));
+      await user.type(screen.getByPlaceholderText(/e.g., Christmas Day/i), 'Test');
+      await user.click(screen.getByText('Continue'));
+
+      const monthlyButton = screen.getByText('Monthly');
+      await user.click(monthlyButton);
+
+      await waitFor(() => {
+        expect(screen.getByText('Select Days of Month')).toBeInTheDocument();
+      });
+    });
+
+    it('should show month and day inputs when YEARLY recurrence is selected', async () => {
+      const user = userEvent.setup();
+      render(<TimeBlockCreatorModal {...defaultProps} />, { wrapper: createWrapper() });
+
+      await user.click(screen.getByText('Custom Block'));
+      await user.type(screen.getByPlaceholderText(/e.g., Christmas Day/i), 'Test');
+      await user.click(screen.getByText('Continue'));
+
+      const yearlyButton = screen.getByText('Yearly');
+      await user.click(yearlyButton);
+
+      await waitFor(() => {
+        expect(screen.getByText('Month')).toBeInTheDocument();
+        expect(screen.getByText('Day')).toBeInTheDocument();
+      });
+    });
+
+    it('should show holiday picker when HOLIDAY recurrence is selected', async () => {
+      const user = userEvent.setup();
+      render(<TimeBlockCreatorModal {...defaultProps} />, { wrapper: createWrapper() });
+
+      await user.click(screen.getByText('Custom Block'));
+      await user.type(screen.getByPlaceholderText(/e.g., Christmas Day/i), 'Test');
+      await user.click(screen.getByText('Continue'));
+
+      // Click the Holiday recurrence type button
+      const holidayButtons = screen.getAllByText('Holiday');
+      const holidayRecurrenceButton = holidayButtons.find(btn =>
+        btn.closest('button')?.querySelector('[class*="icon"]')
+      );
+
+      if (holidayRecurrenceButton) {
+        await user.click(holidayRecurrenceButton);
+      }
+
+      await waitFor(() => {
+        expect(screen.getByText('Select Holidays')).toBeInTheDocument();
+      });
+    });
+
+    it('should allow selecting multiple days in weekly recurrence', async () => {
+      const user = userEvent.setup();
+      render(<TimeBlockCreatorModal {...defaultProps} />, { wrapper: createWrapper() });
+
+      await user.click(screen.getByText('Custom Block'));
+      await user.type(screen.getByPlaceholderText(/e.g., Christmas Day/i), 'Test');
+      await user.click(screen.getByText('Continue'));
+
+      const weeklyButton = screen.getByText('Weekly');
+      await user.click(weeklyButton);
+
+      await waitFor(() => {
+        const monButton = screen.getByText('Mon');
+        expect(monButton).toBeInTheDocument();
+      });
+
+      const monButton = screen.getByText('Mon');
+      const tueButton = screen.getByText('Tue');
+
+      await user.click(monButton);
+      await user.click(tueButton);
+
+      // Both buttons should be selected (visual feedback)
+      expect(monButton.closest('button')).toHaveClass('bg-brand-500');
+      expect(tueButton.closest('button')).toHaveClass('bg-brand-500');
+    });
+
+    it('should provide weekends only quick action', async () => {
+      const user = userEvent.setup();
+      render(<TimeBlockCreatorModal {...defaultProps} />, { wrapper: createWrapper() });
+
+      await user.click(screen.getByText('Custom Block'));
+      await user.type(screen.getByPlaceholderText(/e.g., Christmas Day/i), 'Test');
+      await user.click(screen.getByText('Continue'));
+
+      const weeklyButton = screen.getByText('Weekly');
+      await user.click(weeklyButton);
+
+      await waitFor(() => {
+        expect(screen.getByText('Weekends only')).toBeInTheDocument();
+      });
+    });
+
+    it('should disable Continue when no dates selected in one-time mode', async () => {
+      const user = userEvent.setup();
+      render(<TimeBlockCreatorModal {...defaultProps} />, { wrapper: createWrapper() });
+
+      await user.click(screen.getByText('Custom Block'));
+      await user.type(screen.getByPlaceholderText(/e.g., Christmas Day/i), 'Test');
+      await user.click(screen.getByText('Continue'));
+
+      const continueButton = screen.getByText('Continue');
+      expect(continueButton).toBeDisabled();
+    });
+  });
+
+  describe('Review Step', () => {
+    it('should show summary of block configuration', async () => {
+      const user = userEvent.setup();
+      render(<TimeBlockCreatorModal {...defaultProps} />, { wrapper: createWrapper() });
+
+      await user.click(screen.getByText('Custom Block'));
+      await user.type(screen.getByPlaceholderText(/e.g., Christmas Day/i), 'Test Block');
+      await user.click(screen.getByText('Continue'));
+
+      // Select a date
+      const calendarDays = screen.getAllByRole('button').filter(btn => /^\d+$/.test(btn.textContent || ''));
+      if (calendarDays.length > 0) {
+        await user.click(calendarDays[15]); // Click day 15
+      }
+
+      await user.click(screen.getByText('Continue'));
+
+      await waitFor(() => {
+        expect(screen.getByText('Summary')).toBeInTheDocument();
+        expect(screen.getByText('Test Block')).toBeInTheDocument();
+      });
+    });
+
+    it('should display block type in summary', async () => {
+      const user = userEvent.setup();
+      render(<TimeBlockCreatorModal {...defaultProps} />, { wrapper: createWrapper() });
+
+      await user.click(screen.getByText('Custom Block'));
+      await user.type(screen.getByPlaceholderText(/e.g., Christmas Day/i), 'Test');
+      await user.click(screen.getByText('Continue'));
+
+      // Select date
+      const calendarDays = screen.getAllByRole('button').filter(btn => /^\d+$/.test(btn.textContent || ''));
+      if (calendarDays.length > 0) {
+        await user.click(calendarDays[15]);
+      }
+
+      await user.click(screen.getByText('Continue'));
+
+      await waitFor(() => {
+        expect(screen.getByText(/Hard Block|Soft Block/)).toBeInTheDocument();
+      });
+    });
+
+    it('should show Create Block button in review step', async () => {
+      const user = userEvent.setup();
+      render(<TimeBlockCreatorModal {...defaultProps} />, { wrapper: createWrapper() });
+
+      await user.click(screen.getByText('Custom Block'));
+      await user.type(screen.getByPlaceholderText(/e.g., Christmas Day/i), 'Test');
+      await user.click(screen.getByText('Continue'));
+
+      const calendarDays = screen.getAllByRole('button').filter(btn => /^\d+$/.test(btn.textContent || ''));
+      if (calendarDays.length > 0) {
+        await user.click(calendarDays[15]);
+      }
+
+      await user.click(screen.getByText('Continue'));
+
+      await waitFor(() => {
+        expect(screen.getByText('Create Block')).toBeInTheDocument();
+      });
+    });
+
+    it('should show Save Changes button when editing', async () => {
+      const user = userEvent.setup();
+      const editingBlock: TimeBlockListItem = {
+        id: '1',
+        title: 'Test Block',
+        block_type: 'HARD',
+        recurrence_type: 'NONE',
+        all_day: true,
+        start_date: '2025-12-25',
+        is_business_wide: true,
+      };
+
+      render(<TimeBlockCreatorModal {...defaultProps} editingBlock={editingBlock} />, { wrapper: createWrapper() });
+
+      // Navigate to review
+      await user.click(screen.getByText('Continue')); // Details to Schedule
+      await user.click(screen.getByText('Continue')); // Schedule to Review
+
+      await waitFor(() => {
+        expect(screen.getByText('Save Changes')).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Navigation', () => {
+    it('should allow going back to previous step', async () => {
+      const user = userEvent.setup();
+      render(<TimeBlockCreatorModal {...defaultProps} />, { wrapper: createWrapper() });
+
+      await user.click(screen.getByText('Custom Block'));
+      await user.type(screen.getByPlaceholderText(/e.g., Christmas Day/i), 'Test');
+      await user.click(screen.getByText('Continue'));
+
+      const backButton = screen.getByText('Back');
+      await user.click(backButton);
+
+      await waitFor(() => {
+        expect(screen.getByText('Block Weekends')).toBeInTheDocument();
+      });
+    });
+
+    it('should show step progress indicators', async () => {
+      const user = userEvent.setup();
+      render(<TimeBlockCreatorModal {...defaultProps} />, { wrapper: createWrapper() });
+
+      await user.click(screen.getByText('Custom Block'));
+
+      // Step indicators should be visible
+      const stepElements = screen.getAllByText(/preset|details|schedule|review/i);
+      expect(stepElements.length).toBeGreaterThan(0);
+    });
+
+    it('should highlight current step in progress', async () => {
+      const user = userEvent.setup();
+      render(<TimeBlockCreatorModal {...defaultProps} />, { wrapper: createWrapper() });
+
+      await user.click(screen.getByText('Custom Block'));
+
+      // Current step should have active styling
+      const { container } = render(<TimeBlockCreatorModal {...defaultProps} />, { wrapper: createWrapper() });
+      const activeSteps = container.querySelectorAll('.bg-brand-100, .bg-brand-500');
+      expect(activeSteps.length).toBeGreaterThan(0);
+    });
+  });
+
+  describe('Form Submission', () => {
+    it('should call onSubmit with correct data structure', async () => {
+      const user = userEvent.setup();
+      render(<TimeBlockCreatorModal {...defaultProps} />, { wrapper: createWrapper() });
+
+      await user.click(screen.getByText('Custom Block'));
+      await user.type(screen.getByPlaceholderText(/e.g., Christmas Day/i), 'Test Block');
+      await user.click(screen.getByText('Continue'));
+
+      // Select a date
+      const calendarDays = screen.getAllByRole('button').filter(btn => /^\d+$/.test(btn.textContent || ''));
+      if (calendarDays.length > 0) {
+        await user.click(calendarDays[15]);
+      }
+
+      await user.click(screen.getByText('Continue'));
+      await user.click(screen.getByText('Create Block'));
+
+      await waitFor(() => {
+        expect(mockOnSubmit).toHaveBeenCalled();
+      });
+    });
+
+    it('should show loading state during submission', async () => {
+      const user = userEvent.setup();
+      render(<TimeBlockCreatorModal {...defaultProps} isSubmitting={true} />, { wrapper: createWrapper() });
+
+      await user.click(screen.getByText('Custom Block'));
+      await user.type(screen.getByPlaceholderText(/e.g., Christmas Day/i), 'Test');
+      await user.click(screen.getByText('Continue'));
+
+      const calendarDays = screen.getAllByRole('button').filter(btn => /^\d+$/.test(btn.textContent || ''));
+      if (calendarDays.length > 0) {
+        await user.click(calendarDays[15]);
+      }
+
+      await user.click(screen.getByText('Continue'));
+
+      await waitFor(() => {
+        const createButton = screen.queryByText('Creating...');
+        if (createButton) {
+          expect(createButton).toBeInTheDocument();
+        }
+      });
+    });
+
+    it('should include business_wide flag for business-level blocks', async () => {
+      const user = userEvent.setup();
+      render(<TimeBlockCreatorModal {...defaultProps} />, { wrapper: createWrapper() });
+
+      await user.click(screen.getByText('Custom Block'));
+      await user.type(screen.getByPlaceholderText(/e.g., Christmas Day/i), 'Test');
+
+      // Business-wide is default
+      await user.click(screen.getByText('Continue'));
+
+      const calendarDays = screen.getAllByRole('button').filter(btn => /^\d+$/.test(btn.textContent || ''));
+      if (calendarDays.length > 0) {
+        await user.click(calendarDays[15]);
+      }
+
+      await user.click(screen.getByText('Continue'));
+      await user.click(screen.getByText('Create Block'));
+
+      await waitFor(() => {
+        expect(mockOnSubmit).toHaveBeenCalledWith(
+          expect.objectContaining({ is_business_wide: true })
+        );
+      });
+    });
+
+    it('should include resource ID for resource-level blocks', async () => {
+      const user = userEvent.setup();
+      render(<TimeBlockCreatorModal {...defaultProps} />, { wrapper: createWrapper() });
+
+      await user.click(screen.getByText('Custom Block'));
+
+      const resourceButton = screen.getByText('Specific Resource');
+      await user.click(resourceButton);
+
+      await user.type(screen.getByPlaceholderText(/e.g., Christmas Day/i), 'Test');
+
+      // Select a resource
+      const resourceSelect = screen.getByText(/Select a resource/i).closest('select');
+      if (resourceSelect) {
+        await user.selectOptions(resourceSelect as HTMLSelectElement, '1');
+      }
+
+      await user.click(screen.getByText('Continue'));
+
+      const calendarDays = screen.getAllByRole('button').filter(btn => /^\d+$/.test(btn.textContent || ''));
+      if (calendarDays.length > 0) {
+        await user.click(calendarDays[15]);
+      }
+
+      await user.click(screen.getByText('Continue'));
+      await user.click(screen.getByText('Create Block'));
+
+      await waitFor(() => {
+        expect(mockOnSubmit).toHaveBeenCalledWith(
+          expect.objectContaining({ resource: '1' })
+        );
+      });
+    });
+  });
+
+  describe('Staff Mode', () => {
+    it('should pre-select resource in staff mode', async () => {
+      const user = userEvent.setup();
+      render(
+        <TimeBlockCreatorModal {...defaultProps} staffMode={true} staffResourceId="1" />,
+        { wrapper: createWrapper() }
+      );
+
+      await user.click(screen.getByText('Custom Block'));
+
+      // Resource selector should not be visible
+      expect(screen.queryByText(/Select a resource/i)).not.toBeInTheDocument();
+    });
+
+    it('should default to SOFT blocks in staff mode', async () => {
+      const user = userEvent.setup();
+      render(
+        <TimeBlockCreatorModal {...defaultProps} staffMode={true} staffResourceId="1" />,
+        { wrapper: createWrapper() }
+      );
+
+      await user.click(screen.getByText('Custom Block'));
+      await user.type(screen.getByPlaceholderText(/e.g., Christmas Day/i), 'Time Off');
+      await user.click(screen.getByText('Continue'));
+
+      const calendarDays = screen.getAllByRole('button').filter(btn => /^\d+$/.test(btn.textContent || ''));
+      if (calendarDays.length > 0) {
+        await user.click(calendarDays[15]);
+      }
+
+      await user.click(screen.getByText('Continue'));
+      await user.click(screen.getByText('Create Block'));
+
+      await waitFor(() => {
+        expect(mockOnSubmit).toHaveBeenCalledWith(
+          expect.objectContaining({ block_type: 'SOFT' })
+        );
+      });
+    });
+
+    it('should always use resource level in staff mode', async () => {
+      const user = userEvent.setup();
+      render(
+        <TimeBlockCreatorModal {...defaultProps} staffMode={true} staffResourceId="1" />,
+        { wrapper: createWrapper() }
+      );
+
+      await user.click(screen.getByText('Custom Block'));
+      await user.type(screen.getByPlaceholderText(/e.g., Christmas Day/i), 'Time Off');
+      await user.click(screen.getByText('Continue'));
+
+      const calendarDays = screen.getAllByRole('button').filter(btn => /^\d+$/.test(btn.textContent || ''));
+      if (calendarDays.length > 0) {
+        await user.click(calendarDays[15]);
+      }
+
+      await user.click(screen.getByText('Continue'));
+      await user.click(screen.getByText('Create Block'));
+
+      await waitFor(() => {
+        expect(mockOnSubmit).toHaveBeenCalledWith(
+          expect.objectContaining({
+            resource: '1',
+            is_business_wide: false
+          })
+        );
+      });
+    });
+  });
+
+  describe('Edit Mode', () => {
+    it('should populate form with existing block data', () => {
+      const editingBlock: TimeBlockListItem = {
+        id: '1',
+        title: 'Existing Block',
+        description: 'Test description',
+        block_type: 'SOFT',
+        recurrence_type: 'NONE',
+        all_day: false,
+        start_time: '10:00',
+        end_time: '12:00',
+        start_date: '2025-12-25',
+        is_business_wide: true,
+      };
+
+      render(<TimeBlockCreatorModal {...defaultProps} editingBlock={editingBlock} />, { wrapper: createWrapper() });
+
+      const titleInput = screen.getByPlaceholderText(/e.g., Christmas Day/i) as HTMLInputElement;
+      expect(titleInput.value).toBe('Existing Block');
+
+      const descInput = screen.getByPlaceholderText(/Add any notes/i) as HTMLTextAreaElement;
+      expect(descInput.value).toBe('Test description');
+    });
+
+    it('should preserve recurrence pattern when editing', () => {
+      const editingBlock: TimeBlockListItem = {
+        id: '1',
+        title: 'Weekly Block',
+        block_type: 'HARD',
+        recurrence_type: 'WEEKLY',
+        all_day: true,
+        is_business_wide: true,
+        recurrence_pattern: { days_of_week: [0, 1, 2, 3, 4] },
+      };
+
+      render(<TimeBlockCreatorModal {...defaultProps} editingBlock={editingBlock} />, { wrapper: createWrapper() });
+
+      // Should be on schedule step with weekly selected
+      expect(screen.getByText('Select Days')).toBeInTheDocument();
+    });
+
+    it('should handle JSON string recurrence_pattern', () => {
+      const editingBlock: TimeBlockListItem = {
+        id: '1',
+        title: 'Monthly Block',
+        block_type: 'HARD',
+        recurrence_type: 'MONTHLY',
+        all_day: true,
+        is_business_wide: true,
+        recurrence_pattern: '{"days_of_month":[1,15]}' as any, // JSON string
+      };
+
+      render(<TimeBlockCreatorModal {...defaultProps} editingBlock={editingBlock} />, { wrapper: createWrapper() });
+
+      // Should parse and display correctly
+      expect(screen.getByText('Select Days of Month')).toBeInTheDocument();
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('should handle empty resources array', async () => {
+      const user = userEvent.setup();
+      render(<TimeBlockCreatorModal {...defaultProps} resources={[]} />, { wrapper: createWrapper() });
+
+      await user.click(screen.getByText('Custom Block'));
+
+      const resourceButton = screen.getByText('Specific Resource');
+      await user.click(resourceButton);
+
+      // Should show select even with no options
+      expect(screen.getByText(/Select a resource/i)).toBeInTheDocument();
+    });
+
+    it('should handle empty holidays array', async () => {
+      const user = userEvent.setup();
+      render(<TimeBlockCreatorModal {...defaultProps} holidays={[]} />, { wrapper: createWrapper() });
+
+      await user.click(screen.getByText('Holiday'));
+
+      // Should still render holiday step
+      expect(screen.getByText('Block Name')).toBeInTheDocument();
+    });
+
+    it('should reset form when modal closes and reopens', async () => {
+      const { rerender } = render(<TimeBlockCreatorModal {...defaultProps} />, { wrapper: createWrapper() });
+
+      // Close modal
+      rerender(<TimeBlockCreatorModal {...defaultProps} isOpen={false} />);
+
+      // Reopen modal
+      rerender(<TimeBlockCreatorModal {...defaultProps} isOpen={true} />);
+
+      // Should be back at preset step
+      expect(screen.getByText('Block Weekends')).toBeInTheDocument();
+    });
+  });
+});

frontend/src/components/time-blocks/__tests__/YearlyBlockCalendar.test.tsx

@@ -0,0 +1,729 @@
+/**
+ * Unit tests for YearlyBlockCalendar component
+ *
+ * Tests cover:
+ * - Component rendering with 12-month grid
+ * - Year navigation (previous/next/today)
+ * - Blocked date display (red for hard, yellow for soft)
+ * - Business-level block badge display
+ * - Legend rendering
+ * - Day click handling for block details
+ * - Loading states
+ * - Block detail popup modal
+ */
+
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import React from 'react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import YearlyBlockCalendar from '../YearlyBlockCalendar';
+import { BlockedRange } from '../../../types';
+
+// Mock hooks
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string, fallback?: string) => fallback || key,
+  }),
+}));
+
+vi.mock('../../../hooks/useTimeBlocks', () => ({
+  useBlockedRanges: vi.fn(() => ({
+    data: [],
+    isLoading: false,
+  })),
+}));
+
+// Import the mocked hook
+import * as timeBlocksHooks from '../../../hooks/useTimeBlocks';
+
+const createWrapper = () => {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+      },
+    },
+  });
+
+  return ({ children }: { children: React.ReactNode }) => (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  );
+};
+
+describe('YearlyBlockCalendar', () => {
+  const mockOnBlockClick = vi.fn();
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    vi.mocked(timeBlocksHooks.useBlockedRanges).mockReturnValue({
+      data: [],
+      isLoading: false,
+      error: null,
+      refetch: vi.fn(),
+      isError: false,
+      isFetching: false,
+      isSuccess: true,
+    } as any);
+  });
+
+  describe('Component Rendering', () => {
+    it('should render without crashing', () => {
+      render(<YearlyBlockCalendar />, { wrapper: createWrapper() });
+      expect(screen.getByText('Yearly Calendar')).toBeInTheDocument();
+    });
+
+    it('should render header with title', () => {
+      render(<YearlyBlockCalendar />, { wrapper: createWrapper() });
+      expect(screen.getByText('Yearly Calendar')).toBeInTheDocument();
+    });
+
+    it('should render current year by default', () => {
+      const currentYear = new Date().getFullYear();
+      render(<YearlyBlockCalendar />, { wrapper: createWrapper() });
+      expect(screen.getByText(currentYear.toString())).toBeInTheDocument();
+    });
+
+    it('should render 12 month grids', async () => {
+      render(<YearlyBlockCalendar />, { wrapper: createWrapper() });
+
+      await waitFor(() => {
+        expect(screen.getByText('January')).toBeInTheDocument();
+        expect(screen.getByText('February')).toBeInTheDocument();
+        expect(screen.getByText('December')).toBeInTheDocument();
+      });
+    });
+
+    it('should render legend with block types', () => {
+      render(<YearlyBlockCalendar />, { wrapper: createWrapper() });
+
+      expect(screen.getByText('Hard Block')).toBeInTheDocument();
+      expect(screen.getByText('Soft Block')).toBeInTheDocument();
+      expect(screen.getByText('Business Level')).toBeInTheDocument();
+    });
+
+    it('should render weekday headers', () => {
+      render(<YearlyBlockCalendar />, { wrapper: createWrapper() });
+
+      // Check for some weekday abbreviations
+      const sElements = screen.getAllByText('S');
+      const mElements = screen.getAllByText('M');
+      expect(sElements.length).toBeGreaterThan(0);
+      expect(mElements.length).toBeGreaterThan(0);
+    });
+  });
+
+  describe('Year Navigation', () => {
+    it('should render previous year button', () => {
+      render(<YearlyBlockCalendar />, { wrapper: createWrapper() });
+      const buttons = screen.getAllByRole('button');
+      const prevButton = buttons.find(btn => btn.querySelector('svg'));
+      expect(prevButton).toBeInTheDocument();
+    });
+
+    it('should render next year button', () => {
+      render(<YearlyBlockCalendar />, { wrapper: createWrapper() });
+      const buttons = screen.getAllByRole('button');
+      expect(buttons.length).toBeGreaterThan(0);
+    });
+
+    it('should navigate to previous year when clicking previous button', async () => {
+      const user = userEvent.setup();
+      const currentYear = new Date().getFullYear();
+
+      render(<YearlyBlockCalendar />, { wrapper: createWrapper() });
+
+      const buttons = screen.getAllByRole('button');
+      // Find the button with ChevronLeft icon (first button with SVG)
+      const prevButton = buttons[0];
+
+      await user.click(prevButton);
+
+      await waitFor(() => {
+        expect(screen.getByText((currentYear - 1).toString())).toBeInTheDocument();
+      });
+    });
+
+    it('should navigate to next year when clicking next button', async () => {
+      const user = userEvent.setup();
+      const currentYear = new Date().getFullYear();
+
+      render(<YearlyBlockCalendar />, { wrapper: createWrapper() });
+
+      const buttons = screen.getAllByRole('button');
+      // Find the button with ChevronRight icon (second button with SVG)
+      const nextButton = buttons[1];
+
+      await user.click(nextButton);
+
+      await waitFor(() => {
+        expect(screen.getByText((currentYear + 1).toString())).toBeInTheDocument();
+      });
+    });
+
+    it('should navigate to current year when clicking Today button', async () => {
+      const user = userEvent.setup();
+      const currentYear = new Date().getFullYear();
+
+      render(<YearlyBlockCalendar />, { wrapper: createWrapper() });
+
+      // Navigate away first
+      const buttons = screen.getAllByRole('button');
+      const prevButton = buttons[0];
+      await user.click(prevButton);
+
+      await waitFor(() => {
+        expect(screen.getByText((currentYear - 1).toString())).toBeInTheDocument();
+      });
+
+      // Click Today button
+      const todayButton = screen.getByText('Today');
+      await user.click(todayButton);
+
+      await waitFor(() => {
+        expect(screen.getByText(currentYear.toString())).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Blocked Dates Display', () => {
+    it('should display hard blocks in red', async () => {
+      const hardBlock: BlockedRange = {
+        start: '2025-12-25T00:00:00',
+        end: '2025-12-26T00:00:00',
+        block_type: 'HARD',
+        purpose: 'CLOSURE',
+        title: 'Christmas',
+        resource_id: null,
+        time_block_id: '1',
+      };
+
+      vi.mocked(timeBlocksHooks.useBlockedRanges).mockReturnValue({
+        data: [hardBlock],
+        isLoading: false,
+      } as any);
+
+      const { container } = render(<YearlyBlockCalendar />, { wrapper: createWrapper() });
+
+      await waitFor(() => {
+        const redCells = container.querySelectorAll('.bg-red-500, .bg-red-400');
+        expect(redCells.length).toBeGreaterThan(0);
+      });
+    });
+
+    it('should display soft blocks in yellow', async () => {
+      const softBlock: BlockedRange = {
+        start: '2025-07-04T00:00:00',
+        end: '2025-07-05T00:00:00',
+        block_type: 'SOFT',
+        purpose: 'UNAVAILABLE',
+        title: 'Preferred Off',
+        resource_id: 'resource-1',
+        time_block_id: '2',
+      };
+
+      vi.mocked(timeBlocksHooks.useBlockedRanges).mockReturnValue({
+        data: [softBlock],
+        isLoading: false,
+      } as any);
+
+      const { container } = render(<YearlyBlockCalendar />, { wrapper: createWrapper() });
+
+      await waitFor(() => {
+        const yellowCells = container.querySelectorAll('.bg-yellow-400, .bg-yellow-300');
+        expect(yellowCells.length).toBeGreaterThan(0);
+      });
+    });
+
+    it('should display business-level block badge', async () => {
+      const businessBlock: BlockedRange = {
+        start: '2025-12-25T00:00:00',
+        end: '2025-12-26T00:00:00',
+        block_type: 'HARD',
+        purpose: 'CLOSURE',
+        title: 'Business Closed',
+        resource_id: null,
+        time_block_id: '3',
+      };
+
+      vi.mocked(timeBlocksHooks.useBlockedRanges).mockReturnValue({
+        data: [businessBlock],
+        isLoading: false,
+      } as any);
+
+      render(<YearlyBlockCalendar />, { wrapper: createWrapper() });
+
+      await waitFor(() => {
+        const badges = screen.getAllByText('B');
+        expect(badges.length).toBeGreaterThan(0);
+      });
+    });
+
+    it('should not display badge for resource-level blocks', async () => {
+      const resourceBlock: BlockedRange = {
+        start: '2025-06-15T00:00:00',
+        end: '2025-06-16T00:00:00',
+        block_type: 'HARD',
+        purpose: 'UNAVAILABLE',
+        title: 'Staff Vacation',
+        resource_id: 'resource-1',
+        time_block_id: '4',
+      };
+
+      vi.mocked(timeBlocksHooks.useBlockedRanges).mockReturnValue({
+        data: [resourceBlock],
+        isLoading: false,
+      } as any);
+
+      const { container } = render(<YearlyBlockCalendar />, { wrapper: createWrapper() });
+
+      await waitFor(() => {
+        // Should have blocked dates but no "B" badge
+        const blockedCells = container.querySelectorAll('.bg-red-400, .bg-yellow-300');
+        expect(blockedCells.length).toBeGreaterThan(0);
+      });
+    });
+
+    it('should handle multi-day blocks', async () => {
+      const multiDayBlock: BlockedRange = {
+        start: '2025-08-10T00:00:00',
+        end: '2025-08-15T00:00:00', // 5 days
+        block_type: 'HARD',
+        purpose: 'UNAVAILABLE',
+        title: 'Vacation',
+        resource_id: 'resource-1',
+        time_block_id: '5',
+      };
+
+      vi.mocked(timeBlocksHooks.useBlockedRanges).mockReturnValue({
+        data: [multiDayBlock],
+        isLoading: false,
+      } as any);
+
+      const { container } = render(<YearlyBlockCalendar />, { wrapper: createWrapper() });
+
+      await waitFor(() => {
+        const blockedCells = container.querySelectorAll('.bg-red-400');
+        // Should have multiple cells for multi-day range
+        expect(blockedCells.length).toBeGreaterThanOrEqual(5);
+      });
+    });
+  });
+
+  describe('Day Click Handling', () => {
+    it('should call onBlockClick when clicking on blocked day with single block', async () => {
+      const user = userEvent.setup();
+      const block: BlockedRange = {
+        start: '2025-12-25T00:00:00',
+        end: '2025-12-26T00:00:00',
+        block_type: 'HARD',
+        purpose: 'CLOSURE',
+        title: 'Christmas',
+        resource_id: null,
+        time_block_id: 'block-123',
+      };
+
+      vi.mocked(timeBlocksHooks.useBlockedRanges).mockReturnValue({
+        data: [block],
+        isLoading: false,
+      } as any);
+
+      const { container } = render(
+        <YearlyBlockCalendar onBlockClick={mockOnBlockClick} />,
+        { wrapper: createWrapper() }
+      );
+
+      await waitFor(() => {
+        const blockedCells = container.querySelectorAll('.bg-red-500, .bg-red-400');
+        expect(blockedCells.length).toBeGreaterThan(0);
+      });
+
+      const blockedCell = container.querySelector('.bg-red-500, .bg-red-400') as HTMLElement;
+      await user.click(blockedCell);
+
+      await waitFor(() => {
+        expect(mockOnBlockClick).toHaveBeenCalledWith('block-123');
+      });
+    });
+
+    it('should not call onBlockClick when clicking on unblocked day', async () => {
+      const user = userEvent.setup();
+
+      vi.mocked(timeBlocksHooks.useBlockedRanges).mockReturnValue({
+        data: [],
+        isLoading: false,
+      } as any);
+
+      const { container } = render(
+        <YearlyBlockCalendar onBlockClick={mockOnBlockClick} />,
+        { wrapper: createWrapper() }
+      );
+
+      await waitFor(() => {
+        expect(screen.getByText('January')).toBeInTheDocument();
+      });
+
+      // Find a day cell without blocked status
+      const dayCells = container.querySelectorAll('button:not(.bg-red-500):not(.bg-yellow-400)');
+      const unblockedCell = Array.from(dayCells).find(cell => {
+        const text = cell.textContent;
+        return text && /^\d+$/.test(text);
+      });
+
+      if (unblockedCell) {
+        await user.click(unblockedCell as HTMLElement);
+        expect(mockOnBlockClick).not.toHaveBeenCalled();
+      }
+    });
+
+    it('should show popup when clicking on day with multiple blocks', async () => {
+      const user = userEvent.setup();
+      const blocks: BlockedRange[] = [
+        {
+          start: '2025-12-25T09:00:00',
+          end: '2025-12-25T12:00:00',
+          block_type: 'HARD',
+          purpose: 'CLOSURE',
+          title: 'Morning Closure',
+          resource_id: null,
+          time_block_id: 'block-1',
+        },
+        {
+          start: '2025-12-25T14:00:00',
+          end: '2025-12-25T17:00:00',
+          block_type: 'SOFT',
+          purpose: 'UNAVAILABLE',
+          title: 'Afternoon Block',
+          resource_id: 'resource-1',
+          time_block_id: 'block-2',
+        },
+      ];
+
+      vi.mocked(timeBlocksHooks.useBlockedRanges).mockReturnValue({
+        data: blocks,
+        isLoading: false,
+      } as any);
+
+      const { container } = render(
+        <YearlyBlockCalendar onBlockClick={mockOnBlockClick} />,
+        { wrapper: createWrapper() }
+      );
+
+      await waitFor(() => {
+        const blockedCells = container.querySelectorAll('.bg-red-500, .bg-red-400');
+        expect(blockedCells.length).toBeGreaterThan(0);
+      });
+
+      const blockedCell = container.querySelector('.bg-red-500, .bg-red-400') as HTMLElement;
+      await user.click(blockedCell);
+
+      await waitFor(() => {
+        // Should show popup instead of calling onBlockClick directly
+        expect(screen.getByText('Morning Closure')).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Block Detail Popup', () => {
+    it('should display block title in popup', async () => {
+      const user = userEvent.setup();
+      const block: BlockedRange = {
+        start: '2025-12-25T00:00:00',
+        end: '2025-12-26T00:00:00',
+        block_type: 'HARD',
+        purpose: 'CLOSURE',
+        title: 'Christmas Day',
+        resource_id: null,
+        time_block_id: 'block-123',
+      };
+
+      vi.mocked(timeBlocksHooks.useBlockedRanges).mockReturnValue({
+        data: [block],
+        isLoading: false,
+      } as any);
+
+      const { container } = render(<YearlyBlockCalendar />, { wrapper: createWrapper() });
+
+      await waitFor(() => {
+        const blockedCells = container.querySelectorAll('.bg-red-500, .bg-red-400');
+        expect(blockedCells.length).toBeGreaterThan(0);
+      });
+
+      const blockedCell = container.querySelector('.bg-red-500, .bg-red-400') as HTMLElement;
+      await user.click(blockedCell);
+
+      // Wait for the popup to show - it should display for blocks without time_block_id or multiple blocks
+      // Since we have time_block_id, it will call onBlockClick if provided, otherwise show popup
+      // Let's test without onBlockClick
+      await waitFor(() => {
+        expect(screen.queryByText('Christmas Day')).toBeInTheDocument();
+      });
+    });
+
+    it('should close popup when clicking X button', async () => {
+      const user = userEvent.setup();
+      const block: BlockedRange = {
+        start: '2025-12-25T00:00:00',
+        end: '2025-12-26T00:00:00',
+        block_type: 'HARD',
+        purpose: 'CLOSURE',
+        title: 'Holiday',
+        resource_id: null,
+      };
+
+      vi.mocked(timeBlocksHooks.useBlockedRanges).mockReturnValue({
+        data: [block],
+        isLoading: false,
+      } as any);
+
+      const { container } = render(<YearlyBlockCalendar />, { wrapper: createWrapper() });
+
+      await waitFor(() => {
+        const blockedCells = container.querySelectorAll('.bg-red-500, .bg-red-400');
+        expect(blockedCells.length).toBeGreaterThan(0);
+      });
+
+      const blockedCell = container.querySelector('.bg-red-500, .bg-red-400') as HTMLElement;
+      await user.click(blockedCell);
+
+      await waitFor(() => {
+        expect(screen.getByText('Holiday')).toBeInTheDocument();
+      });
+
+      const closeButtons = screen.getAllByRole('button');
+      const xButton = closeButtons.find(btn => btn.querySelector('svg'));
+
+      if (xButton) {
+        await user.click(xButton);
+        await waitFor(() => {
+          expect(screen.queryByText('Holiday')).not.toBeInTheDocument();
+        });
+      }
+    });
+
+    it('should display block type in popup', async () => {
+      const user = userEvent.setup();
+      const block: BlockedRange = {
+        start: '2025-07-04T00:00:00',
+        end: '2025-07-05T00:00:00',
+        block_type: 'SOFT',
+        purpose: 'UNAVAILABLE',
+        title: 'Independence Day',
+        resource_id: null,
+      };
+
+      vi.mocked(timeBlocksHooks.useBlockedRanges).mockReturnValue({
+        data: [block],
+        isLoading: false,
+      } as any);
+
+      const { container } = render(<YearlyBlockCalendar />, { wrapper: createWrapper() });
+
+      await waitFor(() => {
+        const blockedCells = container.querySelectorAll('.bg-yellow-400, .bg-yellow-300');
+        expect(blockedCells.length).toBeGreaterThan(0);
+      });
+
+      const blockedCell = container.querySelector('.bg-yellow-400, .bg-yellow-300') as HTMLElement;
+      await user.click(blockedCell);
+
+      await waitFor(() => {
+        expect(screen.getByText(/Soft Block/i)).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Loading State', () => {
+    it('should display loading spinner when loading', () => {
+      vi.mocked(timeBlocksHooks.useBlockedRanges).mockReturnValue({
+        data: [],
+        isLoading: true,
+      } as any);
+
+      const { container } = render(<YearlyBlockCalendar />, { wrapper: createWrapper() });
+
+      const spinner = container.querySelector('.animate-spin');
+      expect(spinner).toBeInTheDocument();
+    });
+
+    it('should not display calendar grid when loading', () => {
+      vi.mocked(timeBlocksHooks.useBlockedRanges).mockReturnValue({
+        data: [],
+        isLoading: true,
+      } as any);
+
+      render(<YearlyBlockCalendar />, { wrapper: createWrapper() });
+
+      // Calendar months should not be visible
+      expect(screen.queryByText('January')).not.toBeInTheDocument();
+    });
+
+    it('should display calendar grid after loading completes', async () => {
+      const mockUseBlockedRanges = vi.mocked(timeBlocksHooks.useBlockedRanges);
+
+      // Start with loading
+      mockUseBlockedRanges.mockReturnValue({
+        data: [],
+        isLoading: true,
+      } as any);
+
+      const { rerender } = render(<YearlyBlockCalendar />, { wrapper: createWrapper() });
+
+      // Update to loaded
+      mockUseBlockedRanges.mockReturnValue({
+        data: [],
+        isLoading: false,
+      } as any);
+
+      rerender(<YearlyBlockCalendar />);
+
+      await waitFor(() => {
+        expect(screen.getByText('January')).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Resource Filtering', () => {
+    it('should filter blocks by resource ID when provided', () => {
+      const blocks: BlockedRange[] = [
+        {
+          start: '2025-06-01T00:00:00',
+          end: '2025-06-02T00:00:00',
+          block_type: 'HARD',
+          purpose: 'UNAVAILABLE',
+          title: 'Resource 1 Block',
+          resource_id: 'resource-1',
+          time_block_id: '1',
+        },
+        {
+          start: '2025-06-03T00:00:00',
+          end: '2025-06-04T00:00:00',
+          block_type: 'HARD',
+          purpose: 'UNAVAILABLE',
+          title: 'Resource 2 Block',
+          resource_id: 'resource-2',
+          time_block_id: '2',
+        },
+      ];
+
+      vi.mocked(timeBlocksHooks.useBlockedRanges).mockReturnValue({
+        data: blocks,
+        isLoading: false,
+      } as any);
+
+      render(<YearlyBlockCalendar resourceId="resource-1" />, { wrapper: createWrapper() });
+
+      // Should call hook with resource_id parameter
+      expect(timeBlocksHooks.useBlockedRanges).toHaveBeenCalledWith(
+        expect.objectContaining({ resource_id: 'resource-1' })
+      );
+    });
+
+    it('should include business blocks when include_business is true', () => {
+      render(<YearlyBlockCalendar />, { wrapper: createWrapper() });
+
+      expect(timeBlocksHooks.useBlockedRanges).toHaveBeenCalledWith(
+        expect.objectContaining({ include_business: true })
+      );
+    });
+  });
+
+  describe('Compact Mode', () => {
+    it('should apply compact styling when compact prop is true', () => {
+      const { container } = render(<YearlyBlockCalendar compact={true} />, { wrapper: createWrapper() });
+
+      // Container should not have padding in compact mode
+      const wrapper = container.firstChild;
+      expect(wrapper).not.toHaveClass('p-4');
+    });
+
+    it('should apply normal padding when compact is false', () => {
+      const { container } = render(<YearlyBlockCalendar compact={false} />, { wrapper: createWrapper() });
+
+      const wrapper = container.firstChild as HTMLElement;
+      expect(wrapper.className).toContain('p-4');
+    });
+  });
+
+  describe('Today Highlight', () => {
+    it('should highlight current day', async () => {
+      vi.mocked(timeBlocksHooks.useBlockedRanges).mockReturnValue({
+        data: [],
+        isLoading: false,
+      } as any);
+
+      const { container } = render(<YearlyBlockCalendar />, { wrapper: createWrapper() });
+
+      await waitFor(() => {
+        expect(screen.getByText('January')).toBeInTheDocument();
+      });
+
+      // Current day should have ring styling (if it's not blocked)
+      const todayCells = container.querySelectorAll('.ring-2.ring-blue-500');
+      // May or may not have today highlighted depending on if it's blocked
+      expect(todayCells.length).toBeGreaterThanOrEqual(0);
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('should handle empty blocked ranges array', () => {
+      vi.mocked(timeBlocksHooks.useBlockedRanges).mockReturnValue({
+        data: [],
+        isLoading: false,
+      } as any);
+
+      render(<YearlyBlockCalendar />, { wrapper: createWrapper() });
+
+      expect(screen.getByText('Yearly Calendar')).toBeInTheDocument();
+    });
+
+    it('should handle blocks without time_block_id', async () => {
+      const block: BlockedRange = {
+        start: '2025-12-25T00:00:00',
+        end: '2025-12-26T00:00:00',
+        block_type: 'HARD',
+        purpose: 'BUSINESS_HOURS',
+        title: 'Business Hours',
+        resource_id: null,
+        // No time_block_id
+      };
+
+      vi.mocked(timeBlocksHooks.useBlockedRanges).mockReturnValue({
+        data: [block],
+        isLoading: false,
+      } as any);
+
+      const { container } = render(<YearlyBlockCalendar />, { wrapper: createWrapper() });
+
+      await waitFor(() => {
+        const blockedCells = container.querySelectorAll('.bg-red-500, .bg-red-400');
+        expect(blockedCells.length).toBeGreaterThan(0);
+      });
+    });
+
+    it('should handle year boundaries correctly', async () => {
+      const block: BlockedRange = {
+        start: '2025-12-31T20:00:00',
+        end: '2026-01-01T08:00:00', // Crosses year boundary
+        block_type: 'HARD',
+        purpose: 'CLOSURE',
+        title: 'New Year',
+        resource_id: null,
+        time_block_id: '1',
+      };
+
+      vi.mocked(timeBlocksHooks.useBlockedRanges).mockReturnValue({
+        data: [block],
+        isLoading: false,
+      } as any);
+
+      const { container } = render(<YearlyBlockCalendar />, { wrapper: createWrapper() });
+
+      await waitFor(() => {
+        // Should only show Dec 31 in current year
+        const blockedCells = container.querySelectorAll('.bg-red-500, .bg-red-400');
+        expect(blockedCells.length).toBeGreaterThanOrEqual(1);
+      });
+    });
+  });
+});

frontend/src/components/ui/TabGroup.tsx

@@ -72,6 +72,7 @@ export const TabGroup: React.FC<TabGroupProps> = ({
           return (
             <button
               key={tab.id}
+              type="button"
               onClick={() => !tab.disabled && onChange(tab.id)}
               disabled={tab.disabled}
               className={`${sizeClasses[size]} font-medium border-b-2 -mb-px transition-colors ${fullWidth ? 'flex-1' : ''} ${
@@ -99,6 +100,7 @@ export const TabGroup: React.FC<TabGroupProps> = ({
           return (
             <button
               key={tab.id}
+              type="button"
               onClick={() => !tab.disabled && onChange(tab.id)}
               disabled={tab.disabled}
               className={`${sizeClasses[size]} font-medium rounded-full transition-colors ${fullWidth ? 'flex-1' : ''} ${
@@ -128,6 +130,7 @@ export const TabGroup: React.FC<TabGroupProps> = ({
         return (
           <button
             key={tab.id}
+            type="button"
             onClick={() => !tab.disabled && onChange(tab.id)}
             disabled={tab.disabled}
             className={`${sizeClasses[size]} font-medium transition-colors ${fullWidth ? 'flex-1' : ''} ${

frontend/src/constants/__tests__/schedulePresets.test.ts

@@ -0,0 +1,293 @@
+/**
+ * Tests for schedulePresets constants and utility functions
+ */
+import { describe, it, expect } from 'vitest';
+import {
+  SCHEDULE_PRESETS,
+  TRIGGER_OPTIONS,
+  OFFSET_PRESETS,
+  getSchedulePreset,
+  getScheduleDescription,
+  getEventTimingDescription,
+  SchedulePreset,
+  TriggerOption,
+  OffsetPreset,
+} from '../schedulePresets';
+
+describe('SCHEDULE_PRESETS', () => {
+  it('contains interval-based presets', () => {
+    const intervalPresets = SCHEDULE_PRESETS.filter((p) => p.type === 'INTERVAL');
+    expect(intervalPresets.length).toBeGreaterThan(0);
+
+    // Check that interval presets have interval_minutes
+    intervalPresets.forEach((preset) => {
+      expect(preset.interval_minutes).toBeDefined();
+      expect(preset.interval_minutes).toBeGreaterThan(0);
+    });
+  });
+
+  it('contains cron-based presets', () => {
+    const cronPresets = SCHEDULE_PRESETS.filter((p) => p.type === 'CRON');
+    expect(cronPresets.length).toBeGreaterThan(0);
+
+    // Check that cron presets have cron_expression
+    cronPresets.forEach((preset) => {
+      expect(preset.cron_expression).toBeDefined();
+      expect(preset.cron_expression).toBeTruthy();
+    });
+  });
+
+  it('all presets have required properties', () => {
+    SCHEDULE_PRESETS.forEach((preset) => {
+      expect(preset.id).toBeTruthy();
+      expect(preset.label).toBeTruthy();
+      expect(preset.description).toBeTruthy();
+      expect(['INTERVAL', 'CRON']).toContain(preset.type);
+    });
+  });
+
+  it('preset IDs are unique', () => {
+    const ids = SCHEDULE_PRESETS.map((p) => p.id);
+    const uniqueIds = new Set(ids);
+    expect(uniqueIds.size).toBe(ids.length);
+  });
+
+  it('includes common interval presets', () => {
+    const presetIds = SCHEDULE_PRESETS.map((p) => p.id);
+    expect(presetIds).toContain('every_15min');
+    expect(presetIds).toContain('every_30min');
+    expect(presetIds).toContain('every_hour');
+    expect(presetIds).toContain('every_12hours');
+  });
+
+  it('includes common cron presets', () => {
+    const presetIds = SCHEDULE_PRESETS.map((p) => p.id);
+    expect(presetIds).toContain('daily_midnight');
+    expect(presetIds).toContain('daily_9am');
+    expect(presetIds).toContain('weekdays_9am');
+    expect(presetIds).toContain('weekly_monday');
+    expect(presetIds).toContain('monthly_1st');
+  });
+
+  it('has correct interval values', () => {
+    const every15min = SCHEDULE_PRESETS.find((p) => p.id === 'every_15min');
+    expect(every15min?.interval_minutes).toBe(15);
+
+    const everyHour = SCHEDULE_PRESETS.find((p) => p.id === 'every_hour');
+    expect(everyHour?.interval_minutes).toBe(60);
+
+    const every12hours = SCHEDULE_PRESETS.find((p) => p.id === 'every_12hours');
+    expect(every12hours?.interval_minutes).toBe(720);
+  });
+
+  it('has valid cron expressions', () => {
+    const dailyMidnight = SCHEDULE_PRESETS.find((p) => p.id === 'daily_midnight');
+    expect(dailyMidnight?.cron_expression).toBe('0 0 * * *');
+
+    const daily9am = SCHEDULE_PRESETS.find((p) => p.id === 'daily_9am');
+    expect(daily9am?.cron_expression).toBe('0 9 * * *');
+
+    const weekdays9am = SCHEDULE_PRESETS.find((p) => p.id === 'weekdays_9am');
+    expect(weekdays9am?.cron_expression).toBe('0 9 * * 1-5');
+  });
+});
+
+describe('TRIGGER_OPTIONS', () => {
+  it('contains expected trigger values', () => {
+    const values = TRIGGER_OPTIONS.map((t) => t.value);
+    expect(values).toContain('before_start');
+    expect(values).toContain('at_start');
+    expect(values).toContain('after_start');
+    expect(values).toContain('after_end');
+    expect(values).toContain('on_complete');
+    expect(values).toContain('on_cancel');
+  });
+
+  it('all options have value and label', () => {
+    TRIGGER_OPTIONS.forEach((option) => {
+      expect(option.value).toBeTruthy();
+      expect(option.label).toBeTruthy();
+    });
+  });
+
+  it('values are unique', () => {
+    const values = TRIGGER_OPTIONS.map((t) => t.value);
+    const uniqueValues = new Set(values);
+    expect(uniqueValues.size).toBe(values.length);
+  });
+});
+
+describe('OFFSET_PRESETS', () => {
+  it('contains expected offset values', () => {
+    const values = OFFSET_PRESETS.map((o) => o.value);
+    expect(values).toContain(0);
+    expect(values).toContain(5);
+    expect(values).toContain(10);
+    expect(values).toContain(15);
+    expect(values).toContain(30);
+    expect(values).toContain(60);
+  });
+
+  it('all presets have value and label', () => {
+    OFFSET_PRESETS.forEach((preset) => {
+      expect(typeof preset.value).toBe('number');
+      expect(preset.label).toBeTruthy();
+    });
+  });
+
+  it('starts with 0 (Immediately)', () => {
+    expect(OFFSET_PRESETS[0].value).toBe(0);
+    expect(OFFSET_PRESETS[0].label).toBe('Immediately');
+  });
+
+  it('ends with 60 (1 hour)', () => {
+    const lastPreset = OFFSET_PRESETS[OFFSET_PRESETS.length - 1];
+    expect(lastPreset.value).toBe(60);
+    expect(lastPreset.label).toBe('1 hour');
+  });
+});
+
+describe('getSchedulePreset', () => {
+  it('returns preset by ID', () => {
+    const preset = getSchedulePreset('every_hour');
+    expect(preset).toBeDefined();
+    expect(preset?.id).toBe('every_hour');
+    expect(preset?.interval_minutes).toBe(60);
+  });
+
+  it('returns undefined for non-existent ID', () => {
+    const preset = getSchedulePreset('non_existent');
+    expect(preset).toBeUndefined();
+  });
+
+  it('returns undefined for empty string', () => {
+    const preset = getSchedulePreset('');
+    expect(preset).toBeUndefined();
+  });
+
+  it('finds cron presets correctly', () => {
+    const preset = getSchedulePreset('daily_9am');
+    expect(preset).toBeDefined();
+    expect(preset?.type).toBe('CRON');
+    expect(preset?.cron_expression).toBe('0 9 * * *');
+  });
+});
+
+describe('getScheduleDescription', () => {
+  it('returns onetime description with date and time', () => {
+    const description = getScheduleDescription('onetime', '', '2024-12-25', '14:30');
+    expect(description).toContain('Once on');
+  });
+
+  it('returns placeholder for onetime without date/time', () => {
+    const description = getScheduleDescription('onetime', '', undefined, undefined);
+    expect(description).toBe('Select date and time');
+  });
+
+  it('returns custom cron for advanced mode', () => {
+    const description = getScheduleDescription('advanced', '', undefined, undefined, '*/5 * * * *');
+    expect(description).toBe('Custom: */5 * * * *');
+  });
+
+  it('returns default cron for advanced mode without custom value', () => {
+    const description = getScheduleDescription('advanced', '', undefined, undefined);
+    expect(description).toBe('Custom: 0 0 * * *');
+  });
+
+  it('returns preset description for preset mode', () => {
+    const description = getScheduleDescription('preset', 'every_hour', undefined, undefined);
+    expect(description).toBe('Runs 24 times per day');
+  });
+
+  it('returns fallback for unknown preset', () => {
+    const description = getScheduleDescription('preset', 'unknown', undefined, undefined);
+    expect(description).toBe('Select a schedule');
+  });
+
+  it('returns fallback for empty preset', () => {
+    const description = getScheduleDescription('preset', '', undefined, undefined);
+    expect(description).toBe('Select a schedule');
+  });
+});
+
+describe('getEventTimingDescription', () => {
+  it('returns timing for on_complete', () => {
+    const description = getEventTimingDescription('on_complete', 0);
+    expect(description).toBe('When event is completed');
+  });
+
+  it('returns timing for on_cancel', () => {
+    const description = getEventTimingDescription('on_cancel', 0);
+    expect(description).toBe('When event is canceled');
+  });
+
+  it('returns "At event start" for zero offset at start triggers', () => {
+    expect(getEventTimingDescription('at_start', 0)).toBe('At event start');
+    expect(getEventTimingDescription('before_start', 0)).toBe('At event start');
+    expect(getEventTimingDescription('after_start', 0)).toBe('At event start');
+  });
+
+  it('returns "At event end" for zero offset after_end', () => {
+    const description = getEventTimingDescription('after_end', 0);
+    expect(description).toBe('At event end');
+  });
+
+  it('returns before description for before_start with offset', () => {
+    const description = getEventTimingDescription('before_start', 15);
+    expect(description).toBe('15 min before event starts');
+  });
+
+  it('returns after description for at_start with offset', () => {
+    const description = getEventTimingDescription('at_start', 30);
+    expect(description).toBe('30 min after event starts');
+  });
+
+  it('returns after description for after_start with offset', () => {
+    const description = getEventTimingDescription('after_start', 60);
+    expect(description).toBe('1 hour after event starts');
+  });
+
+  it('returns after end description for after_end with offset', () => {
+    const description = getEventTimingDescription('after_end', 5);
+    expect(description).toBe('5 min after event ends');
+  });
+
+  it('returns "Select timing" for unknown trigger', () => {
+    const description = getEventTimingDescription('unknown', 0);
+    expect(description).toBe('Select timing');
+  });
+
+  it('handles custom offset values not in presets', () => {
+    const description = getEventTimingDescription('before_start', 45);
+    expect(description).toBe('45 min before event starts');
+  });
+});
+
+describe('Type exports', () => {
+  it('SchedulePreset type is correctly defined', () => {
+    const preset: SchedulePreset = {
+      id: 'test',
+      label: 'Test',
+      description: 'Test description',
+      type: 'INTERVAL',
+      interval_minutes: 30,
+    };
+    expect(preset.id).toBe('test');
+  });
+
+  it('TriggerOption type is correctly defined', () => {
+    const option: TriggerOption = {
+      value: 'test',
+      label: 'Test',
+    };
+    expect(option.value).toBe('test');
+  });
+
+  it('OffsetPreset type is correctly defined', () => {
+    const preset: OffsetPreset = {
+      value: 15,
+      label: '15 min',
+    };
+    expect(preset.value).toBe(15);
+  });
+});

frontend/src/data/__tests__/helpSearchIndex.test.ts

@@ -0,0 +1,210 @@
+/**
+ * Tests for helpSearchIndex data and utility functions
+ */
+import { describe, it, expect } from 'vitest';
+import {
+  helpSearchIndex,
+  getHelpContextForAI,
+  HelpPage,
+} from '../helpSearchIndex';
+
+describe('helpSearchIndex', () => {
+  it('contains help pages', () => {
+    expect(helpSearchIndex.length).toBeGreaterThan(0);
+  });
+
+  it('all pages have required properties', () => {
+    helpSearchIndex.forEach((page) => {
+      expect(page.path).toBeTruthy();
+      expect(page.title).toBeTruthy();
+      expect(page.description).toBeTruthy();
+      expect(Array.isArray(page.topics)).toBe(true);
+      expect(page.topics.length).toBeGreaterThan(0);
+      expect(page.category).toBeTruthy();
+    });
+  });
+
+  it('all paths start with /dashboard/help', () => {
+    helpSearchIndex.forEach((page) => {
+      expect(page.path.startsWith('/dashboard/help')).toBe(true);
+    });
+  });
+
+  it('paths are unique', () => {
+    const paths = helpSearchIndex.map((p) => p.path);
+    const uniquePaths = new Set(paths);
+    expect(uniquePaths.size).toBe(paths.length);
+  });
+
+  describe('categories', () => {
+    it('contains Core Features category', () => {
+      const corePages = helpSearchIndex.filter((p) => p.category === 'Core Features');
+      expect(corePages.length).toBeGreaterThan(0);
+    });
+
+    it('contains Management category', () => {
+      const managementPages = helpSearchIndex.filter((p) => p.category === 'Management');
+      expect(managementPages.length).toBeGreaterThan(0);
+    });
+
+    it('contains Communication category', () => {
+      const communicationPages = helpSearchIndex.filter((p) => p.category === 'Communication');
+      expect(communicationPages.length).toBeGreaterThan(0);
+    });
+
+    it('contains Payments category', () => {
+      const paymentPages = helpSearchIndex.filter((p) => p.category === 'Payments');
+      expect(paymentPages.length).toBeGreaterThan(0);
+    });
+
+    it('contains Automations category', () => {
+      const automationPages = helpSearchIndex.filter((p) => p.category === 'Automations');
+      expect(automationPages.length).toBeGreaterThan(0);
+    });
+
+    it('contains API category', () => {
+      const apiPages = helpSearchIndex.filter((p) => p.category === 'API');
+      expect(apiPages.length).toBeGreaterThan(0);
+    });
+
+    it('contains Settings category', () => {
+      const settingsPages = helpSearchIndex.filter((p) => p.category === 'Settings');
+      expect(settingsPages.length).toBeGreaterThan(0);
+    });
+  });
+
+  describe('specific pages', () => {
+    it('includes Dashboard page', () => {
+      const dashboard = helpSearchIndex.find((p) => p.path === '/dashboard/help/dashboard');
+      expect(dashboard).toBeDefined();
+      expect(dashboard?.title).toBe('Dashboard');
+      expect(dashboard?.category).toBe('Core Features');
+    });
+
+    it('includes Scheduler page', () => {
+      const scheduler = helpSearchIndex.find((p) => p.path === '/dashboard/help/scheduler');
+      expect(scheduler).toBeDefined();
+      expect(scheduler?.title).toBe('Scheduler');
+      expect(scheduler?.topics).toContain('calendar');
+    });
+
+    it('includes Customers page', () => {
+      const customers = helpSearchIndex.find((p) => p.path === '/dashboard/help/customers');
+      expect(customers).toBeDefined();
+      expect(customers?.title).toBe('Customers');
+      expect(customers?.category).toBe('Management');
+    });
+
+    it('includes Services page', () => {
+      const services = helpSearchIndex.find((p) => p.path === '/dashboard/help/services');
+      expect(services).toBeDefined();
+      expect(services?.topics).toContain('pricing');
+    });
+
+    it('includes API Overview page', () => {
+      const api = helpSearchIndex.find((p) => p.path === '/dashboard/help/api');
+      expect(api).toBeDefined();
+      expect(api?.title).toBe('API Overview');
+      expect(api?.category).toBe('API');
+    });
+
+    it('includes Booking Settings page', () => {
+      const booking = helpSearchIndex.find((p) => p.path === '/dashboard/help/settings/booking');
+      expect(booking).toBeDefined();
+      expect(booking?.topics).toContain('cancellation');
+      expect(booking?.topics).toContain('reschedule');
+    });
+  });
+
+  describe('topics', () => {
+    it('pages have relevant topics', () => {
+      const scheduler = helpSearchIndex.find((p) => p.path === '/dashboard/help/scheduler');
+      expect(scheduler?.topics).toContain('appointments');
+      expect(scheduler?.topics).toContain('bookings');
+      expect(scheduler?.topics).toContain('calendar');
+    });
+
+    it('payments page has payment-related topics', () => {
+      const payments = helpSearchIndex.find((p) => p.path === '/dashboard/help/payments');
+      expect(payments?.topics).toContain('payments');
+      expect(payments?.topics).toContain('stripe');
+      expect(payments?.topics).toContain('credit card');
+    });
+
+    it('staff page has staff-related topics', () => {
+      const staff = helpSearchIndex.find((p) => p.path === '/dashboard/help/staff');
+      expect(staff?.topics).toContain('permissions');
+      expect(staff?.topics).toContain('roles');
+    });
+  });
+});
+
+describe('getHelpContextForAI', () => {
+  it('returns a string', () => {
+    const context = getHelpContextForAI();
+    expect(typeof context).toBe('string');
+  });
+
+  it('contains all page titles', () => {
+    const context = getHelpContextForAI();
+    helpSearchIndex.forEach((page) => {
+      expect(context).toContain(`Page: ${page.title}`);
+    });
+  });
+
+  it('contains all page paths', () => {
+    const context = getHelpContextForAI();
+    helpSearchIndex.forEach((page) => {
+      expect(context).toContain(`Path: ${page.path}`);
+    });
+  });
+
+  it('contains all page categories', () => {
+    const context = getHelpContextForAI();
+    helpSearchIndex.forEach((page) => {
+      expect(context).toContain(`Category: ${page.category}`);
+    });
+  });
+
+  it('contains all page descriptions', () => {
+    const context = getHelpContextForAI();
+    helpSearchIndex.forEach((page) => {
+      expect(context).toContain(`Description: ${page.description}`);
+    });
+  });
+
+  it('contains topics for each page', () => {
+    const context = getHelpContextForAI();
+    helpSearchIndex.forEach((page) => {
+      expect(context).toContain(`Topics: ${page.topics.join(', ')}`);
+    });
+  });
+
+  it('uses separator between pages', () => {
+    const context = getHelpContextForAI();
+    expect(context).toContain('---');
+  });
+
+  it('is non-empty', () => {
+    const context = getHelpContextForAI();
+    expect(context.length).toBeGreaterThan(0);
+  });
+});
+
+describe('HelpPage type', () => {
+  it('can create a valid HelpPage object', () => {
+    const page: HelpPage = {
+      path: '/test',
+      title: 'Test Page',
+      description: 'A test page',
+      topics: ['test', 'example'],
+      category: 'Test Category',
+    };
+
+    expect(page.path).toBe('/test');
+    expect(page.title).toBe('Test Page');
+    expect(page.description).toBe('A test page');
+    expect(page.topics).toContain('test');
+    expect(page.category).toBe('Test Category');
+  });
+});

frontend/src/data/__tests__/navigationSearchIndex.test.ts

@@ -0,0 +1,312 @@
+/**
+ * Tests for navigationSearchIndex data and search function
+ */
+import { describe, it, expect } from 'vitest';
+import {
+  navigationSearchIndex,
+  searchNavigation,
+  NavigationItem,
+} from '../navigationSearchIndex';
+
+describe('navigationSearchIndex', () => {
+  it('contains navigation items', () => {
+    expect(navigationSearchIndex.length).toBeGreaterThan(0);
+  });
+
+  it('all items have required properties', () => {
+    navigationSearchIndex.forEach((item) => {
+      expect(item.path).toBeTruthy();
+      expect(item.title).toBeTruthy();
+      expect(item.description).toBeTruthy();
+      expect(Array.isArray(item.keywords)).toBe(true);
+      expect(item.keywords.length).toBeGreaterThan(0);
+      expect(item.icon).toBeDefined();
+      expect(item.category).toBeTruthy();
+    });
+  });
+
+  it('all paths start with /dashboard', () => {
+    navigationSearchIndex.forEach((item) => {
+      expect(item.path.startsWith('/dashboard')).toBe(true);
+    });
+  });
+
+  it('paths are unique', () => {
+    const paths = navigationSearchIndex.map((i) => i.path);
+    const uniquePaths = new Set(paths);
+    expect(uniquePaths.size).toBe(paths.length);
+  });
+
+  describe('categories', () => {
+    it('contains Analytics category', () => {
+      const items = navigationSearchIndex.filter((i) => i.category === 'Analytics');
+      expect(items.length).toBeGreaterThan(0);
+    });
+
+    it('contains Manage category', () => {
+      const items = navigationSearchIndex.filter((i) => i.category === 'Manage');
+      expect(items.length).toBeGreaterThan(0);
+    });
+
+    it('contains Communicate category', () => {
+      const items = navigationSearchIndex.filter((i) => i.category === 'Communicate');
+      expect(items.length).toBeGreaterThan(0);
+    });
+
+    it('contains Extend category', () => {
+      const items = navigationSearchIndex.filter((i) => i.category === 'Extend');
+      expect(items.length).toBeGreaterThan(0);
+    });
+
+    it('contains Settings category', () => {
+      const items = navigationSearchIndex.filter((i) => i.category === 'Settings');
+      expect(items.length).toBeGreaterThan(0);
+    });
+
+    it('contains Help category', () => {
+      const items = navigationSearchIndex.filter((i) => i.category === 'Help');
+      expect(items.length).toBeGreaterThan(0);
+    });
+
+    it('only contains valid categories', () => {
+      const validCategories = ['Analytics', 'Manage', 'Communicate', 'Extend', 'Settings', 'Help'];
+      navigationSearchIndex.forEach((item) => {
+        expect(validCategories).toContain(item.category);
+      });
+    });
+  });
+
+  describe('specific items', () => {
+    it('includes Dashboard', () => {
+      const dashboard = navigationSearchIndex.find((i) => i.path === '/dashboard');
+      expect(dashboard).toBeDefined();
+      expect(dashboard?.title).toBe('Dashboard');
+      expect(dashboard?.category).toBe('Analytics');
+    });
+
+    it('includes Scheduler', () => {
+      const scheduler = navigationSearchIndex.find((i) => i.path === '/dashboard/scheduler');
+      expect(scheduler).toBeDefined();
+      expect(scheduler?.title).toBe('Scheduler');
+      expect(scheduler?.keywords).toContain('calendar');
+    });
+
+    it('includes Customers', () => {
+      const customers = navigationSearchIndex.find((i) => i.path === '/dashboard/customers');
+      expect(customers).toBeDefined();
+      expect(customers?.title).toBe('Customers');
+      expect(customers?.permission).toBe('can_access_customers');
+    });
+
+    it('includes Settings', () => {
+      const settings = navigationSearchIndex.find((i) => i.path === '/dashboard/settings');
+      expect(settings).toBeDefined();
+      expect(settings?.title).toBe('Settings');
+    });
+
+    it('includes Help', () => {
+      const help = navigationSearchIndex.find((i) => i.path === '/dashboard/help');
+      expect(help).toBeDefined();
+      expect(help?.category).toBe('Help');
+    });
+  });
+
+  describe('permissions', () => {
+    it('some items have permission keys', () => {
+      const itemsWithPermission = navigationSearchIndex.filter((i) => i.permission);
+      expect(itemsWithPermission.length).toBeGreaterThan(0);
+    });
+
+    it('Payments requires can_access_payments permission', () => {
+      const payments = navigationSearchIndex.find((i) => i.path === '/dashboard/payments');
+      expect(payments?.permission).toBe('can_access_payments');
+    });
+
+    it('Scheduler requires can_access_scheduler permission', () => {
+      const scheduler = navigationSearchIndex.find((i) => i.path === '/dashboard/scheduler');
+      expect(scheduler?.permission).toBe('can_access_scheduler');
+    });
+  });
+
+  describe('feature keys', () => {
+    it('Contracts has contracts feature key', () => {
+      const contracts = navigationSearchIndex.find((i) => i.path === '/dashboard/contracts');
+      expect(contracts?.featureKey).toBe('contracts');
+    });
+
+    it('Automations has automations feature key', () => {
+      const automations = navigationSearchIndex.find((i) => i.path === '/dashboard/automations');
+      expect(automations?.featureKey).toBe('automations');
+    });
+  });
+});
+
+describe('searchNavigation', () => {
+  describe('empty/invalid queries', () => {
+    it('returns empty array for empty string', () => {
+      const results = searchNavigation('');
+      expect(results).toEqual([]);
+    });
+
+    it('returns empty array for whitespace only', () => {
+      const results = searchNavigation('   ');
+      expect(results).toEqual([]);
+    });
+  });
+
+  describe('exact title matches', () => {
+    it('finds Dashboard by exact title', () => {
+      const results = searchNavigation('Dashboard');
+      expect(results.length).toBeGreaterThan(0);
+      expect(results[0].title).toBe('Dashboard');
+    });
+
+    it('finds Scheduler by exact title', () => {
+      const results = searchNavigation('Scheduler');
+      expect(results.length).toBeGreaterThan(0);
+      expect(results[0].title).toBe('Scheduler');
+    });
+
+    it('case insensitive title match', () => {
+      const results = searchNavigation('dashboard');
+      expect(results.length).toBeGreaterThan(0);
+      expect(results[0].title).toBe('Dashboard');
+    });
+  });
+
+  describe('partial matches', () => {
+    it('finds items by title prefix', () => {
+      const results = searchNavigation('Sched');
+      expect(results.length).toBeGreaterThan(0);
+      expect(results.some((r) => r.title === 'Scheduler')).toBe(true);
+    });
+
+    it('finds items by title substring', () => {
+      const results = searchNavigation('omer');
+      expect(results.length).toBeGreaterThan(0);
+      expect(results.some((r) => r.title === 'Customers')).toBe(true);
+    });
+  });
+
+  describe('keyword matches', () => {
+    it('finds Scheduler by "calendar" keyword', () => {
+      const results = searchNavigation('calendar');
+      expect(results.length).toBeGreaterThan(0);
+      expect(results.some((r) => r.title === 'Scheduler')).toBe(true);
+    });
+
+    it('finds Payments by "money" keyword', () => {
+      const results = searchNavigation('money');
+      expect(results.length).toBeGreaterThan(0);
+      expect(results.some((r) => r.title === 'Payments')).toBe(true);
+    });
+
+    it('finds Staff by "employees" keyword', () => {
+      const results = searchNavigation('employees');
+      expect(results.length).toBeGreaterThan(0);
+      expect(results.some((r) => r.title === 'Staff')).toBe(true);
+    });
+  });
+
+  describe('description matches', () => {
+    it('finds items by description text', () => {
+      const results = searchNavigation('appointments');
+      expect(results.length).toBeGreaterThan(0);
+      expect(results.some((r) => r.title === 'Scheduler')).toBe(true);
+    });
+  });
+
+  describe('multi-word queries', () => {
+    it('handles multi-word queries', () => {
+      const results = searchNavigation('staff permissions');
+      expect(results.length).toBeGreaterThan(0);
+      expect(results.some((r) => r.title === 'Staff Roles')).toBe(true);
+    });
+
+    it('handles business hours query', () => {
+      const results = searchNavigation('business hours');
+      expect(results.length).toBeGreaterThan(0);
+      expect(results.some((r) => r.title === 'Business Hours')).toBe(true);
+    });
+  });
+
+  describe('limit parameter', () => {
+    it('defaults to returning max 10 results', () => {
+      const results = searchNavigation('a');
+      expect(results.length).toBeLessThanOrEqual(10);
+    });
+
+    it('respects custom limit', () => {
+      const results = searchNavigation('a', 3);
+      expect(results.length).toBeLessThanOrEqual(3);
+    });
+
+    it('limit of 1 returns only top match', () => {
+      const results = searchNavigation('dashboard', 1);
+      expect(results.length).toBe(1);
+      expect(results[0].title).toBe('Dashboard');
+    });
+  });
+
+  describe('scoring', () => {
+    it('exact title match ranks higher than keyword match', () => {
+      const results = searchNavigation('dashboard');
+      expect(results[0].title).toBe('Dashboard');
+    });
+
+    it('title prefix match ranks higher than substring match', () => {
+      const results = searchNavigation('set');
+      // Settings should rank high because it starts with "set"
+      const settingsIndex = results.findIndex((r) => r.title === 'Settings');
+      expect(settingsIndex).toBeLessThan(5);
+    });
+  });
+
+  describe('no matches', () => {
+    it('returns empty array for nonsense query', () => {
+      const results = searchNavigation('xyznonexistent123');
+      expect(results).toEqual([]);
+    });
+  });
+
+  describe('special characters', () => {
+    it('handles query with special characters', () => {
+      const results = searchNavigation('api');
+      expect(results.length).toBeGreaterThan(0);
+      expect(results.some((r) => r.path.includes('api'))).toBe(true);
+    });
+  });
+});
+
+describe('NavigationItem type', () => {
+  it('can create a valid NavigationItem object', () => {
+    const item: NavigationItem = {
+      path: '/test',
+      title: 'Test',
+      description: 'Test description',
+      keywords: ['test', 'example'],
+      icon: {} as any, // Mock icon
+      category: 'Analytics',
+      permission: 'can_access_test',
+    };
+
+    expect(item.path).toBe('/test');
+    expect(item.title).toBe('Test');
+    expect(item.category).toBe('Analytics');
+    expect(item.permission).toBe('can_access_test');
+  });
+
+  it('permission and featureKey are optional', () => {
+    const item: NavigationItem = {
+      path: '/test',
+      title: 'Test',
+      description: 'Test description',
+      keywords: ['test'],
+      icon: {} as any,
+      category: 'Help',
+    };
+
+    expect(item.permission).toBeUndefined();
+    expect(item.featureKey).toBeUndefined();
+  });
+});

frontend/src/hooks/__tests__/useLocations.test.ts

@@ -21,6 +21,9 @@ import {
   useDeleteLocation,
   useSetPrimaryLocation,
   useSetLocationActive,
+  useActiveLocations,
+  useAllLocations,
+  usePrimaryLocation,
 } from '../useLocations';
 import apiClient from '../../api/client';
 
@@ -245,4 +248,141 @@ describe('useLocations hooks', () => {
       });
     });
   });
+
+  describe('useActiveLocations', () => {
+    it('fetches only active locations', async () => {
+      const mockLocations = [
+        {
+          id: 1,
+          name: 'Main Office',
+          is_active: true,
+          is_primary: true,
+        },
+      ];
+      vi.mocked(apiClient.get).mockResolvedValue({ data: mockLocations });
+
+      const { result } = renderHook(() => useActiveLocations(), {
+        wrapper: createWrapper(),
+      });
+
+      await waitFor(() => {
+        expect(result.current.isSuccess).toBe(true);
+      });
+
+      // Should call without include_inactive parameter
+      expect(apiClient.get).toHaveBeenCalledWith('/locations/');
+      expect(result.current.data).toHaveLength(1);
+    });
+  });
+
+  describe('useAllLocations', () => {
+    it('fetches all locations including inactive', async () => {
+      const mockLocations = [
+        {
+          id: 1,
+          name: 'Main Office',
+          is_active: true,
+          is_primary: true,
+        },
+        {
+          id: 2,
+          name: 'Inactive Office',
+          is_active: false,
+          is_primary: false,
+        },
+      ];
+      vi.mocked(apiClient.get).mockResolvedValue({ data: mockLocations });
+
+      const { result } = renderHook(() => useAllLocations(), {
+        wrapper: createWrapper(),
+      });
+
+      await waitFor(() => {
+        expect(result.current.isSuccess).toBe(true);
+      });
+
+      // Should call with include_inactive=true
+      expect(apiClient.get).toHaveBeenCalledWith('/locations/?include_inactive=true');
+      expect(result.current.data).toHaveLength(2);
+    });
+  });
+
+  describe('usePrimaryLocation', () => {
+    it('returns the primary location from the list', async () => {
+      const mockLocations = [
+        {
+          id: 1,
+          name: 'Main Office',
+          is_active: true,
+          is_primary: true,
+        },
+        {
+          id: 2,
+          name: 'Branch Office',
+          is_active: true,
+          is_primary: false,
+        },
+      ];
+      vi.mocked(apiClient.get).mockResolvedValue({ data: mockLocations });
+
+      const { result } = renderHook(() => usePrimaryLocation(), {
+        wrapper: createWrapper(),
+      });
+
+      await waitFor(() => {
+        expect(result.current.isSuccess).toBe(true);
+      });
+
+      expect(result.current.data).toEqual(expect.objectContaining({
+        id: 1,
+        name: 'Main Office',
+        is_primary: true,
+      }));
+      expect(result.current.locations).toHaveLength(2);
+    });
+
+    it('returns undefined when no primary location exists', async () => {
+      const mockLocations = [
+        {
+          id: 1,
+          name: 'Office 1',
+          is_active: true,
+          is_primary: false,
+        },
+        {
+          id: 2,
+          name: 'Office 2',
+          is_active: true,
+          is_primary: false,
+        },
+      ];
+      vi.mocked(apiClient.get).mockResolvedValue({ data: mockLocations });
+
+      const { result } = renderHook(() => usePrimaryLocation(), {
+        wrapper: createWrapper(),
+      });
+
+      await waitFor(() => {
+        expect(result.current.isSuccess).toBe(true);
+      });
+
+      expect(result.current.data).toBeUndefined();
+      expect(result.current.locations).toHaveLength(2);
+    });
+
+    it('returns undefined when locations list is empty', async () => {
+      vi.mocked(apiClient.get).mockResolvedValue({ data: [] });
+
+      const { result } = renderHook(() => usePrimaryLocation(), {
+        wrapper: createWrapper(),
+      });
+
+      await waitFor(() => {
+        expect(result.current.isSuccess).toBe(true);
+      });
+
+      expect(result.current.data).toBeUndefined();
+      expect(result.current.locations).toEqual([]);
+    });
+  });
 });

frontend/src/hooks/__tests__/useNavigationSearch.test.ts

@@ -0,0 +1,548 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { renderHook, act } from '@testing-library/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import React from 'react';
+import { useNavigationSearch } from '../useNavigationSearch';
+import { User } from '../../types';
+
+// Mock dependencies
+vi.mock('../../data/navigationSearchIndex', () => ({
+  searchNavigation: vi.fn((query: string, limit: number) => {
+    if (!query.trim()) return [];
+
+    // Mock search results based on query
+    const mockResults = [
+      {
+        path: '/dashboard',
+        title: 'Dashboard',
+        description: 'Overview of your business metrics',
+        keywords: ['home', 'overview', 'metrics'],
+        icon: vi.fn(),
+        category: 'Analytics' as const,
+      },
+      {
+        path: '/dashboard/scheduler',
+        title: 'Scheduler',
+        description: 'Calendar view for managing appointments',
+        keywords: ['calendar', 'appointments', 'bookings'],
+        icon: vi.fn(),
+        category: 'Manage' as const,
+        permission: 'can_access_scheduler',
+      },
+      {
+        path: '/dashboard/resources',
+        title: 'Resources',
+        description: 'Manage staff members and equipment',
+        keywords: ['staff', 'employees', 'equipment'],
+        icon: vi.fn(),
+        category: 'Manage' as const,
+        permission: 'can_access_resources',
+      },
+      {
+        path: '/dashboard/messages',
+        title: 'Messages',
+        description: 'Send and receive messages',
+        keywords: ['email', 'sms', 'communication'],
+        icon: vi.fn(),
+        category: 'Communicate' as const,
+        permission: 'can_access_messages',
+      },
+      {
+        path: '/dashboard/automations',
+        title: 'Automations',
+        description: 'Set up automated workflows',
+        keywords: ['workflows', 'automatic', 'triggers'],
+        icon: vi.fn(),
+        category: 'Extend' as const,
+        permission: 'can_access_automations',
+        featureKey: 'automations',
+      },
+    ];
+
+    // Simple keyword matching for tests
+    const filtered = mockResults.filter(item =>
+      item.title.toLowerCase().includes(query.toLowerCase()) ||
+      item.description.toLowerCase().includes(query.toLowerCase()) ||
+      item.keywords.some(k => k.toLowerCase().includes(query.toLowerCase()))
+    );
+
+    return filtered.slice(0, limit);
+  }),
+  NavigationItem: {} as any,
+}));
+
+vi.mock('../usePlanFeatures', () => ({
+  usePlanFeatures: vi.fn(() => ({
+    canUse: vi.fn(() => true),
+  })),
+  FeatureKey: {} as any,
+}));
+
+import { searchNavigation } from '../../data/navigationSearchIndex';
+import { usePlanFeatures } from '../usePlanFeatures';
+
+// Create wrapper
+const createWrapper = () => {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: { retry: false },
+      mutations: { retry: false },
+    },
+  });
+
+  return function Wrapper({ children }: { children: React.ReactNode }) {
+    return React.createElement(QueryClientProvider, { client: queryClient }, children);
+  };
+};
+
+describe('useNavigationSearch', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('initialization', () => {
+    it('initializes with empty query and results', () => {
+      const { result } = renderHook(() => useNavigationSearch(), {
+        wrapper: createWrapper(),
+      });
+
+      expect(result.current.query).toBe('');
+      expect(result.current.results).toEqual([]);
+      expect(result.current.isSearching).toBe(false);
+    });
+
+    it('accepts custom limit option', () => {
+      const { result } = renderHook(() => useNavigationSearch({ limit: 5 }), {
+        wrapper: createWrapper(),
+      });
+
+      expect(result.current.results).toEqual([]);
+    });
+
+    it('accepts user option', () => {
+      const mockUser: User = {
+        id: 1,
+        email: 'test@example.com',
+        name: 'Test User',
+        role: 'owner',
+      };
+
+      const { result } = renderHook(() => useNavigationSearch({ user: mockUser }), {
+        wrapper: createWrapper(),
+      });
+
+      expect(result.current.results).toEqual([]);
+    });
+  });
+
+  describe('search functionality', () => {
+    it('returns results when query is set', () => {
+      const { result } = renderHook(() => useNavigationSearch(), {
+        wrapper: createWrapper(),
+      });
+
+      act(() => {
+        result.current.setQuery('dashboard');
+      });
+
+      expect(result.current.query).toBe('dashboard');
+      expect(result.current.isSearching).toBe(true);
+      expect(result.current.results.length).toBeGreaterThan(0);
+      expect(searchNavigation).toHaveBeenCalledWith('dashboard', 16); // limit * 2
+    });
+
+    it('returns empty results for empty query', () => {
+      const { result } = renderHook(() => useNavigationSearch(), {
+        wrapper: createWrapper(),
+      });
+
+      act(() => {
+        result.current.setQuery('');
+      });
+
+      expect(result.current.results).toEqual([]);
+      expect(result.current.isSearching).toBe(false);
+    });
+
+    it('returns empty results for whitespace query', () => {
+      const { result } = renderHook(() => useNavigationSearch(), {
+        wrapper: createWrapper(),
+      });
+
+      act(() => {
+        result.current.setQuery('   ');
+      });
+
+      expect(result.current.results).toEqual([]);
+      expect(result.current.isSearching).toBe(false);
+    });
+
+    it('searches with custom limit', () => {
+      const { result } = renderHook(() => useNavigationSearch({ limit: 3 }), {
+        wrapper: createWrapper(),
+      });
+
+      act(() => {
+        result.current.setQuery('dashboard');
+      });
+
+      expect(searchNavigation).toHaveBeenCalledWith('dashboard', 6); // limit * 2
+      // Results should be sliced to limit
+      expect(result.current.results.length).toBeLessThanOrEqual(3);
+    });
+  });
+
+  describe('clearSearch functionality', () => {
+    it('clears query and results', () => {
+      const { result } = renderHook(() => useNavigationSearch(), {
+        wrapper: createWrapper(),
+      });
+
+      // Set a query first
+      act(() => {
+        result.current.setQuery('dashboard');
+      });
+
+      expect(result.current.query).toBe('dashboard');
+      expect(result.current.results.length).toBeGreaterThan(0);
+
+      // Clear search
+      act(() => {
+        result.current.clearSearch();
+      });
+
+      expect(result.current.query).toBe('');
+      expect(result.current.results).toEqual([]);
+      expect(result.current.isSearching).toBe(false);
+    });
+  });
+
+  describe('permission filtering', () => {
+    it('shows all results for owner user', () => {
+      const ownerUser: User = {
+        id: 1,
+        email: 'owner@example.com',
+        name: 'Owner',
+        role: 'owner',
+      };
+
+      const { result } = renderHook(() => useNavigationSearch({ user: ownerUser }), {
+        wrapper: createWrapper(),
+      });
+
+      act(() => {
+        result.current.setQuery('scheduler');
+      });
+
+      // Owner should see scheduler result even with permission requirement
+      expect(result.current.results.length).toBeGreaterThan(0);
+    });
+
+    it('filters results for staff user without permissions', () => {
+      const staffUser: User = {
+        id: 2,
+        email: 'staff@example.com',
+        name: 'Staff',
+        role: 'staff',
+        effective_permissions: {
+          can_access_scheduler: false,
+        },
+      };
+
+      const { result } = renderHook(() => useNavigationSearch({ user: staffUser }), {
+        wrapper: createWrapper(),
+      });
+
+      act(() => {
+        result.current.setQuery('scheduler');
+      });
+
+      // Staff without permission should not see scheduler
+      const hasScheduler = result.current.results.some(r => r.path === '/dashboard/scheduler');
+      expect(hasScheduler).toBe(false);
+    });
+
+    it('shows results for staff user with permissions', () => {
+      const staffUser: User = {
+        id: 2,
+        email: 'staff@example.com',
+        name: 'Staff',
+        role: 'staff',
+        effective_permissions: {
+          can_access_scheduler: true,
+        },
+      };
+
+      const { result } = renderHook(() => useNavigationSearch({ user: staffUser }), {
+        wrapper: createWrapper(),
+      });
+
+      act(() => {
+        result.current.setQuery('scheduler');
+      });
+
+      // Staff with permission should see scheduler
+      const hasScheduler = result.current.results.some(r => r.path === '/dashboard/scheduler');
+      expect(hasScheduler).toBe(true);
+    });
+
+    it('shows results without permission requirements', () => {
+      const staffUser: User = {
+        id: 2,
+        email: 'staff@example.com',
+        name: 'Staff',
+        role: 'staff',
+        effective_permissions: {},
+      };
+
+      const { result } = renderHook(() => useNavigationSearch({ user: staffUser }), {
+        wrapper: createWrapper(),
+      });
+
+      act(() => {
+        result.current.setQuery('dashboard');
+      });
+
+      // Dashboard has no permission requirement, should be visible
+      const hasDashboard = result.current.results.some(r => r.path === '/dashboard');
+      expect(hasDashboard).toBe(true);
+    });
+
+    it('handles can_send_messages permission for messages', () => {
+      const staffUser: User = {
+        id: 2,
+        email: 'staff@example.com',
+        name: 'Staff',
+        role: 'staff',
+        can_send_messages: true,
+        effective_permissions: {
+          can_access_messages: true,  // Staff needs this in effective_permissions first
+        },
+      };
+
+      const { result } = renderHook(() => useNavigationSearch({ user: staffUser }), {
+        wrapper: createWrapper(),
+      });
+
+      act(() => {
+        result.current.setQuery('messages');
+      });
+
+      // Staff with effective_permissions for messages should see it
+      const hasMessages = result.current.results.some(r => r.path === '/dashboard/messages');
+      expect(hasMessages).toBe(true);
+    });
+
+    it('filters out messages for staff without can_send_messages', () => {
+      const staffUser: User = {
+        id: 2,
+        email: 'staff@example.com',
+        name: 'Staff',
+        role: 'staff',
+        can_send_messages: false,
+        effective_permissions: {},
+      };
+
+      const { result } = renderHook(() => useNavigationSearch({ user: staffUser }), {
+        wrapper: createWrapper(),
+      });
+
+      act(() => {
+        result.current.setQuery('messages');
+      });
+
+      // Staff without can_send_messages should not see messages
+      const hasMessages = result.current.results.some(r => r.path === '/dashboard/messages');
+      expect(hasMessages).toBe(false);
+    });
+
+    it('filters results when user is not provided', () => {
+      const { result } = renderHook(() => useNavigationSearch({ user: null }), {
+        wrapper: createWrapper(),
+      });
+
+      act(() => {
+        result.current.setQuery('scheduler');
+      });
+
+      // No user means permission-required items should be filtered out
+      const hasScheduler = result.current.results.some(r => r.path === '/dashboard/scheduler');
+      expect(hasScheduler).toBe(false);
+    });
+
+    it('handles can_send_messages for non-staff users (manager/customer)', () => {
+      const managerUser: User = {
+        id: 3,
+        email: 'manager@example.com',
+        name: 'Manager',
+        role: 'manager',
+        can_send_messages: true,
+      };
+
+      const { result } = renderHook(() => useNavigationSearch({ user: managerUser }), {
+        wrapper: createWrapper(),
+      });
+
+      act(() => {
+        result.current.setQuery('messages');
+      });
+
+      // Manager with can_send_messages should see messages
+      const hasMessages = result.current.results.some(r => r.path === '/dashboard/messages');
+      expect(hasMessages).toBe(true);
+    });
+
+    it('filters messages for non-staff users without can_send_messages', () => {
+      const managerUser: User = {
+        id: 3,
+        email: 'manager@example.com',
+        name: 'Manager',
+        role: 'manager',
+        can_send_messages: false,
+      };
+
+      const { result } = renderHook(() => useNavigationSearch({ user: managerUser }), {
+        wrapper: createWrapper(),
+      });
+
+      act(() => {
+        result.current.setQuery('messages');
+      });
+
+      // Manager without can_send_messages should not see messages
+      const hasMessages = result.current.results.some(r => r.path === '/dashboard/messages');
+      expect(hasMessages).toBe(false);
+    });
+  });
+
+  describe('feature gate filtering', () => {
+    it('filters out results for features not available in plan', () => {
+      const mockCanUse = vi.fn((key: string) => key !== 'automations');
+      vi.mocked(usePlanFeatures).mockReturnValue({
+        canUse: mockCanUse,
+      } as any);
+
+      const ownerUser: User = {
+        id: 1,
+        email: 'owner@example.com',
+        name: 'Owner',
+        role: 'owner',
+      };
+
+      const { result } = renderHook(() => useNavigationSearch({ user: ownerUser }), {
+        wrapper: createWrapper(),
+      });
+
+      act(() => {
+        result.current.setQuery('automations');
+      });
+
+      // Automations requires feature key, should be filtered out
+      const hasAutomations = result.current.results.some(r => r.path === '/dashboard/automations');
+      expect(hasAutomations).toBe(false);
+    });
+
+    it('shows results for features available in plan', () => {
+      const mockCanUse = vi.fn(() => true);
+      vi.mocked(usePlanFeatures).mockReturnValue({
+        canUse: mockCanUse,
+      } as any);
+
+      const ownerUser: User = {
+        id: 1,
+        email: 'owner@example.com',
+        name: 'Owner',
+        role: 'owner',
+      };
+
+      const { result } = renderHook(() => useNavigationSearch({ user: ownerUser }), {
+        wrapper: createWrapper(),
+      });
+
+      act(() => {
+        result.current.setQuery('automations');
+      });
+
+      // Automations feature is available, should be visible
+      const hasAutomations = result.current.results.some(r => r.path === '/dashboard/automations');
+      expect(hasAutomations).toBe(true);
+    });
+  });
+
+  describe('result limiting', () => {
+    it('limits results to specified limit', () => {
+      // Mock search to return many results
+      vi.mocked(searchNavigation).mockReturnValue(
+        Array.from({ length: 20 }, (_, i) => ({
+          path: `/dashboard/item-${i}`,
+          title: `Item ${i}`,
+          description: `Description ${i}`,
+          keywords: ['test'],
+          icon: vi.fn(),
+          category: 'Manage' as const,
+        }))
+      );
+
+      const { result } = renderHook(() => useNavigationSearch({ limit: 5 }), {
+        wrapper: createWrapper(),
+      });
+
+      act(() => {
+        result.current.setQuery('item');
+      });
+
+      expect(result.current.results.length).toBeLessThanOrEqual(5);
+    });
+
+    it('uses default limit of 8 when not specified', () => {
+      const { result } = renderHook(() => useNavigationSearch(), {
+        wrapper: createWrapper(),
+      });
+
+      act(() => {
+        result.current.setQuery('dashboard');
+      });
+
+      // Should call searchNavigation with limit * 2 (16)
+      expect(searchNavigation).toHaveBeenCalledWith('dashboard', 16);
+    });
+  });
+
+  describe('isSearching state', () => {
+    it('returns true when query has content', () => {
+      const { result } = renderHook(() => useNavigationSearch(), {
+        wrapper: createWrapper(),
+      });
+
+      act(() => {
+        result.current.setQuery('test');
+      });
+
+      expect(result.current.isSearching).toBe(true);
+    });
+
+    it('returns false for empty query', () => {
+      const { result } = renderHook(() => useNavigationSearch(), {
+        wrapper: createWrapper(),
+      });
+
+      act(() => {
+        result.current.setQuery('');
+      });
+
+      expect(result.current.isSearching).toBe(false);
+    });
+
+    it('returns false for whitespace query', () => {
+      const { result } = renderHook(() => useNavigationSearch(), {
+        wrapper: createWrapper(),
+      });
+
+      act(() => {
+        result.current.setQuery('   ');
+      });
+
+      expect(result.current.isSearching).toBe(false);
+    });
+  });
+});

frontend/src/hooks/useAuth.ts

@@ -78,6 +78,9 @@ export const useLogin = () => {
 
       // Set user in cache
       queryClient.setQueryData(['currentUser'], data.user);
+
+      // Invalidate entitlements to fetch fresh data with new auth
+      queryClient.invalidateQueries({ queryKey: ['entitlements'] });
     },
   });
 };
@@ -98,8 +101,9 @@ export const useLogout = () => {
       // Clear masquerade stack
       localStorage.removeItem('masquerade_stack');
 
-      // Clear user cache
+      // Clear user cache and entitlements
       queryClient.removeQueries({ queryKey: ['currentUser'] });
+      queryClient.removeQueries({ queryKey: ['entitlements'] });
       queryClient.clear();
 
       // Redirect to appropriate login page based on current subdomain
@@ -204,6 +208,7 @@ export const useMasquerade = () => {
       setCookie('access_token', data.access, 7);
       setCookie('refresh_token', data.refresh, 7);
       queryClient.setQueryData(['currentUser'], data.user);
+      queryClient.invalidateQueries({ queryKey: ['entitlements'] });
       window.location.href = redirectPath;
     },
   });
@@ -277,6 +282,7 @@ export const useStopMasquerade = () => {
       setCookie('access_token', data.access, 7);
       setCookie('refresh_token', data.refresh, 7);
       queryClient.setQueryData(['currentUser'], data.user);
+      queryClient.invalidateQueries({ queryKey: ['entitlements'] });
       window.location.href = redirectPath;
     },
   });

frontend/src/hooks/useBillingPlans.ts

@@ -280,7 +280,7 @@ export const PERMISSION_TO_FEATURE_CODE: Record<string, string> = {
   // Platform
   can_api_access: 'api_access',
   can_use_custom_domain: 'custom_domain',
-  can_white_label: 'remove_branding',
+  can_white_label: 'can_white_label',
 
   // Features
   can_accept_payments: 'payment_processing',
@@ -328,8 +328,9 @@ export function planFeaturesToLegacyPermissions(
       case 'custom_domain':
         permissions.can_use_custom_domain = value as boolean;
         break;
-      case 'remove_branding':
+      case 'can_white_label':
         permissions.can_white_label = value as boolean;
+        permissions.can_customize_booking_page = value as boolean;
         break;
       case 'payment_processing':
         permissions.can_accept_payments = value as boolean;
@@ -356,9 +357,6 @@ export function planFeaturesToLegacyPermissions(
       case 'audit_logs':
         permissions.can_download_logs = value as boolean;
         break;
-      case 'custom_branding':
-        permissions.can_customize_booking_page = value as boolean;
-        break;
       case 'recurring_appointments':
         permissions.can_book_repeated_events = value as boolean;
         break;

frontend/src/hooks/useBusiness.ts

@@ -60,13 +60,12 @@ export const useCurrentBusiness = () => {
           webhooks: false,
           api_access: false,
           custom_domain: false,
-          remove_branding: false,
+          white_label: false,
           custom_oauth: false,
           automations: false,
           can_create_automations: false,
           tasks: false,
           export_data: false,
-          video_conferencing: false,
           two_factor_auth: false,
           masked_calling: false,
           pos_system: false,

frontend/src/hooks/useEntitlements.ts

@@ -7,6 +7,7 @@
 
 import { useQuery } from '@tanstack/react-query';
 import { getEntitlements, Entitlements } from '../api/billing';
+import { getCookie } from '../utils/cookies';
 
 export interface UseEntitlementsResult {
   /**
@@ -54,11 +55,16 @@ export interface UseEntitlementsResult {
  * ```
  */
 export const useEntitlements = (): UseEntitlementsResult => {
+  // Check for token to conditionally enable the query
+  const token = getCookie('access_token');
+
   const { data, isLoading, refetch } = useQuery<Entitlements>({
     queryKey: ['entitlements'],
     queryFn: getEntitlements,
     staleTime: 5 * 60 * 1000, // 5 minutes
     retry: 1,
+    // Only run query when authenticated - prevents caching empty results
+    enabled: !!token,
   });
 
   const entitlements = data ?? {};

frontend/src/hooks/usePlanFeatures.ts

@@ -81,14 +81,12 @@ export const FEATURE_NAMES: Record<FeatureKey, string> = {
   webhooks: 'Webhooks',
   api_access: 'API Access',
   custom_domain: 'Custom Domain',
-  custom_branding: 'Custom Branding',
+  white_label: 'White Label',
-  remove_branding: 'Remove Branding',
   custom_oauth: 'Custom OAuth',
   automations: 'Automations',
   can_create_automations: 'Custom Automation Creation',
   tasks: 'Scheduled Tasks',
   export_data: 'Data Export',
-  video_conferencing: 'Video Conferencing',
   two_factor_auth: 'Two-Factor Authentication',
   masked_calling: 'Masked Calling',
   pos_system: 'POS System',
@@ -105,14 +103,12 @@ export const FEATURE_DESCRIPTIONS: Record<FeatureKey, string> = {
   webhooks: 'Integrate with external services using webhooks',
   api_access: 'Access the SmoothSchedule API for custom integrations',
   custom_domain: 'Use your own custom domain for your booking site',
-  custom_branding: 'Customize branding colors, logo, and styling',
+  white_label: 'Customize branding and remove SmoothSchedule branding',
-  remove_branding: 'Remove SmoothSchedule branding from customer-facing pages',
   custom_oauth: 'Configure your own OAuth credentials for social login',
   automations: 'Automate repetitive tasks with custom workflows',
   can_create_automations: 'Create custom automations tailored to your business needs',
   tasks: 'Create scheduled tasks to automate execution',
   export_data: 'Export your data to CSV or other formats',
-  video_conferencing: 'Add video conferencing links to appointments',
   two_factor_auth: 'Require two-factor authentication for enhanced security',
   masked_calling: 'Use masked phone numbers to protect privacy',
   pos_system: 'Process in-person payments with Point of Sale',

frontend/src/hooks/usePlatformEmailTemplates.ts

@@ -0,0 +1,116 @@
+/**
+ * Platform Email Templates Hooks
+ *
+ * React Query hooks for managing platform-level email templates.
+ * These templates are used for platform communications like tenant invitations,
+ * trial notifications, billing alerts, etc.
+ *
+ * Access: Superusers only
+ */
+
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import api from '../api/client';
+import {
+  PlatformEmailTemplate,
+  PlatformEmailTemplateDetail,
+  PlatformEmailTemplatePreview,
+  PlatformEmailTemplateUpdate,
+  PlatformEmailType,
+} from '../types';
+
+// Query keys
+const QUERY_KEYS = {
+  all: ['platform-email-templates'] as const,
+  detail: (type: PlatformEmailType) => ['platform-email-templates', type] as const,
+};
+
+/**
+ * Fetch all platform email templates
+ */
+export function usePlatformEmailTemplates() {
+  return useQuery<PlatformEmailTemplate[]>({
+    queryKey: QUERY_KEYS.all,
+    queryFn: async () => {
+      const { data } = await api.get('/platform/email-templates/');
+      return data;
+    },
+  });
+}
+
+/**
+ * Fetch a single platform email template by type
+ */
+export function usePlatformEmailTemplate(emailType: PlatformEmailType | null) {
+  return useQuery<PlatformEmailTemplateDetail>({
+    queryKey: emailType ? QUERY_KEYS.detail(emailType) : ['platform-email-templates', 'none'],
+    queryFn: async () => {
+      if (!emailType) throw new Error('No email type specified');
+      const { data } = await api.get(`/platform/email-templates/${emailType}/`);
+      return data;
+    },
+    enabled: !!emailType,
+  });
+}
+
+/**
+ * Update a platform email template
+ */
+export function useUpdatePlatformEmailTemplate() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async ({
+      emailType,
+      data,
+    }: {
+      emailType: PlatformEmailType;
+      data: PlatformEmailTemplateUpdate;
+    }) => {
+      const response = await api.put(`/platform/email-templates/${emailType}/`, data);
+      return response.data as PlatformEmailTemplateDetail;
+    },
+    onSuccess: (_, variables) => {
+      // Invalidate both the list and the specific template
+      queryClient.invalidateQueries({ queryKey: QUERY_KEYS.all });
+      queryClient.invalidateQueries({ queryKey: QUERY_KEYS.detail(variables.emailType) });
+    },
+  });
+}
+
+/**
+ * Reset a platform email template to its default
+ */
+export function useResetPlatformEmailTemplate() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (emailType: PlatformEmailType) => {
+      const response = await api.post(`/platform/email-templates/${emailType}/reset/`);
+      return response.data;
+    },
+    onSuccess: (_, emailType) => {
+      queryClient.invalidateQueries({ queryKey: QUERY_KEYS.all });
+      queryClient.invalidateQueries({ queryKey: QUERY_KEYS.detail(emailType) });
+    },
+  });
+}
+
+/**
+ * Preview a rendered platform email template
+ */
+export function usePreviewPlatformEmailTemplate() {
+  return useMutation({
+    mutationFn: async ({
+      emailType,
+      context = {},
+    }: {
+      emailType: PlatformEmailType;
+      context?: Record<string, string>;
+    }) => {
+      const response = await api.post(`/platform/email-templates/${emailType}/preview/`, {
+        context,
+      });
+      return response.data as PlatformEmailTemplatePreview;
+    },
+  });
+}

frontend/src/hooks/usePlatformStaffInvitations.ts

@@ -0,0 +1,178 @@
+/**
+ * Platform Staff Invitations Hooks
+ *
+ * React Query hooks for managing platform staff invitations.
+ * These are used to invite new platform_manager and platform_support users.
+ *
+ * Access: Superusers only
+ */
+
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import api from '../api/client';
+
+// Types
+export type PlatformStaffRole = 'platform_manager' | 'platform_support';
+
+export interface PlatformStaffInvitation {
+  id: number;
+  email: string;
+  role: PlatformStaffRole;
+  role_display: string;
+  status: 'PENDING' | 'ACCEPTED' | 'EXPIRED' | 'CANCELLED';
+  status_display: string;
+  invited_by: string | null;
+  invited_by_email: string | null;
+  created_at: string;
+  expires_at: string | null;
+  accepted_at: string | null;
+  is_valid: boolean;
+}
+
+export interface PlatformStaffInvitationDetail extends PlatformStaffInvitation {
+  role_description: string;
+  personal_message: string;
+  permissions: Record<string, boolean>;
+}
+
+export interface CreatePlatformStaffInvitationData {
+  email: string;
+  role: PlatformStaffRole;
+  personal_message?: string;
+}
+
+export interface AcceptPlatformStaffInvitationData {
+  password: string;
+  first_name?: string;
+  last_name?: string;
+}
+
+export interface PlatformStaffInvitationTokenData {
+  email: string;
+  role: PlatformStaffRole;
+  role_display: string;
+  role_description: string;
+  invited_by: string | null;
+  personal_message: string;
+  expires_at: string | null;
+}
+
+// Query keys
+const QUERY_KEYS = {
+  all: ['platform-staff-invitations'] as const,
+  detail: (id: number) => ['platform-staff-invitations', id] as const,
+  token: (token: string) => ['platform-staff-invitations', 'token', token] as const,
+};
+
+/**
+ * Fetch all platform staff invitations
+ */
+export function usePlatformStaffInvitations(statusFilter?: string) {
+  return useQuery<PlatformStaffInvitation[]>({
+    queryKey: [...QUERY_KEYS.all, { status: statusFilter }],
+    queryFn: async () => {
+      const params = statusFilter ? { status: statusFilter } : {};
+      const { data } = await api.get('/platform/staff-invitations/', { params });
+      return data;
+    },
+  });
+}
+
+/**
+ * Fetch a single platform staff invitation by ID
+ */
+export function usePlatformStaffInvitation(id: number | null) {
+  return useQuery<PlatformStaffInvitationDetail>({
+    queryKey: id ? QUERY_KEYS.detail(id) : ['platform-staff-invitations', 'none'],
+    queryFn: async () => {
+      if (!id) throw new Error('No invitation ID specified');
+      const { data } = await api.get(`/platform/staff-invitations/${id}/`);
+      return data;
+    },
+    enabled: !!id,
+  });
+}
+
+/**
+ * Create a new platform staff invitation
+ */
+export function useCreatePlatformStaffInvitation() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (invitationData: CreatePlatformStaffInvitationData) => {
+      const response = await api.post('/platform/staff-invitations/', invitationData);
+      return response.data;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: QUERY_KEYS.all });
+    },
+  });
+}
+
+/**
+ * Resend a platform staff invitation email
+ */
+export function useResendPlatformStaffInvitation() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (id: number) => {
+      const response = await api.post(`/platform/staff-invitations/${id}/resend/`);
+      return response.data;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: QUERY_KEYS.all });
+    },
+  });
+}
+
+/**
+ * Cancel a platform staff invitation
+ */
+export function useCancelPlatformStaffInvitation() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (id: number) => {
+      const response = await api.post(`/platform/staff-invitations/${id}/cancel/`);
+      return response.data;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: QUERY_KEYS.all });
+    },
+  });
+}
+
+/**
+ * Fetch invitation details by token (public endpoint)
+ */
+export function usePlatformStaffInvitationByToken(token: string | null) {
+  return useQuery<PlatformStaffInvitationTokenData>({
+    queryKey: token ? QUERY_KEYS.token(token) : ['platform-staff-invitations', 'token', 'none'],
+    queryFn: async () => {
+      if (!token) throw new Error('No token specified');
+      const { data } = await api.get(`/platform/staff-invitations/token/${token}/`);
+      return data;
+    },
+    enabled: !!token,
+    retry: false, // Don't retry on failure (invalid token)
+  });
+}
+
+/**
+ * Accept a platform staff invitation (public endpoint)
+ */
+export function useAcceptPlatformStaffInvitation() {
+  return useMutation({
+    mutationFn: async ({
+      token,
+      data,
+    }: {
+      token: string;
+      data: AcceptPlatformStaffInvitationData;
+    }) => {
+      const response = await api.post(`/platform/staff-invitations/token/${token}/accept/`, data);
+      return response.data;
+    },
+  });
+}

frontend/src/hooks/useQuotaStatus.ts

@@ -0,0 +1,111 @@
+/**
+ * useQuotaStatus Hook
+ *
+ * Fetches monthly quota status from the billing API.
+ * Used to show warning banners when approaching quota limits.
+ */
+
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import apiClient from '../api/client';
+
+export interface QuotaStatus {
+  billing_period: {
+    year: number;
+    month: number;
+  };
+  appointments: {
+    count: number;
+    limit: number;
+    is_unlimited: boolean;
+    usage_percentage: number;
+    remaining: number | null;
+    is_at_warning_threshold: boolean;
+    is_over_quota: boolean;
+    overage_count: number;
+    overage_amount_cents: number;
+  };
+  flow_executions: {
+    count: number;
+    amount_cents: number;
+  };
+  api_requests: {
+    date: string;
+    request_count: number;
+    quota_limit: number;
+    is_unlimited: boolean;
+    is_over_quota: boolean;
+    remaining_requests: number | null;
+    usage_percentage: number;
+  };
+  storage: {
+    current_size_mb: number;
+    current_size_gb: number;
+    peak_size_mb: number;
+    quota_limit_mb: number;
+    quota_limit_gb: number;
+    is_unlimited: boolean;
+    usage_percentage: number;
+    remaining_mb: number | null;
+    is_at_warning_threshold: boolean;
+    is_over_quota: boolean;
+    overage_mb: number;
+    overage_amount_cents: number;
+    warning_email_sent: boolean;
+    last_measured_at: string | null;
+  };
+  warning: {
+    show_banner: boolean;
+    email_sent: boolean;
+  };
+}
+
+/**
+ * Fetch current quota status
+ */
+export const fetchQuotaStatus = async (): Promise<QuotaStatus> => {
+  const response = await apiClient.get('/me/quota/');
+  return response.data;
+};
+
+/**
+ * Dismiss the quota warning banner for the current billing period
+ */
+export const dismissQuotaBanner = async (): Promise<void> => {
+  await apiClient.post('/me/quota/dismiss-banner/');
+};
+
+/**
+ * Hook to fetch quota status
+ */
+export const useQuotaStatus = () => {
+  return useQuery({
+    queryKey: ['quotaStatus'],
+    queryFn: fetchQuotaStatus,
+    staleTime: 5 * 60 * 1000, // 5 minutes
+    refetchOnWindowFocus: false,
+  });
+};
+
+/**
+ * Hook to dismiss the quota warning banner
+ */
+export const useDismissQuotaBanner = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: dismissQuotaBanner,
+    onSuccess: () => {
+      // Update the cached quota status to hide the banner
+      queryClient.setQueryData<QuotaStatus>(['quotaStatus'], (old) => {
+        if (!old) return old;
+        return {
+          ...old,
+          warning: {
+            ...old.warning,
+            show_banner: false,
+          },
+        };
+      });
+    },
+  });
+};

frontend/src/hooks/useStaffRoles.ts

@@ -37,9 +37,11 @@ export const useAvailablePermissions = () => {
     queryKey: ['staffRoles', 'availablePermissions'],
     queryFn: async () => {
       const { data } = await apiClient.get('/staff-roles/available_permissions/');
+      console.log('Available permissions from API:', data);
+      console.log('Dangerous permissions keys:', Object.keys(data.dangerous_permissions || {}));
       return data;
     },
-    staleTime: 1000 * 60 * 60, // Cache for 1 hour - permissions don't change often
+    staleTime: 0, // Temporarily disable cache for debugging
   });
 };
 

frontend/src/hooks/useTaxRates.ts

@@ -0,0 +1,176 @@
+/**
+ * Hook for looking up tax rates by ZIP code or address.
+ *
+ * Supports multiple data sources:
+ * - SST (Streamlined Sales Tax) for 24 member states - address-level accuracy
+ * - California CDTFA data
+ * - Texas Comptroller data
+ * - ZIP-based fallback for other states
+ */
+import { useQuery } from '@tanstack/react-query';
+import apiClient from '../api/client';
+
+/**
+ * Tax rate lookup result.
+ */
+export interface TaxRateLookup {
+  zip_code: string;
+  zip_ext?: string;
+  state: string;
+  combined_rate: number;
+  combined_rate_percent: string;
+  state_rate: number;
+  county_rate: number;
+  city_rate: number;
+  special_rate: number;
+  // Source and accuracy info
+  source: 'sst' | 'cdtfa' | 'tx_comptroller' | 'avalara' | 'state_dor' | 'no_sales_tax' | 'not_found';
+  accuracy: 'zip9' | 'zip5' | 'zip' | 'address' | 'jurisdiction' | 'state' | 'exact' | 'none';
+  // Jurisdiction details
+  jurisdiction_code?: string;
+  jurisdiction_name?: string;
+  county_name?: string;
+  city_name?: string;
+  // SST liability protection
+  liability_protection: boolean;
+  effective_date?: string;
+  // Legacy fields for backwards compatibility
+  risk_level?: number;
+  has_multiple_rates?: boolean;
+  note?: string;
+  error?: string;
+}
+
+/**
+ * ZIP-based tax rate (fallback data).
+ */
+export interface TaxRate {
+  id: number;
+  state: string;
+  zip_code: string;
+  tax_region_name: string;
+  estimated_combined_rate: string;
+  combined_rate_percent: string;
+  state_rate: string;
+  estimated_county_rate: string;
+  estimated_city_rate: string;
+  estimated_special_rate: string;
+  risk_level: number;
+  source: string;
+  effective_date: string;
+}
+
+/**
+ * Parameters for tax rate lookup.
+ */
+export interface TaxLookupParams {
+  zipCode: string;
+  zipExt?: string;
+  state?: string;
+  streetAddress?: string;
+}
+
+/**
+ * Look up tax rate by ZIP code or address.
+ *
+ * @param params - Lookup parameters or ZIP code string
+ * @param options - Query options
+ * @returns Tax rate lookup result
+ *
+ * @example
+ * // Simple ZIP lookup
+ * const { data } = useTaxRateLookup('84003');
+ *
+ * @example
+ * // Enhanced lookup with ZIP+4 for better accuracy
+ * const { data } = useTaxRateLookup({
+ *   zipCode: '84003',
+ *   zipExt: '1234',
+ *   state: 'UT'
+ * });
+ */
+export function useTaxRateLookup(
+  params: string | TaxLookupParams | null,
+  options?: { enabled?: boolean }
+) {
+  // Normalize params
+  const zipCode = typeof params === 'string' ? params : params?.zipCode || '';
+  const zipExt = typeof params === 'string' ? '' : params?.zipExt || '';
+  const state = typeof params === 'string' ? '' : params?.state || '';
+  const streetAddress = typeof params === 'string' ? '' : params?.streetAddress || '';
+
+  const normalizedZip = zipCode.replace(/\D/g, '').slice(0, 5);
+  const normalizedExt = zipExt.replace(/\D/g, '').slice(0, 4);
+  const normalizedState = state.replace(/[^A-Za-z]/g, '').slice(0, 2).toUpperCase();
+  const isValidZip = normalizedZip.length === 5;
+
+  // Build query key based on all params
+  const queryKey = ['tax', 'lookup', normalizedZip, normalizedExt, normalizedState, streetAddress];
+
+  return useQuery<TaxRateLookup>({
+    queryKey,
+    queryFn: async () => {
+      const response = await apiClient.get('/tax/lookup/', {
+        params: {
+          zip_code: normalizedZip,
+          ...(normalizedExt && { zip_ext: normalizedExt }),
+          ...(normalizedState && { state: normalizedState }),
+          ...(streetAddress && { street_address: streetAddress }),
+        },
+      });
+      return response.data;
+    },
+    enabled: isValidZip && (options?.enabled !== false),
+    staleTime: 1000 * 60 * 60 * 24, // Cache for 24 hours (tax rates don't change often)
+    retry: false, // Don't retry if ZIP not found
+  });
+}
+
+/**
+ * Get tax rate as a decimal for a ZIP code.
+ * Returns null if not found or still loading.
+ *
+ * @param zipCode - 5-digit US ZIP code
+ * @returns Combined tax rate as decimal (e.g., 0.0825) or null
+ */
+export function useTaxRateForZip(zipCode: string | null): number | null {
+  const { data, isSuccess } = useTaxRateLookup(zipCode);
+
+  if (isSuccess && data && data.source !== 'not_found') {
+    return data.combined_rate;
+  }
+
+  return null;
+}
+
+/**
+ * Get formatted tax rate info for display.
+ * Includes source and accuracy information.
+ */
+export function useTaxRateInfo(params: string | TaxLookupParams | null) {
+  const { data, isLoading, isError } = useTaxRateLookup(params);
+
+  if (isLoading) {
+    return { loading: true };
+  }
+
+  if (isError || !data || data.source === 'not_found') {
+    return { loading: false, notFound: true };
+  }
+
+  return {
+    loading: false,
+    notFound: false,
+    rate: data.combined_rate,
+    ratePercent: data.combined_rate_percent,
+    source: data.source,
+    accuracy: data.accuracy,
+    jurisdictionName: data.jurisdiction_name,
+    liabilityProtection: data.liability_protection,
+    note: data.note,
+    // Helper flags
+    isSST: data.source === 'sst',
+    isNoTax: data.source === 'no_sales_tax',
+    isHighAccuracy: ['zip9', 'address', 'exact'].includes(data.accuracy),
+  };
+}

frontend/src/i18n/__tests__/index.test.ts

@@ -0,0 +1,303 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import i18n, { supportedLanguages } from '../index';
+
+describe('i18n configuration', () => {
+  beforeEach(async () => {
+    // Reset i18n to default state before each test
+    await i18n.changeLanguage('en');
+    vi.clearAllMocks();
+  });
+
+  describe('supportedLanguages', () => {
+    it('contains exactly 4 languages', () => {
+      expect(supportedLanguages).toHaveLength(4);
+    });
+
+    it('includes English (en)', () => {
+      const english = supportedLanguages.find((lang) => lang.code === 'en');
+      expect(english).toBeDefined();
+      expect(english?.name).toBe('English');
+      expect(english?.flag).toBe('🇺🇸');
+    });
+
+    it('includes Spanish (es)', () => {
+      const spanish = supportedLanguages.find((lang) => lang.code === 'es');
+      expect(spanish).toBeDefined();
+      expect(spanish?.name).toBe('Español');
+      expect(spanish?.flag).toBe('🇪🇸');
+    });
+
+    it('includes French (fr)', () => {
+      const french = supportedLanguages.find((lang) => lang.code === 'fr');
+      expect(french).toBeDefined();
+      expect(french?.name).toBe('Français');
+      expect(french?.flag).toBe('🇫🇷');
+    });
+
+    it('includes German (de)', () => {
+      const german = supportedLanguages.find((lang) => lang.code === 'de');
+      expect(german).toBeDefined();
+      expect(german?.name).toBe('Deutsch');
+      expect(german?.flag).toBe('🇩🇪');
+    });
+
+    it('has correct language codes in order', () => {
+      const codes = supportedLanguages.map((lang) => lang.code);
+      expect(codes).toEqual(['en', 'es', 'fr', 'de']);
+    });
+
+    it('each language has required properties', () => {
+      supportedLanguages.forEach((lang) => {
+        expect(lang).toHaveProperty('code');
+        expect(lang).toHaveProperty('name');
+        expect(lang).toHaveProperty('flag');
+        expect(typeof lang.code).toBe('string');
+        expect(typeof lang.name).toBe('string');
+        expect(typeof lang.flag).toBe('string');
+      });
+    });
+
+    it('all language codes are unique', () => {
+      const codes = supportedLanguages.map((lang) => lang.code);
+      const uniqueCodes = new Set(codes);
+      expect(uniqueCodes.size).toBe(codes.length);
+    });
+
+    it('all language names are unique', () => {
+      const names = supportedLanguages.map((lang) => lang.name);
+      const uniqueNames = new Set(names);
+      expect(uniqueNames.size).toBe(names.length);
+    });
+  });
+
+  describe('i18n instance initialization', () => {
+    it('is initialized and ready', () => {
+      expect(i18n.isInitialized).toBe(true);
+    });
+
+    it('has fallback language set to English', () => {
+      // fallbackLng can be a string or array, check it includes 'en'
+      const fallback = i18n.options.fallbackLng;
+      if (Array.isArray(fallback)) {
+        expect(fallback).toContain('en');
+      } else {
+        expect(fallback).toBe('en');
+      }
+    });
+
+    it('has interpolation escapeValue set to false', () => {
+      expect(i18n.options.interpolation?.escapeValue).toBe(false);
+    });
+
+    it('has debug mode disabled', () => {
+      expect(i18n.options.debug).toBe(false);
+    });
+
+    it('has language detector configured', () => {
+      expect(i18n.options.detection).toBeDefined();
+      expect(i18n.options.detection?.order).toContain('localStorage');
+      expect(i18n.options.detection?.order).toContain('navigator');
+      expect(i18n.options.detection?.order).toContain('htmlTag');
+    });
+
+    it('caches language preference in localStorage', () => {
+      expect(i18n.options.detection?.caches).toContain('localStorage');
+      expect(i18n.options.detection?.lookupLocalStorage).toBe('smoothschedule_language');
+    });
+
+    it('has language detection order configured correctly', () => {
+      const detectionOrder = i18n.options.detection?.order;
+      expect(detectionOrder).toEqual(['localStorage', 'navigator', 'htmlTag']);
+    });
+  });
+
+  describe('language resources', () => {
+    it('loads English resources', () => {
+      const enResources = i18n.getResourceBundle('en', 'translation');
+      expect(enResources).toBeDefined();
+      expect(typeof enResources).toBe('object');
+      expect(Object.keys(enResources).length).toBeGreaterThan(0);
+    });
+
+    it('loads Spanish resources', () => {
+      const esResources = i18n.getResourceBundle('es', 'translation');
+      expect(esResources).toBeDefined();
+      expect(typeof esResources).toBe('object');
+      expect(Object.keys(esResources).length).toBeGreaterThan(0);
+    });
+
+    it('loads French resources', () => {
+      const frResources = i18n.getResourceBundle('fr', 'translation');
+      expect(frResources).toBeDefined();
+      expect(typeof frResources).toBe('object');
+      expect(Object.keys(frResources).length).toBeGreaterThan(0);
+    });
+
+    it('loads German resources', () => {
+      const deResources = i18n.getResourceBundle('de', 'translation');
+      expect(deResources).toBeDefined();
+      expect(typeof deResources).toBe('object');
+      expect(Object.keys(deResources).length).toBeGreaterThan(0);
+    });
+
+    it('all supported languages have resources loaded', () => {
+      supportedLanguages.forEach((lang) => {
+        const resources = i18n.getResourceBundle(lang.code, 'translation');
+        expect(resources).toBeDefined();
+        expect(Object.keys(resources).length).toBeGreaterThan(0);
+      });
+    });
+
+    it('has translation namespace configured', () => {
+      expect(i18n.hasResourceBundle('en', 'translation')).toBe(true);
+      expect(i18n.hasResourceBundle('es', 'translation')).toBe(true);
+      expect(i18n.hasResourceBundle('fr', 'translation')).toBe(true);
+      expect(i18n.hasResourceBundle('de', 'translation')).toBe(true);
+    });
+  });
+
+  describe('language switching', () => {
+    it('can change language to Spanish', async () => {
+      await i18n.changeLanguage('es');
+      expect(i18n.language).toBe('es');
+    });
+
+    it('can change language to French', async () => {
+      await i18n.changeLanguage('fr');
+      expect(i18n.language).toBe('fr');
+    });
+
+    it('can change language to German', async () => {
+      await i18n.changeLanguage('de');
+      expect(i18n.language).toBe('de');
+    });
+
+    it('can change back to English', async () => {
+      await i18n.changeLanguage('es');
+      await i18n.changeLanguage('en');
+      expect(i18n.language).toBe('en');
+    });
+
+    it('falls back to English for unknown language', async () => {
+      await i18n.changeLanguage('xx');
+      // i18n will use fallback language for unknown codes
+      const t = i18n.getFixedT('xx');
+      // Should still work due to fallback
+      expect(t).toBeDefined();
+    });
+  });
+
+  describe('translation functionality', () => {
+    it('can translate a key in English', () => {
+      i18n.changeLanguage('en');
+      // Test with a common key that should exist in translation files
+      const t = i18n.t.bind(i18n);
+      expect(t).toBeDefined();
+      expect(typeof t).toBe('function');
+    });
+
+    it('translation function returns fallback for missing keys', () => {
+      const result = i18n.t('nonexistent.key.that.does.not.exist');
+      expect(result).toBeDefined();
+      expect(typeof result).toBe('string');
+    });
+
+    it('can get translations for all languages', () => {
+      supportedLanguages.forEach((lang) => {
+        const t = i18n.getFixedT(lang.code);
+        expect(t).toBeDefined();
+        expect(typeof t).toBe('function');
+      });
+    });
+  });
+
+  describe('SupportedLanguage type', () => {
+    it('language codes match TypeScript type', () => {
+      // This test ensures the type is correctly derived from the array
+      const codes: ('en' | 'es' | 'fr' | 'de')[] = supportedLanguages.map(
+        (lang) => lang.code
+      );
+      expect(codes).toEqual(['en', 'es', 'fr', 'de']);
+    });
+  });
+
+  describe('i18n instance properties', () => {
+    it('exports a valid i18n instance', () => {
+      expect(i18n).toBeDefined();
+      expect(typeof i18n).toBe('object');
+    });
+
+    it('has translation function', () => {
+      expect(i18n.t).toBeDefined();
+      expect(typeof i18n.t).toBe('function');
+    });
+
+    it('has changeLanguage function', () => {
+      expect(i18n.changeLanguage).toBeDefined();
+      expect(typeof i18n.changeLanguage).toBe('function');
+    });
+
+    it('has language property', () => {
+      expect(i18n.language).toBeDefined();
+      expect(typeof i18n.language).toBe('string');
+    });
+
+    it('has languages property', () => {
+      expect(i18n.languages).toBeDefined();
+      expect(Array.isArray(i18n.languages)).toBe(true);
+    });
+
+    it('can load all supported languages', () => {
+      // i18n.languages may only contain the current language initially
+      // but all languages should have resources loaded
+      supportedLanguages.forEach((lang) => {
+        expect(i18n.hasResourceBundle(lang.code, 'translation')).toBe(true);
+      });
+    });
+  });
+
+  describe('resource structure', () => {
+    it('English resources have expected structure', () => {
+      const enResources = i18n.getResourceBundle('en', 'translation');
+      expect(enResources).toBeDefined();
+      // Verify it's a non-empty object
+      expect(enResources).toBeTypeOf('object');
+      expect(enResources).not.toBeNull();
+    });
+
+    it('all language resources are objects', () => {
+      supportedLanguages.forEach((lang) => {
+        const resources = i18n.getResourceBundle(lang.code, 'translation');
+        expect(resources).toBeTypeOf('object');
+        expect(resources).not.toBeNull();
+      });
+    });
+
+    it('resources have reasonable size', () => {
+      supportedLanguages.forEach((lang) => {
+        const resources = i18n.getResourceBundle(lang.code, 'translation');
+        const keys = Object.keys(resources);
+        // Each language should have translation keys
+        expect(keys.length).toBeGreaterThan(0);
+      });
+    });
+  });
+
+  describe('detection configuration', () => {
+    it('prioritizes localStorage over navigator', () => {
+      const order = i18n.options.detection?.order || [];
+      const localStorageIndex = order.indexOf('localStorage');
+      const navigatorIndex = order.indexOf('navigator');
+      expect(localStorageIndex).toBeLessThan(navigatorIndex);
+    });
+
+    it('uses correct localStorage key', () => {
+      expect(i18n.options.detection?.lookupLocalStorage).toBe('smoothschedule_language');
+    });
+
+    it('has localStorage in caches array', () => {
+      const caches = i18n.options.detection?.caches || [];
+      expect(caches).toContain('localStorage');
+    });
+  });
+});

frontend/src/i18n/locales/en.json

@@ -2368,6 +2368,74 @@
       "staff": "Staff",
       "customer": "Customer"
     },
+    "emailTemplates": {
+      "title": "Platform Email Templates",
+      "description": "Customize platform-level automated emails for tenant invitations, trial notifications, billing alerts, and more.",
+      "aboutTags": "About Template Tags",
+      "tagsDescription": "Use template tags like {{ tenant_name }} to insert dynamic content. Available tags vary by email type and are shown when editing each template.",
+      "categories": {
+        "invitation": "Invitations",
+        "trial": "Trial & Onboarding",
+        "subscription": "Subscription Changes",
+        "billing": "Billing & Payments"
+      },
+      "types": {
+        "tenant_invitation": {
+          "name": "Tenant Invitation",
+          "description": "Sent when inviting a new business to join the platform"
+        },
+        "trial_expiration_warning": {
+          "name": "Trial Expiration Warning",
+          "description": "Sent a few days before a business trial expires"
+        },
+        "trial_expired": {
+          "name": "Trial Expired",
+          "description": "Sent when a business trial has expired"
+        },
+        "plan_upgrade": {
+          "name": "Plan Upgrade Confirmation",
+          "description": "Sent when a business upgrades their subscription plan"
+        },
+        "plan_downgrade": {
+          "name": "Plan Downgrade Confirmation",
+          "description": "Sent when a business downgrades their subscription plan"
+        },
+        "subscription_cancelled": {
+          "name": "Subscription Cancelled",
+          "description": "Sent when a business cancels their subscription"
+        },
+        "payment_failed": {
+          "name": "Payment Failed",
+          "description": "Sent when a recurring payment fails"
+        },
+        "payment_succeeded": {
+          "name": "Payment Succeeded",
+          "description": "Sent after a successful subscription payment"
+        }
+      },
+      "customized": "Customized",
+      "disabled": "Disabled",
+      "subject": "Subject",
+      "edit": "Edit",
+      "resetToDefault": "Reset to Default",
+      "resetConfirmTitle": "Reset to Default?",
+      "resetConfirmMessage": "This will reset the email template to its default content. Any customizations you've made will be lost.",
+      "cancel": "Cancel",
+      "save": "Save",
+      "preview": "Preview",
+      "unsavedChanges": "Unsaved changes",
+      "emailSubject": "Email Subject",
+      "subjectPlaceholder": "Enter email subject...",
+      "subjectHint": "Use tags like {{ tenant_name }} for dynamic content",
+      "availableTags": "Available Template Tags",
+      "clickToCopy": "Click a tag to copy it. Hover for description.",
+      "emailPreview": "Email Preview",
+      "close": "Close",
+      "failedToLoad": "Failed to load template",
+      "failedToSave": "Failed to save template",
+      "failedToReset": "Failed to reset template",
+      "failedToPreview": "Failed to generate preview"
+    },
     "settings": {
       "title": "Platform Settings",
       "description": "Configure platform-wide settings and integrations",
@@ -2777,8 +2845,7 @@
           "api_access": "API access",
           "max_api_calls_per_day": "API calls/day",
           "custom_domain": "Custom domain",
-          "custom_branding": "Custom branding",
+          "can_white_label": "White label branding",
-          "remove_branding": "Remove branding",
           "multi_location": "Multi-location management",
           "team_permissions": "Team permissions",
           "audit_logs": "Audit logs",
@@ -3423,6 +3490,23 @@
       "autoArchiveWarning": "After the grace period, the oldest {{count}} {{type}} will be automatically archived.",
       "noOverages": "You are within your plan limits.",
       "resolved": "Resolved! Your usage is now within limits."
+    },
+    "appointmentBanner": {
+      "warningTitle": "Approaching Appointment Limit",
+      "overTitle": "Appointment Quota Exceeded",
+      "usage": "{{used}} of {{limit}} ({{percentage}}%)",
+      "overage": "+{{count}} @ $0.10 each",
+      "upgrade": "Upgrade Plan",
+      "overageInfo": "Appointments over your limit will be billed at $0.10 each at the end of your billing cycle."
+    },
+    "storageBanner": {
+      "warningTitle": "Approaching Storage Limit",
+      "overTitle": "Storage Quota Exceeded",
+      "usage": "{{used}} of {{limit}} ({{percentage}}%)",
+      "overage": "+{{size}} @ $0.50/GB",
+      "upgrade": "Upgrade Plan",
+      "overageInfo": "Storage over your limit will be billed at $0.50 per GB at the end of your billing cycle.",
+      "lastMeasured": "Last measured: {{time}}"
     }
   },
   "upgrade": {

frontend/src/layouts/BusinessLayout.tsx

@@ -6,6 +6,8 @@ import TrialBanner from '../components/TrialBanner';
 import SandboxBanner from '../components/SandboxBanner';
 import QuotaWarningBanner from '../components/QuotaWarningBanner';
 import QuotaOverageModal, { resetQuotaOverageModalDismissal } from '../components/QuotaOverageModal';
+import AppointmentQuotaBanner from '../components/AppointmentQuotaBanner';
+import StorageQuotaBanner from '../components/StorageQuotaBanner';
 import { Business, User } from '../types';
 import MasqueradeBanner from '../components/MasqueradeBanner';
 import OnboardingWizard from '../components/OnboardingWizard';
@@ -200,7 +202,7 @@ const BusinessLayoutContent: React.FC<BusinessLayoutProps> = ({ business, user,
             onStop={handleStopMasquerade}
           />
         )}
-        {/* Quota overage warning banner - show for owners and managers */}
+        {/* Quota overage warning banner - show for owners and managers (grace period system) */}
         {user.quota_overages && user.quota_overages.length > 0 && (
           <QuotaWarningBanner overages={user.quota_overages} />
         )}
@@ -208,6 +210,10 @@ const BusinessLayoutContent: React.FC<BusinessLayoutProps> = ({ business, user,
         {user.quota_overages && user.quota_overages.length > 0 && (
           <QuotaOverageModal overages={user.quota_overages} onDismiss={() => {}} />
         )}
+        {/* Appointment quota warning banner - 90% threshold warning (billing cycle system) */}
+        <AppointmentQuotaBanner userRole={user.role} />
+        {/* Storage quota warning banner - 90% threshold warning */}
+        <StorageQuotaBanner userRole={user.role} />
         {/* Sandbox mode banner */}
         <SandboxBannerWrapper />
         {/* Show trial banner if trial is active and payments not yet enabled */}

frontend/src/layouts/SettingsLayout.tsx

@@ -44,7 +44,7 @@ interface ParentContext {
 
 // Map settings pages to their required plan features
 const SETTINGS_PAGE_FEATURES: Record<string, FeatureKey> = {
-  '/dashboard/settings/branding': 'custom_branding',
+  '/dashboard/settings/branding': 'white_label',
   '/dashboard/settings/custom-domains': 'custom_domain',
   '/dashboard/settings/api': 'api_access',
   '/dashboard/settings/authentication': 'custom_oauth',

frontend/src/pages/Automations.tsx

@@ -387,18 +387,6 @@ export default function Automations() {
               <RefreshCw className="h-5 w-5" />
             </button>
 
-            {/* Open in new tab */}
-            {embedData?.embedUrl && (
-              <a
-                href={embedData.embedUrl}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="p-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors"
-                title={t('automations.openInTab', 'Open in new tab')}
-              >
-                <ExternalLink className="h-5 w-5" />
-              </a>
-            )}
           </div>
         </div>
       </div>

frontend/src/pages/Customers.tsx

@@ -296,6 +296,10 @@ const Customers: React.FC<CustomersProps> = ({ onMasquerade, effectiveUser }) =>
   // Only owners can masquerade as customers (per backend permissions)
   const canMasquerade = effectiveUser.role === 'owner';
 
+  // Check if user can edit customers (owners always can, staff needs permission)
+  const permissions = effectiveUser.effective_permissions || {};
+  const canEditCustomers = effectiveUser.role === 'owner' || permissions['can_edit_customers'] === true;
+
   if (isLoading) {
     return (
       <div className="p-8 max-w-7xl mx-auto">
@@ -401,6 +405,7 @@ const Customers: React.FC<CustomersProps> = ({ onMasquerade, effectiveUser }) =>
                     <td className="px-6 py-4 text-right text-gray-600 dark:text-gray-400">{customer.lastVisit ? customer.lastVisit.toLocaleDateString() : <span className="text-gray-400 italic">{t('customers.never')}</span>}</td>
                     <td className="px-6 py-4 text-right">
                       <div className="flex items-center justify-end gap-2">
+                        {canEditCustomers && (
                           <button
                             onClick={(e) => { e.stopPropagation(); handleVerifyEmailClick(customer); }}
                             disabled={verifyEmailMutation.isPending}
@@ -417,6 +422,8 @@ const Customers: React.FC<CustomersProps> = ({ onMasquerade, effectiveUser }) =>
                               <BadgeCheck size={16} />
                             )}
                           </button>
+                        )}
+                        {canEditCustomers && (
                           <button
                             onClick={(e) => { e.stopPropagation(); handleEditClick(customer); }}
                             className="text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200 font-medium text-xs inline-flex items-center gap-1 px-3 py-1 border border-gray-200 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
@@ -424,6 +431,7 @@ const Customers: React.FC<CustomersProps> = ({ onMasquerade, effectiveUser }) =>
                           >
                             <Pencil size={14} /> {t('common.edit')}
                           </button>
+                        )}
                         {canMasquerade && customerUser && (
                           <button
                             onClick={(e) => { e.stopPropagation(); onMasquerade(customerUser); }}

frontend/src/pages/EmailTemplateEditor.tsx

@@ -61,7 +61,7 @@ const transformPuckDataForEditor = (puckData: any): any => {
           ...item,
           props: {
             ...item.props,
-            id: `${item.type}-${index}-${crypto.randomUUID().substring(0, 8)}`,
+            id: `${item.type}-${index}-${Math.random().toString(36).substring(2, 10)}`,
           },
         };
       }

frontend/src/pages/Locations.tsx

@@ -4,7 +4,7 @@
  * Allows business owners/managers to manage multiple locations.
  */
 
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Location } from '../types';
 import {
@@ -15,6 +15,7 @@ import {
   useSetPrimaryLocation,
   useSetLocationActive,
 } from '../hooks/useLocations';
+import { useTaxRateLookup } from '../hooks/useTaxRates';
 import {
   Plus,
   MapPin,
@@ -25,6 +26,7 @@ import {
   Power,
   PowerOff,
   Building2,
+  Zap,
 } from 'lucide-react';
 import { Modal, FormInput, Button, Alert } from '../components/ui';
 
@@ -39,6 +41,7 @@ interface LocationFormData {
   phone: string;
   email: string;
   timezone: string;
+  default_tax_rate: string; // Stored as percentage (e.g., "8.25" for 8.25%)
 }
 
 const emptyFormData: LocationFormData = {
@@ -52,6 +55,7 @@ const emptyFormData: LocationFormData = {
   phone: '',
   email: '',
   timezone: '',
+  default_tax_rate: '',
 };
 
 const Locations: React.FC = () => {
@@ -69,6 +73,20 @@ const Locations: React.FC = () => {
   const setPrimaryMutation = useSetPrimaryLocation();
   const setActiveMutation = useSetLocationActive();
 
+  // Tax rate lookup for ZIP code auto-suggest
+  const { data: taxRateData, isLoading: isLoadingTaxRate } = useTaxRateLookup(
+    formData.country === 'US' ? formData.postal_code : null,
+    { enabled: isModalOpen && formData.country === 'US' && formData.postal_code.length >= 5 }
+  );
+
+  // Auto-apply suggested tax rate when data loads (only if field is empty)
+  useEffect(() => {
+    if (taxRateData && !formData.default_tax_rate && !editingLocation) {
+      const suggestedRate = (taxRateData.combined_rate * 100).toFixed(2);
+      setFormData(prev => ({ ...prev, default_tax_rate: suggestedRate }));
+    }
+  }, [taxRateData, formData.default_tax_rate, editingLocation]);
+
   const handleOpenCreate = () => {
     setEditingLocation(null);
     setFormData(emptyFormData);
@@ -77,6 +95,10 @@ const Locations: React.FC = () => {
 
   const handleOpenEdit = (location: Location) => {
     setEditingLocation(location);
+    // Convert tax rate from decimal (0.0825) to percentage string ("8.25")
+    const taxRatePercent = location.default_tax_rate
+      ? (Number(location.default_tax_rate) * 100).toFixed(2)
+      : '';
     setFormData({
       name: location.name,
       address_line1: location.address_line1 || '',
@@ -88,6 +110,7 @@ const Locations: React.FC = () => {
       phone: location.phone || '',
       email: location.email || '',
       timezone: location.timezone || '',
+      default_tax_rate: taxRatePercent,
     });
     setIsModalOpen(true);
     setActiveMenu(null);
@@ -101,14 +124,24 @@ const Locations: React.FC = () => {
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
 
+    // Convert tax rate from percentage string ("8.25") to decimal (0.0825)
+    const taxRateDecimal = formData.default_tax_rate
+      ? parseFloat(formData.default_tax_rate) / 100
+      : 0;
+
+    const submitData = {
+      ...formData,
+      default_tax_rate: taxRateDecimal,
+    };
+
     try {
       if (editingLocation) {
         await updateMutation.mutateAsync({
           id: editingLocation.id,
-          updates: formData,
+          updates: submitData,
         });
       } else {
-        await createMutation.mutateAsync(formData);
+        await createMutation.mutateAsync(submitData);
       }
       setIsModalOpen(false);
       setFormData(emptyFormData);
@@ -328,6 +361,60 @@ const Locations: React.FC = () => {
             />
           </div>
 
+          <div>
+            <FormInput
+              label="Default Tax Rate (%)"
+              name="default_tax_rate"
+              type="number"
+              step="0.01"
+              min="0"
+              max="100"
+              value={formData.default_tax_rate}
+              onChange={handleInputChange}
+              placeholder="e.g., 8.25"
+              hint="Tax rate applied to POS sales at this location"
+            />
+            {/* Tax rate suggestion from ZIP code lookup */}
+            {taxRateData && formData.country === 'US' && (
+              <div className="mt-2 p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
+                <div className="flex items-start gap-2">
+                  <Zap className="w-4 h-4 text-blue-600 dark:text-blue-400 mt-0.5 flex-shrink-0" />
+                  <div className="flex-1 text-sm">
+                    <p className="text-blue-800 dark:text-blue-300">
+                      <span className="font-medium">Suggested rate for {taxRateData.zip_code}:</span>{' '}
+                      {taxRateData.combined_rate_percent}
+                      {taxRateData.jurisdiction_name && (
+                        <span className="text-blue-600 dark:text-blue-400"> ({taxRateData.jurisdiction_name})</span>
+                      )}
+                    </p>
+                    {taxRateData.has_multiple_rates && (
+                      <p className="text-xs text-blue-600 dark:text-blue-400 mt-1">
+                        Note: This ZIP code spans multiple tax jurisdictions. Verify with your tax advisor.
+                      </p>
+                    )}
+                    {formData.default_tax_rate !== (taxRateData.combined_rate * 100).toFixed(2) && (
+                      <button
+                        type="button"
+                        onClick={() => setFormData(prev => ({
+                          ...prev,
+                          default_tax_rate: (taxRateData.combined_rate * 100).toFixed(2)
+                        }))}
+                        className="mt-2 text-blue-700 dark:text-blue-300 hover:text-blue-900 dark:hover:text-blue-100 font-medium underline"
+                      >
+                        Apply suggested rate
+                      </button>
+                    )}
+                  </div>
+                </div>
+              </div>
+            )}
+            {isLoadingTaxRate && formData.postal_code.length >= 5 && formData.country === 'US' && (
+              <p className="mt-2 text-sm text-gray-500 dark:text-gray-400">
+                Looking up tax rate for {formData.postal_code}...
+              </p>
+            )}
+          </div>
+
           <div className="flex justify-end gap-3 pt-4">
             <Button
               type="button"
@@ -488,6 +575,9 @@ const LocationCard: React.FC<LocationCardProps> = ({
           {location.service_count !== undefined && (
             <span>{location.service_count} services</span>
           )}
+          {location.default_tax_rate !== undefined && location.default_tax_rate > 0 && (
+            <span>{(Number(location.default_tax_rate) * 100).toFixed(2)}% tax</span>
+          )}
         </div>
 
         {/* Status Badge */}

frontend/src/pages/POS.tsx

@@ -0,0 +1,185 @@
+import React, { useEffect, useState } from 'react';
+import { Navigate } from 'react-router-dom';
+import { POSProvider, usePOS } from '../pos/context/POSContext';
+import { useLocations } from '../hooks/useLocations';
+import { useCurrentUser } from '../hooks/useAuth';
+import { useCurrentBusiness } from '../hooks/useBusiness';
+import POSLayout from '../pos/components/POSLayout';
+import POSHeader from '../pos/components/POSHeader';
+import { LoadingSpinner, Alert } from '../components/ui';
+
+/**
+ * POS Page - Main Point of Sale Interface
+ *
+ * Features:
+ * - Full-screen POS mode (hides main app navigation)
+ * - Location selection for multi-location businesses
+ * - Active shift verification
+ * - Wraps components with POSProvider context
+ *
+ * Component composition approach:
+ * - Page handles data fetching and location selection
+ * - POSProvider manages cart/shift state at top level
+ * - POSLayout handles the main grid layout
+ * - POSHeader provides minimal navigation
+ */
+
+interface POSContentProps {
+  locationId: number;
+}
+
+/**
+ * Inner content component - must be inside POSProvider
+ */
+const POSContent: React.FC<POSContentProps> = ({ locationId }) => {
+  const { state } = usePOS();
+  const { data: user } = useCurrentUser();
+  const { data: business } = useCurrentBusiness();
+
+  return (
+    <div className="h-screen flex flex-col bg-gray-50 overflow-hidden">
+      {/* Custom POS header instead of main app navigation */}
+      <POSHeader
+        businessName={business?.name || ''}
+        businessLogo={business?.logoUrl}
+        locationId={locationId}
+        staffName={user?.full_name || user?.username || 'Staff'}
+        activeShift={state.activeShift}
+        printerStatus={state.printerStatus}
+      />
+
+      {/* Main POS interface */}
+      <div className="flex-1 overflow-hidden">
+        <POSLayout />
+      </div>
+    </div>
+  );
+};
+
+/**
+ * Location selector modal for multi-location businesses
+ */
+interface LocationSelectorProps {
+  locations: Array<{ id: number; name: string; address: string }>;
+  onSelect: (locationId: number) => void;
+}
+
+const LocationSelector: React.FC<LocationSelectorProps> = ({ locations, onSelect }) => {
+  return (
+    <div className="fixed inset-0 bg-gray-900 bg-opacity-50 flex items-center justify-center z-50">
+      <div className="bg-white rounded-xl shadow-xl max-w-md w-full mx-4 p-6">
+        <h2 className="text-2xl font-bold text-gray-900 mb-2">Select Location</h2>
+        <p className="text-gray-600 mb-6">
+          Choose which location you'll be working from for this POS session.
+        </p>
+
+        <div className="space-y-3">
+          {locations.map((location) => (
+            <button
+              key={location.id}
+              onClick={() => onSelect(location.id)}
+              className="w-full p-4 bg-gray-50 hover:bg-gray-100 border border-gray-200 hover:border-blue-300 rounded-lg text-left transition-all group"
+            >
+              <div className="font-semibold text-gray-900 group-hover:text-blue-600">
+                {location.name}
+              </div>
+              <div className="text-sm text-gray-500 mt-1">{location.address}</div>
+            </button>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+/**
+ * Main POS Page Component
+ */
+const POS: React.FC = () => {
+  const { data: user, isLoading: userLoading } = useCurrentUser();
+  const { data: business, isLoading: businessLoading } = useCurrentBusiness();
+  const { data: locations, isLoading: locationsLoading } = useLocations();
+  const [selectedLocationId, setSelectedLocationId] = useState<number | null>(null);
+
+  // Check user permissions
+  const canAccessPOS = user?.role === 'owner' ||
+                       user?.role === 'staff' ||
+                       user?.effective_permissions?.can_access_pos === true;
+
+  // Auto-select location if only one exists
+  useEffect(() => {
+    if (locations && locations.length === 1 && !selectedLocationId) {
+      setSelectedLocationId(locations[0].id);
+    }
+  }, [locations, selectedLocationId]);
+
+  // Loading state
+  if (userLoading || businessLoading || locationsLoading) {
+    return (
+      <div className="h-screen flex items-center justify-center bg-gray-50">
+        <div className="text-center">
+          <LoadingSpinner size="lg" />
+          <p className="mt-4 text-gray-600">Loading POS...</p>
+        </div>
+      </div>
+    );
+  }
+
+  // Permission check
+  if (!canAccessPOS) {
+    return (
+      <div className="h-screen flex items-center justify-center bg-gray-50">
+        <div className="max-w-md mx-4">
+          <Alert variant="error">
+            You don't have permission to access the Point of Sale system.
+            Contact your administrator for access.
+          </Alert>
+        </div>
+      </div>
+    );
+  }
+
+  // No locations configured
+  if (!locations || locations.length === 0) {
+    return (
+      <div className="h-screen flex items-center justify-center bg-gray-50">
+        <div className="max-w-md mx-4 text-center">
+          <Alert variant="warning">
+            <div className="mb-2 font-semibold">No Locations Found</div>
+            <div>
+              You need to set up at least one location before using the POS system.
+              Go to Settings → Locations to add a location.
+            </div>
+          </Alert>
+          <a
+            href="/dashboard/settings/locations"
+            className="inline-block mt-4 px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
+          >
+            Go to Locations Settings
+          </a>
+        </div>
+      </div>
+    );
+  }
+
+  // Location selection required for multi-location businesses
+  if (!selectedLocationId && locations.length > 1) {
+    return (
+      <LocationSelector
+        locations={locations}
+        onSelect={setSelectedLocationId}
+      />
+    );
+  }
+
+  // Render POS interface with provider
+  const locationId = selectedLocationId || locations[0].id;
+
+  return (
+    <POSProvider initialLocationId={locationId}>
+      <POSContent locationId={locationId} />
+    </POSProvider>
+  );
+};
+
+export default POS;

frontend/src/pages/Products.tsx

@@ -0,0 +1,395 @@
+/**
+ * Products Page
+ *
+ * Manage POS products and inventory.
+ */
+
+import { useState, useMemo } from 'react';
+import { FolderOpen, ArrowLeftRight, Package } from 'lucide-react';
+import {
+  Button,
+  FormInput,
+  FormSelect,
+  TabGroup,
+  Badge,
+  EmptyState,
+  PageLoading,
+  ErrorMessage,
+} from '../components/ui';
+import { ProductEditorModal } from '../pos/components/ProductEditorModal';
+import { CategoryManagerModal } from '../pos/components/CategoryManagerModal';
+import InventoryTransferModal from '../pos/components/InventoryTransferModal';
+import {
+  useProducts,
+  useProductCategories,
+  ProductFilters,
+} from '../pos/hooks/usePOSProducts';
+import { useLowStockItems } from '../pos/hooks/useInventory';
+import { useDeleteProduct, useToggleProductStatus } from '../pos/hooks/useProductMutations';
+import { useEntitlements, FEATURE_CODES } from '../hooks/useEntitlements';
+import type { POSProduct } from '../pos/types';
+
+type ViewTab = 'all' | 'active' | 'inactive' | 'low-stock';
+
+export default function ProductsPage() {
+  // Check if POS feature is enabled
+  const { hasFeature, isLoading: entitlementsLoading } = useEntitlements();
+  const hasPOSFeature = hasFeature(FEATURE_CODES.CAN_USE_POS);
+
+  // State
+  const [activeTab, setActiveTab] = useState<ViewTab>('all');
+  const [searchQuery, setSearchQuery] = useState('');
+  const [categoryFilter, setCategoryFilter] = useState<string>('');
+  const [isEditorOpen, setIsEditorOpen] = useState(false);
+  const [isCategoryManagerOpen, setIsCategoryManagerOpen] = useState(false);
+  const [isTransferModalOpen, setIsTransferModalOpen] = useState(false);
+  const [selectedProduct, setSelectedProduct] = useState<POSProduct | null>(null);
+
+  // Build filters based on tab and search
+  const filters: ProductFilters = useMemo(() => {
+    const f: ProductFilters = {};
+
+    if (searchQuery) {
+      f.search = searchQuery;
+    }
+
+    if (categoryFilter) {
+      f.categoryId = parseInt(categoryFilter, 10);
+    }
+
+    if (activeTab === 'active') {
+      f.status = 'active';
+    } else if (activeTab === 'inactive') {
+      f.status = 'inactive';
+    }
+
+    return f;
+  }, [activeTab, searchQuery, categoryFilter]);
+
+  // Query hooks
+  const { data: products, isLoading, error } = useProducts(filters);
+  const { data: categories } = useProductCategories();
+  const { data: lowStockItems } = useLowStockItems();
+
+  // Mutation hooks
+  const deleteProduct = useDeleteProduct();
+  const toggleStatus = useToggleProductStatus();
+
+  // Filter products for low stock tab
+  const displayProducts = useMemo(() => {
+    if (activeTab === 'low-stock') {
+      // Get product IDs that are low stock
+      const lowStockProductIds = new Set(lowStockItems?.map((item) => item.product) || []);
+      return products?.filter((p) => lowStockProductIds.has(p.id)) || [];
+    }
+    return products || [];
+  }, [activeTab, products, lowStockItems]);
+
+  const handleAddProduct = () => {
+    setSelectedProduct(null);
+    setIsEditorOpen(true);
+  };
+
+  const handleEditProduct = (product: POSProduct) => {
+    setSelectedProduct(product);
+    setIsEditorOpen(true);
+  };
+
+  const handleDeleteProduct = async (product: POSProduct) => {
+    if (!confirm(`Are you sure you want to delete "${product.name}"?`)) {
+      return;
+    }
+    await deleteProduct.mutateAsync(product.id);
+  };
+
+  const handleToggleStatus = async (product: POSProduct) => {
+    await toggleStatus.mutateAsync({
+      id: product.id,
+      is_active: product.status !== 'active',
+    });
+  };
+
+  const handleTransferInventory = (product: POSProduct) => {
+    setSelectedProduct(product);
+    setIsTransferModalOpen(true);
+  };
+
+  const categoryOptions = [
+    { value: '', label: 'All Categories' },
+    ...(categories?.map((cat) => ({
+      value: cat.id.toString(),
+      label: cat.name,
+    })) || []),
+  ];
+
+  const tabs = [
+    { id: 'all' as const, label: 'All Products' },
+    { id: 'active' as const, label: 'Active' },
+    { id: 'inactive' as const, label: 'Inactive' },
+    {
+      id: 'low-stock' as const,
+      label: `Low Stock${lowStockItems?.length ? ` (${lowStockItems.length})` : ''}`,
+    },
+  ];
+
+  const formatPrice = (cents: number) => {
+    return new Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency: 'USD',
+    }).format(cents / 100);
+  };
+
+  // Check for entitlements loading
+  if (entitlementsLoading) {
+    return <PageLoading label="Loading..." />;
+  }
+
+  // Show upgrade prompt if POS is not enabled
+  if (!hasPOSFeature) {
+    return (
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
+        <div className="max-w-lg mx-auto text-center">
+          <div className="bg-white rounded-2xl shadow-lg p-8">
+            <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-6">
+              <Package className="w-8 h-8 text-blue-600" />
+            </div>
+            <h2 className="text-2xl font-bold text-gray-900 mb-3">
+              Product Management
+            </h2>
+            <p className="text-gray-600 mb-6">
+              Unlock powerful product and inventory management features with our
+              Point of Sale add-on. Track stock levels, manage categories, and more.
+            </p>
+            <div className="space-y-3">
+              <Button
+                onClick={() => window.location.href = '/dashboard/settings/billing'}
+                className="w-full"
+              >
+                Upgrade Your Plan
+              </Button>
+              <Button
+                variant="outline"
+                onClick={() => window.history.back()}
+                className="w-full"
+              >
+                Go Back
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (isLoading) {
+    return <PageLoading label="Loading products..." />;
+  }
+
+  return (
+    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+      {/* Header */}
+      <div className="flex justify-between items-center mb-6">
+        <div>
+          <h1 className="text-2xl font-bold text-gray-900">Products</h1>
+          <p className="text-gray-500 mt-1">Manage your product catalog and inventory</p>
+        </div>
+        <div className="flex gap-2">
+          <Button variant="outline" onClick={() => setIsCategoryManagerOpen(true)}>
+            <FolderOpen className="w-4 h-4 mr-2" />
+            Categories
+          </Button>
+          <Button variant="outline" onClick={() => setIsTransferModalOpen(true)}>
+            <ArrowLeftRight className="w-4 h-4 mr-2" />
+            Transfer Inventory
+          </Button>
+          <Button onClick={handleAddProduct}>Add Product</Button>
+        </div>
+      </div>
+
+      {error && <ErrorMessage message="Failed to load products. Please try again." />}
+
+      {/* Filters */}
+      <div className="mb-6 space-y-4">
+        <TabGroup
+          tabs={tabs}
+          activeTab={activeTab}
+          onChange={(tab) => setActiveTab(tab as ViewTab)}
+        />
+
+        <div className="flex gap-4">
+          <div className="flex-1">
+            <FormInput
+              placeholder="Search products..."
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+            />
+          </div>
+          <div className="w-48">
+            <FormSelect
+              value={categoryFilter}
+              onChange={(e) => setCategoryFilter(e.target.value)}
+              options={categoryOptions}
+            />
+          </div>
+        </div>
+      </div>
+
+      {/* Product List */}
+      {displayProducts.length === 0 ? (
+        <EmptyState
+          title="No products found"
+          description={
+            searchQuery || categoryFilter
+              ? 'Try adjusting your search or filters'
+              : 'Add your first product to get started'
+          }
+          action={
+            !searchQuery && !categoryFilter ? (
+              <Button onClick={handleAddProduct}>Add Product</Button>
+            ) : undefined
+          }
+        />
+      ) : (
+        <div className="bg-white shadow rounded-lg overflow-hidden">
+          <table className="min-w-full divide-y divide-gray-200">
+            <thead className="bg-gray-50">
+              <tr>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Product
+                </th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Category
+                </th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Price
+                </th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Stock
+                </th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Status
+                </th>
+                <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Actions
+                </th>
+              </tr>
+            </thead>
+            <tbody className="bg-white divide-y divide-gray-200">
+              {displayProducts.map((product) => (
+                <tr key={product.id} className="hover:bg-gray-50">
+                  <td className="px-6 py-4 whitespace-nowrap">
+                    <div>
+                      <div className="text-sm font-medium text-gray-900">
+                        {product.name}
+                      </div>
+                      {product.sku && (
+                        <div className="text-sm text-gray-500">SKU: {product.sku}</div>
+                      )}
+                    </div>
+                  </td>
+                  <td className="px-6 py-4 whitespace-nowrap">
+                    <span className="text-sm text-gray-500">
+                      {product.category_name || '—'}
+                    </span>
+                  </td>
+                  <td className="px-6 py-4 whitespace-nowrap">
+                    <span className="text-sm font-medium text-gray-900">
+                      {formatPrice(product.price_cents)}
+                    </span>
+                  </td>
+                  <td className="px-6 py-4 whitespace-nowrap">
+                    {product.track_inventory ? (
+                      <div className="flex items-center gap-2">
+                        <span
+                          className={`text-sm ${
+                            product.is_low_stock ? 'text-red-600 font-medium' : 'text-gray-500'
+                          }`}
+                        >
+                          {product.quantity_in_stock ?? 0}
+                        </span>
+                        {product.is_low_stock && (
+                          <Badge variant="danger" size="sm">
+                            Low
+                          </Badge>
+                        )}
+                      </div>
+                    ) : (
+                      <span className="text-sm text-gray-400">Not tracked</span>
+                    )}
+                  </td>
+                  <td className="px-6 py-4 whitespace-nowrap">
+                    <Badge
+                      variant={product.status === 'active' ? 'success' : 'default'}
+                    >
+                      {product.status === 'active' ? 'Active' : 'Inactive'}
+                    </Badge>
+                  </td>
+                  <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                    <button
+                      onClick={() => handleEditProduct(product)}
+                      className="text-blue-600 hover:text-blue-900 mr-4"
+                    >
+                      Edit
+                    </button>
+                    {product.track_inventory && (
+                      <button
+                        onClick={() => handleTransferInventory(product)}
+                        className="text-indigo-600 hover:text-indigo-900 mr-4"
+                        title="Transfer inventory"
+                      >
+                        Transfer
+                      </button>
+                    )}
+                    <button
+                      onClick={() => handleToggleStatus(product)}
+                      className="text-gray-600 hover:text-gray-900 mr-4"
+                    >
+                      {product.status === 'active' ? 'Deactivate' : 'Activate'}
+                    </button>
+                    <button
+                      onClick={() => handleDeleteProduct(product)}
+                      className="text-red-600 hover:text-red-900"
+                    >
+                      Delete
+                    </button>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+
+      {/* Editor Modal */}
+      <ProductEditorModal
+        isOpen={isEditorOpen}
+        onClose={() => setIsEditorOpen(false)}
+        product={selectedProduct}
+        onSuccess={() => {
+          setIsEditorOpen(false);
+          setSelectedProduct(null);
+        }}
+      />
+
+      {/* Category Manager Modal */}
+      <CategoryManagerModal
+        isOpen={isCategoryManagerOpen}
+        onClose={() => setIsCategoryManagerOpen(false)}
+      />
+
+      {/* Inventory Transfer Modal */}
+      <InventoryTransferModal
+        isOpen={isTransferModalOpen}
+        onClose={() => {
+          setIsTransferModalOpen(false);
+          setSelectedProduct(null);
+        }}
+        onSuccess={() => {
+          setIsTransferModalOpen(false);
+          setSelectedProduct(null);
+        }}
+        productId={selectedProduct?.id}
+      />
+    </div>
+  );
+}

frontend/src/pages/Staff.tsx

@@ -47,6 +47,10 @@ interface StaffProps {
 const Staff: React.FC<StaffProps> = ({ onMasquerade, effectiveUser }) => {
   const { t } = useTranslation();
   const { data: staffMembers = [], isLoading, error } = useStaff();
+
+  // Check if user has permission to edit staff
+  const permissions = effectiveUser.effective_permissions || {};
+  const canEditStaff = effectiveUser.role === 'owner' || permissions['can_edit_staff'] === true;
   const { data: resources = [] } = useResources();
   const { data: invitations = [], isLoading: invitationsLoading } = useInvitations();
   const { data: staffRoles = [] } = useStaffRoles();
@@ -489,6 +493,7 @@ const Staff: React.FC<StaffProps> = ({ onMasquerade, effectiveUser }) => {
                     </td>
                     <td className="px-6 py-4 text-right">
                       <div className="flex items-center justify-end gap-2">
+                        {canEditStaff && (
                           <button
                             onClick={() => handleVerifyEmailClick(user)}
                             disabled={verifyEmailMutation.isPending}
@@ -505,6 +510,8 @@ const Staff: React.FC<StaffProps> = ({ onMasquerade, effectiveUser }) => {
                               <BadgeCheck size={16} />
                             )}
                           </button>
+                        )}
+                        {canEditStaff && (
                           <button
                             onClick={() => openEditModal(user)}
                             className="text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200 font-medium text-xs inline-flex items-center gap-1 px-3 py-1 border border-gray-200 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
@@ -512,6 +519,7 @@ const Staff: React.FC<StaffProps> = ({ onMasquerade, effectiveUser }) => {
                           >
                             <Pencil size={14} /> {t('common.edit')}
                           </button>
+                        )}
                         {canMasquerade && (
                           <button
                             onClick={() => onMasquerade(user)}

frontend/src/pages/StaffDashboard.tsx

@@ -65,6 +65,11 @@ const StaffDashboard: React.FC<StaffDashboardProps> = ({ user }) => {
   const userResourceId = user.linked_resource_id ?? null;
   const userResourceName = user.linked_resource_name ?? null;
 
+  // Check user permissions for showing quick action links
+  const permissions = user.effective_permissions || {};
+  const canAccessMySchedule = permissions['can_access_my_schedule'] ?? true; // Default true per staff_permissions.py
+  const canAccessMyAvailability = permissions['can_access_my_availability'] ?? true; // Default true per staff_permissions.py
+
   // Fetch this week's appointments for statistics
   const weekStart = startOfWeek(new Date(), { weekStartsOn: 1 });
   const weekEnd = endOfWeek(new Date(), { weekStartsOn: 1 });
@@ -357,13 +362,15 @@ const StaffDashboard: React.FC<StaffDashboardProps> = ({ user }) => {
                 </div>
               </div>
             </div>
+            {canAccessMySchedule && (
               <Link
-              to="/my-schedule"
+                to="/dashboard/my-schedule"
                 className="px-4 py-2 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200 rounded-lg border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors flex items-center gap-2"
               >
                 {t('staffDashboard.viewSchedule', 'View Schedule')}
                 <ArrowRight size={16} />
               </Link>
+            )}
           </div>
         </div>
       )}
@@ -451,12 +458,14 @@ const StaffDashboard: React.FC<StaffDashboardProps> = ({ user }) => {
             <h2 className="text-lg font-semibold text-gray-900 dark:text-white">
               {t('staffDashboard.yourUpcoming', 'Your Upcoming Appointments')}
             </h2>
+            {canAccessMySchedule && (
               <Link
-              to="/my-schedule"
+                to="/dashboard/my-schedule"
                 className="text-sm text-brand-600 hover:text-brand-700 dark:text-brand-400"
               >
                 {t('common.viewAll', 'View All')}
               </Link>
+            )}
           </div>
 
           {upcomingAppointments.length === 0 ? (
@@ -587,10 +596,12 @@ const StaffDashboard: React.FC<StaffDashboardProps> = ({ user }) => {
         </div>
       </div>
 
-      {/* Quick Actions */}
+      {/* Quick Actions - only show if user has at least one permission */}
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+      {(canAccessMySchedule || canAccessMyAvailability) && (
+        <div className={`grid grid-cols-1 ${canAccessMySchedule && canAccessMyAvailability ? 'md:grid-cols-2' : ''} gap-4`}>
+          {canAccessMySchedule && (
             <Link
-          to="/my-schedule"
+              to="/dashboard/my-schedule"
               className="p-5 bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 hover:border-brand-500 dark:hover:border-brand-400 transition-colors group"
             >
               <div className="flex items-center gap-4">
@@ -608,9 +619,11 @@ const StaffDashboard: React.FC<StaffDashboardProps> = ({ user }) => {
                 <ArrowRight size={20} className="text-gray-400 group-hover:text-brand-500 ml-auto transition-colors" />
               </div>
             </Link>
+          )}
 
+          {canAccessMyAvailability && (
             <Link
-          to="/my-availability"
+              to="/dashboard/my-availability"
               className="p-5 bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 hover:border-brand-500 dark:hover:border-brand-400 transition-colors group"
             >
               <div className="flex items-center gap-4">
@@ -628,7 +641,9 @@ const StaffDashboard: React.FC<StaffDashboardProps> = ({ user }) => {
                 <ArrowRight size={20} className="text-gray-400 group-hover:text-green-500 ml-auto transition-colors" />
               </div>
             </Link>
+          )}
         </div>
+      )}
     </div>
   );
 };

frontend/src/pages/__tests__/ContractSigning.test.tsx

@@ -0,0 +1,397 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import React from 'react';
+
+// Mock react-i18next
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string, options?: any) => {
+      if (typeof options === 'object' && options.customerName) {
+        return `Contract for ${options.customerName}`;
+      }
+      return key;
+    },
+  }),
+}));
+
+// Mock hooks
+const mockUsePublicContract = vi.fn();
+const mockUseSignContract = vi.fn();
+
+vi.mock('../../hooks/useContracts', () => ({
+  usePublicContract: (token: string) => mockUsePublicContract(token),
+  useSignContract: () => mockUseSignContract(),
+}));
+
+import ContractSigning from '../ContractSigning';
+
+describe('ContractSigning', () => {
+  const mockContractData = {
+    contract: {
+      id: '123',
+      content: '<h1>Contract Title</h1><p>Contract terms and conditions...</p>',
+      status: 'PENDING',
+    },
+    template: {
+      name: 'Service Agreement',
+    },
+    business: {
+      id: '1',
+      name: 'Test Business',
+      logo_url: 'https://example.com/logo.png',
+    },
+    customer: {
+      name: 'John Doe',
+      email: 'john@example.com',
+    },
+    can_sign: true,
+    is_expired: false,
+  };
+
+  const mockSignature = {
+    signer_name: 'John Doe',
+    signer_email: 'john@example.com',
+    signed_at: '2024-01-15T10:30:00Z',
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+
+    mockUsePublicContract.mockReturnValue({
+      data: mockContractData,
+      isLoading: false,
+      error: null,
+      refetch: vi.fn(),
+    });
+
+    mockUseSignContract.mockReturnValue({
+      mutateAsync: vi.fn().mockResolvedValue({}),
+      isPending: false,
+      isSuccess: false,
+      isError: false,
+    });
+  });
+
+  const renderComponent = (token = 'test-token') => {
+    const queryClient = new QueryClient({
+      defaultOptions: {
+        queries: { retry: false },
+        mutations: { retry: false },
+      },
+    });
+
+    return render(
+      <QueryClientProvider client={queryClient}>
+        <MemoryRouter initialEntries={[`/contracts/sign/${token}`]}>
+          <Routes>
+            <Route path="/contracts/sign/:token" element={<ContractSigning />} />
+          </Routes>
+        </MemoryRouter>
+      </QueryClientProvider>
+    );
+  };
+
+  it('renders loading state', () => {
+    mockUsePublicContract.mockReturnValue({
+      data: null,
+      isLoading: true,
+      error: null,
+      refetch: vi.fn(),
+    });
+
+    renderComponent();
+
+    expect(screen.getByText('common.loading')).toBeInTheDocument();
+    const loader = document.querySelector('.animate-spin');
+    expect(loader).toBeInTheDocument();
+  });
+
+  it('renders contract not found error', () => {
+    mockUsePublicContract.mockReturnValue({
+      data: null,
+      isLoading: false,
+      error: new Error('Not found'),
+      refetch: vi.fn(),
+    });
+
+    renderComponent();
+
+    expect(screen.getByText('contracts.signing.notFound')).toBeInTheDocument();
+    expect(screen.getByText(/invalid or has expired/i)).toBeInTheDocument();
+  });
+
+  it('renders expired contract message', () => {
+    mockUsePublicContract.mockReturnValue({
+      data: { ...mockContractData, is_expired: true },
+      isLoading: false,
+      error: null,
+      refetch: vi.fn(),
+    });
+
+    renderComponent();
+
+    expect(screen.getByText('contracts.signing.expired')).toBeInTheDocument();
+    expect(screen.getByText(/can no longer be signed/i)).toBeInTheDocument();
+  });
+
+  it('renders contract signing form', () => {
+    renderComponent();
+
+    expect(screen.getByText('Test Business')).toBeInTheDocument();
+    expect(screen.getByText('Service Agreement')).toBeInTheDocument();
+    expect(screen.getByText('Contract for John Doe')).toBeInTheDocument();
+    expect(screen.getByPlaceholderText('Enter your full name')).toBeInTheDocument();
+  });
+
+  it('renders contract content', () => {
+    renderComponent();
+
+    const contractContent = document.querySelector('.prose');
+    expect(contractContent).toBeInTheDocument();
+    expect(contractContent?.innerHTML).toContain('Contract Title');
+    expect(contractContent?.innerHTML).toContain('Contract terms and conditions');
+  });
+
+  it('displays business logo when available', () => {
+    renderComponent();
+
+    const logo = screen.getByAltText('Test Business');
+    expect(logo).toBeInTheDocument();
+    expect(logo).toHaveAttribute('src', 'https://example.com/logo.png');
+  });
+
+  it('shows signature input and preview', async () => {
+    const user = userEvent.setup();
+    renderComponent();
+
+    const nameInput = screen.getByPlaceholderText('Enter your full name');
+    await user.type(nameInput, 'John Doe');
+
+    expect(nameInput).toHaveValue('John Doe');
+
+    // Check for signature preview
+    await waitFor(() => {
+      expect(screen.getByText('Signature Preview:')).toBeInTheDocument();
+    });
+
+    // Preview should show the typed name in cursive
+    const preview = document.querySelector('[style*="cursive"]');
+    expect(preview).toBeInTheDocument();
+    expect(preview?.textContent).toBe('John Doe');
+  });
+
+  it('requires all consent checkboxes', async () => {
+    const user = userEvent.setup();
+    renderComponent();
+
+    const nameInput = screen.getByPlaceholderText('Enter your full name');
+    await user.type(nameInput, 'John Doe');
+
+    const signButton = screen.getByRole('button', { name: /sign contract/i });
+
+    // Button should be disabled without consent
+    expect(signButton).toBeDisabled();
+
+    // Check first checkbox
+    const checkbox1 = screen.getByLabelText(/have read and agree/i);
+    await user.click(checkbox1);
+
+    // Still disabled without second checkbox
+    expect(signButton).toBeDisabled();
+
+    // Check second checkbox
+    const checkbox2 = screen.getByLabelText(/consent to conduct business electronically/i);
+    await user.click(checkbox2);
+
+    // Now should be enabled
+    expect(signButton).toBeEnabled();
+  });
+
+  it('submits signature when all fields are valid', async () => {
+    const user = userEvent.setup();
+    const mockMutate = vi.fn().mockResolvedValue({});
+    mockUseSignContract.mockReturnValue({
+      mutateAsync: mockMutate,
+      isPending: false,
+      isSuccess: false,
+      isError: false,
+    });
+
+    renderComponent();
+
+    // Fill name
+    const nameInput = screen.getByPlaceholderText('Enter your full name');
+    await user.type(nameInput, 'John Doe');
+
+    // Check both checkboxes
+    const checkbox1 = screen.getByLabelText(/have read and agree/i);
+    const checkbox2 = screen.getByLabelText(/consent to conduct business electronically/i);
+    await user.click(checkbox1);
+    await user.click(checkbox2);
+
+    // Submit
+    const signButton = screen.getByRole('button', { name: /sign contract/i });
+    await user.click(signButton);
+
+    await waitFor(() => {
+      expect(mockMutate).toHaveBeenCalledWith({
+        token: 'test-token',
+        signer_name: 'John Doe',
+        consent_checkbox_checked: true,
+        electronic_consent_given: true,
+      });
+    });
+  });
+
+  it('shows loading state while signing', async () => {
+    const user = userEvent.setup();
+    mockUseSignContract.mockReturnValue({
+      mutateAsync: vi.fn().mockImplementation(() => new Promise(() => {})),
+      isPending: true,
+      isSuccess: false,
+      isError: false,
+    });
+
+    renderComponent();
+
+    expect(screen.getByRole('button', { name: /signing/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /signing/i })).toBeDisabled();
+  });
+
+  it('shows error message when signing fails', async () => {
+    const user = userEvent.setup();
+    mockUseSignContract.mockReturnValue({
+      mutateAsync: vi.fn().mockRejectedValue(new Error('Signing failed')),
+      isPending: false,
+      isSuccess: false,
+      isError: true,
+    });
+
+    renderComponent();
+
+    await waitFor(() => {
+      expect(screen.getByText(/failed to sign the contract/i)).toBeInTheDocument();
+    });
+  });
+
+  it('renders signed contract view after successful signing', () => {
+    mockUsePublicContract.mockReturnValue({
+      data: {
+        ...mockContractData,
+        contract: { ...mockContractData.contract, status: 'SIGNED' },
+        signature: mockSignature,
+      },
+      isLoading: false,
+      error: null,
+      refetch: vi.fn(),
+    });
+
+    renderComponent();
+
+    expect(screen.getByText(/contract successfully signed/i)).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /print contract/i })).toBeInTheDocument();
+  });
+
+  it('displays signature details in signed view', () => {
+    mockUsePublicContract.mockReturnValue({
+      data: {
+        ...mockContractData,
+        contract: { ...mockContractData.contract, status: 'SIGNED' },
+        signature: mockSignature,
+      },
+      isLoading: false,
+      error: null,
+      refetch: vi.fn(),
+    });
+
+    renderComponent();
+
+    // Use getAllByText since "John Doe" and "john@example.com" appear multiple times
+    expect(screen.getAllByText('John Doe').length).toBeGreaterThan(0);
+    expect(screen.getAllByText('john@example.com').length).toBeGreaterThan(0);
+
+    // Check for "Signed" status badge
+    const signedBadges = screen.queryAllByText(/^signed$/i);
+    expect(signedBadges.length).toBeGreaterThan(0);
+  });
+
+  it('handles print button click', async () => {
+    const user = userEvent.setup();
+    const mockPrint = vi.fn();
+    window.print = mockPrint;
+
+    mockUsePublicContract.mockReturnValue({
+      data: {
+        ...mockContractData,
+        contract: { ...mockContractData.contract, status: 'SIGNED' },
+        signature: mockSignature,
+      },
+      isLoading: false,
+      error: null,
+      refetch: vi.fn(),
+    });
+
+    renderComponent();
+
+    const printButton = screen.getByRole('button', { name: /print contract/i });
+    await user.click(printButton);
+
+    expect(mockPrint).toHaveBeenCalled();
+  });
+
+  it('shows legal compliance notice in signing form', () => {
+    renderComponent();
+
+    expect(screen.getByText(/ESIGN Act/i)).toBeInTheDocument();
+    expect(screen.getByText(/UETA/i)).toBeInTheDocument();
+  });
+
+  it('shows electronic consent disclosure', () => {
+    renderComponent();
+
+    expect(screen.getByText(/conduct business electronically/i)).toBeInTheDocument();
+    expect(screen.getByText(/right to receive documents in paper form/i)).toBeInTheDocument();
+  });
+
+  it('prevents signing when cannot sign', () => {
+    mockUsePublicContract.mockReturnValue({
+      data: {
+        ...mockContractData,
+        can_sign: false,
+      },
+      isLoading: false,
+      error: null,
+      refetch: vi.fn(),
+    });
+
+    renderComponent();
+
+    // Should not show the signing form
+    expect(screen.queryByPlaceholderText('Enter your full name')).not.toBeInTheDocument();
+  });
+
+  it('validates name is not empty before enabling submit', async () => {
+    const user = userEvent.setup();
+    renderComponent();
+
+    const checkbox1 = screen.getByLabelText(/have read and agree/i);
+    const checkbox2 = screen.getByLabelText(/consent to conduct business electronically/i);
+    await user.click(checkbox1);
+    await user.click(checkbox2);
+
+    const signButton = screen.getByRole('button', { name: /sign contract/i });
+
+    // Should be disabled with empty name
+    expect(signButton).toBeDisabled();
+
+    // Type name
+    const nameInput = screen.getByPlaceholderText('Enter your full name');
+    await user.type(nameInput, 'John Doe');
+
+    // Should be enabled now
+    expect(signButton).toBeEnabled();
+  });
+});

frontend/src/pages/__tests__/HelpApiDocs.test.tsx

@@ -0,0 +1,632 @@
+/**
+ * Unit tests for HelpApiDocs component
+ *
+ * Tests cover:
+ * - Component rendering
+ * - Navigation sections display
+ * - Code examples in multiple languages
+ * - Token selector functionality
+ * - Section navigation and scroll behavior
+ * - No test tokens warning banner
+ * - Back button functionality
+ * - Language switcher in code blocks
+ */
+
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, waitFor } from '@testing-library/react';
+import { BrowserRouter } from 'react-router-dom';
+import userEvent from '@testing-library/user-event';
+import React from 'react';
+import HelpApiDocs from '../HelpApiDocs';
+
+// Mock the useTestTokensForDocs hook
+const mockTestTokensData = [
+  {
+    id: 'token-1',
+    name: 'Test Token 1',
+    key_prefix: 'ss_test_abc123',
+    created_at: '2025-01-01T00:00:00Z',
+  },
+  {
+    id: 'token-2',
+    name: 'Test Token 2',
+    key_prefix: 'ss_test_def456',
+    created_at: '2025-01-02T00:00:00Z',
+  },
+];
+
+const mockUseTestTokensForDocs = vi.fn(() => ({
+  data: mockTestTokensData,
+  isLoading: false,
+  error: null,
+}));
+
+vi.mock('../../hooks/useApiTokens', () => ({
+  useTestTokensForDocs: mockUseTestTokensForDocs,
+}));
+
+// Mock react-i18next
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => {
+      const translations: Record<string, string> = {
+        'common.back': 'Back',
+        'help.api.title': 'API Documentation',
+        'help.api.noTestTokensFound': 'No test tokens found',
+        'help.api.noTestTokensDescription': 'Create a test API token to see interactive examples with your credentials.',
+        'help.api.createTestToken': 'Create Test Token',
+        'help.api.introduction': 'Introduction',
+        'help.api.authentication': 'Authentication',
+        'help.api.errors': 'Errors',
+        'help.api.rateLimits': 'Rate Limits',
+        'help.api.services': 'Services',
+        'help.api.resources': 'Resources',
+        'help.api.availability': 'Availability',
+        'help.api.appointments': 'Appointments',
+        'help.api.customers': 'Customers',
+        'help.api.webhooks': 'Webhooks',
+        'help.api.filtering': 'Filtering',
+        'help.api.listServices': 'List all services',
+        'help.api.retrieveService': 'Retrieve a service',
+        'help.api.checkAvailability': 'Check availability',
+        'help.api.createAppointment': 'Create an appointment',
+        'help.api.retrieveAppointment': 'Retrieve an appointment',
+        'help.api.updateAppointment': 'Update an appointment',
+        'help.api.cancelAppointment': 'Cancel an appointment',
+        'help.api.listAppointments': 'List all appointments',
+        'help.api.businessObject': 'The business object',
+        'help.api.serviceObject': 'The service object',
+        'help.api.resourceObject': 'The resource object',
+        'help.api.appointmentObject': 'The appointment object',
+        'help.api.customerObject': 'The customer object',
+        'help.api.createCustomer': 'Create a customer',
+        'help.api.retrieveCustomer': 'Retrieve a customer',
+        'help.api.updateCustomer': 'Update a customer',
+        'help.api.listCustomers': 'List all customers',
+      };
+      return translations[key] || key;
+    },
+  }),
+}));
+
+// Mock useNavigate
+const mockNavigate = vi.fn();
+vi.mock('react-router-dom', async () => {
+  const actual = await vi.importActual('react-router-dom');
+  return {
+    ...actual,
+    useNavigate: () => mockNavigate,
+  };
+});
+
+// Test wrapper with Router
+const createWrapper = () => {
+  return ({ children }: { children: React.ReactNode }) => (
+    <BrowserRouter>{children}</BrowserRouter>
+  );
+};
+
+describe('HelpApiDocs', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    // Reset scroll position
+    window.scrollTo = vi.fn();
+
+    // Reset the mock to default behavior
+    mockUseTestTokensForDocs.mockReturnValue({
+      data: mockTestTokensData,
+      isLoading: false,
+      error: null,
+    });
+  });
+
+  describe('Rendering', () => {
+    it('should render the API documentation page', () => {
+      render(<HelpApiDocs />, { wrapper: createWrapper() });
+
+      const heading = screen.getByText('API Documentation');
+      expect(heading).toBeInTheDocument();
+    });
+
+    it('should render the back button', () => {
+      render(<HelpApiDocs />, { wrapper: createWrapper() });
+
+      const backButton = screen.getByRole('button', { name: /back/i });
+      expect(backButton).toBeInTheDocument();
+    });
+
+    it('should render the page header', () => {
+      render(<HelpApiDocs />, { wrapper: createWrapper() });
+
+      const title = screen.getByText('API Documentation');
+      expect(title).toBeInTheDocument();
+    });
+  });
+
+  describe('Navigation', () => {
+    it('should navigate back when back button is clicked', async () => {
+      const user = userEvent.setup();
+      render(<HelpApiDocs />, { wrapper: createWrapper() });
+
+      const backButton = screen.getByRole('button', { name: /back/i });
+      await user.click(backButton);
+
+      expect(mockNavigate).toHaveBeenCalledWith(-1);
+    });
+  });
+
+  describe('Main Sections', () => {
+    it('should render introduction section', () => {
+      render(<HelpApiDocs />, { wrapper: createWrapper() });
+
+      const section = document.getElementById('introduction');
+      expect(section).toBeInTheDocument();
+    });
+
+    it('should render authentication section', () => {
+      render(<HelpApiDocs />, { wrapper: createWrapper() });
+
+      const section = document.getElementById('authentication');
+      expect(section).toBeInTheDocument();
+    });
+
+    it('should render errors section', () => {
+      render(<HelpApiDocs />, { wrapper: createWrapper() });
+
+      const section = document.getElementById('errors');
+      expect(section).toBeInTheDocument();
+    });
+
+    it('should render rate limits section', () => {
+      render(<HelpApiDocs />, { wrapper: createWrapper() });
+
+      const section = document.getElementById('rate-limits');
+      expect(section).toBeInTheDocument();
+    });
+
+    it('should render services section', () => {
+      render(<HelpApiDocs />, { wrapper: createWrapper() });
+
+      const section = document.getElementById('list-services');
+      expect(section).toBeInTheDocument();
+    });
+
+    it('should render appointments section', () => {
+      render(<HelpApiDocs />, { wrapper: createWrapper() });
+
+      const section = document.getElementById('create-appointment');
+      expect(section).toBeInTheDocument();
+    });
+
+    it('should render customers section', () => {
+      render(<HelpApiDocs />, { wrapper: createWrapper() });
+
+      const section = document.getElementById('create-customer');
+      expect(section).toBeInTheDocument();
+    });
+
+    it('should render webhooks section', () => {
+      render(<HelpApiDocs />, { wrapper: createWrapper() });
+
+      const section = document.getElementById('webhook-events');
+      expect(section).toBeInTheDocument();
+    });
+  });
+
+  describe('Token Selector', () => {
+    it('should render token selector when tokens are available', () => {
+      render(<HelpApiDocs />, { wrapper: createWrapper() });
+
+      const tokenSelector = screen.getByRole('combobox');
+      expect(tokenSelector).toBeInTheDocument();
+    });
+
+    it('should display all available test tokens', () => {
+      render(<HelpApiDocs />, { wrapper: createWrapper() });
+
+      const tokenSelector = screen.getByRole('combobox');
+      const options = Array.from(tokenSelector.querySelectorAll('option'));
+
+      expect(options).toHaveLength(2);
+      expect(options[0]).toHaveTextContent('Test Token 1');
+      expect(options[1]).toHaveTextContent('Test Token 2');
+    });
+
+    it('should show token key prefix in selector', () => {
+      render(<HelpApiDocs />, { wrapper: createWrapper() });
+
+      const tokenSelector = screen.getByRole('combobox');
+      expect(tokenSelector).toHaveTextContent('ss_test_abc123');
+    });
+
+    it('should allow selecting a different token', async () => {
+      const user = userEvent.setup();
+      render(<HelpApiDocs />, { wrapper: createWrapper() });
+
+      const tokenSelector = screen.getByRole('combobox') as HTMLSelectElement;
+
+      await user.selectOptions(tokenSelector, 'token-2');
+
+      expect(tokenSelector.value).toBe('token-2');
+    });
+
+    it('should display key icon next to token selector', () => {
+      const { container } = render(<HelpApiDocs />, { wrapper: createWrapper() });
+
+      // Look for the Key icon (lucide-react renders as svg)
+      const keyIcon = container.querySelector('svg');
+      expect(keyIcon).toBeInTheDocument();
+    });
+  });
+
+  describe('No Test Tokens Warning', () => {
+    it('should show warning banner when no test tokens exist', async () => {
+      const { useTestTokensForDocs } = await import('../../hooks/useApiTokens');
+      vi.mocked(useTestTokensForDocs).mockReturnValue({
+        data: [],
+        isLoading: false,
+        error: null,
+      } as any);
+
+      render(<HelpApiDocs />, { wrapper: createWrapper() });
+
+      await waitFor(() => {
+        const warning = screen.getByText('No test tokens found');
+        expect(warning).toBeInTheDocument();
+      });
+    });
+
+    it('should not show warning banner when tokens are loading', async () => {
+      const { useTestTokensForDocs } = await import('../../hooks/useApiTokens');
+      vi.mocked(useTestTokensForDocs).mockReturnValue({
+        data: undefined,
+        isLoading: true,
+        error: null,
+      } as any);
+
+      render(<HelpApiDocs />, { wrapper: createWrapper() });
+
+      const warning = screen.queryByText('No test tokens found');
+      expect(warning).not.toBeInTheDocument();
+    });
+
+    it('should not show warning banner when tokens exist', () => {
+      render(<HelpApiDocs />, { wrapper: createWrapper() });
+
+      const warning = screen.queryByText('No test tokens found');
+      expect(warning).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Code Examples', () => {
+    it('should render code blocks for API examples', () => {
+      const { container } = render(<HelpApiDocs />, { wrapper: createWrapper() });
+
+      // Code blocks typically have <pre> or <code> tags
+      const codeBlocks = container.querySelectorAll('pre');
+      expect(codeBlocks.length).toBeGreaterThan(0);
+    });
+
+    it('should display cURL examples by default', () => {
+      const { container } = render(<HelpApiDocs />, { wrapper: createWrapper() });
+
+      // Look for curl command in code blocks
+      const pageText = container.textContent || '';
+      expect(pageText).toContain('curl');
+    });
+
+    it('should include API token in code examples', async () => {
+      const { container } = render(<HelpApiDocs />, { wrapper: createWrapper() });
+
+      // Wait for the component to load and use the token
+      await waitFor(() => {
+        const pageText = container.textContent || '';
+        expect(pageText).toContain('ss_test_abc123'); // The first token's prefix
+      });
+    });
+
+    it('should include sandbox URL in examples', () => {
+      const { container } = render(<HelpApiDocs />, { wrapper: createWrapper() });
+
+      const pageText = container.textContent || '';
+      expect(pageText).toContain('sandbox.smoothschedule.com');
+    });
+
+    it('should render language selector tabs', () => {
+      const { container } = render(<HelpApiDocs />, { wrapper: createWrapper() });
+
+      // Look for language labels (cURL, Python, etc.)
+      const pageText = container.textContent || '';
+      expect(pageText).toContain('cURL');
+    });
+
+    it('should allow switching between code languages', async () => {
+      const user = userEvent.setup();
+      const { container } = render(<HelpApiDocs />, { wrapper: createWrapper() });
+
+      // Find Python language button (if visible)
+      // This is a simplified test - actual implementation may vary
+      const buttons = container.querySelectorAll('button');
+      const pythonButton = Array.from(buttons).find(btn =>
+        btn.textContent?.includes('Python')
+      );
+
+      if (pythonButton) {
+        await user.click(pythonButton);
+
+        // After clicking, should show Python code
+        await waitFor(() => {
+          const pageText = container.textContent || '';
+          expect(pageText).toContain('import requests');
+        });
+      }
+    });
+  });
+
+  describe('HTTP Method Badges', () => {
+    it('should render GET method badges', () => {
+      const { container } = render(<HelpApiDocs />, { wrapper: createWrapper() });
+
+      const pageText = container.textContent || '';
+      expect(pageText).toContain('GET');
+    });
+
+    it('should render POST method badges', () => {
+      const { container } = render(<HelpApiDocs />, { wrapper: createWrapper() });
+
+      const pageText = container.textContent || '';
+      expect(pageText).toContain('POST');
+    });
+
+    it('should render PATCH method badges', () => {
+      const { container } = render(<HelpApiDocs />, { wrapper: createWrapper() });
+
+      const pageText = container.textContent || '';
+      expect(pageText).toContain('PATCH');
+    });
+
+    it('should render DELETE method badges', () => {
+      const { container } = render(<HelpApiDocs />, { wrapper: createWrapper() });
+
+      const pageText = container.textContent || '';
+      expect(pageText).toContain('DELETE');
+    });
+  });
+
+  describe('API Endpoints', () => {
+    it('should document the list services endpoint', () => {
+      const { container } = render(<HelpApiDocs />, { wrapper: createWrapper() });
+
+      const section = document.getElementById('list-services');
+      expect(section).toBeInTheDocument();
+    });
+
+    it('should document the create appointment endpoint', () => {
+      const { container } = render(<HelpApiDocs />, { wrapper: createWrapper() });
+
+      const section = document.getElementById('create-appointment');
+      expect(section).toBeInTheDocument();
+    });
+
+    it('should document the check availability endpoint', () => {
+      const { container } = render(<HelpApiDocs />, { wrapper: createWrapper() });
+
+      const section = document.getElementById('check-availability');
+      expect(section).toBeInTheDocument();
+    });
+
+    it('should document customer endpoints', () => {
+      render(<HelpApiDocs />, { wrapper: createWrapper() });
+
+      expect(document.getElementById('create-customer')).toBeInTheDocument();
+      expect(document.getElementById('retrieve-customer')).toBeInTheDocument();
+      expect(document.getElementById('update-customer')).toBeInTheDocument();
+      expect(document.getElementById('list-customers')).toBeInTheDocument();
+    });
+
+    it('should document webhook endpoints', () => {
+      render(<HelpApiDocs />, { wrapper: createWrapper() });
+
+      expect(document.getElementById('webhook-events')).toBeInTheDocument();
+      expect(document.getElementById('create-webhook')).toBeInTheDocument();
+      expect(document.getElementById('list-webhooks')).toBeInTheDocument();
+    });
+  });
+
+  describe('Page Structure', () => {
+    it('should have a sticky header', () => {
+      const { container } = render(<HelpApiDocs />, { wrapper: createWrapper() });
+
+      const header = container.querySelector('header');
+      expect(header).toHaveClass('sticky');
+    });
+
+    it('should render main content area', () => {
+      const { container } = render(<HelpApiDocs />, { wrapper: createWrapper() });
+
+      const mainContent = container.querySelector('.min-h-screen');
+      expect(mainContent).toBeInTheDocument();
+    });
+
+    it('should apply dark mode classes', () => {
+      const { container } = render(<HelpApiDocs />, { wrapper: createWrapper() });
+
+      const mainDiv = container.querySelector('.dark\\:bg-gray-900');
+      expect(mainDiv).toBeInTheDocument();
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('should have semantic header element', () => {
+      const { container } = render(<HelpApiDocs />, { wrapper: createWrapper() });
+
+      const header = container.querySelector('header');
+      expect(header).toBeInTheDocument();
+    });
+
+    it('should have accessible back button', () => {
+      render(<HelpApiDocs />, { wrapper: createWrapper() });
+
+      const backButton = screen.getByRole('button', { name: /back/i });
+      expect(backButton).toHaveAccessibleName();
+    });
+
+    it('should have accessible token selector', async () => {
+      render(<HelpApiDocs />, { wrapper: createWrapper() });
+
+      // Wait for the selector to be rendered
+      await waitFor(() => {
+        const selector = screen.getByRole('combobox');
+        expect(selector).toBeInTheDocument();
+      });
+    });
+
+    it('should use section elements for content sections', () => {
+      const { container } = render(<HelpApiDocs />, { wrapper: createWrapper() });
+
+      const sections = container.querySelectorAll('section');
+      expect(sections.length).toBeGreaterThan(0);
+    });
+  });
+
+  describe('Internationalization', () => {
+    it('should translate page title', () => {
+      render(<HelpApiDocs />, { wrapper: createWrapper() });
+
+      const title = screen.getByText('API Documentation');
+      expect(title).toBeInTheDocument();
+    });
+
+    it('should translate back button text', () => {
+      render(<HelpApiDocs />, { wrapper: createWrapper() });
+
+      const backButton = screen.getByRole('button', { name: /back/i });
+      expect(backButton).toHaveTextContent('Back');
+    });
+
+    it('should translate no tokens warning', async () => {
+      const { useTestTokensForDocs } = await import('../../hooks/useApiTokens');
+      vi.mocked(useTestTokensForDocs).mockReturnValue({
+        data: [],
+        isLoading: false,
+        error: null,
+      } as any);
+
+      render(<HelpApiDocs />, { wrapper: createWrapper() });
+
+      await waitFor(() => {
+        expect(screen.getByText('No test tokens found')).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Integration', () => {
+    it('should render complete API documentation page', async () => {
+      render(<HelpApiDocs />, { wrapper: createWrapper() });
+
+      // Check for key elements
+      expect(screen.getByText('API Documentation')).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: /back/i })).toBeInTheDocument();
+
+      // Wait for token selector to render
+      await waitFor(() => {
+        expect(screen.getByRole('combobox')).toBeInTheDocument();
+      });
+
+      expect(document.getElementById('introduction')).toBeInTheDocument();
+      expect(document.getElementById('authentication')).toBeInTheDocument();
+    });
+
+    it('should handle token selection and update examples', async () => {
+      const user = userEvent.setup();
+      const { container } = render(<HelpApiDocs />, { wrapper: createWrapper() });
+
+      // Wait for token selector to render
+      const tokenSelector = await waitFor(() => {
+        return screen.getByRole('combobox') as HTMLSelectElement;
+      });
+
+      // Wait for initial token to appear
+      await waitFor(() => {
+        expect(container.textContent).toContain('ss_test_abc123');
+      });
+
+      // Select second token
+      await user.selectOptions(tokenSelector, 'token-2');
+
+      // Should now show second token in examples
+      await waitFor(() => {
+        expect(container.textContent).toContain('ss_test_def456');
+      });
+    });
+
+    it('should maintain structure with all sections present', () => {
+      render(<HelpApiDocs />, { wrapper: createWrapper() });
+
+      // Verify all main sections exist
+      const sections = [
+        'introduction',
+        'authentication',
+        'errors',
+        'rate-limits',
+        'list-services',
+        'check-availability',
+        'create-appointment',
+        'create-customer',
+        'webhook-events',
+      ];
+
+      sections.forEach(sectionId => {
+        const section = document.getElementById(sectionId);
+        expect(section).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Error Handling', () => {
+    it('should handle missing token data gracefully', async () => {
+      const { useTestTokensForDocs } = await import('../../hooks/useApiTokens');
+      vi.mocked(useTestTokensForDocs).mockReturnValue({
+        data: undefined,
+        isLoading: false,
+        error: null,
+      } as any);
+
+      render(<HelpApiDocs />, { wrapper: createWrapper() });
+
+      // Should still render the page
+      expect(screen.getByText('API Documentation')).toBeInTheDocument();
+    });
+
+    it('should handle token loading state', async () => {
+      const { useTestTokensForDocs } = await import('../../hooks/useApiTokens');
+      vi.mocked(useTestTokensForDocs).mockReturnValue({
+        data: undefined,
+        isLoading: true,
+        error: null,
+      } as any);
+
+      render(<HelpApiDocs />, { wrapper: createWrapper() });
+
+      // Should render without token selector
+      expect(screen.queryByRole('combobox')).not.toBeInTheDocument();
+    });
+
+    it('should use default API key when no tokens available', async () => {
+      const { useTestTokensForDocs } = await import('../../hooks/useApiTokens');
+      vi.mocked(useTestTokensForDocs).mockReturnValue({
+        data: [],
+        isLoading: false,
+        error: null,
+      } as any);
+
+      const { container } = render(<HelpApiDocs />, { wrapper: createWrapper() });
+
+      // Should show default placeholder token
+      await waitFor(() => {
+        const pageText = container.textContent || '';
+        expect(pageText).toContain('ss_test_');
+      });
+    });
+  });
+});

frontend/src/pages/__tests__/HelpApiDocs.test.tsx.tmp.770091.1766728081370

@@ -0,0 +1,630 @@
+/**
+ * Unit tests for HelpApiDocs component
+ *
+ * Tests cover:
+ * - Component rendering
+ * - Navigation sections display
+ * - Code examples in multiple languages
+ * - Token selector functionality
+ * - Section navigation and scroll behavior
+ * - No test tokens warning banner
+ * - Back button functionality
+ * - Language switcher in code blocks
+ */
+
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, waitFor } from '@testing-library/react';
+import { BrowserRouter } from 'react-router-dom';
+import userEvent from '@testing-library/user-event';
+import React from 'react';
+import HelpApiDocs from '../HelpApiDocs';
+
+// Mock the useTestTokensForDocs hook
+const mockTestTokensData = [
+  {
+    id: 'token-1',
+    name: 'Test Token 1',
+    key_prefix: 'ss_test_abc123',
+    created_at: '2025-01-01T00:00:00Z',
+  },
+  {
+    id: 'token-2',
+    name: 'Test Token 2',
+    key_prefix: 'ss_test_def456',
+    created_at: '2025-01-02T00:00:00Z',
+  },
+];
+
+const mockUseTestTokensForDocs = vi.fn(() => ({
+  data: mockTestTokensData,
+  isLoading: false,
+  error: null,
+}));
+
+vi.mock('../../hooks/useApiTokens', () => ({
+  useTestTokensForDocs: mockUseTestTokensForDocs,
+}));
+
+// Mock react-i18next
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => {
+      const translations: Record<string, string> = {
+        'common.back': 'Back',
+        'help.api.title': 'API Documentation',
+        'help.api.noTestTokensFound': 'No test tokens found',
+        'help.api.noTestTokensDescription': 'Create a test API token to see interactive examples with your credentials.',
+        'help.api.createTestToken': 'Create Test Token',
+        'help.api.introduction': 'Introduction',
+        'help.api.authentication': 'Authentication',
+        'help.api.errors': 'Errors',
+        'help.api.rateLimits': 'Rate Limits',
+        'help.api.services': 'Services',
+        'help.api.resources': 'Resources',
+        'help.api.availability': 'Availability',
+        'help.api.appointments': 'Appointments',
+        'help.api.customers': 'Customers',
+        'help.api.webhooks': 'Webhooks',
+        'help.api.filtering': 'Filtering',
+        'help.api.listServices': 'List all services',
+        'help.api.retrieveService': 'Retrieve a service',
+        'help.api.checkAvailability': 'Check availability',
+        'help.api.createAppointment': 'Create an appointment',
+        'help.api.retrieveAppointment': 'Retrieve an appointment',
+        'help.api.updateAppointment': 'Update an appointment',
+        'help.api.cancelAppointment': 'Cancel an appointment',
+        'help.api.listAppointments': 'List all appointments',
+        'help.api.businessObject': 'The business object',
+        'help.api.serviceObject': 'The service object',
+        'help.api.resourceObject': 'The resource object',
+        'help.api.appointmentObject': 'The appointment object',
+        'help.api.customerObject': 'The customer object',
+        'help.api.createCustomer': 'Create a customer',
+        'help.api.retrieveCustomer': 'Retrieve a customer',
+        'help.api.updateCustomer': 'Update a customer',
+        'help.api.listCustomers': 'List all customers',
+      };
+      return translations[key] || key;
+    },
+  }),
+}));
+
+// Mock useNavigate
+const mockNavigate = vi.fn();
+vi.mock('react-router-dom', async () => {
+  const actual = await vi.importActual('react-router-dom');
+  return {
+    ...actual,
+    useNavigate: () => mockNavigate,
+  };
+});
+
+// Test wrapper with Router
+const createWrapper = () => {
+  return ({ children }: { children: React.ReactNode }) => (
+    <BrowserRouter>{children}</BrowserRouter>
+  );
+};
+
+describe('HelpApiDocs', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    // Reset scroll position
+    window.scrollTo = vi.fn();
+
+    // Reset the mock to default behavior
+    mockUseTestTokensForDocs.mockReturnValue({
+      data: mockTestTokensData,
+      isLoading: false,
+      error: null,
+    });
+  });
+
+  describe('Rendering', () => {
+    it('should render the API documentation page', () => {
+      render(<HelpApiDocs />, { wrapper: createWrapper() });
+
+      const heading = screen.getByText('API Documentation');
+      expect(heading).toBeInTheDocument();
+    });
+
+    it('should render the back button', () => {
+      render(<HelpApiDocs />, { wrapper: createWrapper() });
+
+      const backButton = screen.getByRole('button', { name: /back/i });
+      expect(backButton).toBeInTheDocument();
+    });
+
+    it('should render the page header', () => {
+      render(<HelpApiDocs />, { wrapper: createWrapper() });
+
+      const title = screen.getByText('API Documentation');
+      expect(title).toBeInTheDocument();
+    });
+  });
+
+  describe('Navigation', () => {
+    it('should navigate back when back button is clicked', async () => {
+      const user = userEvent.setup();
+      render(<HelpApiDocs />, { wrapper: createWrapper() });
+
+      const backButton = screen.getByRole('button', { name: /back/i });
+      await user.click(backButton);
+
+      expect(mockNavigate).toHaveBeenCalledWith(-1);
+    });
+  });
+
+  describe('Main Sections', () => {
+    it('should render introduction section', () => {
+      render(<HelpApiDocs />, { wrapper: createWrapper() });
+
+      const section = document.getElementById('introduction');
+      expect(section).toBeInTheDocument();
+    });
+
+    it('should render authentication section', () => {
+      render(<HelpApiDocs />, { wrapper: createWrapper() });
+
+      const section = document.getElementById('authentication');
+      expect(section).toBeInTheDocument();
+    });
+
+    it('should render errors section', () => {
+      render(<HelpApiDocs />, { wrapper: createWrapper() });
+
+      const section = document.getElementById('errors');
+      expect(section).toBeInTheDocument();
+    });
+
+    it('should render rate limits section', () => {
+      render(<HelpApiDocs />, { wrapper: createWrapper() });
+
+      const section = document.getElementById('rate-limits');
+      expect(section).toBeInTheDocument();
+    });
+
+    it('should render services section', () => {
+      render(<HelpApiDocs />, { wrapper: createWrapper() });
+
+      const section = document.getElementById('list-services');
+      expect(section).toBeInTheDocument();
+    });
+
+    it('should render appointments section', () => {
+      render(<HelpApiDocs />, { wrapper: createWrapper() });
+
+      const section = document.getElementById('create-appointment');
+      expect(section).toBeInTheDocument();
+    });
+
+    it('should render customers section', () => {
+      render(<HelpApiDocs />, { wrapper: createWrapper() });
+
+      const section = document.getElementById('create-customer');
+      expect(section).toBeInTheDocument();
+    });
+
+    it('should render webhooks section', () => {
+      render(<HelpApiDocs />, { wrapper: createWrapper() });
+
+      const section = document.getElementById('webhook-events');
+      expect(section).toBeInTheDocument();
+    });
+  });
+
+  describe('Token Selector', () => {
+    it('should render token selector when tokens are available', () => {
+      render(<HelpApiDocs />, { wrapper: createWrapper() });
+
+      const tokenSelector = screen.getByRole('combobox');
+      expect(tokenSelector).toBeInTheDocument();
+    });
+
+    it('should display all available test tokens', () => {
+      render(<HelpApiDocs />, { wrapper: createWrapper() });
+
+      const tokenSelector = screen.getByRole('combobox');
+      const options = Array.from(tokenSelector.querySelectorAll('option'));
+
+      expect(options).toHaveLength(2);
+      expect(options[0]).toHaveTextContent('Test Token 1');
+      expect(options[1]).toHaveTextContent('Test Token 2');
+    });
+
+    it('should show token key prefix in selector', () => {
+      render(<HelpApiDocs />, { wrapper: createWrapper() });
+
+      const tokenSelector = screen.getByRole('combobox');
+      expect(tokenSelector).toHaveTextContent('ss_test_abc123');
+    });
+
+    it('should allow selecting a different token', async () => {
+      const user = userEvent.setup();
+      render(<HelpApiDocs />, { wrapper: createWrapper() });
+
+      const tokenSelector = screen.getByRole('combobox') as HTMLSelectElement;
+
+      await user.selectOptions(tokenSelector, 'token-2');
+
+      expect(tokenSelector.value).toBe('token-2');
+    });
+
+    it('should display key icon next to token selector', () => {
+      const { container } = render(<HelpApiDocs />, { wrapper: createWrapper() });
+
+      // Look for the Key icon (lucide-react renders as svg)
+      const keyIcon = container.querySelector('svg');
+      expect(keyIcon).toBeInTheDocument();
+    });
+  });
+
+  describe('No Test Tokens Warning', () => {
+    it('should show warning banner when no test tokens exist', async () => {
+      mockUseTestTokensForDocs.mockReturnValue({
+        data: [],
+        isLoading: false,
+        error: null,
+      });
+
+      render(<HelpApiDocs />, { wrapper: createWrapper() });
+
+      await waitFor(() => {
+        const warning = screen.getByText('No test tokens found');
+        expect(warning).toBeInTheDocument();
+      });
+    });
+
+    it('should not show warning banner when tokens are loading', async () => {
+      mockUseTestTokensForDocs.mockReturnValue({
+        data: undefined,
+        isLoading: true,
+        error: null,
+      });
+
+      render(<HelpApiDocs />, { wrapper: createWrapper() });
+
+      const warning = screen.queryByText('No test tokens found');
+      expect(warning).not.toBeInTheDocument();
+    });
+
+    it('should not show warning banner when tokens exist', () => {
+      render(<HelpApiDocs />, { wrapper: createWrapper() });
+
+      const warning = screen.queryByText('No test tokens found');
+      expect(warning).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Code Examples', () => {
+    it('should render code blocks for API examples', () => {
+      const { container } = render(<HelpApiDocs />, { wrapper: createWrapper() });
+
+      // Code blocks typically have <pre> or <code> tags
+      const codeBlocks = container.querySelectorAll('pre');
+      expect(codeBlocks.length).toBeGreaterThan(0);
+    });
+
+    it('should display cURL examples by default', () => {
+      const { container } = render(<HelpApiDocs />, { wrapper: createWrapper() });
+
+      // Look for curl command in code blocks
+      const pageText = container.textContent || '';
+      expect(pageText).toContain('curl');
+    });
+
+    it('should include API token in code examples', async () => {
+      const { container } = render(<HelpApiDocs />, { wrapper: createWrapper() });
+
+      // Wait for the component to load and use the token
+      await waitFor(() => {
+        const pageText = container.textContent || '';
+        expect(pageText).toContain('ss_test_abc123'); // The first token's prefix
+      });
+    });
+
+    it('should include sandbox URL in examples', () => {
+      const { container } = render(<HelpApiDocs />, { wrapper: createWrapper() });
+
+      const pageText = container.textContent || '';
+      expect(pageText).toContain('sandbox.smoothschedule.com');
+    });
+
+    it('should render language selector tabs', () => {
+      const { container } = render(<HelpApiDocs />, { wrapper: createWrapper() });
+
+      // Look for language labels (cURL, Python, etc.)
+      const pageText = container.textContent || '';
+      expect(pageText).toContain('cURL');
+    });
+
+    it('should allow switching between code languages', async () => {
+      const user = userEvent.setup();
+      const { container } = render(<HelpApiDocs />, { wrapper: createWrapper() });
+
+      // Find Python language button (if visible)
+      // This is a simplified test - actual implementation may vary
+      const buttons = container.querySelectorAll('button');
+      const pythonButton = Array.from(buttons).find(btn =>
+        btn.textContent?.includes('Python')
+      );
+
+      if (pythonButton) {
+        await user.click(pythonButton);
+
+        // After clicking, should show Python code
+        await waitFor(() => {
+          const pageText = container.textContent || '';
+          expect(pageText).toContain('import requests');
+        });
+      }
+    });
+  });
+
+  describe('HTTP Method Badges', () => {
+    it('should render GET method badges', () => {
+      const { container } = render(<HelpApiDocs />, { wrapper: createWrapper() });
+
+      const pageText = container.textContent || '';
+      expect(pageText).toContain('GET');
+    });
+
+    it('should render POST method badges', () => {
+      const { container } = render(<HelpApiDocs />, { wrapper: createWrapper() });
+
+      const pageText = container.textContent || '';
+      expect(pageText).toContain('POST');
+    });
+
+    it('should render PATCH method badges', () => {
+      const { container } = render(<HelpApiDocs />, { wrapper: createWrapper() });
+
+      const pageText = container.textContent || '';
+      expect(pageText).toContain('PATCH');
+    });
+
+    it('should render DELETE method badges', () => {
+      const { container } = render(<HelpApiDocs />, { wrapper: createWrapper() });
+
+      const pageText = container.textContent || '';
+      expect(pageText).toContain('DELETE');
+    });
+  });
+
+  describe('API Endpoints', () => {
+    it('should document the list services endpoint', () => {
+      const { container } = render(<HelpApiDocs />, { wrapper: createWrapper() });
+
+      const section = document.getElementById('list-services');
+      expect(section).toBeInTheDocument();
+    });
+
+    it('should document the create appointment endpoint', () => {
+      const { container } = render(<HelpApiDocs />, { wrapper: createWrapper() });
+
+      const section = document.getElementById('create-appointment');
+      expect(section).toBeInTheDocument();
+    });
+
+    it('should document the check availability endpoint', () => {
+      const { container } = render(<HelpApiDocs />, { wrapper: createWrapper() });
+
+      const section = document.getElementById('check-availability');
+      expect(section).toBeInTheDocument();
+    });
+
+    it('should document customer endpoints', () => {
+      render(<HelpApiDocs />, { wrapper: createWrapper() });
+
+      expect(document.getElementById('create-customer')).toBeInTheDocument();
+      expect(document.getElementById('retrieve-customer')).toBeInTheDocument();
+      expect(document.getElementById('update-customer')).toBeInTheDocument();
+      expect(document.getElementById('list-customers')).toBeInTheDocument();
+    });
+
+    it('should document webhook endpoints', () => {
+      render(<HelpApiDocs />, { wrapper: createWrapper() });
+
+      expect(document.getElementById('webhook-events')).toBeInTheDocument();
+      expect(document.getElementById('create-webhook')).toBeInTheDocument();
+      expect(document.getElementById('list-webhooks')).toBeInTheDocument();
+    });
+  });
+
+  describe('Page Structure', () => {
+    it('should have a sticky header', () => {
+      const { container } = render(<HelpApiDocs />, { wrapper: createWrapper() });
+
+      const header = container.querySelector('header');
+      expect(header).toHaveClass('sticky');
+    });
+
+    it('should render main content area', () => {
+      const { container } = render(<HelpApiDocs />, { wrapper: createWrapper() });
+
+      const mainContent = container.querySelector('.min-h-screen');
+      expect(mainContent).toBeInTheDocument();
+    });
+
+    it('should apply dark mode classes', () => {
+      const { container } = render(<HelpApiDocs />, { wrapper: createWrapper() });
+
+      const mainDiv = container.querySelector('.dark\\:bg-gray-900');
+      expect(mainDiv).toBeInTheDocument();
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('should have semantic header element', () => {
+      const { container } = render(<HelpApiDocs />, { wrapper: createWrapper() });
+
+      const header = container.querySelector('header');
+      expect(header).toBeInTheDocument();
+    });
+
+    it('should have accessible back button', () => {
+      render(<HelpApiDocs />, { wrapper: createWrapper() });
+
+      const backButton = screen.getByRole('button', { name: /back/i });
+      expect(backButton).toHaveAccessibleName();
+    });
+
+    it('should have accessible token selector', async () => {
+      render(<HelpApiDocs />, { wrapper: createWrapper() });
+
+      // Wait for the selector to be rendered
+      await waitFor(() => {
+        const selector = screen.getByRole('combobox');
+        expect(selector).toBeInTheDocument();
+      });
+    });
+
+    it('should use section elements for content sections', () => {
+      const { container } = render(<HelpApiDocs />, { wrapper: createWrapper() });
+
+      const sections = container.querySelectorAll('section');
+      expect(sections.length).toBeGreaterThan(0);
+    });
+  });
+
+  describe('Internationalization', () => {
+    it('should translate page title', () => {
+      render(<HelpApiDocs />, { wrapper: createWrapper() });
+
+      const title = screen.getByText('API Documentation');
+      expect(title).toBeInTheDocument();
+    });
+
+    it('should translate back button text', () => {
+      render(<HelpApiDocs />, { wrapper: createWrapper() });
+
+      const backButton = screen.getByRole('button', { name: /back/i });
+      expect(backButton).toHaveTextContent('Back');
+    });
+
+    it('should translate no tokens warning', async () => {
+      const { useTestTokensForDocs } = await import('../../hooks/useApiTokens');
+      vi.mocked(useTestTokensForDocs).mockReturnValue({
+        data: [],
+        isLoading: false,
+        error: null,
+      } as any);
+
+      render(<HelpApiDocs />, { wrapper: createWrapper() });
+
+      await waitFor(() => {
+        expect(screen.getByText('No test tokens found')).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Integration', () => {
+    it('should render complete API documentation page', async () => {
+      render(<HelpApiDocs />, { wrapper: createWrapper() });
+
+      // Check for key elements
+      expect(screen.getByText('API Documentation')).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: /back/i })).toBeInTheDocument();
+
+      // Wait for token selector to render
+      await waitFor(() => {
+        expect(screen.getByRole('combobox')).toBeInTheDocument();
+      });
+
+      expect(document.getElementById('introduction')).toBeInTheDocument();
+      expect(document.getElementById('authentication')).toBeInTheDocument();
+    });
+
+    it('should handle token selection and update examples', async () => {
+      const user = userEvent.setup();
+      const { container } = render(<HelpApiDocs />, { wrapper: createWrapper() });
+
+      // Wait for token selector to render
+      const tokenSelector = await waitFor(() => {
+        return screen.getByRole('combobox') as HTMLSelectElement;
+      });
+
+      // Wait for initial token to appear
+      await waitFor(() => {
+        expect(container.textContent).toContain('ss_test_abc123');
+      });
+
+      // Select second token
+      await user.selectOptions(tokenSelector, 'token-2');
+
+      // Should now show second token in examples
+      await waitFor(() => {
+        expect(container.textContent).toContain('ss_test_def456');
+      });
+    });
+
+    it('should maintain structure with all sections present', () => {
+      render(<HelpApiDocs />, { wrapper: createWrapper() });
+
+      // Verify all main sections exist
+      const sections = [
+        'introduction',
+        'authentication',
+        'errors',
+        'rate-limits',
+        'list-services',
+        'check-availability',
+        'create-appointment',
+        'create-customer',
+        'webhook-events',
+      ];
+
+      sections.forEach(sectionId => {
+        const section = document.getElementById(sectionId);
+        expect(section).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Error Handling', () => {
+    it('should handle missing token data gracefully', async () => {
+      const { useTestTokensForDocs } = await import('../../hooks/useApiTokens');
+      vi.mocked(useTestTokensForDocs).mockReturnValue({
+        data: undefined,
+        isLoading: false,
+        error: null,
+      } as any);
+
+      render(<HelpApiDocs />, { wrapper: createWrapper() });
+
+      // Should still render the page
+      expect(screen.getByText('API Documentation')).toBeInTheDocument();
+    });
+
+    it('should handle token loading state', async () => {
+      const { useTestTokensForDocs } = await import('../../hooks/useApiTokens');
+      vi.mocked(useTestTokensForDocs).mockReturnValue({
+        data: undefined,
+        isLoading: true,
+        error: null,
+      } as any);
+
+      render(<HelpApiDocs />, { wrapper: createWrapper() });
+
+      // Should render without token selector
+      expect(screen.queryByRole('combobox')).not.toBeInTheDocument();
+    });
+
+    it('should use default API key when no tokens available', async () => {
+      const { useTestTokensForDocs } = await import('../../hooks/useApiTokens');
+      vi.mocked(useTestTokensForDocs).mockReturnValue({
+        data: [],
+        isLoading: false,
+        error: null,
+      } as any);
+
+      const { container } = render(<HelpApiDocs />, { wrapper: createWrapper() });
+
+      // Should show default placeholder token
+      await waitFor(() => {
+        const pageText = container.textContent || '';
+        expect(pageText).toContain('ss_test_');
+      });
+    });
+  });
+});

frontend/src/pages/__tests__/PageEditor.test.tsx

@@ -0,0 +1,406 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import React from 'react';
+
+// Mock react-i18next BEFORE imports
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string, defaultValue?: string) => defaultValue || key,
+  }),
+}));
+
+// Mock Puck editor
+const mockPuckOnChange = vi.fn();
+const mockPuckOnPublish = vi.fn();
+
+vi.mock('@measured/puck', () => ({
+  Puck: vi.fn(({ data, onChange, onPublish }) => {
+    mockPuckOnChange.mockImplementation(onChange);
+    mockPuckOnPublish.mockImplementation(onPublish);
+    return (
+      <div data-testid="puck-editor">
+        <div>Puck Editor Mock</div>
+        <button onClick={() => onChange({ ...data, modified: true })}>Modify Data</button>
+        <button onClick={() => onPublish(data)}>Publish</button>
+      </div>
+    );
+  }),
+  Render: vi.fn(({ data }) => (
+    <div data-testid="puck-render">Rendered: {JSON.stringify(data)}</div>
+  )),
+}));
+
+// Mock puck config
+vi.mock('../../puck/config', () => ({
+  puckConfig: { components: {} },
+  getEditorConfig: vi.fn(() => ({ components: {} })),
+  renderConfig: { components: {} },
+}));
+
+// Mock hooks
+const mockUsePages = vi.fn();
+const mockUpdatePage = vi.fn();
+const mockCreatePage = vi.fn();
+const mockDeletePage = vi.fn();
+
+vi.mock('../../hooks/useSites', () => ({
+  usePages: () => mockUsePages(),
+  useUpdatePage: () => ({ mutateAsync: mockUpdatePage }),
+  useCreatePage: () => ({ mutateAsync: mockCreatePage }),
+  useDeletePage: () => ({ mutateAsync: mockDeletePage }),
+}));
+
+const mockUseEntitlements = vi.fn();
+
+vi.mock('../../hooks/useEntitlements', () => ({
+  useEntitlements: () => mockUseEntitlements(),
+  FEATURE_CODES: {
+    MAX_PUBLIC_PAGES: 'max_public_pages',
+  },
+}));
+
+// Mock react-hot-toast
+vi.mock('react-hot-toast', () => ({
+  default: {
+    success: vi.fn(),
+    error: vi.fn(),
+  },
+}));
+
+import PageEditor from '../PageEditor';
+
+describe('PageEditor', () => {
+  const mockPages = [
+    {
+      id: '1',
+      title: 'Home',
+      is_home: true,
+      puck_data: {
+        root: {},
+        content: [{ type: 'Heading', props: { id: 'h1', text: 'Welcome' } }],
+      },
+    },
+    {
+      id: '2',
+      title: 'About',
+      is_home: false,
+      puck_data: {
+        root: {},
+        content: [{ type: 'Text', props: { id: 't1', text: 'About us' } }],
+      },
+    },
+  ];
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockUsePages.mockReturnValue({
+      data: mockPages,
+      isLoading: false,
+    });
+    mockUseEntitlements.mockReturnValue({
+      getLimit: vi.fn(() => null), // unlimited pages
+      isLoading: false,
+      hasFeature: vi.fn(() => true),
+    });
+    mockUpdatePage.mockResolvedValue({});
+    mockCreatePage.mockResolvedValue({ id: '3', title: 'New Page' });
+    mockDeletePage.mockResolvedValue({});
+  });
+
+  const renderComponent = () => {
+    const queryClient = new QueryClient({
+      defaultOptions: {
+        queries: { retry: false },
+        mutations: { retry: false },
+      },
+    });
+
+    return render(
+      <QueryClientProvider client={queryClient}>
+        <PageEditor />
+      </QueryClientProvider>
+    );
+  };
+
+  it('renders loading state', () => {
+    mockUsePages.mockReturnValue({
+      data: null,
+      isLoading: true,
+    });
+
+    renderComponent();
+    const loader = document.querySelector('.animate-spin');
+    expect(loader).toBeInTheDocument();
+  });
+
+  it('renders page editor with pages list', async () => {
+    renderComponent();
+
+    await waitFor(() => {
+      expect(screen.getByTestId('puck-editor')).toBeInTheDocument();
+    });
+
+    // Should show page selector
+    const select = screen.getByRole('combobox');
+    expect(select).toBeInTheDocument();
+  });
+
+  it('displays home page by default', async () => {
+    renderComponent();
+
+    await waitFor(() => {
+      expect(screen.getByTestId('puck-editor')).toBeInTheDocument();
+    });
+
+    const select = screen.getByRole('combobox') as HTMLSelectElement;
+    expect(select.value).toBe('1'); // Home page ID
+  });
+
+  it('allows switching between pages', async () => {
+    const user = userEvent.setup();
+    renderComponent();
+
+    await waitFor(() => {
+      expect(screen.getByTestId('puck-editor')).toBeInTheDocument();
+    });
+
+    const select = screen.getByRole('combobox');
+    await user.selectOptions(select, '2');
+
+    // Page should switch to About page
+    expect((select as HTMLSelectElement).value).toBe('2');
+  });
+
+  it('opens new page modal', async () => {
+    const user = userEvent.setup();
+    renderComponent();
+
+    await waitFor(() => {
+      expect(screen.getByTestId('puck-editor')).toBeInTheDocument();
+    });
+
+    const newPageButton = screen.getByRole('button', { name: /new page/i });
+    await user.click(newPageButton);
+
+    expect(screen.getByText('Create New Page')).toBeInTheDocument();
+  });
+
+  it('creates new page', async () => {
+    const user = userEvent.setup();
+    renderComponent();
+
+    await waitFor(() => {
+      expect(screen.getByTestId('puck-editor')).toBeInTheDocument();
+    });
+
+    // Open modal
+    const newPageButton = screen.getByRole('button', { name: /new page/i });
+    await user.click(newPageButton);
+
+    // Fill form
+    const input = screen.getByPlaceholderText('Page Title');
+    await user.type(input, 'Test Page');
+
+    // Submit
+    const createButton = screen.getByRole('button', { name: /create/i });
+    await user.click(createButton);
+
+    await waitFor(() => {
+      expect(mockCreatePage).toHaveBeenCalledWith({ title: 'Test Page' });
+    });
+  });
+
+  it('disables new page button when limit reached', async () => {
+    mockUseEntitlements.mockReturnValue({
+      getLimit: vi.fn(() => 2), // limit of 2 pages
+      isLoading: false,
+      hasFeature: vi.fn(() => true),
+    });
+
+    renderComponent();
+
+    await waitFor(() => {
+      expect(screen.getByTestId('puck-editor')).toBeInTheDocument();
+    });
+
+    const newPageButton = screen.getByRole('button', { name: /new page/i });
+    expect(newPageButton).toBeDisabled();
+  });
+
+  it('shows delete button for non-home pages', async () => {
+    const user = userEvent.setup();
+    renderComponent();
+
+    await waitFor(() => {
+      expect(screen.getByTestId('puck-editor')).toBeInTheDocument();
+    });
+
+    // Switch to About page (not home)
+    const select = screen.getByRole('combobox');
+    await user.selectOptions(select, '2');
+
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: /delete/i })).toBeInTheDocument();
+    });
+  });
+
+  it('does not show delete button for home page', async () => {
+    renderComponent();
+
+    await waitFor(() => {
+      expect(screen.getByTestId('puck-editor')).toBeInTheDocument();
+    });
+
+    // Home page is selected by default
+    expect(screen.queryByRole('button', { name: /delete/i })).not.toBeInTheDocument();
+  });
+
+  it('shows viewport toggle buttons', async () => {
+    renderComponent();
+
+    await waitFor(() => {
+      expect(screen.getByTestId('puck-editor')).toBeInTheDocument();
+    });
+
+    // Should have desktop, tablet, mobile buttons
+    const buttons = screen.getAllByRole('button');
+    const viewportButtons = buttons.filter(btn =>
+      btn.title?.includes('view')
+    );
+
+    expect(viewportButtons.length).toBeGreaterThan(0);
+  });
+
+  it('shows page settings button', async () => {
+    renderComponent();
+
+    await waitFor(() => {
+      expect(screen.getByTestId('puck-editor')).toBeInTheDocument();
+    });
+
+    const settingsButton = screen.getByRole('button', { name: /page settings/i });
+    expect(settingsButton).toBeInTheDocument();
+  });
+
+  it('shows preview button', async () => {
+    renderComponent();
+
+    await waitFor(() => {
+      expect(screen.getByTestId('puck-editor')).toBeInTheDocument();
+    });
+
+    const previewButton = screen.getByRole('button', { name: /preview/i });
+    expect(previewButton).toBeInTheDocument();
+  });
+
+  it('shows save draft button', async () => {
+    renderComponent();
+
+    await waitFor(() => {
+      expect(screen.getByTestId('puck-editor')).toBeInTheDocument();
+    });
+
+    const saveDraftButton = screen.getByRole('button', { name: /save draft/i });
+    expect(saveDraftButton).toBeInTheDocument();
+  });
+
+  it('displays page count', async () => {
+    renderComponent();
+
+    await waitFor(() => {
+      expect(screen.getByText(/2 \/ ∞ pages/i)).toBeInTheDocument();
+    });
+  });
+
+  it('shows read-only notice for free tier', async () => {
+    mockUseEntitlements.mockReturnValue({
+      getLimit: vi.fn(() => 0), // no access
+      isLoading: false,
+      hasFeature: vi.fn(() => false),
+    });
+
+    renderComponent();
+
+    await waitFor(() => {
+      expect(screen.getByText(/read-only mode/i)).toBeInTheDocument();
+    });
+  });
+
+  it('handles entitlements loading state', () => {
+    mockUseEntitlements.mockReturnValue({
+      getLimit: vi.fn(() => null),
+      isLoading: true,
+      hasFeature: vi.fn(() => true),
+    });
+
+    renderComponent();
+
+    const loader = document.querySelector('.animate-spin');
+    expect(loader).toBeInTheDocument();
+  });
+
+  it('opens page settings modal', async () => {
+    const user = userEvent.setup();
+    renderComponent();
+
+    await waitFor(() => {
+      expect(screen.getByTestId('puck-editor')).toBeInTheDocument();
+    });
+
+    const settingsButton = screen.getByRole('button', { name: /page settings/i });
+    await user.click(settingsButton);
+
+    await waitFor(() => {
+      expect(screen.getByText('Page Settings')).toBeInTheDocument();
+    });
+  });
+
+  it('opens preview modal', async () => {
+    const user = userEvent.setup();
+    renderComponent();
+
+    await waitFor(() => {
+      expect(screen.getByTestId('puck-editor')).toBeInTheDocument();
+    });
+
+    const previewButton = screen.getByRole('button', { name: /preview/i });
+    await user.click(previewButton);
+
+    await waitFor(() => {
+      expect(screen.getByText(/preview:/i)).toBeInTheDocument();
+    });
+  });
+
+  it('handles missing pages gracefully', () => {
+    mockUsePages.mockReturnValue({
+      data: [],
+      isLoading: false,
+    });
+
+    renderComponent();
+
+    expect(screen.getByText(/no page found/i)).toBeInTheDocument();
+  });
+
+  it('validates page title when creating', async () => {
+    const user = userEvent.setup();
+    renderComponent();
+
+    await waitFor(() => {
+      expect(screen.getByTestId('puck-editor')).toBeInTheDocument();
+    });
+
+    // Open modal
+    const newPageButton = screen.getByRole('button', { name: /new page/i });
+    await user.click(newPageButton);
+
+    // Try to submit without title
+    const createButton = screen.getByRole('button', { name: /create/i });
+    await user.click(createButton);
+
+    // Should not call create
+    expect(mockCreatePage).not.toHaveBeenCalled();
+  });
+});

frontend/src/pages/__tests__/Settings.test.tsx

@@ -0,0 +1,750 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import React from 'react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { MemoryRouter } from 'react-router-dom';
+import Settings from '../Settings';
+
+// Mock react-i18next
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string, fallback?: string) => fallback || key,
+  }),
+}));
+
+// Mock useOutletContext to provide business and user data
+const mockOutletContext = vi.fn();
+vi.mock('react-router-dom', async () => {
+  const actual = await vi.importActual('react-router-dom');
+  return {
+    ...actual,
+    useOutletContext: () => mockOutletContext(),
+  };
+});
+
+// Mock API hooks
+const mockBusinessOAuthSettings = vi.fn();
+const mockUpdateBusinessOAuthSettings = vi.fn();
+const mockCustomDomains = vi.fn();
+const mockAddCustomDomain = vi.fn();
+const mockDeleteCustomDomain = vi.fn();
+const mockVerifyCustomDomain = vi.fn();
+const mockSetPrimaryDomain = vi.fn();
+const mockBusinessOAuthCredentials = vi.fn();
+const mockUpdateBusinessOAuthCredentials = vi.fn();
+const mockResourceTypes = vi.fn();
+const mockCreateResourceType = vi.fn();
+const mockUpdateResourceType = vi.fn();
+const mockDeleteResourceType = vi.fn();
+const mockCommunicationCredits = vi.fn();
+const mockCreditTransactions = vi.fn();
+const mockUpdateCreditsSettings = vi.fn();
+const mockAddCredits = vi.fn();
+
+vi.mock('../../hooks/useBusinessOAuth', () => ({
+  useBusinessOAuthSettings: () => mockBusinessOAuthSettings(),
+  useUpdateBusinessOAuthSettings: () => ({
+    mutate: mockUpdateBusinessOAuthSettings,
+    isPending: false,
+  }),
+}));
+
+vi.mock('../../hooks/useCustomDomains', () => ({
+  useCustomDomains: () => mockCustomDomains(),
+  useAddCustomDomain: () => ({
+    mutate: mockAddCustomDomain,
+    isPending: false,
+  }),
+  useDeleteCustomDomain: () => ({
+    mutate: mockDeleteCustomDomain,
+    isPending: false,
+  }),
+  useVerifyCustomDomain: () => ({
+    mutate: mockVerifyCustomDomain,
+    isPending: false,
+  }),
+  useSetPrimaryDomain: () => ({
+    mutate: mockSetPrimaryDomain,
+    isPending: false,
+  }),
+}));
+
+vi.mock('../../hooks/useBusinessOAuthCredentials', () => ({
+  useBusinessOAuthCredentials: () => mockBusinessOAuthCredentials(),
+  useUpdateBusinessOAuthCredentials: () => ({
+    mutate: mockUpdateBusinessOAuthCredentials,
+    isPending: false,
+  }),
+}));
+
+vi.mock('../../hooks/useResourceTypes', () => ({
+  useResourceTypes: () => mockResourceTypes(),
+  useCreateResourceType: () => ({
+    mutateAsync: mockCreateResourceType,
+    isPending: false,
+  }),
+  useUpdateResourceType: () => ({
+    mutateAsync: mockUpdateResourceType,
+    isPending: false,
+  }),
+  useDeleteResourceType: () => ({
+    mutateAsync: mockDeleteResourceType,
+    isPending: false,
+  }),
+}));
+
+vi.mock('../../hooks/useCommunicationCredits', () => ({
+  useCommunicationCredits: () => mockCommunicationCredits(),
+  useCreditTransactions: () => mockCreditTransactions(),
+  useUpdateCreditsSettings: () => ({
+    mutate: mockUpdateCreditsSettings,
+    isPending: false,
+  }),
+  useAddCredits: () => ({
+    mutate: mockAddCredits,
+    isPending: false,
+  }),
+}));
+
+// Mock child components
+vi.mock('../../components/DomainPurchase', () => ({
+  default: () => React.createElement('div', { 'data-testid': 'domain-purchase' }, 'Domain Purchase'),
+}));
+
+vi.mock('../../components/CreditPaymentForm', () => ({
+  CreditPaymentModal: ({ isOpen, onClose }: { isOpen: boolean; onClose: () => void }) =>
+    isOpen ? React.createElement('div', { 'data-testid': 'credit-payment-modal' },
+      React.createElement('button', { onClick: onClose }, 'Close Payment Modal')
+    ) : null,
+}));
+
+vi.mock('../../components/OnboardingWizard', () => ({
+  default: ({ onComplete, onSkip }: { onComplete: () => void; onSkip: () => void }) =>
+    React.createElement('div', { 'data-testid': 'onboarding-wizard' },
+      React.createElement('button', { onClick: onComplete }, 'Complete Onboarding'),
+      React.createElement('button', { onClick: onSkip }, 'Skip Onboarding')
+    ),
+}));
+
+vi.mock('../../components/ApiTokensSection', () => ({
+  default: () => React.createElement('div', { 'data-testid': 'api-tokens-section' }, 'API Tokens Section'),
+}));
+
+vi.mock('../../components/TicketEmailAddressManager', () => ({
+  default: () => React.createElement('div', { 'data-testid': 'ticket-email-manager' }, 'Ticket Email Manager'),
+}));
+
+const defaultBusiness = {
+  id: 1,
+  name: 'Test Business',
+  subdomain: 'testbiz',
+  logoUrl: '',
+  emailLogoUrl: '',
+  primaryColor: '#2563eb',
+  secondaryColor: '#0ea5e9',
+  timezone: 'America/New_York',
+  locale: 'en-US',
+  currency: 'USD',
+  phone: '+15551234567',
+  email: 'test@business.com',
+  website: 'https://testbusiness.com',
+  description: 'A test business',
+  address_line1: '123 Main St',
+  city: 'New York',
+  state: 'NY',
+  postal_code: '10001',
+  country: 'US',
+};
+
+const defaultOwnerUser = {
+  id: 1,
+  email: 'owner@test.com',
+  name: 'Business Owner',
+  role: 'owner',
+  phone: '+15551234567',
+};
+
+const defaultStaffUser = {
+  id: 2,
+  email: 'staff@test.com',
+  name: 'Staff Member',
+  role: 'staff',
+  phone: '+15559876543',
+};
+
+const createWrapper = () => {
+  const queryClient = new QueryClient({
+    defaultOptions: { queries: { retry: false } },
+  });
+  return ({ children }: { children: React.ReactNode }) =>
+    React.createElement(
+      QueryClientProvider,
+      { client: queryClient },
+      React.createElement(MemoryRouter, {}, children)
+    );
+};
+
+describe('Settings', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+
+    // Default mock data
+    mockOutletContext.mockReturnValue({
+      business: defaultBusiness,
+      updateBusiness: vi.fn(),
+      user: defaultOwnerUser,
+    });
+
+    mockBusinessOAuthSettings.mockReturnValue({
+      data: {
+        settings: {
+          enabledProviders: [],
+          allowRegistration: false,
+          autoLinkByEmail: true,
+          useCustomCredentials: false,
+        },
+        availableProviders: [
+          { id: 'google', name: 'Google' },
+          { id: 'apple', name: 'Apple' },
+          { id: 'facebook', name: 'Facebook' },
+        ],
+      },
+      isLoading: false,
+    });
+
+    mockCustomDomains.mockReturnValue({
+      data: [],
+      isLoading: false,
+    });
+
+    mockBusinessOAuthCredentials.mockReturnValue({
+      data: {
+        useCustomCredentials: false,
+        credentials: {},
+      },
+      isLoading: false,
+    });
+
+    mockResourceTypes.mockReturnValue({
+      data: [],
+      isLoading: false,
+    });
+
+    mockCommunicationCredits.mockReturnValue({
+      data: null,
+      isLoading: false,
+    });
+
+    mockCreditTransactions.mockReturnValue({
+      data: [],
+      isLoading: false,
+    });
+  });
+
+  describe('Page Structure', () => {
+    it('renders page title', () => {
+      render(React.createElement(Settings), { wrapper: createWrapper() });
+      expect(screen.getByText('settings.businessSettings')).toBeInTheDocument();
+    });
+
+    it('renders page description', () => {
+      render(React.createElement(Settings), { wrapper: createWrapper() });
+      expect(screen.getByText('settings.businessSettingsDescription')).toBeInTheDocument();
+    });
+
+    it('renders all tab navigation buttons', () => {
+      render(React.createElement(Settings), { wrapper: createWrapper() });
+
+      expect(screen.getByText('General')).toBeInTheDocument();
+      expect(screen.getByText('Resource Types')).toBeInTheDocument();
+      expect(screen.getByText('Domains')).toBeInTheDocument();
+      expect(screen.getByText('Authentication')).toBeInTheDocument();
+      expect(screen.getByText('API Tokens')).toBeInTheDocument();
+      expect(screen.getByText('Email Addresses')).toBeInTheDocument();
+      expect(screen.getByText('SMS & Calling')).toBeInTheDocument();
+    });
+
+    it('shows General tab by default', () => {
+      render(React.createElement(Settings), { wrapper: createWrapper() });
+      expect(screen.getByText('Business Identity')).toBeInTheDocument();
+    });
+  });
+
+  describe('General Tab', () => {
+    it('renders Business Identity section for owners', () => {
+      render(React.createElement(Settings), { wrapper: createWrapper() });
+
+      expect(screen.getByText('Business Identity')).toBeInTheDocument();
+      expect(screen.getByDisplayValue('Test Business')).toBeInTheDocument();
+      expect(screen.getByDisplayValue('testbiz')).toBeInTheDocument();
+    });
+
+    it('hides Business Identity section for non-owners', () => {
+      mockOutletContext.mockReturnValue({
+        business: defaultBusiness,
+        updateBusiness: vi.fn(),
+        user: defaultStaffUser,
+      });
+
+      render(React.createElement(Settings), { wrapper: createWrapper() });
+      expect(screen.queryByText('Business Identity')).not.toBeInTheDocument();
+    });
+
+    it('renders Branding section', () => {
+      render(React.createElement(Settings), { wrapper: createWrapper() });
+      expect(screen.getByText('settings.branding')).toBeInTheDocument();
+    });
+
+    it('renders brand logo upload area', () => {
+      render(React.createElement(Settings), { wrapper: createWrapper() });
+      expect(screen.getByText('Brand Logos')).toBeInTheDocument();
+    });
+
+    it('allows changing business name', () => {
+      const updateBusiness = vi.fn();
+      mockOutletContext.mockReturnValue({
+        business: defaultBusiness,
+        updateBusiness,
+        user: defaultOwnerUser,
+      });
+
+      render(React.createElement(Settings), { wrapper: createWrapper() });
+
+      const nameInput = screen.getByDisplayValue('Test Business');
+      fireEvent.change(nameInput, { target: { value: 'Updated Business' } });
+
+      expect(nameInput).toHaveValue('Updated Business');
+    });
+
+    it('saves changes when Save button is clicked', async () => {
+      const updateBusiness = vi.fn();
+      mockOutletContext.mockReturnValue({
+        business: defaultBusiness,
+        updateBusiness,
+        user: defaultOwnerUser,
+      });
+
+      render(React.createElement(Settings), { wrapper: createWrapper() });
+
+      const nameInput = screen.getByDisplayValue('Test Business');
+      fireEvent.change(nameInput, { target: { value: 'Updated Business' } });
+
+      const saveButton = screen.getByText('Save Changes');
+      fireEvent.click(saveButton);
+
+      await waitFor(() => {
+        expect(updateBusiness).toHaveBeenCalled();
+      });
+    });
+
+    it('resets changes when Cancel button is clicked', () => {
+      render(React.createElement(Settings), { wrapper: createWrapper() });
+
+      const nameInput = screen.getByDisplayValue('Test Business');
+      fireEvent.change(nameInput, { target: { value: 'Updated Business' } });
+      expect(nameInput).toHaveValue('Updated Business');
+
+      const cancelButton = screen.getByText('Cancel Changes');
+      fireEvent.click(cancelButton);
+
+      expect(screen.getByDisplayValue('Test Business')).toBeInTheDocument();
+    });
+  });
+
+  describe('Resource Types Tab', () => {
+    beforeEach(() => {
+      mockResourceTypes.mockReturnValue({
+        data: [
+          {
+            id: '1',
+            name: 'Stylist',
+            description: 'Hair stylist',
+            category: 'STAFF',
+            icon_name: 'scissors',
+          },
+          {
+            id: '2',
+            name: 'Treatment Room',
+            description: 'Treatment room',
+            category: 'OTHER',
+            icon_name: 'door',
+          },
+        ],
+        isLoading: false,
+      });
+    });
+
+    it('switches to Resource Types tab when clicked', () => {
+      render(React.createElement(Settings), { wrapper: createWrapper() });
+
+      fireEvent.click(screen.getByText('Resource Types'));
+
+      expect(screen.getByText('Resource Types')).toBeInTheDocument();
+    });
+
+    it('displays resource types list', () => {
+      render(React.createElement(Settings), { wrapper: createWrapper() });
+
+      fireEvent.click(screen.getByText('Resource Types'));
+
+      expect(screen.getByText('Stylist')).toBeInTheDocument();
+      expect(screen.getByText('Treatment Room')).toBeInTheDocument();
+    });
+
+    it('renders Add Type button', () => {
+      render(React.createElement(Settings), { wrapper: createWrapper() });
+
+      fireEvent.click(screen.getByText('Resource Types'));
+
+      expect(screen.getByText('Add Type')).toBeInTheDocument();
+    });
+
+    it('shows loading state when resource types are loading', () => {
+      mockResourceTypes.mockReturnValue({
+        data: [],
+        isLoading: true,
+      });
+
+      render(React.createElement(Settings), { wrapper: createWrapper() });
+
+      fireEvent.click(screen.getByText('Resource Types'));
+
+      expect(document.querySelector('[class*="animate-spin"]')).toBeInTheDocument();
+    });
+
+    it('shows empty state when no resource types exist', () => {
+      mockResourceTypes.mockReturnValue({
+        data: [],
+        isLoading: false,
+      });
+
+      render(React.createElement(Settings), { wrapper: createWrapper() });
+
+      fireEvent.click(screen.getByText('Resource Types'));
+
+      expect(screen.getByText('No custom resource types yet.')).toBeInTheDocument();
+    });
+  });
+
+  describe('Domains Tab', () => {
+    beforeEach(() => {
+      mockCustomDomains.mockReturnValue({
+        data: [
+          {
+            id: 1,
+            domain: 'custom.example.com',
+            is_verified: true,
+            is_primary: true,
+          },
+          {
+            id: 2,
+            domain: 'booking.example.com',
+            is_verified: false,
+            is_primary: false,
+          },
+        ],
+        isLoading: false,
+      });
+    });
+
+    it('switches to Domains tab when clicked', () => {
+      render(React.createElement(Settings), { wrapper: createWrapper() });
+
+      fireEvent.click(screen.getByText('Domains'));
+
+      expect(screen.getByText('Custom Domains')).toBeInTheDocument();
+    });
+
+    it('displays custom domains list', () => {
+      render(React.createElement(Settings), { wrapper: createWrapper() });
+
+      fireEvent.click(screen.getByText('Domains'));
+
+      expect(screen.getByText('custom.example.com')).toBeInTheDocument();
+      expect(screen.getByText('booking.example.com')).toBeInTheDocument();
+    });
+
+    it('shows verified badge for verified domains', () => {
+      render(React.createElement(Settings), { wrapper: createWrapper() });
+
+      fireEvent.click(screen.getByText('Domains'));
+
+      // Look for checkmark icon with "Verified" text
+      expect(screen.getByText(/Verified/i)).toBeInTheDocument();
+    });
+
+    it('shows primary badge for primary domain', () => {
+      render(React.createElement(Settings), { wrapper: createWrapper() });
+
+      fireEvent.click(screen.getByText('Domains'));
+
+      expect(screen.getByText('Primary')).toBeInTheDocument();
+    });
+
+    it('renders add domain input', () => {
+      render(React.createElement(Settings), { wrapper: createWrapper() });
+
+      fireEvent.click(screen.getByText('Domains'));
+
+      // Check for domain input field (may have different placeholder)
+      const inputs = document.querySelectorAll('input[type="text"]');
+      expect(inputs.length).toBeGreaterThan(0);
+    });
+
+    it('renders domain management section', () => {
+      render(React.createElement(Settings), { wrapper: createWrapper() });
+
+      fireEvent.click(screen.getByText('Domains'));
+
+      expect(screen.getByText('Custom Domains')).toBeInTheDocument();
+    });
+  });
+
+  describe('Authentication Tab', () => {
+    it('switches to Authentication tab when clicked', () => {
+      render(React.createElement(Settings), { wrapper: createWrapper() });
+
+      fireEvent.click(screen.getByText('Authentication'));
+
+      // Check that we're on the Authentication tab
+      expect(screen.getByText('Google')).toBeInTheDocument();
+    });
+
+    it('renders OAuth provider toggles', () => {
+      render(React.createElement(Settings), { wrapper: createWrapper() });
+
+      fireEvent.click(screen.getByText('Authentication'));
+
+      // Multiple OAuth providers are available
+      const googleText = screen.getAllByText('Google');
+      expect(googleText.length).toBeGreaterThan(0);
+    });
+
+    it('saves OAuth settings when Save button is clicked', async () => {
+      render(React.createElement(Settings), { wrapper: createWrapper() });
+
+      fireEvent.click(screen.getByText('Authentication'));
+
+      const saveButton = screen.getAllByText(/save/i).find(btn =>
+        btn.textContent?.includes('Save')
+      );
+
+      if (saveButton) {
+        fireEvent.click(saveButton);
+
+        await waitFor(() => {
+          expect(mockUpdateBusinessOAuthSettings).toHaveBeenCalled();
+        });
+      }
+    });
+
+    it('hides Authentication tab for non-owners', () => {
+      mockOutletContext.mockReturnValue({
+        business: defaultBusiness,
+        updateBusiness: vi.fn(),
+        user: defaultStaffUser,
+      });
+
+      render(React.createElement(Settings), { wrapper: createWrapper() });
+
+      fireEvent.click(screen.getByText('Authentication'));
+
+      expect(screen.queryByText('OAuth Providers')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('API Tokens Tab', () => {
+    it('switches to API Tokens tab when clicked', () => {
+      render(React.createElement(Settings), { wrapper: createWrapper() });
+
+      fireEvent.click(screen.getByText('API Tokens'));
+
+      expect(screen.getByTestId('api-tokens-section')).toBeInTheDocument();
+    });
+
+    it('hides API Tokens tab for non-owners', () => {
+      mockOutletContext.mockReturnValue({
+        business: defaultBusiness,
+        updateBusiness: vi.fn(),
+        user: defaultStaffUser,
+      });
+
+      render(React.createElement(Settings), { wrapper: createWrapper() });
+
+      fireEvent.click(screen.getByText('API Tokens'));
+
+      expect(screen.queryByTestId('api-tokens-section')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Email Addresses Tab', () => {
+    it('switches to Email Addresses tab when clicked', () => {
+      render(React.createElement(Settings), { wrapper: createWrapper() });
+
+      fireEvent.click(screen.getByText('Email Addresses'));
+
+      expect(screen.getByTestId('ticket-email-manager')).toBeInTheDocument();
+    });
+
+    it('hides Email Addresses tab for non-owners', () => {
+      mockOutletContext.mockReturnValue({
+        business: defaultBusiness,
+        updateBusiness: vi.fn(),
+        user: defaultStaffUser,
+      });
+
+      render(React.createElement(Settings), { wrapper: createWrapper() });
+
+      fireEvent.click(screen.getByText('Email Addresses'));
+
+      expect(screen.queryByTestId('ticket-email-manager')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('SMS & Calling Tab', () => {
+    beforeEach(() => {
+      mockCommunicationCredits.mockReturnValue({
+        data: {
+          balance: 1000,
+          low_balance_threshold: 100,
+          low_balance_alert_enabled: true,
+          auto_recharge_enabled: false,
+          auto_recharge_amount: 0,
+          auto_recharge_threshold: 0,
+        },
+        isLoading: false,
+      });
+
+      mockCreditTransactions.mockReturnValue({
+        data: [
+          {
+            id: 1,
+            type: 'purchase',
+            amount: 1000,
+            balance_after: 1000,
+            description: 'Initial purchase',
+            created_at: new Date().toISOString(),
+          },
+        ],
+        isLoading: false,
+      });
+    });
+
+    it('switches to SMS & Calling tab when clicked', () => {
+      render(React.createElement(Settings), { wrapper: createWrapper() });
+
+      fireEvent.click(screen.getByText('SMS & Calling'));
+
+      expect(screen.getByText('SMS & Calling Credits')).toBeInTheDocument();
+    });
+
+    it('displays credit balance', () => {
+      render(React.createElement(Settings), { wrapper: createWrapper() });
+
+      fireEvent.click(screen.getByText('SMS & Calling'));
+
+      // Credits section should be visible
+      expect(screen.getByText('SMS & Calling Credits')).toBeInTheDocument();
+    });
+
+    it('renders Add Credits button', () => {
+      render(React.createElement(Settings), { wrapper: createWrapper() });
+
+      fireEvent.click(screen.getByText('SMS & Calling'));
+
+      expect(screen.getByText('Add Credits')).toBeInTheDocument();
+    });
+
+    it('shows loading state when credits are loading', () => {
+      mockCommunicationCredits.mockReturnValue({
+        data: null,
+        isLoading: true,
+      });
+
+      render(React.createElement(Settings), { wrapper: createWrapper() });
+
+      fireEvent.click(screen.getByText('SMS & Calling'));
+
+      expect(document.querySelector('[class*="animate-spin"]')).toBeInTheDocument();
+    });
+
+    it('hides SMS & Calling tab for non-owners', () => {
+      mockOutletContext.mockReturnValue({
+        business: defaultBusiness,
+        updateBusiness: vi.fn(),
+        user: defaultStaffUser,
+      });
+
+      render(React.createElement(Settings), { wrapper: createWrapper() });
+
+      fireEvent.click(screen.getByText('SMS & Calling'));
+
+      expect(screen.queryByText('SMS & Calling Credits')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('User Interactions', () => {
+    it('switches between tabs correctly', () => {
+      render(React.createElement(Settings), { wrapper: createWrapper() });
+
+      // Start on General tab
+      expect(screen.getByText('Business Identity')).toBeInTheDocument();
+
+      // Switch to Domains
+      fireEvent.click(screen.getByText('Domains'));
+      expect(screen.getByText('Custom Domains')).toBeInTheDocument();
+      expect(screen.queryByText('Business Identity')).not.toBeInTheDocument();
+
+      // Switch to Authentication
+      fireEvent.click(screen.getByText('Authentication'));
+      expect(screen.getByText('Google')).toBeInTheDocument();
+      expect(screen.queryByText('Custom Domains')).not.toBeInTheDocument();
+
+      // Switch back to General
+      fireEvent.click(screen.getByText('General'));
+      expect(screen.getByText('Business Identity')).toBeInTheDocument();
+      expect(screen.queryByText('Google')).not.toBeInTheDocument();
+    });
+
+    it('shows active tab styling', () => {
+      render(React.createElement(Settings), { wrapper: createWrapper() });
+
+      const generalTab = screen.getByText('General').closest('button');
+      expect(generalTab).toHaveClass('border-brand-500');
+
+      fireEvent.click(screen.getByText('Domains'));
+
+      const domainsTab = screen.getByText('Domains').closest('button');
+      expect(domainsTab).toHaveClass('border-brand-500');
+    });
+
+    it('updates form state when inputs change', () => {
+      render(React.createElement(Settings), { wrapper: createWrapper() });
+
+      const nameInput = screen.getByDisplayValue('Test Business') as HTMLInputElement;
+      fireEvent.change(nameInput, { target: { value: 'New Name' } });
+
+      expect(nameInput.value).toBe('New Name');
+    });
+  });
+
+  describe('Success Toast', () => {
+    it('shows success message after saving changes', async () => {
+      const updateBusiness = vi.fn();
+      mockOutletContext.mockReturnValue({
+        business: defaultBusiness,
+        updateBusiness,
+        user: defaultOwnerUser,
+      });
+
+      render(React.createElement(Settings), { wrapper: createWrapper() });
+
+      const saveButton = screen.getByText('Save Changes');
+      fireEvent.click(saveButton);
+
+      await waitFor(() => {
+        expect(updateBusiness).toHaveBeenCalled();
+      });
+    });
+  });
+});

frontend/src/pages/customer/__tests__/CustomerBilling.test.tsx

@@ -0,0 +1,610 @@
+/**
+ * Unit tests for CustomerBilling component
+ *
+ * Tests billing functionality including:
+ * - Outstanding payments display
+ * - Payment history display
+ * - Saved payment methods
+ * - Tab switching
+ * - Loading and error states
+ */
+
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import React from 'react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { MemoryRouter, Outlet, Routes, Route } from 'react-router-dom';
+import CustomerBilling from '../CustomerBilling';
+
+// Mock react-i18next
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string, fallback?: string) => fallback || key,
+  }),
+}));
+
+// Mock the billing hooks
+const mockBillingData = vi.fn();
+const mockPaymentMethodsData = vi.fn();
+const mockDeletePaymentMethod = vi.fn();
+const mockSetDefaultPaymentMethod = vi.fn();
+
+vi.mock('../../../hooks/useCustomerBilling', () => ({
+  useCustomerBilling: () => mockBillingData(),
+  useCustomerPaymentMethods: () => mockPaymentMethodsData(),
+  useDeletePaymentMethod: () => ({
+    mutateAsync: mockDeletePaymentMethod,
+    isPending: false,
+  }),
+  useSetDefaultPaymentMethod: () => ({
+    mutateAsync: mockSetDefaultPaymentMethod,
+    isPending: false,
+  }),
+}));
+
+// Mock AddPaymentMethodModal
+vi.mock('../../../components/AddPaymentMethodModal', () => ({
+  AddPaymentMethodModal: ({ isOpen, onClose }: { isOpen: boolean; onClose: () => void }) => {
+    if (!isOpen) return null;
+    return (
+      <div data-testid="add-payment-modal">
+        <h2>Add Payment Method</h2>
+        <button onClick={onClose}>Close Modal</button>
+      </div>
+    );
+  },
+}));
+
+const mockUser = {
+  id: 'user-1',
+  email: 'customer@example.com',
+  name: 'John Doe',
+  role: 'customer' as const,
+};
+
+const mockBusiness = {
+  id: 'biz-1',
+  name: 'Test Business',
+  subdomain: 'test',
+  cancellationWindowHours: 24,
+  lateCancellationFeePercent: 50,
+};
+
+const defaultBillingData = {
+  summary: {
+    total_spent: 250.00,
+    total_spent_display: '$250.00',
+    total_outstanding: 50.00,
+    total_outstanding_display: '$50.00',
+    payment_count: 5,
+  },
+  outstanding: [
+    {
+      id: 1,
+      title: 'Haircut Appointment',
+      service_name: 'Haircut',
+      amount: 50.00,
+      amount_display: '$50.00',
+      status: 'scheduled',
+      start_time: '2024-12-20T14:00:00Z',
+      end_time: '2024-12-20T15:00:00Z',
+      payment_status: 'unpaid' as const,
+      payment_intent_id: null,
+    },
+  ],
+  payment_history: [
+    {
+      id: 1,
+      event_id: 10,
+      event_title: 'Hair Color',
+      service_name: 'Hair Color',
+      amount: 120.00,
+      amount_display: '$120.00',
+      currency: 'usd',
+      status: 'succeeded',
+      payment_intent_id: 'pi_123',
+      created_at: '2024-12-01T10:00:00Z',
+      completed_at: '2024-12-01T10:05:00Z',
+      event_date: '2024-12-01T14:00:00Z',
+    },
+    {
+      id: 2,
+      event_id: 11,
+      event_title: 'Styling',
+      service_name: 'Styling',
+      amount: 80.00,
+      amount_display: '$80.00',
+      currency: 'usd',
+      status: 'refunded',
+      payment_intent_id: 'pi_456',
+      created_at: '2024-11-15T09:00:00Z',
+      completed_at: '2024-11-15T09:05:00Z',
+      event_date: '2024-11-15T13:00:00Z',
+    },
+  ],
+};
+
+const defaultPaymentMethods = {
+  payment_methods: [
+    {
+      id: 'pm_1',
+      type: 'card',
+      brand: 'visa',
+      last4: '4242',
+      exp_month: 12,
+      exp_year: 2025,
+      is_default: true,
+    },
+    {
+      id: 'pm_2',
+      type: 'card',
+      brand: 'mastercard',
+      last4: '5555',
+      exp_month: 6,
+      exp_year: 2026,
+      is_default: false,
+    },
+  ],
+  has_stripe_customer: true,
+};
+
+const createWrapper = () => {
+  const queryClient = new QueryClient({
+    defaultOptions: { queries: { retry: false } },
+  });
+
+  const OutletWrapper = () => {
+    return React.createElement(Outlet, {
+      context: { user: mockUser, business: mockBusiness },
+    });
+  };
+
+  return ({ children }: { children: React.ReactNode }) =>
+    React.createElement(
+      QueryClientProvider,
+      { client: queryClient },
+      React.createElement(
+        MemoryRouter,
+        { initialEntries: ['/customer/billing'] },
+        React.createElement(
+          Routes,
+          null,
+          React.createElement(Route, {
+            element: React.createElement(OutletWrapper),
+            children: React.createElement(Route, {
+              path: 'customer/billing',
+              element: children,
+            }),
+          })
+        )
+      )
+    );
+};
+
+describe('CustomerBilling', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockBillingData.mockReturnValue({
+      data: defaultBillingData,
+      isLoading: false,
+      error: null,
+    });
+    mockPaymentMethodsData.mockReturnValue({
+      data: defaultPaymentMethods,
+      isLoading: false,
+    });
+  });
+
+  describe('Page Header', () => {
+    it('should render the page title', () => {
+      render(React.createElement(CustomerBilling), { wrapper: createWrapper() });
+      expect(screen.getByText('Billing & Payments')).toBeInTheDocument();
+    });
+
+    it('should render the page description', () => {
+      render(React.createElement(CustomerBilling), { wrapper: createWrapper() });
+      expect(screen.getByText(/View your payments, outstanding balances/)).toBeInTheDocument();
+    });
+  });
+
+  describe('Summary Cards', () => {
+    it('should render outstanding balance card', () => {
+      render(React.createElement(CustomerBilling), { wrapper: createWrapper() });
+      expect(screen.getAllByText('Outstanding').length).toBeGreaterThan(0);
+      const amounts = screen.getAllByText('$50.00');
+      expect(amounts.length).toBeGreaterThan(0);
+    });
+
+    it('should render total spent card', () => {
+      render(React.createElement(CustomerBilling), { wrapper: createWrapper() });
+      expect(screen.getByText('Total Spent')).toBeInTheDocument();
+      expect(screen.getByText('$250.00')).toBeInTheDocument();
+    });
+
+    it('should render payment count card', () => {
+      render(React.createElement(CustomerBilling), { wrapper: createWrapper() });
+      expect(screen.getAllByText('Payments').length).toBeGreaterThan(0);
+      expect(screen.getByText('5')).toBeInTheDocument();
+    });
+
+    it('should not render summary cards when no billing data', () => {
+      mockBillingData.mockReturnValue({
+        data: null,
+        isLoading: false,
+        error: null,
+      });
+      render(React.createElement(CustomerBilling), { wrapper: createWrapper() });
+      expect(screen.queryByText('Total Spent')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Tab Navigation', () => {
+    it('should render outstanding tab', () => {
+      render(React.createElement(CustomerBilling), { wrapper: createWrapper() });
+      const tabs = screen.getAllByText('Outstanding');
+      expect(tabs.length).toBeGreaterThan(0);
+    });
+
+    it('should render payment history tab', () => {
+      render(React.createElement(CustomerBilling), { wrapper: createWrapper() });
+      expect(screen.getByText('Payment History')).toBeInTheDocument();
+    });
+
+    it('should show outstanding tab as active by default', () => {
+      render(React.createElement(CustomerBilling), { wrapper: createWrapper() });
+      const tabs = screen.getAllByRole('button');
+      const outstandingTab = tabs.find(tab => tab.textContent?.includes('Outstanding'));
+      expect(outstandingTab).toHaveClass('border-brand-500');
+    });
+
+    it('should switch to payment history tab when clicked', () => {
+      render(React.createElement(CustomerBilling), { wrapper: createWrapper() });
+      const historyTab = screen.getByText('Payment History').closest('button');
+      fireEvent.click(historyTab!);
+
+      expect(historyTab).toHaveClass('border-brand-500');
+    });
+
+    it('should show outstanding count badge', () => {
+      render(React.createElement(CustomerBilling), { wrapper: createWrapper() });
+      const badges = screen.getAllByText('1');
+      expect(badges.length).toBeGreaterThan(0);
+    });
+
+    it('should show payment history count badge', () => {
+      render(React.createElement(CustomerBilling), { wrapper: createWrapper() });
+      const badges = screen.getAllByText('2');
+      expect(badges.length).toBeGreaterThan(0);
+    });
+  });
+
+  describe('Outstanding Payments', () => {
+    it('should display outstanding payment card', () => {
+      render(React.createElement(CustomerBilling), { wrapper: createWrapper() });
+      const haircutElements = screen.getAllByText('Haircut');
+      expect(haircutElements.length).toBeGreaterThan(0);
+      const amounts = screen.getAllByText('$50.00');
+      expect(amounts.length).toBeGreaterThan(0);
+    });
+
+    it('should display payment status badge', () => {
+      render(React.createElement(CustomerBilling), { wrapper: createWrapper() });
+      expect(screen.getByText('Unpaid')).toBeInTheDocument();
+    });
+
+    it('should display empty state when no outstanding payments', () => {
+      mockBillingData.mockReturnValue({
+        data: { ...defaultBillingData, outstanding: [] },
+        isLoading: false,
+        error: null,
+      });
+      render(React.createElement(CustomerBilling), { wrapper: createWrapper() });
+      expect(screen.getByText(/No outstanding payments/)).toBeInTheDocument();
+      expect(screen.getByText(/all caught up/i)).toBeInTheDocument();
+    });
+
+    it('should render outstanding payments heading', () => {
+      render(React.createElement(CustomerBilling), { wrapper: createWrapper() });
+      expect(screen.getByText('Outstanding Payments')).toBeInTheDocument();
+    });
+
+    it('should render outstanding description', () => {
+      render(React.createElement(CustomerBilling), { wrapper: createWrapper() });
+      expect(screen.getByText('Appointments that require payment')).toBeInTheDocument();
+    });
+  });
+
+  describe('Payment History', () => {
+    beforeEach(() => {
+      render(React.createElement(CustomerBilling), { wrapper: createWrapper() });
+      const historyTab = screen.getByText('Payment History').closest('button');
+      fireEvent.click(historyTab!);
+    });
+
+    it('should display payment history cards', () => {
+      expect(screen.getByText('Hair Color')).toBeInTheDocument();
+      expect(screen.getByText('Styling')).toBeInTheDocument();
+    });
+
+    it('should display payment amounts', () => {
+      expect(screen.getByText('$120.00')).toBeInTheDocument();
+      expect(screen.getByText('$80.00')).toBeInTheDocument();
+    });
+
+    it('should display payment status badges', () => {
+      expect(screen.getByText('Succeeded')).toBeInTheDocument();
+      expect(screen.getByText('Refunded')).toBeInTheDocument();
+    });
+
+    it('should display "Paid on" date', () => {
+      const paidOnTexts = screen.getAllByText(/Paid on/);
+      expect(paidOnTexts.length).toBeGreaterThan(0);
+    });
+
+    it('should display empty state when no payment history', () => {
+      mockBillingData.mockReturnValue({
+        data: {
+          ...defaultBillingData,
+          payment_history: [],
+          outstanding: [],
+        },
+        isLoading: false,
+        error: null,
+      });
+      render(React.createElement(CustomerBilling), { wrapper: createWrapper() });
+      const historyTab = screen.getByText('Payment History').closest('button');
+      fireEvent.click(historyTab!);
+
+      expect(screen.getByText('No payment history yet')).toBeInTheDocument();
+    });
+
+    it('should render payment history heading', () => {
+      const headings = screen.getAllByText('Payment History');
+      expect(headings.length).toBeGreaterThan(0);
+    });
+  });
+
+  describe('Saved Payment Methods', () => {
+    it('should render saved payment methods section', () => {
+      render(React.createElement(CustomerBilling), { wrapper: createWrapper() });
+      expect(screen.getByText('Saved Payment Methods')).toBeInTheDocument();
+    });
+
+    it('should display payment method cards', () => {
+      render(React.createElement(CustomerBilling), { wrapper: createWrapper() });
+      expect(screen.getByText(/Visa.*ending in.*4242/)).toBeInTheDocument();
+      expect(screen.getByText(/Mastercard.*ending in.*5555/)).toBeInTheDocument();
+    });
+
+    it('should display expiration dates', () => {
+      render(React.createElement(CustomerBilling), { wrapper: createWrapper() });
+      expect(screen.getByText(/Expires.*12\/2025/)).toBeInTheDocument();
+      expect(screen.getByText(/Expires.*6\/2026/)).toBeInTheDocument();
+    });
+
+    it('should show default badge on default payment method', () => {
+      render(React.createElement(CustomerBilling), { wrapper: createWrapper() });
+      expect(screen.getByText('Default')).toBeInTheDocument();
+    });
+
+    it('should show Set Default button on non-default payment methods', () => {
+      render(React.createElement(CustomerBilling), { wrapper: createWrapper() });
+      expect(screen.getByText('Set Default')).toBeInTheDocument();
+    });
+
+    it('should show Remove button on all payment methods', () => {
+      render(React.createElement(CustomerBilling), { wrapper: createWrapper() });
+      const removeButtons = screen.getAllByText('Remove');
+      expect(removeButtons.length).toBe(2);
+    });
+
+    it('should render Add Card button in header', () => {
+      render(React.createElement(CustomerBilling), { wrapper: createWrapper() });
+      const addCardButtons = screen.getAllByText('Add Card');
+      expect(addCardButtons.length).toBeGreaterThan(0);
+    });
+
+    it('should display empty state when no payment methods', () => {
+      mockPaymentMethodsData.mockReturnValue({
+        data: { payment_methods: [], has_stripe_customer: false },
+        isLoading: false,
+      });
+      render(React.createElement(CustomerBilling), { wrapper: createWrapper() });
+      expect(screen.getByText('No saved payment methods')).toBeInTheDocument();
+    });
+
+    it('should show Add Payment Method button in empty state', () => {
+      mockPaymentMethodsData.mockReturnValue({
+        data: { payment_methods: [], has_stripe_customer: false },
+        isLoading: false,
+      });
+      render(React.createElement(CustomerBilling), { wrapper: createWrapper() });
+      expect(screen.getByText('Add Payment Method')).toBeInTheDocument();
+    });
+  });
+
+  describe('Loading States', () => {
+    it('should render loading spinner when billing data is loading', () => {
+      mockBillingData.mockReturnValue({
+        data: null,
+        isLoading: true,
+        error: null,
+      });
+      render(React.createElement(CustomerBilling), { wrapper: createWrapper() });
+      const spinner = document.querySelector('[class*="animate-spin"]');
+      expect(spinner).toBeInTheDocument();
+    });
+
+    it('should render loading state for payment methods', () => {
+      mockPaymentMethodsData.mockReturnValue({
+        data: null,
+        isLoading: true,
+      });
+      render(React.createElement(CustomerBilling), { wrapper: createWrapper() });
+      const spinners = document.querySelectorAll('[class*="animate-spin"]');
+      expect(spinners.length).toBeGreaterThan(0);
+    });
+  });
+
+  describe('Error States', () => {
+    it('should render error message when billing data fails to load', () => {
+      mockBillingData.mockReturnValue({
+        data: null,
+        isLoading: false,
+        error: new Error('Failed to load'),
+      });
+      render(React.createElement(CustomerBilling), { wrapper: createWrapper() });
+      expect(screen.getByText(/Unable to load billing information/)).toBeInTheDocument();
+    });
+  });
+
+  describe('Add Payment Method Modal', () => {
+    it('should open modal when Add Card button is clicked', () => {
+      render(React.createElement(CustomerBilling), { wrapper: createWrapper() });
+      const addButton = screen.getAllByText('Add Card')[0];
+      fireEvent.click(addButton);
+
+      expect(screen.getByTestId('add-payment-modal')).toBeInTheDocument();
+    });
+
+    it('should close modal when Close Modal button is clicked', () => {
+      render(React.createElement(CustomerBilling), { wrapper: createWrapper() });
+      const addButton = screen.getAllByText('Add Card')[0];
+      fireEvent.click(addButton);
+
+      const closeButton = screen.getByText('Close Modal');
+      fireEvent.click(closeButton);
+
+      expect(screen.queryByTestId('add-payment-modal')).not.toBeInTheDocument();
+    });
+
+    it('should open modal from empty state button', () => {
+      mockPaymentMethodsData.mockReturnValue({
+        data: { payment_methods: [], has_stripe_customer: false },
+        isLoading: false,
+      });
+      render(React.createElement(CustomerBilling), { wrapper: createWrapper() });
+      const addButton = screen.getByText('Add Payment Method');
+      fireEvent.click(addButton);
+
+      expect(screen.getByTestId('add-payment-modal')).toBeInTheDocument();
+    });
+  });
+
+  describe('Payment Method Actions', () => {
+    it('should call delete mutation when Remove button is clicked', async () => {
+      render(React.createElement(CustomerBilling), { wrapper: createWrapper() });
+      const removeButtons = screen.getAllByText('Remove');
+      fireEvent.click(removeButtons[0]);
+
+      await waitFor(() => {
+        expect(mockDeletePaymentMethod).toHaveBeenCalledWith('pm_1');
+      });
+    });
+
+    it('should call set default mutation when Set Default button is clicked', async () => {
+      render(React.createElement(CustomerBilling), { wrapper: createWrapper() });
+      const setDefaultButton = screen.getByText('Set Default');
+      fireEvent.click(setDefaultButton);
+
+      await waitFor(() => {
+        expect(mockSetDefaultPaymentMethod).toHaveBeenCalledWith('pm_2');
+      });
+    });
+  });
+
+  describe('Card Brand Display', () => {
+    it('should display Visa brand correctly', () => {
+      render(React.createElement(CustomerBilling), { wrapper: createWrapper() });
+      expect(screen.getByText(/Visa.*ending in.*4242/)).toBeInTheDocument();
+    });
+
+    it('should display Mastercard brand correctly', () => {
+      render(React.createElement(CustomerBilling), { wrapper: createWrapper() });
+      expect(screen.getByText(/Mastercard.*ending in.*5555/)).toBeInTheDocument();
+    });
+
+    it('should handle unknown card brand', () => {
+      mockPaymentMethodsData.mockReturnValue({
+        data: {
+          payment_methods: [
+            {
+              id: 'pm_1',
+              type: 'card',
+              brand: 'unknown',
+              last4: '9999',
+              exp_month: 12,
+              exp_year: 2025,
+              is_default: true,
+            },
+          ],
+          has_stripe_customer: true,
+        },
+        isLoading: false,
+      });
+      render(React.createElement(CustomerBilling), { wrapper: createWrapper() });
+      expect(screen.getByText(/unknown.*ending in.*9999/i)).toBeInTheDocument();
+    });
+
+    it('should handle null card brand', () => {
+      mockPaymentMethodsData.mockReturnValue({
+        data: {
+          payment_methods: [
+            {
+              id: 'pm_1',
+              type: 'card',
+              brand: null,
+              last4: '9999',
+              exp_month: 12,
+              exp_year: 2025,
+              is_default: true,
+            },
+          ],
+          has_stripe_customer: true,
+        },
+        isLoading: false,
+      });
+      render(React.createElement(CustomerBilling), { wrapper: createWrapper() });
+      expect(screen.getByText(/Card.*ending in.*9999/)).toBeInTheDocument();
+    });
+  });
+
+  describe('Status Badge Rendering', () => {
+    it('should render succeeded status badge', () => {
+      render(React.createElement(CustomerBilling), { wrapper: createWrapper() });
+      const historyTab = screen.getByText('Payment History').closest('button');
+      fireEvent.click(historyTab!);
+
+      expect(screen.getByText('Succeeded')).toBeInTheDocument();
+    });
+
+    it('should render refunded status badge', () => {
+      render(React.createElement(CustomerBilling), { wrapper: createWrapper() });
+      const historyTab = screen.getByText('Payment History').closest('button');
+      fireEvent.click(historyTab!);
+
+      expect(screen.getByText('Refunded')).toBeInTheDocument();
+    });
+
+    it('should render unpaid status badge', () => {
+      render(React.createElement(CustomerBilling), { wrapper: createWrapper() });
+      expect(screen.getByText('Unpaid')).toBeInTheDocument();
+    });
+
+    it('should handle pending status', () => {
+      mockBillingData.mockReturnValue({
+        data: {
+          ...defaultBillingData,
+          outstanding: [{
+            ...defaultBillingData.outstanding[0],
+            payment_status: 'pending' as const,
+          }],
+        },
+        isLoading: false,
+        error: null,
+      });
+      render(React.createElement(CustomerBilling), { wrapper: createWrapper() });
+      expect(screen.getByText('Pending')).toBeInTheDocument();
+    });
+  });
+});

frontend/src/pages/customer/__tests__/CustomerSupport.test.tsx

@@ -0,0 +1,679 @@
+/**
+ * Unit tests for CustomerSupport component
+ *
+ * Tests support ticket functionality including:
+ * - Ticket list display
+ * - Ticket creation
+ * - Ticket detail view
+ * - Comments/conversation
+ * - Status badges
+ * - Loading and error states
+ */
+
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import React from 'react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { MemoryRouter, Outlet, Routes, Route } from 'react-router-dom';
+import CustomerSupport from '../CustomerSupport';
+
+// Mock react-i18next
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string, fallback?: string, options?: any) => {
+      if (options?.number !== undefined) {
+        return fallback?.replace('{{number}}', options.number) || key;
+      }
+      if (options?.date !== undefined) {
+        return fallback?.replace('{{date}}', options.date) || key;
+      }
+      return fallback || key;
+    },
+  }),
+}));
+
+// Mock the ticket hooks
+const mockTickets = vi.fn();
+const mockCreateTicket = vi.fn();
+const mockTicketComments = vi.fn();
+const mockCreateTicketComment = vi.fn();
+
+vi.mock('../../../hooks/useTickets', () => ({
+  useTickets: () => mockTickets(),
+  useCreateTicket: () => ({
+    mutateAsync: mockCreateTicket,
+    isPending: false,
+  }),
+  useTicketComments: (ticketId: string) => mockTicketComments(ticketId),
+  useCreateTicketComment: () => ({
+    mutateAsync: mockCreateTicketComment,
+    isPending: false,
+  }),
+}));
+
+const mockUser = {
+  id: 'user-1',
+  email: 'customer@example.com',
+  name: 'John Doe',
+  role: 'customer' as const,
+};
+
+const mockBusiness = {
+  id: 'biz-1',
+  name: 'Test Business',
+  subdomain: 'test',
+  cancellationWindowHours: 24,
+  lateCancellationFeePercent: 50,
+};
+
+const defaultTickets = [
+  {
+    id: '1',
+    ticketNumber: 'TKT-001',
+    ticketType: 'CUSTOMER',
+    subject: 'Appointment rescheduling',
+    description: 'I need to reschedule my appointment',
+    status: 'OPEN',
+    priority: 'MEDIUM',
+    category: 'APPOINTMENT',
+    createdAt: '2024-12-01T10:00:00Z',
+    updatedAt: '2024-12-01T10:00:00Z',
+    creatorEmail: 'customer@example.com',
+    creatorFullName: 'John Doe',
+  },
+  {
+    id: '2',
+    ticketNumber: 'TKT-002',
+    ticketType: 'CUSTOMER',
+    subject: 'Refund request',
+    description: 'I would like a refund for my last appointment',
+    status: 'RESOLVED',
+    priority: 'HIGH',
+    category: 'REFUND',
+    createdAt: '2024-11-20T14:00:00Z',
+    updatedAt: '2024-11-22T16:00:00Z',
+    resolvedAt: '2024-11-22T16:00:00Z',
+    creatorEmail: 'customer@example.com',
+    creatorFullName: 'John Doe',
+  },
+  {
+    id: '3',
+    ticketNumber: 'TKT-003',
+    ticketType: 'PLATFORM',
+    subject: 'Platform issue',
+    description: 'This should be filtered out',
+    status: 'OPEN',
+    priority: 'LOW',
+    category: 'OTHER',
+    createdAt: '2024-11-15T09:00:00Z',
+    updatedAt: '2024-11-15T09:00:00Z',
+    creatorEmail: 'platform@example.com',
+    creatorFullName: 'Platform User',
+  },
+];
+
+const defaultComments = [
+  {
+    id: '1',
+    ticket: '1',
+    author: 'staff-1',
+    authorEmail: 'staff@example.com',
+    authorFullName: 'Support Staff',
+    commentText: 'We have received your request and are looking into it.',
+    isInternal: false,
+    createdAt: '2024-12-01T11:00:00Z',
+  },
+  {
+    id: '2',
+    ticket: '1',
+    author: 'staff-2',
+    authorEmail: 'manager@example.com',
+    authorFullName: 'Manager',
+    commentText: 'Internal note: escalate this',
+    isInternal: true,
+    createdAt: '2024-12-01T12:00:00Z',
+  },
+  {
+    id: '3',
+    ticket: '1',
+    author: 'user-1',
+    authorEmail: 'customer@example.com',
+    authorFullName: 'John Doe',
+    commentText: 'Thank you for your help!',
+    isInternal: false,
+    createdAt: '2024-12-01T13:00:00Z',
+  },
+];
+
+const createWrapper = () => {
+  const queryClient = new QueryClient({
+    defaultOptions: { queries: { retry: false } },
+  });
+
+  const OutletWrapper = () => {
+    return React.createElement(Outlet, {
+      context: { user: mockUser, business: mockBusiness },
+    });
+  };
+
+  return ({ children }: { children: React.ReactNode }) =>
+    React.createElement(
+      QueryClientProvider,
+      { client: queryClient },
+      React.createElement(
+        MemoryRouter,
+        { initialEntries: ['/customer/support'] },
+        React.createElement(
+          Routes,
+          null,
+          React.createElement(Route, {
+            element: React.createElement(OutletWrapper),
+            children: React.createElement(Route, {
+              path: 'customer/support',
+              element: children,
+            }),
+          })
+        )
+      )
+    );
+};
+
+describe('CustomerSupport', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockTickets.mockReturnValue({
+      data: defaultTickets,
+      isLoading: false,
+      refetch: vi.fn(),
+    });
+    mockTicketComments.mockReturnValue({
+      data: [],
+      isLoading: false,
+    });
+  });
+
+  describe('Page Header', () => {
+    it('should render the page title', () => {
+      render(React.createElement(CustomerSupport), { wrapper: createWrapper() });
+      expect(screen.getByText('Support')).toBeInTheDocument();
+    });
+
+    it('should render the page subtitle', () => {
+      render(React.createElement(CustomerSupport), { wrapper: createWrapper() });
+      expect(screen.getByText(/Get help with your appointments and account/)).toBeInTheDocument();
+    });
+
+    it('should render New Request button', () => {
+      render(React.createElement(CustomerSupport), { wrapper: createWrapper() });
+      expect(screen.getByText('New Request')).toBeInTheDocument();
+    });
+  });
+
+  describe('Quick Help Section', () => {
+    it('should render Quick Help heading', () => {
+      render(React.createElement(CustomerSupport), { wrapper: createWrapper() });
+      expect(screen.getByText('Quick Help')).toBeInTheDocument();
+    });
+
+    it('should render Contact Us option', () => {
+      render(React.createElement(CustomerSupport), { wrapper: createWrapper() });
+      expect(screen.getByText('Contact Us')).toBeInTheDocument();
+      expect(screen.getByText('Submit a support request')).toBeInTheDocument();
+    });
+
+    it('should render Email Us option', () => {
+      render(React.createElement(CustomerSupport), { wrapper: createWrapper() });
+      expect(screen.getByText('Email Us')).toBeInTheDocument();
+      expect(screen.getByText('Get help via email')).toBeInTheDocument();
+    });
+
+    it('should have email link with business subdomain', () => {
+      render(React.createElement(CustomerSupport), { wrapper: createWrapper() });
+      const emailLink = screen.getByText('Email Us').closest('a');
+      expect(emailLink).toHaveAttribute('href', 'mailto:support@test.smoothschedule.com');
+    });
+
+    it('should open new ticket form when Contact Us is clicked', () => {
+      render(React.createElement(CustomerSupport), { wrapper: createWrapper() });
+      const contactButton = screen.getAllByText('Contact Us')[0].closest('a');
+      fireEvent.click(contactButton!);
+
+      expect(screen.getByText('Submit a Support Request')).toBeInTheDocument();
+    });
+  });
+
+  describe('My Support Requests Section', () => {
+    it('should render section heading', () => {
+      render(React.createElement(CustomerSupport), { wrapper: createWrapper() });
+      expect(screen.getByText('My Support Requests')).toBeInTheDocument();
+    });
+
+    it('should display customer tickets only', () => {
+      render(React.createElement(CustomerSupport), { wrapper: createWrapper() });
+      expect(screen.getByText('Appointment rescheduling')).toBeInTheDocument();
+      expect(screen.getByText('Refund request')).toBeInTheDocument();
+      expect(screen.queryByText('Platform issue')).not.toBeInTheDocument();
+    });
+
+    it('should display ticket numbers', () => {
+      render(React.createElement(CustomerSupport), { wrapper: createWrapper() });
+      expect(screen.getByText(/TKT-001/)).toBeInTheDocument();
+      expect(screen.getByText(/TKT-002/)).toBeInTheDocument();
+    });
+
+    it('should display ticket status badges', () => {
+      render(React.createElement(CustomerSupport), { wrapper: createWrapper() });
+      expect(screen.getByText(/open/i)).toBeInTheDocument();
+      expect(screen.getByText(/resolved/i)).toBeInTheDocument();
+    });
+
+    it('should display ticket creation dates', () => {
+      render(React.createElement(CustomerSupport), { wrapper: createWrapper() });
+      const dateElements = screen.getAllByText(/12\/1\/2024|11\/20\/2024/);
+      expect(dateElements.length).toBeGreaterThan(0);
+    });
+
+    it('should render loading state', () => {
+      mockTickets.mockReturnValue({
+        data: [],
+        isLoading: true,
+        refetch: vi.fn(),
+      });
+      render(React.createElement(CustomerSupport), { wrapper: createWrapper() });
+      expect(screen.getByText('Loading...')).toBeInTheDocument();
+    });
+
+    it('should render empty state when no tickets', () => {
+      mockTickets.mockReturnValue({
+        data: [],
+        isLoading: false,
+        refetch: vi.fn(),
+      });
+      render(React.createElement(CustomerSupport), { wrapper: createWrapper() });
+      expect(screen.getByText(/haven't submitted any support requests yet/)).toBeInTheDocument();
+    });
+
+    it('should show Submit first request button in empty state', () => {
+      mockTickets.mockReturnValue({
+        data: [],
+        isLoading: false,
+        refetch: vi.fn(),
+      });
+      render(React.createElement(CustomerSupport), { wrapper: createWrapper() });
+      expect(screen.getByText('Submit your first request')).toBeInTheDocument();
+    });
+
+    it('should open ticket detail when ticket is clicked', () => {
+      render(React.createElement(CustomerSupport), { wrapper: createWrapper() });
+      const ticketButton = screen.getByText('Appointment rescheduling').closest('button');
+      fireEvent.click(ticketButton!);
+
+      expect(screen.getByText('Appointment Details')).toBeInTheDocument();
+    });
+  });
+
+  describe('New Ticket Form Modal', () => {
+    beforeEach(() => {
+      render(React.createElement(CustomerSupport), { wrapper: createWrapper() });
+      const newRequestButton = screen.getAllByText('New Request')[0];
+      fireEvent.click(newRequestButton);
+    });
+
+    it('should render form modal when New Request is clicked', () => {
+      expect(screen.getByText('Submit a Support Request')).toBeInTheDocument();
+    });
+
+    it('should render subject input field', () => {
+      expect(screen.getByLabelText(/subject/i)).toBeInTheDocument();
+    });
+
+    it('should render category dropdown', () => {
+      expect(screen.getByLabelText(/category/i)).toBeInTheDocument();
+    });
+
+    it('should render priority dropdown', () => {
+      expect(screen.getByLabelText(/priority/i)).toBeInTheDocument();
+    });
+
+    it('should render description textarea', () => {
+      expect(screen.getByLabelText(/description/i)).toBeInTheDocument();
+    });
+
+    it('should render Cancel button', () => {
+      expect(screen.getByText('Cancel')).toBeInTheDocument();
+    });
+
+    it('should render Submit Request button', () => {
+      expect(screen.getByText('Submit Request')).toBeInTheDocument();
+    });
+
+    it('should close modal when Cancel is clicked', () => {
+      const cancelButton = screen.getByText('Cancel');
+      fireEvent.click(cancelButton);
+
+      expect(screen.queryByText('Submit a Support Request')).not.toBeInTheDocument();
+    });
+
+    it('should close modal when clicking outside', () => {
+      const backdrop = screen.getByText('Submit a Support Request').closest('.fixed');
+      fireEvent.click(backdrop!);
+
+      expect(screen.queryByText('Submit a Support Request')).not.toBeInTheDocument();
+    });
+
+    it('should not close modal when clicking inside form', () => {
+      const formContent = screen.getByLabelText(/subject/i).closest('.bg-white');
+      fireEvent.click(formContent!);
+
+      expect(screen.getByText('Submit a Support Request')).toBeInTheDocument();
+    });
+
+    it('should submit form with correct data', async () => {
+      const subjectInput = screen.getByLabelText(/subject/i);
+      const descriptionInput = screen.getByLabelText(/description/i);
+      const submitButton = screen.getByText('Submit Request');
+
+      fireEvent.change(subjectInput, { target: { value: 'Test ticket' } });
+      fireEvent.change(descriptionInput, { target: { value: 'Test description' } });
+      fireEvent.click(submitButton);
+
+      await waitFor(() => {
+        expect(mockCreateTicket).toHaveBeenCalledWith({
+          subject: 'Test ticket',
+          description: 'Test description',
+          category: 'GENERAL_INQUIRY',
+          priority: 'MEDIUM',
+          ticketType: 'CUSTOMER',
+        });
+      });
+    });
+
+    it('should display category options', () => {
+      const categorySelect = screen.getByLabelText(/category/i);
+      expect(categorySelect).toBeInTheDocument();
+      // Options are rendered as part of select
+      expect(screen.getByText(/appointment/i)).toBeInTheDocument();
+    });
+
+    it('should display priority options', () => {
+      const prioritySelect = screen.getByLabelText(/priority/i);
+      expect(prioritySelect).toBeInTheDocument();
+      expect(screen.getByText(/medium/i)).toBeInTheDocument();
+    });
+
+    it('should require subject field', () => {
+      const subjectInput = screen.getByLabelText(/subject/i) as HTMLInputElement;
+      expect(subjectInput.required).toBe(true);
+    });
+
+    it('should require description field', () => {
+      const descriptionInput = screen.getByLabelText(/description/i) as HTMLTextAreaElement;
+      expect(descriptionInput.required).toBe(true);
+    });
+  });
+
+  describe('Ticket Detail View', () => {
+    beforeEach(() => {
+      mockTicketComments.mockReturnValue({
+        data: defaultComments,
+        isLoading: false,
+      });
+      render(React.createElement(CustomerSupport), { wrapper: createWrapper() });
+      const ticketButton = screen.getByText('Appointment rescheduling').closest('button');
+      fireEvent.click(ticketButton!);
+    });
+
+    it('should display ticket subject', () => {
+      expect(screen.getByText('Appointment rescheduling')).toBeInTheDocument();
+    });
+
+    it('should display ticket number', () => {
+      expect(screen.getByText(/Ticket #TKT-001/)).toBeInTheDocument();
+    });
+
+    it('should display creation date', () => {
+      expect(screen.getByText(/Created.*12\/1\/2024/)).toBeInTheDocument();
+    });
+
+    it('should display status badge', () => {
+      expect(screen.getByText(/open/i)).toBeInTheDocument();
+    });
+
+    it('should display priority badge', () => {
+      expect(screen.getByText(/medium/i)).toBeInTheDocument();
+    });
+
+    it('should display ticket description', () => {
+      expect(screen.getByText('I need to reschedule my appointment')).toBeInTheDocument();
+    });
+
+    it('should display back button', () => {
+      expect(screen.getByText(/Back to tickets/)).toBeInTheDocument();
+    });
+
+    it('should return to ticket list when back button is clicked', () => {
+      const backButton = screen.getByText(/Back to tickets/);
+      fireEvent.click(backButton);
+
+      expect(screen.getByText('My Support Requests')).toBeInTheDocument();
+      expect(screen.queryByText(/Ticket #TKT-001/)).not.toBeInTheDocument();
+    });
+
+    it('should display Conversation heading', () => {
+      expect(screen.getByText('Conversation')).toBeInTheDocument();
+    });
+
+    it('should filter out internal comments', () => {
+      expect(screen.getByText('We have received your request and are looking into it.')).toBeInTheDocument();
+      expect(screen.getByText('Thank you for your help!')).toBeInTheDocument();
+      expect(screen.queryByText('Internal note: escalate this')).not.toBeInTheDocument();
+    });
+
+    it('should display comment author names', () => {
+      expect(screen.getByText('Support Staff')).toBeInTheDocument();
+      expect(screen.getByText('John Doe')).toBeInTheDocument();
+    });
+
+    it('should display comment timestamps', () => {
+      const timestamps = screen.getAllByText(/12\/1\/2024/);
+      expect(timestamps.length).toBeGreaterThan(0);
+    });
+
+    it('should render reply form', () => {
+      expect(screen.getByLabelText('Your Reply')).toBeInTheDocument();
+    });
+
+    it('should render Send Reply button', () => {
+      expect(screen.getByText('Send Reply')).toBeInTheDocument();
+    });
+
+    it('should submit reply when Send Reply is clicked', async () => {
+      const replyInput = screen.getByLabelText('Your Reply');
+      const sendButton = screen.getByText('Send Reply');
+
+      fireEvent.change(replyInput, { target: { value: 'My reply message' } });
+      fireEvent.click(sendButton);
+
+      await waitFor(() => {
+        expect(mockCreateTicketComment).toHaveBeenCalledWith({
+          ticketId: '1',
+          commentData: {
+            commentText: 'My reply message',
+            isInternal: false,
+          },
+        });
+      });
+    });
+
+    it('should clear reply input after submission', async () => {
+      const replyInput = screen.getByLabelText('Your Reply') as HTMLTextAreaElement;
+      const sendButton = screen.getByText('Send Reply');
+
+      fireEvent.change(replyInput, { target: { value: 'My reply' } });
+      fireEvent.click(sendButton);
+
+      await waitFor(() => {
+        expect(replyInput.value).toBe('');
+      });
+    });
+
+    it('should disable Send Reply button when input is empty', () => {
+      const sendButton = screen.getByText('Send Reply');
+      expect(sendButton).toBeDisabled();
+    });
+
+    it('should enable Send Reply button when input has text', () => {
+      const replyInput = screen.getByLabelText('Your Reply');
+      const sendButton = screen.getByText('Send Reply');
+
+      fireEvent.change(replyInput, { target: { value: 'Some text' } });
+      expect(sendButton).not.toBeDisabled();
+    });
+
+    it('should show empty state when no comments', () => {
+      mockTicketComments.mockReturnValue({
+        data: [],
+        isLoading: false,
+      });
+      render(React.createElement(CustomerSupport), { wrapper: createWrapper() });
+      const ticketButton = screen.getByText('Appointment rescheduling').closest('button');
+      fireEvent.click(ticketButton!);
+
+      expect(screen.getByText(/No replies yet/)).toBeInTheDocument();
+    });
+
+    it('should show loading state for comments', () => {
+      mockTicketComments.mockReturnValue({
+        data: [],
+        isLoading: true,
+      });
+      render(React.createElement(CustomerSupport), { wrapper: createWrapper() });
+      const ticketButton = screen.getByText('Appointment rescheduling').closest('button');
+      fireEvent.click(ticketButton!);
+
+      expect(screen.getByText('Loading...')).toBeInTheDocument();
+    });
+  });
+
+  describe('Closed Ticket Behavior', () => {
+    beforeEach(() => {
+      const closedTicket = {
+        ...defaultTickets[0],
+        status: 'CLOSED',
+      };
+      mockTickets.mockReturnValue({
+        data: [closedTicket],
+        isLoading: false,
+        refetch: vi.fn(),
+      });
+      mockTicketComments.mockReturnValue({
+        data: [],
+        isLoading: false,
+      });
+      render(React.createElement(CustomerSupport), { wrapper: createWrapper() });
+      const ticketButton = screen.getByText('Appointment rescheduling').closest('button');
+      fireEvent.click(ticketButton!);
+    });
+
+    it('should not show reply form for closed tickets', () => {
+      expect(screen.queryByLabelText('Your Reply')).not.toBeInTheDocument();
+    });
+
+    it('should show closed ticket message', () => {
+      expect(screen.getByText(/This ticket is closed/)).toBeInTheDocument();
+    });
+
+    it('should suggest opening new request for closed tickets', () => {
+      expect(screen.getByText(/open a new support request/)).toBeInTheDocument();
+    });
+  });
+
+  describe('Status Messages', () => {
+    it('should show open status message', () => {
+      render(React.createElement(CustomerSupport), { wrapper: createWrapper() });
+      const ticketButton = screen.getByText('Appointment rescheduling').closest('button');
+      fireEvent.click(ticketButton!);
+
+      expect(screen.getByText(/request has been received/)).toBeInTheDocument();
+    });
+
+    it('should show in progress status message', () => {
+      const inProgressTicket = {
+        ...defaultTickets[0],
+        status: 'IN_PROGRESS',
+      };
+      mockTickets.mockReturnValue({
+        data: [inProgressTicket],
+        isLoading: false,
+        refetch: vi.fn(),
+      });
+      render(React.createElement(CustomerSupport), { wrapper: createWrapper() });
+      const ticketButton = screen.getByText('Appointment rescheduling').closest('button');
+      fireEvent.click(ticketButton!);
+
+      expect(screen.getByText(/currently working on your request/)).toBeInTheDocument();
+    });
+
+    it('should show awaiting response status message', () => {
+      const awaitingTicket = {
+        ...defaultTickets[0],
+        status: 'AWAITING_RESPONSE',
+      };
+      mockTickets.mockReturnValue({
+        data: [awaitingTicket],
+        isLoading: false,
+        refetch: vi.fn(),
+      });
+      render(React.createElement(CustomerSupport), { wrapper: createWrapper() });
+      const ticketButton = screen.getByText('Appointment rescheduling').closest('button');
+      fireEvent.click(ticketButton!);
+
+      expect(screen.getByText(/need additional information/)).toBeInTheDocument();
+    });
+
+    it('should show resolved status message', () => {
+      mockTickets.mockReturnValue({
+        data: [defaultTickets[1]], // Resolved ticket
+        isLoading: false,
+        refetch: vi.fn(),
+      });
+      render(React.createElement(CustomerSupport), { wrapper: createWrapper() });
+      const ticketButton = screen.getByText('Refund request').closest('button');
+      fireEvent.click(ticketButton!);
+
+      expect(screen.getByText(/request has been resolved/)).toBeInTheDocument();
+    });
+  });
+
+  describe('Status and Priority Badges', () => {
+    it('should render OPEN status badge correctly', () => {
+      render(React.createElement(CustomerSupport), { wrapper: createWrapper() });
+      const openBadge = screen.getByText(/open/i);
+      expect(openBadge).toBeInTheDocument();
+    });
+
+    it('should render RESOLVED status badge correctly', () => {
+      render(React.createElement(CustomerSupport), { wrapper: createWrapper() });
+      const resolvedBadge = screen.getByText(/resolved/i);
+      expect(resolvedBadge).toBeInTheDocument();
+    });
+
+    it('should render MEDIUM priority badge correctly', () => {
+      render(React.createElement(CustomerSupport), { wrapper: createWrapper() });
+      const ticketButton = screen.getByText('Appointment rescheduling').closest('button');
+      fireEvent.click(ticketButton!);
+
+      const mediumBadge = screen.getByText(/medium/i);
+      expect(mediumBadge).toBeInTheDocument();
+    });
+
+    it('should render HIGH priority badge correctly', () => {
+      render(React.createElement(CustomerSupport), { wrapper: createWrapper() });
+      const ticketButton = screen.getByText('Refund request').closest('button');
+      fireEvent.click(ticketButton!);
+
+      const highBadge = screen.getByText(/high/i);
+      expect(highBadge).toBeInTheDocument();
+    });
+  });
+});

frontend/src/pages/help/__tests__/HelpApiAppointments.test.tsx

@@ -0,0 +1,34 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import HelpApiAppointments from '../HelpApiAppointments';
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string, fallback?: string) => fallback || key,
+  }),
+}));
+
+const renderWithRouter = (component: React.ReactElement) => {
+  return render(
+    React.createElement(MemoryRouter, {}, component)
+  );
+};
+
+describe('HelpApiAppointments', () => {
+  it('renders the page title', () => {
+    renderWithRouter(React.createElement(HelpApiAppointments));
+    expect(screen.getByText('Appointments API')).toBeInTheDocument();
+  });
+
+  it('renders back button', () => {
+    renderWithRouter(React.createElement(HelpApiAppointments));
+    expect(screen.getByText('Back')).toBeInTheDocument();
+  });
+
+  it('renders endpoints section', () => {
+    renderWithRouter(React.createElement(HelpApiAppointments));
+    expect(screen.getByText(/Endpoints/i)).toBeInTheDocument();
+  });
+});

frontend/src/pages/help/__tests__/HelpApiWebhooks.test.tsx

@@ -0,0 +1,34 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import HelpApiWebhooks from '../HelpApiWebhooks';
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string, fallback?: string) => fallback || key,
+  }),
+}));
+
+const renderWithRouter = (component: React.ReactElement) => {
+  return render(
+    React.createElement(MemoryRouter, {}, component)
+  );
+};
+
+describe('HelpApiWebhooks', () => {
+  it('renders the page title', () => {
+    renderWithRouter(React.createElement(HelpApiWebhooks));
+    expect(screen.getByText('Webhooks API')).toBeInTheDocument();
+  });
+
+  it('renders back button', () => {
+    renderWithRouter(React.createElement(HelpApiWebhooks));
+    expect(screen.getByText('Back')).toBeInTheDocument();
+  });
+
+  it('renders overview section', () => {
+    renderWithRouter(React.createElement(HelpApiWebhooks));
+    expect(screen.getByText('Overview')).toBeInTheDocument();
+  });
+});

frontend/src/pages/help/__tests__/HelpAutomationDocs.test.tsx

@@ -0,0 +1,30 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import HelpAutomationDocs from '../HelpAutomationDocs';
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string, fallback?: string) => fallback || key,
+  }),
+}));
+
+const renderWithRouter = (component: React.ReactElement) => {
+  return render(
+    React.createElement(MemoryRouter, {}, component)
+  );
+};
+
+describe('HelpAutomationDocs', () => {
+  it('renders the component', () => {
+    renderWithRouter(React.createElement(HelpAutomationDocs));
+    expect(screen.getByText('Back')).toBeInTheDocument();
+  });
+
+  it('renders documentation content', () => {
+    renderWithRouter(React.createElement(HelpAutomationDocs));
+    const automationText = screen.getAllByText(/Automation/i);
+    expect(automationText.length).toBeGreaterThan(0);
+  });
+});

frontend/src/pages/help/__tests__/HelpAutomations.test.tsx

@@ -0,0 +1,34 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import HelpAutomations from '../HelpAutomations';
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string, fallback?: string) => fallback || key,
+  }),
+}));
+
+const renderWithRouter = (component: React.ReactElement) => {
+  return render(
+    React.createElement(MemoryRouter, {}, component)
+  );
+};
+
+describe('HelpAutomations', () => {
+  it('renders the page title', () => {
+    renderWithRouter(React.createElement(HelpAutomations));
+    expect(screen.getByText('Automations Guide')).toBeInTheDocument();
+  });
+
+  it('renders back button', () => {
+    renderWithRouter(React.createElement(HelpAutomations));
+    expect(screen.getByText('Back')).toBeInTheDocument();
+  });
+
+  it('renders overview section', () => {
+    renderWithRouter(React.createElement(HelpAutomations));
+    expect(screen.getByText('Overview')).toBeInTheDocument();
+  });
+});