728 lines
42 KiB
HTML
728 lines
42 KiB
HTML
{% extends 'base.html' %}
|
|
{% load i18n static humanize %}
|
|
{% load crispy_forms_tags %}
|
|
|
|
{% block customCSS %}
|
|
<style>
|
|
.main-tab li:last-child {
|
|
margin-left: auto;
|
|
}
|
|
.completed-task {
|
|
text-decoration: line-through;
|
|
opacity: 0.7;
|
|
}
|
|
.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">
|
|
<div class="modal fade" id="actionTrackingModal" tabindex="-1" aria-labelledby="actionTrackingModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="actionTrackingModalLabel">{{ _("Update Lead Actions") }}</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<form id="actionTrackingForm" method="post">
|
|
<div class="modal-body">
|
|
{% csrf_token %}
|
|
<input type="hidden" id="leadId" name="lead_id">
|
|
|
|
<div class="mb-3">
|
|
<label for="currentAction" class="form-label">{{ _("Current Action") }}</label>
|
|
<select class="form-select" id="currentAction" name="current_action" required>
|
|
<option value="">{{ _("Select Action") }}</option>
|
|
<option value="follow_up">{{ _("Follow Up") }}</option>
|
|
<option value="negotiation">{{ _("Negotiation") }}</option>
|
|
<option value="won">{{ _("Won") }}</option>
|
|
<option value="lost">{{ _("Lost") }}</option>
|
|
<option value="closed">{{ _("Closed") }}</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="nextAction" class="form-label">{{ _("Next Action") }}</label>
|
|
<select class="form-select" id="nextAction" name="next_action" required>
|
|
<option value="">{{ _("Select Next Action") }}</option>
|
|
<option value="no_action">{{ _("No Action") }}</option>
|
|
<option value="call">{{ _("Call") }}</option>
|
|
<option value="meeting">{{ _("Meeting") }}</option>
|
|
<option value="email">{{ _("Email") }}</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="nextActionDate" class="form-label">{{ _("Next Action Date") }}</label>
|
|
<input type="datetime-local" class="form-control" id="nextActionDate" name="next_action_date">
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="actionNotes" class="form-label">{{ _("Notes") }}</label>
|
|
<textarea class="form-control" id="actionNotes" name="action_notes" rows="3"></textarea>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ _("Close") }}</button>
|
|
<button type="submit" class="btn btn-primary">{{ _("Save Changes") }}</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row align-items-center justify-content-between g-3 mb-3">
|
|
<div class="col-12 col-md-auto">
|
|
<h4 class="mb-0">{{ _("Lead Details")}}</h4>
|
|
</div>
|
|
<div class="col-12 col-md-auto">
|
|
<div class="d-flex">
|
|
<div class="flex-1 d-md-none">
|
|
<button class="btn px-3 btn-phoenix-secondary text-body-tertiary me-2"><span class="fa-solid fa-bars"></span></button>
|
|
</div>
|
|
</div>
|
|
</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="d-flex justify-content-between align-items-center mb-2 d-md-none">
|
|
<h3 class="mb-0">{{ _("Lead Details")}}</h3>
|
|
<button class="btn p-0" ><span class="uil uil-times fs-7"></span></button>
|
|
</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 flex-1">
|
|
<h3 class="fw-bolder mb-2">{{ lead.first_name }} {{ lead.last_name }}</h3>
|
|
{% if lead.staff %}
|
|
<p class="fs-8 mb-0 white-space-nowrap fw-bold">{{ _("Assigned to")}}: <span class="fw-light">{{ lead.staff }}</span></p>
|
|
{% else %}
|
|
<p class="mb-0 fw-bold">{{ _("Not Assigned")}}</p>
|
|
{% endif %}
|
|
</div>
|
|
<div class="col-6 col-sm-auto flex-1">
|
|
|
|
<h5 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 == "pending" %}
|
|
<span class="badge badge-phoenix badge-phoenix-warning"><span class="badge-label">{{_("Pending")}}</span><span class="fa fa-clock-o ms-1"></span></span>
|
|
{% elif lead.status == "in_progress" %}
|
|
<span class="badge badge-phoenix badge-phoenix-info"><span class="badge-label">{{_("In Progress")}}</span><span class="fa fa-wrench ms-1"></span></span>
|
|
{% elif lead.status == "qualified" %}
|
|
<span class="badge badge-phoenix badge-phoenix-success"><span class="badge-label">{{_("Qualified")}}</span><span class="fa fa-check ms-1"></span></span>
|
|
{% elif lead.status == "canceled" %}
|
|
<span class="badge badge-phoenix badge-phoenix-danger"><span class="badge-label">{{_("Canceled")}}</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 flex-1">
|
|
<h5 class="fw-bolder mb-2">{{ _("Car Requested") }}</h5>
|
|
{{ lead.id_car_make.get_local_name }} - {{ lead.id_car_model.get_local_name }} {{ lead.year }}
|
|
</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 mb-0">{{ _("Email") }}</h5>
|
|
</div>
|
|
<a href="{{ lead.email}}">{{ lead.email }}</a>
|
|
</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 mb-0">{{ _("Phone") }}</h5>
|
|
</div>
|
|
<a href="{{ lead.phone_number}}">{{ lead.phone_number}} </a>
|
|
</div>
|
|
<div class="mb-3">
|
|
<div class="d-flex align-items-center mb-1"><span class="me-2 uil uil-dollar-alt"></span>
|
|
<h5 class="text-body-highlight mb-0">{{ _("Salary")}}</h5>
|
|
</div>
|
|
<p class="mb-0 text-body-secondary">{{lead.salary}} </p>
|
|
</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 mb-0">{{ _("Created")}}</h5>
|
|
</div>
|
|
<p class="mb-0 text-body-secondary">{{ lead.created|naturalday|capfirst }}</p>
|
|
</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 mb-0">{{ _("Lead Source")}}</h5>
|
|
</div>
|
|
<p class="mb-0 text-body-secondary">{{ lead.source|upper }}</p>
|
|
</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 mb-0">{{ _("Lead Channel")}}</h5>
|
|
</div>
|
|
<p class="mb-0 text-body-secondary">{{ lead.channel|upper }}</p>
|
|
</div>
|
|
<div class="mb-3">
|
|
<div class="d-flex align-items-center mb-1"><span class="me-2 uil uil-estate"></span>
|
|
<h5 class="mb-0">{{ _("Address") }}</h5>
|
|
</div>
|
|
<p class="mb-0 text-body-secondary">{{ lead.address}}</p>
|
|
</div>
|
|
<div class="mb-3">
|
|
<div class="d-flex align-items-center mb-1"><span class="me-2 uil uil-map"></span>
|
|
<h5 class="mb-0 text-body-highlight">{{ _("City") }}</h5>
|
|
</div>
|
|
<p class="mb-0 text-body-secondary">{{ lead.city }}</p>
|
|
</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 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></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="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="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>
|
|
<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>
|
|
<li class="nav-item text-nowrap me-2" role="presentation"><a class="nav-link" 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 ml-auto" role="presentation">
|
|
<button class="btn btn-info btn-sm" type="button" data-bs-toggle="modal" data-bs-target="#exampleModal"> <i class="fa-solid fa-user-plus me-2"></i> Create Opportunity</button>
|
|
<button class="btn btn-primary btn-sm" type="button" data-bs-toggle="modal" data-bs-target="#exampleModal"> <i class="fa-solid fa-user-plus me-2"></i> Reassign Lead</button>
|
|
<button class="btn btn-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' lead.pk %}" method="post">
|
|
{% csrf_token %}
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="exampleModalLabel">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-primary" type="submit">Save</button>
|
|
<button class="btn btn-outline-primary" type="button" data-bs-dismiss="modal">Cancel</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
<div class="tab-content" id="myTabContent">
|
|
<div class="tab-pane fade active show" 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="scrollspyTask">{{ _("Activities") }} <span class="fw-light fs-7">({{ activities.count}})</span></h3>
|
|
<button class="btn btn-phoenix-primary btn-sm" type="button" data-bs-toggle="modal" data-bs-target="#activityModal"><span class="fas fa-plus me-1"></span>{{ _("Add Activity") }}</button>
|
|
</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 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 == "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>
|
|
{% 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-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>
|
|
<a id="addBtn" href="#" class="btn btn-sm btn-phoenix-primary mb-3 btn-sm" data-url="{% url 'add_note_to_lead' lead.pk %}" data-bs-toggle="modal" data-bs-target="#noteModal" data-note-title="{{ _("Add") }}<i class='fa fa-plus-circle text-success ms-2'></i>">
|
|
<span class="fas fa-plus me-1"></span>
|
|
{% trans 'Add Note' %}
|
|
</a>
|
|
</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" scope="col" style="width:20%;">{{ _("Created By")}}</th>
|
|
<th class="align-middle text-start text-uppercase white-space-nowrap" scope="col" style="width:20%;">{{ _("Created On")}}</th>
|
|
<th class="align-middle pe-0 text-end" scope="col" style="width:10%;"> </th>
|
|
</tr>
|
|
</thead>
|
|
<tbody >
|
|
{% 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>
|
|
{% if note.created_by.staff %}
|
|
<td class="align-middle white-space-nowrap text-start white-space-nowrap">{{ note.created_by.staff.name }}</td>
|
|
{% else %}
|
|
<td class="align-middle white-space-nowrap text-start white-space-nowrap">{{ note.created_by.dealer.get_local_name|default:note.created_by.dealer.name }}</td>
|
|
{% endif %}
|
|
<td class="align-middle text-body-tertiary text-start white-space-nowrap">{{ note.created|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="#" class="btn btn-sm btn-phoenix-primary me-2" data-url="{% url 'update_note_to_lead' 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>">
|
|
<i class="fas fa-pen"></i>
|
|
</a>
|
|
<button class="btn btn-phoenix-danger btn-sm delete-btn"
|
|
data-url="{% url 'delete_note_to_lead' 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>
|
|
<a href="{% url 'send_lead_email' 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>
|
|
</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>Call</a></td>
|
|
<td class="status align-middle fw-semibold text-end py-2"><span class="badge badge-phoenix fs-10 badge-phoenix-success">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">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="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' 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" 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>
|
|
<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>
|
|
</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 text-uppercase" scope="col" data-sort="subject" style="width:31%; min-width:350px">Title</th>
|
|
<th class="sort align-middle pe-3 text-uppercase" scope="col" data-sort="sent" style="width:15%; min-width:130px">Assigned to</th>
|
|
<th class="sort align-middle text-start text-uppercase" scope="col" data-sort="date" style="min-width:165px">Due Date</th>
|
|
<th class="sort align-middle text-start text-uppercase" scope="col" data-sort="date" style="min-width:165px">Completed</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="list" id="all-email-table-body">
|
|
{% for task in tasks %}
|
|
<tr class="task-{{task.pk}} hover-actions-trigger btn-reveal-trigger position-static {% if task.completed %}completed-task{% endif %}">
|
|
<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" hx-post="{% url 'update_task' task.pk %}" hx-trigger="change" hx-swap="outerHTML" hx-select=".task-{{task.pk}}" hx-target=".task-{{task.pk}}" />
|
|
</div>
|
|
</td>
|
|
<td class="subject order align-middle white-space-nowrap py-2 ps-0"><a class="fw-semibold text-primary" href="">{{task.title}}</a>
|
|
<div class="fs-10 d-block">{{task.description}}</div>
|
|
</td>
|
|
<td class="sent align-middle white-space-nowrap text-start fw-bold text-body-tertiary py-2">{{task.assigned_to}}</td>
|
|
<td class="date align-middle white-space-nowrap text-body py-2">{{task.created|naturalday|capfirst}}</td>
|
|
<td class="date align-middle white-space-nowrap text-body py-2">
|
|
{% if task.completed %}
|
|
<span class="badge badge-phoenix fs-10 badge-phoenix-success"><i class="fa-solid fa-check"></i></span>
|
|
{% else %}
|
|
<span class="badge badge-phoenix fs-10 badge-phoenix-warning"><i class="fa-solid fa-xmark"></i></span>
|
|
{% endif %}
|
|
</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>
|
|
{% include 'modal/delete_modal.html' %}
|
|
<!-- add update Modal -->
|
|
<div class="modal fade" id="noteModal" tabindex="-1" aria-labelledby="noteModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-md">
|
|
<div class="modal-content">
|
|
<div class="modal-header justify-content-between align-items-start gap-5 px-4 pt-4 pb-3 border-0">
|
|
<h4 class="modal-title" id="noteModalLabel">{% trans 'Notes' %}</h4>
|
|
<button class="btn p-0 text-body-quaternary fs-6" data-bs-dismiss="modal" aria-label="Close">
|
|
<span class="fas fa-times"></span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<!-- Content will be loaded here via AJAX -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- activity Modal -->
|
|
{% include "components/activity_modal.html" with content_type="lead" slug=lead.slug %}
|
|
<!-- task Modal -->
|
|
<div class="modal fade" id="taskModal" tabindex="-1" aria-labelledby="taskModalLabel" aria-hidden="true">
|
|
|
|
<div class="modal-dialog modal-md">
|
|
<div class="modal-content">
|
|
<div class="modal-header justify-content-between align-items-start gap-5 px-4 pt-4 pb-3 border-0">
|
|
<h4 class="modal-title" id="noteModalLabel">{% trans 'Task' %}</h4>
|
|
<button class="btn p-0 text-body-quaternary fs-6" data-bs-dismiss="modal" aria-label="Close">
|
|
<span class="fas fa-times"></span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form action="{% url 'add_task' 'lead' lead.slug %}" method="post" class="add_task_form">
|
|
{% csrf_token %}
|
|
{{ staff_task_form|crispy }}
|
|
<button type="submit" class="btn btn-success w-100">{% trans 'Save' %}</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock content %}
|
|
|
|
{% block customJS %}
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
const noteModal = document.getElementById("noteModal");
|
|
const modalTitle = document.getElementById("noteModalLabel");
|
|
|
|
const modalBody = noteModal.querySelector(".modal-body");
|
|
|
|
noteModal.addEventListener("show.bs.modal", 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);
|
|
});
|
|
});
|
|
});
|
|
|
|
let Toast = Swal.mixin({
|
|
toast: true,
|
|
position: "top-end",
|
|
showConfirmButton: false,
|
|
timer: 3000,
|
|
timerProgressBar: true,
|
|
didOpen: (toast) => {
|
|
toast.onmouseenter = Swal.stopTimer;
|
|
toast.onmouseleave = Swal.resumeTimer;
|
|
}
|
|
});
|
|
|
|
// Display Django messages
|
|
{% 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('leadId').value = leadId;
|
|
document.getElementById('currentAction').value = currentAction;
|
|
document.getElementById('nextAction').value = nextAction;
|
|
document.getElementById('nextActionDate').value = nextActionDate;
|
|
modal.show();
|
|
}
|
|
|
|
document.getElementById('actionTrackingForm').addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
const formData = new FormData(this);
|
|
|
|
// Show loading indicator
|
|
Swal.fire({
|
|
toast: true,
|
|
icon: 'info',
|
|
text: 'Please wait...',
|
|
allowOutsideClick: false,
|
|
position: "top-end",
|
|
showConfirmButton: false,
|
|
timer: 2000,
|
|
timerProgressBar: false,
|
|
didOpen: (toast) => {
|
|
toast.onmouseenter = Swal.stopTimer;
|
|
toast.onmouseleave = Swal.resumeTimer;
|
|
}
|
|
});
|
|
|
|
fetch("{% url 'update_lead_actions' %}", {
|
|
method: 'POST',
|
|
body: formData,
|
|
headers: {
|
|
'X-CSRFToken': '{{ csrf_token }}'
|
|
}
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
Swal.close();
|
|
if (data.success) {
|
|
// Success notification
|
|
Swal.fire({
|
|
toast: true,
|
|
icon: 'success',
|
|
position: "top-end",
|
|
text: data.message || 'Actions updated successfully',
|
|
showConfirmButton: false,
|
|
timer: 2000,
|
|
timerProgressBar: false,
|
|
didOpen: (toast) => {
|
|
toast.onmouseenter = Swal.stopTimer;
|
|
toast.onmouseleave = Swal.resumeTimer;
|
|
}
|
|
}).then(() => {
|
|
location.reload(); // Refresh after user clicks OK
|
|
});
|
|
} else {
|
|
// Error notification
|
|
Swal.fire({
|
|
toast: true,
|
|
icon: 'error',
|
|
position: "top-end",
|
|
text: data.message || 'Failed to update actions',
|
|
showConfirmButton: false,
|
|
timer: 2000,
|
|
timerProgressBar: false,
|
|
didOpen: (toast) => {
|
|
toast.onmouseenter = Swal.stopTimer;
|
|
toast.onmouseleave = Swal.resumeTimer;
|
|
}
|
|
});
|
|
}
|
|
})
|
|
.catch(error => {
|
|
Swal.close();
|
|
console.error('Error:', error);
|
|
Swal.fire({
|
|
toast: true,
|
|
icon: 'error',
|
|
position: "top-end",
|
|
text: 'An unexpected error occurred',
|
|
showConfirmButton: false,
|
|
timer: 2000,
|
|
timerProgressBar: false,
|
|
didOpen: (toast) => {
|
|
toast.onmouseenter = Swal.stopTimer;
|
|
toast.onmouseleave = Swal.resumeTimer;
|
|
}
|
|
});
|
|
});
|
|
});
|
|
|
|
// Helper function for notifications
|
|
function notify(tag, msg) {
|
|
Toast.fire({
|
|
icon: tag,
|
|
titleText: msg
|
|
});
|
|
}
|
|
</script>
|
|
{% endblock customJS %}
|