306 lines
16 KiB
HTML
306 lines
16 KiB
HTML
{% load django_ledger %}
|
|
{% load i18n %}
|
|
<div id="djl-bill-card-widget" class="">
|
|
{% if not create_bill %}
|
|
{% if style == 'dashboard' %}
|
|
<!-- Dashboard Style Card -->
|
|
<div class="">
|
|
<div class="card-body ">
|
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
|
<h6 class="text-uppercase text-secondary mb-0">
|
|
<i class="fas fa-file-invoice me-2"></i>{% trans 'Bill' %}
|
|
</h6>
|
|
<span class="badge bg-{{ bill.get_status_badge_color }}">{{ bill.get_bill_status_display }}</span>
|
|
</div>
|
|
<h4 class="card-title">{{ bill.vendor.vendor_name }}</h4>
|
|
<p class="text-sm text-muted mb-4">{{ bill.vendor.address_1 }}</p>
|
|
|
|
{% if not bill.is_past_due %}
|
|
<p class="text-info mb-2">
|
|
<i class="fas fa-clock me-2"></i>{% trans 'Due in' %}: {{ bill.date_due | timeuntil }}
|
|
</p>
|
|
{% else %}
|
|
<p class="text-danger fw-bold mb-2">
|
|
<i class="fas fa-exclamation-triangle me-2"></i>{% trans 'Past Due' %}: {{ bill.date_due | timesince }} {% trans 'ago' %}
|
|
</p>
|
|
{% endif %}
|
|
|
|
<div class="d-flex align-items-center mb-3">
|
|
<span class="me-2">{% trans 'Accrued' %}:</span>
|
|
{% if bill.accrue %}
|
|
<i class="fas fa-check-circle text-success me-2"></i>
|
|
{% else %}
|
|
<i class="fas fa-times-circle text-danger me-2"></i>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<p class="text-danger fw-bold mb-1">
|
|
{% trans 'Amount Due' %}: {% currency_symbol %}{{ bill.get_amount_open | currency_format }}
|
|
</p>
|
|
<p class="text-success mb-1">
|
|
{% trans 'Amount Paid' %}: {% currency_symbol %}{{ bill.amount_paid | currency_format }}
|
|
</p>
|
|
<p class="mb-1">
|
|
{% trans 'Progress' %}: {{ bill.get_progress | percentage }}
|
|
</p>
|
|
<div class="progress mt-2">
|
|
<div class="progress-bar bg-success"
|
|
role="progressbar"
|
|
style="width: {{ bill.get_progress_percent }}%"
|
|
aria-valuenow="{{ bill.get_progress_percent }}"
|
|
aria-valuemin="0"
|
|
aria-valuemax="100">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal Action -->
|
|
{% modal_action bill 'get' entity_slug %}
|
|
<div class="d-grid gap-2 d-md-flex justify-content-md-end">
|
|
|
|
<a href="{% url 'django_ledger:bill-detail' entity_slug=entity_slug bill_pk=bill.uuid %}"
|
|
class="btn btn-sm btn-phoenix-primary me-md-2">
|
|
{% trans 'View' %}
|
|
</a>
|
|
<a href="{% url 'django_ledger:bill-update' entity_slug=entity_slug bill_pk=bill.uuid %}"
|
|
class="btn btn-sm btn-phoenix-warning me-md-2">
|
|
{% trans 'Update' %}
|
|
</a>
|
|
{% if bill.can_pay %}
|
|
|
|
<button onclick="djLedger.toggleModal('{{ bill.get_html_id }}')"
|
|
class="btn btn-sm btn-phoenix-info">
|
|
{% trans 'Mark as Paid' %}
|
|
</button>
|
|
{% endif %}
|
|
{% if bill.can_cancel %}
|
|
<button onclick="djLedger.toggleModal('{{ bill.get_html_id }}')"
|
|
class="btn btn-sm btn-phoenix-danger">
|
|
{% trans 'Cancel' %}
|
|
</button>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% elif style == 'bill-detail' %}
|
|
<!-- Detail Style Card -->
|
|
<div class="">
|
|
<div class="card-header p-4 bg-{{ bill.get_status_badge_color }}">
|
|
<div class="d-flex align-items-center">
|
|
<i class="fas fa-file-invoice me-3 text-white"></i>
|
|
<h2 class="mb-0 text-white">
|
|
{% trans 'Bill' %} {{ bill.bill_number }}
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
<div class="card-body p-4 text-center">
|
|
{% if bill.is_draft %}
|
|
<h3 class="text-warning fw-bold mb-4">{% trans 'This bill is' %} {{ bill.get_bill_status_display }}</h3>
|
|
<div class="border-bottom pb-4 mb-4">
|
|
<p class="mb-2">
|
|
<span class="fw-bold">{% trans 'Amount Due' %}:</span>
|
|
{% currency_symbol %}{{ bill.amount_due | currency_format }}
|
|
</p>
|
|
<p class="mb-2">
|
|
<span class="fw-bold">{% trans 'Due Date' %}:</span>
|
|
{{ bill.date_due | timeuntil }}
|
|
</p>
|
|
<p class="mb-0">
|
|
<span class="fw-bold">{% trans 'Is Accrued' %}:</span>
|
|
{% if bill.accrue %}
|
|
<i class="fas fa-check-circle text-success ms-2"></i>
|
|
{% else %}
|
|
<i class="fas fa-times-circle text-danger ms-2"></i>
|
|
{% endif %}
|
|
</p>
|
|
</div>
|
|
{% elif bill.is_review %}
|
|
<h3 class="text-warning fw-bold mb-4">{% trans 'This bill is' %} {{ bill.get_bill_status_display }}</h3>
|
|
<div class="border-bottom pb-4 mb-4">
|
|
<p class="mb-2">
|
|
<span class="fw-bold">{% trans 'Amount Due' %}:</span>
|
|
{% currency_symbol %}{{ bill.amount_due | currency_format }}
|
|
</p>
|
|
<p class="mb-2">
|
|
<span class="fw-bold">{% trans 'Due Date' %}:</span>
|
|
{{ bill.date_due | timeuntil }}
|
|
</p>
|
|
<p class="mb-0">
|
|
<span class="fw-bold">{% trans 'Is Accrued' %}:</span>
|
|
{% if bill.accrue %}
|
|
<i class="fas fa-check-circle text-success ms-2"></i>
|
|
{% else %}
|
|
<i class="fas fa-times-circle text-danger ms-2"></i>
|
|
{% endif %}
|
|
</p>
|
|
</div>
|
|
{% if bill.xref %}
|
|
<p class="text-muted fst-italic">{% trans 'External Ref' %}: {{ bill.xref }}</p>
|
|
{% endif %}
|
|
{% elif bill.is_approved %}
|
|
<h3 class="text-info fw-bold mb-4">{% trans 'This bill is' %} {{ bill.get_bill_status_display }}</h3>
|
|
<div class="border-bottom pb-4 mb-4">
|
|
<p class="mb-2">
|
|
<span class="fw-bold">{% trans 'Amount Due' %}:</span>
|
|
{% currency_symbol %}{{ bill.amount_due | currency_format }}
|
|
</p>
|
|
<p class="mb-2">
|
|
<span class="fw-bold">{% trans 'Due Date' %}:</span>
|
|
{{ bill.date_due | timeuntil }}
|
|
</p>
|
|
<p class="mb-2">
|
|
<span class="fw-bold">{% trans 'Amount Paid' %}:</span>
|
|
{% currency_symbol %}{{ bill.amount_paid | currency_format }}
|
|
</p>
|
|
<p class="mb-2">
|
|
<span class="fw-bold">{% trans 'Progress' %}:</span>
|
|
{{ bill.get_progress | percentage }}
|
|
</p>
|
|
<div class="progress mt-3">
|
|
<div class="progress-bar bg-success"
|
|
role="progressbar"
|
|
style="width: {{ bill.get_progress_percent }}%"
|
|
aria-valuenow="{{ bill.get_progress_percent }}"
|
|
aria-valuemin="0"
|
|
aria-valuemax="100">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% if bill.xref %}
|
|
<p class="text-muted fst-italic">{% trans 'External Ref' %}: {{ bill.xref }}</p>
|
|
{% endif %}
|
|
{% elif bill.is_paid %}
|
|
<h3 class="text-success fw-bold mb-4">{% trans 'This bill is' %} {{ bill.get_bill_status_display }}</h3>
|
|
<div class="border-bottom pb-4 mb-4">
|
|
<p class="mb-2">
|
|
<span class="fw-bold">{% trans 'Amount Paid' %}:</span>
|
|
{% currency_symbol %}{{ bill.amount_paid | currency_format }}
|
|
</p>
|
|
<p class="mb-0">
|
|
<span class="fw-bold">{% trans 'Paid Date' %}:</span>
|
|
{{ bill.date_paid | date }}
|
|
</p>
|
|
</div>
|
|
{% if bill.xref %}
|
|
<p class="text-muted fst-italic">{% trans 'External Ref' %}: {{ bill.xref }}</p>
|
|
{% endif %}
|
|
{% else %}
|
|
<div class="border-bottom pb-4 mb-4">
|
|
<p class="mb-2">
|
|
<span class="fw-bold">{% trans 'Bill Amount' %}:</span>
|
|
{% currency_symbol %}{{ bill.amount_due | currency_format }}
|
|
</p>
|
|
<p class="text-danger fw-bold">
|
|
{{ bill.get_bill_status_display | upper }}
|
|
</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="card-footer p-0">
|
|
<div class="d-flex flex-wrap gap-2 mt-2">
|
|
<!-- Update Button -->
|
|
<a href="{% url 'bill-update' entity_slug=entity_slug bill_pk=bill.uuid %}" class="btn btn-phoenix-primary">
|
|
<i class="fas fa-edit me-2"></i>{% trans 'Update' %}
|
|
</a>
|
|
<!-- Mark as Draft -->
|
|
{% if bill.can_draft %}
|
|
<button class="btn btn-phoenix-success"
|
|
onclick="showPOModal('Mark as Draft', '{% url 'bill-action-mark-as-draft' entity_slug=entity_slug bill_pk=bill.pk %}', 'Mark as Draft')">
|
|
<i class="fas fa-check-circle me-2"></i>{% trans 'Mark as Draft' %}
|
|
</button>
|
|
{% endif %}
|
|
<!-- Mark as Review -->
|
|
{% if bill.can_review %}
|
|
<button class="btn btn-phoenix-warning"
|
|
onclick="showPOModal('Mark as Review', '{% url 'bill-action-mark-as-review' entity_slug=entity_slug bill_pk=bill.pk %}', 'Mark as Review')">
|
|
<i class="fas fa-check-circle me-2"></i>{% trans 'Mark as Review' %}
|
|
</button>
|
|
{% endif %}
|
|
<!-- Mark as Approved -->
|
|
{% if bill.can_approve %}
|
|
<button class="btn btn-phoenix-success"
|
|
onclick="showPOModal('Mark as Approved', '{% url 'bill-action-mark-as-approved' entity_slug=entity_slug bill_pk=bill.pk %}', 'Mark as Approved')">
|
|
<i class="fas fa-check-circle me-2"></i>{% trans 'Mark as Approved' %}
|
|
</button>
|
|
{% endif %}
|
|
<!-- Mark as Paid -->
|
|
{% if bill.can_pay %}
|
|
<button class="btn btn-phoenix-success"
|
|
onclick="showPOModal('Mark as Paid', '{% url 'bill-action-mark-as-paid' entity_slug=entity_slug bill_pk=bill.pk %}', 'Mark as Paid')">
|
|
<i class="fas fa-check-circle me-2"></i>{% trans 'Mark as Paid' %}
|
|
</button>
|
|
{% endif %}
|
|
<!-- Void Button -->
|
|
{% if bill.can_void %}
|
|
<button class="btn btn-phoenix-danger"
|
|
onclick="showPOModal('Mark as Void', '{% url 'bill-action-mark-as-void' entity_slug=entity_slug bill_pk=bill.pk %}', 'Mark as Void')">
|
|
<i class="fas fa-check-circle me-2"></i>{% trans 'Mark as Void' %}
|
|
</button>
|
|
{% endif %}
|
|
<!-- Cancel Button -->
|
|
{% if bill.can_cancel %}
|
|
<button class="btn btn-phoenix-danger"
|
|
onclick="showPOModal('Mark as Canceled', '{% url 'bill-action-mark-as-canceled' entity_slug=entity_slug bill_pk=bill.pk %}', 'Mark as Canceled')">
|
|
<i class="fas fa-check-circle me-2"></i>{% trans 'Mark as Canceled' %}
|
|
</button>
|
|
{% modal_action_v2 bill bill.get_mark_as_canceled_url bill.get_mark_as_canceled_message bill.get_mark_as_canceled_html_id %}
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% endif %}
|
|
{% else %}
|
|
<!-- Create Bill Card -->
|
|
<div class=" bg-light">
|
|
<div class="card-body text-center p-5">
|
|
<a href="{% url 'django_ledger:bill-create' entity_slug=entity_slug %}"
|
|
class="text-primary">
|
|
<i class="fas fa-plus-circle fa-4x mb-3"></i>
|
|
<h3 class="h4">{% trans 'New Bill' %}</h3>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<style>
|
|
.card-footer .btn-link {
|
|
padding: 1rem;
|
|
text-decoration: none;
|
|
transition: all 0.2s ease;
|
|
}
|
|
.card-footer .btn-link:hover {
|
|
background-color: rgba(0,0,0,0.03);
|
|
}
|
|
</style>
|
|
|
|
<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 py-3">
|
|
<a class="btn btn-phoenix-primary px-4" href="${actionUrl}">
|
|
<i class="fas fa-check-circle me-2"></i>${buttonText}
|
|
</a>
|
|
<button class="btn btn-phoenix-secondary" data-bs-dismiss="modal">
|
|
<i class="fas fa-times me-2"></i>Cancel
|
|
</button>
|
|
</div>
|
|
`;
|
|
|
|
modal.show();
|
|
};
|
|
});
|
|
</script> |