Syco/Dashboard
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Reorder Dashboard
ci/woodpecker/push/woodpecker Pipeline was successful
Details

Browse Source
This commit is contained in:
Syco21
2026-05-15 20:22:40 +02:00
parent 48d6584b7d
commit 4a4216bf16
2 changed files with 52 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.tsx
+9 -51
View File
@@ -1,61 +1,19 @@
import { BrowserRouter, Routes, Route } from 'react-router-dom' import { BrowserRouter, Routes, Route } from 'react-router-dom'
import { Header } from './components/Header' import { Header } from './components/Header'
import { ProxmoxWidget } from './components/widgets/ProxmoxWidget'
import { NasWidget } from './components/widgets/NasWidget'
import { AdGuardWidget } from './components/widgets/AdGuardWidget'
import { CrowdSecWidget } from './components/widgets/CrowdSecWidget'
import { HeadscaleWidget } from './components/widgets/HeadscaleWidget'
import { KumaWidget } from './components/widgets/KumaWidget'
import { FritzboxWidget } from './components/widgets/FritzboxWidget'
import { AuthentikWidget } from './components/widgets/AuthentikWidget'
import { VaultwardenWidget } from './components/widgets/VaultwardenWidget'
import { ArrCalendarWidget } from './components/widgets/ArrCalendarWidget'
import { ArrStatsWidget } from './components/widgets/ArrStatsWidget'
import { QbittorrentWidget } from './components/widgets/QbittorrentWidget'
import { GrafanaWidget } from './components/widgets/GrafanaWidget'
import { PrometheusWidget } from './components/widgets/PrometheusWidget'
import { LokiWidget } from './components/widgets/LokiWidget'
import { JellyfinWidget } from './components/widgets/JellyfinWidget'
import { NavidromeWidget } from './components/widgets/NavidromeWidget'
import { RommWidget } from './components/widgets/RommWidget'
import { AppsPage } from './pages/AppsPage' import { AppsPage } from './pages/AppsPage'
import { dashboardSections } from './config/dashboard'
function DashboardPage() { function DashboardPage() {
return ( return (
<> <>
<div className="section-label">Infrastructure</div> {dashboardSections.map(({ label, widgets }) => (
<div className="infra-grid"> <div key={label}>
<ProxmoxWidget /> <div className="section-label">{label}</div>
<NasWidget /> <div className="infra-grid">
<AdGuardWidget /> {widgets.map((Widget, i) => <Widget key={i} />)}
<HeadscaleWidget /> </div>
<FritzboxWidget /> </div>
</div> ))}
<div className="section-label">Media</div>
<div className="infra-grid">
<JellyfinWidget />
<NavidromeWidget />
<RommWidget />
<ArrCalendarWidget />
<ArrStatsWidget />
<QbittorrentWidget />
</div>
<div className="section-label">Monitoring</div>
<div className="infra-grid">
<KumaWidget />
<CrowdSecWidget />
<GrafanaWidget />
<PrometheusWidget />
<LokiWidget />
</div>
<div className="section-label">Access</div>
<div className="infra-grid">
<AuthentikWidget />
<VaultwardenWidget />
</div>
</> </>
) )
} }
src/config/dashboard.ts
+43
View File
@@ -0,0 +1,43 @@
import { ComponentType } from 'react'
import { ProxmoxWidget } from '../components/widgets/ProxmoxWidget'
import { NasWidget } from '../components/widgets/NasWidget'
import { AdGuardWidget } from '../components/widgets/AdGuardWidget'
import { HeadscaleWidget } from '../components/widgets/HeadscaleWidget'
import { FritzboxWidget } from '../components/widgets/FritzboxWidget'
import { JellyfinWidget } from '../components/widgets/JellyfinWidget'
import { NavidromeWidget } from '../components/widgets/NavidromeWidget'
import { RommWidget } from '../components/widgets/RommWidget'
import { ArrCalendarWidget } from '../components/widgets/ArrCalendarWidget'
import { ArrStatsWidget } from '../components/widgets/ArrStatsWidget'
import { QbittorrentWidget } from '../components/widgets/QbittorrentWidget'
import { KumaWidget } from '../components/widgets/KumaWidget'
import { CrowdSecWidget } from '../components/widgets/CrowdSecWidget'
import { GrafanaWidget } from '../components/widgets/GrafanaWidget'
import { PrometheusWidget } from '../components/widgets/PrometheusWidget'
import { LokiWidget } from '../components/widgets/LokiWidget'
import { AuthentikWidget } from '../components/widgets/AuthentikWidget'
import { VaultwardenWidget } from '../components/widgets/VaultwardenWidget'
export interface DashboardSection {
label: string
widgets: ComponentType[]
}
export const dashboardSections: DashboardSection[] = [
{
label: 'Infrastructure',
widgets: [ProxmoxWidget, NasWidget, AdGuardWidget, HeadscaleWidget, FritzboxWidget],
},
{
label: 'Monitoring',
widgets: [KumaWidget, CrowdSecWidget, GrafanaWidget, PrometheusWidget, LokiWidget],
},
{
label: 'Media',
widgets: [JellyfinWidget, NavidromeWidget, RommWidget, ArrCalendarWidget, ArrStatsWidget, QbittorrentWidget],
},
{
label: 'Access',
widgets: [AuthentikWidget, VaultwardenWidget],
},
]