From 820a2d377ae07316f2eb9e50e1893fd8ef153764 Mon Sep 17 00:00:00 2001
From: Cybrosys Odoo Devs <50653951+CybroOdooDev@users.noreply.github.com>
Date: Fri, 8 Mar 2024 23:49:22 +0530
Subject: [PATCH] [IMP] BASE: Added Horilla tour for first time users

---
 base/forms.py                            |  36 ++-
 base/models.py                           |  20 ++
 base/urls.py                             |   1 +
 base/views.py                            |  12 +
 recruitment/templates/pipeline/nav.html  |  22 +-
 recruitment/views.py                     |   6 +-
 static/build/css/driver.min.css          | 288 +++++++++++++++++++++++
 static/build/js/dashboardDriver.js       |  73 ++++++
 static/build/js/driver.js                |   2 +
 static/build/js/pipelineDriver.js        |  48 ++++
 static/build/js/settingsDriver.js        |  47 ++++
 templates/dashboard.html                 |  13 +-
 templates/index.html                     |  14 +-
 templates/notification/notification.html |   1 +
 templates/settings.html                  |   6 +-
 15 files changed, 562 insertions(+), 27 deletions(-)
 create mode 100644 static/build/css/driver.min.css
 create mode 100644 static/build/js/dashboardDriver.js
 create mode 100644 static/build/js/driver.js
 create mode 100644 static/build/js/pipelineDriver.js
 create mode 100644 static/build/js/settingsDriver.js

diff --git a/base/forms.py b/base/forms.py
index c7222d4d8..98fd1aaf2 100644
--- a/base/forms.py
+++ b/base/forms.py
@@ -3,6 +3,7 @@ forms.py
 
 This module is used to register forms for base module
 """
+
 import calendar
 import os
 from typing import Any
@@ -28,6 +29,7 @@ from base.models import (
     BaserequestFile,
     Company,
     Department,
+    DriverViewed,
     DynamicEmailConfiguration,
     DynamicPagination,
     JobPosition,
@@ -171,7 +173,7 @@ class ModelForm(forms.ModelForm):
             widget = field.widget
             if isinstance(widget, (forms.DateInput)):
                 field.initial = date.today()
-                
+
             if isinstance(
                 widget,
                 (forms.NumberInput, forms.EmailInput, forms.TextInput, forms.FileInput),
@@ -184,7 +186,7 @@ class ModelForm(forms.ModelForm):
                 )
             elif isinstance(widget, (forms.Select,)):
                 field.empty_label = None
-                if not isinstance(field,forms.ModelMultipleChoiceField):
+                if not isinstance(field, forms.ModelMultipleChoiceField):
                     label = ""
                     if field.label is not None:
                         label = _(field.label)
@@ -210,16 +212,19 @@ class ModelForm(forms.ModelForm):
             ):
                 field.widget.attrs.update({"class": "oh-switch__checkbox"})
 
-            try:            
-                self.fields["employee_id"].initial = request.user.employee_get 
+            try:
+                self.fields["employee_id"].initial = request.user.employee_get
             except:
                 pass
 
-            try:            
-                self.fields["company_id"].initial = request.user.employee_get.get_company
+            try:
+                self.fields["company_id"].initial = (
+                    request.user.employee_get.get_company
+                )
             except:
                 pass
 
+
 class Form(forms.Form):
     """
     Overrides to add initial styling to the django Form instance
@@ -377,9 +382,9 @@ class AssignPermission(Form):
         """
         Save method to assign permission to employee
         """
-        user_ids = Employee.objects.filter(id__in=self.data.getlist("employee")).values_list(
-            "employee_user_id", flat=True
-        )
+        user_ids = Employee.objects.filter(
+            id__in=self.data.getlist("employee")
+        ).values_list("employee_user_id", flat=True)
         permissions = self.cleaned_data["permissions"]
         permissions = Permission.objects.filter(codename__in=permissions)
         users = User.objects.filter(id__in=user_ids)
