akanealw/Charon
1
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

feat: add Settings and Tasks pages with routing; enhance navigation links for better user experience

Browse Source
This commit is contained in:
Wikid82
2025-11-21 21:47:43 -05:00
parent 3256cc845b
commit 7aa6747ecc
3 changed files with 92 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/App.tsx
+4 -2
View File
@@ -11,7 +11,9 @@ import ImportCaddy from './pages/ImportCaddy'
import Certificates from './pages/Certificates'
import SystemSettings from './pages/SystemSettings'
import Account from './pages/Account'
import Settings from './pages/Settings'
import Backups from './pages/Backups'
import Tasks from './pages/Tasks'
import Logs from './pages/Logs'
import Domains from './pages/Domains'
import Login from './pages/Login'
@@ -41,14 +43,14 @@ export default function App() {
<Route path="import" element={<ImportCaddy />} />
{/* Settings Routes */}
<Route path="settings">
<Route path="settings" element={<Settings />}>
<Route index element={<SystemSettings />} />
<Route path="system" element={<SystemSettings />} />
<Route path="account" element={<Account />} />
</Route>
{/* Tasks Routes */}
<Route path="tasks">
<Route path="tasks" element={<Tasks />}>
<Route index element={<Backups />} />
<Route path="backups" element={<Backups />} />
<Route path="logs" element={<Logs />} />
frontend/src/pages/Settings.tsx
+44
View File
@@ -0,0 +1,44 @@
import { Link, Outlet, useLocation } from 'react-router-dom'
export default function Settings() {
const location = useLocation()
const isActive = (path: string) => location.pathname === path
return (
<div className="">
<div className="mb-6">
<h2 className="text-2xl font-semibold text-gray-900 dark:text-white">Settings</h2>
<p className="text-sm text-gray-500 dark:text-gray-400">Manage system and account settings</p>
</div>
<div className="flex items-center gap-4 mb-6">
<Link
to="/settings/system"
className={`px-3 py-2 rounded-md text-sm font-medium transition-colors ${
isActive('/settings/system')
? 'bg-blue-50 text-blue-700 dark:bg-blue-900/20 dark:text-blue-300'
: 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800'
}`}
>
System
</Link>
<Link
to="/settings/account"
className={`px-3 py-2 rounded-md text-sm font-medium transition-colors ${
isActive('/settings/account')
? 'bg-blue-50 text-blue-700 dark:bg-blue-900/20 dark:text-blue-300'
: 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800'
}`}
>
Account
</Link>
</div>
<div className="bg-white dark:bg-dark-card border border-gray-200 dark:border-gray-800 rounded-md p-6">
<Outlet />
</div>
</div>
)
}
frontend/src/pages/Tasks.tsx
+44
View File
@@ -0,0 +1,44 @@
import { Link, Outlet, useLocation } from 'react-router-dom'
export default function Tasks() {
const location = useLocation()
const isActive = (path: string) => location.pathname === path
return (
<div className="">
<div className="mb-6">
<h2 className="text-2xl font-semibold text-gray-900 dark:text-white">Tasks</h2>
<p className="text-sm text-gray-500 dark:text-gray-400">Manage system tasks and view logs</p>
</div>
<div className="flex items-center gap-4 mb-6">
<Link
to="/tasks/backups"
className={`px-3 py-2 rounded-md text-sm font-medium transition-colors ${
isActive('/tasks/backups')
? 'bg-blue-50 text-blue-700 dark:bg-blue-900/20 dark:text-blue-300'
: 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800'
}`}
>
Backups
</Link>
<Link
to="/tasks/logs"
className={`px-3 py-2 rounded-md text-sm font-medium transition-colors ${
isActive('/tasks/logs')
? 'bg-blue-50 text-blue-700 dark:bg-blue-900/20 dark:text-blue-300'
: 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800'
}`}
>
Logs
</Link>
</div>
<div className="bg-white dark:bg-dark-card border border-gray-200 dark:border-gray-800 rounded-md p-6">
<Outlet />
</div>
</div>
)
}