feat: Add option to hide the progress bar for system statistics and introduce a success state for low usage values.

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>

src/components/Dashboard/SystemStatsWidget.module.css

@@ -61,6 +61,10 @@
     transition: width 0.5s ease;
 }
 
+.progressFill.success {
+    background-color: var(--status-success);
+}
+
 .progressFill.high {
     background-color: var(--status-warning);
 }

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>
+                        {!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>