From 2c10781d572adec7a0cfbbbb4493523d7f34ba0d Mon Sep 17 00:00:00 2001
From: BLACK <black@devblack.de>
Date: Sun, 18 Jan 2026 20:35:59 +0100
Subject: [PATCH] feat: Add option to hide the progress bar for system
 statistics and introduce a success state for low usage values.

---
 src/app/page.tsx                              |  2 +-
 .../Dashboard/SystemStatsWidget.module.css    |  6 ++++-
 .../Dashboard/SystemStatsWidget.tsx           | 22 +++++++++++--------
 3 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index b0ebc49..2150ddc 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -67,7 +67,7 @@ export default function Dashboard() {
           { label: "CPU Auslastung", value: 45, displayValue: "45%" },
           { label: "RAM Nutzung", value: 32, displayValue: "2.5 GB / 8 GB" },
           { label: "Speicherplatz", value: 78, displayValue: "142 GB belegt" },
-          { label: "System Laufzeit", value: 99, displayValue: "14t 2h 12m" }
+          { label: "System Laufzeit", value: 99, displayValue: "14t 2h 12m", hideBar: true }
         ]} />
       </div>
     </div>
diff --git a/src/components/Dashboard/SystemStatsWidget.module.css b/src/components/Dashboard/SystemStatsWidget.module.css
index 8cd90c9..9d77298 100644
--- a/src/components/Dashboard/SystemStatsWidget.module.css
+++ b/src/components/Dashboard/SystemStatsWidget.module.css
@@ -61,10 +61,14 @@
     transition: width 0.5s ease;
 }
 
+.progressFill.success {
+    background-color: var(--status-success);
+}
+
 .progressFill.high {
     background-color: var(--status-warning);
 }
 
 .progressFill.critical {
     background-color: var(--status-error);
-}
+}
\ No newline at end of file
diff --git a/src/components/Dashboard/SystemStatsWidget.tsx b/src/components/Dashboard/SystemStatsWidget.tsx
index 470ba2f..9de1c32 100644
--- a/src/components/Dashboard/SystemStatsWidget.tsx
+++ b/src/components/Dashboard/SystemStatsWidget.tsx
@@ -6,6 +6,7 @@ interface SystemStat {
     label: string;
     value: number; // 0 to 100
     displayValue: string;
+    hideBar?: boolean;
 }
 
 interface SystemStatsWidgetProps {
@@ -26,15 +27,18 @@ export function SystemStatsWidget({ stats }: SystemStatsWidgetProps) {
                             <span>{stat.label}</span>
                             <span className={styles.statValue}>{stat.displayValue}</span>
                         </div>
-                        <div className={styles.progressBar}>
-                            <div
-                                className={clsx(styles.progressFill, {
-                                    [styles.high]: stat.value > 70 && stat.value <= 90,
-                                    [styles.critical]: stat.value > 90,
-                                })}
-                                style={{ width: `${stat.value}%` }}
-                            />
-                        </div>
+                        {!stat.hideBar && (
+                            <div className={styles.progressBar}>
+                                <div
+                                    className={clsx(styles.progressFill, {
+                                        [styles.success]: stat.value <= 70,
+                                        [styles.high]: stat.value > 70 && stat.value <= 90,
+                                        [styles.critical]: stat.value > 90,
+                                    })}
+                                    style={{ width: `${stat.value}%` }}
+                                />
+                            </div>
+                        )}
                     </div>
                 ))}
             </div>