672 lines
44 KiB
HTML
672 lines
44 KiB
HTML
{% extends 'base.html' %}
|
|
{% load i18n static humanize %}
|
|
{% block title %}{{ _("Opportunity Detail") }}{% endblock title %}
|
|
{% block content %}
|
|
<div class="row align-items-center justify-content-between g-3 mb-4">
|
|
<div class="col-12 col-md-auto">
|
|
<h2 class="mb-0">{{ _("Opportunity details")}}</h2>
|
|
</div>
|
|
<div class="col-12 col-md-auto d-flex">
|
|
|
|
<div>
|
|
<button class="btn px-3 btn-phoenix-secondary" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fa-solid fa-ellipsis"></span></button>
|
|
<ul class="dropdown-menu dropdown-menu-end p-0" style="z-index: 9999;">
|
|
<li>
|
|
{% if opportunity.estimate %}
|
|
<a class="dropdown-item" href="{% url 'estimate_detail' opportunity.estimate.pk %}">{{ _("View Quotation")}}</a>
|
|
{% else %}
|
|
<a class="dropdown-item" href="{% url 'estimate_create_from_opportunity' opportunity.slug %}">{{ _("Create Quotation")}}</a>
|
|
{% endif %}
|
|
</li>
|
|
<li><a class="dropdown-item" href="{% url 'update_opportunity' opportunity.slug %}">Update Opportunity</a></li>
|
|
<li><a class="dropdown-item" href="{% url 'update_opportunity' opportunity.slug %}">Update Stage</a></li>
|
|
<li><a class="dropdown-item text-danger" href="">Delete Opportunity</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row g-4 g-xl-6 other-information">
|
|
<div class="col-xl-5 col-xxl-4">
|
|
<div class="sticky-leads-sidebar">
|
|
<div class="card mb-3">
|
|
<div class="card-body">
|
|
<div class="row align-items-center g-3">
|
|
<div class="col-12 col-sm-auto flex-1">
|
|
{% if opportunity.car %}
|
|
<h3 class="fw-bolder mb-2 line-clamp-1"><span class="d-inline-block lh-sm me-1" data-feather="check-circle" style="height:16px;width:16px;"></span> {{ opportunity.car.id_car_make.get_local_name }} - {{ opportunity.car.id_car_model.get_local_name }} - {{ opportunity.car.year }}</h3>
|
|
{% endif %}
|
|
|
|
<div class="d-flex align-items-center mb-4">
|
|
{% if opportunity.car.finances %}
|
|
<h5 class="mb-0 me-4">{{ opportunity.car.finances.total }} <span class="fw-light"><span class="icon-saudi_riyal"></span></span></h5>
|
|
{% endif %}
|
|
</div>
|
|
<div class="d-md-flex d-xl-block align-items-center justify-content-between mb-5">
|
|
<div class="d-flex align-items-center mb-3 mb-md-0 mb-xl-3">
|
|
<div class="avatar avatar-xl me-3">
|
|
{% if opportunity.car.id_car_make.logo %}
|
|
<img class="rounded" src="{{ opportunity.car.id_car_make.logo.url }}" alt="" />
|
|
{% endif %}
|
|
</div>
|
|
<div>
|
|
{% if opportunity.customer %}
|
|
<h5>{{ opportunity.customer|capfirst}}</h5>
|
|
<div class=""><div class="text-body-secondary text-decoration-none">Individual<span class="fa-solid text-body-secondary fs-9 ms-2"></span></div>
|
|
{% else %}
|
|
<h5>{{ opportunity.organization|capfirst}}</h5>
|
|
<div class=""><div class="text-body-secondary text-decoration-none">Organization<span class="fa-solid text-body-secondary fs-9 ms-2"></span></div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div><span class="badge badge-phoenix badge-phoenix-primary">STAGE</span> : <span class="badge badge-phoenix badge-phoenix-success me-2">{{ opportunity.get_stage_display }}</span><span class="badge badge-phoenix badge-phoenix-danger me-2">{{ opportunity.get_status_display }}</span></div>
|
|
</div>
|
|
<div class="progress mb-2" style="height:5px">
|
|
<div class="progress-bar bg-primary-lighter" data-bs-theme="light" role="progressbar" style="width: {{ opportunity.probability }}%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
<div class="d-flex align-items-center justify-content-between">
|
|
<p class="mb-0"> {{ opportunity.get_status_display }}</p>
|
|
<div><span class="d-inline-block lh-sm me-1" data-feather="clock" style="height:16px;width:16px;"></span><span class="d-inline-block lh-sm"> {{ opportunity.created|naturaltime|capfirst}}</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card mb-3">
|
|
<div class="card-body">
|
|
<h4 class="mb-5 d-flex align-items-center"><span class="d-inline-block lh-sm me-1" data-feather="link" style="height:16px;width:16px;"></span> {{ _("Upcoming Events")}}</h4>
|
|
<div class="row g-3">
|
|
<div class="col-12 overflow-auto" style="max-height: 200px;">
|
|
<ul class="list-group list-group-flush">
|
|
{% for event in opportunity.get_schedules %}
|
|
<li class="list-group-item d-flex justify-content-between align-items-center">
|
|
<div class="d-flex align-items-center">
|
|
<span class="badge rounded-pill bg-phoenix-primary text-primary me-2 fs-9">{{ event.scheduled_type|capfirst }}</span>
|
|
<span class="fs-9">{{ event.purpose }}</span>
|
|
</div>
|
|
<div class="fs-9">{{ event.scheduled_at|naturaltime|capfirst }}</div>
|
|
</li>
|
|
{% empty %}
|
|
<li class="list-group-item text-center fs-9">{{ _("No upcoming events") }}</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h4 class="mb-5 d-flex align-items-center"><span class="d-inline-block lh-sm me-1" data-feather="link" style="height:16px;width:16px;"></span> {{ _("Related Records")}}</h4>
|
|
<div class="row g-3">
|
|
<div class="col-12">
|
|
<div class="mb-4">
|
|
<div class="d-flex flex-wrap justify-content-between mb-2">
|
|
<h5 class="mb-0 text-body-highlight me-2">{{ _("Estimate") }}</h5>
|
|
</div>
|
|
{% if opportunity.estimate %}
|
|
<a class="dropdown-item" href="{% url 'estimate_detail' opportunity.estimate.pk %}">{{ _("View Quotation")}}</a>
|
|
{% else %}
|
|
<p>{{ _("No Estimate") }}</p>
|
|
{% endif %}
|
|
</div>
|
|
<div class="mb-4">
|
|
<div class="d-flex flex-wrap justify-content-between mb-2">
|
|
<h5 class="mb-0 text-body-highlight me-2">{{ _("Invoice") }}</h5>
|
|
</div>
|
|
{% if opportunity.estimate.invoice %}
|
|
<a class="dropdown-item" href="{% url 'invoice_detail' opportunity.estimate.invoice.pk %}">{{ _("View Invoice")}}</a>
|
|
{% else %}
|
|
<p>{{ _("No Invoice") }}</p>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card mt-3">
|
|
<div class="card-body">
|
|
<h4 class="mb-5 d-flex align-items-center"><span class="d-inline-block lh-sm me-1" data-feather="clock" style="height:16px;width:16px;"></span> {{ _("System Information")}}</h4>
|
|
<div class="row g-3">
|
|
<div class="col-12">
|
|
<div class="mb-4">
|
|
<div class="d-flex flex-wrap justify-content-between mb-2">
|
|
<h5 class="mb-0 text-body-highlight me-2">{{ _("Created ") }}</h5>
|
|
</div>
|
|
{{ opportunity.created|naturalday|capfirst }}
|
|
</div>
|
|
<div class="mb-4">
|
|
<div class="d-flex flex-wrap justify-content-between mb-2">
|
|
<h5 class="mb-0 text-body-highlight me-2">{{ _("Last Updated") }}</h5>
|
|
</div>
|
|
</div>
|
|
{{ opportunity.updated }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xl-7 col-xxl-8">
|
|
<div class="card mb-5">
|
|
<div class="card-body">
|
|
<div class="row g-4 g-xl-1 g-xxl-3 justify-content-between">
|
|
<div class="col-sm-auto">
|
|
<div class="d-sm-block d-inline-flex d-md-flex flex-xl-column flex-xxl-row align-items-center align-items-xl-start align-items-xxl-center">
|
|
<div class="d-flex bg-primary-subtle rounded flex-center me-3 mb-sm-3 mb-md-0 mb-xl-3 mb-xxl-0" style="width:32px; height:32px"><span class="text-primary-dark" data-feather="layout" style="width:24px; height:24px"></span></div>
|
|
<div>
|
|
<p class="fw-bold mb-1">{{ _("Quotation Amount") }}</p>
|
|
<h4 class="fw-bolder text-nowrap">
|
|
{% if opportunity.estimate %}
|
|
{{ opportunity.estimate.get_invoiced_amount.invoice_amount_paid__sum }}
|
|
{% endif %}
|
|
</h4>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-auto">
|
|
<div class="d-sm-block d-inline-flex d-md-flex flex-xl-column flex-xxl-row align-items-center align-items-xl-start align-items-xxl-center border-start-sm ps-sm-5 border-translucent">
|
|
<div class="d-flex bg-success-subtle rounded flex-center me-3 mb-sm-3 mb-md-0 mb-xl-3 mb-xxl-0" style="width:32px; height:32px"><span class="text-success-dark icon-saudi_riyal" style="width:24px; height:24px"></span></div>
|
|
<div>
|
|
<p class="fw-bold mb-1">{{ _("Amount") }}</p>
|
|
<h4 class="fw-bolder text-nowrap">{{opportunity.amount}}</h4>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-auto">
|
|
<div class="d-sm-block d-inline-flex d-md-flex flex-xl-column flex-xxl-row align-items-center align-items-xl-start align-items-xxl-center border-start-sm ps-sm-5 border-translucent">
|
|
<div class="d-flex bg-success-subtle rounded flex-center me-3 mb-sm-3 mb-md-0 mb-xl-3 mb-xxl-0" style="width:32px; height:32px"><span class="text-success-dark icon-saudi_riyal" style="width:24px; height:24px"></span></div>
|
|
<div>
|
|
<p class="fw-bold mb-1">{{ _("Expected Revenue") }}</p>
|
|
<h4 class="fw-bolder text-nowrap">{{opportunity.expected_revenue}}</h4>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="px-xl-4 mb-7">
|
|
<div class="row mx-0 mx-sm-3 mx-lg-0 px-lg-0">
|
|
<div class="col-sm-12 col-xxl-6 border-bottom border-end-xxl border-translucent py-3">
|
|
<table class="w-100 table-stats table-stats">
|
|
<tr>
|
|
<th></th>
|
|
<th></th>
|
|
<th></th>
|
|
</tr>
|
|
<tr>
|
|
<td class="py-2">
|
|
<div class="d-inline-flex align-items-center">
|
|
<div class="d-flex bg-success-subtle rounded-circle flex-center me-3" style="width:24px; height:24px"><span class="text-success-dark" data-feather="bar-chart-2" style="width:16px; height:16px"></span></div>
|
|
<p class="fw-bold mb-0">Probability (%)</p>
|
|
</div>
|
|
</td>
|
|
<td class="py-2 d-none d-sm-block pe-sm-2">:</td>
|
|
<td class="py-2">
|
|
<p class="ps-6 ps-sm-0 fw-semibold mb-0 mb-0 pb-3 pb-sm-0">{{ opportunity.probability }} (%)</p>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="py-2">
|
|
<div class="d-flex align-items-center">
|
|
<div class="d-flex bg-success-subtle rounded flex-center me-3 mb-sm-3 mb-md-0 mb-xl-3 mb-xxl-0" style="width:32px; height:32px"><span class="text-info-dark icon-saudi_riyal" style="width:24px; height:24px"></span></div>
|
|
<p class="fw-bold mb-0">{{ _("Estimated Revenue") }}</p>
|
|
</div>
|
|
</td>
|
|
<td class="py-2 d-none d-sm-block pe-sm-2">:</td>
|
|
<td class="py-2">
|
|
<p class="ps-6 ps-sm-0 fw-semibold mb-0"><span class="icon-saudi_riyal"></span>{{ opportunity.expected_revenue }}</p>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<div class="col-sm-12 col-xxl-6 border-bottom border-translucent py-3">
|
|
<table class="w-100 table-stats">
|
|
<tr>
|
|
<th></th>
|
|
<th></th>
|
|
<th></th>
|
|
</tr>
|
|
<tr>
|
|
<td class="py-2">
|
|
<div class="d-inline-flex align-items-center">
|
|
<div class="d-flex bg-primary-subtle rounded-circle flex-center me-3" style="width:24px; height:24px"><span class="text-primary-dark" data-feather="phone" style="width:16px; height:16px"></span></div>
|
|
<p class="fw-bold mb-0">{{ _("Phone Number") }}</p>
|
|
</div>
|
|
</td>
|
|
<td class="py-2 d-none d-sm-block pe-sm-2">:</td>
|
|
<td class="py-2"><a class="ps-6 ps-sm-0 fw-semibold mb-0 pb-3 pb-sm-0 text-body" href="tel:{{ opportunity.customer.phone_number }}">{{ opportunity.customer.phone_number }}</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="py-2">
|
|
<div class="d-flex align-items-center">
|
|
<div class="d-flex bg-warning-subtle rounded-circle flex-center me-3" style="width:24px; height:24px"><span class="text-warning-dark" data-feather="mail" style="width:16px; height:16px"></span></div>
|
|
<p class="fw-bold mb-0">{{ _("Email") }}</p>
|
|
</div>
|
|
</td>
|
|
<td class="py-2 d-none d-sm-block pe-sm-2">:</td>
|
|
<td class="py-2"><a class="ps-6 ps-sm-0 fw-semibold mb-0 text-body" href="mailto:{{ opportunity.customer.email}}">{{ opportunity.customer.email}}</a></td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<div class="col-sm-12 col-xxl-6 border-end-xxl border-bottom border-bottom-xxl-0 py-3 border-translucent">
|
|
<table class="w-100 table-stats">
|
|
<tr>
|
|
<th></th>
|
|
<th></th>
|
|
<th></th>
|
|
</tr>
|
|
<tr>
|
|
<td class="py-2">
|
|
<div class="d-inline-flex align-items-center">
|
|
<div class="d-flex bg-success-subtle rounded-circle flex-center me-3" style="width:24px; height:24px"><span class="text-success-dark" data-feather="users" style="width:16px; height:16px"></span></div>
|
|
<p class="fw-bold mb-0">{{ _("Contact Name")}}</p>
|
|
</div>
|
|
</td>
|
|
<td class="py-2 d-none d-sm-block pe-sm-2">:</td>
|
|
<td class="py-2">
|
|
{% if opportunity.customer %}
|
|
<div class="ps-6 ps-sm-0 fw-semibold mb-0 pb-3 pb-sm-0">{{ opportunity.customer.full_name}}</div>
|
|
{% else %}
|
|
<div class="ps-6 ps-sm-0 fw-semibold mb-0 pb-3 pb-sm-0">{{ opportunity.organization}}</div>
|
|
{% endif %}
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="py-2">
|
|
<div class="d-flex align-items-center">
|
|
<div class="d-flex bg-info-subtle rounded-circle flex-center me-3" style="width:24px; height:24px"><span class="text-info-dark" data-feather="edit" style="width:16px; height:16px"></span></div>
|
|
<p class="fw-bold mb-0">{{ _("Assigned To") }}</p>
|
|
</div>
|
|
</td>
|
|
<td class="py-2 d-none d-sm-block pe-sm-2">:</td>
|
|
<td class="py-2">
|
|
{% if request.user.email == opportunity.staff.email %}
|
|
<div class="ps-6 ps-sm-0 fw-semibold mb-0">You</div>
|
|
{% else %}
|
|
<div class="ps-6 ps-sm-0 fw-semibold mb-0">{{ opportunity.staff.get_local_name}}</div>
|
|
{% endif %}
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<div class="col-sm-12 col-xxl-6 py-3">
|
|
<table class="w-100 table-stats">
|
|
<tr>
|
|
<th></th>
|
|
<th></th>
|
|
<th></th>
|
|
</tr>
|
|
<tr>
|
|
<td class="py-2">
|
|
<div class="d-inline-flex align-items-center">
|
|
<div class="d-flex bg-info-subtle rounded-circle flex-center me-3" style="width:24px; height:24px"><span class="text-info-dark" data-feather="clock" style="width:16px; height:16px"></span></div>
|
|
<p class="fw-bold mb-0">{{ _("Create Date")}}</p>
|
|
</div>
|
|
</td>
|
|
<td class="py-2 d-none d-sm-block pe-sm-2">:</td>
|
|
<td class="py-2">
|
|
<div class="ps-6 ps-sm-0 fw-semibold mb-0 pb-3 pb-sm-0">{{ opportunity.created|naturaltime|capfirst}}</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="py-2">
|
|
<div class="d-flex align-items-center">
|
|
<div class="d-flex bg-warning-subtle rounded-circle flex-center me-3" style="width:24px; height:24px"><span class="text-warning-dark" data-feather="clock" style="width:16px; height:16px"></span></div>
|
|
<p class="fw-bold mb-0">{{ _("Expected Closing Date")}}</p>
|
|
</div>
|
|
</td>
|
|
<td class="py-2 d-none d-sm-block pe-sm-2">:</td>
|
|
<td class="py-2">
|
|
<div class="ps-6 ps-sm-0 fw-semibold mb-0">{{ opportunity.expected_close_date|date}}</div>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<ul class="nav nav-underline fs-9 deal-details scrollbar flex-nowrap w-100 pb-1 mb-6" 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"></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"></span>{{ _("Notes") }}</a></li>
|
|
<li class="nav-item text-nowrap me-2" role="presentation"><a class="nav-link" id="meeting-tab" data-bs-toggle="tab" href="#tab-meeting" role="tab" aria-controls="tab-meeting" aria-selected="true"> <span class="fa-solid fa-video me-2 tab-icon-color"></span>{{ _("Meetings") }}</a></li>
|
|
{% comment %} <li class="nav-item text-nowrap me-2" role="presentation"><a class="nav-link" id="task-tab" data-bs-toggle="tab" href="#tab-task" role="tab" aria-controls="tab-task" aria-selected="true"> <span class="fa-solid fa-square-check me-2 tab-icon-color"></span>Task</a></li> {% endcomment %}
|
|
<li class="nav-item text-nowrap me-2" role="presentation"><a class="nav-link" id="call-tab" data-bs-toggle="tab" href="#tab-call" role="tab" aria-controls="tab-call" aria-selected="true"> <span class="fa-solid fa-phone me-2 tab-icon-color"></span>{{ _("Calls") }}</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"></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>
|
|
|
|
{% comment %} <li class="nav-item text-nowrap me-2" role="presentation"><a class="nav-link" id="attachments-tab" data-bs-toggle="tab" href="#tab-attachments" role="tab" aria-controls="tab-attachments" aria-selected="true"> <span class="fa-solid fa-paperclip me-2 tab-icon-color"></span>Attachments</a></li> {% endcomment %}
|
|
</ul>
|
|
<div class="tab-content" id="myTabContent">
|
|
<div class="tab-pane fade active show" id="tab-activity" role="tabpanel" aria-labelledby="activity-tab">
|
|
<h2 class="mb-4">Activity</h2>
|
|
<div class="row align-items-center g-3 justify-content-between justify-content-start">
|
|
<div class="col-12 col-sm-auto">
|
|
<div class="search-box mb-2 mb-sm-0">
|
|
<form class="position-relative">
|
|
<input class="form-control search-input search" type="search" placeholder="Search Activity" aria-label="Search" />
|
|
<span class="fas fa-search search-box-icon"></span>
|
|
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<div class="col-auto">
|
|
<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>
|
|
{% for activity in opportunity.get_activities %}
|
|
<div class="border-bottom border-translucent py-4">
|
|
<div class="d-flex">
|
|
<div class="d-flex bg-primary-subtle rounded-circle flex-center me-3 bg-primary-subtle" style="width:25px; height:25px">
|
|
{% 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 == "meeting" %}
|
|
<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>
|
|
<div class="flex-1">
|
|
<div class="d-flex justify-content-between flex-column flex-xl-row mb-2 mb-sm-0">
|
|
<div class="flex-1 me-2">
|
|
<h5 class="text-body-highlight lh-sm"></h5>
|
|
<p class="fs-9 mb-0">{{activity.notes}}</p>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex justify-content-between flex-column flex-xl-row mb-2 mb-sm-0">
|
|
<div class="flex-1 me-2">
|
|
<h5 class="text-body-highlight lh-sm"></h5>
|
|
{% if request.user.email == activity.created_by %}
|
|
<p class="fs-9 mb-0">by <a class="ms-1" href="#!">You</a></p>
|
|
{% else %}
|
|
<p class="fs-9 mb-0">by<a class="ms-1" href="#!">{{activity.created_by}}</a></p>
|
|
{% endif %}
|
|
</div>
|
|
<div class="fs-9"><span class="fa-regular fa-calendar-days text-primary me-2"></span><span class="fw-semibold">{{activity.created|naturalday|capfirst}}</span></div>
|
|
</div>
|
|
<p class="fs-9 mb-0"></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
<div class="tab-pane fade" id="tab-notes" role="tabpanel" aria-labelledby="notes-tab">
|
|
<h2 class="mb-4">Notes</h2>
|
|
<form action="{% url 'add_note_to_opportunity' opportunity.slug %}" method="post">
|
|
{% csrf_token %}
|
|
<textarea class="form-control mb-3" id="notes" rows="4" name="notes" required> </textarea>
|
|
<button type="submit" class="btn btn-primary mb-3">Add Note</button>
|
|
</form>
|
|
<div class="row gy-4 note-list">
|
|
<div class="col-12 col-xl-auto flex-1">
|
|
{% for note in opportunity.get_notes %}
|
|
<div class="border-2 border-dashed mb-4 pb-4 border-bottom border-translucent">
|
|
<p class="mb-1 text-body-highlight">{{ note.note }}</p>
|
|
<div class="d-flex">
|
|
<div class="fs-9 text-body-tertiary text-opacity-85"><span class="fa-solid fa-clock me-2"></span><span class="fw-semibold me-1">{{note.created|naturaltime|capfirst}}</span></div>
|
|
<p class="fs-9 mb-0 text-body-tertiary text-opacity-85">by<a class="ms-1 fw-semibold" href="#!">{{note.created_by}}</a></p>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="tab-pane fade" id="tab-meeting" role="tabpanel" aria-labelledby="meeting-tab">
|
|
<h2 class="mb-4">Meeting</h2>
|
|
<div class="row align-items-center g-2 flex-wrap justify-content-start mb-3">
|
|
<div class="col-12 col-sm-auto">
|
|
<div class="search-box mb-2 mb-sm-0">
|
|
<form class="position-relative">
|
|
<input class="form-control search-input search" type="search" placeholder="Search meeting" aria-label="Search" />
|
|
<span class="fas fa-search search-box-icon"></span>
|
|
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<div class="col-auto d-flex flex-md-grow-1">
|
|
<p class="mb-0 fs-9 text-body-tertiary fw-bold"><span class="fas fa-filter me-1 fw-extra-bold fs-10"></span>23 tasks</p>
|
|
<button class="btn btn-link p-0 ms-3 fs-9 text-primary fw-bold text-decoration-none"><span class="fas fa-sort me-1 fw-extra-bold fs-10"></span>Sorting</button>
|
|
</div>
|
|
<div class="col-auto">
|
|
<a href="{% url 'schedule_lead' opportunity.lead.slug %}" class="btn btn-primary"><span class="fa-solid fa-plus me-2"></span>Add Meeting </a>
|
|
</div>
|
|
</div>
|
|
<div class="row g-3">
|
|
{% for metting in opportunity.lead.get_meetings %}
|
|
<div class="col-xxl-6">
|
|
<div class="card h-100">
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between align-items-start flex-wrap mb-4 gap-2">
|
|
<div class="mb-3 mb-sm-0">
|
|
<h4 class="line-clamp-1 mb-2 mb-sm-1">{{metting.purpose}}</h4>
|
|
<div><span class="uil uil-calendar-alt text-primary me-2"></span><span class="fw-semibold text-body-secondary fs-9">{{metting.scheduled_at}}</span><span class="text-body-secondary fs-9"> - {{meeting.duration}}</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="tab-call" role="tabpanel" aria-labelledby="call-tab">
|
|
<div class="row align-items-center gx-4 gy-3 flex-wrap mb-3">
|
|
<div class="col-auto d-flex flex-1">
|
|
<h2 class="mb-0">Call</h2>
|
|
</div>
|
|
|
|
<div class="col-auto">
|
|
<a href="{% url 'schedule_lead' opportunity.lead.slug %}" class="btn btn-primary"><span class="fa-solid fa-plus me-2"></span>Add Call</a>
|
|
</div>
|
|
</div>
|
|
<pre>{{opportunity.get_all_notes}}</pre>
|
|
<div class="border-top border-bottom border-translucent" id="leadDetailsTable" data-list='{"valueNames":["name","description","create_date","create_by","last_activity"],"page":5,"pagination":true}'>
|
|
<div class="table-responsive scrollbar mx-n1 px-1">
|
|
<table class="table fs-9 mb-0">
|
|
<thead>
|
|
<tr>
|
|
<th class="sort white-space-nowrap align-middle pe-3 ps-0 text-uppercase" scope="col" data-sort="name" style="width:20%; min-width:100px">Purpose</th>
|
|
<th class="sort align-middle pe-6 text-uppercase" scope="col" data-sort="description" style="width:20%; max-width:60px">Scheduled By</th>
|
|
<th class="sort align-middle text-start text-uppercase" scope="col" data-sort="create_date" style="width:20%; min-width:115px">Created at</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="list" id="lead-details-table-body">
|
|
{% for call in opportunity.lead.get_calls %}
|
|
<tr class="hover-actions-trigger btn-reveal-trigger position-static">
|
|
<td class="description align-middle white-space-nowrap text-start fw-bold text-body-tertiary py-2 pe-6">{{call.purpose}}</td>
|
|
<td class="create_date text-end align-middle white-space-nowrap text-body py-2">{{call.scheduled_by}}</td>
|
|
<td class="create_by align-middle white-space-nowrap fw-semibold text-body-highlight">{{call.created_at|naturaltime|capfirst}}</td>
|
|
<td class="align-middle text-end white-space-nowrap pe-0 action py-2">
|
|
<div class="btn-reveal-trigger position-static">
|
|
<button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs-10"></span></button>
|
|
<div class="dropdown-menu dropdown-menu-end py-2"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Export</a>
|
|
<div class="dropdown-divider"></div><a class="dropdown-item text-danger" href="#!">Remove</a>
|
|
</div>
|
|
</div>
|
|
</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-emails" role="tabpanel" aria-labelledby="emails-tab">
|
|
<h2 class="mb-4">Emails</h2>
|
|
<div class="d-flex justify-content-end">
|
|
<a href="{% url 'send_lead_email' opportunity.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 ({{opportunity.lead.get_emails|length}})<span class="text-body-tertiary fw-normal"></span></a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="search-box w-100 mb-3">
|
|
<form class="position-relative">
|
|
<input class="form-control search-input search" type="search" placeholder="Search..." aria-label="Search" />
|
|
<span class="fas fa-search search-box-icon"></span>
|
|
</form>
|
|
</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 opportunity.lead.get_emails %}
|
|
<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="#!"><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>
|
|
</div>
|
|
</div>
|
|
<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-tasks-table-body">
|
|
{% for task in opportunity.get_tasks %}
|
|
{% include "partials/task.html" %}
|
|
{% 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 class="tab-pane fade" id="tab-attachments" role="tabpanel" aria-labelledby="attachments-tab">
|
|
<h2 class="mb-3">Attachments</h2>
|
|
<div class="border-top border-dashed pt-3 pb-4">
|
|
<div class="d-flex flex-between-center">
|
|
<div class="d-flex mb-1"><span class="fa-solid fa-image me-2 text-body-tertiary fs-9"></span>
|
|
<p class="text-body-highlight mb-0 lh-1">Silly_sight_1.png</p>
|
|
</div>
|
|
<div class="btn-reveal-trigger">
|
|
<button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h"></span></button>
|
|
<div class="dropdown-menu dropdown-menu-end py-2"><a class="dropdown-item" href="#!">Edit</a><a class="dropdown-item text-danger" href="#!">Delete</a><a class="dropdown-item" href="#!">Download</a><a class="dropdown-item" href="#!">Report abuse</a></div>
|
|
</div>
|
|
</div>
|
|
<p class="fs-9 text-body-tertiary mb-3"><span>768kB</span><span class="text-body-quaternary mx-1">| </span><a href="#!">Shantinan Mekalan </a><span class="text-body-quaternary mx-1">| </span><span class="text-nowrap">21st Dec, 12:56 PM</span></p><img class="rounded-2" src="{% static 'images/generic/40.png' %}" alt="" />
|
|
</div>
|
|
<div class="border-top border-dashed py-4">
|
|
<div class="d-flex flex-between-center">
|
|
<div>
|
|
<div class="d-flex align-items-center mb-1"><span class="fa-solid fa-image me-2 fs-9 text-body-tertiary"></span>
|
|
<p class="text-body-highlight mb-0 lh-1">All_images.zip</p>
|
|
</div>
|
|
<p class="fs-9 text-body-tertiary mb-0"><span>12.8 mB</span><span class="text-body-quaternary mx-1">|</span><a href="#!">Yves Tanguy </a><span class="text-body-quaternary mx-1">| </span><span class="text-nowrap">19th Dec, 08:56 PM</span></p>
|
|
</div>
|
|
<div class="btn-reveal-trigger">
|
|
<button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h"></span></button>
|
|
<div class="dropdown-menu dropdown-menu-end py-2"><a class="dropdown-item" href="#!">Edit</a><a class="dropdown-item text-danger" href="#!">Delete</a><a class="dropdown-item" href="#!">Download</a><a class="dropdown-item" href="#!">Report abuse</a></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="border-top border-dashed py-4">
|
|
<div class="d-flex flex-between-center">
|
|
<div>
|
|
<div class="d-flex align-items-center mb-1"><span class="fa-solid fa-file-lines me-2 fs-9 text-body-tertiary"></span>
|
|
<p class="text-body-highlight mb-0 lh-1">Project.txt</p>
|
|
</div>
|
|
<p class="fs-9 text-body-tertiary mb-0"><span>123 kB</span><span class="text-body-quaternary mx-1">| </span><a href="#!">Shantinan Mekalan </a><span class="text-body-quaternary mx-1">| </span><span class="text-nowrap">12th Dec, 12:56 PM</span></p>
|
|
</div>
|
|
<div class="btn-reveal-trigger">
|
|
<button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h"></span></button>
|
|
<div class="dropdown-menu dropdown-menu-end py-2"><a class="dropdown-item" href="#!">Edit</a><a class="dropdown-item text-danger" href="#!">Delete</a><a class="dropdown-item" href="#!">Download</a><a class="dropdown-item" href="#!">Report abuse </a></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% include "components/activity_modal.html" with content_type="opportunity" slug=opportunity.slug %}
|
|
{% include "components/task_modal.html" with content_type="opportunity" slug=opportunity.slug %}
|
|
{% endblock %} |