100 lines
3.6 KiB
HTML
100 lines
3.6 KiB
HTML
{% extends 'base.html' %}
|
|
{% load trans from i18n %}
|
|
{% load static %}
|
|
{% load custom_filters %}
|
|
{% load django_ledger %}
|
|
|
|
{% block content %}
|
|
<div class="container-fluid mt-4">
|
|
<div class="row g-4">
|
|
<!-- Left Sidebar -->
|
|
<div class="col-lg-4">
|
|
<div class="d-flex flex-column gap-3">
|
|
<!-- PO Card -->
|
|
<div class="card">
|
|
<div class="card-body">
|
|
{% include 'purchase_orders/includes/card_po.html' with po_model=po_model entity_slug=entity_slug style='po-detail' %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- PO List Button -->
|
|
<a class="btn btn-outline-primary w-100 py-2"
|
|
href="{% url 'purchase_order_list' %}">
|
|
<i class="fas fa-list me-2"></i>{% trans 'PO List' %}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Content -->
|
|
<div class="col-lg-8">
|
|
<!-- Stats Cards -->
|
|
<div class="card mb-4">
|
|
<div class="card-body">
|
|
<div class="row text-center">
|
|
<div class="col-md-6 border-end">
|
|
<div class="p-3">
|
|
<h6 class="text-muted mb-2">{% trans 'PO Amount' %}</h6>
|
|
<h3 class="fw-light mb-0">
|
|
{% currency_symbol %}{{ po_model.po_amount | absolute | currency_format }}
|
|
</h3>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="p-3">
|
|
<h6 class="text-muted mb-2">{% trans 'Amount Received' %}</h6>
|
|
<h3 class="fw-light mb-0 text-success">
|
|
{% currency_symbol %}{{ po_model.po_amount_received | currency_format }}
|
|
</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- PO Details -->
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h3 class="h4 fw-light mb-4">{{ po_model.po_title }}</h3>
|
|
|
|
<!-- PO Items Table -->
|
|
<div class="table-responsive">
|
|
{% po_item_table1 po_items %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% include "purchase_orders/includes/mark_as.html" %}
|
|
{% endblock %}
|
|
|
|
{% block customJS %}
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
window.showPOModal = function(title, actionUrl, buttonText) {
|
|
const modalEl = document.getElementById('POModal');
|
|
if (!modalEl) {
|
|
console.error('Modal element not found');
|
|
return;
|
|
}
|
|
|
|
const modal = bootstrap.Modal.getOrCreateInstance(modalEl);
|
|
document.getElementById('POModalTitle').textContent = title;
|
|
|
|
document.getElementById('POModalBody').innerHTML = `
|
|
<div class="d-flex justify-content-center gap-3">
|
|
<a class="btn btn-primary px-4" href="${actionUrl}">
|
|
<i class="fas fa-check-circle me-2"></i>${buttonText}
|
|
</a>
|
|
<button class="btn btn-outline-secondary" data-bs-dismiss="modal">
|
|
<i class="fas fa-times me-2"></i>Cancel
|
|
</button>
|
|
</div>
|
|
`;
|
|
|
|
modal.show();
|
|
};
|
|
});
|
|
</script>
|
|
{% endblock customJS %} |