Improve in the progress bar visualization

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;
 }

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>