From ce299bb28860ecee5474b50993a3d649b18314aa Mon Sep 17 00:00:00 2001
From: Horilla <teamhorilla@gmail.com>
Date: Mon, 25 Sep 2023 15:57:17 +0530
Subject: [PATCH] [UPDT] Added style for current view type

---
 employee/static/employee/search.js            |   2 +
 employee/templates/employee_nav.html          |   4 +-
 .../templates/onboarding/dashboard.html       |   2 +-
 .../templates/onboarding/kanban/kanban.html   |   2 +-
 .../templates/onboarding/onboarding-view.html |   2 +-
 payroll/static/payroll/dashboard.js           | 113 +++++++++++++-----
 .../payroll/allowance/view_allowance.html     |  32 ++---
 payroll/templates/payroll/dashboard.html      |  22 ++--
 .../payroll/deduction/view_deduction.html     |   6 +-
 payroll/views/views.py                        |   3 +
 templates/dashboard.html                      |  29 +++--
 templates/filter_tags.html                    |   3 +
 12 files changed, 142 insertions(+), 78 deletions(-)

diff --git a/employee/static/employee/search.js b/employee/static/employee/search.js
index cd7c78b01..13b582619 100644
--- a/employee/static/employee/search.js
+++ b/employee/static/employee/search.js
@@ -18,6 +18,8 @@ $(document).ready(function () {
       history.pushState({}, "", newURL);      
       $("#employee-search").attr("hx-vals", `{"view":"${view}"}`);      
       $('#filterForm').attr("hx-vals", `{"view":"${view}"}`);   
+      $(".oh-btn--view-active").removeClass("oh-btn--view-active")
+      $(this).children("a").addClass("oh-btn--view-active")
     }    
   });
 
diff --git a/employee/templates/employee_nav.html b/employee/templates/employee_nav.html
index 91abc843d..06f65d5d3 100644
--- a/employee/templates/employee_nav.html
+++ b/employee/templates/employee_nav.html
@@ -146,7 +146,7 @@
           {% comment %} href = "{% url 'employee-view-list' %}" {% endcomment %}
           hx-get="{% url 'employee-filter-view' %}?view=list" 
           hx-target="#view-container" 
-          class="oh-btn oh-btn--view"
+          class="oh-btn oh-btn--view {% if request.GET.view != 'card' %} oh-btn--view-active {% endif %}"
           title='{% trans "List" %}'
           ><ion-icon name="list-outline"></ion-icon
         ></a>
@@ -157,7 +157,7 @@
           {% comment %} href = "{% url 'employee-view-card' %}" {% endcomment %}
           hx-get="{% url 'employee-filter-view' %}?view=card"
           hx-target="#view-container"  
-          class="oh-btn oh-btn--view" 
+          class="oh-btn oh-btn--view {% if request.GET.view == 'card' %} oh-btn--view-active {% endif %}" 
           title='{% trans "Card" %}'
           ><ion-icon name="grid-outline"></ion-icon
         ></a>
diff --git a/onboarding/templates/onboarding/dashboard.html b/onboarding/templates/onboarding/dashboard.html
index 60a8c768c..8b56409cd 100644
--- a/onboarding/templates/onboarding/dashboard.html
+++ b/onboarding/templates/onboarding/dashboard.html
@@ -79,7 +79,7 @@
                         </div>
                         
                     </div>
-                    <div class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent" style="width:50%">
+                    <div class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent" style="width:50%;cursor: default;" >
                         <div class="oh-card-dashboard__header oh-card-dashboard__header--divider">
                           <span class="oh-card-dashboard__title">{% trans "Candidates on Onboard" %}</span>
                         </div>
diff --git a/onboarding/templates/onboarding/kanban/kanban.html b/onboarding/templates/onboarding/kanban/kanban.html
index fdc6ed2e7..ad428f3a3 100644
--- a/onboarding/templates/onboarding/kanban/kanban.html
+++ b/onboarding/templates/onboarding/kanban/kanban.html
@@ -39,7 +39,7 @@
                         name="list-outline" role="img" class="md hydrated" aria-label="list outline"></ion-icon></a>
                 </li>
                 <li class="oh-view-type candidate-view-type" data-view="card" title="{% trans "Card" %}">
