222 lines
17 KiB
HTML
222 lines
17 KiB
HTML
{% extends "base.html" %}
|
|
{% load i18n static %}
|
|
|
|
{% block title %}{{ _("View Customer") }}{% endblock title %}
|
|
|
|
{% block content %}
|
|
<!-- Delete Modal -->
|
|
<div class="modal fade" id="deleteModal"
|
|
data-bs-backdrop="static"
|
|
data-bs-keyboard="false"
|
|
tabindex="-1"
|
|
aria-labelledby="deleteModalLabel"
|
|
aria-hidden="true">
|
|
<div class="modal-dialog modal-sm ">
|
|
<div class="modal-content rounded">
|
|
<div class="modal-body d-flex justify-content-center">
|
|
<h1 class="text-danger me-2"><i class="bi bi-exclamation-diamond-fill"></i></h1>
|
|
<span class="text-danger">
|
|
{% trans "Are you sure you want to delete this customer?" %}
|
|
</span>
|
|
</div>
|
|
<div class="btn-group btn-group-sm">
|
|
<button type="button"
|
|
class="btn btn-sm btn-secondary"
|
|
data-bs-dismiss="modal">
|
|
{% trans 'No' %}
|
|
</button>
|
|
<a type="button"
|
|
class="btn btn-sm btn-danger"
|
|
href="{% url 'customer_delete' customer.id %}">
|
|
{% trans 'Yes' %}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Delete Modal -->
|
|
|
|
<div class="container">
|
|
|
|
<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">
|
|
<a class="btn btn-phoenix-danger"
|
|
data-bs-toggle="modal"
|
|
data-bs-target="#deleteModal"><span class="fa-solid fa-trash-can me-2"></span>{{ _("Delete") }}</a>
|
|
</div>
|
|
<div class="col-auto">
|
|
<a href="{% url 'customer_update' customer.id %}" class="btn btn-phoenix-secondary"><span class="fa-solid fa-pen-to-square me-2"></span>{{_("Update")}}</a>
|
|
</div>
|
|
</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"><img class="rounded-circle" src=".{% static 'images/team/15.webp' %}" alt="" /></div>
|
|
</div>
|
|
<div class="col-12 col-sm-auto flex-1">
|
|
<h3>{{ customer.first_name }} {{ customer.middle_name }} {{ customer.last_name }}</h3>
|
|
<p class="text-body-secondary">{{ customer.created|timesince}}</p>
|
|
<div><a class="me-2" href="#!"><span class="fab fa-linkedin-in text-body-quaternary text-opacity-75 text-primary-hover"></span></a><a class="me-2" href="#!"><span class="fab fa-facebook text-body-quaternary text-opacity-75 text-primary-hover"></span></a><a href="#!"><span class="fab fa-twitter text-body-quaternary text-opacity-75 text-primary-hover"></span></a></div>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex flex-between-center border-top border-dashed pt-4">
|
|
<div>
|
|
<h6>{% trans 'Visits' %}</h6>
|
|
<p class="fs-7 text-body-secondary mb-0">23</p>
|
|
</div>
|
|
<div>
|
|
<h6>{% trans 'Calls' %}</h6>
|
|
<p class="fs-7 text-body-secondary mb-0">9</p>
|
|
</div>
|
|
<div>
|
|
<h6>{% trans 'Quotations' %}</h6>
|
|
<p class="fs-7 text-body-secondary mb-0">5</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}}<br />Riyadh,<br />Saudi Arabia</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 }}">{{ customer.phone_number }}</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<label for="notes">{{_("Notes on Customer")}}</label>
|
|
<textarea id="notes" class="form-control mb-3" rows="2"></textarea>
|
|
<button class="btn btn-phoenix-primary w-100 mb-4">{{_("Add Note")}}</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-xxl-8">
|
|
<div class="mb-6">
|
|
<h3 class="mb-4">{{ _("Cars") }} <span class="text-body-tertiary fw-normal">(4)</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" style="width:10%;">ORDER</th>
|
|
<th class="sort align-middle text-end pe-7" scope="col" data-sort="total" style="width:10%;">TOTAL</th>
|
|
<th class="sort align-middle white-space-nowrap pe-3" scope="col" data-sort="payment_status" style="width:15%;">PAYMENT STATUS</th>
|
|
<th class="sort align-middle white-space-nowrap text-start pe-3" scope="col" data-sort="fulfilment_status" style="width:20%;">FULFILMENT STATUS</th>
|
|
<th class="sort align-middle white-space-nowrap text-start" scope="col" data-sort="delivery_type" style="width:30%;">DELIVERY TYPE</th>
|
|
<th class="sort align-middle text-end pe-0" scope="col" data-sort="date">DATE</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">
|
|
<tr class="hover-actions-trigger btn-reveal-trigger position-static">
|
|
<td class="order align-middle white-space-nowrap ps-0"><a class="fw-semibold" href="#!">#2453</a></td>
|
|
<td class="total align-middle text-end fw-semibold pe-7 text-body-highlight">$87</td>
|
|
<td class="payment_status align-middle white-space-nowrap text-start fw-bold text-body-tertiary"><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></td>
|
|
<td class="fulfilment_status align-middle white-space-nowrap text-start fw-bold text-body-tertiary"><span class="badge badge-phoenix fs-10 badge-phoenix-success"><span class="badge-label">Order Fulfilled</span><span class="ms-1" data-feather="check" style="height:12.8px;width:12.8px;"></span></span></td>
|
|
<td class="delivery_type align-middle white-space-nowrap text-body fs-9 text-start">Cash on delivery</td>
|
|
<td class="date align-middle white-space-nowrap text-body-tertiary fs-9 ps-4 text-end">Dec 12, 12:56 PM</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>
|
|
<tr class="hover-actions-trigger btn-reveal-trigger position-static">
|
|
<td class="order align-middle white-space-nowrap ps-0"><a class="fw-semibold" href="#!">#2452</a></td>
|
|
<td class="total align-middle text-end fw-semibold pe-7 text-body-highlight">$7264</td>
|
|
<td class="payment_status align-middle white-space-nowrap text-start fw-bold text-body-tertiary"><span class="badge badge-phoenix fs-10 badge-phoenix-secondary"><span class="badge-label">Cancelled</span><span class="ms-1" data-feather="x" style="height:12.8px;width:12.8px;"></span></span></td>
|
|
<td class="fulfilment_status align-middle white-space-nowrap text-start fw-bold text-body-tertiary"><span class="badge badge-phoenix fs-10 badge-phoenix-info"><span class="badge-label">Ready to pickup</span><span class="ms-1" data-feather="info" style="height:12.8px;width:12.8px;"></span></span></td>
|
|
<td class="delivery_type align-middle white-space-nowrap text-body fs-9 text-start">Free shipping</td>
|
|
<td class="date align-middle white-space-nowrap text-body-tertiary fs-9 ps-4 text-end">Dec 9, 2:28PM</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>
|
|
<tr class="hover-actions-trigger btn-reveal-trigger position-static">
|
|
<td class="order align-middle white-space-nowrap ps-0"><a class="fw-semibold" href="#!">#2451</a></td>
|
|
<td class="total align-middle text-end fw-semibold pe-7 text-body-highlight">$375</td>
|
|
<td class="payment_status align-middle white-space-nowrap text-start fw-bold text-body-tertiary"><span class="badge badge-phoenix fs-10 badge-phoenix-warning"><span class="badge-label">Pending</span><span class="ms-1" data-feather="alert-octagon" style="height:12.8px;width:12.8px;"></span></span></td>
|
|
<td class="fulfilment_status align-middle white-space-nowrap text-start fw-bold text-body-tertiary"><span class="badge badge-phoenix fs-10 badge-phoenix-warning"><span class="badge-label">Partial FulfiLled</span><span class="ms-1" data-feather="alert-octagon" style="height:12.8px;width:12.8px;"></span></span></td>
|
|
<td class="delivery_type align-middle white-space-nowrap text-body fs-9 text-start">Local pickup</td>
|
|
<td class="date align-middle white-space-nowrap text-body-tertiary fs-9 ps-4 text-end">Dec 4, 12:56 PM</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>
|
|
<tr class="hover-actions-trigger btn-reveal-trigger position-static">
|
|
<td class="order align-middle white-space-nowrap ps-0"><a class="fw-semibold" href="#!">#2450</a></td>
|
|
<td class="total align-middle text-end fw-semibold pe-7 text-body-highlight">$657</td>
|
|
<td class="payment_status align-middle white-space-nowrap text-start fw-bold text-body-tertiary"><span class="badge badge-phoenix fs-10 badge-phoenix-secondary"><span class="badge-label">Cancelled</span><span class="ms-1" data-feather="x" style="height:12.8px;width:12.8px;"></span></span></td>
|
|
<td class="fulfilment_status align-middle white-space-nowrap text-start fw-bold text-body-tertiary"><span class="badge badge-phoenix fs-10 badge-phoenix-secondary"><span class="badge-label">Order CancelLed</span><span class="ms-1" data-feather="x" style="height:12.8px;width:12.8px;"></span></span></td>
|
|
<td class="delivery_type align-middle white-space-nowrap text-body fs-9 text-start">Standard shipping</td>
|
|
<td class="date align-middle white-space-nowrap text-body-tertiary fs-9 ps-4 text-end">Dec 1, 4:07 AM</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>
|
|
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="row align-items-center justify-content-between py-2 pe-0 fs-9">
|
|
<div class="col-auto d-flex">
|
|
<p class="mb-0 d-none d-sm-block me-3 fw-semibold text-body" data-list-info="data-list-info"></p><a class="fw-semibold" href="#!" data-list-view="*">View all<span class="fas fa-angle-right ms-1" data-fa-transform="down-1"></span></a><a class="fw-semibold d-none" href="#!" data-list-view="less">View Less<span class="fas fa-angle-right ms-1" data-fa-transform="down-1"></span></a>
|
|
</div>
|
|
<div class="col-auto d-flex">
|
|
<button class="page-link" data-list-pagination="prev"><span class="fas fa-chevron-left"></span></button>
|
|
<ul class="mb-0 pagination"></ul>
|
|
<button class="page-link pe-0" data-list-pagination="next"><span class="fas fa-chevron-right"></span></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
{% endblock %} |