From e64c53512d4667831a8b81404f7b643db8450e4d Mon Sep 17 00:00:00 2001
From: Bartek PC-KADR <banaczyk@magico.pl>
Date: Tue, 19 Apr 2022 11:44:25 +0200
Subject: [PATCH] =?UTF-8?q?helpdesk.magico:=20Zmiany=20w=20okienku=20podgl?=
 =?UTF-8?q?=C4=85du=20numeru?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/.tmp/magico-helpdesk-dashboard.html       | 297 +++++++++++++++---
 src/magico-helpdesk-dashboard.html            | 295 ++++++++++++++---
 .../magico-menu-helpdesk.html                 |   2 +-
 3 files changed, 516 insertions(+), 78 deletions(-)
diff --git a/src/.tmp/magico-helpdesk-dashboard.html b/src/.tmp/magico-helpdesk-dashboard.html
index 50c2f37..e9b0413 100644
--- a/src/.tmp/magico-helpdesk-dashboard.html
+++ b/src/.tmp/magico-helpdesk-dashboard.html
@@ -17,6 +17,7 @@
   <!-- CSS Implementing Plugins -->
   <!-- bundlecss:vendor [.] -->
   <link rel="stylesheet" href="./node_modules/bootstrap-icons/font/bootstrap-icons.css">
+  <link rel="stylesheet" href="./node_modules/tom-select/dist/css/tom-select.bootstrap5.css">
 
   <!-- CSS Front Template -->
   <!-- bundlecss:theme [.] ?v=1.0 -->
@@ -124,7 +125,7 @@
             </script>
           </head>
 
-<body class="has-navbar-vertical-aside navbar-vertical-aside-show-xl footer-offset magico-h-100">
+<body class="has-navbar-vertical-aside navbar-vertical-aside-show-xl magico-h-100">
   
     <script src="./assets/js/hs.theme-appearance.js"></script>
   
@@ -191,7 +192,7 @@
                 <div class="nav-item">
                   <a class="nav-link " href="./api-keys.html" data-placement="left">
                     <i class="bi-building nav-icon"></i>
-                    <span class="nav-link-title">Działy firmy</span>
+                    <span class="nav-link-title">Grupy telefonów</span>
                   </a>
                 </div>
 
@@ -293,9 +294,32 @@
        <!-- Page Header -->
       <div class="page-header">
         <div class="row align-items-end">
-          <div class="col-sm mb-2 mb-sm-0 d-flex align-items-center">
-            <h1 class="page-header-title">Kokpit konsultanta</h1>
-            <span class="badge bg-soft-dark text-dark ms-2">Marketing</span> <!-- Dział firmy -->
+          <div class="col-sm mb-2 mb-sm-0 ">
+            <div class="d-flex align-items-center">
+              <h1 class="page-header-title">Kokpit konsultanta</h1>
+              <span class="badge bg-soft-dark text-dark ms-2">Marketing</span> <!-- Grupy telefonów -->
+            </div>
+
+              <div class="row align-items-center"> <!-- BOX dla Managera i właściciela, pozwala przełączyć się na kokpit konsultanta jednego z pracowników i podejrzeć jego prace --> 
+                  <div class="col-auto">
+                    <!-- Select -->
+                    <div class="tom-select-custom">
+                      <select class="js-select form-select form-select-sm form-select-borderless tom-select-form-select-ps-0" id="ownerLabel" autocomplete="on"
+                              data-hs-tom-select-options='{
+                                "searchInDropdown": true,
+                                "hideSearch": false,
+                                "dropdownWidth": "12rem"
+                              }'>
+                        <option value="owner1" selected data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle" src="./assets/img/160x160/img6.jpg" alt="Avatar" /><span class="flex-grow-1 ms-2">Mark Williams</span></span>'>Mark Williams</option>
+                        <option value="owner2" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle" src="./assets/img/160x160/img10.jpg" alt="Avatar" /><span class="flex-grow-1 ms-2">Amanda Harvey</span></span>'>Amanda Harvey</option>
+                        <option value="owner3" data-option-template='<span class="d-flex align-items-center"><i class="bi-person text-body"></i><span class="flex-grow-1 ms-2">Assign to owner</span></span>'>Assign to owner</option>
+                      </select>
+                     </div>
+                    <!-- End Select -->
+                  </div>
+                  <!-- End Col -->
+                </div>
+                <!-- End Row -->
           </div>
           <!-- End Col -->
 
@@ -349,7 +373,7 @@
             <div class="card-body magico-scroll overflow-auto">
               <ul class="list-unstyled list-py-3 mb-0 list-group-start-bordered">
                           <!-- Item -->
-                          <li class="">
+                          <li>
                             <a class="d-flex align-items-center list-group-item-action border-danger" href="#">
                               <div class="d-flex align-items-center me-2" >
                                 <div class="flex-grow-1 ms-3">
