Add global navigation search, cancellation policies, and UI improvements

- Add global search in top bar for navigating to dashboard pages
- Add cancellation policy settings (window hours, late fee, deposit refund)
- Display booking policies on customer confirmation page
- Filter API tokens by sandbox/live mode
- Widen settings layout and full-width site builder
- Add help documentation search with OpenAI integration
- Add blocked time ranges API for calendar visualization
- Update business hours settings with holiday management

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

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

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

@@ -0,0 +1,71 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { Steps } from '../Steps';
+
+describe('Steps', () => {
+  it('renders all step names', () => {
+    render(React.createElement(Steps, { currentStep: 1 }));
+
+    // Each step name appears twice: sr-only and visible label
+    expect(screen.getAllByText('Service').length).toBeGreaterThan(0);
+    expect(screen.getAllByText('Date & Time').length).toBeGreaterThan(0);
+    expect(screen.getAllByText('Account').length).toBeGreaterThan(0);
+    expect(screen.getAllByText('Payment').length).toBeGreaterThan(0);
+    expect(screen.getAllByText('Done').length).toBeGreaterThan(0);
+  });
+
+  it('marks completed steps with check icon', () => {
+    render(React.createElement(Steps, { currentStep: 3 }));
+    
+    // Step 1 and 2 are completed, should have check icons
+    const checkIcons = document.querySelectorAll('.lucide-check');
+    expect(checkIcons.length).toBe(2);
+  });
+
+  it('highlights current step', () => {
+    render(React.createElement(Steps, { currentStep: 2 }));
+    
+    const currentStepIndicator = document.querySelector('[aria-current="step"]');
+    expect(currentStepIndicator).toBeInTheDocument();
+  });
+
+  it('renders progress navigation', () => {
+    render(React.createElement(Steps, { currentStep: 1 }));
+    
+    expect(screen.getByRole('list')).toBeInTheDocument();
+    expect(screen.getAllByRole('listitem')).toHaveLength(5);
+  });
+
+  it('shows future steps as incomplete', () => {
+    render(React.createElement(Steps, { currentStep: 2 }));
+    
+    // Steps 3, 4, 5 should not have check icons
+    const listItems = screen.getAllByRole('listitem');
+    expect(listItems.length).toBe(5);
+  });
+
+  it('handles first step correctly', () => {
+    render(React.createElement(Steps, { currentStep: 1 }));
+    
+    // No completed steps
+    const checkIcons = document.querySelectorAll('.lucide-check');
+    expect(checkIcons.length).toBe(0);
+    
+    // Current step indicator
+    const currentStepIndicator = document.querySelector('[aria-current="step"]');
+    expect(currentStepIndicator).toBeInTheDocument();
+  });
+
+  it('handles last step correctly', () => {
+    render(React.createElement(Steps, { currentStep: 5 }));
+    
+    // All previous steps completed
+    const checkIcons = document.querySelectorAll('.lucide-check');
+    expect(checkIcons.length).toBe(4);
+    
+    // Current step indicator for Done
+    const currentStepIndicator = document.querySelector('[aria-current="step"]');
+    expect(currentStepIndicator).toBeInTheDocument();
+  });
+});