Reorder Dashboard

src/App.tsx

@@ -1,61 +1,19 @@
 import { BrowserRouter, Routes, Route } from 'react-router-dom'
 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 { dashboardSections } from './config/dashboard'
 
 function DashboardPage() {
   return (
     <>
-      <div className="section-label">Infrastructure</div>
-      <div className="infra-grid">
-        <ProxmoxWidget />
-        <NasWidget />
-        <AdGuardWidget />
-        <HeadscaleWidget />
-        <FritzboxWidget />
-      </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>
+      {dashboardSections.map(({ label, widgets }) => (
+        <div key={label}>
+          <div className="section-label">{label}</div>
+          <div className="infra-grid">
+            {widgets.map((Widget, i) => <Widget key={i} />)}
+          </div>
+        </div>
+      ))}
     </>
   )
 }

src/config/dashboard.ts

@@ -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],
+  },
+]