184 lines
7.6 KiB
HTML
184 lines
7.6 KiB
HTML
{% extends 'base.html' %}
|
|
{% load i18n static %}
|
|
{% block title %}
|
|
{{ _("Leads Tracking") |capfirst }}
|
|
{% endblock title %}
|
|
{% block customCSS %}
|
|
<style>
|
|
.kanban-column {
|
|
border-radius: 8px;
|
|
padding: 1rem;
|
|
min-height: 500px;
|
|
}
|
|
.kanban-header {
|
|
position: relative;
|
|
font-weight: 600;
|
|
padding: 0.5rem 1rem;
|
|
margin-bottom: 1rem;
|
|
color: #333;
|
|
--pointed-edge: {% if LANGUAGE_CODE == 'en' %} right {% else %} left {% endif %};
|
|
clip-path: {% if LANGUAGE_CODE == 'en' %}
|
|
polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%)
|
|
{% else %}
|
|
polygon(15px 0, 100% 0, 100% 100%, 15px 100%, 0 50%)
|
|
{% endif %};
|
|
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;
|
|
}
|
|
.lead-card {
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 8px;
|
|
padding: 0.75rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
.lead-card small {
|
|
color: #6c757d;
|
|
}
|
|
.bg-success-soft {
|
|
background-color: rgba(17, 240, 66, 0.1) !important;
|
|
opacity: .8;
|
|
}
|
|
.bg-danger-soft {
|
|
background-color: rgba(230, 50, 68, 0.1) !important;
|
|
opacity: .8;
|
|
}
|
|
.bg-info-soft {
|
|
background-color: rgba(41, 197, 245, 0.1) !important;
|
|
opacity: .8;
|
|
}
|
|
.bg-negotiation-soft {
|
|
background-color: rgba(113, 206, 206, 0.1) !important;
|
|
opacity: .8;
|
|
}
|
|
</style>
|
|
{% endblock customCSS %}
|
|
{% block content %}
|
|
|
|
{% if leads %}
|
|
<div class="container-fluid my-4">
|
|
<div class="row justify-content-center">
|
|
<div class="col">
|
|
<div class="d-flex justify-content-between mb-3">
|
|
<h3>
|
|
{{ _("Lead Tracking") }}
|
|
<li class="fas fa-bullhorn text-primary ms-2"></li>
|
|
</h3>
|
|
</div>
|
|
<div class="row g-3">
|
|
<!-- New Lead -->
|
|
<div class="col-md">
|
|
<div class="kanban-column bg-body">
|
|
<div class="kanban-header opacity-75">
|
|
<span class="text-body">{{ _("New Leads") }} ({{ new|length }})</span>
|
|
</div>
|
|
{% for lead in new %}
|
|
<a href="{% url 'lead_detail' request.dealer.slug lead.slug %}">
|
|
<div class="lead-card">
|
|
<strong>{{ lead.full_name|capfirst }}</strong>
|
|
<br>
|
|
<small>{{ lead.email }}</small>
|
|
<br>
|
|
<small>{{ lead.phone_number }}</small>
|
|
</div>
|
|
</a>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
<!-- Follow Ups -->
|
|
<div class="col-md">
|
|
<div class="kanban-column bg-body">
|
|
<div class="kanban-header opacity-75">
|
|
<span class="text-body">{{ _("Follow Ups") }} ({{ follow_up|length }})</span>
|
|
</div>
|
|
{% for lead in follow_up %}
|
|
<a href="{% url 'lead_detail' request.dealer.slug lead.slug %}">
|
|
<div class="lead-card">
|
|
<strong>{{ lead.full_name|capfirst }}</strong>
|
|
<br>
|
|
<small>{{ lead.email }}</small>
|
|
<br>
|
|
<small>{{ lead.phone_number }}</small>
|
|
</div>
|
|
</a>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
<!-- Negotiation -->
|
|
<div class="col-md">
|
|
<div class="kanban-column bg-body">
|
|
<div class="kanban-header opacity-75">
|
|
<span class="text-body">{{ _("Negotiation Ups") }} ({{ follow_up|length }})</span>
|
|
</div>
|
|
{% for lead in negotiation %}
|
|
<a href="{% url 'lead_detail' request.dealer.slug lead.slug %}">
|
|
<div class="lead-card">
|
|
<strong>{{ lead.full_name|capfirst }}</strong>
|
|
<br>
|
|
<small>{{ lead.email }}</small>
|
|
<br>
|
|
<small>{{ lead.phone_number }}</small>
|
|
</div>
|
|
</a>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
<!-- Won -->
|
|
<div class="col-md">
|
|
<div class="kanban-column bg-body">
|
|
<div class="kanban-header bg-success-light opacity-75">
|
|
<span class="text-body">{{ _("Won") }} ({{ won|length }}) ({{ follow_up|length }})</span>
|
|
</div>
|
|
{% for lead in won %}
|
|
<a href="{% url 'lead_detail' request.dealer.slug lead.slug %}">
|
|
<div class="lead-card">
|
|
<strong>{{ lead.full_name|capfirst }}</strong>
|
|
<br>
|
|
<small>{{ lead.email }}</small>
|
|
<br>
|
|
<small>{{ lead.phone_number }}</small>
|
|
</div>
|
|
</a>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
<!-- Lose -->
|
|
<div class="col-md">
|
|
<div class="kanban-column bg-body">
|
|
<div class="kanban-header bg-danger-light opacity-75">{{ _("Lost") }} ({{ lose|length }})</div>
|
|
{% for lead in lose %}
|
|
<a href="{% url 'lead_detail' request.dealer.slug lead.slug %}">
|
|
<div class="lead-card">
|
|
<strong>{{ lead.full_name|capfirst }}</strong>
|
|
<br>
|
|
<small>{{ lead.email }}</small>
|
|
<br>
|
|
<small>{{ lead.phone_number }}</small>
|
|
</div>
|
|
</a>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
{% url 'lead_create' request.dealer.slug as create_lead_url %}
|
|
{% include "empty-illustration-page.html" with value="lead" url=create_lead_url %}
|
|
{% endif %}
|
|
{% endblock %}
|