135 lines
8.5 KiB
HTML
135 lines
8.5 KiB
HTML
{% extends 'base.html' %}
|
|
{% load i18n static %}
|
|
|
|
{% block content %}
|
|
|
|
|
|
<div class="row g-3">
|
|
<h2 class="mb-5">{{ _("Opportunities") }}</h2>
|
|
<div class="d-xl-flex justify-content-between">
|
|
<div class="mb-3">
|
|
<a class="btn btn-sm btn-phoenix-primary me-4" href="{% url 'opportunity_create' %}"><span class="fas fa-plus me-2"></span>{{ _("Add Opportunity") }}</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="px-4 px-lg-6 ">
|
|
<div class="deals-items-container">
|
|
<div class="deals scrollbar">
|
|
<div class="deals-col me-4">
|
|
|
|
<div class="w-100 min-vh-50">
|
|
|
|
{% for opportunity in opportunities %}
|
|
|
|
|
|
|
|
|
|
<div class="card mb-3">
|
|
<div class="card-body">
|
|
<h5 class="mb-2 ms-4">{{ opportunity.car.id_car_make.get_local_name }} - {{ opportunity.car.id_car_model.get_local_name }} - {{ opportunity.car.year }}</h5>
|
|
<a class="dropdown-indicator-icon position-absolute text-body-tertiary text-end"
|
|
href="#collapseWidthDeals-{{ opportunity.pk }}"
|
|
role="button"
|
|
data-bs-toggle="collapse"
|
|
aria-expanded="false"
|
|
aria-controls="collapseWidthDeals-{{ opportunity.pk }}">
|
|
<span class="fa-solid fa-angle-down text-end"></span>
|
|
</a>
|
|
<div class="d-flex align-items-center justify-content-between mb-3">
|
|
<div class="d-flex gap-3">
|
|
|
|
</div>
|
|
<div class="d-flex">
|
|
<span class="me-2" data-feather="clock" style="stroke-width:2;"></span>
|
|
<p class="mb-0 fs-9 fw-semibold text-body-tertiary date">{{ opportunity.created|date }}<span class="text-body-quaternary"> . {{ opportunity.created|time}}</span></p>
|
|
</div>
|
|
</div>
|
|
<div class="deals-items-head d-flex align-items-center mb-2">
|
|
<a class="text-primary fw-bold line-clamp-1 me-3 mb-0 fs-9" href="{% url 'opportunity_detail' opportunity.pk %}">{{ _("View") }}</a>
|
|
<p class="fs-10 mb-0 mt-1 d-none"><span class="me-1 text-body-quaternary" data-feather="grid" style="stroke-width:2; height: 12px; width: 12px"></span>{{ opportunity.get_stage_display }}</p>
|
|
<p class="ms-auto fs-9 text-body-emphasis fw-semibold mb-0 deals-revenue">{{ opportunity.car.finances.total }}</p>
|
|
</div>
|
|
<div class="deals-company-agent d-flex flex-between-center">
|
|
<div class="d-flex align-items-center"><span class="uil uil-user me-2"></span>
|
|
<p class="text-body-secondary fw-bold fs-10 mb-0">{{ opportunity.customer.get_full_name }}</p>
|
|
</div>
|
|
<div class="d-flex align-items-center"><span class="uil uil-headphones me-2"></span>
|
|
<p class="text-body-secondary fw-bold fs-10 mb-0">{{ opportunity.staff.name }}</p>
|
|
</div>
|
|
</div>
|
|
<div class="collapse" id="collapseWidthDeals-{{ opportunity.pk }}">
|
|
<div class="d-flex gap-2 mb-5"><span class="badge badge-phoenix fs-10 badge-phoenix-info">{{ opportunity.get_stage_display }}</span><span class="badge badge-phoenix fs-10 badge-phoenix-danger">{{ opportunity.get_status_display }}</span></div>
|
|
<table class="mb-4 w-100 table-stats table-stats">
|
|
<tr>
|
|
<th>{{ _("Details") }}</th>
|
|
<th>:</th>
|
|
<th></th>
|
|
</tr>
|
|
<tr>
|
|
<td class="py-1">
|
|
<div class="d-flex align-items-center"><span class="me-2 text-body-tertiary" data-feather="dollar-sign"></span>
|
|
<p class="fw-semibold fs-9 mb-0 text-body-tertiary">{{ _("Expected Revenue")}}</p>
|
|
</div>
|
|
</td>
|
|
<td class="d-none d-sm-block pe-sm-2">:</td>
|
|
<td class="py-1">
|
|
<p class="ps-6 ps-sm-0 fw-semibold fs-9 mb-0 mb-0 pb-3 pb-sm-0 text-body-emphasis">{{ opportunity.car.finances.total }}</p>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="py-1">
|
|
<div class="d-flex align-items-center"><span class="me-2 text-body-tertiary" data-feather="user" style="width:16px; height:16px"></span>
|
|
<p class="fw-semibold fs-9 mb-0 text-body-tertiary">{{ _("Contact") }}</p>
|
|
</div>
|
|
</td>
|
|
<td class=" d-none d-sm-block pe-sm-2">:</td>
|
|
<td class="py-1">
|
|
<p class="fw-semibold fs-9 mb-0 mb-0 pb-3 pb-sm-0 text-body-emphasis d-flex align-items-center gap-2"><a href=""> <span class="fa-solid fa-square-phone text-body-tertiary"></span></a><a href=""> <span class="fa-solid fa-square-envelope text-body-tertiary"></span></a><a href=""> <span class="fab fa-whatsapp-square text-body-tertiary"></span></a></p>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="py-1">
|
|
<div class="d-flex align-items-center"><span class="me-2 text-body-tertiary" data-feather="calendar" style="width:16px; height:16px"></span>
|
|
<p class="fw-semibold fs-9 mb-0 text-body-tertiary">{{ _("Closing Date")}}</p>
|
|
</div>
|
|
</td>
|
|
<td class=" d-none d-sm-block pe-sm-2">:</td>
|
|
<td class="py-1">
|
|
<p class="fw-semibold fs-9 mb-0 mb-0 pb-3 pb-sm-0 text-body-emphasis">{{ opportunity.closing_date }}</p>
|
|
</td>
|
|
</tr>
|
|
|
|
</table>
|
|
<p class="fs-9 mb-1 fw-bold"> {{ _("Probability") }}: %</p>
|
|
<div class="progress" style="height:16px">
|
|
{% if opportunity.probability >= 25 and opportunity.probability < 49 %}
|
|
<div class="progress-bar rounded-pill bg-danger-dark" role="progressbar" style="width: {{ opportunity.probability }}%" aria-valuenow="{{ opportunity.probability }}" aria-valuemin="0" aria-valuemax="100">
|
|
<span class="fw-bolder fs-9 text-sm-end me-1">{{ opportunity.probability }}</span>
|
|
</div>
|
|
{% elif opportunity.probability >= 50 and opportunity.probability <= 74 %}
|
|
<div class="progress-bar rounded-pill bg-warning-dark" role="progressbar" style="width: {{ opportunity.probability }}%" aria-valuenow="{{ opportunity.probability }}" aria-valuemin="0" aria-valuemax="100">
|
|
<span class="fw-bolder fs-9 text-sm-end me-1">{{ opportunity.probability }}</span>
|
|
</div>
|
|
{% elif opportunity.probability >= 75 and opportunity.probability <= 100 %}
|
|
<div class="progress-bar rounded-pill bg-success-dark" role="progressbar" style="width: {{ opportunity.probability }}%" aria-valuenow="{{ opportunity.probability }}" aria-valuemin="0" aria-valuemax="100">
|
|
<span class="fw-bolder fs-9 text-sm-end me-1">{{ opportunity.probability }}</span>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
|
|
|