@@ -447,7 +471,7 @@
             <div class="card-body magico-scroll overflow-auto">
               <ul class="list-unstyled list-py-3 mb-0 list-group-start-bordered">
                           <!-- Item -->
-                          <li class="">
+                          <li>
                             <a class="d-flex align-items-center list-group-item-action border-danger" href="#">
                               <div class="d-flex align-items-center me-2" >
                                 <div class="flex-grow-1 ms-3">
@@ -548,7 +572,7 @@
             <div class="card-body magico-scroll overflow-auto">
               <ul class="list-unstyled list-py-3 mb-0 ">
                           <!-- Item -->
-                          <li class="">
+                          <li>
                             <a class="d-flex align-items-center " href="#">
                               <div class="fs-2 text-danger">
                                 <i class="bi bi-telephone-x"></i>
@@ -572,7 +596,7 @@
                           <!-- End Item -->
 
                           <!-- Item -->
-                          <li class="">
+                          <li>
                             <a class="d-flex align-items-center " href="#">
                               <div class="fs-2 text-primary">
                                 <i class="bi bi-telephone-outbound"></i>
@@ -596,7 +620,151 @@
                           <!-- End Item -->
 
                           <!-- Item -->
-                          <li class="">
+                          <li>
+                            <a class="d-flex align-items-center " href="#">
+                              <div class="fs-2 text-secondary">
+                                <i class="bi bi-telephone-inbound"></i>
+                              </div>
+                              <div class="d-flex align-items-center me-2">
+                                <div class="flex-grow-1 ms-3">
+                                  <h5 class="text-hover-primary mb-0">Jan Kowalski +48 457 854 451</h5>
+                                  <span class="fs-6 text-body">dziś 7:40</span>
+                                </div>
+                              </div>
+                              <div class="ms-auto">
+                                <span class="fs-6 text-body"></span>
+                              </div>
+                              <div class="ms-3">
+                                <div class="avatar avatar-sm avatar-soft-dark avatar-circle" data-bs-toggle="tooltip" data-bs-placement="top" title="" data-bs-original-title="Bartłomiej Banaczyk">
+                                  <span class="avatar-initials">BB</span>
+                                </div>
+                              </div>
+                            </a>
+                          </li>
+                          <!-- End Item -->
+
+                          <!-- Item -->
+                          <li>
+                            <a class="d-flex align-items-center " href="#">
+                              <div class="fs-2 text-secondary">
+                                <i class="bi bi-telephone-inbound"></i>
+                              </div>
+                              <div class="d-flex align-items-center me-2">
+                                <div class="flex-grow-1 ms-3">
+                                  <h5 class="text-hover-primary mb-0">Jan Kowalski +48 457 854 451</h5>
+                                  <span class="fs-6 text-body">dziś 7:40</span>
+                                </div>
+                              </div>
+                              <div class="ms-auto">
+                                <span class="fs-6 text-body"></span>
+                              </div>
+                              <div class="ms-3">
+                                <div class="avatar avatar-sm avatar-soft-dark avatar-circle" data-bs-toggle="tooltip" data-bs-placement="top" title="" data-bs-original-title="Bartłomiej Banaczyk">
+                                  <span class="avatar-initials">BB</span>
+                                </div>
+                              </div>
+                            </a>
+                          </li>
+                          <!-- End Item -->
+
+                          <!-- Item -->
+                          <li>
+                            <a class="d-flex align-items-center " href="#">
+                              <div class="fs-2 text-secondary">
+                                <i class="bi bi-telephone-inbound"></i>
+                              </div>
+                              <div class="d-flex align-items-center me-2">
+                                <div class="flex-grow-1 ms-3">
+                                  <h5 class="text-hover-primary mb-0">Jan Kowalski +48 457 854 451</h5>
+                                  <span class="fs-6 text-body">dziś 7:40</span>
+                                </div>
+                              </div>
+                              <div class="ms-auto">
+                                <span class="fs-6 text-body"></span>
+                              </div>
+                              <div class="ms-3">
+                                <div class="avatar avatar-sm avatar-soft-dark avatar-circle" data-bs-toggle="tooltip" data-bs-placement="top" title="" data-bs-original-title="Bartłomiej Banaczyk">
+                                  <span class="avatar-initials">BB</span>
+                                </div>
+                              </div>
+                            </a>
+                          </li>
+                          <!-- End Item -->
+
+                          <!-- Item -->
+                          <li>
+                            <a class="d-flex align-items-center " href="#">
+                              <div class="fs-2 text-secondary">
+                                <i class="bi bi-telephone-inbound"></i>
+                              </div>
+                              <div class="d-flex align-items-center me-2">
+                                <div class="flex-grow-1 ms-3">
+                                  <h5 class="text-hover-primary mb-0">Jan Kowalski +48 457 854 451</h5>
+                                  <span class="fs-6 text-body">dziś 7:40</span>
+                                </div>
+                              </div>
+                              <div class="ms-auto">
+                                <span class="fs-6 text-body"></span>
+                              </div>
+                              <div class="ms-3">
+                                <div class="avatar avatar-sm avatar-soft-dark avatar-circle" data-bs-toggle="tooltip" data-bs-placement="top" title="" data-bs-original-title="Bartłomiej Banaczyk">
+                                  <span class="avatar-initials">BB</span>
+                                </div>
+                              </div>
+                            </a>
+                          </li>
+                          <!-- End Item -->
+
+                          <!-- Item -->
+                          <li>
+                            <a class="d-flex align-items-center " href="#">
+                              <div class="fs-2 text-secondary">
+                                <i class="bi bi-telephone-inbound"></i>
+                              </div>
+                              <div class="d-flex align-items-center me-2">
+                                <div class="flex-grow-1 ms-3">
+                                  <h5 class="text-hover-primary mb-0">Jan Kowalski +48 457 854 451</h5>
+                                  <span class="fs-6 text-body">dziś 7:40</span>
+                                </div>
+                              </div>
+                              <div class="ms-auto">
+                                <span class="fs-6 text-body"></span>
+                              </div>
+                              <div class="ms-3">
+                                <div class="avatar avatar-sm avatar-soft-dark avatar-circle" data-bs-toggle="tooltip" data-bs-placement="top" title="" data-bs-original-title="Bartłomiej Banaczyk">
+                                  <span class="avatar-initials">BB</span>
+                                </div>
+                              </div>
+                            </a>
+                          </li>
+                          <!-- End Item -->
+
+                          <!-- Item -->
+                          <li>
+                            <a class="d-flex align-items-center " href="#">
+                              <div class="fs-2 text-secondary">
+                                <i class="bi bi-telephone-inbound"></i>
+                              </div>
+                              <div class="d-flex align-items-center me-2">
+                                <div class="flex-grow-1 ms-3">
+                                  <h5 class="text-hover-primary mb-0">Jan Kowalski +48 457 854 451</h5>
+                                  <span class="fs-6 text-body">dziś 7:40</span>
+                                </div>
+                              </div>
+                              <div class="ms-auto">
+                                <span class="fs-6 text-body"></span>
+                              </div>
+                              <div class="ms-3">
+                                <div class="avatar avatar-sm avatar-soft-dark avatar-circle" data-bs-toggle="tooltip" data-bs-placement="top" title="" data-bs-original-title="Bartłomiej Banaczyk">
+                                  <span class="avatar-initials">BB</span>
+                                </div>
+                              </div>
+                            </a>
+                          </li>
+                          <!-- End Item -->
+
+                          <!-- Item -->
+                          <li>
                             <a class="d-flex align-items-center " href="#">
                               <div class="fs-2 text-secondary">
                                 <i class="bi bi-telephone-inbound"></i>
