152 lines
4.4 KiB
HTML
152 lines
4.4 KiB
HTML
{% extends 'base.html' %}
|
|
{% load i18n static %}
|
|
{% block title %}{{ _('Leads')|capfirst }}{% endblock title %}
|
|
|
|
{% block customCSS %}
|
|
<style>
|
|
.kanban-column {
|
|
background-color: #f8f9fa;
|
|
border-radius: 8px;
|
|
padding: 1rem;
|
|
min-height: 500px;
|
|
}
|
|
.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;
|
|
}
|
|
.lead-card {
|
|
background-color: white;
|
|
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 %}
|
|
<div class="container-fluid my-4">
|
|
<div class="d-flex justify-content-between mb-3">
|
|
<h3>Lead Tracking</h3>
|
|
</div>
|
|
|
|
<div class="row g-3">
|
|
<!-- New Lead -->
|
|
<div class="col-md">
|
|
<div class="kanban-column">
|
|
<div class="kanban-header">New Leads ({{new|length}})</div>
|
|
{% for lead in new %}
|
|
<a href="{% url 'lead_detail' 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">
|
|
<div class="kanban-header">Follow Ups ({{follow_up|length}})</div>
|
|
{% for lead in follow_up %}
|
|
<a href="{% url 'lead_detail' 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">
|
|
<div class="kanban-header">Negotiation ({{negotiation|length}})</div>
|
|
{% for lead in negotiation %}
|
|
<a href="{% url 'lead_detail' 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">
|
|
<div class="kanban-header">Won ({{won|length}})</div>
|
|
{% for lead in won %}
|
|
<a href="{% url 'lead_detail' 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">
|
|
<div class="kanban-header">Lose ({{lose|length}})</div>
|
|
{% for lead in lose %}
|
|
<a href="{% url 'lead_detail' 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>
|
|
{% endblock %} |