From f6d0807a815ab2d37fbd1919432b6b3685ae0194 Mon Sep 17 00:00:00 2001
From: Scrum4Me Agent <30029041+madhura68@users.noreply.github.com>
Date: Wed, 13 May 2026 22:14:01 +0200
Subject: [PATCH] feat(widgets): voeg kleurbadges toe aan SystemdWidget en
 GitWidget

- SystemdWidget: groen als N=M healthy, oranje als 0<N<M, rood als N=0
- GitWidget: groen als 0 dirty repos, oranje als >0; toon K/M formaat

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 app/_components/GitWidget.tsx     | 11 ++++++++---
 app/_components/SystemdWidget.tsx | 11 ++++++++++-
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/app/_components/GitWidget.tsx b/app/_components/GitWidget.tsx
index 0513ff2..333b84b 100644
--- a/app/_components/GitWidget.tsx
+++ b/app/_components/GitWidget.tsx
@@ -58,10 +58,15 @@ export default function GitWidget({ initial, repos }: { initial: GitInitial; rep
       ) : error ? (
         <p className="mt-2 text-sm text-destructive truncate">{error}</p>
       ) : data ? (
-        <p className="mt-2 text-2xl font-semibold">
-          {data.dirty}
+        <p
+          className={[
+            'mt-2 text-2xl font-semibold',
+            data.dirty === 0 ? 'text-green-600' : 'text-orange-500',
+          ].join(' ')}
+        >
+          {data.dirty}/{data.total}
           <span className="text-sm font-normal text-muted-foreground">
-            {' '}repo{data.dirty !== 1 ? 's' : ''} dirty
+            {' '}repos uncommitted
           </span>
         </p>
       ) : (
diff --git a/app/_components/SystemdWidget.tsx b/app/_components/SystemdWidget.tsx
index 9c01760..147d141 100644
--- a/app/_components/SystemdWidget.tsx
+++ b/app/_components/SystemdWidget.tsx
@@ -58,7 +58,16 @@ export default function SystemdWidget({ initial, units }: { initial: SystemdInit
       ) : error ? (
         <p className="mt-2 text-sm text-destructive truncate">{error}</p>
       ) : data ? (
-        <p className="mt-2 text-2xl font-semibold">
+        <p
+          className={[
+            'mt-2 text-2xl font-semibold',
+            data.total > 0 && data.healthy === data.total
+              ? 'text-green-600'
+              : data.healthy > 0
+                ? 'text-orange-500'
+                : 'text-destructive',
+          ].join(' ')}
+        >
           {data.healthy}/{data.total}
           <span className="text-sm font-normal text-muted-foreground"> healthy</span>
         </p>