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/Sidebar.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link, useLocation } from 'react-router-dom';
 import {
@@ -11,7 +11,13 @@ import {
   LogOut,
   ClipboardList,
   Briefcase,
-  Ticket
+  Ticket,
+  HelpCircle,
+  Code,
+  ChevronDown,
+  BookOpen,
+  FileQuestion,
+  LifeBuoy
 } from 'lucide-react';
 import { Business, User } from '../types';
 import { useLogout } from '../hooks/useAuth';
@@ -29,6 +35,7 @@ const Sidebar: React.FC<SidebarProps> = ({ business, user, isCollapsed, toggleCo
   const location = useLocation();
   const { role } = user;
   const logoutMutation = useLogout();
+  const [isHelpOpen, setIsHelpOpen] = useState(location.pathname.startsWith('/help') || location.pathname === '/support');
 
   const getNavClass = (path: string, exact: boolean = false, disabled: boolean = false) => {
     const isActive = exact
@@ -174,6 +181,62 @@ const Sidebar: React.FC<SidebarProps> = ({ business, user, isCollapsed, toggleCo
               <Users size={20} className="shrink-0" />
               {!isCollapsed && <span>{t('nav.staff')}</span>}
             </Link>
+            {/* Help Dropdown */}
+            <div>
+              <button
+                onClick={() => setIsHelpOpen(!isHelpOpen)}
+                className={`flex items-center gap-3 py-3 text-base font-medium rounded-lg transition-colors w-full ${isCollapsed ? 'px-3 justify-center' : 'px-4'} ${location.pathname.startsWith('/help') || location.pathname === '/support' ? 'bg-white/10 text-white' : 'text-white/70 hover:text-white hover:bg-white/5'}`}
+                title={t('nav.help', 'Help')}
+              >
+                <HelpCircle size={20} className="shrink-0" />
+                {!isCollapsed && (
+                  <>
+                    <span className="flex-1 text-left">{t('nav.help', 'Help')}</span>
+                    <ChevronDown size={16} className={`shrink-0 transition-transform ${isHelpOpen ? 'rotate-180' : ''}`} />
+                  </>
+                )}
+              </button>
+              {isHelpOpen && !isCollapsed && (
+                <div className="ml-4 mt-1 space-y-1 border-l border-white/20 pl-4">
+                  <Link
+                    to="/help/guide"
+                    className={`flex items-center gap-3 py-2 text-sm font-medium rounded-lg transition-colors px-3 ${location.pathname === '/help/guide' ? 'bg-white/10 text-white' : 'text-white/60 hover:text-white hover:bg-white/5'}`}
+                    title={t('nav.platformGuide', 'Platform Guide')}
+                  >
+                    <BookOpen size={16} className="shrink-0" />
+                    <span>{t('nav.platformGuide', 'Platform Guide')}</span>
+                  </Link>
+                  <Link
+                    to="/help/ticketing"
+                    className={`flex items-center gap-3 py-2 text-sm font-medium rounded-lg transition-colors px-3 ${location.pathname === '/help/ticketing' ? 'bg-white/10 text-white' : 'text-white/60 hover:text-white hover:bg-white/5'}`}
+                    title={t('nav.ticketingHelp', 'Ticketing System')}
+                  >
+                    <FileQuestion size={16} className="shrink-0" />
+                    <span>{t('nav.ticketingHelp', 'Ticketing System')}</span>
+                  </Link>
+                  {role === 'owner' && (
+                    <Link
+                      to="/help/api"
+                      className={`flex items-center gap-3 py-2 text-sm font-medium rounded-lg transition-colors px-3 ${location.pathname === '/help/api' ? 'bg-white/10 text-white' : 'text-white/60 hover:text-white hover:bg-white/5'}`}
+                      title={t('nav.apiDocs', 'API Documentation')}
+                    >
+                      <Code size={16} className="shrink-0" />
+                      <span>{t('nav.apiDocs', 'API Docs')}</span>
+                    </Link>
+                  )}
+                  <div className="pt-2 mt-2 border-t border-white/10">
+                    <Link
+                      to="/support"
+                      className={`flex items-center gap-3 py-2 text-sm font-medium rounded-lg transition-colors px-3 ${location.pathname === '/support' ? 'bg-white/10 text-white' : 'text-white/60 hover:text-white hover:bg-white/5'}`}
+                      title={t('nav.support', 'Support')}
+                    >
+                      <MessageSquare size={16} className="shrink-0" />
+                      <span>{t('nav.support', 'Support')}</span>
+                    </Link>
+                  </div>
+                </div>
+              )}
+            </div>
           </>
         )}
 
@@ -217,4 +280,4 @@ const Sidebar: React.FC<SidebarProps> = ({ business, user, isCollapsed, toggleCo
   );
 };
 
-export default Sidebar;
+export default Sidebar;