@@ -1684,13 +1852,44 @@
       <!-- Body -->
       <div class="modal-body">
 
+        <div class="row mb-5">
+          <div class="col-12 col-md-6">
+            <button type="button" class="btn btn-primary">Zadzwoń</button>
+          </div>
+          <div class="col-12 col-md-6 text-end">
+            <button type="button" class="btn btn-soft-primary" data-bs-toggle="tooltip" data-bs-placement="top" title="" data-bs-original-title="Skomentuj">
+                <i class="bi bi-chat-left-text"></i>
+              </button>
+
+              <button type="button" class="btn btn-soft-primary" data-bs-toggle="tooltip" data-bs-placement="top" title="" data-bs-original-title="Zaplanuj połączenie">
+                <i class="bi bi-clock"></i>
+              </button>
+
+              <button type="button" class="btn btn-soft-primary" data-bs-toggle="tooltip" data-bs-placement="top" title="" data-bs-original-title="Wyślij SMS">
+                <i class="bi bi-send"></i>
+              </button>
+
+              <div class="btn-group" role="group">
+                <button type="button" class="btn btn-primary" data-bs-toggle="dropdown" data-bs-target="uploadGroupDropdown">
+                  <i class="bi-telephone-fill me-1"></i> W KOLEJCE
+                </button>
+
+                <div class="btn-group">
+                  <button type="button" class="btn btn-primary dropdown-toggle" id="uploadGroupDropdown" data-bs-toggle="dropdown" aria-expanded="false"></button>
+
+                  <div class="dropdown-menu dropdown-menu-end" aria-labelledby="uploadGroupDropdown" style="">
+                    <a class="dropdown-item text-success" href="#">
+                      <h2><span class="badge bg-success d-block">GOTOWE</span></h2>
+                    </a>
+                    
+                  </div>
+                </div>
+              </div>
+          </div>
+        </div>
+
         <div class="row">
           <div class="col-12 col-md-8">
