330 lines
22 KiB
HTML
330 lines
22 KiB
HTML
{% extends "base.html" %}
|
|
{% load i18n static crispy_forms_filters custom_filters %}
|
|
{% block title %}
|
|
{{ _("View Customer") }}
|
|
{% endblock title %}
|
|
{% block content %}
|
|
{% include 'modal/delete_modal.html' %}
|
|
<div class="row">
|
|
<div class="mb-9">
|
|
<div class="row align-items-center justify-content-between g-3 mb-4">
|
|
<div class="col-auto">
|
|
<h3 class="mb-0">{% trans 'Customer details' %}</h3>
|
|
</div>
|
|
<div class="col-auto">
|
|
<div class="row g-3">
|
|
<div class="col-auto">
|
|
{% if perms.inventory.change_customer %}
|
|
<a href="{% url 'customer_update' request.dealer.slug customer.slug %}"
|
|
class="btn btn-sm btn-phoenix-primary"><span class="fa-solid fa-pen-to-square me-2"></span>{{ _("Update") }}</a>
|
|
{% endif %}
|
|
</div>
|
|
{% if perms.inventory.delete_customer %}
|
|
<div class="col-auto">
|
|
<button class="btn btn-phoenix-danger btn-sm delete-btn"
|
|
data-url="{% url 'customer_delete' request.dealer.slug customer.slug %}"
|
|
data-message="Are you sure you want to delete this customer?"
|
|
data-bs-toggle="modal"
|
|
data-bs-target="#deleteModal">
|
|
<i class="fas fa-trash me-1"> </i>{{ _("Delete") }}
|
|
</button>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row g-5">
|
|
<div class="col-12 col-xxl-4">
|
|
<div class="row g-3 h-100">
|
|
<div class="col-12 col-md-7 col-xxl-12">
|
|
<div class="card h-100 h-xxl-auto">
|
|
<div class="card-body d-flex flex-column justify-content-between pb-3">
|
|
<div class="row align-items-center g-5 mb-3 text-center text-sm-start">
|
|
<div class="col-12 col-sm-auto mb-sm-2">
|
|
<div class="avatar avatar-5xl">
|
|
{% if customer.image %}<img class="rounded-circle" src="{{ customer.image.url }}" alt="" />{% endif %}
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-sm-auto flex-1">
|
|
<h3>{{ customer.full_name }}</h3>
|
|
<p class="text-body-secondary">{{ customer.created|timesince }}</p>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex justify-content-between border-top border-dashed pt-4">
|
|
<div>
|
|
<h6>{% trans 'Invoices' %}</h6>
|
|
<p class="fs-7 text-body-secondary mb-0">{{ invoices.count }}</p>
|
|
</div>
|
|
<div>
|
|
<h6>{% trans 'Quotations' %}</h6>
|
|
<p class="fs-7 text-body-secondary mb-0">{{ estimates.count }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-md-5 col-xxl-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="d-flex align-items-center mb-3">
|
|
<h3 class="me-1">{% trans 'Default Address' %}</h3>
|
|
<button class="btn btn-link p-0">
|
|
<span class="fas fa-pen fs-8 ms-3 text-body-quaternary"></span>
|
|
</button>
|
|
</div>
|
|
<h5 class="text-body-secondary">{{ _("Address") }}</h5>
|
|
<p class="text-body-secondary">{{ customer.address }}</p>
|
|
<div class="mb-3">
|
|
<h5 class="text-body-secondary">{% trans 'Email' %}</h5>
|
|
<a href="{{ customer.email }}">{{ customer.email }}</a>
|
|
</div>
|
|
<h5 class="text-body-secondary">{% trans 'Phone Number' %}</h5>
|
|
<a class="text-body-secondary" href="#">{{ customer.phone_number }}</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
{% if perms.inventory.change_customer %}
|
|
<div class="d-flex align-items-center justify-content-end">
|
|
{% if perms.inventory.change_lead %}
|
|
<button class="btn btn-phoenix-primary btn-sm"
|
|
type="button"
|
|
onclick=""
|
|
data-bs-toggle="modal"
|
|
data-bs-target="#noteModal">
|
|
<span class="fas fa-plus me-1"></span>{{ _("Add Note") }}
|
|
</button>
|
|
{% endif %}
|
|
</div>
|
|
{% endif %}
|
|
<table class="table fs-9 mb-0 table-responsive">
|
|
<tr>
|
|
<th class="align-middle pe-6 text-start" scope="col">{{ _("Note") }}</th>
|
|
<th class="align-middle pe-6 text-start" scope="col">{{ _("Date") }}</th>
|
|
</tr>
|
|
<tbody id="notesTable">
|
|
{% for note in notes %}
|
|
<tr class="hover-actions-trigger btn-reveal-trigger position-static">
|
|
<td class="align-middle text-start fw-bold text-body-tertiary ps-1">{{ note.note }}</td>
|
|
<td class="align-middle text-body-tertiary text-start white-space-nowrap">{{ note.created }}</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-xxl-8">
|
|
<div class="mb-6">
|
|
<h3 class="mb-4">
|
|
{{ _("Related") }} <span class="text-body-tertiary fw-normal">({{ total }})</span>
|
|
</h3>
|
|
<div class="border-top border-bottom border-translucent"
|
|
id="customerOrdersTable"
|
|
data-list='{"valueNames":["order","total","payment_status","fulfilment_status","delivery_type","date"],"page":6,"pagination":true}'>
|
|
<div class="table-responsive scrollbar">
|
|
<table class="table table-sm fs-9 mb-0">
|
|
<thead>
|
|
<tr>
|
|
<th class="sort white-space-nowrap align-middle ps-0 pe-3"
|
|
scope="col"
|
|
data-sort="order">{% trans 'Type'|upper %}</th>
|
|
<th class="sort align-middle text-end pe-7" scope="col" data-sort="total">{% trans 'Total'|upper %}</th>
|
|
<th class="sort align-middle white-space-nowrap pe-3"
|
|
scope="col"
|
|
data-sort="payment_status">{% trans 'Payment Status'|upper %}</th>
|
|
<th class="sort align-middle text-end pe-0" scope="col" data-sort="date">{% trans 'Date'|upper %}</th>
|
|
<th class="sort text-end align-middle pe-0 ps-5" scope="col"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="list" id="customer-order-table-body">
|
|
{% for estimate in estimates %}
|
|
<tr class="hover-actions-trigger btn-reveal-trigger position-static">
|
|
<td class="order align-middle white-space-nowrap ps-0">
|
|
<p class="fw-semibold mb-0">
|
|
{{ _("Quotation") }}-<span class="fs-10 fw-medium">{{ estimate.estimate_number }}</span>
|
|
</p>
|
|
</td>
|
|
<td class="total align-middle text-end fw-semibold pe-7 text-body-highlight">
|
|
{{ estimate.revenue_estimate|currency_format }} <span class="icon-saudi_riyal"></span>
|
|
</td>
|
|
<td class="payment_status align-middle white-space-nowrap text-start fw-bold text-body-tertiary"></td>
|
|
<td class="date align-middle white-space-nowrap text-body-tertiary fs-9 ps-4 text-end">{{ estimate.created }}</td>
|
|
<td class="align-middle white-space-nowrap text-end pe-0 ps-5">
|
|
<div class="btn-reveal-trigger position-static">
|
|
<button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10"
|
|
type="button"
|
|
data-bs-toggle="dropdown"
|
|
data-boundary="window"
|
|
aria-haspopup="true"
|
|
aria-expanded="false"
|
|
data-bs-reference="parent">
|
|
<span class="fas fa-ellipsis-h fs-10"></span>
|
|
</button>
|
|
<div class="dropdown-menu dropdown-menu-end py-2">
|
|
<a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Export</a>
|
|
<div class="dropdown-divider"></div>
|
|
<a class="dropdown-item text-danger" href="#!">Remove</a>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
{% for invoice in invoices %}
|
|
<tr class="hover-actions-trigger btn-reveal-trigger position-static">
|
|
<td class="order align-middle white-space-nowrap ps-0">
|
|
<p class="fw-semibold mb-0">
|
|
{{ _("Invoice") }}-<span class="fs-10 fw-medium">{{ invoice.invoice_number }}</span>
|
|
</p>
|
|
</td>
|
|
<td class="total align-middle text-end fw-semibold pe-7 text-body-highlight">
|
|
{{ invoice.amount_paid|currency_format }} <span class="icon-saudi_riyal"></span>
|
|
</td>
|
|
<td class="payment_status align-middle white-space-nowrap text-start fw-bold text-body-tertiary">
|
|
{% if invoice.is_paid %}
|
|
<span class="badge badge-phoenix fs-10 badge-phoenix-success">
|
|
<span class="badge-label">{{ _("Paid") }}</span>
|
|
<span class="ms-1" data-feather="check" style="height:12.8px;width:12.8px;"></span>
|
|
</span>
|
|
{% endif %}
|
|
</td>
|
|
<td class="date align-middle white-space-nowrap text-body-tertiary fs-9 ps-4 text-end">{{ invoice.created }}</td>
|
|
<td class="align-middle white-space-nowrap text-end pe-0 ps-5">
|
|
<div class="btn-reveal-trigger position-static">
|
|
<button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10"
|
|
type="button"
|
|
data-bs-toggle="dropdown"
|
|
data-boundary="window"
|
|
aria-haspopup="true"
|
|
aria-expanded="false"
|
|
data-bs-reference="parent">
|
|
<span class="fas fa-ellipsis-h fs-10"></span>
|
|
</button>
|
|
<div class="dropdown-menu dropdown-menu-end py-2">
|
|
<a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Export</a>
|
|
<div class="dropdown-divider"></div>
|
|
<a class="dropdown-item text-danger" href="#!">Remove</a>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{% include 'partials/pagination.html' %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!---->
|
|
<div class="col-12">
|
|
<div class="mb-6">
|
|
<h3 class="mb-4">
|
|
{%trans 'INFO'%}
|
|
</h3>
|
|
<div class="border-top border-bottom border-translucent"
|
|
id="customerOrdersTable"
|
|
data-list='{"valueNames":["order","total","payment_status","fulfilment_status","delivery_type","date"],"page":6,"pagination":true}'>
|
|
<div class="table-responsive scrollbar">
|
|
<table class="table table-sm fs-9 mb-0">
|
|
<thead>
|
|
<tr>
|
|
<th class="sort white-space-nowrap align-middle" scope="col" data-sort="leads">{% trans 'Leads'|upper %}</th>
|
|
<th class="sort align-middle " scope="col" data-sort="opportunities">{% trans 'Opportunities'|upper %}</th>
|
|
<th class="sort align-middle " scope="col" data-sort="estimates">{% trans 'Estimates'|upper %}</th>
|
|
<th class="sort align-middle " scope="col" data-sort="sale_orders">{% trans 'Sale orders'|upper %}</th>
|
|
<th class="sort align-middle " scope="col" data-sort="invoices">{% trans 'Invoices'|upper %}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="list" id="customer-order-table-body">
|
|
{% for lead in leads %}
|
|
<tr>
|
|
<td><a href="#">{{lead}} ({{ forloop.counter }})<a></td>
|
|
<td>{{lead.opportunity}} ({{ forloop.counter }})</td>
|
|
|
|
<td>
|
|
|
|
{% for estimate in lead.customer.customer_model.estimatemodel_set.all %}
|
|
<div class="me-2">{{estimate}}</div>
|
|
<hr>
|
|
{% endfor %}
|
|
</td>
|
|
|
|
<td>
|
|
{% for estimate in lead.customer.customer_model.estimatemodel_set.all %}
|
|
<div>{{estimate.sale_orders.first}}</div>
|
|
<hr>
|
|
{% endfor %}
|
|
</td>
|
|
<td>
|
|
{% for invoice in lead.customer.customer_model.invoicemodel_set.all %}
|
|
|
|
{% if invoice.is_paid %}
|
|
<span class="badge badge-phoenix fs-10 badge-phoenix-success">
|
|
<div>{{invoice}}</div>
|
|
</span>
|
|
{%else%}
|
|
<span class="badge badge-phoenix fs-10 badge-phoenix-info">
|
|
<div>{{invoice}}</div>
|
|
</span>
|
|
{% endif %}
|
|
|
|
<hr>
|
|
{% endfor %}
|
|
</td>
|
|
|
|
|
|
<tr>
|
|
|
|
{% endfor %}
|
|
|
|
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{% include 'partials/pagination.html' %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!---->
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% include "components/note_modal.html" with content_type="customer" slug=customer.slug %}
|
|
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
const noteModal = document.getElementById("noteModal");
|
|
const modalTitle = document.getElementById("noteModalLabel");
|
|
|
|
const modalBody = noteModal.querySelector(".modal-body");
|
|
|
|
noteModal.addEventListener("", function (event) {
|
|
const button = event.relatedTarget;
|
|
const url = button.getAttribute("data-url");
|
|
const title = button.getAttribute("data-note-title");
|
|
|
|
fetch(url)
|
|
.then((response) => response.text())
|
|
.then((html) => {
|
|
modalBody.innerHTML = html;
|
|
modalTitle.innerHTML = title;
|
|
})
|
|
.catch((error) => {
|
|
modalBody.innerHTML = '<p class="text-danger">{% trans 'Error loading form. Please try again later' %}.</p>';
|
|
console.error("Error loading form:", error);
|
|
});
|
|
});
|
|
});
|
|
|
|
</script>
|
|
{% endblock %}
|