From cef8cb3f57674b1eb5d082fccbe998f292dc37ba Mon Sep 17 00:00:00 2001
From: JKuijperM <jkmontero17@gmail.com>
Date: Tue, 5 May 2026 15:08:38 +0200
Subject: [PATCH] Improve in the progress bar visualization

---
 .../expenses/static/expenses/css/base.css     | 37 +++++++++++++++++++
 .../expenses/templates/goals/list.html        | 19 ++++++++--
 2 files changed, 52 insertions(+), 4 deletions(-)

diff --git a/expenses_manager/expenses/static/expenses/css/base.css b/expenses_manager/expenses/static/expenses/css/base.css
index 1130a12..d493ab3 100644
--- a/expenses_manager/expenses/static/expenses/css/base.css
+++ b/expenses_manager/expenses/static/expenses/css/base.css
@@ -353,4 +353,41 @@ tbody tr:hover {
 
 .dropdown:hover .dropdown-menu {
     display: block;
+}
+
+.progress-container {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.progress-label {
+    min-width: 50px;
+    font-size: 12px;
+    color: #666;
+}
+
+.progress-bar {
+    width: 100%;
+    background: #e0e0e0;
+    border-radius: 6px;
+    height: 14px;
+    overflow: hidden;
+}
+
+.progress-fill {
+    height: 100%;
+    transition: width 0.6s ease-in-out;
+}
+
+.progress-fill.low {
+    background: #e74c3c;
+}
+
+.progress-fill.medium {
+    background: #f1c40f;
+}
+
+.progress-fill.high {
+    background: #2ecc71;
 }
\ No newline at end of file
diff --git a/expenses_manager/expenses/templates/goals/list.html b/expenses_manager/expenses/templates/goals/list.html
index 402b81b..c544323 100644
--- a/expenses_manager/expenses/templates/goals/list.html
+++ b/expenses_manager/expenses/templates/goals/list.html
@@ -22,10 +22,21 @@
     <tr>
         <td>{{ goal.name }}</td>
         <td>
-            {{ goal.progress }} / {{ goal.target_amount }}
-
-            <div style="background:#eee; width:200px;">
-                <div style="background:#4caf50; width:{{ goal.percentage|unlocalize }}%; height:10px;"></div>
+            <div class="progress-container">
+                <span class="progress-label">
+                    {{ goal.progress|floatformat:1 }}€ / {{ goal.target_amount|floatformat:1 }}€
+                </span>
+                <div class="progress-bar">
+                    <div class="progress-fill
+                    {% if goal.percentage < 50 %} low
+                    {% elif goal.percentage < 80 %} medium
+                    {% else %} high
+                    {% endif %}"
+                    style="width: {{ goal.percentage|unlocalize }}%"></div>
+                </div>
+                <span class="progress-label">
+                    {{ goal.percentage|floatformat:1}}%
+                </span>
             </div>
         </td>