-            <div class="mb-5">
-              <button type="button" class="btn btn-primary">Zadzwoń</button>
-              <button type="button" class="btn btn-light">Wyślij SMS</button>
-            </div>
-
             <div class="magico-scroll" style="overflow-y: auto; overflow-x: hidden; height: 35rem;">
             
             <!-- Step -->
@@ -1789,7 +1988,9 @@
             <!-- Step Item -->
             <li class="step-item">
               <div class="step-content-wrapper">
-                <span class="step-icon step-icon-soft-info">D</span>
+                <span class="step-icon step-icon-soft-info">
+                  <i class="bi bi-chat-left-text"></i>
+                </span>
 
                 <div class="step-content">
                   <div class="d-flex justify-content-between">
@@ -1802,6 +2003,26 @@
               </div>
             </li>
             <!-- End Step Item -->
+
+
+            <!-- Step Item -->
+            <li class="step-item">
+              <div class="step-content-wrapper">
+                <span class="step-icon step-icon-soft-info">
+                  <i class="bi bi-send"></i>
+                </span>
+
+                <div class="step-content">
+                  <div class="d-flex justify-content-between">
+                    <h5 class="mb-1">Wysłano SMS</h5>
+                    <p class="fs-5 mb-1 pe-3">wczoraj 17:30</p>
+                  </div>
+
+                  <p class="fs-5 mb-1">Lorem ipsum, dolor, sit amet consectetur adipisicing elit. Maxime, accusantium praesentium obcaecati sed pariatur ipsa aperiam cupiditate labore non tempora rem ut aspernatur reprehenderit corrupti veritatis rerum, odio quo excepturi.</p>
+                </div>
+              </div>
+            </li>
+            <!-- End Step Item -->
             
           </ul>
           <!-- End Step -->
@@ -1819,29 +2040,6 @@
           </div>
           <div class="col-12 col-md-4">
 
-            <div class="text-end mb-4">
-              <button type="button" class="btn btn-soft-primary" data-bs-toggle="tooltip" data-bs-placement="top" title="" data-bs-original-title="Zaplanuj połączenie">
-                <i class="bi bi-clock"></i>
-              </button>
-
-              <div class="btn-group" role="group">
-                <button type="button" class="btn btn-primary" data-bs-toggle="dropdown" data-bs-target="uploadGroupDropdown">
-                  <i class="bi-telephone-fill me-1"></i> W KOLEJCE
-                </button>
-
-                <div class="btn-group">
-                  <button type="button" class="btn btn-primary dropdown-toggle" id="uploadGroupDropdown" data-bs-toggle="dropdown" aria-expanded="false"></button>
-
-                  <div class="dropdown-menu dropdown-menu-end" aria-labelledby="uploadGroupDropdown" style="">
-                    <a class="dropdown-item text-success" href="#">
-                      <h2><span class="badge bg-success d-block">GOTOWE</span></h2>
-                    </a>
-                    
-                  </div>
-                </div>
-              </div>
-            </div>
-
 
             <!-- Pokazujemy po kliknięciu na ikonę planowania terminu rozmowy
             dla pola daty robimy ładnego datepickera | czas ograniczamy do godzin i minut, z interwałem co 15 minut -->
@@ -1903,15 +2101,22 @@
   <!-- bundlejs:vendor [.] -->
   <script src="./assets/vendor/hs-navbar-vertical-aside/dist/hs-navbar-vertical-aside.min.js"></script>
   <script src="./assets/vendor/hs-form-search/dist/hs-form-search.min.js"></script>
+  <script src="./assets/vendor/hs-nav-scroller/dist/hs-nav-scroller.min.js"></script>
+  <script src="./node_modules/tom-select/dist/js/tom-select.complete.min.js"></script>
+  <script src="./node_modules/flatpickr/dist/flatpickr.min.js"></script>
+  <script src="./node_modules/daterangepicker/moment.min.js"></script>
+  <script src="./node_modules/daterangepicker/daterangepicker.js"></script>
 
   <!-- JS Front -->
   <!-- bundlejs:theme [.] -->
   <script src="./assets/js/hs.core.js"></script>
   <script src="./assets/js/hs.bs-dropdown.js"></script>
+  <script src="./assets/js/hs.tom-select.js"></script>
 
   <!-- JS Plugins Init. -->
   <script>
     (function() {
+      window.onload = function () {
       // INITIALIZATION OF NAVBAR VERTICAL ASIDE
       // =======================================================
       new HSSideNav('.js-navbar-vertical-aside').init()
@@ -1925,6 +2130,20 @@
       // INITIALIZATION OF FORM SEARCH
       // =======================================================
       new HSFormSearch('.js-form-search')
+
+
+      // INITIALIZATION OF NAV SCROLLER
+        // =======================================================
+        new HsNavScroller('.js-nav-scroller')
+
+
+        // INITIALIZATION OF SELECT
+        // =======================================================
+        HSCore.components.HSTomSelect.init('.js-select')
+
+
+
+      }
     })()
   </script>
 
