From 4a4216bf167858198ab884370af02aab37f34082 Mon Sep 17 00:00:00 2001
From: Syco21 <davhv12@gmail.com>
Date: Fri, 15 May 2026 20:22:40 +0200
Subject: [PATCH] Reorder Dashboard

---
 src/App.tsx             | 60 +++++++----------------------------------
 src/config/dashboard.ts | 43 +++++++++++++++++++++++++++++
 2 files changed, 52 insertions(+), 51 deletions(-)
 create mode 100644 src/config/dashboard.ts

diff --git a/src/App.tsx b/src/App.tsx
index 746bd4c..ce61bc6 100644
--- a/src/App.tsx
+++ b/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>
+      ))}
     </>
   )
 }
diff --git a/src/config/dashboard.ts b/src/config/dashboard.ts
new file mode 100644
index 0000000..c269e9e
--- /dev/null
+++ b/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],
+  },
+]