879 lines
58 KiB
HTML
879 lines
58 KiB
HTML
{% extends 'base.html' %}
|
|
{% load i18n static humanize %}
|
|
{% load crispy_forms_tags %}
|
|
{% block title %}
|
|
{% trans "Lead Detail" %}
|
|
{% endblock %}
|
|
{% block customCSS %}
|
|
<style>
|
|
.main-tab li:last-child {
|
|
margin-left: auto;
|
|
}
|
|
.kanban-header {
|
|
position: relative;
|
|
background-color:rgb(237, 241, 245);
|
|
font-weight: 600;
|
|
padding: 0.5rem 1rem;
|
|
margin-bottom: 1rem;
|
|
color: #333;
|
|
clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%);
|
|
box-shadow: 0 1px 2px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.kanban-header::after {
|
|
content: "";
|
|
position: absolute;
|
|
right: -20px;
|
|
top: 0;
|
|
width: 0;
|
|
height: 0;
|
|
border-top: 28px solid transparent;
|
|
border-bottom: 28px solid transparent;
|
|
border-left: 20px solid #dee2e6;
|
|
}
|
|
|
|
</style>
|
|
{% endblock customCSS %}
|
|
{% block content %}
|
|
<div class="row g-3">
|
|
<div class="col-12">
|
|
{% include "crm/leads/partials/update_action.html" %}
|
|
<div class="row align-items-center justify-content-between g-3 mb-3">
|
|
<div class="col-12 col-md-auto">
|
|
<h3 class="mb-0">{{ _("Lead Details") }}</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row g-0 g-md-4 g-xl-6">
|
|
<div class="col-md-5 col-lg-5 col-xl-4">
|
|
<div class="sticky-leads-sidebar">
|
|
<div class="lead-details" data-breakpoint="md">
|
|
<div class="card mb-2">
|
|
<div class="card-body">
|
|
<div class="row align-items-center g-3 text-center text-xxl-start">
|
|
<div class="col-6 col-sm-auto flex-1">
|
|
<h3 class="fw-bolder mb-2">{{ lead.first_name|capfirst }} {{ lead.last_name|capfirst }}</h3>
|
|
<p>{{ lead.email|capfirst }}</p>
|
|
</div>
|
|
<div class="col-6 col-sm-auto flex-1">
|
|
<h5 id="leadStatus" class="text-body-highlight mb-0 text-end">
|
|
{{ _("Status") }}
|
|
{% if lead.status == "new" %}
|
|
<span class="badge badge-phoenix badge-phoenix-primary"><span class="badge-label">{{ _("New") }}</span><span class="fa fa-bell ms-1"></span></span>
|
|
{% elif lead.status == "contacted" %}
|
|
<span class="badge badge-phoenix badge-phoenix-warning"><span class="badge-label">{{ _("Contacted") }}</span><span class="fa fa-clock-o ms-1"></span></span>
|
|
{% elif lead.status == "qualified" %}
|
|
<span class="badge badge-phoenix badge-phoenix-info"><span class="badge-label">{{ _("Qualified") }}</span><span class="fa fa-wrench ms-1"></span></span>
|
|
{% elif lead.status == "unqualified" %}
|
|
<span class="badge badge-phoenix badge-phoenix-success"><span class="badge-label">{{ _("Unqualified") }}</span><span class="fa fa-check ms-1"></span></span>
|
|
{% elif lead.status == "converted" %}
|
|
<span class="badge badge-phoenix badge-phoenix-danger"><span class="badge-label">{{ _("Converted") }}</span><span class="fa fa-times ms-1"></span></span>
|
|
{% endif %}
|
|
</h5>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card mb-2">
|
|
<div class="card-body">
|
|
<div class="row align-items-center g-3 text-center text-xxl-start">
|
|
<div class="col-6 col-sm-auto d-flex flex-column align-items-center text-center">
|
|
<h5 class="fw-bolder mb-2 text-body-highlight">{{ _("Car Requested") }}</h5>
|
|
{% if lead.id_car_make.logo %}
|
|
<img src="{{ lead.id_car_make.logo.url }}"
|
|
alt="Car Make Logo"
|
|
class="img-fluid rounded mb-2"
|
|
style="width: 60px;
|
|
height: 60px">
|
|
{% endif %}
|
|
<p class="mb-0">{{ lead.id_car_make.get_local_name }} - {{ lead.id_car_model.get_local_name }} {{ lead.year }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card mb-2">
|
|
<div class="card-body">
|
|
<div id="assignedTo"
|
|
class="row align-items-center g-3 text-center text-xxl-start">
|
|
<div class="col-6 col-sm-auto d-flex flex-column align-items-center text-center">
|
|
<h5 class="fw-bolder mb-2 text-body-highlight">{{ _("Assigned To") }}</h5>
|
|
<div class="d-flex align-items-center">
|
|
<div class="avatar avatar-tiny me-2">
|
|
{% if lead.staff.logo %}
|
|
<img class="avatar-img rounded-circle"
|
|
src="{{ lead.staff.thumbnail.url }}"
|
|
onerror="this.src='/static/img/brand/brand-logo.png'"
|
|
alt="Logo">
|
|
{% endif %}
|
|
</div>
|
|
<small>
|
|
{% if lead.staff == request.staff %}
|
|
{{ _("Me") }}
|
|
{% elif LANGUAGE_CODE == "en" %}
|
|
{{ lead.staff.fullname|capfirst }}
|
|
{% else %}
|
|
{{ lead.staff.arabic_name }}
|
|
{% endif %}
|
|
</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card mb-2">
|
|
<div class="card-body">
|
|
<div class="row align-items-center g-3 text-center text-xxl-start">
|
|
<div class="col-6 col-sm-auto d-flex flex-column align-items-center text-center">
|
|
<h5 class="fw-bolder mb-2 text-body-highlight">{{ _("Related Records") }}</h5>
|
|
<h6 class="fw-bolder mb-2 text-body-highlight">{{ _("Opportunity") }}</h6>
|
|
{% if lead.opportunity %}
|
|
<a href="{% url 'opportunity_detail' request.dealer.slug lead.opportunity.slug %}"
|
|
class="">{{ lead.opportunity }}</a>
|
|
{% else %}
|
|
<p>{{ _("No Opportunity") }}</p>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card mb-2">
|
|
<div class="card-body">
|
|
<div class="mb-3">
|
|
<div class="d-flex align-items-center mb-1">
|
|
<span class="me-2 uil uil-envelope-alt"></span>
|
|
<h5 class="text-body-highlight fw-bold mb-0">{{ _("Email") }}</h5>
|
|
</div>
|
|
<span class="text-body-secondary">{{ lead.email }}</span>
|
|
</div>
|
|
<div class="mb-3">
|
|
<div class="d-flex align-items-center mb-1">
|
|
<span class="me-2 uil uil-phone"></span>
|
|
<h5 class="text-body-highlight fw-bold mb-0">{{ _("Phone") }}</h5>
|
|
</div>
|
|
<span class="text-body-secondary">{{ lead.phone_number }}</span>
|
|
</div>
|
|
<div class="mb-3">
|
|
<div class="d-flex align-items-center mb-1">
|
|
<span class="me-2 uil uil-clock"></span>
|
|
<h5 class="text-body-highlight fw-bold mb-0">{{ _("Created") }}</h5>
|
|
</div>
|
|
<span class="text-body-secondary">{{ lead.created|naturalday|capfirst }}</span>
|
|
</div>
|
|
<div class="mb-3">
|
|
<div class="d-flex align-items-center mb-1">
|
|
<span class="me-2 uil uil-file-check-alt"></span>
|
|
<h5 class="text-body-highlight fw-bold mb-0">{{ _("Lead Source") }}</h5>
|
|
</div>
|
|
{% if lead.source == 'REFERRALS' %}
|
|
<span class="ms-2 fa fa-users"></span>
|
|
{% elif lead.source == 'WHATSAPP' %}
|
|
<span class="ms-2 fa fa-whatsapp"></span>
|
|
{% elif lead.source == 'SHOWROOM' %}
|
|
<span class="ms-2 fa fa-building"></span>
|
|
{% elif lead.source == 'TIKTOK' %}
|
|
<span class="ms-2 fa fa-tiktok"></span>
|
|
{% elif lead.source == 'INSTAGRAM' %}
|
|
<span class="ms-2 fa fa-instagram"></span>
|
|
{% elif lead.source == 'X' %}
|
|
<span class="ms-2 fa fa-times-circle"></span>
|
|
{% elif lead.source == 'FACEBOOK' %}
|
|
<span class="ms-2 fa fa-facebook-f"></span>
|
|
{% elif lead.source == 'MOTORY' %}
|
|
<span class="ms-2 fa fa-car-side"></span>
|
|
{% elif lead.source == 'INFLUENCERS' %}
|
|
<span class="ms-2 fa fa-user-check"></span>
|
|
{% elif lead.source == 'YOUTUBE' %}
|
|
<span class="ms-2 fa fa-youtube"></span>
|
|
{% elif lead.source == 'CAMPAIGN' %}
|
|
<span class="ms-2 fa fa-bullhorn"></span>
|
|
{% endif %}
|
|
<span class="text-body-secondary">{{ lead.source|upper }}</span>
|
|
</div>
|
|
<div class="mb-3">
|
|
<div class="d-flex align-items-center mb-1">
|
|
<span class="me-2 uil uil-file-check-alt"></span>
|
|
<h5 class="text-body-highlight fw-bold mb-0">{{ _("Lead Channel") }}</h5>
|
|
</div>
|
|
<span class="text-body-secondary">{{ lead.channel|upper }}</span>
|
|
</div>
|
|
<div class="mb-3">
|
|
<div class="d-flex align-items-center mb-1">
|
|
<span class="me-2 uil uil-estate"></span>
|
|
<h5 class="text-body-highlight fw-bold mb-0">{{ _("Address") }}</h5>
|
|
</div>
|
|
<span class="text-body-secondary">{{ lead.address }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="d-lg-none top-0"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-7 col-lg-7 col-xl-8">
|
|
<div id="currentStage" class="d-flex w-100 gap-5">
|
|
<div class="kanban-header bg-success w-50 text-white fw-bold">
|
|
<i class="fa-solid fa-circle-check me-2"></i>{{ lead.status|capfirst }}
|
|
<br>
|
|
<small>{% trans "Current Stage" %}</small>
|
|
</div>
|
|
<div class="kanban-header bg-secondary w-50 text-white fw-bold">
|
|
<i class="fa-solid fa-circle-info me-2"></i>{{ lead.next_action|capfirst }}
|
|
<br>
|
|
<small>{% trans "Next Action" %} :</small> <small>{{ lead.next_action_date|naturalday|capfirst }}</small>
|
|
</div>
|
|
</div>
|
|
<ul class="nav main-tab nav-underline fs-9 deal-details scrollbar flex-nowrap w-100 pb-1 mb-6 justify-content-end mt-5"
|
|
id="myTab"
|
|
role="tablist"
|
|
style="overflow-y: hidden">
|
|
<li class="nav-item text-nowrap me-2" role="presentation">
|
|
<a class="nav-link active"
|
|
id="tasks-tab"
|
|
data-bs-toggle="tab"
|
|
href="#tab-tasks"
|
|
role="tab"
|
|
aria-controls="tab-tasks"
|
|
aria-selected="true"> <span class="fa-solid fa-envelope me-2 tab-icon-color fs-8"></span>{{ _("Tasks") }}</a>
|
|
</li>
|
|
<li class="nav-item text-nowrap me-2" role="presentation">
|
|
<a class="nav-link"
|
|
id="notes-tab"
|
|
data-bs-toggle="tab"
|
|
href="#tab-notes"
|
|
role="tab"
|
|
aria-controls="tab-notes"
|
|
aria-selected="false"
|
|
tabindex="-1"> <span class="fa-solid fa-clipboard me-2 tab-icon-color fs-8"></span>{{ _("Notes") }}</a>
|
|
</li>
|
|
{% comment %} <li class="nav-item text-nowrap me-2" role="presentation">
|
|
<a class="nav-link"
|
|
id="emails-tab"
|
|
data-bs-toggle="tab"
|
|
href="#tab-emails"
|
|
role="tab"
|
|
aria-controls="tab-emails"
|
|
aria-selected="true"> <span class="fa-solid fa-envelope me-2 tab-icon-color fs-8"></span>{{ _("Emails") }}</a>
|
|
</li> {% endcomment %}
|
|
<li class="nav-item text-nowrap me-2" role="presentation">
|
|
<a class="nav-link"
|
|
id="activity-tab"
|
|
data-bs-toggle="tab"
|
|
href="#tab-activity"
|
|
role="tab"
|
|
aria-controls="tab-activity"
|
|
aria-selected="false"
|
|
tabindex="-1"> <span class="fa-solid fa-chart-line me-2 tab-icon-color fs-8"></span>{{ _("Activity") }}</a>
|
|
</li>
|
|
<li class="nav-item text-nowrap me-2" role="presentation">
|
|
<a class="nav-link"
|
|
id="opportunity-tab"
|
|
data-bs-toggle="tab"
|
|
href="#tab-opportunity"
|
|
role="tab"
|
|
aria-controls="tab-opportunity"
|
|
aria-selected="false"
|
|
tabindex="-1"> <span class="fa-solid fa-chart-line me-2 tab-icon-color fs-8"></span>{{ _("Opportunities") }}</a>
|
|
</li>
|
|
{% if perms.inventory.change_lead %}
|
|
<li class="nav-item text-nowrap ml-auto" role="presentation">
|
|
{% if perms.inventory.can_reassign_lead %}
|
|
<button class="btn btn-phoenix-primary btn-sm"
|
|
type="button"
|
|
data-bs-toggle="modal"
|
|
data-bs-target="#exampleModal">
|
|
<i class="fa-solid fa-user-plus me-2"></i> {%trans "Reassign Lead"%}
|
|
</button>
|
|
{% endif %}
|
|
<button class="btn btn-phoenix-primary btn-sm"
|
|
onclick="openActionModal('{{ lead.id }}', '{{ lead.action }}', '{{ lead.next_action }}', '{{ lead.next_action_date|date:"Y-m-d\TH:i" }}')">
|
|
<i class="fa-solid fa-user-plus me-2"></i>
|
|
{% trans "Update Actions" %}
|
|
</button>
|
|
<div class="modal fade" id="exampleModal" tabindex="-1" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<form class="modal-content"
|
|
action="{% url 'lead_transfer' request.dealer.slug lead.slug %}"
|
|
hx-select-oob="#assignedTo:outerHTML,#toast-container:outerHTML"
|
|
hx-swap="none"
|
|
hx-on::after-request="{ resetSubmitButton(document.querySelector('#exampleModal button[type=submit]')); $('#exampleModal').modal('hide');}"
|
|
method="post">
|
|
{% csrf_token %}
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="exampleModalLabel">{%trans "Reassign Lead To Another Employee"%}</h5>
|
|
<button class="btn btn-close p-1"
|
|
type="button"
|
|
data-bs-dismiss="modal"
|
|
aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">{{ transfer_form|crispy }}</div>
|
|
<div class="modal-footer">
|
|
<button class="btn btn-phoenix-primary" type="submit">Save</button>
|
|
<button class="btn btn-phoenix-secondary"
|
|
type="button"
|
|
data-bs-dismiss="modal">Cancel</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
{% endif %}
|
|
</ul>
|
|
<div class="tab-content" id="myTabContent">
|
|
<div class="tab-pane fade"
|
|
id="tab-activity"
|
|
|
|
role="tabpanel"
|
|
aria-labelledby="activity-tab">
|
|
<div class="mb-1 d-flex justify-content-between align-items-center">
|
|
<h3 class="mb-4" id="s crollspyTask">
|
|
{{ _("Activities") }} <span class="fw-light fs-7">({{ activities.count }})</span>
|
|
</h3>
|
|
{% if perms.inventory.change_lead %}{% endif %}
|
|
</div>
|
|
<div class="row justify-content-between align-items-md-center hover-actions-trigger btn-reveal-trigger border-translucent py-3 gx-0 border-top">
|
|
<div class="col-12 col-lg-auto">
|
|
<div id="timeline" class="timeline-basic mb-9">
|
|
{% for activity in activities %}
|
|
<div class="timeline-item">
|
|
<div class="row g-3">
|
|
<div class="col-auto">
|
|
<div class="timeline-item-bar position-relative">
|
|
<div class="icon-item icon-item-md rounded-7 border border-translucent">
|
|
{% if activity.activity_type == "call" %}
|
|
<span class="fa-solid fa-phone text-warning fs-8"></span>
|
|
{% elif activity.activity_type == "note" %}
|
|
<span class="fa-regular fa-sticky-note text-info-light fs-8"></span>
|
|
{% elif activity.activity_type == "task" %}
|
|
<span class="fa-solid fa-list-check text-success fs-8"></span>
|
|
{% elif activity.activity_type == "email" %}
|
|
<span class="fa-solid fa-envelope text-info-light fs-8"></span>
|
|
{% elif activity.activity_type == "visit" %}
|
|
<span class="fa-solid fa-users text-danger fs-8"></span>
|
|
{% elif activity.activity_type == "whatsapp" %}
|
|
<span class="fab fa-whatsapp text-success-dark fs-7"></span>
|
|
{% elif activity.activity_type == "meeting" %}
|
|
<span class="fa-solid fa-users text-danger fs-8"></span>
|
|
{% endif %}
|
|
</div>
|
|
{% if forloop.last %}
|
|
<span class=""></span>
|
|
{% else %}
|
|
<span class="timeline-bar border-end border-dashed"></span>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="d-flex justify-content-between">
|
|
<div class="d-flex mb-2">
|
|
<h6 class="lh-sm mb-0 me-2 text-body-secondary timeline-item-title">{{ activity.activity_type|capfirst }}</h6>
|
|
</div>
|
|
<p class="text-body-quaternary fs-9 mb-0 text-nowrap timeline-time">
|
|
<span class="fa-regular fa-clock me-1"></span>{{ activity.created|naturalday|capfirst }}
|
|
</p>
|
|
</div>
|
|
<h6 class="fs-10 fw-normal mb-3">
|
|
{{ _("created by") }} <a class="fw-semibold" href="#!">{{ activity.created_by }}</a>
|
|
</h6>
|
|
<p class="fs-9 text-body-secondary w-sm-60 mb-5">{{ activity.notes }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="tab-pane fade"
|
|
id="tab-opportunity"
|
|
role="tabpanel"
|
|
aria-labelledby="opportunity-tab">
|
|
<div class="mb-1 d-flex justify-content-between align-items-center">
|
|
<h3 class="mb-4" id="scrollspyTask">
|
|
{{ _("Opportunities") }} <span class="fw-light fs-7">({{ lead.get_opportunities.count }})</span>
|
|
</h3>
|
|
{% if perms.inventory.add_opportunity %}
|
|
<a href="{% url 'lead_opportunity_create' request.dealer.slug lead.slug %}"
|
|
class="btn btn-phoenix-primary btn-sm"
|
|
type="button"> <i class="fa-solid fa-plus me-2"></i>{{ _("Add Opportunity") }}</a>
|
|
{% endif %}
|
|
</div>
|
|
<div class="border-top border-bottom border-translucent"
|
|
id="leadDetailsTable">
|
|
<div class="table-responsive scrollbar mx-n1 px-1">
|
|
<table class="table fs-9 mb-0">
|
|
<thead>
|
|
<tr>
|
|
<th class="align-middle pe-6 text-uppercase text-start"
|
|
scope="col"
|
|
style="width:40%">{{ _("Car") }}</th>
|
|
<th class="align-middle text-start text-uppercase"
|
|
scope="col"
|
|
style="width:20%">{{ _("Probability") }}</th>
|
|
<th class="align-middle text-start text-uppercase white-space-nowrap"
|
|
scope="col"
|
|
style="width:20%">{{ _("Priority") }}</th>
|
|
<th class="align-middle pe-0 text-end" scope="col" style="width:10%;"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for opportunity in lead.get_opportunities %}
|
|
<tr class="hover-actions-trigger btn-reveal-trigger position-static">
|
|
<td class="align-middle text-start fw-bold text-body-tertiary ps-1">{{ opportunity.car }}</td>
|
|
<td class="align-middle text-start fw-bold text-body-tertiary ps-1">{{ opportunity.probability }}</td>
|
|
<td class="align-middle text-start fw-bold text-body-tertiary ps-1">{{ opportunity.priority|capfirst }}</td>
|
|
<td class="align-middle text-start fw-bold text-body-tertiary ps-1">
|
|
<a class="btn btn-sm btn-phoenix-primary"
|
|
href="{% url 'opportunity_detail' request.dealer.slug opportunity.slug %}">View</a>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="tab-pane fade"
|
|
id="tab-notes"
|
|
role="tabpanel"
|
|
aria-labelledby="notes-tab">
|
|
<div class="mb-1 d-flex align-items-center justify-content-between">
|
|
<h3 class="mb-4" id="scrollspyNotes">{{ _("Notes") }}</h3>
|
|
{% if perms.inventory.change_lead %}
|
|
<button class="btn btn-phoenix-primary btn-sm"
|
|
type="button"
|
|
onclick="reset_form()"
|
|
data-bs-toggle="modal"
|
|
data-bs-target="#noteModal">
|
|
<span class="fas fa-plus me-1"></span>{{ _("Add Note") }}
|
|
</button>
|
|
{% endif %}
|
|
</div>
|
|
<div class="border-top border-bottom border-translucent"
|
|
id="leadDetailsTable">
|
|
<div class="table-responsive scrollbar mx-n1 px-1">
|
|
<table class="table fs-9 mb-0">
|
|
<thead>
|
|
<tr>
|
|
<th class="align-middle pe-6 text-uppercase text-start"
|
|
scope="col"
|
|
style="width:40%">{{ _("Note") }}</th>
|
|
<th class="align-middle text-start text-uppercase white-space-nowrap"
|
|
scope="col"
|
|
style="width:40%">{{ _("Created On") }}</th>
|
|
<th class="align-middle text-start text-uppercase white-space-nowrap"
|
|
scope="col"
|
|
style="width:40%">{{ _("Last Updated") }}</th>
|
|
<th class="align-middle pe-0 text-end" scope="col" style="width:10%;"></th>
|
|
</tr>
|
|
</thead>
|
|
<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|naturalday|capfirst }}</td>
|
|
<td class="align-middle text-body-tertiary text-start white-space-nowrap">{{ note.updated|naturalday|capfirst }}</td>
|
|
<td class="align-middle text-end white-space-nowrap pe-0 action py-2">
|
|
{% if note.created_by == request.user %}
|
|
<a id="updateBtn"
|
|
href="#"
|
|
onclick="updateNote(this)"
|
|
class="btn btn-sm btn-phoenix-primary me-2"
|
|
data-pk="{{ note.pk }}"
|
|
data-note="{{ note.note|escapejs }}"
|
|
data-url="{% url 'update_note' request.dealer.slug note.pk %}"
|
|
data-bs-toggle="modal"
|
|
data-bs-target="#noteModal"
|
|
data-note-title="{{ _("Update") }}">
|
|
<i class='fas fa-pen-square text-primary ms-2'></i>
|
|
{{ _("Update") }}
|
|
</a>
|
|
<button class="btn btn-phoenix-danger btn-sm delete-btn"
|
|
data-url="{% url 'delete_note_to_lead' request.dealer.slug note.pk %}"
|
|
data-message="Are you sure you want to delete this note?"
|
|
data-bs-toggle="modal"
|
|
data-bs-target="#deleteModal">
|
|
<i class="fas fa-trash"></i>
|
|
</button>
|
|
{% endif %}
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="tab-pane fade"
|
|
id="tab-emails"
|
|
role="tabpanel"
|
|
aria-labelledby="emails-tab">
|
|
<div class="mb-1 d-flex justify-content-between align-items-center">
|
|
<h3 class="mb-0" id="scrollspyEmails">{{ _("Emails") }}</h3>
|
|
{% if perms.inventory.change_lead %}
|
|
{% comment %} <a href="{% url 'send_lead_email' request.dealer.slug lead.slug %}">
|
|
<button type="button" class="btn btn-sm btn-phoenix-primary">
|
|
<span class="fas fa-plus me-1"></span>
|
|
{% trans 'Send Email' %}
|
|
</button>
|
|
</a> {% endcomment %}
|
|
<button class="btn btn-phoenix-primary btn-sm"
|
|
type="button"
|
|
data-bs-toggle="modal"
|
|
data-bs-target="#emailModal"
|
|
hx-get="{% url 'send_lead_email' request.dealer.slug lead.slug %}"
|
|
hx-target="#emailModalBody"
|
|
hx-select=".email-form"
|
|
hx-swap="innerHTML">
|
|
<span class="fas fa-plus me-1"></span>{{ _("Send Email") }}
|
|
</button>
|
|
{% endif %}
|
|
</div>
|
|
<div>
|
|
<div class="scrollbar">
|
|
<ul class="nav nav-underline fs-9 flex-nowrap mb-1"
|
|
id="emailTab"
|
|
role="tablist">
|
|
<li class="nav-item me-3">
|
|
<a class="nav-link text-nowrap border-0 active"
|
|
id="mail-tab"
|
|
data-bs-toggle="tab"
|
|
href="#tab-mail"
|
|
aria-controls="mail-tab"
|
|
role="tab"
|
|
aria-selected="true">Mails ({{ emails.sent.count }})<span class="text-body-tertiary fw-normal"></span></a>
|
|
</li>
|
|
<li class="nav-item me-3">
|
|
<a class="nav-link text-nowrap border-0"
|
|
id="drafts-tab"
|
|
data-bs-toggle="tab"
|
|
href="#tab-drafts"
|
|
aria-controls="drafts-tab"
|
|
role="tab"
|
|
aria-selected="true">Drafts ({{ emails.draft.count }})<span class="text-body-tertiary fw-normal"></span></a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="tab-content" id="profileTabContent">
|
|
<div class="tab-pane fade show active"
|
|
id="tab-mail"
|
|
role="tabpanel"
|
|
aria-labelledby="mail-tab">
|
|
<div class="border-top border-bottom border-translucent"
|
|
id="allEmailsTable"
|
|
data-list='{"valueNames":["subject","sent","date","source","status"],"page":7,"pagination":true}'>
|
|
<div class="table-responsive scrollbar mx-n1 px-1">
|
|
<table class="table fs-9 mb-0">
|
|
<thead>
|
|
<tr>
|
|
<th class="white-space-nowrap fs-9 align-middle ps-0" style="width:26px;">
|
|
<div class="form-check mb-0 fs-8">
|
|
<input class="form-check-input"
|
|
type="checkbox"
|
|
data-bulk-select='{"body":"all-email-table-body"}' />
|
|
</div>
|
|
</th>
|
|
<th class="sort white-space-nowrap align-middle pe-3 ps-0 text-uppercase"
|
|
scope="col"
|
|
data-sort="subject"
|
|
style="width:31%;
|
|
min-width:350px">{{ _("Subject") }}</th>
|
|
<th class="sort align-middle pe-3 text-uppercase"
|
|
scope="col"
|
|
data-sort="sent"
|
|
style="width:15%;
|
|
min-width:130px">{{ _("Sent by") }}</th>
|
|
<th class="sort align-middle text-start text-uppercase"
|
|
scope="col"
|
|
data-sort="date"
|
|
style="min-width:165px">{{ _("Date") }}</th>
|
|
<th class="sort align-middle pe-0 text-uppercase"
|
|
scope="col"
|
|
style="width:15%;
|
|
min-width:100px">{{ _("Action") }}</th>
|
|
<th class="sort align-middle text-end text-uppercase"
|
|
scope="col"
|
|
data-sort="status"
|
|
style="width:15%;
|
|
min-width:100px">{{ _("Status") }}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="list" id="all-email-table-body">
|
|
{% for email in emails.sent %}
|
|
<tr class="hover-actions-trigger btn-reveal-trigger position-static">
|
|
<td class="fs-9 align-middle px-0 py-3">
|
|
<div class="form-check mb-0 fs-8">
|
|
<input class="form-check-input"
|
|
type="checkbox"
|
|
data-bulk-select-row='{"mail":{"subject":"Quary about purchased soccer socks","email":"jackson@mail.com"},"active":true,"sent":"Jackson Pollock","date":"Dec 29, 2021 10:23 am","source":"Call","type_status":{"label":"sent","type":"badge-phoenix-success"}}' />
|
|
</div>
|
|
</td>
|
|
<td class="subject order align-middle white-space-nowrap py-2 ps-0">
|
|
<a class="fw-semibold text-primary" href="">{{ email.subject }}</a>
|
|
<div class="fs-10 d-block">{{ email.to_email }}</div>
|
|
</td>
|
|
<td class="sent align-middle white-space-nowrap text-start fw-bold text-body-tertiary py-2">{{ email.from_email }}</td>
|
|
<td class="date align-middle white-space-nowrap text-body py-2">{{ email.created|naturalday }}</td>
|
|
<td class="align-middle white-space-nowrap ps-3">
|
|
<a class="text-body" href=""><span class="fa-solid fa-phone text-primary me-2"></span>{%trans "Call"%}</a>
|
|
</td>
|
|
<td class="status align-middle fw-semibold text-end py-2">
|
|
<span class="badge badge-phoenix fs-10 badge-phoenix-success">{%trans "sent"%}</span>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</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 class="tab-pane fade"
|
|
id="tab-drafts"
|
|
role="tabpanel"
|
|
aria-labelledby="drafts-tab">
|
|
<div class="border-top border-bottom border-translucent"
|
|
id="draftsEmailsTable"
|
|
data-list='{"valueNames":["subject","sent","date","source","status"],"page":7,"pagination":true}'>
|
|
<div class="table-responsive scrollbar mx-n1 px-1">
|
|
<table class="table fs-9 mb-0">
|
|
<thead>
|
|
<tr>
|
|
<th class="white-space-nowrap fs-9 align-middle ps-0" style="width:26px;">
|
|
<div class="form-check mb-0 fs-8">
|
|
<input class="form-check-input"
|
|
type="checkbox"
|
|
data-bulk-select='{"body":"drafts-email-table-body"}' />
|
|
</div>
|
|
</th>
|
|
<th class="sort white-space-nowrap align-middle pe-3 ps-0 text-uppercase"
|
|
scope="col"
|
|
data-sort="subject"
|
|
style="width:31%;
|
|
min-width:350px">{% trans "Subject" %}</th>
|
|
<th class="sort align-middle pe-3 text-uppercase"
|
|
scope="col"
|
|
data-sort="sent"
|
|
style="width:15%;
|
|
min-width:130px">{% trans "Sent by" %}</th>
|
|
<th class="sort align-middle text-start text-uppercase"
|
|
scope="col"
|
|
data-sort="date"
|
|
style="min-width:165px">{% trans "Date" %}</th>
|
|
<th class="sort align-middle pe-0 text-uppercase"
|
|
scope="col"
|
|
style="width:15%;
|
|
min-width:100px">{% trans "Action" %}</th>
|
|
<th class="sort align-middle text-end text-uppercase"
|
|
scope="col"
|
|
data-sort="status"
|
|
style="width:15%;
|
|
min-width:100px">{% trans "Status" %}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="list" id="drafts-email-table-body">
|
|
{% for email in emails.draft %}
|
|
<tr class="hover-actions-trigger btn-reveal-trigger position-static">
|
|
<td class="fs-9 align-middle px-0 py-3">
|
|
<div class="form-check mb-0 fs-8">
|
|
<input class="form-check-input"
|
|
type="checkbox"
|
|
data-bulk-select-row='{"mail":{"subject":"Quary about purchased soccer socks","email":"jackson@mail.com"},"active":true,"sent":"Jackson Pollock","date":"Dec 29, 2021 10:23 am","source":"Call","type_status":{"label":"sent","type":"badge-phoenix-success"}}' />
|
|
</div>
|
|
</td>
|
|
<td class="subject order align-middle white-space-nowrap py-2 ps-0">
|
|
<a class="fw-semibold text-primary" href="">{{ email.subject }}</a>
|
|
<div class="fs-10 d-block">{{ email.to_email }}</div>
|
|
</td>
|
|
<td class="sent align-middle white-space-nowrap text-start fw-bold text-body-tertiary py-2">{{ email.from_email }}</td>
|
|
<td class="date align-middle white-space-nowrap text-body py-2">{{ email.created }}</td>
|
|
<td class="align-middle white-space-nowrap ps-3">
|
|
<a class="text-body"
|
|
href="{% url 'send_lead_email_with_template' request.dealer.slug lead.slug email.pk %}"><span class="fa-solid fa-email text-primary me-2"></span>Send</a>
|
|
</td>
|
|
<td class="status align-middle fw-semibold text-end py-2">
|
|
<span class="badge badge-phoenix fs-10 badge-phoenix-warning">draft</span>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</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>
|
|
{% comment %} {% endcomment %}
|
|
<div class="tab-pane fade active show"
|
|
id="tab-tasks"
|
|
role="tabpanel"
|
|
aria-labelledby="tasks-tab">
|
|
<div class="mb-1 d-flex justify-content-between align-items-center">
|
|
<h3 class="mb-0" id="scrollspyEmails">{{ _("Tasks") }}</h3>
|
|
{% if perms.inventory.change_lead %}
|
|
{% comment %} <button class="btn btn-phoenix-primary btn-sm" type="button" data-bs-toggle="modal" data-bs-target="#taskModal"><span class="fas fa-plus me-1"></span>{{ _("Add Task") }}</button> {% endcomment %}
|
|
<button class="btn btn-phoenix-primary btn-sm"
|
|
type="button"
|
|
data-bs-toggle="modal"
|
|
data-bs-target="#scheduleModal">
|
|
<span class="fas fa-plus me-1"></span>{{ _("Add Task") }}
|
|
</button>
|
|
{% endif %}
|
|
</div>
|
|
<div>
|
|
<div class="border-top border-bottom border-translucent"
|
|
id="allEmailsTable"
|
|
data-list='{"valueNames":["subject","sent","date","source","status"],"page":7,"pagination":true}'>
|
|
<div class="table-responsive scrollbar mx-n1 px-1">
|
|
<table class="table fs-9 mb-0">
|
|
<thead>
|
|
<tr>
|
|
<th class="white-space-nowrap fs-9 align-middle ps-0" style="width:26px;">
|
|
<div class="form-check mb-0 fs-8">
|
|
<input class="form-check-input"
|
|
type="checkbox"
|
|
data-bulk-select='{"body":"all-email-table-body"}' />
|
|
</div>
|
|
</th>
|
|
<th class="sort white-space-nowrap align-middle pe-3 ps-0"
|
|
scope="col"
|
|
data-sort="subject"
|
|
style="width:31%;
|
|
min-width:100px">{%trans "Name"%}</th>
|
|
<th class="sort align-middle pe-3 text"
|
|
scope="col"
|
|
data-sort="sent"
|
|
style="width:15%;
|
|
min-width:400px">{%trans "Note"%}</th>
|
|
<th class="sort align-middle text-start"
|
|
scope="col"
|
|
data-sort="date"
|
|
style="min-width:100px">{%trans "Due Date"%}</th>
|
|
<th class="sort align-middle text-start"
|
|
scope="col"
|
|
data-sort="date"
|
|
style="min-width:100px">{%trans "Completed"%}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="list taskTable" id="all-tasks-table-body">
|
|
{% for task in schedules %}
|
|
{% include "partials/task.html" %}
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="row align-items-center justify-content-between py-2 pe-0 fs-9 mt-3">
|
|
<div class="col-auto d-flex">
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% include 'modal/delete_modal.html' %}
|
|
<!-- add update Modal -->
|
|
{% include "components/email_modal.html" %}
|
|
<!-- task Modal -->
|
|
{% include "components/task_modal.html" with content_type="lead" slug=lead.slug %}
|
|
<!-- note Modal -->
|
|
{% include "components/note_modal.html" with content_type="lead" slug=lead.slug %}
|
|
<!-- schedule Modal -->
|
|
{% include "components/schedule_modal.html" with content_type="lead" slug=lead.slug %}
|
|
{% endblock content %}
|
|
{% block customJS %}
|
|
<script>
|
|
function reset_form() {
|
|
document.querySelector('#id_note').value = ""
|
|
let form = document.querySelector('.add_note_form')
|
|
form.action = "{% url 'add_note' request.dealer.slug 'lead' lead.slug %}"
|
|
}
|
|
|
|
{% if messages %}
|
|
{% for message in messages %}
|
|
Toast.fire({
|
|
icon: "{{ message.tags }}",
|
|
titleText: "{{ message|safe }}"
|
|
});
|
|
{% endfor %}
|
|
{% endif %}
|
|
|
|
function openActionModal(leadId, currentAction, nextAction, nextActionDate) {
|
|
|
|
const modal = new bootstrap.Modal(document.getElementById('actionTrackingModal'));
|
|
document.getElementById('actionTrackingForm').setAttribute('hx-boost', 'false');
|
|
document.getElementById('leadId').value = leadId;
|
|
document.getElementById('currentAction').value = currentAction;
|
|
document.getElementById('nextAction').value = nextAction;
|
|
document.getElementById('nextActionDate').value = nextActionDate;
|
|
modal.show();
|
|
}
|
|
|
|
|
|
function notify(tag, msg) {
|
|
Toast.fire({
|
|
icon: tag,
|
|
titleText: msg
|
|
});
|
|
}
|
|
|
|
// Close modal after successful form submission
|
|
document.body.addEventListener('htmx:afterSwap', function(evt) {
|
|
if (evt.detail.target.id === 'main_content') {
|
|
var modal = bootstrap.Modal.getInstance(document.getElementById('exampleModal'));
|
|
if (modal) {
|
|
modal.hide();
|
|
}
|
|
}
|
|
});
|
|
|
|
// Cleanup modal backdrop if needed
|
|
document.body.addEventListener('htmx:beforeSwap', function(evt) {
|
|
if (evt.detail.target.id === 'main_content') {
|
|
var backdrops = document.querySelectorAll('.modal-backdrop');
|
|
backdrops.forEach(function(backdrop) {
|
|
backdrop.remove();
|
|
});
|
|
}
|
|
});
|
|
|
|
</script>
|
|
{% endblock customJS %}
|