Modified the visualization of the tags in the expenses form

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

@@ -483,4 +483,39 @@ tbody tr:hover {
     margin: 0;
     font-size: 0.9em;
     color: #666;
+}
+
+.tag-chip-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin: 8px 0;
+    max-height: 160px;
+    overflow-y: auto;
+    padding: 8px;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+}
+
+.tag-chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    padding: 4px 10px;
+    border: 1px solid #ccc;
+    border-radius: 16px;
+    font-size: 0.85em;
+    cursor: pointer;
+    user-select: none;
+    background-color: #fafafa;
+}
+
+.tag-chip input[type="checkbox"] {
+    accent-color: #1e7e34;
+}
+
+.tag-chip:has(input:checked) {
+    background-color: #e6f4ea;
+    border-color: #1e7e34;
+    color: #1e7e34;
 }

expenses_manager/expenses/templates/expenses/expense_form.html

@@ -19,7 +19,33 @@
 
     <form method="post">
         {% csrf_token %}
-        {{ form.as_p }}
+        
+        {% for field in form %}
+            {% if field.name == "tags" %}
+                <div class="form-field">
+                    {{ field.label_tag }}
+                    <div class="tag-chip-list">
+                        {% for checkbox in field %}
+                            <label class="tag-chip">
+                                {{ checkbox.tag }}
+                                <span>{{ checkbox.choice_label }}</span>
+                            </label>
+                        {% endfor %}
+                    </div>
+                    {% if field.errors %}
+                        <div class="form-errors">{{ field.errors }}</div>
+                    {% endif %}
+                </div>
+            {% else %}
+                <p>
+                    {{ field.label_tag }} {{ field }}
+                    {% if field.errors %}
+                        <span class="form-errors">{{ field.errors }}</span>
+                    {% endif %}
+                </p>
+            {% endif %}
+        {% endfor %}
+
         <button type="submit">
             {% if form.instance.pk %}
                 Guardar gasto