feat: Add comprehensive sandbox mode, public API system, and platform support

This commit adds major features for sandbox isolation, public API access, and platform support ticketing.

## Sandbox Mode
- Add sandbox mode toggle for businesses to test features without affecting live data
- Implement schema-based isolation for tenant data (appointments, resources, services)
- Add is_sandbox field filtering for shared models (customers, staff, tickets)
- Create sandbox middleware to detect and set sandbox mode from cookies
- Add sandbox context and hooks for React frontend
- Display sandbox banner when in test mode
- Auto-reload page when switching between live/test modes
- Prevent platform support tickets from being created in sandbox mode

## Public API System
- Full REST API for external integrations with businesses
- API token management with sandbox/live token separation
- Test tokens (ss_test_*) show full plaintext for easy testing
- Live tokens (ss_live_*) are hashed and secure
- Security validation prevents live token plaintext storage
- Comprehensive test suite for token security
- Rate limiting and throttling per token
- Webhook support for real-time event notifications
- Scoped permissions system (read/write per resource type)
- API documentation page with interactive examples
- Token revocation with confirmation modal

## Platform Support
- Dedicated support page for businesses to contact SmoothSchedule
- View all platform support tickets in one place
- Create new support tickets with simplified interface
- Reply to existing tickets with conversation history
- Platform tickets have no admin controls (no priority/category/assignee/status)
- Internal notes hidden for platform tickets (business can't see them)
- Quick help section with links to guides and API docs
- Sandbox warning prevents ticket creation in test mode
- Business ticketing retains full admin controls (priority, assignment, internal notes)

## UI/UX Improvements
- Add notification dropdown with real-time updates
- Staff permissions UI for ticket access control
- Help dropdown in sidebar with Platform Guide, Ticketing Help, API Docs, and Support
- Update sidebar "Contact Support" to "Support" with message icon
- Fix navigation links to use React Router instead of anchor tags
- Remove unused language translations (Japanese, Portuguese, Chinese)

## Technical Details
- Sandbox middleware sets request.sandbox_mode from cookies
- ViewSets filter data by is_sandbox field
- API authentication via custom token auth class
- WebSocket support for real-time ticket updates
- Migration for sandbox fields on User, Tenant, and Ticket models
- Comprehensive documentation in SANDBOX_MODE_IMPLEMENTATION.md

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

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

frontend/src/api/client.ts

@@ -16,7 +16,19 @@ const apiClient = axios.create({
   withCredentials: true, // For CORS with credentials
 });
 
-// Request interceptor - add auth token and business subdomain
+/**
+ * Get sandbox mode from localStorage
+ * This is set by the SandboxContext when mode changes
+ */
+const getSandboxMode = (): boolean => {
+  try {
+    return localStorage.getItem('sandbox_mode') === 'true';
+  } catch {
+    return false;
+  }
+};
+
+// Request interceptor - add auth token, business subdomain, and sandbox mode
 apiClient.interceptors.request.use(
   (config: InternalAxiosRequestConfig) => {
     // Add business subdomain header if on business site
@@ -32,6 +44,12 @@ apiClient.interceptors.request.use(
       config.headers['Authorization'] = `Token ${token}`;
     }
 
+    // Add sandbox mode header if in test mode
+    const isSandbox = getSandboxMode();
+    if (isSandbox) {
+      config.headers['X-Sandbox-Mode'] = 'true';
+    }
+
     return config;
   },
   (error) => {

frontend/src/api/notifications.ts

@@ -0,0 +1,64 @@
+import apiClient from './client';
+
+export interface Notification {
+  id: number;
+  verb: string;
+  read: boolean;
+  timestamp: string;
+  data: Record<string, any>;
+  actor_type: string | null;
+  actor_display: string | null;
+  target_type: string | null;
+  target_display: string | null;
+  target_url: string | null;
+}
+
+export interface UnreadCountResponse {
+  count: number;
+}
+
+/**
+ * Get all notifications for the current user
+ */
+export const getNotifications = async (params?: { read?: boolean; limit?: number }): Promise<Notification[]> => {
+  const queryParams = new URLSearchParams();
+  if (params?.read !== undefined) {
+    queryParams.append('read', String(params.read));
+  }
+  if (params?.limit !== undefined) {
+    queryParams.append('limit', String(params.limit));
+  }
+  const query = queryParams.toString();
+  const url = query ? `/api/notifications/?${query}` : '/api/notifications/';
+  const response = await apiClient.get(url);
+  return response.data;
+};
+
+/**
+ * Get count of unread notifications
+ */
+export const getUnreadCount = async (): Promise<number> => {
+  const response = await apiClient.get<UnreadCountResponse>('/api/notifications/unread_count/');
+  return response.data.count;
+};
+
+/**
+ * Mark a single notification as read
+ */
+export const markNotificationRead = async (id: number): Promise<void> => {
+  await apiClient.post(`/api/notifications/${id}/mark_read/`);
+};
+
+/**
+ * Mark all notifications as read
+ */
+export const markAllNotificationsRead = async (): Promise<void> => {
+  await apiClient.post('/api/notifications/mark_all_read/');
+};
+
+/**
+ * Delete all read notifications
+ */
+export const clearAllNotifications = async (): Promise<void> => {
+  await apiClient.delete('/api/notifications/clear_all/');
+};

frontend/src/api/sandbox.ts

@@ -0,0 +1,48 @@
+/**
+ * Sandbox Mode API
+ * Manage live/test mode switching for isolated test data
+ */
+
+import apiClient from './client';
+
+export interface SandboxStatus {
+  sandbox_mode: boolean;
+  sandbox_enabled: boolean;
+  sandbox_schema: string | null;
+}
+
+export interface SandboxToggleResponse {
+  sandbox_mode: boolean;
+  message: string;
+}
+
+export interface SandboxResetResponse {
+  message: string;
+  sandbox_schema: string;
+}
+
+/**
+ * Get current sandbox mode status
+ */
+export const getSandboxStatus = async (): Promise<SandboxStatus> => {
+  const response = await apiClient.get<SandboxStatus>('/api/sandbox/status/');
+  return response.data;
+};
+
+/**
+ * Toggle between live and sandbox mode
+ */
+export const toggleSandboxMode = async (enableSandbox: boolean): Promise<SandboxToggleResponse> => {
+  const response = await apiClient.post<SandboxToggleResponse>('/api/sandbox/toggle/', {
+    sandbox: enableSandbox,
+  });
+  return response.data;
+};
+
+/**
+ * Reset sandbox data to initial state
+ */
+export const resetSandboxData = async (): Promise<SandboxResetResponse> => {
+  const response = await apiClient.post<SandboxResetResponse>('/api/sandbox/reset/');
+  return response.data;
+};