294 lines
18 KiB
HTML
294 lines
18 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' %}
|
|
{% include 'components/note_modal.html' with content_type="customer" slug=customer.slug %}
|
|
<div class="mt-4">
|
|
<div class="row align-items-center justify-content-between g-3 mb-4">
|
|
<div class="col-auto">
|
|
<h3 class="mb-0">
|
|
{% trans 'Customer details' %}<i class="fas fa-user ms-2 text-primary"></i>
|
|
</h3>
|
|
</div>
|
|
<div class="col-auto d-flex gap-2">
|
|
{% 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>{{ _("Edit") }}
|
|
</a>
|
|
{% endif %}
|
|
{% if perms.inventory.delete_customer %}
|
|
<button class="btn btn-sm btn-phoenix-danger delete-btn"
|
|
data-url="{% url 'customer_delete' request.dealer.slug customer.slug %}"
|
|
data-message="{% trans '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>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<div class="row g-4 mb-4">
|
|
<div class="col-12 col-lg-4">
|
|
<div class="card h-100 shadow-sm">
|
|
<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 border border-2 border-primary"
|
|
src="{{ customer.image.url }}"
|
|
alt="{{ customer.full_name }}" />
|
|
{% else %}
|
|
<div class="avatar-text rounded-circle bg-secondary text-white border border-2 border-primary">
|
|
<span class="fs-4">{{ customer.full_name|first|default:"?" }}</span>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-sm-auto flex-1">
|
|
<h3>{{ customer.full_name }}</h3>
|
|
<p class="text-body-secondary">{% trans "Member since:" %} {{ customer.created|date:"d M Y" }}</p>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex justify-content-between border-top border-dashed pt-4 mt-auto">
|
|
<div class="text-center">
|
|
<h6 class="mb-1 text-uppercase text-body-secondary fs-8">{% trans 'Invoices' %}</h6>
|
|
<p class="fs-6 fw-bold mb-0">{{ invoices.count }}</p>
|
|
</div>
|
|
<div class="text-center">
|
|
<h6 class="mb-1 text-uppercase text-body-secondary fs-8">{% trans 'Quotations' %}</h6>
|
|
<p class="fs-6 fw-bold mb-0">{{ estimates.count }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-lg-8">
|
|
<div class="card h-100 shadow-sm">
|
|
<div class="card-body p-4">
|
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
|
<h5 class="card-title mb-0">{% trans 'Default Information' %}</h5>
|
|
</div>
|
|
<ul class="list-unstyled mb-0">
|
|
<li class="mb-2">
|
|
<strong class="text-body-secondary d-block">{% trans 'Address' %}:</strong>
|
|
<p class="mb-0">{{ customer.address|default:_("N/A") }}</p>
|
|
</li>
|
|
<li class="mb-2">
|
|
<strong class="text-body-secondary d-block">{% trans 'Email' %}:</strong>
|
|
<a href="mailto:{{ customer.email|default:"" }}"
|
|
class="text-decoration-none">{{ customer.email|default:_("N/A") }}</a>
|
|
</li>
|
|
<li class="mb-0">
|
|
<strong class="text-body-secondary d-block">{% trans 'Phone Number' %}:</strong>
|
|
<a href="tel:{{ customer.phone_number|default:"" }}"
|
|
class="text-decoration-none">{{ customer.phone_number|default:_("N/A") }}</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row g-4 mb-4">
|
|
<div class="col-12">
|
|
<div class="card shadow-sm">
|
|
<div class="card-body p-4">
|
|
<div class="d-flex align-items-center justify-content-between mb-3">
|
|
<h5 class="card-title mb-0">{% trans 'Notes' %}</h5>
|
|
{% if perms.inventory.change_customer %}
|
|
<button class="btn btn-phoenix-primary btn-sm d-flex align-items-center"
|
|
type="button"
|
|
data-bs-toggle="modal"
|
|
data-bs-target="#noteModal">
|
|
<i class="fas fa-plus me-1"></i>{{ _("Add Note") }}
|
|
</button>
|
|
{% endif %}
|
|
</div>
|
|
<div class="table-responsive">
|
|
<table class="table table-hover table-striped mb-0">
|
|
<thead class="bg-body-tertiary">
|
|
<tr>
|
|
<th scope="col" style="width: 60%;">{% trans 'Note' %}</th>
|
|
<th scope="col" style="width: 15%;">{% trans 'Date' %}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for note in notes %}
|
|
<tr class="align-middle">
|
|
<td class="text-body-secondary">{{ note.note|default_if_none:""|linebreaksbr }}</td>
|
|
<td class="text-body-secondary text-nowrap">{{ note.created|date:"d M Y" }}</td>
|
|
</tr>
|
|
{% empty %}
|
|
<tr>
|
|
<td colspan="4" class="text-center text-body-secondary">
|
|
<i class="fas fa-info-circle me-2"></i>{% trans 'No notes found for this customer.' %}
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row g-4 mb-3">
|
|
<div class="col-12">
|
|
<div class="card shadow-sm">
|
|
<div class="card-body p-4">
|
|
<h5 class="card-title mb-3">{% trans 'Sales History' %}</h5>
|
|
<ul class="nav nav-tabs" id="myTab" role="tablist">
|
|
<li class="nav-item me-6" role="presentation">
|
|
<button class="nav-link active"
|
|
id="leads-tab"
|
|
data-bs-toggle="tab"
|
|
data-bs-target="#leads-tab-pane"
|
|
type="button"
|
|
role="tab"
|
|
aria-controls="leads-tab-pane"
|
|
aria-selected="true">{% trans 'Leads' %}</button>
|
|
</li>
|
|
<li class="nav-item me-6" role="presentation">
|
|
<button class="nav-link"
|
|
id="opportunities-tab"
|
|
data-bs-toggle="tab"
|
|
data-bs-target="#opportunities-tab-pane"
|
|
type="button"
|
|
role="tab"
|
|
aria-controls="opportunities-tab-pane"
|
|
aria-selected="false">{% trans 'Opportunities' %}</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link"
|
|
id="estimates-tab"
|
|
data-bs-toggle="tab"
|
|
data-bs-target="#estimates-tab-pane"
|
|
type="button"
|
|
role="tab"
|
|
aria-controls="estimates-tab-pane"
|
|
aria-selected="false">{% trans 'Estimates' %}</button>
|
|
</li>
|
|
</ul>
|
|
<div class="tab-content pt-3" id="myTabContent">
|
|
<div class="tab-pane fade show active"
|
|
id="leads-tab-pane"
|
|
role="tabpanel"
|
|
aria-labelledby="leads-tab"
|
|
tabindex="0">
|
|
{% for lead in leads %}
|
|
<div class="d-flex align-items-center mb-2">
|
|
<i class="fas fa-handshake me-2 text-primary"></i>
|
|
<a href="{% url 'lead_detail' request.dealer.slug lead.slug %}"
|
|
class="fw-bold">{{ lead }}</a>
|
|
</div>
|
|
{% empty %}
|
|
<p class="text-body-secondary">{% trans 'No leads found for this customer.' %}</p>
|
|
{% endfor %}
|
|
</div>
|
|
<div class="tab-pane fade"
|
|
id="opportunities-tab-pane"
|
|
role="tabpanel"
|
|
aria-labelledby="opportunities-tab"
|
|
tabindex="0">
|
|
{% for lead in leads %}
|
|
{% if lead.opportunity %}
|
|
<div class="d-flex align-items-center mb-2">
|
|
<i class="fas fa-chart-line me-2 text-success"></i>
|
|
<a href="{% url 'opportunity_detail' request.dealer.slug lead.opportunity.slug %}"
|
|
class="fw-bold">{{ lead.opportunity }}</a>
|
|
</div>
|
|
{% endif %}
|
|
{% empty %}
|
|
<p class="text-body-secondary">{% trans 'No opportunities found for this customer.' %}</p>
|
|
{% endfor %}
|
|
</div>
|
|
<div class="tab-pane fade"
|
|
id="estimates-tab-pane"
|
|
role="tabpanel"
|
|
aria-labelledby="estimates-tab"
|
|
tabindex="0">
|
|
{% for estimate in estimates %}
|
|
<div class="card mb-3 shadow-sm">
|
|
<div class="card-body p-3">
|
|
<div class="d-flex align-items-center justify-content-between mb-3">
|
|
<h6 class="mb-0">
|
|
<i class="fas fa-file-invoice me-2 text-info"></i>
|
|
<a href="{% url 'estimate_detail' request.dealer.slug estimate.pk %}"
|
|
class="text-decoration-none">{{ estimate }}</a>
|
|
</h6>
|
|
<span class="badge bg-success">{{ estimate.created|date:"d M Y" }}</span>
|
|
</div>
|
|
<ul class="list-unstyled mb-0 ms-5">
|
|
{% for sale_order in estimate.sale_orders.all %}
|
|
<li class="mb-2">
|
|
<i class="fas fa-truck-moving me-2 text-success"></i>
|
|
<a href="{% url 'order_detail' request.dealer.slug sale_order.pk %}">{{ sale_order }}</a>
|
|
</li>
|
|
{% endfor %}
|
|
{% for invoice in estimate.invoicemodel_set.all %}
|
|
<li class="mb-2">
|
|
<i class="fas fa-receipt me-2 {% if invoice.is_paid %}text-success{% else %}text-warning{% endif %}"></i>
|
|
<a href="{% url 'invoice_detail' request.dealer.slug request.entity.slug invoice.pk %}"
|
|
class="text-decoration-none">{{ invoice }}</a>
|
|
<span class="badge rounded-pill {% if invoice.is_paid %}bg-success{% else %}bg-warning{% endif %} ms-2">
|
|
{% if invoice.is_paid %}
|
|
{% trans "Paid" %}
|
|
{% else %}
|
|
{% trans "Unpaid" %}
|
|
{% endif %}
|
|
</span>
|
|
</li>
|
|
{% endfor %}
|
|
{% for item in estimate.itemtransactionmodel_set.all %}
|
|
<li>
|
|
<i class="fas fa-car me-2 text-primary"></i>
|
|
<a href="{% url 'car_detail' request.dealer.slug item.item_model.car.slug %}">{{ item.item_model.car.vin }} | {{ item.item_model.car.id_car_make.name }} | {{ item.item_model.car.id_car_model.name }}</a>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
{% empty %}
|
|
<p class="text-body-secondary">{% trans 'No estimates found for this customer.' %}</p>
|
|
{% endfor %}
|
|
</div>
|
|
</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 %}
|