Feat: dashboard con gráficos, estructura CBS/Portafolios, semáforo de proyectos y cartera de especialistas

templates/expenses/category_form.html

@@ -0,0 +1,62 @@
+{% extends 'base.html' %}
+
+{% block content %}
+    <div class="form-container" style="max-width: 800px; margin: 0 auto;">
+        <div class="data-card" style="padding: 2.5rem; background: white; border-radius: 8px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);">
+            <h2 style="color: var(--efintel-petroleum); margin-bottom: 2rem; border-bottom: 2px solid var(--efintel-light); padding-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem;">
+                <i data-lucide="{% if form.instance.pk %}edit-3{% else %}plus-circle{% endif %}"></i> 
+                {% if form.instance.pk %}Editar Categoría Contable{% else %}Nueva Categoría Contable{% endif %}
+            </h2>
+
+            <form method="post">
+                {% csrf_token %}
+                
+                <div style="display: grid; grid-template-columns: 1fr 2fr; gap: 1.5rem; margin-bottom: 1.5rem;">
+                    <div class="form-group">
+                        <label for="{{ form.code.id_for_label }}" style="font-weight: 600; font-size: 0.85rem; color: var(--efintel-dark);">Código</label>
+                        {{ form.code }}
+                        {% if form.code.errors %}
+                            <div style="color: var(--efintel-danger); font-size: 0.75rem; margin-top: 4px;">{{ form.code.errors }}</div>
+                        {% endif %}
+                    </div>
+
+                    <div class="form-group">
+                        <label for="{{ form.name.id_for_label }}" style="font-weight: 600; font-size: 0.85rem; color: var(--efintel-dark);">Nombre de Categoría</label>
+                        {{ form.name }}
+                        {% if form.name.errors %}
+                            <div style="color: var(--efintel-danger); font-size: 0.75rem; margin-top: 4px;">{{ form.name.errors }}</div>
+                        {% endif %}
+                    </div>
+                </div>
+
+                <div class="form-group" style="margin-bottom: 1.5rem;">
+                    <label for="{{ form.parent.id_for_label }}" style="font-weight: 600; font-size: 0.85rem; color: var(--efintel-dark);">Partida (Categoría Padre)</label>
+                    <p style="font-size: 0.75rem; color: var(--text-secondary); margin-bottom: 0.25rem;">Dejar en blanco si esta es una Partida principal.</p>
+                    {{ form.parent }}
+                    {% if form.parent.errors %}
+                        <div style="color: var(--efintel-danger); font-size: 0.75rem; margin-top: 4px;">{{ form.parent.errors }}</div>
+                    {% endif %}
+                </div>
+
+                <div class="form-group" style="margin-bottom: 2rem;">
+                    <label for="{{ form.description.id_for_label }}" style="font-weight: 600; font-size: 0.85rem; color: var(--efintel-dark);">Descripción (Opcional)</label>
+                    {{ form.description }}
+                    {% if form.description.errors %}
+                        <div style="color: var(--efintel-danger); font-size: 0.75rem; margin-top: 4px;">{{ form.description.errors }}</div>
+                    {% endif %}
+                </div>
+
+                <div style="display: flex; gap: 1rem; padding-top: 1.5rem; border-top: 1px solid var(--efintel-light);">
+                    <button type="submit" class="btn-primary" style="padding: 0.6rem 2rem; font-size: 0.9rem;">Guardar Categoría</button>
+                    <a href="{% url 'gestion_panel' %}" class="btn-secondary" style="padding: 0.6rem 2rem; font-size: 0.9rem; text-decoration: none;">Cancelar</a>
+                </div>
+            </form>
+        </div>
+    </div>
+    
+    <script>
+        document.querySelectorAll('input, select, textarea').forEach(el => {
+            el.classList.add('form-control');
+        });
+    </script>
+{% endblock %}