diff --git a/src/magico-helpdesk-dashboard.html b/src/magico-helpdesk-dashboard.html
index c6bd12b..1b54891 100644
--- a/src/magico-helpdesk-dashboard.html
+++ b/src/magico-helpdesk-dashboard.html
@@ -17,6 +17,7 @@
   <!-- CSS Implementing Plugins -->
   <!-- bundlecss:vendor [@@autopath] -->
   <link rel="stylesheet" href="@@autopath/node_modules/bootstrap-icons/font/bootstrap-icons.css">
+  <link rel="stylesheet" href="@@autopath/node_modules/tom-select/dist/css/tom-select.bootstrap5.css">
 
   <!-- CSS Front Template -->
   <!-- bundlecss:theme [@@autopath] @@vars.version -->
@@ -42,7 +43,7 @@
   <script src="https://company.magico.pro/assets/public/js/magico-toolbar.min.js?v=1" defer></script>
 </head>
 
-<body class="has-navbar-vertical-aside navbar-vertical-aside-show-xl footer-offset magico-h-100">
+<body class="has-navbar-vertical-aside navbar-vertical-aside-show-xl magico-h-100">
   @@if(layoutBuilder.extend.switcherSupport === true) {
     <script src="@@autopath/assets/js/hs.theme-appearance.js"></script>
   }
@@ -86,9 +87,32 @@
        <!-- Page Header -->
       <div class="page-header">
         <div class="row align-items-end">
-          <div class="col-sm mb-2 mb-sm-0 d-flex align-items-center">
-            <h1 class="page-header-title">Kokpit konsultanta</h1>
-            <span class="badge bg-soft-dark text-dark ms-2">Marketing</span> <!-- Dział firmy -->
+          <div class="col-sm mb-2 mb-sm-0 ">
+            <div class="d-flex align-items-center">
+              <h1 class="page-header-title">Kokpit konsultanta</h1>
+              <span class="badge bg-soft-dark text-dark ms-2">Marketing</span> <!-- Grupy telefonów -->
+            </div>
+
+              <div class="row align-items-center"> <!-- BOX dla Managera i właściciela, pozwala przełączyć się na kokpit konsultanta jednego z pracowników i podejrzeć jego prace --> 
+                  <div class="col-auto">
+                    <!-- Select -->
+                    <div class="tom-select-custom">
+                      <select class="js-select form-select form-select-sm form-select-borderless tom-select-form-select-ps-0" id="ownerLabel" autocomplete="on"
+                              data-hs-tom-select-options='{
+                                "searchInDropdown": true,
+                                "hideSearch": false,
+                                "dropdownWidth": "12rem"
+                              }'>
+                        <option value="owner1" selected data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle" src="@@autopath/assets/img/160x160/img6.jpg" alt="Avatar" /><span class="flex-grow-1 ms-2">Mark Williams</span></span>'>Mark Williams</option>
+                        <option value="owner2" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle" src="@@autopath/assets/img/160x160/img10.jpg" alt="Avatar" /><span class="flex-grow-1 ms-2">Amanda Harvey</span></span>'>Amanda Harvey</option>
+                        <option value="owner3" data-option-template='<span class="d-flex align-items-center"><i class="bi-person text-body"></i><span class="flex-grow-1 ms-2">Assign to owner</span></span>'>Assign to owner</option>
+                      </select>
+                     </div>
+                    <!-- End Select -->
+                  </div>
+                  <!-- End Col -->
+                </div>
+                <!-- End Row -->
           </div>
           <!-- End Col -->
 
@@ -142,7 +166,7 @@
             <div class="card-body magico-scroll overflow-auto">
               <ul class="list-unstyled list-py-3 mb-0 list-group-start-bordered">
                           <!-- Item -->
-                          <li class="">
+                          <li>
                             <a class="d-flex align-items-center list-group-item-action border-danger" href="#">
                               <div class="d-flex align-items-center me-2" >
                                 <div class="flex-grow-1 ms-3">
@@ -240,7 +264,7 @@
             <div class="card-body magico-scroll overflow-auto">
               <ul class="list-unstyled list-py-3 mb-0 list-group-start-bordered">
                           <!-- Item -->
-                          <li class="">
+                          <li>
                             <a class="d-flex align-items-center list-group-item-action border-danger" href="#">
                               <div class="d-flex align-items-center me-2" >
                                 <div class="flex-grow-1 ms-3">
@@ -341,7 +365,7 @@
             <div class="card-body magico-scroll overflow-auto">
               <ul class="list-unstyled list-py-3 mb-0 ">
                           <!-- Item -->
-                          <li class="">
+                          <li>
                             <a class="d-flex align-items-center " href="#">
                               <div class="fs-2 text-danger">
                                 <i class="bi bi-telephone-x"></i>
@@ -365,7 +389,7 @@
                           <!-- End Item -->
 
                           <!-- Item -->