@@ -529,7 +534,7 @@ class RotatingWorkTypeAssignForm(ModelForm):
         exclude = ("next_change_date", "current_work_type", "next_work_type")
         widgets = {
             "start_date": DateInput(attrs={"type": "date"}),
-            "is_active":HiddenInput()
+            "is_active": HiddenInput(),
         }
         labels = {
             "is_active": _trans("Is Active"),
@@ -1309,7 +1314,6 @@ class ShiftAllocationForm(ModelForm):
         return super().save(commit)
 
 
-
 class WorkTypeRequestForm(ModelForm):
     """
     WorkTypeRequest model's form
@@ -1855,3 +1859,13 @@ class AnnouncementExpireForm(ModelForm):
 
         model = AnnouncementExpire
         fields = ("days",)
+
+
+class DriverForm(forms.ModelForm):
+    """
+    DriverForm
+    """
+
+    class Meta:
+        model = DriverViewed
+        fields = "__all__"
diff --git a/base/models.py b/base/models.py
index c642ecb74..f1b9ad60d 100644
--- a/base/models.py
+++ b/base/models.py
@@ -1351,3 +1351,23 @@ class EmailLog(models.Model):
     company_id = models.ForeignKey(
         Company, on_delete=models.CASCADE, null=True, editable=False
     )
+
+
+class DriverViewed(models.Model):
+    """
+    Model to store driver viewed status
+    """
+
+    choices = [
+        ("dashboard", "dashboard"),
+        ("pipeline", "pipeline"),
+        ("settings", "settings"),
+    ]
+    user = models.ForeignKey(User, on_delete=models.CASCADE)
+    viewed = models.CharField(max_length=10, choices=choices)
+
+    def user_viewed(self):
+        """
+        This method is used to access all the viewd driver
+        """
+        return self.user.driverviewed_set.values_list("viewed", flat=True)
diff --git a/base/urls.py b/base/urls.py
index 75143a8c7..c9fc5fdc6 100644
--- a/base/urls.py
+++ b/base/urls.py
@@ -892,4 +892,5 @@ urlpatterns = [
     path(
         "announcement-viewed-by", announcement.viewed_by, name="announcement-viewed-by"
     ),
+    path("driver-viewed", views.driver_viewed_status, name="driver-viewed"),
 ]
diff --git a/base/views.py b/base/views.py
index 1ff066358..790bf877e 100644
--- a/base/views.py
+++ b/base/views.py
@@ -51,6 +51,7 @@ from base.forms import (
     AuditTagForm,
     CompanyForm,
     DepartmentForm,
+    DriverForm,
     DynamicMailConfForm,
     DynamicPaginationForm,
     EmployeeTagForm,
@@ -5273,3 +5274,14 @@ def action_type_delete(request, act_id):
     Actiontype.objects.filter(id=act_id).delete()
     messages.success(request, _("Action has been deleted successfully!"))
     return HttpResponseRedirect(request.META.get("HTTP_REFERER", "/"))
+
+
+@login_required
+def driver_viewed_status(request):
+    """
+    This method is used to update driver viewed status
+    """
+    form = DriverForm(request.GET)
+    if form.is_valid():
+        form.save()
+    return HttpResponse("")
diff --git a/recruitment/templates/pipeline/nav.html b/recruitment/templates/pipeline/nav.html
index 5089116d8..81ca49264 100644
--- a/recruitment/templates/pipeline/nav.html
+++ b/recruitment/templates/pipeline/nav.html
@@ -1,4 +1,5 @@
 {% load i18n %}
+{% load static %}
 <style>
   .note-modal-backdrop{
     z-index: 998 !important;
@@ -84,6 +85,7 @@ x-data="{searchShow: false}"
 		></ion-icon>
 		<input
 		type="text"
+    id="pipelineSearchInput"
 		placeholder="{% trans 'Search' %}" 
 		name='candidate_name'
     value="{{request.GET.candidate_name}}"
@@ -94,7 +96,7 @@ x-data="{searchShow: false}"
   	</div>
 
 
-	<ul class="oh-view-types ml-2" style="margin-bottom: 0;">
+	<ul id="viewTypes" class="oh-view-types ml-2" style="margin-bottom: 0;">
     <input type="hidden" name="view" value="list">
 		<li class="oh-view-type candidate-view-type" >
 		<div onclick="$(this).closest('ul').find('[name=view]').val('list');$(this).closest('form').submit()" class="oh-btn oh-btn--view {% if request.GET.view != 'card' %} oh-btn--view-active {% endif %}"
@@ -110,7 +112,7 @@ x-data="{searchShow: false}"
 
     <div class="oh-main__titlebar-button-container">
 
-        <div class="oh-dropdown" x-data="{open: false}">
+        <div id="pipelineFilterDrop" class="oh-dropdown" x-data="{open: false}">
           <button type="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>
@@ -121,7 +123,7 @@ x-data="{searchShow: false}"
 	<div class="oh-main__titlebar-button-container">
 
 		{% if perms.recruitment.add_recruitment %}
-		<button class="oh-btn oh-btn--secondary" data-toggle="oh-modal-toggle" data-target="#addRecruitmentModal" hx-target="#addRecruitmentModalBody" hx-get="{% url "recruitment-create" %}">
+		<button id="createNewRecruitment" class="oh-btn oh-btn--secondary" data-toggle="oh-modal-toggle" data-target="#addRecruitmentModal" hx-target="#addRecruitmentModalBody" hx-get="{% url "recruitment-create" %}">
       <ion-icon class="me-1" name="add-outline"></ion-icon>
       {% trans 'Recruitment' %}
     </button>
@@ -202,7 +204,7 @@ $(document).ready(function(){
 	
 </script>
 {% include "filter_tags.html" %}
-<div class="d-flex flex-row-reverse oh-wrapper">
+<div class="d-flex flex-row-reverse oh-wrapper" id="quickFilters">
   <span  onclick="$('[name=closed]').val('true'); $('[name=closed]').first().change(); $('.filterButton').click()" style="cursor: pointer;margin-left: 10px;margin-right: 10px;">
     <span class="oh-dot oh-dot--small me-1" style="background-color:orangered"></span>
     {% trans "Closed" %}
@@ -212,3 +214,15 @@ $(document).ready(function(){
     {% trans "Open" %}
   </span>
 </div>
+<script src="{% static 'build/js/pipelineDriver.js' %}"></script>
+<script>
+  initialAvtiveTab = $(".oh-tabs__content--active").length
+  if (!initialAvtiveTab) {
+    $(".oh-tabs__tab:first").click()
+  }
+</script>
+{% if "pipeline" not in request.user.driverviewed_set.first.user_viewed %}
+<script>
+  runDriver()
+</script>
+{% endif %}
\ No newline at end of file
diff --git a/recruitment/views.py b/recruitment/views.py
index 74adf14fc..2bc8da9f3 100644
--- a/recruitment/views.py
+++ b/recruitment/views.py
@@ -1271,11 +1271,7 @@ def send_acknowledgement(request):
         bdy = request.POST.get("body")
         email_backend = ConfiguredEmailBackend()
         res = send_mail(
-            subject,
-            bdy,
-            email_backend.dynamic_username_with_display_name,
-            [send_to],
-            fail_silently=False,
+            subject, bdy, email_backend.dynamic_username, [send_to], fail_silently=False
         )
         if res == 1:
             return HttpResponse(
diff --git a/static/build/css/driver.min.css b/static/build/css/driver.min.css
new file mode 100644
index 000000000..f6898c1cf
--- /dev/null
+++ b/static/build/css/driver.min.css
@@ -0,0 +1,288 @@
+.driver-active .driver-overlay,
+.driver-active * {
+    pointer-events: none
+}
+
+.driver-active .driver-active-element,
+.driver-active .driver-active-element *,
+.driver-popover,
+.driver-popover * {
+    pointer-events: auto
+}
+
+@keyframes animate-fade-in {
+    0% {
+        opacity: 0
+    }
+
+    to {
+        opacity: 1
+    }
+}
+
+.driver-fade .driver-overlay {
+    animation: animate-fade-in .2s ease-in-out
+}
+
+.driver-fade .driver-popover {
+    animation: animate-fade-in .2s
+}
+
+.driver-popover {
+    all: unset;
+    box-sizing: border-box;
+    color: #2d2d2d;
+    margin: 0;
+    padding: 15px;
+    border-radius: 5px;
+    min-width: 250px;
+    max-width: 300px;
+    box-shadow: 0 1px 10px #0006;
+    z-index: 1000000000;
+    position: fixed;
+    top: 0;
+    right: 0;
+    background-color: #fff
+}
+
+.driver-popover * {
+    font-family: Helvetica Neue, Inter, ui-sans-serif, "Apple Color Emoji", Helvetica, Arial, sans-serif
+}
+
+.driver-popover-title {
+    font: 19px/normal sans-serif;
+    font-weight: 700;
+    display: block;
+    position: relative;
+    line-height: 1.5;
+    zoom: 1;
+    margin: 0
+}
+
+.driver-popover-close-btn {
+    all: unset;
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 32px;
+    height: 28px;
+    cursor: pointer;
+    font-size: 18px;
+    font-weight: 500;
+    color: #d2d2d2;
+    z-index: 1;
+    text-align: center;
+    transition: color;
+    transition-duration: .2s
+}
+
+.driver-popover-close-btn:hover {
+    color: #2d2d2d
+}
+
+.driver-popover-title[style*=block]+.driver-popover-description {
+    margin-top: 5px
+}
+
+.driver-popover-description {
+    margin-bottom: 0;
+    font: 14px/normal sans-serif;
+    line-height: 1.5;
+    font-weight: 400;
+    zoom: 1
+}
+
+.driver-popover-footer {
+    margin-top: 15px;
+    text-align: right;
+    zoom: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between
+}
+
+.driver-popover-progress-text {
+    font-size: 13px;
+    font-weight: 400;
+    color: #a2a2a2;
+    zoom: 1
+}
+
+.driver-popover-footer button {
+    all: unset;
+    display: inline-block;
+    box-sizing: border-box;
+    padding: 3px 7px;
+    text-decoration: none;
+    text-shadow: 1px 1px 0 #fff;
+    background-color: #fff;
+    color: #2d2d2d;
+    font: 12px/normal sans-serif;
+    cursor: pointer;
+    outline: 0;
+    zoom: 1;
+    line-height: 1.3;
+    border: 1px solid #ccc;
+    border-radius: 3px
+}
+
+.driver-popover-footer .driver-popover-btn-disabled {
+    opacity: .5;
+    pointer-events: none
+}
+
+:not(body):has(> .driver-active-element) {
+    overflow: hidden !important
+}
+
+.driver-popover-footer button:hover {
+    background-color: #f7f7f7
+}
+
+.driver-popover-navigation-btns {
+    display: flex;
+    flex-grow: 1;
+    justify-content: flex-end
+}
+
+.driver-popover-navigation-btns button+button {
+    margin-left: 4px
+}
+
+.driver-popover-arrow {
+    content: "";
+    position: absolute;
+    border: 5px solid #fff
+}
+
+.driver-popover-arrow-side-over {
+    display: none
+}
+
+.driver-popover-arrow-side-left {
+    left: 100%;
+    border-right-color: transparent;
+    border-bottom-color: transparent;
+    border-top-color: transparent
+}
+
+.driver-popover-arrow-side-right {
+    right: 100%;
+    border-left-color: transparent;
+    border-bottom-color: transparent;
+    border-top-color: transparent
+}
+
+.driver-popover-arrow-side-top {
+    top: 100%;
+    border-right-color: transparent;
+    border-bottom-color: transparent;
+    border-left-color: transparent
+}
+
+.driver-popover-arrow-side-bottom {
+    bottom: 100%;
+    border-left-color: transparent;
+    border-top-color: transparent;
+    border-right-color: transparent
+}
+
+.driver-popover-arrow-side-center {
+    display: none
+}
+
+.driver-popover-arrow-side-left.driver-popover-arrow-align-start,
+.driver-popover-arrow-side-right.driver-popover-arrow-align-start {
+    top: 15px
+}
+
+.driver-popover-arrow-side-top.driver-popover-arrow-align-start,
+.driver-popover-arrow-side-bottom.driver-popover-arrow-align-start {
+    left: 15px
+}
+
+.driver-popover-arrow-align-end.driver-popover-arrow-side-left,
+.driver-popover-arrow-align-end.driver-popover-arrow-side-right {
+    bottom: 15px
+}
+
+.driver-popover-arrow-side-top.driver-popover-arrow-align-end,
+.driver-popover-arrow-side-bottom.driver-popover-arrow-align-end {
+    right: 15px
+}
+
+.driver-popover-arrow-side-left.driver-popover-arrow-align-center,
+.driver-popover-arrow-side-right.driver-popover-arrow-align-center {
+    top: 50%;
+    margin-top: -5px
+}
+
+.driver-popover-arrow-side-top.driver-popover-arrow-align-center,
+.driver-popover-arrow-side-bottom.driver-popover-arrow-align-center {
+    left: 50%;
+    margin-left: -5px
+}
+
+.driver-popover-arrow-none {
+    display: none
+}
+.driver-popover.driverjs-theme {
+    background-color: #fde047;
+    color: #000;
+  }
+  
+  .driver-popover.driverjs-theme .driver-popover-title {
+    font-size: 20px;
+  }
+  
+  .driver-popover.driverjs-theme .driver-popover-title,
+  .driver-popover.driverjs-theme .driver-popover-description,
+  .driver-popover.driverjs-theme .driver-popover-progress-text {
+    color: #000;
+  }
+  
+  .driver-popover.driverjs-theme button {
+    flex: 1;
+    text-align: center;
+    background-color: #000;
+    color: #ffffff;
+    border: 2px solid #000;
+    text-shadow: none;
+    font-size: 14px;
+    padding: 5px 8px;
+    border-radius: 6px;
+  }
+  
+  .driver-popover.driverjs-theme button:hover {
+    background-color: #000;
+    color: #ffffff;
+  }
+  
+  .driver-popover.driverjs-theme .driver-popover-navigation-btns {
+    justify-content: space-between;
+    gap: 3px;
+  }
+  
+  .driver-popover.driverjs-theme .driver-popover-close-btn {
+    color: #9b9b9b;
+  }
+  
+  .driver-popover.driverjs-theme .driver-popover-close-btn:hover {
+    color: #000;
+  }
+  
+  .driver-popover.driverjs-theme .driver-popover-arrow-side-left.driver-popover-arrow {
+    border-left-color: #fde047;
+  }
+  
+  .driver-popover.driverjs-theme .driver-popover-arrow-side-right.driver-popover-arrow {
+    border-right-color: #fde047;
+  }
+  
+  .driver-popover.driverjs-theme .driver-popover-arrow-side-top.driver-popover-arrow {
+    border-top-color: #fde047;
+  }
+  
+  .driver-popover.driverjs-theme .driver-popover-arrow-side-bottom.driver-popover-arrow {
+    border-bottom-color: #fde047;
+  }
\ No newline at end of file
diff --git a/static/build/js/dashboardDriver.js b/static/build/js/dashboardDriver.js
new file mode 100644
index 000000000..0f10affcd
--- /dev/null
+++ b/static/build/js/dashboardDriver.js
@@ -0,0 +1,73 @@
+
+const driver = window.driver.js.driver;
+
+
+
+var steps = [
+    { popover: { title: 'Dashboard', description: 'Horilla dashboard section' } },
+    { element: '#attendance-activity-container', popover: { title: 'Mark Attendance', description: 'Used to mark your attendance' } },
+];
+
+if ($('#settingsMenu').length) {
+    steps.push({ element: '#settingsMenu', popover: { title: 'Settings', description: 'Settings configurations' } });
+}
+
+if ($('#notificationIcon').length) {
+    steps.push({ element: '#notificationIcon', popover: { title: 'Notification', description: 'Notifications section' } });
+}
+
+if ($('#multiLanguage').length) {
+    steps.push({ element: '#multiLanguage', popover: { title: 'Language', description: 'Multi-Language options' } });
+}
+if ($('#multCompany').length) {
+    steps.push({ element: '#multCompany', popover: { title: 'Multi-Company', description: 'Multi-Company options' } });
+}
+if ($('#mainNavProfile').length) {
+    steps.push({ element: '#mainNavProfile', popover: { title: 'Profile', description: 'Profile and change password options' } });
+}
+if ($('.oh-card-dashboard').length) {
+    steps.push({ element: '#tileContainer .oh-card-dashboard:nth-child(1)', popover: { title: 'Dashboard Tiles', description: 'Horilla Dashboard Tiles' } });
+}
+setTimeout(() => {
+    if ($('.oh-btn-group').length) {
+        steps.push({ element: '.oh-btn-group:nth-child(1)', popover: { title: 'Dashboard Actions', description: 'Approve or Reject Options' } });
+    }
+    if ($('#addAnnouncement').length) {
+        steps.push({ element: '#addAnnouncement', popover: { title: 'Add announcement', description: 'Create announcement from dashboard' } });
+    }
+    if ($('#quickActions').length) {
+        steps.push({ element: '#quickActions', popover: { title: 'Quick Actions', description: 'Create Quick Requests' } });
+    }
+    if ($('.oh-sidebar__company').length) {
+        steps.push({ element: '.oh-sidebar__company:nth-child(1)', popover: { title: 'Company', description: 'Your current company access' } });
+    }
+    if ($('[data-id="dashboardNav"]').length) {
+        steps.push({ element: '[data-id="dashboardNav"]', popover: { title: 'App', description: 'Horilla Hr Apps. eg Dashboard' } });
+    }
+}, 1000);
+driverObj = driver(
+
+    {
+        showProgress: false,
+        animate: true,
+        showButtons: ['next', 'previous', 'close'],
+        steps: steps,
+
+
+    }
+)
+
+
+
+function runDriver() {
+    // Start driving after checking all steps
+
+    driverObj.drive();
+    $.ajax({
+        type: "get",
+        url: "/driver-viewed?user=" + $(".logged-in[data-user-id]").attr("data-user-id") + "&viewed=dashboard",
+        success: function (response) {
+
+        }
+    });
+}
\ No newline at end of file
diff --git a/static/build/js/driver.js b/static/build/js/driver.js
new file mode 100644
index 000000000..15db7737e
--- /dev/null
+++ b/static/build/js/driver.js
@@ -0,0 +1,2 @@
+this.driver=this.driver||{};this.driver.js=function(I){"use strict";let O={};function z(e={}){O={animate:!0,allowClose:!0,overlayOpacity:.7,smoothScroll:!1,showProgress:!1,stagePadding:10,stageRadius:5,popoverOffset:10,showButtons:["next","previous","close"],disableButtons:[],overlayColor:"#000",...e}}function s(e){return e?O[e]:O}function W(e,t,o,n){return(e/=n/2)<1?o/2*e*e+t:-o/2*(--e*(e-2)-1)+t}function D(e){if(!e||ie(e))return;const t=s("smoothScroll");e.scrollIntoView({behavior:!t||ne(e)?"auto":"smooth",inline:"center",block:"center"})}function ne(e){if(!e||!e.parentElement)return;const t=e.parentElement;return t.scrollHeight>t.clientHeight}function ie(e){const t=e.getBoundingClientRect();return t.top>=0&&t.left>=0&&t.bottom<=(window.innerHeight||document.documentElement.clientHeight)&&t.right<=(window.innerWidth||document.documentElement.clientWidth)}let _={};function b(e,t){_[e]=t}function d(e){return e?_[e]:_}function re(){_={}}let T={};function N(e,t){T[e]=t}function L(e){var t;(t=T[e])==null||t.call(T)}function se(){T={}}function ae(e,t,o,n){let p=d("__activeStagePosition");const r=p||o.getBoundingClientRect(),f=n.getBoundingClientRect(),w=W(e,r.x,f.x-r.x,t),i=W(e,r.y,f.y-r.y,t),h=W(e,r.width,f.width-r.width,t),a=W(e,r.height,f.height-r.height,t);p={x:w,y:i,width:h,height:a},q(p),b("__activeStagePosition",p)}function F(e){if(!e)return;const t=e.getBoundingClientRect(),o={x:t.x,y:t.y,width:t.width,height:t.height};b("__activeStagePosition",o),q(o)}function le(){const e=d("__activeStagePosition"),t=d("__overlaySvg");if(!e)return;if(!t){console.warn("No stage svg found.");return}const o=window.innerWidth,n=window.innerHeight;t.setAttribute("viewBox",`0 0 ${o} ${n}`)}function ce(e){const t=de(e);document.body.appendChild(t),j(t,o=>{o.target.tagName==="path"&&L("overlayClick")}),b("__overlaySvg",t)}function q(e){const t=d("__overlaySvg");if(!t){ce(e);return}const o=t.firstElementChild;if((o==null?void 0:o.tagName)!=="path")throw new Error("no path element found in stage svg");o.setAttribute("d",V(e))}function de(e){const t=window.innerWidth,o=window.innerHeight,n=document.createElementNS("http://www.w3.org/2000/svg","svg");n.classList.add("driver-overlay","driver-overlay-animated"),n.setAttribute("viewBox",`0 0 ${t} ${o}`),n.setAttribute("xmlSpace","preserve"),n.setAttribute("xmlnsXlink","http://www.w3.org/1999/xlink"),n.setAttribute("version","1.1"),n.setAttribute("preserveAspectRatio","xMinYMin slice"),n.style.fillRule="evenodd",n.style.clipRule="evenodd",n.style.strokeLinejoin="round",n.style.strokeMiterlimit="2",n.style.zIndex="10000",n.style.position="fixed",n.style.top="0",n.style.left="0",n.style.width="100%",n.style.height="100%";const p=document.createElementNS("http://www.w3.org/2000/svg","path");return p.setAttribute("d",V(e)),p.style.fill=s("overlayColor")||"rgb(0,0,0)",p.style.opacity=`${s("overlayOpacity")}`,p.style.pointerEvents="auto",p.style.cursor="auto",n.appendChild(p),n}function V(e){const t=window.innerWidth,o=window.innerHeight,n=s("stagePadding")||0,p=s("stageRadius")||0,r=e.width+n*2,f=e.height+n*2,w=Math.min(p,r/2,f/2),i=Math.floor(Math.max(w,0)),h=e.x-n+i,a=e.y-n,l=r-i*2,c=f-i*2;return`M${t},0L0,0L0,${o}L${t},${o}L${t},0Z
+    M${h},${a} h${l} a${i},${i} 0 0 1 ${i},${i} v${c} a${i},${i} 0 0 1 -${i},${i} h-${l} a${i},${i} 0 0 1 -${i},-${i} v-${c} a${i},${i} 0 0 1 ${i},-${i} z`}function pe(){const e=d("__overlaySvg");e&&e.remove()}function ue(){const e=document.getElementById("driver-dummy-element");if(e)return e;let t=document.createElement("div");return t.id="driver-dummy-element",t.style.width="0",t.style.height="0",t.style.pointerEvents="none",t.style.opacity="0",t.style.position="fixed",t.style.top="50%",t.style.left="50%",document.body.appendChild(t),t}function X(e){const{element:t}=e;let o=typeof t=="string"?document.querySelector(t):t;o||(o=ue()),he(o,e)}function ve(){const e=d("activeElement"),t=d("activeStep");e&&(F(e),le(),J(e,t))}function he(e,t){const n=Date.now(),p=d("activeStep"),r=d("activeElement")||e,f=!r||r===e,w=e.id==="driver-dummy-element",i=r.id==="driver-dummy-element",h=s("animate"),a=t.onHighlightStarted||s("onHighlightStarted"),l=(t==null?void 0:t.onHighlighted)||s("onHighlighted"),c=(p==null?void 0:p.onDeselected)||s("onDeselected"),m=s(),g=d();!f&&c&&c(i?void 0:r,p,{config:m,state:g}),a&&a(w?void 0:e,t,{config:m,state:g});const u=!f&&h;let v=!1;me();const P=()=>{if(d("__transitionCallback")!==P)return;const k=Date.now()-n,y=400-k<=400/2;t.popover&&y&&!v&&u&&(K(e,t),v=!0),s("animate")&&k<400?ae(k,400,r,e):(F(e),l&&l(w?void 0:e,t,{config:s(),state:d()}),b("__transitionCallback",void 0),b("previousStep",p),b("previousElement",r),b("activeStep",t),b("activeElement",e)),window.requestAnimationFrame(P)};b("__transitionCallback",P),window.requestAnimationFrame(P),D(e),!u&&t.popover&&K(e,t),r.classList.remove("driver-active-element"),e.classList.add("driver-active-element")}function fe(){var e;(e=document.getElementById("driver-dummy-element"))==null||e.remove(),document.querySelectorAll(".driver-active-element").forEach(t=>{t.classList.remove("driver-active-element")})}function $(){const e=d("__resizeTimeout");e&&window.cancelAnimationFrame(e),b("__resizeTimeout",window.requestAnimationFrame(ve))}function Y(e){s("allowKeyboardControl");e.key==="Escape"?L("escapePress"):e.key==="ArrowRight"?L("arrowRightPress"):e.key==="ArrowLeft"&&L("arrowLeftPress")}function j(e,t,o){const n=(r,f)=>{const w=r.target;e.contains(w)&&((!o||o(w))&&(r.preventDefault(),r.stopPropagation(),r.stopImmediatePropagation()),f==null||f(r))};document.addEventListener("pointerdown",n,!0),document.addEventListener("mousedown",n,!0),document.addEventListener("pointerup",n,!0),document.addEventListener("mouseup",n,!0),document.addEventListener("click",r=>{n(r,t)},!0)}function ge(){window.addEventListener("keyup",Y,!1),window.addEventListener("resize",$),window.addEventListener("scroll",$)}function we(){window.removeEventListener("keyup",Y),window.removeEventListener("resize",$),window.removeEventListener("scroll",$)}function me(){const e=d("popover");e&&(e.wrapper.style.display="none")}function K(e,t){var k,C;let o=d("popover");o&&document.body.removeChild(o.wrapper),o=xe(),document.body.appendChild(o.wrapper);const{title:n,description:p,showButtons:r,disableButtons:f,showProgress:w,nextBtnText:i=s("nextBtnText")||"Next &rarr;",prevBtnText:h=s("prevBtnText")||"&larr; Previous",progressText:a=s("progressText")||"{current} of {total}"}=t.popover||{};o.nextButton.innerHTML=i,o.previousButton.innerHTML=h,o.progress.innerHTML=a,n?(o.title.innerText=n,o.title.style.display="block"):o.title.style.display="none",p?(o.description.innerHTML=p,o.description.style.display="block"):o.description.style.display="none";const l=r||s("showButtons"),c=w||s("showProgress")||!1,m=(l==null?void 0:l.includes("next"))||(l==null?void 0:l.includes("previous"))||c;o.closeButton.style.display=l.includes("close")?"block":"none",m?(o.footer.style.display="flex",o.progress.style.display=c?"block":"none",o.nextButton.style.display=l.includes("next")?"block":"none",o.previousButton.style.display=l.includes("previous")?"block":"none"):o.footer.style.display="none";const g=f||s("disableButtons")||[];g!=null&&g.includes("next")&&o.nextButton.classList.add("driver-popover-btn-disabled"),g!=null&&g.includes("previous")&&o.previousButton.classList.add("driver-popover-btn-disabled"),g!=null&&g.includes("close")&&o.closeButton.classList.add("driver-popover-btn-disabled");const u=o.wrapper;u.style.display="block",u.style.left="",u.style.top="",u.style.bottom="",u.style.right="";const v=o.arrow;v.className="driver-popover-arrow";const P=((k=t.popover)==null?void 0:k.popoverClass)||s("popoverClass")||"";u.className=`driver-popover ${P}`.trim(),j(o.wrapper,y=>{var A,M,R;const x=y.target,H=((A=t.popover)==null?void 0:A.onNextClick)||s("onNextClick"),E=((M=t.popover)==null?void 0:M.onPrevClick)||s("onPrevClick"),B=((R=t.popover)==null?void 0:R.onCloseClick)||s("onCloseClick");if(x.classList.contains("driver-popover-next-btn"))return H?H(e,t,{config:s(),state:d()}):L("nextClick");if(x.classList.contains("driver-popover-prev-btn"))return E?E(e,t,{config:s(),state:d()}):L("prevClick");if(x.classList.contains("driver-popover-close-btn"))return B?B(e,t,{config:s(),state:d()}):L("closeClick")},y=>!(o!=null&&o.description.contains(y))&&!(o!=null&&o.title.contains(y))&&y.className.includes("driver-popover")),b("popover",o),J(e,t),D(u);const S=((C=t.popover)==null?void 0:C.onPopoverRendered)||s("onPopoverRendered");S&&S(o,{config:s(),state:d()})}function Q(){const e=d("popover");if(!(e!=null&&e.wrapper))return;const t=e.wrapper.getBoundingClientRect(),o=s("stagePadding")||0,n=s("popoverOffset")||0;return{width:t.width+o+n,height:t.height+o+n,realWidth:t.width,realHeight:t.height}}function Z(e,t){const{elementDimensions:o,popoverDimensions:n,popoverPadding:p,popoverArrowDimensions:r}=t;return e==="start"?Math.max(Math.min(o.top-p,window.innerHeight-n.realHeight-r.width),r.width):e==="end"?Math.max(Math.min(o.top-(n==null?void 0:n.realHeight)+o.height+p,window.innerHeight-(n==null?void 0:n.realHeight)-r.width),r.width):e==="center"?Math.max(Math.min(o.top+o.height/2-(n==null?void 0:n.realHeight)/2,window.innerHeight-(n==null?void 0:n.realHeight)-r.width),r.width):0}function G(e,t){const{elementDimensions:o,popoverDimensions:n,popoverPadding:p,popoverArrowDimensions:r}=t;return e==="start"?Math.max(Math.min(o.left-p,window.innerWidth-n.realWidth-r.width),r.width):e==="end"?Math.max(Math.min(o.left-(n==null?void 0:n.realWidth)+o.width+p,window.innerWidth-(n==null?void 0:n.realWidth)-r.width),r.width):e==="center"?Math.max(Math.min(o.left+o.width/2-(n==null?void 0:n.realWidth)/2,window.innerWidth-(n==null?void 0:n.realWidth)-r.width),r.width):0}function J(e,t){const o=d("popover");if(!o)return;const{align:n="start",side:p="left"}=(t==null?void 0:t.popover)||{},r=n,f=e.id==="driver-dummy-element"?"over":p,w=s("stagePadding")||0,i=Q(),h=o.arrow.getBoundingClientRect(),a=e.getBoundingClientRect(),l=a.top-i.height;let c=l>=0;const m=window.innerHeight-(a.bottom+i.height);let g=m>=0;const u=a.left-i.width;let v=u>=0;const P=window.innerWidth-(a.right+i.width);let S=P>=0;const k=!c&&!g&&!v&&!S;let C=f;if(f==="top"&&c?S=v=g=!1:f==="bottom"&&g?S=v=c=!1:f==="left"&&v?S=c=g=!1:f==="right"&&S&&(v=c=g=!1),f==="over"){const y=window.innerWidth/2-i.realWidth/2,x=window.innerHeight/2-i.realHeight/2;o.wrapper.style.left=`${y}px`,o.wrapper.style.right="auto",o.wrapper.style.top=`${x}px`,o.wrapper.style.bottom="auto"}else if(k){const y=window.innerWidth/2-(i==null?void 0:i.realWidth)/2,x=10;o.wrapper.style.left=`${y}px`,o.wrapper.style.right="auto",o.wrapper.style.bottom=`${x}px`,o.wrapper.style.top="auto"}else if(v){const y=Math.min(u,window.innerWidth-(i==null?void 0:i.realWidth)-h.width),x=Z(r,{elementDimensions:a,popoverDimensions:i,popoverPadding:w,popoverArrowDimensions:h});o.wrapper.style.left=`${y}px`,o.wrapper.style.top=`${x}px`,o.wrapper.style.bottom="auto",o.wrapper.style.right="auto",C="left"}else if(S){const y=Math.min(P,window.innerWidth-(i==null?void 0:i.realWidth)-h.width),x=Z(r,{elementDimensions:a,popoverDimensions:i,popoverPadding:w,popoverArrowDimensions:h});o.wrapper.style.right=`${y}px`,o.wrapper.style.top=`${x}px`,o.wrapper.style.bottom="auto",o.wrapper.style.left="auto",C="right"}else if(c){const y=Math.min(l,window.innerHeight-i.realHeight-h.width);let x=G(r,{elementDimensions:a,popoverDimensions:i,popoverPadding:w,popoverArrowDimensions:h});o.wrapper.style.top=`${y}px`,o.wrapper.style.left=`${x}px`,o.wrapper.style.bottom="auto",o.wrapper.style.right="auto",C="top"}else if(g){const y=Math.min(m,window.innerHeight-(i==null?void 0:i.realHeight)-h.width);let x=G(r,{elementDimensions:a,popoverDimensions:i,popoverPadding:w,popoverArrowDimensions:h});o.wrapper.style.left=`${x}px`,o.wrapper.style.bottom=`${y}px`,o.wrapper.style.top="auto",o.wrapper.style.right="auto",C="bottom"}k?o.arrow.classList.add("driver-popover-arrow-none"):ye(r,C,e)}function ye(e,t,o){const n=d("popover");if(!n)return;const p=o.getBoundingClientRect(),r=Q(),f=n.arrow,w=r.width,i=window.innerWidth,h=p.width,a=p.left,l=r.height,c=window.innerHeight,m=p.top,g=p.height;f.className="driver-popover-arrow";let u=t,v=e;t==="top"?(a+h<=0?(u="right",v="end"):a+h-w<=0&&(u="top",v="start"),a>=i?(u="left",v="end"):a+w>=i&&(u="top",v="end")):t==="bottom"?(a+h<=0?(u="right",v="start"):a+h-w<=0&&(u="bottom",v="start"),a>=i?(u="left",v="start"):a+w>=i&&(u="bottom",v="end")):t==="left"?(m+g<=0?(u="bottom",v="end"):m+g-l<=0&&(u="left",v="start"),m>=c?(u="top",v="end"):m+l>=c&&(u="left",v="end")):t==="right"&&(m+g<=0?(u="bottom",v="start"):m+g-l<=0&&(u="right",v="start"),m>=c?(u="top",v="start"):m+l>=c&&(u="right",v="end")),u?(f.classList.add(`driver-popover-arrow-side-${u}`),f.classList.add(`driver-popover-arrow-align-${v}`)):f.classList.add("driver-popover-arrow-none")}function xe(){const e=document.createElement("div");e.classList.add("driver-popover");const t=document.createElement("div");t.classList.add("driver-popover-arrow");const o=document.createElement("div");o.classList.add("driver-popover-title"),o.style.display="none",o.innerText="Popover Title";const n=document.createElement("div");n.classList.add("driver-popover-description"),n.style.display="none",n.innerText="Popover description is here";const p=document.createElement("button");p.classList.add("driver-popover-close-btn"),p.innerHTML="&times;";const r=document.createElement("div");r.classList.add("driver-popover-footer");const f=document.createElement("span");f.classList.add("driver-popover-progress-text"),f.innerText="";const w=document.createElement("span");w.classList.add("driver-popover-navigation-btns");const i=document.createElement("button");i.classList.add("driver-popover-prev-btn"),i.innerHTML="&larr; Previous";const h=document.createElement("button");return h.classList.add("driver-popover-next-btn"),h.innerHTML="Next &rarr;",w.appendChild(i),w.appendChild(h),r.appendChild(f),r.appendChild(w),e.appendChild(p),e.appendChild(t),e.appendChild(o),e.appendChild(n),e.appendChild(r),{wrapper:e,arrow:t,title:o,description:n,footer:r,previousButton:i,nextButton:h,closeButton:p,footerButtons:w,progress:f}}function Ce(){var t;const e=d("popover");e&&((t=e.wrapper.parentElement)==null||t.removeChild(e.wrapper))}const Se="";function be(e={}){z(e);function t(){s("allowClose")&&h()}function o(){const a=d("activeIndex"),l=s("steps")||[];if(typeof a>"u")return;const c=a+1;l[c]?i(c):h()}function n(){const a=d("activeIndex"),l=s("steps")||[];if(typeof a>"u")return;const c=a-1;l[c]?i(c):h()}function p(a){(s("steps")||[])[a]?i(a):h()}function r(){var v;if(d("__transitionCallback"))return;const l=d("activeIndex"),c=d("activeStep"),m=d("activeElement");if(typeof l>"u"||typeof c>"u"||typeof d("activeIndex")>"u")return;const u=((v=c.popover)==null?void 0:v.onPrevClick)||s("onPrevClick");if(u)return u(m,c,{config:s(),state:d()});n()}function f(){var u;if(d("__transitionCallback"))return;const l=d("activeIndex"),c=d("activeStep"),m=d("activeElement");if(typeof l>"u"||typeof c>"u")return;const g=((u=c.popover)==null?void 0:u.onNextClick)||s("onNextClick");if(g)return g(m,c,{config:s(),state:d()});o()}function w(){d("isInitialized")||(b("isInitialized",!0),document.body.classList.add("driver-active",s("animate")?"driver-fade":"driver-simple"),ge(),N("overlayClick",t),N("escapePress",t),N("arrowLeftPress",r),N("arrowRightPress",f))}function i(a=0){var B,A,M,R,U,ee,te,oe;const l=s("steps");if(!l){console.error("No steps to drive through"),h();return}if(!l[a]){h();return}b("activeIndex",a);const c=l[a],m=l[a+1],g=l[a-1],u=((B=c.popover)==null?void 0:B.doneBtnText)||s("doneBtnText")||"Done",v=s("allowClose"),P=typeof((A=c.popover)==null?void 0:A.showProgress)<"u"?(M=c.popover)==null?void 0:M.showProgress:s("showProgress"),k=(((R=c.popover)==null?void 0:R.progressText)||s("progressText")||"{{current}} of {{total}}").replace("{{current}}",`${a+1}`).replace("{{total}}",`${l.length}`),C=((U=c.popover)==null?void 0:U.showButtons)||s("showButtons"),y=["next","previous",...v?["close"]:[]].filter(Pe=>!(C!=null&&C.length)||C.includes(Pe)),x=((ee=c.popover)==null?void 0:ee.onNextClick)||s("onNextClick"),H=((te=c.popover)==null?void 0:te.onPrevClick)||s("onPrevClick"),E=((oe=c.popover)==null?void 0:oe.onCloseClick)||s("onCloseClick");X({...c,popover:{showButtons:y,nextBtnText:m?void 0:u,disableButtons:[...g?[]:["previous"]],showProgress:P,progressText:k,onNextClick:x||(()=>{m?i(a+1):h()}),onPrevClick:H||(()=>{i(a-1)}),onCloseClick:E||(()=>{h()}),...(c==null?void 0:c.popover)||{}}})}function h(a=!0){const l=d("activeElement"),c=d("activeStep"),m=s("onDestroyStarted");if(a&&m){const v=!l||(l==null?void 0:l.id)==="driver-dummy-element";m(v?void 0:l,c,{config:s(),state:d()});return}const g=(c==null?void 0:c.onDeselected)||s("onDeselected"),u=s("onDestroyed");if(document.body.classList.remove("driver-active","driver-fade","driver-simple"),we(),Ce(),fe(),pe(),se(),re(),l&&c){const v=l.id==="driver-dummy-element";g&&g(v?void 0:l,c,{config:s(),state:d()}),u&&u(v?void 0:l,c,{config:s(),state:d()})}}return{isActive:()=>d("isInitialized")||!1,refresh:$,drive:(a=0)=>{w(),i(a)},setConfig:z,getConfig:s,getState:d,getActiveIndex:()=>d("activeIndex"),getActiveStep:()=>d("activeStep"),getActiveElement:()=>d("activeElement"),getPreviousElement:()=>d("previousElement"),getPreviousStep:()=>d("previousStep"),moveNext:o,movePrevious:n,moveTo:p,hasNextStep:()=>{const a=s("steps")||[],l=d("activeIndex");return l!==void 0&&a[l+1]},hasPreviousStep:()=>{const a=s("steps")||[],l=d("activeIndex");return l!==void 0&&a[l-1]},highlight:a=>{w(),X({...a,popover:a.popover?{showButtons:[],showProgress:!1,progressText:"",...a.popover}:void 0})},destroy:()=>{h(!1)}}}return I.driver=be,Object.defineProperty(I,Symbol.toStringTag,{value:"Module"}),I}({});
\ No newline at end of file
diff --git a/static/build/js/pipelineDriver.js b/static/build/js/pipelineDriver.js
new file mode 100644
index 000000000..1c9f463ff
--- /dev/null
+++ b/static/build/js/pipelineDriver.js
@@ -0,0 +1,48 @@
+const driver = window.driver.js.driver;
+
+
+
+var steps = [
+    { popover: { title: 'Pipeline', description: 'Recruitment pipeline management' } },
+    { element: '#createNewRecruitment', popover: { title: 'New Recruitment', description: 'Add new recruitment' } },
+    { element: '#pipelineFilterDrop', popover: { title: 'Filter', description: 'Pipeline filter option' } },
+    { element: '#viewTypes', popover: { title: 'Toggle View', description: 'Toggle view type' } },
+    { element: '#pipelineSearchInput', popover: { title: 'Search', description: 'Search in candidate, recruitment and stage' } },
+    { element: '.filter-field', popover: { title: 'Filter Tag', description: 'Filter tag option' } },
+    { element: '#quickFilters', popover: { title: 'Quick Filters', description: 'Quick Filters' } },
+    { element: '.oh-tabs__tab.oh-tabs__tab--active', popover: { title: 'Recruitment', description: 'Recruitment' } },
+    { element: '.oh-tabs__content--active [data-target="#addStageModal"]', popover: { title: 'Add Stage', description: 'Add new stage to recruitment' } },
+    { element: '.oh-tabs__content--active .oh-tabs__movable', popover: { title: 'Stage', description: 'Recruitment stage' } },
+    { element: '.oh-tabs__content--active .oh-tabs__movable .oh-btn--secondary-outline', popover: { title: 'Add candidate', description: 'Add candidate to stage option' } },
+    { element: '.oh-tabs__content--active .oh-table-config__td', popover: { title: 'Candidate', description: 'Candidate record' } },
+    { element: '.oh-tabs__content--active .oh-table-config__td form', popover: { title: 'Rating', description: 'Candidate rating option' } },
+    { element: '.oh-tabs__content--active .oh-select.w-100.stage-change', popover: { title: 'Change Stage', description: 'Candidate change stage option' } },
+    { element: '.oh-tabs__content--active .oh-table-config__td .oh-btn-group', popover: { title: 'Options', description: 'Candidate management options' } },
+];
+
+
+driverObj = driver(
+
+    {
+        showProgress: false,
+        animate: true,
+        showButtons: ['next', 'previous', 'close'],
+        steps: steps,
+
+
+    }
+)
+
+
+
+function runDriver() {
+    // Start driving after checking all steps
+    driverObj.drive();
+    $.ajax({
+        type: "get",
+        url: "/driver-viewed?user=" + $(".logged-in[data-user-id]").attr("data-user-id") + "&viewed=pipeline",
+        success: function (response) {
+
+        }
+    });
+}
\ No newline at end of file
diff --git a/static/build/js/settingsDriver.js b/static/build/js/settingsDriver.js
new file mode 100644
index 000000000..532a45cec
--- /dev/null
+++ b/static/build/js/settingsDriver.js
@@ -0,0 +1,47 @@
+const driver = window.driver.js.driver;
+
+
+
+var steps = [
+    { popover: { title: 'Settings', description: 'All your company and base configurations' } },
+];
+
+if ($(".col-12.col-sm-12.col-md-12.col-lg-3").length) {
+    steps.push(
+        { element: '.col-12.col-sm-12.col-md-12.col-lg-3', popover: { title: 'Settings Options', description: 'Settings menu bar' } },
+    )
+
+}
+if ($(".col-12.col-sm-12.col-md-12.col-lg-9").length) {
+    steps.push(
+        { element: '.col-12.col-sm-12.col-md-12.col-lg-9', popover: { title: 'Settings View', description: 'Selected settings view' } },
+    )
+
+}
+
+
+driverObj = driver(
+
+    {
+        showProgress: false,
+        animate: true,
+        showButtons: ['next', 'previous', 'close'],
+        steps: steps,
+
+
+    }
+)
+
+
+
+function runDriver() {
+    // Start driving after checking all steps
+    driverObj.drive();
+    $.ajax({
+        type: "get",
+        url: "/driver-viewed?user=" + $(".logged-in[data-user-id]").attr("data-user-id") + "&viewed=settings",
+        success: function (response) {
+
+        }
+    });
+}
\ No newline at end of file
diff --git a/templates/dashboard.html b/templates/dashboard.html
index 729eabeba..02fb90d67 100755
--- a/templates/dashboard.html
+++ b/templates/dashboard.html
@@ -662,7 +662,9 @@
               <span class="oh-card-dashboard__title">{% trans "Announcements" %}</span>
               {% if perms.base.add_announcement %}
                 <span>
-                    <button style="display: inline-block;padding: 0px;
+                    <button
+                        id="addAnnouncement"
+                        style="display: inline-block;padding: 0px;
                         border-radius: 6px;
                         display: flex;
                         align-items: center;
@@ -730,7 +732,7 @@
 
 
 
-        <div class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent mb-3 mt-2">
+        <div id="quickActions" class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent mb-3 mt-2">
           <div class="oh-card-dashboard__title mt-4 mb-3">{% trans "Quick Actions" %}</div> <hr>  
 
           <div class="oh-card-dashboard__body">
@@ -1259,3 +1261,10 @@
       });
   });
 </script>
+<script src="{% static 'build/js/dashboardDriver.js' %}"></script>
+
+{% if "dashboard" not in request.user.driverviewed_set.first.user_viewed %}
+<script>
+  runDriver()
+</script>
+{% endif %}
\ No newline at end of file
diff --git a/templates/index.html b/templates/index.html
index 3b3e3cff3..791afe27c 100755
--- a/templates/index.html
+++ b/templates/index.html
@@ -17,6 +17,7 @@
   </script>
   <title class="time-runner stop-runner">Horilla</title>
   <link rel="apple-touch-icon" sizes="180x180" href="{% static 'favicons/apple-touch-icon.png' %}">
+  <link rel="stylesheet" href="{% static 'build/css/driver.min.css' %}"/>
   <meta name="theme-color" content="orangered">
   <link rel="manifest" href="{% static 'build/manifest.json' %}">
   <link rel="icon" type="image/png" sizes="32x32" href="{% static 'favicons/favicon-32x32.png' %}">
@@ -33,6 +34,7 @@
   <script src="{% static '/jquery/jqueryui.js' %}"></script>
   <script src="{% static '/base/toggleColumn.js' %}"></script>
   <script src="{% static '/build/js/orgChart.js' %}"></script>
+  <script src="{% static 'build/js/driver.js' %}"></script>
 
 
   <!-- Popper.JS -->
@@ -412,6 +414,7 @@
   </div> {% endcomment %}
 {% comment %} </div> {% endcomment %}
 <body hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'>
+  <span class="logged-in" data-user-id="{{request.user.id}}"></span>
     {% if messages %}
     <div class="oh-alert-container">
         {% for message in messages %}
@@ -436,10 +439,12 @@
     <div id="sidebar" >
      {% include 'sidebar.html' %}
     </div>
+    
 
     <div id="main">
       <!-- Navigation -->
       <!-- Confirm Modal -->
+      
       <div
       class="oh-modal"
       id="confirmModal"
@@ -560,13 +565,13 @@
             </div>
             {% if request.user|any_permission:'base' or perms.attendance.view_attendancevalidationcondition %}
               <div class="oh-navbar__action-icons" title="Settings">
-                <a href="/settings/general-settings" class="oh-navbar__action-icons-link">
+                <a href="/settings/general-settings" id="settingsMenu" class="oh-navbar__action-icons-link">
                   <ion-icon name="settings-outline"  class="oh-navbar__icon"></ion-icon>
                 </a>
               </div>
             {% endif %}
             {% include 'notification/notification.html' %}
-            <div class="oh-dropdown" x-data="{open: false}" @click="open = !open">
+            <div class="oh-dropdown" id="multiLanguage" x-data="{open: false}" @click="open = !open">
               <div class="oh-navbar__action-icons">
                   <a href="#" class="oh-navbar__action-icons-link"  title="Languages">
                       <ion-icon name="globe-outline" class="oh-navbar__icon"></ion-icon>
@@ -598,7 +603,7 @@
               </div>
             </div>
             {% if perms.base.view_company %}       
-              <div class="oh-dropdown" x-data="{open: false}" @click="open = !open" title="Companies">
+              <div id="multCompany" class="oh-dropdown" x-data="{open: false}" @click="open = !open" title="Companies">
                 <div class="oh-navbar__action-icons">
                     <a href="#" class="oh-navbar__action-icons-link">
                       <ion-icon name="business"></ion-icon>
@@ -633,7 +638,7 @@
                 </div>
               </div> 
             {% endif %}    
-            <div class="oh-dropdown" x-data="{open: false}">
+            <div class="oh-dropdown" x-data="{open: false}" id="mainNavProfile">
               <div class="oh-navbar__user-info" @click="open = !open" @click.outside="open = false">
                 <div class="oh-navbar__user-photo">
                   <img src="{{request.user.employee_get.get_avatar}}" class="oh-navbar__user-image" loading="lazy" />
@@ -790,6 +795,7 @@
   <script>
     setTimeout(()=>{$("[name='search']").focus()},100)
   </script>
+
 </body>
 
 </html>
diff --git a/templates/notification/notification.html b/templates/notification/notification.html
index e27daebd4..8907a64d8 100644
--- a/templates/notification/notification.html
+++ b/templates/notification/notification.html
@@ -6,6 +6,7 @@
 
 <div 
   class="oh-navbar__notifications"
+  id="notificationIcon"
   x-data="{open: false}" 
   hx-get="{% url 'notifications' %}"
   hx-target="#notificationContainer"
diff --git a/templates/settings.html b/templates/settings.html
index 76b2c0c34..96782f02a 100644
--- a/templates/settings.html
+++ b/templates/settings.html
@@ -57,7 +57,7 @@
 										<div class="col-sm-12 col-md-12 col-lg-12">
 											<div class="oh-input-group">
 												<a
-													id="currency"
+													id="generalSettings"
 													href="{% url 'general-settings' %}"
 													class="oh-inner-sidebar__link oh-dropdown__link"
 													>{% trans "General Settings" %}
@@ -414,5 +414,9 @@
         }
     });
 </script>
+<script src="{% static 'build/js/settingsDriver.js' %}"></script>
+<script>
+	runDriver()
+</script>
 
 {% endblock content %}