From be3db525786285905c4123d489e7b11fd59eb4d6 Mon Sep 17 00:00:00 2001
From: Focuslinkstech <45756999+Focuslinkstech@users.noreply.github.com>
Date: Wed, 21 Aug 2024 22:09:10 +0100
Subject: [PATCH 1/3] Lets start the journey of our new template from here,
 lots need to be done

---
 ui/ui/sections/header.tpl | 117 ++++++++++++++-
 ui/ui/user-ui/header.tpl  | 298 ++++++++++++++++++++++++++++++++++++--
 2 files changed, 403 insertions(+), 12 deletions(-)

diff --git a/ui/ui/sections/header.tpl b/ui/ui/sections/header.tpl
index a75b6de3..565d498d 100644
--- a/ui/ui/sections/header.tpl
+++ b/ui/ui/sections/header.tpl
@@ -18,7 +18,118 @@
     <link rel="stylesheet" href="ui/ui/styles/plugins/pace.css" />
     <link rel="stylesheet" href="ui/ui/summernote/summernote.min.css" />
     <script src="ui/ui/scripts/sweetalert2.all.min.js"></script>
-    <style>
+     <style>
+        /* New Customize Interface Start Here */
+        body {
+            position: relative;
+            z-index: 1;
+            background-color: rgb(241 245 249);
+            font-family: Satoshi, sans-serif;
+            font-size: 1rem;
+            line-height: 1.5rem;
+            font-weight: 400;
+            color: rgb(100 116 139);
+        }
+
+        .modern-skin-dark .main-header .logo {
+            background-color: rgb(28 36 52);
+            color: #fff;
+        }
+
+        .modern-skin-dark .main-header .navbar {
+            background: rgb(28 36 52);
+        }
+
+        .modern-skin-dark .main-sidebar .sidebar {
+            background-color: rgb(28 36 52);
+            bottom: 0;
+        }
+
+        .modern-skin-dark .main-sidebar {
+            background-color: rgb(28 36 52);
+            box-shadow: 0 0 5px rgba(0, 0, 0, .3);
+        }
+
+        .modern-skin-dark .main-header .navbar>a:focus,
+        .modern-skin-dark .main-header .navbar>a:active,
+        .modern-skin-dark .main-header .navbar>a:visited,
+        .modern-skin-dark .main-header .navbar>a:hover {
+            background-color: rgb(28 36 52);
+        }
+
+        .sidebar-menu li>a {
+            position: relative;
+            background-color: rgb(28 36 52);
+        }
+        
+        .sidebar-menu li:focus,
+        .sidebar-menu li :hover {
+            color: #10d435;
+
+        }
+        
+        .modern-skin-dark .main-sidebar .sidebar .sidebar-menu li.active a {
+            background-color: #2e298e;
+            border-radius: 5px;
+            margin: 10px;
+
+        }
+
+        .modern-skin-dark .main-sidebar .sidebar .sidebar-menu {
+            background-color: rgb(28 36 52);
+        }
+
+        .modern-skin-dark .main-sidebar .sidebar .sidebar-menu li .treeview-menu li.active a {
+            background-color: transparent !important;
+            color: rgb(84, 131, 227);
+        }
+
+        .modern-skin-dark .main-sidebar .sidebar .sidebar-menu li .treeview-menu li>a {
+            background-color: transparent !important;
+            padding: 10px 5px 5px 15px;
+        }
+
+        .modern-skin-dark .main-sidebar .sidebar .sidebar-menu li .treeview-menu {
+            padding-left: 0;
+            border-left: 3px solid #10d435;
+        }
+
+        .content-header {
+            list-style-type: none;
+            padding: 15px;
+            background-color: #f6f9fc;
+
+        }
+
+        @media (max-width: 767px) {
+            .content {
+                padding: 0 15px !important;
+                background-color: #f6f9fc;
+            }
+        }
+
+        .content {
+            padding: 25px !important;
+            background-color: #f6f9fc;
+
+        }
+
+        .content-wrapper,
+        .right-side {
+            min-height: 100%;
+            background-color: #f6f9fc;
+            z-index: 800;
+        }
+
+        .main-footer {
+            background: rgb(28 36 52);
+            padding: 15px;
+            color: rgb(100 116 139);
+            border-top: 1px solid #d2d6de;
+        }
+
+        /* New Customize Interface End Here */
+
         ::-moz-selection {
             /* Code for Firefox */
             color: red;
@@ -89,8 +200,8 @@
         }
 
         /*
-         * maintenance top-bar
-         */
+    * maintenance top-bar
+    */
 
         .notification-top-bar {
             position: fixed;
diff --git a/ui/ui/user-ui/header.tpl b/ui/ui/user-ui/header.tpl
index eef5a52b..d27e9a4d 100644
--- a/ui/ui/user-ui/header.tpl
+++ b/ui/ui/user-ui/header.tpl
@@ -17,6 +17,117 @@
 
 
     <style>
+        /* New Customize Interface Start Here */
+        body {
+            position: relative;
+            z-index: 1;
+            background-color: rgb(241 245 249);
+            font-family: Satoshi, sans-serif;
+            font-size: 1rem;
+            line-height: 1.5rem;
+            font-weight: 400;
+            color: rgb(100 116 139);
+        }
+
+        .modern-skin-dark .main-header .logo {
+            background-color: rgb(28 36 52);
+            color: #fff;
+        }
+
+        .modern-skin-dark .main-header .navbar {
+            background: rgb(28 36 52);
+        }
+
+        .modern-skin-dark .main-sidebar .sidebar {
+            background-color: rgb(28 36 52);
+            bottom: 0;
+        }
+
+        .modern-skin-dark .main-sidebar {
+            background-color: rgb(28 36 52);
+            box-shadow: 0 0 5px rgba(0, 0, 0, .3);
+        }
+
+        .modern-skin-dark .main-header .navbar>a:focus,
+        .modern-skin-dark .main-header .navbar>a:active,
+        .modern-skin-dark .main-header .navbar>a:visited,
+        .modern-skin-dark .main-header .navbar>a:hover {
+            background-color: rgb(28 36 52);
+        }
+
+        .sidebar-menu li>a {
+            position: relative;
+            background-color: rgb(28 36 52);
+        }
+        
+        .sidebar-menu li:focus,
+        .sidebar-menu li :hover {
+            color: #10d435;
+
+        }
+        
+        .modern-skin-dark .main-sidebar .sidebar .sidebar-menu li.active a {
+            background-color: #2e298e;
+            border-radius: 5px;
+            margin: 10px;
+
+        }
+
+        .modern-skin-dark .main-sidebar .sidebar .sidebar-menu {
+            background-color: rgb(28 36 52);
+        }
+
+        .modern-skin-dark .main-sidebar .sidebar .sidebar-menu li .treeview-menu li.active a {
+            background-color: transparent !important;
+            color: rgb(84, 131, 227);
+        }
+
+        .modern-skin-dark .main-sidebar .sidebar .sidebar-menu li .treeview-menu li>a {
+            background-color: transparent !important;
+            padding: 10px 5px 5px 15px;
+        }
+
+        .modern-skin-dark .main-sidebar .sidebar .sidebar-menu li .treeview-menu {
+            padding-left: 0;
+            border-left: 3px solid #10d435;
+        }
+
+        .content-header {
+            list-style-type: none;
+            padding: 15px;
+            background-color: #f6f9fc;
+
+        }
+
+        @media (max-width: 767px) {
+            .content {
+                padding: 0 15px !important;
+                background-color: #f6f9fc;
+            }
+        }
+
+        .content {
+            padding: 25px !important;
+            background-color: #f6f9fc;
+
+        }
+
+        .content-wrapper,
+        .right-side {
+            min-height: 100%;
+            background-color: #f6f9fc;
+            z-index: 800;
+        }
+
+        .main-footer {
+            background: rgb(28 36 52);
+            padding: 15px;
+            color: rgb(100 116 139);
+            border-top: 1px solid #d2d6de;
+        }
+
+        /* New Customize Interface End Here */
+
         ::-moz-selection {
             /* Code for Firefox */
             color: red;
@@ -28,16 +139,35 @@
             background: yellow;
         }
 
-        .content-wrapper {
-            margin-top: 50px;
+        .select2-container .select2-selection--single .select2-selection__rendered {
+            margin-top: 0px !important;
         }
 
-        @media (max-width: 767px) {
-            .content-wrapper {
-                margin-top: 100px;
+        @media (min-width: 768px) {
+            .outer {
+                height: 200px
+                    /* Or whatever */
             }
         }
 
+        th:first-child,
+        td:first-child {
+            position: sticky;
+            left: 0px;
+            background-color: #f9f9f9;
+        }
+
+
+        .text1line {
+            display: block;
+            /* or inline-block */
+            text-overflow: ellipsis;
+            word-wrap: break-word;
+            overflow: hidden;
+            max-height: 1em;
+            line-height: 1em;
+        }
+
 
         .loading {
             pointer-events: none;
@@ -67,13 +197,163 @@
             }
         }
 
-        .dropdown-menu .dropdown-item {
-            margin-bottom: 5px;
+        /*
+    * maintenance top-bar
+    */
+
+        .notification-top-bar {
+            position: fixed;
+            top: 0;
+            left: 0;
+            height: 40px;
+            line-height: 40px;
+            width: 100%;
+            background: #ec2106;
+            text-align: center;
+            color: #FFFFFF;
+            font-family: serif;
+            font-weight: bolder;
+            font-size: 14px;
+            z-index: 9999;
+            box-sizing: border-box;
+            padding: 0 10px;
         }
 
-        .dropdown-menu .dropdown-item button {
+        .notification-top-bar p {
+            padding: 0;
             margin: 0;
-            padding: 10px;
+        }
+
+        .notification-top-bar p a {
+            padding: 5px 10px;
+            border-radius: 3px;
+            background: #FFF;
+            color: #1ABC9C;
+            font-weight: bold;
+            text-decoration: none;
+            display: inline;
+            font-size: inherit;
+        }
+
+        @media (max-width: 600px) {
+            .notification-top-bar {
+                font-size: 12px;
+                height: auto;
+                line-height: normal;
+                padding: 10px;
+            }
+
+            .notification-top-bar p a {
+                padding: 5px 10px;
+                margin: 5px 0;
+                font-size: 10px;
+                display: inline-block;
+            }
+        }
+
+        .bs-callout {
+            padding: 20px;
+            margin: 20px 0;
+            border: 1px solid #eee;
+            border-left-width: 5px;
+            border-radius: 3px;
+        }
+
+        .bs-callout h4 {
+            margin-top: 0;
+            margin-bottom: 5px
+        }
+
+        .bs-callout p:last-child {
+            margin-bottom: 0
+        }
+
+        .bs-callout code {
+            border-radius: 3px
+        }
+
+        .bs-callout+.bs-callout {
+            margin-top: -5px
+        }
+
+        .bs-callout-danger {
+            border-left-color: #ce4844
+        }
+
+        .bs-callout-danger h4 {
+            color: #ce4844
+        }
+
+        .bs-callout-warning {
+            border-left-color: #aa6708
+        }
+
+        .bs-callout-warning h4 {
+            color: #aa6708
+        }
+
+        .bs-callout-info {
+            border-left-color: #1b809e
+        }
+
+        .bs-callout-info h4 {
+            color: #1b809e
+        }
+
+        /* Checkbox container */
+        .switch {
+            position: relative;
+            display: inline-block;
+            width: 50px;
+            height: 24px;
+        }
+
+        /* Hidden checkbox */
+        .switch input {
+            opacity: 0;
+            width: 0;
+            height: 0;
+        }
+
+        /* Slider */
+        .slider {
+            position: absolute;
+            cursor: pointer;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background-color: #ccc;
+            -webkit-transition: .4s;
+            transition: .4s;
+            border-radius: 24px;
+        }
+
+        .slider:before {
+            position: absolute;
+            content: "";
+            height: 18px;
+            width: 18px;
+            left: 3px;
+            bottom: 3px;
+            background-color: white;
+            -webkit-transition: .4s;
+            transition: .4s;
+            border-radius: 50%;
+        }
+
+        input:checked+.slider {
+            background-color: #2196F3;
+        }
+
+        input:focus+.slider {
+            box-shadow: 0 0 1px #2196F3;
+        }
+
+        input:checked+.slider:before {
+            -webkit-transform: translateX(26px);
+            -ms-transform: translateX(26px);
+            transform: translateX(26px);
         }
     </style>
 

From 8c206ba1f8b13233f09f35bad3acd9d45370ae81 Mon Sep 17 00:00:00 2001
From: Focuslinkstech <45756999+Focuslinkstech@users.noreply.github.com>
Date: Wed, 21 Aug 2024 22:20:06 +0100
Subject: [PATCH 2/3] fix user footer

---
 ui/ui/user-ui/header.tpl | 190 +++------------------------------------
 1 file changed, 11 insertions(+), 179 deletions(-)

diff --git a/ui/ui/user-ui/header.tpl b/ui/ui/user-ui/header.tpl
index d27e9a4d..0e422602 100644
--- a/ui/ui/user-ui/header.tpl
+++ b/ui/ui/user-ui/header.tpl
@@ -17,6 +17,7 @@
 
 
     <style>
+
         /* New Customize Interface Start Here */
         body {
             position: relative;
@@ -127,7 +128,7 @@
         }
 
         /* New Customize Interface End Here */
-
+        
         ::-moz-selection {
             /* Code for Firefox */
             color: red;
@@ -139,35 +140,16 @@
             background: yellow;
         }
 
-        .select2-container .select2-selection--single .select2-selection__rendered {
-            margin-top: 0px !important;
+        .content-wrapper {
+            margin-top: 50px;
         }
 
-        @media (min-width: 768px) {
-            .outer {
-                height: 200px
-                    /* Or whatever */
+        @media (max-width: 767px) {
+            .content-wrapper {
+                margin-top: 100px;
             }
         }
 
-        th:first-child,
-        td:first-child {
-            position: sticky;
-            left: 0px;
-            background-color: #f9f9f9;
-        }
-
-
-        .text1line {
-            display: block;
-            /* or inline-block */
-            text-overflow: ellipsis;
-            word-wrap: break-word;
-            overflow: hidden;
-            max-height: 1em;
-            line-height: 1em;
-        }
-
 
         .loading {
             pointer-events: none;
@@ -197,163 +179,13 @@
             }
         }
 
-        /*
-    * maintenance top-bar
-    */
-
-        .notification-top-bar {
-            position: fixed;
-            top: 0;
-            left: 0;
-            height: 40px;
-            line-height: 40px;
-            width: 100%;
-            background: #ec2106;
-            text-align: center;
-            color: #FFFFFF;
-            font-family: serif;
-            font-weight: bolder;
-            font-size: 14px;
-            z-index: 9999;
-            box-sizing: border-box;
-            padding: 0 10px;
+        .dropdown-menu .dropdown-item {
+            margin-bottom: 5px;
         }
 
-        .notification-top-bar p {
-            padding: 0;
+        .dropdown-menu .dropdown-item button {
             margin: 0;
-        }
-
-        .notification-top-bar p a {
-            padding: 5px 10px;
-            border-radius: 3px;
-            background: #FFF;
-            color: #1ABC9C;
-            font-weight: bold;
-            text-decoration: none;
-            display: inline;
-            font-size: inherit;
-        }
-
-        @media (max-width: 600px) {
-            .notification-top-bar {
-                font-size: 12px;
-                height: auto;
-                line-height: normal;
-                padding: 10px;
-            }
-
-            .notification-top-bar p a {
-                padding: 5px 10px;
-                margin: 5px 0;
-                font-size: 10px;
-                display: inline-block;
-            }
-        }
-
-        .bs-callout {
-            padding: 20px;
-            margin: 20px 0;
-            border: 1px solid #eee;
-            border-left-width: 5px;
-            border-radius: 3px;
-        }
-
-        .bs-callout h4 {
-            margin-top: 0;
-            margin-bottom: 5px
-        }
-
-        .bs-callout p:last-child {
-            margin-bottom: 0
-        }
-
-        .bs-callout code {
-            border-radius: 3px
-        }
-
-        .bs-callout+.bs-callout {
-            margin-top: -5px
-        }
-
-        .bs-callout-danger {
-            border-left-color: #ce4844
-        }
-
-        .bs-callout-danger h4 {
-            color: #ce4844
-        }
-
-        .bs-callout-warning {
-            border-left-color: #aa6708
-        }
-
-        .bs-callout-warning h4 {
-            color: #aa6708
-        }
-
-        .bs-callout-info {
-            border-left-color: #1b809e
-        }
-
-        .bs-callout-info h4 {
-            color: #1b809e
-        }
-
-        /* Checkbox container */
-        .switch {
-            position: relative;
-            display: inline-block;
-            width: 50px;
-            height: 24px;
-        }
-
-        /* Hidden checkbox */
-        .switch input {
-            opacity: 0;
-            width: 0;
-            height: 0;
-        }
-
-        /* Slider */
-        .slider {
-            position: absolute;
-            cursor: pointer;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background-color: #ccc;
-            -webkit-transition: .4s;
-            transition: .4s;
-            border-radius: 24px;
-        }
-
-        .slider:before {
-            position: absolute;
-            content: "";
-            height: 18px;
-            width: 18px;
-            left: 3px;
-            bottom: 3px;
-            background-color: white;
-            -webkit-transition: .4s;
-            transition: .4s;
-            border-radius: 50%;
-        }
-
-        input:checked+.slider {
-            background-color: #2196F3;
-        }
-
-        input:focus+.slider {
-            box-shadow: 0 0 1px #2196F3;
-        }
-
-        input:checked+.slider:before {
-            -webkit-transform: translateX(26px);
-            -ms-transform: translateX(26px);
-            transform: translateX(26px);
+            padding: 10px;
         }
     </style>
 

From 34f904ccc4a5374ddbd9f8a62d7f2bcd62526923 Mon Sep 17 00:00:00 2001
From: Focuslinkstech <45756999+Focuslinkstech@users.noreply.github.com>
Date: Thu, 22 Aug 2024 02:00:23 +0100
Subject: [PATCH 3/3] Add User Search Bar

---
 system/controllers/search_user.php | 21 +++++++
 ui/ui/sections/footer.tpl          | 26 ++++++++
 ui/ui/sections/header.tpl          | 96 +++++++++++++++++++++++++++++-
 3 files changed, 140 insertions(+), 3 deletions(-)
 create mode 100644 system/controllers/search_user.php

diff --git a/system/controllers/search_user.php b/system/controllers/search_user.php
new file mode 100644
index 00000000..b3a04062
--- /dev/null
+++ b/system/controllers/search_user.php
@@ -0,0 +1,21 @@
+<?php
+
+$query = isset($_GET['query']) ? trim($_GET['query']) : '';
+
+if (!empty($query)) {    
+    $results = ORM::for_table('tbl_customers')
+        ->where_like('username', "%$query%")
+        ->find_many();
+
+    if ($results) {
+        echo '<ul>';
+        foreach ($results as $user) {
+            echo '<li><a href="'.$_url.'?_route=customers/view/'.$user->id.'">' . htmlspecialchars($user->username, ENT_QUOTES, 'UTF-8') . '</a></li>';
+        }
+        echo '</ul>';
+    } else {
+        echo '<p>' . Lang::T('No users found.') . '</p>';
+    }
+} else {
+    echo '<p>' . Lang::T('Please enter a search term.') . '</p>';
+}
diff --git a/ui/ui/sections/footer.tpl b/ui/ui/sections/footer.tpl
index 413e9cec..01cb6414 100644
--- a/ui/ui/sections/footer.tpl
+++ b/ui/ui/sections/footer.tpl
@@ -15,6 +15,32 @@
 <script src="ui/ui/summernote/summernote.min.js"></script>
 <script src="ui/ui/scripts/custom.js"></script>
 
+<script>
+    document.getElementById('openSearch').addEventListener('click', function () {
+        document.getElementById('searchOverlay').style.display = 'flex';
+    });
+
+    document.getElementById('closeSearch').addEventListener('click', function () {
+        document.getElementById('searchOverlay').style.display = 'none';
+    });
+
+    document.getElementById('searchTerm').addEventListener('keyup', function () {
+        let query = this.value;
+        $.ajax({
+            url: '{$_url}search_user',
+            type: 'GET',
+            data: { query: query },
+            success: function (data) {
+                if (data.trim() !== '') {
+                    $('#searchResults').html(data).show();
+                } else {
+                    $('#searchResults').html('').hide();
+                }
+            }
+        });
+    });
+</script>
+
 {if isset($xfooter)}
     {$xfooter}
 {/if}
diff --git a/ui/ui/sections/header.tpl b/ui/ui/sections/header.tpl
index 565d498d..8589dd72 100644
--- a/ui/ui/sections/header.tpl
+++ b/ui/ui/sections/header.tpl
@@ -18,8 +18,10 @@
     <link rel="stylesheet" href="ui/ui/styles/plugins/pace.css" />
     <link rel="stylesheet" href="ui/ui/summernote/summernote.min.css" />
     <script src="ui/ui/scripts/sweetalert2.all.min.js"></script>
-     <style>
+    <style>
         /* New Customize Interface Start Here */
+        @import url(https://fonts.googleapis.com/css?family=Open+Sans);
+
         body {
             position: relative;
             z-index: 1;
@@ -61,13 +63,13 @@
             position: relative;
             background-color: rgb(28 36 52);
         }
-        
+
         .sidebar-menu li:focus,
         .sidebar-menu li :hover {
             color: #10d435;
 
         }
-        
+
         .modern-skin-dark .main-sidebar .sidebar .sidebar-menu li.active a {
             background-color: #2e298e;
             border-radius: 5px;
@@ -128,6 +130,78 @@
             border-top: 1px solid #d2d6de;
         }
 
+        /* Search Bar Start Here */
+        .wrap {
+            width: 30%;
+            position: absolute;
+            top: 50%;
+            left: 47%;
+            transform: translate(-50%, -50%);
+            z-index: 1000;
+            text-align: center;
+        }
+
+        .search {
+            padding: 10px 20px;
+            border-radius: 50px;
+            border: 1px solid #2e298e;
+            background-color: #2e298e;
+            color: white;
+            cursor: pointer;
+            width: 50%;
+            height: 50%;
+        }
+
+        .search-overlay {
+            display: none;
+            /* Hidden by default */
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.5);
+            z-index: 1000;
+            justify-content: center;
+            align-items: center;
+        }
+
+        .search-container {
+            background-color: #fff;
+            padding: 20px;
+            border-radius: 10px;
+            width: 100%;
+            max-width: 600px;
+            position: relative;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .searchTerm {
+            width: 100%;
+            padding: 10px;
+            border-radius: 5px;
+            border: 1px solid #00B4CC;
+            margin-bottom: 10px;
+            font-size: 16px;
+        }
+
+        .cancelButton {
+            padding: 10px;
+            border-radius: 5px;
+            background-color: #ff4d4d;
+            color: white;
+            border: none;
+            cursor: pointer;
+        }
+
+        .search-results {
+            max-height: 200px;
+            overflow-y: auto;
+        }
+
+        /* Search Bar End Here */
+
         /* New Customize Interface End Here */
 
         ::-moz-selection {
@@ -377,6 +451,22 @@
                 </a>
                 <div class="navbar-custom-menu">
                     <ul class="nav navbar-nav">
+                        <div class="wrap">
+                            <div class="">
+                                <button id="openSearch" class="search"><i class="fa fa-search x2"></i></button>
+                            </div>
+                        </div>
+
+                        <div id="searchOverlay" class="search-overlay">
+                            <div class="search-container">
+                                <input type="text" id="searchTerm" class="searchTerm"
+                                    placeholder="{Lang::T('Search Users')}" autocomplete="off">
+                                <div id="searchResults" class="search-results">
+                                    <!-- Search results will be displayed here -->
+                                </div>
+                                <button type="button" id="closeSearch" class="cancelButton">{Lang::T('Cancel')}</button>
+                            </div>
+                        </div>
                         <li class="dropdown user user-menu">
                             <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                 <img src="https://robohash.org/{$_admin['id']}?set=set3&size=100x100&bgset=bg1"