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/components/TopBar.tsx

@@ -1,19 +1,24 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { Bell, Search, Moon, Sun, Menu } from 'lucide-react';
+import { Search, Moon, Sun, Menu } from 'lucide-react';
 import { User } from '../types';
 import UserProfileDropdown from './UserProfileDropdown';
 import LanguageSelector from './LanguageSelector';
+import NotificationDropdown from './NotificationDropdown';
+import SandboxToggle from './SandboxToggle';
+import { useSandbox } from '../contexts/SandboxContext';
 
 interface TopBarProps {
   user: User;
   isDarkMode: boolean;
   toggleTheme: () => void;
   onMenuClick: () => void;
+  onTicketClick?: (ticketId: string) => void;
 }
 
-const TopBar: React.FC<TopBarProps> = ({ user, isDarkMode, toggleTheme, onMenuClick }) => {
+const TopBar: React.FC<TopBarProps> = ({ user, isDarkMode, toggleTheme, onMenuClick, onTicketClick }) => {
   const { t } = useTranslation();
+  const { isSandbox, sandboxEnabled, toggleSandbox, isToggling } = useSandbox();
 
   return (
     <header className="flex items-center justify-between h-16 px-4 sm:px-8 bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 transition-colors duration-200 shrink-0">
@@ -38,6 +43,14 @@ const TopBar: React.FC<TopBarProps> = ({ user, isDarkMode, toggleTheme, onMenuCl
       </div>
 
       <div className="flex items-center gap-4">
+        {/* Sandbox Mode Toggle */}
+        <SandboxToggle
+          isSandbox={isSandbox}
+          sandboxEnabled={sandboxEnabled}
+          onToggle={toggleSandbox}
+          isToggling={isToggling}
+        />
+
         <LanguageSelector />
 
         <button
@@ -47,10 +60,7 @@ const TopBar: React.FC<TopBarProps> = ({ user, isDarkMode, toggleTheme, onMenuCl
           {isDarkMode ? <Sun size={20} /> : <Moon size={20} />}
         </button>
 
-        <button className="relative p-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 transition-colors">
-          <Bell size={20} />
-          <span className="absolute top-1.5 right-1.5 w-2 h-2 bg-red-500 rounded-full"></span>
-        </button>
+        <NotificationDropdown onTicketClick={onTicketClick} />
 
         <UserProfileDropdown user={user} />
       </div>