109 lines
5.6 KiB
HTML
109 lines
5.6 KiB
HTML
{% load i18n static humanize %}
|
|
{% load custom_filters %}
|
|
{% block customCSS %}
|
|
<style>
|
|
.bg-success-soft {
|
|
background-color: rgba(25, 135, 84, 0.1) !important;
|
|
opacity: .8;
|
|
}
|
|
.bg-danger-soft {
|
|
background-color: rgba(220, 53, 69, 0.1) !important;
|
|
opacity: .8;
|
|
}
|
|
</style>
|
|
{% endblock customCSS %}
|
|
|
|
{% for opportunity in opportunities %}
|
|
<div class="col-12 col-md-6 col-lg-4 col-xl-3">
|
|
<div class="card h-100
|
|
{% if opportunity.get_stage_display == 'Closed Won' %}bg-success-soft
|
|
{% elif opportunity.get_stage_display == 'Closed Lost' %}bg-danger-soft{% endif %}">
|
|
<div class="card-body">
|
|
<h5 class="mb-4">Opportunity for {{ opportunity.customer.customer_name }}</h5>
|
|
|
|
<div class="d-flex align-items-center justify-content-between mb-3">
|
|
<div class="d-flex gap-2">
|
|
{% if opportunity.get_stage_display == "Negotiation" %}
|
|
<span class="badge badge-phoenix fs-10 badge-phoenix-primary">{{ opportunity.get_stage_display }}</span>
|
|
{% elif opportunity.get_stage_display == "Discovery" %}
|
|
<span class="badge badge-phoenix fs-10 badge-phoenix-info">{{ opportunity.get_stage_display }}</span>
|
|
{% elif opportunity.get_stage_display == "Proposal" %}
|
|
<span class="badge badge-phoenix fs-10 badge-phoenix-warning">{{ opportunity.get_stage_display }}</span>
|
|
{% elif opportunity.get_stage_display == "Closed Won" %}
|
|
<span class="badge badge-phoenix fs-10 badge-phoenix-success">{{ opportunity.get_stage_display }}</span>
|
|
{% elif opportunity.get_stage_display == "Closed Lost" %}
|
|
<span class="badge badge-phoenix fs-10 badge-phoenix-danger">{{ opportunity.get_stage_display }}</span>
|
|
{% endif %}
|
|
<span class="badge badge-phoenix fs-10
|
|
{% if opportunity.get_stage_display == 'Won' %}badge-phoenix-success
|
|
{% elif opportunity.get_stage_display == 'Lost' %}badge-phoenix-danger{% endif %}">
|
|
{{ opportunity.get_status_display }}
|
|
</span>
|
|
</div>
|
|
<div class="d-flex align-items-center">
|
|
<i class="fa-regular fa-clock"></i>
|
|
<p class="mb-0 fs-9 fw-semibold text-body-tertiary">{{ opportunity.created|naturalday|capfirst }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="deals-company-agent d-flex justify-content-between mb-3">
|
|
<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.staff.name }}</p>
|
|
</div>
|
|
</div>
|
|
<table class="mb-3 w-100">
|
|
<tr>
|
|
<td class="py-1">
|
|
<div class="d-flex align-items-center">
|
|
<span class="me-2 text-body-tertiary"><span class="currency">{{ CURRENCY }}</span></span>
|
|
<p class="fw-semibold fs-9 mb-0 text-body-tertiary">{{ _("Expected Revenue")}}</p>
|
|
</div>
|
|
</td>
|
|
<td class="text-end">
|
|
<p class="fw-semibold fs-9 mb-0 text-body-emphasis"><span class="currency">{{ CURRENCY }}</span>{{ opportunity.expected_revenue }}</p>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td class="py-1">
|
|
<div class="d-flex align-items-center">
|
|
<i class="uil uil-calendar-alt"></i>
|
|
<p class="fw-semibold fs-9 mb-0 text-body-tertiary">{{ _("Closing Date")}}</p>
|
|
</div>
|
|
</td>
|
|
<td class="text-end">
|
|
<p class="fw-semibold fs-9 mb-0 text-body-emphasis">{{ opportunity.closing_date|naturalday|capfirst }}</p>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<p class="fs-9 mb-1 fw-bold">{{ _("Probability") }}: {{ opportunity.probability }}%</p>
|
|
<div class="progress mb-3" 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 class="d-flex gap-2">
|
|
<a class="btn btn-sm btn-phoenix-primary" href="{% url 'opportunity_detail' opportunity.slug %}">
|
|
{{ _("View Details") }} <i class="fa-solid fa-eye ms-2"></i>
|
|
</a>
|
|
<a class="btn btn-sm btn-phoenix-success" href="{% url 'update_opportunity' opportunity.slug %}">
|
|
{{ _("Update") }} <i class="fa-solid fa-pen ms-2"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %} |