-                          <li class="">
+                          <li>
                             <a class="d-flex align-items-center " href="#">
                               <div class="fs-2 text-primary">
                                 <i class="bi bi-telephone-outbound"></i>
@@ -389,7 +413,151 @@
                           <!-- End Item -->
 
                           <!-- Item -->
-                          <li class="">
+                          <li>
+                            <a class="d-flex align-items-center " href="#">
+                              <div class="fs-2 text-secondary">
+                                <i class="bi bi-telephone-inbound"></i>
+                              </div>
+                              <div class="d-flex align-items-center me-2">
+                                <div class="flex-grow-1 ms-3">
+                                  <h5 class="text-hover-primary mb-0">Jan Kowalski +48 457 854 451</h5>
+                                  <span class="fs-6 text-body">dziś 7:40</span>
+                                </div>
+                              </div>
+                              <div class="ms-auto">
+                                <span class="fs-6 text-body"></span>
+                              </div>
+                              <div class="ms-3">
+                                <div class="avatar avatar-sm avatar-soft-dark avatar-circle" data-bs-toggle="tooltip" data-bs-placement="top" title="" data-bs-original-title="Bartłomiej Banaczyk">
+                                  <span class="avatar-initials">BB</span>
+                                </div>
+                              </div>
+                            </a>
+                          </li>
+                          <!-- End Item -->
+
+                          <!-- Item -->
+                          <li>
+                            <a class="d-flex align-items-center " href="#">
+                              <div class="fs-2 text-secondary">
+                                <i class="bi bi-telephone-inbound"></i>
+                              </div>
+                              <div class="d-flex align-items-center me-2">
+                                <div class="flex-grow-1 ms-3">
+                                  <h5 class="text-hover-primary mb-0">Jan Kowalski +48 457 854 451</h5>
+                                  <span class="fs-6 text-body">dziś 7:40</span>
+                                </div>
+                              </div>
+                              <div class="ms-auto">
+                                <span class="fs-6 text-body"></span>
+                              </div>
+                              <div class="ms-3">
+                                <div class="avatar avatar-sm avatar-soft-dark avatar-circle" data-bs-toggle="tooltip" data-bs-placement="top" title="" data-bs-original-title="Bartłomiej Banaczyk">
+                                  <span class="avatar-initials">BB</span>
+                                </div>
+                              </div>
+                            </a>
+                          </li>
+                          <!-- End Item -->
+
+                          <!-- Item -->
+                          <li>
+                            <a class="d-flex align-items-center " href="#">
+                              <div class="fs-2 text-secondary">
+                                <i class="bi bi-telephone-inbound"></i>
+                              </div>
+                              <div class="d-flex align-items-center me-2">
+                                <div class="flex-grow-1 ms-3">
+                                  <h5 class="text-hover-primary mb-0">Jan Kowalski +48 457 854 451</h5>
+                                  <span class="fs-6 text-body">dziś 7:40</span>
+                                </div>
+                              </div>
+                              <div class="ms-auto">
+                                <span class="fs-6 text-body"></span>
+                              </div>
+                              <div class="ms-3">
+                                <div class="avatar avatar-sm avatar-soft-dark avatar-circle" data-bs-toggle="tooltip" data-bs-placement="top" title="" data-bs-original-title="Bartłomiej Banaczyk">
+                                  <span class="avatar-initials">BB</span>
+                                </div>
+                              </div>
+                            </a>
+                          </li>
+                          <!-- End Item -->
+
+                          <!-- Item -->
+                          <li>
+                            <a class="d-flex align-items-center " href="#">
+                              <div class="fs-2 text-secondary">
+                                <i class="bi bi-telephone-inbound"></i>
+                              </div>
+                              <div class="d-flex align-items-center me-2">
+                                <div class="flex-grow-1 ms-3">
+                                  <h5 class="text-hover-primary mb-0">Jan Kowalski +48 457 854 451</h5>
+                                  <span class="fs-6 text-body">dziś 7:40</span>
+                                </div>
+                              </div>
+                              <div class="ms-auto">
+                                <span class="fs-6 text-body"></span>
+                              </div>
+                              <div class="ms-3">
+                                <div class="avatar avatar-sm avatar-soft-dark avatar-circle" data-bs-toggle="tooltip" data-bs-placement="top" title="" data-bs-original-title="Bartłomiej Banaczyk">
+                                  <span class="avatar-initials">BB</span>
+                                </div>
+                              </div>
+                            </a>
+                          </li>
+                          <!-- End Item -->
+
+                          <!-- Item -->
+                          <li>
+                            <a class="d-flex align-items-center " href="#">
+                              <div class="fs-2 text-secondary">
+                                <i class="bi bi-telephone-inbound"></i>
+                              </div>
+                              <div class="d-flex align-items-center me-2">
+                                <div class="flex-grow-1 ms-3">
+                                  <h5 class="text-hover-primary mb-0">Jan Kowalski +48 457 854 451</h5>
+                                  <span class="fs-6 text-body">dziś 7:40</span>
+                                </div>
+                              </div>
+                              <div class="ms-auto">
+                                <span class="fs-6 text-body"></span>
+                              </div>
+                              <div class="ms-3">
+                                <div class="avatar avatar-sm avatar-soft-dark avatar-circle" data-bs-toggle="tooltip" data-bs-placement="top" title="" data-bs-original-title="Bartłomiej Banaczyk">
+                                  <span class="avatar-initials">BB</span>
+                                </div>
+                              </div>
+                            </a>
+                          </li>
+                          <!-- End Item -->
+
+                          <!-- Item -->
+                          <li>
+                            <a class="d-flex align-items-center " href="#">
+                              <div class="fs-2 text-secondary">
+                                <i class="bi bi-telephone-inbound"></i>
+                              </div>
+                              <div class="d-flex align-items-center me-2">
+                                <div class="flex-grow-1 ms-3">
+                                  <h5 class="text-hover-primary mb-0">Jan Kowalski +48 457 854 451</h5>
+                                  <span class="fs-6 text-body">dziś 7:40</span>
+                                </div>
+                              </div>
+                              <div class="ms-auto">
+                                <span class="fs-6 text-body"></span>
+                              </div>
+                              <div class="ms-3">
+                                <div class="avatar avatar-sm avatar-soft-dark avatar-circle" data-bs-toggle="tooltip" data-bs-placement="top" title="" data-bs-original-title="Bartłomiej Banaczyk">
+                                  <span class="avatar-initials">BB</span>
+                                </div>
+                              </div>
+                            </a>
+                          </li>
+                          <!-- End Item -->
+
+                          <!-- Item -->
+                          <li>
                             <a class="d-flex align-items-center " href="#">
                               <div class="fs-2 text-secondary">
                                 <i class="bi bi-telephone-inbound"></i>
