Modified the account list to see the state "active" or "inactive"

expenses_manager/expenses/static/expenses/css/base.css

@@ -431,3 +431,25 @@ tbody tr:hover {
     border-radius: 8px;
     background: #f9f9f9;
 }
+
+.row-inactive {
+    opacity: 0.55;
+}
+
+.badge {
+    display: inline-block;
+    padding: 2px 8px;
+    border-radius: 12px;
+    font-size: 0.8em;
+    font-weight: 600;
+}
+
+.badge-active {
+    background-color: #e6f4ea;
+    color: #1e7e34;
+}
+
+.badge-inactive {
+    background-color: #fbe9e7;
+    color: #b71c1c;
+}

expenses_manager/expenses/templates/expenses/account_list.html

@@ -22,10 +22,18 @@
                     <td>{{ account.name }}</td>
                     <td>{{ account.initial_balance }}</td>
                     <td>{{ account.current_balance|floatformat:2 }}</td>
-                    <td>{{ account.active }}</td>
+                    <td>
+                        {% if account.active %}
+                            <span class="badge badge-active">Activa</span>
+                        {% else %}
+                            <span class="badge badge-inactive">Inactiva</span>
+                        {% endif %}
+                    </td>
                     <td class="table-actions">
                         <a href="{% url 'account_edit' account.id %}">Editar</a>
-                        <a href="{% url 'account_delete' account.id %}" class="danger">Eliminar</a>
+                        {% if account.active %}
+                            <a href="{% url 'account_delete' account.id %}" class="danger">Eliminar</a>
+                        {% endif %}
                     </td>
                 </tr>
             {% empty %}