334 lines
19 KiB
HTML
334 lines
19 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 text-primary">
|
|
<h6 class="text-uppercase text-primary 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' %}: {{ bill.get_amount_open | currency_format }}<span class="icon-saudi_riyal"></span>
|
|
</p>
|
|
<p class="text-success mb-1">
|
|
{% trans 'Amount Paid' %}: {{ bill.amount_paid | currency_format }}<span class="icon-saudi_riyal"></span>
|
|
</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-start">
|
|
<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>
|
|
{% if perms.django_ledger.change_billmodel %}
|
|
<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 %}
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% elif style == 'bill-detail' %}
|
|
<!-- Detail Style Card -->
|
|
<div class="">
|
|
<div class="card-header p-2 bg-{{ bill.get_status_badge_color }}">
|
|
<div class="d-flex align-items-center justify-content-center mb-2 text-primary">
|
|
<i class="fas fa-file-invoice me-3 "></i>
|
|
<h4 class="mb-0 text-primary me-2">{% trans 'Bill' %} {{ bill.bill_number }}</h4>
|
|
</div>
|
|
<a href="{% url 'bill_list' request.dealer.slug %}"
|
|
class="btn btn-phoenix-primary mb-2">
|
|
<i class="fas fa-long-arrow-alt-left me-2"></i>{% trans 'Back to Bill List' %}
|
|
</a>
|
|
</div>
|
|
<div class="card-body p-2 text-center">
|
|
{% if bill.is_draft %}
|
|
<h3 class="text-warning fw-bold mb-4">{% trans 'This bill is' %} {{ bill.get_bill_status_display }}</h3>
|
|
<p class="mb-2">
|
|
<span class="fw-bold">{% trans 'Vendor Name' %}:</span>
|
|
{{ bill.vendor.vendor_name }}
|
|
</p>
|
|
<div class="border-bottom pb-2 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>
|
|
<p class="mb-2">
|
|
<span class="fw-bold">{% trans 'Vendor Name' %}:</span>
|
|
{{ bill.vendor.vendor_name }}
|
|
</p>
|
|
<div class="border-bottom pb-2 mb-4">
|
|
<p class="mb-2">
|
|
<span class="fw-bold">{% trans 'Amount Due' %}:</span>
|
|
{{ bill.amount_due | currency_format }}<span class="icon-saudi_riyal"></span>
|
|
</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>
|
|
<p class="mb-2">
|
|
<span class="fw-bold">{% trans 'Vendor Name' %}:</span>
|
|
{{ bill.vendor.vendor_name }}
|
|
</p>
|
|
<div class="border-bottom pb-2 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>
|
|
<p class="mb-2">
|
|
<span class="fw-bold">{% trans 'Vendor Name' %}:</span>
|
|
{{ bill.vendor.vendor_name }}
|
|
</p>
|
|
<div class="border-bottom pb-2 mb-4">
|
|
<p class="mb-2">
|
|
<span class="fw-bold">{% trans 'Amount Paid' %}:</span>
|
|
{{ bill.amount_paid | currency_format }}<span class="icon-saudi_riyal"></span>
|
|
</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-2 mb-4">
|
|
<p class="mb-2">
|
|
<span class="fw-bold">{% trans 'Bill Amount' %}:</span>
|
|
{{ bill.amount_due | currency_format }}<span class="icon-saudi_riyal"></span>
|
|
</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 justify-content-end">
|
|
<!-- Update Button -->
|
|
{% if perms.django_ledger.change_billmodel %}
|
|
{% if "update" not in request.path %}
|
|
<a
|
|
href="{% url 'bill-update' dealer_slug=dealer_slug entity_slug=entity_slug bill_pk=bill.uuid %}">
|
|
<button class="btn btn-phoenix-primary">
|
|
<i class="fas fa-edit me-2"></i>{% trans 'Update' %}
|
|
</button>
|
|
</a>
|
|
{% endif %}
|
|
{% if "detail" not in request.path %}
|
|
<!-- Mark as Draft -->
|
|
{% if bill.can_draft %}
|
|
<button class="btn btn-phoenix-success"
|
|
onclick="showPOModal('Mark as Draft', '{% url 'bill-action-mark-as-draft' dealer_slug=request.dealer.slug 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' dealer_slug=request.dealer.slug 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 -->
|
|
{% endif %}
|
|
{% if bill.can_approve and request.is_accountant %}
|
|
<button class="btn btn-phoenix-warning" disabled>
|
|
<i class="fas fa-hourglass-start me-2"></i><span class="text-warning">{% trans 'Waiting for Manager Approval' %}</span>
|
|
</button>
|
|
{% else %}
|
|
{% if bill.can_approve and perms.django_ledger.can_approve_billmodel %}
|
|
<button class="btn btn-phoenix-success"
|
|
onclick="showPOModal('Mark as Approved', '{% url 'bill-action-mark-as-approved' dealer_slug=request.dealer.slug 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 %}
|
|
{% 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' dealer_slug=request.dealer.slug 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' dealer_slug=request.dealer.slug 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' dealer_slug=request.dealer.slug 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 %}
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
{% else %}
|
|
<!-- Create Bill Card -->
|
|
{% if perms.django_ledger.add_billmodel %}
|
|
<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 %}
|
|
{% 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',processElements);
|
|
//document.addEventListener('htmx:afterSwap',processElements);
|
|
|
|
function processElements() {
|
|
let bill_status = "{{bill.bill_status}}";
|
|
if(bill_status == 'draft'){
|
|
const formDiv = document.getElementById('bill-update-form');
|
|
if (formDiv) {
|
|
setTimeout(()=>{
|
|
formDiv.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
|
},500)
|
|
}
|
|
}
|
|
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;
|
|
|
|
const modalBody = document.getElementById('POModalBody')
|
|
modalBody.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>
|
|
`;
|
|
//htmx.process(modalBody);
|
|
modal.show();
|
|
};
|
|
};
|
|
</script>
|