71 lines
3.9 KiB
HTML
71 lines
3.9 KiB
HTML
{% extends 'base.html' %}
|
|
{% load static %}
|
|
{% load humanize %}
|
|
|
|
{% block content %}
|
|
<section class="page-view active">
|
|
<div class="view-header" style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem;">
|
|
<div class="view-title">
|
|
<h2 style="margin:0; color:var(--efintel-petroleum); display:flex; align-items:center; gap:0.5rem;"><i data-lucide="truck" style="color:var(--efintel-blue);"></i> Control de Erogaciones (Flujo Operativo)</h2>
|
|
<p style="margin-top:0.25rem; font-size:0.9rem; color:var(--efintel-gray);">Bandeja de gestión y aprobación de costos y gastos registrados.</p>
|
|
</div>
|
|
<div>
|
|
<a href="{% url 'expense_create' %}" class="btn-primary" style="text-decoration: none;">
|
|
<i data-lucide="plus-circle" style="width:16px;"></i> Registrar Nuevo
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="data-card" style="margin-bottom: 2rem;">
|
|
<form method="get" id="filter-form" style="display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap;">
|
|
<div class="form-group" style="margin-bottom: 0; flex: 1; min-width: 200px;">
|
|
<label for="project" style="font-size: 0.8rem; font-weight: 600;">Centro de Costo</label>
|
|
<select name="project" id="project" style="width: 100%; padding: 0.65rem; border: 1px solid var(--efintel-border); border-radius: 4px; outline: none; font-family: 'Inter';" onchange="document.getElementById('filter-form').submit();">
|
|
<option value="">Todos los Centros</option>
|
|
{% for p in projects %}
|
|
<option value="{{ p.id }}" {% if request.GET.project == p.id|stringformat:"s" %}selected{% endif %}>{{ p.code }} - {{ p.name }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
<div class="form-group" style="margin-bottom: 0; flex: 1; min-width: 200px;">
|
|
<label for="category" style="font-size: 0.8rem; font-weight: 600;">Categoría</label>
|
|
<select name="category" id="category" style="width: 100%; padding: 0.65rem; border: 1px solid var(--efintel-border); border-radius: 4px; outline: none; font-family: 'Inter';" onchange="document.getElementById('filter-form').submit();">
|
|
<option value="">Todas las Categorías</option>
|
|
{% for c in categories %}
|
|
<option value="{{ c.id }}" {% if request.GET.category == c.id|stringformat:"s" %}selected{% endif %}>{{ c.name }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
<button type="submit" class="btn-outline" style="height: 42px;"><i data-lucide="filter" style="width:16px;"></i> Filtrar</button>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="data-card">
|
|
<div class="data-table-wrapper" hx-ext="ws" ws-connect="/ws/expenses/">
|
|
<table class="data-table">
|
|
<thead>
|
|
<tr>
|
|
<th>ID Transacción</th>
|
|
<th>Fecha</th>
|
|
<th>Centro / Proyecto</th>
|
|
<th>Detalle Imputación</th>
|
|
<th>Monto Neto ($ CLP / USD)</th>
|
|
<th>Estado de Aprobación</th>
|
|
<th>Acciones</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="expenses-tbody">
|
|
{% for expense in expenses %}
|
|
{% include 'expenses/partials/expense_row.html' with expense=expense %}
|
|
{% empty %}
|
|
<tr>
|
|
<td colspan="7" style="text-align: center; padding: 2rem; color: var(--efintel-gray);">No hay gastos registrados para este filtro.</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{% endblock %}
|