Added mfa and css enhancements

frontend/src/App.jsx

@@ -2,18 +2,19 @@ import React from 'react'
 import { Routes, Route } from 'react-router-dom'
 import { AuthProvider } from './contexts/AuthContext'
 import { ThemeProvider } from './contexts/ThemeContext'
+import { UpdateNotificationProvider } from './contexts/UpdateNotificationContext'
 import ProtectedRoute from './components/ProtectedRoute'
 import Layout from './components/Layout'
 import Login from './pages/Login'
 import Dashboard from './pages/Dashboard'
 import Hosts from './pages/Hosts'
-import HostGroups from './pages/HostGroups'
 import Packages from './pages/Packages'
 import Repositories from './pages/Repositories'
 import RepositoryDetail from './pages/RepositoryDetail'
 import Users from './pages/Users'
 import Permissions from './pages/Permissions'
 import Settings from './pages/Settings'
+import Options from './pages/Options'
 import Profile from './pages/Profile'
 import HostDetail from './pages/HostDetail'
 import PackageDetail from './pages/PackageDetail'
@@ -22,7 +23,8 @@ function App() {
   return (
     <ThemeProvider>
       <AuthProvider>
-        <Routes>
+        <UpdateNotificationProvider>
+          <Routes>
         <Route path="/login" element={<Login />} />
         <Route path="/" element={
           <ProtectedRoute requirePermission="canViewDashboard">
@@ -45,13 +47,6 @@ function App() {
             </Layout>
           </ProtectedRoute>
         } />
-        <Route path="/host-groups" element={
-          <ProtectedRoute requirePermission="canManageHosts">
-            <Layout>
-              <HostGroups />
-            </Layout>
-          </ProtectedRoute>
-        } />
         <Route path="/packages" element={
           <ProtectedRoute requirePermission="canViewPackages">
             <Layout>
@@ -94,6 +89,13 @@ function App() {
             </Layout>
           </ProtectedRoute>
         } />
+        <Route path="/options" element={
+          <ProtectedRoute requirePermission="canManageHosts">
+            <Layout>
+              <Options />
+            </Layout>
+          </ProtectedRoute>
+        } />
         <Route path="/profile" element={
           <ProtectedRoute>
             <Layout>
@@ -108,7 +110,8 @@ function App() {
             </Layout>
           </ProtectedRoute>
         } />
-        </Routes>
+          </Routes>
+        </UpdateNotificationProvider>
       </AuthProvider>
     </ThemeProvider>
   )