feat: reorganize admin settings with tabbed interface and documentation

- Reorganized admin settings into tabbed interface (General, Security, Payment Methods)
- Vertical tabs on desktop, horizontal scrollable on mobile
- Moved Payment Methods from separate menu to Settings tab
- Fixed admin profile reuse and dashboard blocking
- Fixed maintenance mode guard to use AppConfig model
- Added admin auto-redirect after login (admins → /admin, users → /)
- Reorganized documentation into docs/ folder structure
- Created comprehensive README and documentation index
- Added PWA and Web Push notifications to to-do list

apps/web/src/App.tsx

@@ -1,4 +1,5 @@
 import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
+import { useState, useEffect } from 'react'
 import { AuthProvider, useAuth } from './contexts/AuthContext'
 import { LanguageProvider } from './contexts/LanguageContext'
 import { ThemeProvider } from './components/ThemeProvider'
@@ -8,14 +9,16 @@ import { Login } from './components/pages/Login'
 import { Register } from './components/pages/Register'
 import { OtpVerification } from './components/pages/OtpVerification'
 import { AuthCallback } from './components/pages/AuthCallback'
+import { MaintenancePage } from './components/pages/MaintenancePage'
 import { AdminLayout } from './components/admin/AdminLayout'
 import { AdminDashboard } from './components/admin/pages/AdminDashboard'
 import { AdminPlans } from './components/admin/pages/AdminPlans'
-import { AdminPaymentMethods } from './components/admin/pages/AdminPaymentMethods'
 import { AdminPayments } from './components/admin/pages/AdminPayments'
 import { AdminUsers } from './components/admin/pages/AdminUsers'
-import { AdminSettings } from './components/admin/pages/AdminSettings'
+import { AdminSettings } from './components/admin/pages/AdminSettingsNew'
+import { Profile } from './components/pages/Profile'
 import { Loader2 } from 'lucide-react'
+import { setupAxiosInterceptors } from './utils/axiosSetup'
 
 function ProtectedRoute({ children }: { children: React.ReactNode }) {
   const { user, loading } = useAuth()
@@ -50,13 +53,35 @@ function PublicRoute({ children }: { children: React.ReactNode }) {
   }
 
   if (user) {
-    return <Navigate to="/" replace />
+    // Redirect based on role
+    const redirectTo = user.role === 'admin' ? '/admin' : '/'
+    return <Navigate to={redirectTo} replace />
   }
 
   return <>{children}</>
 }
 
 export default function App() {
+  const [maintenanceMode, setMaintenanceMode] = useState(false)
+  const [maintenanceMessage, setMaintenanceMessage] = useState('')
+
+  useEffect(() => {
+    // Setup axios interceptor for maintenance mode
+    setupAxiosInterceptors((message) => {
+      setMaintenanceMessage(message)
+      setMaintenanceMode(true)
+    })
+  }, [])
+
+  // Show maintenance page if maintenance mode is active
+  if (maintenanceMode) {
+    return (
+      <ThemeProvider defaultTheme="light" storageKey="tabungin-ui-theme">
+        <MaintenancePage message={maintenanceMessage} />
+      </ThemeProvider>
+    )
+  }
+
   return (
     <BrowserRouter>
       <ThemeProvider defaultTheme="light" storageKey="tabungin-ui-theme">
@@ -74,9 +99,9 @@ export default function App() {
             <Route path="/admin" element={<ProtectedRoute><AdminLayout /></ProtectedRoute>}>
               <Route index element={<AdminDashboard />} />
               <Route path="plans" element={<AdminPlans />} />
-              <Route path="payment-methods" element={<AdminPaymentMethods />} />
               <Route path="payments" element={<AdminPayments />} />
               <Route path="users" element={<AdminUsers />} />
+              <Route path="profile" element={<Profile />} />
               <Route path="settings" element={<AdminSettings />} />
             </Route>