@@ -507,13 +675,44 @@
       <!-- Body -->
       <div class="modal-body">
 
+        <div class="row mb-5">
+          <div class="col-12 col-md-6">
+            <button type="button" class="btn btn-primary">Zadzwoń</button>
+          </div>
+          <div class="col-12 col-md-6 text-end">
+            <button type="button" class="btn btn-soft-primary" data-bs-toggle="tooltip" data-bs-placement="top" title="" data-bs-original-title="Skomentuj">
+                <i class="bi bi-chat-left-text"></i>
+              </button>
+
+              <button type="button" class="btn btn-soft-primary" data-bs-toggle="tooltip" data-bs-placement="top" title="" data-bs-original-title="Zaplanuj połączenie">
+                <i class="bi bi-clock"></i>
+              </button>
+
+              <button type="button" class="btn btn-soft-primary" data-bs-toggle="tooltip" data-bs-placement="top" title="" data-bs-original-title="Wyślij SMS">
+                <i class="bi bi-send"></i>
+              </button>
+
+              <div class="btn-group" role="group">
+                <button type="button" class="btn btn-primary" data-bs-toggle="dropdown" data-bs-target="uploadGroupDropdown">
+                  <i class="bi-telephone-fill me-1"></i> W KOLEJCE
+                </button>
+
+                <div class="btn-group">
+                  <button type="button" class="btn btn-primary dropdown-toggle" id="uploadGroupDropdown" data-bs-toggle="dropdown" aria-expanded="false"></button>
+
+                  <div class="dropdown-menu dropdown-menu-end" aria-labelledby="uploadGroupDropdown" style="">
+                    <a class="dropdown-item text-success" href="#">
+                      <h2><span class="badge bg-success d-block">GOTOWE</span></h2>
+                    </a>
+                    
+                  </div>
+                </div>
+              </div>
+          </div>
+        </div>
+
         <div class="row">
           <div class="col-12 col-md-8">
-            <div class="mb-5">
-              <button type="button" class="btn btn-primary">Zadzwoń</button>
-              <button type="button" class="btn btn-light">Wyślij SMS</button>
-            </div>
-
             <div class="magico-scroll" style="overflow-y: auto; overflow-x: hidden; height: 35rem;">
             
             <!-- Step -->
@@ -612,7 +811,9 @@
             <!-- Step Item -->
             <li class="step-item">
               <div class="step-content-wrapper">
-                <span class="step-icon step-icon-soft-info">D</span>
+                <span class="step-icon step-icon-soft-info">
+                  <i class="bi bi-chat-left-text"></i>
+                </span>
 
                 <div class="step-content">
                   <div class="d-flex justify-content-between">
@@ -625,6 +826,26 @@
               </div>
             </li>
             <!-- End Step Item -->
