208 lines
13 KiB
HTML
208 lines
13 KiB
HTML
{% extends 'base.html' %}
|
|
{% load humanize %}
|
|
|
|
{% block content %}
|
|
<section class="page-view active">
|
|
<!-- Header -->
|
|
<div class="view-header" style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem;">
|
|
<div>
|
|
<div style="display:flex; align-items:center; gap:0.5rem;">
|
|
<span class="badge badge-blue" style="font-family:var(--font-mono); font-size:0.8rem;">{{ project.code }}</span>
|
|
<h2 style="margin:0; color:var(--efintel-petroleum); font-size:1.5rem;">{{ project.name }}</h2>
|
|
<span class="badge {% if project.status == 'ACTIVO' %}badge-emerald{% elif project.status == 'PAUSADA' %}badge-amber{% elif project.status == 'BORRADOR' %}badge-gray{% else %}badge-blue{% endif %}">
|
|
{{ project.get_status_display }}
|
|
</span>
|
|
</div>
|
|
<p style="margin-top:0.25rem; font-size:0.9rem; color:var(--efintel-gray);">
|
|
Director de Proyecto: <strong>{{ project.manager.username|default:"Sin Director Asignado" }}</strong> |
|
|
Tipo: <strong>{{ project.get_type_display }}</strong> |
|
|
Categoría: <strong>{{ project.category.name|default:"General I+D+i" }}</strong>
|
|
</p>
|
|
</div>
|
|
<div style="display:flex; gap:0.5rem;">
|
|
<a href="{% url 'project_list' %}" class="btn-outline" style="text-decoration:none;">← Volver a Lista</a>
|
|
{% if is_admin or is_pm %}
|
|
<a href="{% url 'project_add_phase' project.id %}" class="btn-primary" style="text-decoration:none; background:#0284c7;">
|
|
<i data-lucide="plus-circle" style="width:14px;"></i> + Agregar Fase de Pago
|
|
</a>
|
|
<a href="{% url 'project_edit' project.id %}" class="btn-secondary" style="text-decoration:none;">
|
|
<i data-lucide="pencil" style="width:14px;"></i> Editar
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Requerimiento 9: Tarjetas KPI de Finanzas del Proyecto -->
|
|
<div style="display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; margin-bottom: 2rem;">
|
|
<div class="data-card" style="padding: 1.25rem;">
|
|
<div style="font-size:0.75rem; font-weight:600; color:var(--efintel-gray); margin-bottom:0.25rem;">PRESUPUESTO ASIGNADO</div>
|
|
<div style="font-size:1.3rem; font-weight:800; font-family:var(--font-mono); color:var(--efintel-petroleum);">
|
|
${{ project.assigned_budget_clp|floatformat:"0"|intcomma }} CLP
|
|
</div>
|
|
<div style="font-size:0.7rem; color:var(--efintel-gray); margin-top:0.25rem;">Presupuesto CLP</div>
|
|
</div>
|
|
|
|
<div class="data-card" style="padding: 1.25rem;">
|
|
<div style="font-size:0.75rem; font-weight:600; color:var(--efintel-gray); margin-bottom:0.25rem;">FORMA DE PAGO</div>
|
|
<div style="font-size:0.95rem; font-weight:700; color:var(--efintel-dark); line-height:1.2; margin-top:0.25rem;">
|
|
{{ project.payment_method }}
|
|
</div>
|
|
<div style="font-size:0.7rem; color:var(--efintel-gray); margin-top:0.25rem;">Condición Pactada</div>
|
|
</div>
|
|
|
|
<div class="data-card" style="padding: 1.25rem; border-left:4px solid #16a34a;">
|
|
<div style="font-size:0.75rem; font-weight:600; color:#16a34a; margin-bottom:0.25rem;">INGRESOS TOTALES</div>
|
|
<div style="font-size:1.3rem; font-weight:800; font-family:var(--font-mono); color:#16a34a;">
|
|
+${{ total_income|floatformat:"0"|intcomma }} CLP
|
|
</div>
|
|
<div style="font-size:0.7rem; color:var(--efintel-gray); margin-top:0.25rem;">Facturado / Cobrado</div>
|
|
</div>
|
|
|
|
<div class="data-card" style="padding: 1.25rem; border-left:4px solid #dc2626;">
|
|
<div style="font-size:0.75rem; font-weight:600; color:#dc2626; margin-bottom:0.25rem;">EGRESOS ACUMULADOS</div>
|
|
<div style="font-size:1.3rem; font-weight:800; font-family:var(--font-mono); color:#dc2626;">
|
|
-${{ total_expenses|floatformat:"0"|intcomma }} CLP
|
|
</div>
|
|
<div style="font-size:0.7rem; color:var(--efintel-gray); margin-top:0.25rem;">Erogaciones Liberadas</div>
|
|
</div>
|
|
|
|
<div class="data-card" style="padding: 1.25rem; border-left:4px solid {% if net_balance >= 0 %}#16a34a{% else %}#dc2626{% endif %}; background:{% if net_balance >= 0 %}#f0fdf4{% else %}#fef2f2{% endif %};">
|
|
<div style="font-size:0.75rem; font-weight:700; color:{% if net_balance >= 0 %}#15803d{% else %}#b91c1c{% endif %}; margin-bottom:0.25rem;">SALDO NETO (A FAVOR)</div>
|
|
<div style="font-size:1.3rem; font-weight:800; font-family:var(--font-mono); color:{% if net_balance >= 0 %}#15803d{% else %}#b91c1c{% endif %};">
|
|
{% if net_balance >= 0 %}+{% endif %}${{ net_balance|floatformat:"0"|intcomma }} CLP
|
|
</div>
|
|
<div style="font-size:0.7rem; color:{% if net_balance >= 0 %}#166534{% else %}#991b1b{% endif %}; margin-top:0.25rem;">
|
|
{% if net_balance >= 0 %}🟢 Saldo a Favor Positivo{% else %}🔴 Déficit / Cuenta en Rojo{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Requerimiento 10: Tabla de Pago de Fases con Saldo a Favor (+ / -) -->
|
|
<div class="data-card" style="margin-bottom: 2rem;">
|
|
<div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem; padding-bottom:0.75rem; border-bottom:1px solid #e2e8f0;">
|
|
<h3 style="margin:0; color:var(--efintel-petroleum); font-size:1.1rem; display:flex; align-items:center; gap:0.5rem;">
|
|
<i data-lucide="layers" style="color:var(--efintel-blue);"></i> Fases de Pago e Hitos del Proyecto
|
|
</h3>
|
|
{% if is_admin or is_pm %}
|
|
<a href="{% url 'project_add_phase' project.id %}" class="btn-primary" style="padding:0.35rem 0.8rem; font-size:0.8rem; text-decoration:none; background:#0284c7;">
|
|
+ Agregar Nueva Fase
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="data-table-wrapper">
|
|
<table class="data-table">
|
|
<thead>
|
|
<tr>
|
|
<th>N° Fase</th>
|
|
<th>Nombre del Hito</th>
|
|
<th>Fecha Pactada</th>
|
|
<th>Monto Pactado (CLP)</th>
|
|
<th>Ingresos (Cobrado)</th>
|
|
<th>Egresos (Gastado)</th>
|
|
<th>Saldo a Favor (Positivo / Negativo)</th>
|
|
<th>Estado</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for phase in phases %}
|
|
<tr>
|
|
<td style="font-weight:700; text-align:center;">Fase {{ phase.phase_number }}</td>
|
|
<td style="font-weight:600; color:var(--efintel-dark);">
|
|
{{ phase.name }}
|
|
{% if phase.description %}<br><span style="font-size:0.75rem; color:var(--efintel-gray); font-weight:normal;">{{ phase.description }}</span>{% endif %}
|
|
</td>
|
|
<td style="font-size:0.8rem;">{{ phase.due_date|date:"d/m/Y"|default:"Pendiente" }}</td>
|
|
<td style="font-family:var(--font-mono); font-weight:600;">${{ phase.planned_amount_clp|floatformat:"0"|intcomma }}</td>
|
|
<td style="font-family:var(--font-mono); color:#16a34a; font-weight:700;">+${{ phase.income_amount_clp|floatformat:"0"|intcomma }}</td>
|
|
<td style="font-family:var(--font-mono); color:#dc2626; font-weight:700;">-${{ phase.expense_amount_clp|floatformat:"0"|intcomma }}</td>
|
|
<!-- Requerimiento 10: Reflejar saldo a favor (números negativos y positivos) -->
|
|
<td>
|
|
<span style="font-family:var(--font-mono); font-weight:800; padding:0.25rem 0.6rem; border-radius:4px; font-size:0.85rem; {% if phase.balance_clp >= 0 %}background:#dcfce7; color:#15803d;{% else %}background:#fee2e2; color:#b91c1c;{% endif %}">
|
|
{% if phase.balance_clp >= 0 %}+{% endif %}${{ phase.balance_clp|floatformat:"0"|intcomma }} CLP
|
|
</span>
|
|
</td>
|
|
<td>
|
|
{% if phase.is_completed %}
|
|
<span class="badge badge-emerald"><i data-lucide="check" style="width:12px;"></i> Completada</span>
|
|
{% else %}
|
|
<span class="badge badge-amber"><i data-lucide="clock" style="width:12px;"></i> En Proceso</span>
|
|
{% endif %}
|
|
</td>
|
|
</tr>
|
|
{% empty %}
|
|
<tr>
|
|
<td colspan="8" style="text-align:center; padding:2rem; color:var(--efintel-gray);">
|
|
No se han definido fases de pago para este proyecto.
|
|
{% if is_admin or is_pm %}<a href="{% url 'project_add_phase' project.id %}">Haga clic aquí para agregar la primera fase.</a>{% endif %}
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tabla de Erogaciones Asociadas al Proyecto -->
|
|
<div class="data-card">
|
|
<h3 style="margin:0 0 1rem 0; color:var(--efintel-petroleum); font-size:1.1rem; display:flex; align-items:center; gap:0.5rem;">
|
|
<i data-lucide="file-text" style="color:var(--efintel-blue);"></i> Erogaciones Imputadas a este Proyecto ({{ expenses.count }})
|
|
</h3>
|
|
<div class="data-table-wrapper">
|
|
<table class="data-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Código</th>
|
|
<th>Fecha</th>
|
|
<th>Categoría</th>
|
|
<th>Detalle</th>
|
|
<th>Responsable</th>
|
|
<th>Monto Neto (CLP)</th>
|
|
<th>Monto Total (CLP)</th>
|
|
<th>Estado Pago</th>
|
|
<th>Evidencias</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for exp in expenses %}
|
|
<tr>
|
|
<td style="font-family:var(--font-mono); font-size:0.75rem;">{{ exp.expense_code|truncatechars:12 }}</td>
|
|
<td style="font-size:0.8rem;">{{ exp.date|date:"d/m/Y" }}</td>
|
|
<td><span class="badge badge-blue" style="font-size:0.7rem;">{{ exp.category.name|default:"General" }}</span></td>
|
|
<td style="font-weight:600; font-size:0.85rem;">{{ exp.description|truncatechars:40 }}</td>
|
|
<td style="font-size:0.8rem;">{{ exp.responsible_person.username|default:exp.user.username }}</td>
|
|
<td style="font-family:var(--font-mono); font-weight:600;">${{ exp.amount_clp|floatformat:"0"|intcomma }}</td>
|
|
<td style="font-family:var(--font-mono); font-weight:700;">${{ exp.total_amount_clp|floatformat:"0"|intcomma }}</td>
|
|
<td>
|
|
{% if exp.approval_status == 'LIBERADO_PAGADO' %}
|
|
<span class="badge badge-emerald">Pagado</span>
|
|
{% elif exp.approval_status == 'SOLICITADO_FINANZAS' %}
|
|
<span class="badge badge-blue">Finanzas</span>
|
|
{% else %}
|
|
<span class="badge badge-amber">Revisión</span>
|
|
{% endif %}
|
|
</td>
|
|
<td>
|
|
{% if exp.documents.all %}
|
|
{% for doc in exp.documents.all %}
|
|
<button type="button" onclick="previewDocument('{{ doc.file.url }}', '{{ doc.title|escapejs }}', {% if doc.is_pdf %}true{% else %}false{% endif %})" class="btn-outline" style="padding:0.2rem 0.4rem; font-size:0.65rem;" title="Previsualizar Evidencia">
|
|
<i data-lucide="eye" style="width:10px;"></i> Ver
|
|
</button>
|
|
{% endfor %}
|
|
{% else %}
|
|
<span style="font-size:0.75rem; color:var(--efintel-gray);">Sin adjunto</span>
|
|
{% endif %}
|
|
</td>
|
|
</tr>
|
|
{% empty %}
|
|
<tr>
|
|
<td colspan="9" style="text-align:center; padding:2rem; color:var(--efintel-gray);">No hay erogaciones registradas para este proyecto.</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{% endblock %}
|