mirror of
https://git.imnavajas.es/jjimenez/erp-imprimelibros.git
synced 2026-01-21 00:00:26 +00:00
473 lines
21 KiB
HTML
473 lines
21 KiB
HTML
<!doctype html>
|
|
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout}">
|
|
|
|
<th:block layout:fragment="pagetitle">
|
|
<!--page title-->
|
|
<div th:replace="partials/title-meta :: title-meta('Leads')"></div>
|
|
</th:block>
|
|
|
|
<head>
|
|
<!-- Sweet Alert css-->
|
|
<link href="/assets/libs/sweetalert2/sweetalert2.min.css" rel="stylesheet" type="text/css" />
|
|
</head>
|
|
|
|
<body>
|
|
<div layout:fragment="content">
|
|
<div th:replace="partials/page-title :: page-title('Leads','CRM')"></div>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<div class="card" id="leadsList">
|
|
<div class="card-header border-0">
|
|
|
|
<div class="row g-4 align-items-center">
|
|
<div class="col-sm-3">
|
|
<div class="search-box">
|
|
<input type="text" class="form-control search" placeholder="Search for...">
|
|
<i class="ri-search-line search-icon"></i>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-auto ms-auto">
|
|
<div class="hstack gap-2">
|
|
<button class="btn btn-soft-danger" id="remove-actions" onClick="deleteMultiple()"><i class="ri-delete-bin-2-line"></i></button>
|
|
<button type="button" class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample"><i class="ri-filter-3-line align-bottom me-1"></i>
|
|
Fliters</button>
|
|
<button type="button" class="btn btn-secondary add-btn" data-bs-toggle="modal" id="create-btn" data-bs-target="#showModal"><i class="ri-add-line align-bottom me-1"></i> Add Leads</button>
|
|
<span class="dropdown">
|
|
<button class="btn btn-soft-info btn-icon fs-14" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
|
|
<i class="ri-settings-4-line"></i>
|
|
</button>
|
|
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
|
|
<li><a class="dropdown-item" href="#">Copy</a></li>
|
|
<li><a class="dropdown-item" href="#">Move to pipline</a></li>
|
|
<li><a class="dropdown-item" href="#">Add to exceptions</a></li>
|
|
<li><a class="dropdown-item" href="#">Switch to common form view</a></li>
|
|
<li><a class="dropdown-item" href="#">Reset form view to default</a></li>
|
|
</ul>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<div>
|
|
<div class="table-responsive table-card">
|
|
<table class="table align-middle" id="customerTable">
|
|
<thead class="table-light">
|
|
<tr>
|
|
<th scope="col" style="width: 50px;">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="checkAll" value="option">
|
|
</div>
|
|
</th>
|
|
|
|
<th class="sort" data-sort="name">Name</th>
|
|
<th class="sort" data-sort="company_name">Company</th>
|
|
<th class="sort" data-sort="leads_score">Leads Score</th>
|
|
<th class="sort" data-sort="phone">Phone</th>
|
|
<th class="sort" data-sort="location">Location</th>
|
|
<th class="sort" data-sort="tags">Tags</th>
|
|
<th class="sort" data-sort="date">Create Date</th>
|
|
<th class="sort" data-sort="action">Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="list form-check-all">
|
|
<tr>
|
|
<th scope="row">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" name="chk_child" value="option1">
|
|
</div>
|
|
</th>
|
|
<td class="id" style="display:none;"><a href="javascript:void(0);" class="fw-medium link-primary">#VZ2101</a></td>
|
|
<td>
|
|
<div class="d-flex align-items-center">
|
|
<div class="flex-shrink-0">
|
|
<img src="/assets/images/users/avatar-10.jpg" alt="" class="avatar-xxs rounded-circle image_src object-cover">
|
|
</div>
|
|
<div class="flex-grow-1 ms-2 name">Tonya Noble</div>
|
|
</div>
|
|
</td>
|
|
<td class="company_name">Force Medicines</td>
|
|
<td class="leads_score">147</td>
|
|
<td class="phone">580-464-4694</td>
|
|
<td class="location">Los Angeles, USA</td>
|
|
<td class="tags">
|
|
<span class="badge badge-soft-primary">Lead</span>
|
|
<span class="badge badge-soft-primary">Partner</span>
|
|
</td>
|
|
<td class="date">07 Apr, 2021</td>
|
|
<td>
|
|
<ul class="list-inline hstack gap-2 mb-0">
|
|
<li class="list-inline-item edit" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="top" title="Call">
|
|
<a href="javascript:void(0);" class="text-muted d-inline-block">
|
|
<i class="ri-phone-line fs-16"></i>
|
|
</a>
|
|
</li>
|
|
<li class="list-inline-item edit" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="top" title="Message">
|
|
<a href="javascript:void(0);" class="text-muted d-inline-block">
|
|
<i class="ri-question-answer-line fs-16"></i>
|
|
</a>
|
|
</li>
|
|
<li class="list-inline-item" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="top" title="View">
|
|
<a href="javascript:void(0);"><i class="ri-eye-fill align-bottom text-muted"></i></a>
|
|
</li>
|
|
<li class="list-inline-item" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="top" title="Edit">
|
|
<a class="edit-item-btn" href="#showModal" data-bs-toggle="modal"><i class="ri-pencil-fill align-bottom text-muted"></i></a>
|
|
</li>
|
|
<li class="list-inline-item" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="top" title="Delete">
|
|
<a class="remove-item-btn" data-bs-toggle="modal" href="#deleteRecordModal">
|
|
<i class="ri-delete-bin-fill align-bottom text-muted"></i>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<div class="noresult" style="display: none">
|
|
<div class="text-center">
|
|
<lord-icon src="https://cdn.lordicon.com/msoeawqm.json" trigger="loop" colors="primary:#121331,secondary:#08a88a" style="width:75px;height:75px">
|
|
</lord-icon>
|
|
<h5 class="mt-2">Sorry! No Result Found</h5>
|
|
<p class="text-muted mb-0">We've searched more than 150+ leads We did not find
|
|
any leads for you search.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex justify-content-end mt-3">
|
|
<div class="pagination-wrap hstack gap-2">
|
|
<a class="page-item pagination-prev disabled" href="#">
|
|
Previous
|
|
</a>
|
|
<ul class="pagination listjs-pagination mb-0"></ul>
|
|
<a class="page-item pagination-next" href="#">
|
|
Next
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal fade" id="showModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<div class="modal-content">
|
|
<div class="modal-header bg-light p-3">
|
|
<h5 class="modal-title" id="exampleModalLabel"></h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" id="close-modal"></button>
|
|
</div>
|
|
<form class="tablelist-form" autocomplete="off">
|
|
<div class="modal-body">
|
|
<input type="hidden" id="id-field" />
|
|
<div class="row g-3">
|
|
<div class="col-lg-12">
|
|
<div class="text-center">
|
|
<div class="position-relative d-inline-block">
|
|
<div class="position-absolute bottom-0 end-0">
|
|
<label for="lead-image-input" class="mb-0" data-bs-toggle="tooltip" data-bs-placement="right" title="Select Image">
|
|
<div class="avatar-xs cursor-pointer">
|
|
<div class="avatar-title bg-light border rounded-circle text-muted">
|
|
<i class="ri-image-fill"></i>
|
|
</div>
|
|
</div>
|
|
</label>
|
|
<input class="form-control d-none" value="" id="lead-image-input" type="file" accept="image/png, image/gif, image/jpeg">
|
|
</div>
|
|
<div class="avatar-lg p-1">
|
|
<div class="avatar-title bg-light rounded-circle">
|
|
<img src="/assets/images/users/user-dummy-img.jpg" id="lead-img" class="avatar-md rounded-circle object-cover" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<h5 class="fs-13 mt-3">Lead Image</h5>
|
|
</div>
|
|
<div>
|
|
<label for="leadname-field" class="form-label">Name</label>
|
|
<input type="text" id="leadname-field" class="form-control" placeholder="Enter Name" required />
|
|
</div>
|
|
</div>
|
|
<!--end col-->
|
|
<div class="col-lg-12">
|
|
<div>
|
|
<label for="company_name-field" class="form-label">Company
|
|
Name</label>
|
|
<input type="text" id="company_name-field" class="form-control" placeholder="Enter company name" required />
|
|
</div>
|
|
</div>
|
|
<!--end col-->
|
|
<div class="col-lg-6">
|
|
<div>
|
|
<label for="leads_score-field" class="form-label">Leads
|
|
Score</label>
|
|
<input type="text" id="leads_score-field" class="form-control" placeholder="Enter lead score" required />
|
|
</div>
|
|
</div>
|
|
<!--end col-->
|
|
<div class="col-lg-6">
|
|
<div>
|
|
<label for="phone-field" class="form-label">Phone</label>
|
|
<input type="text" id="phone-field" class="form-control" placeholder="Enter phone no" required />
|
|
</div>
|
|
</div>
|
|
<!--end col-->
|
|
<div class="col-lg-12">
|
|
<div>
|
|
<label for="location-field" class="form-label">Location</label>
|
|
<input type="text" id="location-field" class="form-control" placeholder="Enter location" required />
|
|
</div>
|
|
</div>
|
|
<!--end col-->
|
|
<div class="col-lg-12">
|
|
<div>
|
|
<label for="taginput-choices" class="form-label">Tags</label>
|
|
<select class="form-control" name="taginput-choices" id="taginput-choices" multiple>
|
|
<option value="Lead">Lead</option>
|
|
<option value="Partner">Partner</option>
|
|
<option value="Exiting">Exiting</option>
|
|
<option value="Long-term">Long-term</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-12">
|
|
<div>
|
|
<label for="date-field" class="form-label">Created Date</label>
|
|
<input type="date" id="date-field" class="form-control" data-provider="flatpickr" data-date-format="d M, Y" placeholder="Select Date" required />
|
|
</div>
|
|
</div>
|
|
<!--end col-->
|
|
</div>
|
|
<!--end row-->
|
|
</div>
|
|
<div class="modal-footer">
|
|
<div class="hstack gap-2 justify-content-end">
|
|
<button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
|
|
<button type="submit" class="btn btn-primary" id="add-btn">Add
|
|
leads</button>
|
|
<!-- <button type="button" class="btn btn-success" id="edit-btn">Update</button> -->
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--end modal-->
|
|
|
|
<!-- Modal -->
|
|
<div class="modal fade zoomIn" id="deleteRecordModal" tabindex="-1" aria-labelledby="deleteRecordLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" id="btn-close"></button>
|
|
</div>
|
|
<div class="modal-body p-5 text-center">
|
|
<lord-icon src="https://cdn.lordicon.com/gsqxdxog.json" trigger="loop" colors="primary:#405189,secondary:#f06548" style="width:90px;height:90px">
|
|
</lord-icon>
|
|
<div class="mt-4 text-center">
|
|
<h4 class="fs-semibold">You are about to delete a lead ?</h4>
|
|
<p class="text-muted fs-14 mb-4 pt-1">Deleting your lead will remove all of
|
|
your information from our database.</p>
|
|
<div class="hstack gap-2 justify-content-center remove">
|
|
|
|
<button class="btn btn-link link-success fw-medium text-decoration-none" id="deleteRecord-close" data-bs-dismiss="modal"><i class="ri-close-line me-1 align-middle"></i> Close</button>
|
|
<button class="btn btn-danger" id="delete-record">Yes, Delete
|
|
It!!</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--end modal -->
|
|
|
|
|
|
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
|
|
<div class="offcanvas-header bg-light">
|
|
<h5 class="offcanvas-title" id="offcanvasExampleLabel">Leads Fliters</h5>
|
|
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
|
</div>
|
|
<!--end offcanvas-header-->
|
|
<form action="" class="d-flex flex-column justify-content-end h-100">
|
|
<div class="offcanvas-body">
|
|
<div class="mb-4">
|
|
<label for="datepicker-range" class="form-label text-muted text-uppercase fw-semibold mb-3">Date</label>
|
|
<input type="date" class="form-control" id="datepicker-range" data-provider="flatpickr" data-range="true" placeholder="Select date">
|
|
</div>
|
|
<div class="mb-4">
|
|
<label for="country-select" class="form-label text-muted text-uppercase fw-semibold mb-3">Country</label>
|
|
<select class="form-control" data-choices data-choices-multiple-remove="true" name="country-select" id="country-select" multiple>
|
|
<option value="">Select country</option>
|
|
<option value="Argentina">Argentina</option>
|
|
<option value="Belgium">Belgium</option>
|
|
<option value="Brazil" selected>Brazil</option>
|
|
<option value="Colombia">Colombia</option>
|
|
<option value="Denmark">Denmark</option>
|
|
<option value="France">France</option>
|
|
<option value="Germany">Germany</option>
|
|
<option value="Mexico">Mexico</option>
|
|
<option value="Russia">Russia</option>
|
|
<option value="Spain">Spain</option>
|
|
<option value="Syria">Syria</option>
|
|
<option value="United Kingdom" selected>United Kingdom</option>
|
|
<option value="United States of America">United States of America</option>
|
|
</select>
|
|
</div>
|
|
<div class="mb-4">
|
|
<label for="status-select" class="form-label text-muted text-uppercase fw-semibold mb-3">Status</label>
|
|
<div class="row g-2">
|
|
<div class="col-lg-6">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
|
|
<label class="form-check-label" for="inlineCheckbox1">New
|
|
Leads</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
|
|
<label class="form-check-label" for="inlineCheckbox2">Old
|
|
Leads</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3">
|
|
<label class="form-check-label" for="inlineCheckbox3">Loss
|
|
Leads</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="inlineCheckbox4" value="option4">
|
|
<label class="form-check-label" for="inlineCheckbox4">Follow
|
|
Up</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mb-4">
|
|
<label for="leadscore" class="form-label text-muted text-uppercase fw-semibold mb-3">Lead
|
|
Score</label>
|
|
<div class="row g-2 align-items-center">
|
|
<div class="col-lg">
|
|
<input type="number" class="form-control" id="leadscore" placeholder="0">
|
|
</div>
|
|
<div class="col-lg-auto">
|
|
To
|
|
</div>
|
|
<div class="col-lg">
|
|
<input type="number" class="form-control" id="leadscore" placeholder="0">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label for="leads-tags" class="form-label text-muted text-uppercase fw-semibold mb-3">Tags</label>
|
|
<div class="row g-3">
|
|
<div class="col-lg-6">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="marketing" value="marketing">
|
|
<label class="form-check-label" for="marketing">Marketing</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="management" value="management">
|
|
<label class="form-check-label" for="management">Management</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="business" value="business">
|
|
<label class="form-check-label" for="business">Business</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="investing" value="investing">
|
|
<label class="form-check-label" for="investing">Investing</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="partner" value="partner">
|
|
<label class="form-check-label" for="partner">Partner</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="lead" value="lead">
|
|
<label class="form-check-label" for="lead">Leads</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="sale" value="sale">
|
|
<label class="form-check-label" for="sale">Sale</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="owner" value="owner">
|
|
<label class="form-check-label" for="owner">Owner</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="banking" value="banking">
|
|
<label class="form-check-label" for="banking">Banking</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="banking" value="banking">
|
|
<label class="form-check-label" for="banking">Exiting</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="banking" value="banking">
|
|
<label class="form-check-label" for="banking">Finance</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="banking" value="banking">
|
|
<label class="form-check-label" for="banking">Fashion</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--end offcanvas-body-->
|
|
<div class="offcanvas-footer border-top p-3 text-center hstack gap-2">
|
|
<button class="btn btn-light w-100">Clear Filter</button>
|
|
<button type="submit" class="btn btn-primary w-100">Filters</button>
|
|
</div>
|
|
<!--end offcanvas-footer-->
|
|
</form>
|
|
</div>
|
|
<!--end offcanvas-->
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<!--end col-->
|
|
</div>
|
|
<!--end row-->
|
|
</div>
|
|
|
|
|
|
<th:block layout:fragment="modal">
|
|
</th:block>
|
|
|
|
<th:block layout:fragment="pagejs">
|
|
|
|
<!-- list.js min js -->
|
|
<script src="/assets/libs/list.js/list.min.js"></script>
|
|
<script src="/assets/libs/list.pagination.js/list.pagination.min.js"></script>
|
|
<!-- Sweet Alerts js -->
|
|
<script src="/assets/libs/sweetalert2/sweetalert2.min.js"></script>
|
|
<script src="/assets/js/pages/crm-leads.init.js"></script>
|
|
|
|
</th:block>
|
|
</body>
|
|
|
|
</html> |