+
+
+            <!-- Step Item -->
+            <li class="step-item">
+              <div class="step-content-wrapper">
+                <span class="step-icon step-icon-soft-info">
+                  <i class="bi bi-send"></i>
+                </span>
+
+                <div class="step-content">
+                  <div class="d-flex justify-content-between">
+                    <h5 class="mb-1">Wysłano SMS</h5>
+                    <p class="fs-5 mb-1 pe-3">wczoraj 17:30</p>
+                  </div>
+
+                  <p class="fs-5 mb-1">Lorem ipsum, dolor, sit amet consectetur adipisicing elit. Maxime, accusantium praesentium obcaecati sed pariatur ipsa aperiam cupiditate labore non tempora rem ut aspernatur reprehenderit corrupti veritatis rerum, odio quo excepturi.</p>
+                </div>
+              </div>
+            </li>
+            <!-- End Step Item -->
             
           </ul>
           <!-- End Step -->
@@ -642,29 +863,6 @@
           </div>
           <div class="col-12 col-md-4">
 
-            <div class="text-end mb-4">
-              <button type="button" class="btn btn-soft-primary" data-bs-toggle="tooltip" data-bs-placement="top" title="" data-bs-original-title="Zaplanuj połączenie">
-                <i class="bi bi-clock"></i>
-              </button>
-
-              <div class="btn-group" role="group">
-                <button type="button" class="btn btn-primary" data-bs-toggle="dropdown" data-bs-target="uploadGroupDropdown">
-                  <i class="bi-telephone-fill me-1"></i> W KOLEJCE
-                </button>
-
-                <div class="btn-group">
-                  <button type="button" class="btn btn-primary dropdown-toggle" id="uploadGroupDropdown" data-bs-toggle="dropdown" aria-expanded="false"></button>
-
-                  <div class="dropdown-menu dropdown-menu-end" aria-labelledby="uploadGroupDropdown" style="">
-                    <a class="dropdown-item text-success" href="#">
-                      <h2><span class="badge bg-success d-block">GOTOWE</span></h2>
-                    </a>
-                    
-                  </div>
-                </div>
-              </div>
-            </div>
-
 
             <!-- Pokazujemy po kliknięciu na ikonę planowania terminu rozmowy
             dla pola daty robimy ładnego datepickera | czas ograniczamy do godzin i minut, z interwałem co 15 minut -->
@@ -726,15 +924,22 @@
   <!-- bundlejs:vendor [@@autopath] -->
   <script src="@@autopath/assets/vendor/hs-navbar-vertical-aside/dist/hs-navbar-vertical-aside.min.js"></script>
   <script src="@@autopath/assets/vendor/hs-form-search/dist/hs-form-search.min.js"></script>
+  <script src="@@autopath/assets/vendor/hs-nav-scroller/dist/hs-nav-scroller.min.js"></script>
+  <script src="@@autopath/node_modules/tom-select/dist/js/tom-select.complete.min.js"></script>
+  <script src="@@autopath/node_modules/flatpickr/dist/flatpickr.min.js"></script>
+  <script src="@@autopath/node_modules/daterangepicker/moment.min.js"></script>
+  <script src="@@autopath/node_modules/daterangepicker/daterangepicker.js"></script>
 
   <!-- JS Front -->
   <!-- bundlejs:theme [@@autopath] -->
   <script src="@@autopath/assets/js/hs.core.js"></script>
   <script src="@@autopath/assets/js/hs.bs-dropdown.js"></script>
+  <script src="@@autopath/assets/js/hs.tom-select.js"></script>
 
   <!-- JS Plugins Init. -->
   <script>
     (function() {
+      window.onload = function () {
       // INITIALIZATION OF NAVBAR VERTICAL ASIDE
       // =======================================================
       new HSSideNav('.js-navbar-vertical-aside').init()
@@ -748,6 +953,20 @@
       // INITIALIZATION OF FORM SEARCH
       // =======================================================
       new HSFormSearch('.js-form-search')
+
+
+      // INITIALIZATION OF NAV SCROLLER
+        // =======================================================
+        new HsNavScroller('.js-nav-scroller')
+
+
+        // INITIALIZATION OF SELECT
+        // =======================================================
+        HSCore.components.HSTomSelect.init('.js-select')
+
+
+
+      }
     })()
   </script>
 
diff --git a/src/partials/layouts-components/magico-menu-helpdesk.html b/src/partials/layouts-components/magico-menu-helpdesk.html
index 326c5aa..a48e4da 100644
--- a/src/partials/layouts-components/magico-menu-helpdesk.html
+++ b/src/partials/layouts-components/magico-menu-helpdesk.html
@@ -19,7 +19,7 @@
     <div class="nav-item">
       <a class="nav-link @@if(link=='api-keys.html'){active}" href="@@autopath/api-keys.html" data-placement="left">
         <i class="bi-building nav-icon"></i>
-        <span class="nav-link-title">Działy firmy</span>
+        <span class="nav-link-title">Grupy telefonów</span>
       </a>
     </div>
 
