feat: Add SMTP settings and collapsible email configuration UI

- Add SMTP fields to TicketEmailSettings model (host, port, TLS/SSL, credentials, from email/name)
- Update serializers with SMTP fields and is_smtp_configured flag
- Add TicketEmailTestSmtpView for testing SMTP connections
- Update frontend API types and hooks for SMTP settings
- Add collapsible IMAP and SMTP configuration sections with "Configured" badges
- Fix TypeScript errors in mockData.ts (missing required fields, type mismatches)

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

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

frontend/src/App.tsx

@@ -13,6 +13,7 @@ import { setCookie } from './utils/cookies';
 
 // Import Login Page
 import LoginPage from './pages/LoginPage';
+import MFAVerifyPage from './pages/MFAVerifyPage';
 import OAuthCallback from './pages/OAuthCallback';
 
 // Import layouts
@@ -66,6 +67,7 @@ import PlatformSupport from './pages/PlatformSupport'; // Import Platform Suppor
 import PluginMarketplace from './pages/PluginMarketplace'; // Import Plugin Marketplace page
 import MyPlugins from './pages/MyPlugins'; // Import My Plugins page
 import Tasks from './pages/Tasks'; // Import Tasks page for scheduled plugin executions
+import EmailTemplates from './pages/EmailTemplates'; // Import Email Templates page
 import { Toaster } from 'react-hot-toast'; // Import Toaster for notifications
 
 const queryClient = new QueryClient({
@@ -127,14 +129,22 @@ const AppContent: React.FC = () => {
 
   const { data: user, isLoading: userLoading, error: userError } = useCurrentUser();
   const { data: business, isLoading: businessLoading, error: businessError } = useCurrentBusiness();
-  const [darkMode, setDarkMode] = useState(false);
+  const [darkMode, setDarkMode] = useState(() => {
+    // Check localStorage first, then system preference
+    const saved = localStorage.getItem('darkMode');
+    if (saved !== null) {
+      return JSON.parse(saved);
+    }
+    return window.matchMedia('(prefers-color-scheme: dark)').matches;
+  });
   const updateBusinessMutation = useUpdateBusiness();
   const masqueradeMutation = useMasquerade();
   const logoutMutation = useLogout();
 
-  // Apply dark mode class
+  // Apply dark mode class and persist to localStorage
   React.useEffect(() => {
     document.documentElement.classList.toggle('dark', darkMode);
+    localStorage.setItem('darkMode', JSON.stringify(darkMode));
   }, [darkMode]);
 
   // Handle tokens in URL (from login or masquerade redirect)
@@ -222,6 +232,7 @@ const AppContent: React.FC = () => {
           <Route path="/signup" element={<SignupPage />} />
         </Route>
         <Route path="/login" element={<LoginPage />} />
+        <Route path="/mfa-verify" element={<MFAVerifyPage />} />
         <Route path="/oauth/callback/:provider" element={<OAuthCallback />} />
         <Route path="/verify-email" element={<VerifyEmail />} />
         <Route path="/accept-invite" element={<AcceptInvitePage />} />
@@ -236,6 +247,7 @@ const AppContent: React.FC = () => {
     return (
       <Routes>
         <Route path="/login" element={<LoginPage />} />
+        <Route path="/mfa-verify" element={<MFAVerifyPage />} />
         <Route path="/oauth/callback/:provider" element={<OAuthCallback />} />
         <Route path="/verify-email" element={<VerifyEmail />} />
         <Route path="/accept-invite" element={<AcceptInvitePage />} />
@@ -547,6 +559,16 @@ const AppContent: React.FC = () => {
               )
             }
           />
+          <Route
+            path="/email-templates"
+            element={
+              hasAccess(['owner', 'manager']) ? (
+                <EmailTemplates />
+              ) : (
+                <Navigate to="/" />
+              )
+            }
+          />
           <Route path="/support" element={<PlatformSupport />} />
           <Route
             path="/customers"