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/layouts/BusinessLayout.tsx

@@ -3,13 +3,17 @@ import { Outlet, useLocation, useSearchParams, useNavigate } from 'react-router-
 import Sidebar from '../components/Sidebar';
 import TopBar from '../components/TopBar';
 import TrialBanner from '../components/TrialBanner';
+import SandboxBanner from '../components/SandboxBanner';
 import { Business, User } from '../types';
 import MasqueradeBanner from '../components/MasqueradeBanner';
 import OnboardingWizard from '../components/OnboardingWizard';
+import TicketModal from '../components/TicketModal';
 import { useStopMasquerade } from '../hooks/useAuth';
-import { useNotificationWebSocket } from '../hooks/useNotificationWebSocket'; // Import the new hook
+import { useNotificationWebSocket } from '../hooks/useNotificationWebSocket';
+import { useTicket } from '../hooks/useTickets';
 import { MasqueradeStackEntry } from '../api/auth';
 import { useScrollToTop } from '../hooks/useScrollToTop';
+import { SandboxProvider, useSandbox } from '../contexts/SandboxContext';
 
 /**
  * Convert a hex color to HSL values
@@ -102,10 +106,26 @@ interface BusinessLayoutProps {
   updateBusiness: (updates: Partial<Business>) => void;
 }
 
-const BusinessLayout: React.FC<BusinessLayoutProps> = ({ business, user, darkMode, toggleTheme, onSignOut, updateBusiness }) => {
+/**
+ * Wrapper component for SandboxBanner that uses the sandbox context
+ */
+const SandboxBannerWrapper: React.FC = () => {
+  const { isSandbox, toggleSandbox, isToggling } = useSandbox();
+
+  return (
+    <SandboxBanner
+      isSandbox={isSandbox}
+      onSwitchToLive={() => toggleSandbox(false)}
+      isSwitching={isToggling}
+    />
+  );
+};
+
+const BusinessLayoutContent: React.FC<BusinessLayoutProps> = ({ business, user, darkMode, toggleTheme, onSignOut, updateBusiness }) => {
   const [isCollapsed, setIsCollapsed] = useState(false);
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
   const [showOnboarding, setShowOnboarding] = useState(false);
+  const [ticketModalId, setTicketModalId] = useState<string | null>(null);
   const mainContentRef = useRef<HTMLElement>(null);
   const location = useLocation();
   const [searchParams] = useSearchParams();
@@ -113,6 +133,17 @@ const BusinessLayout: React.FC<BusinessLayoutProps> = ({ business, user, darkMod
 
   useScrollToTop();
 
+  // Fetch ticket data when modal is opened from notification
+  const { data: ticketFromNotification } = useTicket(ticketModalId || undefined);
+
+  const handleTicketClick = (ticketId: string) => {
+    setTicketModalId(ticketId);
+  };
+
+  const closeTicketModal = () => {
+    setTicketModalId(null);
+  };
+
   // Generate brand color palette from business primary color
   const brandPalette = useMemo(() => {
     return generateColorPalette(business.primaryColor || '#2563eb');
@@ -252,6 +283,8 @@ const BusinessLayout: React.FC<BusinessLayoutProps> = ({ business, user, darkMod
             onStop={handleStopMasquerade}
           />
         )}
+        {/* Sandbox mode banner */}
+        <SandboxBannerWrapper />
         {/* Show trial banner if trial is active and payments not yet enabled */}
         {business.isTrialActive && !business.paymentsEnabled && business.plan !== 'Free' && (
           <TrialBanner business={business} />
@@ -261,6 +294,7 @@ const BusinessLayout: React.FC<BusinessLayoutProps> = ({ business, user, darkMod
           isDarkMode={darkMode}
           toggleTheme={toggleTheme}
           onMenuClick={() => setIsMobileMenuOpen(true)}
+          onTicketClick={handleTicketClick}
         />
 
         <main ref={mainContentRef} tabIndex={-1} className="flex-1 overflow-auto focus:outline-none">
@@ -277,8 +311,27 @@ const BusinessLayout: React.FC<BusinessLayoutProps> = ({ business, user, darkMod
           onSkip={handleOnboardingSkip}
         />
       )}
+
+      {/* Ticket modal opened from notification */}
+      {ticketModalId && ticketFromNotification && (
+        <TicketModal
+          ticket={ticketFromNotification}
+          onClose={closeTicketModal}
+        />
+      )}
     </div>
   );
 };
 
+/**
+ * Business Layout with Sandbox Provider
+ */
+const BusinessLayout: React.FC<BusinessLayoutProps> = (props) => {
+  return (
+    <SandboxProvider>
+      <BusinessLayoutContent {...props} />
+    </SandboxProvider>
+  );
+};
+
 export default BusinessLayout;

frontend/src/layouts/CustomerLayout.tsx

@@ -1,9 +1,10 @@
 import React, { useState, useEffect } from 'react';
-import { Outlet, Link } from 'react-router-dom';
+import { Outlet, Link, useNavigate } from 'react-router-dom';
 import { User, Business } from '../types';
-import { LayoutDashboard, CalendarPlus, CreditCard } from 'lucide-react';
+import { LayoutDashboard, CalendarPlus, CreditCard, HelpCircle, Sun, Moon } from 'lucide-react';
 import MasqueradeBanner from '../components/MasqueradeBanner';
 import UserProfileDropdown from '../components/UserProfileDropdown';
+import NotificationDropdown from '../components/NotificationDropdown';
 import { useStopMasquerade } from '../hooks/useAuth';
 import { MasqueradeStackEntry } from '../api/auth';
 import { useScrollToTop } from '../hooks/useScrollToTop';
@@ -11,15 +12,24 @@ import { useScrollToTop } from '../hooks/useScrollToTop';
 interface CustomerLayoutProps {
   business: Business;
   user: User;
+  darkMode: boolean;
+  toggleTheme: () => void;
 }
 
-const CustomerLayout: React.FC<CustomerLayoutProps> = ({ business, user }) => {
+const CustomerLayout: React.FC<CustomerLayoutProps> = ({ business, user, darkMode, toggleTheme }) => {
+  const navigate = useNavigate();
   useScrollToTop();
 
   // Masquerade logic
   const [masqueradeStack, setMasqueradeStack] = useState<MasqueradeStackEntry[]>([]);
   const stopMasqueradeMutation = useStopMasquerade();
 
+  // Handle ticket notification click - navigate to support page
+  const handleTicketClick = (ticketId: string) => {
+    // Navigate to support page - the CustomerSupport component will handle showing tickets
+    navigate('/support');
+  };
+
   useEffect(() => {
     const stackJson = localStorage.getItem('masquerade_stack');
     if (stackJson) {
@@ -84,8 +94,23 @@ const CustomerLayout: React.FC<CustomerLayoutProps> = ({ business, user }) => {
                 <Link to="/payments" className="text-sm font-medium text-white/80 hover:text-white transition-colors flex items-center gap-2 px-3 py-2 rounded-md hover:bg-white/10">
                   <CreditCard size={16} /> Billing
                 </Link>
+                <Link to="/support" className="text-sm font-medium text-white/80 hover:text-white transition-colors flex items-center gap-2 px-3 py-2 rounded-md hover:bg-white/10">
+                  <HelpCircle size={16} /> Support
+                </Link>
               </nav>
 
+              {/* Notifications */}
+              <NotificationDropdown variant="light" onTicketClick={handleTicketClick} />
+
+              {/* Dark Mode Toggle */}
+              <button
+                onClick={toggleTheme}
+                className="p-2 rounded-md text-white/80 hover:text-white hover:bg-white/10 transition-colors"
+                aria-label={darkMode ? 'Switch to light mode' : 'Switch to dark mode'}
+              >
+                {darkMode ? <Sun size={20} /> : <Moon size={20} />}
+              </button>
+
               <UserProfileDropdown user={user} variant="light" />
             </div>
           </div>

frontend/src/layouts/PlatformLayout.tsx

@@ -1,9 +1,12 @@
 import React, { useState } from 'react';
 import { Outlet } from 'react-router-dom';
-import { Moon, Sun, Bell, Globe, Menu } from 'lucide-react';
+import { Moon, Sun, Globe, Menu } from 'lucide-react';
 import { User } from '../types';
 import PlatformSidebar from '../components/PlatformSidebar';
 import UserProfileDropdown from '../components/UserProfileDropdown';
+import NotificationDropdown from '../components/NotificationDropdown';
+import TicketModal from '../components/TicketModal';
+import { useTicket } from '../hooks/useTickets';
 import { useScrollToTop } from '../hooks/useScrollToTop';
 
 interface PlatformLayoutProps {
@@ -16,9 +19,21 @@ interface PlatformLayoutProps {
 const PlatformLayout: React.FC<PlatformLayoutProps> = ({ user, darkMode, toggleTheme, onSignOut }) => {
   const [isCollapsed, setIsCollapsed] = useState(false);
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+  const [ticketModalId, setTicketModalId] = useState<string | null>(null);
 
   useScrollToTop();
 
+  // Fetch ticket data when modal is opened from notification
+  const { data: ticketFromNotification } = useTicket(ticketModalId || undefined);
+
+  const handleTicketClick = (ticketId: string) => {
+    setTicketModalId(ticketId);
+  };
+
+  const closeTicketModal = () => {
+    setTicketModalId(null);
+  };
+
   return (
     <div className="flex h-screen bg-gray-100 dark:bg-gray-900">
       {/* Mobile menu */}
@@ -59,9 +74,7 @@ const PlatformLayout: React.FC<PlatformLayoutProps> = ({ user, darkMode, toggleT
                 >
                     {darkMode ? <Sun size={20} /> : <Moon size={20} />}
                 </button>
-                <button className="p-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 transition-colors">
-                    <Bell size={20} />
-                </button>
+                <NotificationDropdown onTicketClick={handleTicketClick} />
                 <UserProfileDropdown user={user} />
             </div>
         </header>
@@ -70,6 +83,14 @@ const PlatformLayout: React.FC<PlatformLayoutProps> = ({ user, darkMode, toggleT
           <Outlet />
         </main>
       </div>
+
+      {/* Ticket modal opened from notification */}
+      {ticketModalId && ticketFromNotification && (
+        <TicketModal
+          ticket={ticketFromNotification}
+          onClose={closeTicketModal}
+        />
+      )}
     </div>
   );
 };