From 46d900305a08af4a401a9b5b689a1f783bfa363d Mon Sep 17 00:00:00 2001
From: Pim Hutting <p.r.p.hutting@students.uu.nl>
Date: Mon, 12 Jan 2026 19:41:05 +0100
Subject: [PATCH] chore: made activatable elements clickable

ref: N25B-400
---
 src/pages/MonitoringPage/Components.tsx       |  5 ++-
 .../MonitoringPage/MonitoringPage.module.css  | 31 +++++++++++++++++++
 src/pages/MonitoringPage/MonitoringPage.tsx   |  1 +
 3 files changed, 34 insertions(+), 3 deletions(-)

diff --git a/src/pages/MonitoringPage/Components.tsx b/src/pages/MonitoringPage/Components.tsx
index 74aec48..0f9ea51 100644
--- a/src/pages/MonitoringPage/Components.tsx
+++ b/src/pages/MonitoringPage/Components.tsx
@@ -131,12 +131,11 @@ export const StatusList: React.FC<StatusListProps> = ({
       <h3>{title}</h3>
       <ul>
         {items.map((item, idx) => {
+          if (item.id === undefined) return null;
           const isActive = !!activeIds[item.id];
           const showIndicator = type !== 'norm';
           const canOverride = showIndicator && !isActive;
 
-          // HIGHLIGHT LOGIC: 
-          // If this is the "Goals" list, check if the current index matches
           const isCurrentGoal = type === 'goal' && idx === currentGoalIndex;
 
           const handleOverrideClick = () => {
@@ -148,7 +147,7 @@ export const StatusList: React.FC<StatusListProps> = ({
             <li key={item.id ?? idx} className={styles.statusItem}>
               {showIndicator && (
                 <span 
-                  className={`${styles.statusIndicator} ${canOverride ? styles.clickable : ''}`}
+                  className={`${styles.statusIndicator} ${isActive ? styles.active : styles.inactive} ${canOverride ? styles.clickable : ''}`}
                   onClick={handleOverrideClick}
                 >
                   {isActive ? "✔️" : "❌"}
diff --git a/src/pages/MonitoringPage/MonitoringPage.module.css b/src/pages/MonitoringPage/MonitoringPage.module.css
index 497dcef..f52a784 100644
--- a/src/pages/MonitoringPage/MonitoringPage.module.css
+++ b/src/pages/MonitoringPage/MonitoringPage.module.css
@@ -156,6 +156,37 @@
   content: '✔️ ';
 }
 
+.statusIndicator {
+  display: inline-block;
+  margin-right: 10px;
+  user-select: none; 
+  transition: transform 0.1s ease;
+  font-size: 1.1rem;
+}
+
+.clickable {
+  cursor: pointer;
+}
+
+.clickable:hover {
+  transform: scale(1.2);
+}
+
+.active {
+  cursor: default; 
+  opacity: 1;
+}
+
+.statusItem {
+  display: flex;
+  align-items: center;
+  margin-bottom: 0.4rem;
+}
+
+.itemDescription {
+  line-height: 1.4;
+}
+
 /* LOGS */
 .logs {
   grid-area: logs;
diff --git a/src/pages/MonitoringPage/MonitoringPage.tsx b/src/pages/MonitoringPage/MonitoringPage.tsx
index 15f7826..059fa06 100644
--- a/src/pages/MonitoringPage/MonitoringPage.tsx
+++ b/src/pages/MonitoringPage/MonitoringPage.tsx
@@ -73,6 +73,7 @@ const MonitoringPage: React.FC = () => {
       
       data.norms.forEach((normUpdate: { id: string; active: boolean }) => {
         nextState[normUpdate.id] = normUpdate.active;
+        console.log(`Conditional norm ${normUpdate.id} set to active: ${normUpdate.active}`);
       });
 
       return nextState;