-                    <a href="{% url 'kanban-view' %}" hx-target="#section" class="oh-btn oh-btn--view"><ion-icon
+                    <a href="{% url 'kanban-view' %}" hx-target="#section" class="oh-btn oh-btn--view oh-btn--view-active"><ion-icon
                             name="grid-outline" role="img" class="md hydrated" aria-label="grid outline"></ion-icon></a>
                 </li>
             </ul>
diff --git a/onboarding/templates/onboarding/onboarding-view.html b/onboarding/templates/onboarding/onboarding-view.html
index dee880a3e..bdafc9a44 100644
--- a/onboarding/templates/onboarding/onboarding-view.html
+++ b/onboarding/templates/onboarding/onboarding-view.html
@@ -47,7 +47,7 @@
         </div>
         <ul class="oh-view-types ml-2" style="margin-bottom: 0;">
             <li class="oh-view-type candidate-view-type" data-view="list" title="{% trans "List" %}">
-                <a href="{% url 'onboarding-view' %}" hx-target="#section" class="oh-btn oh-btn--view "><ion-icon
+                <a href="{% url 'onboarding-view' %}" hx-target="#section" class="oh-btn oh-btn--view oh-btn--view-active"><ion-icon
                         name="list-outline" role="img" class="md hydrated" aria-label="list outline"></ion-icon></a>
             </li>
             <li class="oh-view-type candidate-view-type" data-view="card" title="{% trans "Card" %}">
