nhance/app/Views/DashBoard.php

468 lines
17 KiB
PHP
Executable File

<!-- Bootstrap CSS -->
<!-- <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet"> -->
<!-- jQuery -->
<!-- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> -->
<!-- Bootstrap JS -->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.bundle.min.js"></script> -->
<!-- Bootstrap JS (ensure this is included) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
<!-- Remove one of these -->
<style>
.carousel-control-next {
right: -18px;
}
.carousel-control-prev {
left: -24px;
}
.status-option {
padding: 0.5rem !important;
background-color: darkgrey;
}
.emp-count-view-click {
cursor: pointer;
}
.emp-status .col-6 {
padding-bottom: 0.3rem;
}
.emp-status label {
font-weight: bold;
}
.client-branch-label {
padding: 0.2rem;
border-radius: 0.2rem;
display: inline-block;
}
.scroll-container {
display: flex;
overflow-x: auto;
white-space: nowrap;
}
.scroll-item {
flex: 0 0 auto;
width: 30%; /* Adjust based on the number of items you want to show */
box-sizing: border-box;
padding: 0 10px;
}
@media (min-width: 1200px) {
.col-xl-3 {
max-width: 30% !important;
}
}
.center_text {
text-align: center;
}
.card-body {
padding: 1rem;
}
.number_css {
font-family: Roboto, sans-serif;
color: #343a40;
text-align: center;
}
.label_bottom_reduce {
margin-bottom: .0rem;
}
.search-input {
margin-bottom: 1rem;
padding: 0.5rem;
border-radius: 0.25rem;
border: 1px solid #ced4da;
width: 100%;
}
.carousel-inner {
position: relative;
overflow: hidden;
}
.carousel-item {
height: auto; /* Adjust if needed */
margin-left: 57px;
}
.card {
margin: 0 auto; /* Center card in carousel item */
}
.carousel-control-prev, .carousel-control-next {
width: 5%;
height: 100%;
}
/* .carousel-control-prev-icon, .carousel-control-next-icon {
background-color: rgba(0,0,0,0.5);
} */
.carousel-control-prev-icon {
background-image: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns%3D"http://www.w3.org/2000/svg" fill%3D"%23000000" viewBox%3D"0 0 8 8"%3E%3Cpath d%3D"M2.5 0L4 1.5 1.5 4 4 6.5 2.5 8 0 4 2.5 0z"/%3E%3C/svg%3E');
}
.carousel-control-next-icon {
background-image: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns%3D"http://www.w3.org/2000/svg" fill%3D"%23000000" viewBox%3D"0 0 8 8"%3E%3Cpath d%3D"M5.5 8L4 6.5 6.5 4 4 1.5 5.5 0l4 4-4 4z"/%3E%3C/svg%3E');
}
.show-item {
display: inline-block !important;
}
.hide-item {
display: none !important;
}
.content-page {
background-color: #e8eff5;
}
html {
background-color: #e8eff5;
}
</style>
<style>
body {
.multiselect-native-select {
position: relative;
/* bottom: 32px; */
select {
border: 0 !important;
clip: rect(0 0 0 0) !important;
height: 1px !important;
margin: -1px -1px -1px -3px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
width: 1px !important;
left: 50%;
top: 30px;
}
}
.multiselect-container{
width: 100% !important;
}
.multiselect-selected-text{
float: left !important;
}
}
#client_add .tab-content-styles{
background-color:#F4F4F4;
margin-right:20px;
margin-top:12px !important; /** margin-top:0px !important; */
border-radius:25px!important;
min-height: 70vh !important;
}
.active{
color : white !important ;
}
</style>
<?php if(in_array(get_role_id(), [1,2,3,4,5]) || (in_array(ENROLLMENT_TEAM_ID, user_team()) || in_array(CLAIMS_TEAM_ID, user_team()) || in_array(MANAGEMENT_TEAM_ID, user_team()) || in_array(FINANCE_TEAM_ID, user_team()) || in_array(BUSINESS_TEAM_ID, user_team()))) { ?>
<?php
// Exactly one tab-pane must be active initially; claims_dash/leads_dash used to each set
// $isActive so dual-team staff saw both panes (Bootstrap shows every .active pane).
$dash_show_pending_nav = in_array(get_role_id(), [1, 2, 3, 5]);
$dash_show_claims_nav = (get_role_id() == STAFF_ROLE_ID && in_array(CLAIMS_TEAM_ID, user_team())) || in_array(get_role_id(), [1, 5]);
$dash_show_leads_nav = (get_role_id() == STAFF_ROLE_ID && in_array(ENROLLMENT_TEAM_ID, user_team())) || in_array(get_role_id(), [1, 5]);
$dash_default_pane = null;
if ($dash_show_pending_nav) {
$dash_default_pane = 'pending';
} elseif ($dash_show_claims_nav) {
$dash_default_pane = 'claims';
} elseif ($dash_show_leads_nav) {
$dash_default_pane = 'leads';
}
$dash_pending_pane_active = ($dash_default_pane === 'pending') ? 'active show' : '';
$dash_claims_pane_active = ($dash_default_pane === 'claims') ? 'active show' : '';
$dash_leads_pane_active = ($dash_default_pane === 'leads') ? 'active show' : '';
?>
<!-- <div class="row" id="client_add"> -->
<div class="row" id="client_add" style="margin-top:12px!important">
<div class="col-12">
<!-- <div class="card"> -->
<div class="card-body">
<ul class="nav nav-pills navtab-bg nav-dash" >
<?php if(in_array(get_role_id(), [1,2,3,5])) { ?>
<li class="nav-item d-flex justify-content-center align-items-center">
<a href="#pending-actions-dash-tab" data-toggle="tab" aria-expanded="false"
class="nav-link px-3 py-1 dash-anchor nav-dash" id="pending_actions_tab">
<img src="<?= base_url() . "public"; ?>/assets/images/inactive_pending_actions.png" alt="Logo" height="14" class="inactive_pending" >
<img src="<?= base_url() . "public"; ?>/assets/images/active_pending_actions.png" alt="Logo" height="14"
class="active_pending" style="display:none;">
&nbsp;&nbsp;
<span class="d-none d-sm-inline-block dash-tab dash-tab-font">Pending Actions</span>
</a>
</li>
&nbsp;&nbsp;&nbsp;&nbsp;
<?php } ?>
<?php if(in_array(get_role_id(), [1,2,3,5]) || (get_role_id() == 4 && in_array(MANAGEMENT_TEAM_ID, user_team()) || in_array(FINANCE_TEAM_ID, user_team()) || in_array(BUSINESS_TEAM_ID, user_team()))) { ?>
<!-- <li class="nav-item d-flex justify-content-center align-items-center">
<a href="#bds-dash-tab" data-toggle="tab" aria-expanded="true" class="nav-link px-3 py-1 dash-anchor nav-dash" id="bds_tab">
<img src="<?= base_url() . "public"; ?>/assets/images/inactive_bds.png" alt="Logo" height="14" class="inactive_bds">
<img src="<?= base_url() . "public"; ?>/assets/images/active_bds.png" alt="Logo" height="14"
class="active_bds " style="display:none;">
&nbsp;&nbsp;
<span class="d-none d-sm-inline-block dash-tab dash-tab-font">BDS</span>
</a>
</li>
&nbsp;&nbsp;&nbsp;&nbsp; -->
<?php } ?>
<?php if ((get_role_id() == STAFF_ROLE_ID && in_array(CLAIMS_TEAM_ID,user_team())) || in_array(get_role_id(),[1,5])) :?>
<li class="nav-item d-flex justify-content-center align-items-center">
<a href="#claims-dash-tab" data-toggle="tab" aria-expanded="true" class="nav-link px-3 py-1 dash-anchor nav-dash" id="claims_tab">
<img src="<?= base_url() . "public"; ?>/assets/images/inactive_claims.png" alt="Logo" height="14" class="inactive_claims">
<img src="<?= base_url() . "public"; ?>/assets/images/active_claims.png" alt="Logo" height="14"
class="active_claims " style="display:none;">
&nbsp;&nbsp;
<span class="d-none d-sm-inline-block dash-tab dash-tab-font">Claims</span>
</a>
</li>
&nbsp;&nbsp;&nbsp;&nbsp;
<?php endif; ?>
<?php if ((get_role_id() == STAFF_ROLE_ID && in_array(ENROLLMENT_TEAM_ID,user_team())) || in_array(get_role_id(),[1,5])) :?>
<!-- <?php
// $isActive = get_role_id() == STAFF_ROLE_ID && in_array(ENROLLMENT_TEAM_ID,user_team()) ? 'active show' : '';
?> -->
<li class="nav-item d-flex justify-content-center align-items-center ">
<a href="#leads-dash-tab" data-toggle="tab" aria-expanded="true" class="nav-link px-3 py-1 dash-anchor nav-dash" id="leads_tab" >
<img src="<?= base_url() . "public"; ?>/assets/images/inactive_leads_and_bds_renewal.png" alt="Logo" height="14" class="inactive_leads">
<img src="<?= base_url() . "public"; ?>/assets/images/active_leads_and_bds_renewal.png" alt="Logo" height="14"
class="active_leads " style="display:none;">
&nbsp;&nbsp;
<span class="d-none d-sm-inline-block dash-tab dash-tab-font">Opportunities and BDS Renewals</span>
</a>
</li>
&nbsp;&nbsp;&nbsp;&nbsp;
<?php endif; ?>
</ul>
<div class="tab-content tab-content-styles">
<?php if ((get_role_id() == STAFF_ROLE_ID && in_array(CLAIMS_TEAM_ID,user_team())) || in_array(get_role_id(),[1,5])) :?>
<?php if (!empty($lazy_load_claims)) : ?>
<div class="tab-pane fade <?= $dash_claims_pane_active ?>" id="claims-dash-tab"
data-dash-lazy-url="<?= esc(base_url('dashboard/claims-dash'), 'attr') ?>">
<div class="text-center p-5 text-muted dash-lazy-placeholder">Click to load claims…</div>
</div>
<?php else : ?>
<?php include("claims_dash.php") ?>
<?php endif; ?>
<?php endif; ?>
<?php if(in_array(get_role_id(), [1,2,3,5]) || (get_role_id() == 4 && in_array(MANAGEMENT_TEAM_ID, user_team()) || in_array(FINANCE_TEAM_ID, user_team()) || in_array(BUSINESS_TEAM_ID, user_team()))) { ?>
<!-- <?php //include('bds_dash.php'); ?> -->
<?php } ?>
<?php if ((get_role_id() == STAFF_ROLE_ID && in_array(ENROLLMENT_TEAM_ID,user_team())) || in_array(get_role_id(),[1,5])) :?>
<?php if (!empty($lazy_load_leads)) : ?>
<div class="tab-pane fade <?= $dash_leads_pane_active ?>" id="leads-dash-tab"
data-dash-lazy-url="<?= esc(base_url('dashboard/leads-dash'), 'attr') ?>">
<div class="text-center p-5 text-muted dash-lazy-placeholder">Click to load opportunities…</div>
</div>
<?php else : ?>
<?php include("leads_dash.php") ?>
<?php endif; ?>
<?php endif; ?>
<?php if(in_array(get_role_id(), [1,2,3,5])) { ?>
<?php include('endorsement_dash.php'); ?>
<?php } ?>
<!--
<?php // if(in_array(get_role_id(), [1,2,3,5]) || (get_role_id() == 4 && in_array(MANAGEMENT_TEAM_ID, user_team()) || in_array(FINANCE_TEAM_ID, user_team()) || in_array(BUSINESS_TEAM_ID, user_team()))) { ?>
<?php // include('bds_dash.php'); ?>
<?php // } ?> -->
</div>
</div>
<!-- </div> -->
</div>
</div>
<?php } ?>
<script>
$(document).ready(function(){
function injectDashTabHtml($pane, html) {
var nodes = $.parseHTML(html, document, true) || [];
var $nodes = $(nodes);
var styles = $nodes.filter('style').add($nodes.find('style'));
styles.each(function () {
var css = this.textContent || '';
if (css && !$('style[data-dash-lazy-css="' + $pane.attr('id') + '"]').length) {
$('<style>', { 'data-dash-lazy-css': $pane.attr('id'), text: css }).appendTo('head');
}
});
var $newPane = $nodes.filter('.tab-pane').add($nodes.find('.tab-pane')).first();
var innerHtml = $newPane.length ? $newPane.html() : html;
$pane
.removeAttr('data-dash-lazy-url')
.html(innerHtml)
.addClass('active show');
}
function loadDashTabOnDemand($pane) {
var url = $pane.attr('data-dash-lazy-url');
if (!url || $pane.data('dash-lazy-loading')) {
return;
}
$pane.data('dash-lazy-loading', true);
$pane.html('<div class="text-center p-5 text-muted dash-lazy-placeholder">Loading…</div>');
$.ajax({
url: url,
method: 'GET',
dataType: 'html',
timeout: 120000
}).done(function (html) {
injectDashTabHtml($pane, html);
}).fail(function (xhr) {
$pane.data('dash-lazy-loading', false);
$pane.attr('data-dash-lazy-url', url);
var msg = 'Failed to load (' + (xhr.status || 'timeout') + '). Click the tab again to retry.';
$pane.html('<div class="text-center p-5 text-danger dash-lazy-placeholder">' + msg + '</div>');
});
}
// Load tab data when the user clicks Claims / Opportunities.
$(document).on('click', '#claims_tab, #leads_tab', function () {
var target = ($(this).attr('href') || '').trim();
if (!target) {
return;
}
var $pane = $(target);
if ($pane.length && $pane.attr('data-dash-lazy-url')) {
loadDashTabOnDemand($pane);
}
});
// If Claims/Leads is the default visible pane, load it once after paint.
$('.tab-pane.active[data-dash-lazy-url]').each(function () {
loadDashTabOnDemand($(this));
});
$('.nav-link').click(function(){
//image of tabs by default inactive before particular click
$('.inactive_leads').show();
$('.inactive_bds').show();
$('.inactive_claims').show();
$('.inactive_pending').show();
$('.active_leads').hide();
$('.active_bds').hide();
$('.active_claims').hide();
$('.active_pending').hide();
// change bg color of tab
$('.nav-link').removeClass('active-tab');
$(this).addClass('active-tab');
// change active pic for the clicked tab
// #leads-dash-tab
let tab_name = $(this).attr('href').split('-')[0];
tab_name = tab_name.replace('#', '');
console.log(tab_name);
switch (tab_name) {
case "leads":
$('.active_leads').show();
$('.inactive_leads').hide();
break;
case "bds":
$('.active_bds').show();
$('.inactive_bds').hide();
break;
case "claims":
$('.active_claims').show();
$('.inactive_claims').hide();
break;
case "pending":
$('.active_pending').show();
$('.inactive_pending').hide();
break;
default:
break;
}
//clear local storage
localStorage.clear();
let dashboardHistory = {};
let str = window.location.href ;
str = str.endsWith('#') ? str.slice(0, -1) : str;
dashboardHistory['dashboard_url'] = str ;
dashboardHistory['tab'] = $(this).attr('href'); // e.g. #leads-dash-tab
dashboardHistory['tile_params'] = {};
dashboardHistory['function_name'] = '';
localStorage.setItem('dashboardHistory', JSON.stringify(dashboardHistory));
history.pushState({}, '', str);
});
});
</script>
<script>
$(document).on('click', '.dash-anchor', function () {
// remove active class from all tabs
$('.dash-tab').removeClass('active');
// add active only to the clicked one's child span
$(this).find('.dash-tab').addClass('active');
});
</script>