diff --git a/payroll/static/payroll/dashboard.js b/payroll/static/payroll/dashboard.js
index 68ac1f336..172db54d9 100644
--- a/payroll/static/payroll/dashboard.js
+++ b/payroll/static/payroll/dashboard.js
@@ -2,14 +2,26 @@ $(document).ready(function(){
 
     var myDate = new Date();
     var year = myDate.getFullYear();
-    var month = ('0' + (myDate.getMonth())).slice(-2); // Month is zero-indexed, so add 1 and pad with leading zero if needed
+    var month = ('0' + (myDate.getMonth())).slice(-2);
     var formattedDate = year + '-' + month;
     var start_index=0;
     var per_page=10 
 
     $("#monthYearField").val(formattedDate); 
-    
-    
+
+    function isBarChartEmpty(chartData) {
+        if (!chartData) {
+            return true;
+        }
+        for (let i = 0; i < chartData.length; i++) {
+            const hasNonZeroValues = chartData[i].data.some(value => value !== 0);
+            if (hasNonZeroValues) {
+                return false;  // Return false if any non-zero value is found
+            }
+        }
+        return true;  // Return true if all values are zero	
+    }
+	    
     function employee_chart(dataSet, labels) {
         $("#employee_canvas_body").html('<canvas id="employeeChart"></canvas>');
     
@@ -69,7 +81,7 @@ $(document).ready(function(){
                         var clickedLabel = employeeChartData.labels[clickedBarIndex];
     
                         $.ajax({
-                            url: '/payroll/filter-payslip?dashboard=true&search=' + clickedLabel,
+                            url: '/payroll/filter-payslip?dashboard=true&start_date='+$("#monthYearField").val()+'-01&search=' + clickedLabel,
                             type: "GET",
                             dataType: "html",
                             headers: {
@@ -126,8 +138,18 @@ $(document).ready(function(){
                     item["data"]=item.data.slice(start_index,start_index+per_page,)
                 });
                 var values = Object.values(labels).slice(start_index, start_index + per_page);
-
-                employee_chart(dataSet,values)
+                if(isBarChartEmpty(dataSet)){
+                    $("#employee_canvas_body").html(
+                        `<div style="height: 310px; display:flex;align-items: center;justify-content: center;" class="">
+                        <div style="" class="">
+                        <img style="display: block;width: 70px;margin: 10px auto ;" src="/static/images/ui/no-money.png" class="" alt=""/>
+                        <h3 style="font-size:16px" class="oh-404__subtitle">${response.message}</h3>
+                        </div>
+                    </div>`
+                    )
+                }else{
+                    employee_chart(dataSet,values)
+                }
             },
             error: (error) => {
                 console.log('Error', error);
@@ -188,7 +210,7 @@ $(document).ready(function(){
                     var clickedLabel = departmentChartData.labels[clickedBarIndex];
                     
                     $.ajax({
-                        url: '/payroll/filter-payslip?dashboard=true&department='+clickedLabel,
+                        url: '/payroll/filter-payslip?dashboard=true&start_date='+$("#monthYearField").val()+'-01&department='+clickedLabel,
                         type: "GET",
                         dataType: "html",
                         headers: {
@@ -222,16 +244,38 @@ $(document).ready(function(){
                 dataSet = response.dataset;
                 labels = response.labels;
                 department_total = response.department_total
-
-                $("#department_total").html("")
-                $.each(department_total, function (key, value) {
-                    $("#department_total").append(
-                        "<li class='m-3 department'><span class='department_item'>"+value["department"]+"</span>: <span>"+value["amount"]+"</span></li>"
-                        )
-                    })
+                if (department_total.length!=0){
+                    $("#department_total").html("")
+                    $.each(department_total, function (key, value) {
+                        $("#department_total").append(
+                            `<li class='m-3 department' style = 'cursor: pointer;''><span class='department_item'>${value["department"]}</span>: <span> ${value["amount"]}</span></li>`
+                            )
+                        })
 
 
-                department_chart(dataSet,labels)
+                }else {
+                    $("#department_total").html(
+                        `<div style="display:flex;align-items: center;justify-content: center; padding-top:50px" class="">
+                        <div style="" class="">
+                        <img style="display: block;width: 70px;margin: 10px auto ;" src="/static/images/ui/money.png" class="" alt=""/>
+                        <h3 style="font-size:16px" class="oh-404__subtitle">${response.message}</h3>
+                        </div>
+                    </div>`
+                    )
+                }
+
+                if (isBarChartEmpty(dataSet)){
+                    $("#department_canvas_body").html(
+                        `<div style="height: 310px; display:flex;align-items: center;justify-content: center;" class="">
+                        <div style="" class="">
+                        <img style="display: block;width: 70px;margin: 10px auto ;" src="/static/images/ui/no-money.png" class="" alt=""/>
+                        <h3 style="font-size:16px" class="oh-404__subtitle">${response.message}</h3>
+                        </div>
+                    </div>`
+                    )
+                }else{
+                    department_chart(dataSet,labels)
+                }
             },
             error: (error) => {
                 console.log('Error', error);
@@ -253,17 +297,26 @@ $(document).ready(function(){
             },
             success: (response) => {
                 var contract_end = response.contract_end
-                
-
-                $("#contract_ending").html("")
-                $.each(contract_end, function (key,value) {
-                    id=value.contract_id
-                    elem = `<li class='m-3 contract_id' data-id=${id}> ${value.contract_name} </li>`
-                    
-                    $("#contract_ending").append(elem)
-                    })
-                $(".contract-number").html(Object.keys(contract_end).length)
-
+                if (contract_end.length!=0){
+                    $("#contract_ending").html("")
+                    $.each(contract_end, function (key,value) {
+                        id=value.contract_id
+                        elem = `<li class='m-3 contract_id' style = "cursor: pointer;" data-id=${id}> ${value.contract_name} </li>`
+                        
+                        $("#contract_ending").append(elem)
+                        })
+                    $(".contract-number").html(Object.keys(contract_end).length)
+                }
+                else {
+                    $("#contract_ending").html(
+                        `<div style="display:flex;align-items: center;justify-content: center; padding-top:50px" class="">
+                        <div style="" class="">
+                        <img style="display: block;width: 70px;margin: 10px auto ;" src="/static/images/ui/contract.png" class="" alt=""/>
+                        <h3 style="font-size:16px" class="oh-404__subtitle">${response.message}</h3>
+                        </div>
+                    </div>`
+                    )
+                }
             },
             error: (error) => {
                 console.log('Error', error);
@@ -408,7 +461,7 @@ $(document).ready(function(){
     $("#department_total").on("click",".department",function(){
         department = $(this).children(".department_item").text()
         $.ajax({
-            url: '/payroll/filter-payslip?dashboard=true&department='+department,
+            url: '/payroll/filter-payslip?dashboard=true&start_date='+$("#monthYearField").val()+'-01&department='+department,
             type: "GET",
             dataType: "html",
             headers: {
@@ -426,8 +479,4 @@ $(document).ready(function(){
         });
     })
     
-
-
-    
-
-})
\ No newline at end of file
+})
diff --git a/payroll/templates/payroll/allowance/view_allowance.html b/payroll/templates/payroll/allowance/view_allowance.html
index e5305d384..9c4c51a91 100644
--- a/payroll/templates/payroll/allowance/view_allowance.html
+++ b/payroll/templates/payroll/allowance/view_allowance.html
@@ -51,28 +51,28 @@
         hx-vals="{'view':'card'}"
       />
     </div>
-    <div class="oh-dropdown" x-data="{open: false}">
-      <button class="oh-btn ml-2" @click="open = !open">
-        <ion-icon name="filter" class="mr-1"></ion-icon>{% trans "Filter" %}<div id="filterCount"></div>
-      </button>
-      <div
-        class="oh-dropdown__menu oh-dropdown__menu--right oh-dropdown__filter p-4"
-        x-show="open"
-        @click.outside="open = false"
-        style="display: none"
-      >
-      {% include 'payroll/allowance/filter_allowance.html' %}
-    </div>
-    </div>
     <div class="oh-main__titlebar-button-container">
       <ul class="oh-view-types ml-2" style="margin-bottom: 0;">
         <li class="oh-view-type allowance-view-type" data-view="list">
-        <a hx-get="{% url 'filter-allowance' %}?view=list" hx-target="#payroll-allowance-container" class="oh-btn oh-btn--view" title='{% trans "List" %}'><ion-icon name="list-outline" role="img" class="md hydrated" aria-label="list outline"></ion-icon></a>
+        <a hx-get="{% url 'filter-allowance' %}?view=list" hx-target="#payroll-allowance-container" class="oh-btn oh-btn--view {% if request.GET.view == 'list' %} oh-btn--view-active {% endif %}" title='{% trans "List" %}'><ion-icon name="list-outline" role="img" class="md hydrated" aria-label="list outline"></ion-icon></a>
         </li>
         <li class="oh-view-type allowance-view-type" data-view="card">
-        <a hx-get="{% url 'filter-allowance' %}?view=card" hx-target="#payroll-allowance-container" class="oh-btn oh-btn--view" title='{% trans "Card" %}'><ion-icon name="grid-outline" role="img" class="md hydrated" aria-label="grid outline"></ion-icon></a>
+        <a hx-get="{% url 'filter-allowance' %}?view=card" hx-target="#payroll-allowance-container" class="oh-btn oh-btn--view {% if request.GET.view != 'list' %} oh-btn--view-active {% endif %}" title='{% trans "Card" %}'><ion-icon name="grid-outline" role="img" class="md hydrated" aria-label="grid outline"></ion-icon></a>
         </li>
       </ul>
+      <div class="oh-dropdown" x-data="{open: false}">
+        <button class="oh-btn ml-2" @click="open = !open">
+          <ion-icon name="filter" class="mr-1"></ion-icon>{% trans "Filter" %}<div id="filterCount"></div>
+        </button>
+        <div
+          class="oh-dropdown__menu oh-dropdown__menu--right oh-dropdown__filter p-4"
+          x-show="open"
+          @click.outside="open = false"
+          style="display: none"
+        >
+        {% include 'payroll/allowance/filter_allowance.html' %}
+      </div>
+      </div>
       <div class="oh-btn-group ml-2">
         <div>
           <a
@@ -147,6 +147,8 @@
         newURL = currentURL + separator + "view="+view;        
       }       
       history.pushState({}, "", newURL);
+      $(".oh-btn--view-active").removeClass("oh-btn--view-active")
+      $(this).children("a").addClass("oh-btn--view-active")
     });
     $("#filter-allowance").focusout(function (e) {
       $("#filterSearch").val($(this).val());
diff --git a/payroll/templates/payroll/dashboard.html b/payroll/templates/payroll/dashboard.html
index caeb9b091..7a40cb940 100644
--- a/payroll/templates/payroll/dashboard.html
+++ b/payroll/templates/payroll/dashboard.html
@@ -80,9 +80,9 @@
                 </div>
 
                 <div class="oh-btn-group ms-2 mt-3 justify-content-between">
-                    <div>
-                        <label for="monthYearField" class="text-danger fw-bold">{% trans "Select Month and Year:" %}</label>
-                        <input class="oh-select p-3 m-1" type="month" id="monthYearField" name="monthYearField"> 
+                    <div style = "cursor: pointer;">
+                        <label for="monthYearField" class="text-danger fw-bold" style = "cursor: pointer;">{% trans "Select Month and Year:" %}</label>
+                        <input class="oh-select p-3 m-1" type="month" id="monthYearField" name="monthYearField" style = "cursor: pointer;"> 
                     </div>
                     
                     <div class="oh-main__titlebar-button-container">
@@ -106,7 +106,7 @@
                               </div>
                             </div>
                             <div class="col-sm-12 col-md-12 col-lg-6">
-                              <div class="oh-input-group">
+                              <div class="oh-input-group" >
                                 <label class="oh-label">{% trans "End Date" %}</label>
                                 <input class="mb-3 oh-select p-3" type="date" name="end_date" id="end_date">
                               </div>
@@ -150,10 +150,10 @@
                 <div class="oh-dashboard__movable-cards row mt-4">
                     <div class="col-12 col-sm-12 col-md-12 col-lg-6 oh-card-dashboard--moveable mb-4">
                         <div class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent">
-                            <div class="oh-card-dashboard__header oh-card-dashboard__header--divider">
-                                <span class="oh-card-dashboard__title" id="employee-previous"><ion-icon name="caret-back-outline"></ion-icon></span>
+                            <div class="oh-card-dashboard__header oh-card-dashboard__header--divider" style = "cursor: default;">
+                                <span class="oh-card-dashboard__title" id="employee-previous" style = "cursor: pointer;"><ion-icon name="caret-back-outline"></ion-icon></span>
                                 <span class="oh-card-dashboard__title">{% trans "Employee Payslips" %}</span>
-                                <span class="oh-card-dashboard__title float-end" id="payroll-employee-next"><ion-icon name="caret-forward"></ion-icon></span>
+                                <span class="oh-card-dashboard__title float-end" id="payroll-employee-next" style = "cursor: pointer;"><ion-icon name="caret-forward"></ion-icon></span>
 
                             </div>
                             <div class="oh-card-dashboard__body" id="employee_canvas_body">
@@ -161,8 +161,8 @@
                             </div>
                         </div>
                     </div>
-                    <div class="col-12 col-sm-12 col-md-12 col-lg-6 oh-card-dashboard--moveable">
-                        <div class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent">
+                    <div class="col-12 col-sm-12 col-md-12 col-lg-6 oh-card-dashboard--moveable" >
+                        <div class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent" style = "cursor: default;">
                             <h6 class="ms-4 m-2 fw-bold">{% trans "Total Payslips Genarated :" %}  <b><span class="payslip-number"></span></b></h6>
                             <h6 class="ms-4 m-2 fw-bold">{% trans "Total Amount :" %} <b>{{currency}} <span class="payslip-amount"></span></b></h6>
                             <h5 class="ms-4 m-2 fw-bold" style="color:#9C4000">{% trans "Department Total Amount" %}</h5>
@@ -172,7 +172,7 @@
                     </div>
                     
                     <div class="col-12 col-sm-12 col-md-12 col-lg-6 oh-card-dashboard--moveable">
-                        <div class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent">
+                        <div class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent" style = "cursor: default;">
                             <h4 class="ms-4 m-2 fw-bold text-danger">{% trans "Contracts ending this month" %}  <b><span class=""></span></b></h4>
                             <h6 class="ms-4 fw-bold" >{% trans "Number of contracts expiring this month :" %} <b class="contract-number"></b></h6>
                             <hr class="line">
@@ -186,7 +186,7 @@
                             <div class="oh-card-dashboard__header oh-card-dashboard__header--divider">
                                 <span class="oh-card-dashboard__title">{% trans "Department Chart" %}</span>
                             </div>
-                            <div class="oh-card-dashboard__body" id="department_canvas_body" style="width: 50%; margin: 0 auto;">
+                            <div class="oh-card-dashboard__body" id="department_canvas_body" style="width: 50%; margin: 0 auto;" >
                                 <canvas id="departmentChart"></canvas>
                             </div>
                         </div>
diff --git a/payroll/templates/payroll/deduction/view_deduction.html b/payroll/templates/payroll/deduction/view_deduction.html
index 69fa0de8b..c01b915cd 100644
--- a/payroll/templates/payroll/deduction/view_deduction.html
+++ b/payroll/templates/payroll/deduction/view_deduction.html
@@ -54,10 +54,10 @@
     <div class="oh-main__titlebar-button-container">
       <ul class="oh-view-types ml-2" style="margin-bottom: 0;">
         <li class="oh-view-type deduction-view-type" data-view="list">
-        <a hx-get="{% url 'filter-deduction' %}?view=list" hx-target="#payroll-deduction-container" class="oh-btn oh-btn--view" title='{% trans "List" %}'><ion-icon name="list-outline" role="img" class="md hydrated" aria-label="list outline"></ion-icon></a>
+        <a hx-get="{% url 'filter-deduction' %}?view=list" hx-target="#payroll-deduction-container" class="oh-btn oh-btn--view {% if request.GET.view == 'list' %} oh-btn--view-active {% endif %}" title='{% trans "List" %}'><ion-icon name="list-outline" role="img" class="md hydrated" aria-label="list outline"></ion-icon></a>
         </li>
         <li class="oh-view-type deduction-view-type" data-view="card">
-        <a hx-get="{% url 'filter-deduction' %}?view=card" hx-target="#payroll-deduction-container" class="oh-btn oh-btn--view" title='{% trans "Card" %}'><ion-icon name="grid-outline" role="img" class="md hydrated" aria-label="grid outline"></ion-icon></a>
+        <a hx-get="{% url 'filter-deduction' %}?view=card" hx-target="#payroll-deduction-container" class="oh-btn oh-btn--view {% if request.GET.view != 'list' %} oh-btn--view-active {% endif %}" title='{% trans "Card" %}'><ion-icon name="grid-outline" role="img" class="md hydrated" aria-label="grid outline"></ion-icon></a>
         </li>
       </ul>
       <div class="oh-dropdown" x-data="{open: false}">
@@ -120,6 +120,8 @@
         newURL = currentURL + separator + "view="+view;        
       }       
       history.pushState({}, "", newURL);
+      $(".oh-btn--view-active").removeClass("oh-btn--view-active")
+      $(this).children("a").addClass("oh-btn--view-active")
     });
     $("#filter-deduction").focusout(function (e) {
       $("#filterSearch").val($(this).val());
diff --git a/payroll/views/views.py b/payroll/views/views.py
index 409c78a47..ec11affb5 100644
--- a/payroll/views/views.py
+++ b/payroll/views/views.py
@@ -489,6 +489,7 @@ def dashboard_employee_chart(request):
             "dataset": dataset,
             "labels": employee_label,
             "employees": list_of_employees,
+            "message":_("No payslips generated for this month.")
         }
         return JsonResponse(response)
 
@@ -577,6 +578,7 @@ def dashboard_department_chart(request):
             "dataset": dataset,
             "labels": department,
             "department_total": department_total,
+            "message":"No payslips generated for this month."
         }
         return JsonResponse(response)
 
@@ -602,6 +604,7 @@ def contract_ending(request):
 
     response = {
         "contract_end": ending_contract,
+        "message":"No contracts ending this month"
     }
     return JsonResponse(response)
 
diff --git a/templates/dashboard.html b/templates/dashboard.html
index d9ecfa3bc..efaaf31d6 100755
--- a/templates/dashboard.html
+++ b/templates/dashboard.html
@@ -8,6 +8,9 @@
   .oh-card-dashboard--moveable {
     padding: 0 10px 20px 10px;
   }
+  .oh-card-dashboard {
+    cursor: default;
+  }
 </style>
 <main>
   <div class="oh-wrapper">
@@ -73,7 +76,7 @@
                 </select>
               </div>
               <div class="oh-card-dashboard__body">
-                <canvas id="overAllLeave"></canvas>
+                <canvas id="overAllLeave" style = "cursor: pointer;"></canvas>
               </div>
             </div>
           </div>
@@ -85,7 +88,7 @@
                 <span class="oh-card-dashboard__title">{% trans "Hired Candidates" %}</span>
               </div>
               <div class="oh-card-dashboard__body">
-                <canvas id="hiredCandidate"></canvas>
+                <canvas id="hiredCandidate" style = "cursor: pointer;"></canvas>
               </div>
             </div>
           </div>
@@ -95,7 +98,7 @@
                 <span class="oh-card-dashboard__title">{% trans "Candidate Started Onboarding" %}</span>
               </div>
               <div class="oh-card-dashboard__body">
-                <canvas id="onboardCandidate"></canvas>
+                <canvas id="onboardCandidate" style = "cursor: pointer;"></canvas>
               </div>
             </div>
           </div>
@@ -108,7 +111,7 @@
                 <span class="oh-card-dashboard__title">{% trans "Daily Attendance Analytic" %}</span>
               </div>
               <div class="oh-card-dashboard__body">
-                <canvas id="dailyAnalytic"></canvas>
+                <canvas id="dailyAnalytic" style = "cursor: pointer;"></canvas>
               </div>
             </div>
           </div>
@@ -121,7 +124,7 @@
                 <span class="oh-card-dashboard__title">{% trans "Employees Chart" %}</span>
               </div>
               <div class="oh-card-dashboard__body">
-                <canvas id="totalEmployees"></canvas>
+                <canvas id="totalEmployees" style = "cursor: pointer;"></canvas>
               </div>
             </div>
           </div>
@@ -134,7 +137,7 @@
                 <span class="oh-card-dashboard__title">{% trans "Department Chart" %}</span>
               </div>
               <div class="oh-card-dashboard__body">
-                <canvas id="departmentChart"></canvas>
+                <canvas id="departmentChart" style = "cursor: pointer;"></canvas>
               </div>
             </div>
           </div>
@@ -146,7 +149,7 @@
                 <span class="oh-card-dashboard__title">{% trans "Gender Chart" %}</span>
               </div>
               <div class="oh-card-dashboard__body">
-                <canvas id="genderChart"></canvas>
+                <canvas id="genderChart" style = "cursor: pointer;"></canvas>
               </div>
             </div>
           </div>
@@ -158,7 +161,7 @@
                 <span class="oh-card-dashboard__title">{% trans "Recruitment Analytic" %}</span>
               </div>
               <div class="oh-card-dashboard__body">
-                <canvas id="recruitmentChart1"></canvas>
+                <canvas id="recruitmentChart1" style = "cursor: pointer;"></canvas>
               </div>
             </div>
           </div>
@@ -171,7 +174,7 @@
                 <span class="oh-card-dashboard__title">{% trans "Objective status" %}</span>
               </div>
               <div class="oh-card-dashboard__body">
-                <canvas id="objectiveChart"></canvas>
+                <canvas id="objectiveChart" style = "cursor: pointer;"></canvas>
               </div>
             </div>
             {% endif %}
@@ -183,7 +186,7 @@
                 <span class="oh-card-dashboard__title">{% trans "Key result status" %}</span>
               </div>
               <div class="oh-card-dashboard__body">
-                <canvas id="keyResultChart"></canvas>
+                <canvas id="keyResultChart" style = "cursor: pointer;"></canvas>
               </div>
             </div>
           </div>
@@ -193,11 +196,11 @@
             <div class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent">
               <div class="oh-card-dashboard__header oh-card-dashboard__header--divider">
                 <span class="oh-card-dashboard__title">{% trans "Feedback Status" %}</span>
-                <span class="oh-card-dashboard__title float-end" id="feedback-status-chart"><ion-icon
+                <span class="oh-card-dashboard__title float-end" id="feedback-status-chart" style = "cursor: pointer;"><ion-icon
                     name="caret-forward"></ion-icon></span>
               </div>
               <div class="oh-card-dashboard__body">
-                <canvas id="feedbackChart"></canvas>
+                <canvas id="feedbackChart" style = "cursor: pointer;"></canvas>
               </div>
             </div>
           </div>
@@ -218,7 +221,7 @@
           </ul>
         </div>
 
-        <div class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent mt-3">
+        <div class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent">
           <div class="oh-card-dashboard__header oh-card-dashboard__header--divider">
             <span class="oh-card-dashboard__title">{% trans "On Leave" %}</span>
           </div>
diff --git a/templates/filter_tags.html b/templates/filter_tags.html
index 166435fcc..6bc2a337b 100644
--- a/templates/filter_tags.html
+++ b/templates/filter_tags.html
@@ -6,6 +6,9 @@
   class="oh-filter-tag-container"
   style="position: fixed; top: 150; z-index: 9999"
 >
+  {% if filter_dict %}
+    <span class="oh-filter-tag">{% trans "Applied Filters :" %}</span>
+  {% endif %}
   {%for field,values in filter_dict.items %} {%if values %}
   {% with translation_field=field|filter_field %}
   <span class="oh-filter-tag filter-field" data-x-field="{{field}}">