Merge pull request #269 from Focuslinkstech/Development

new template

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>';
+}

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}

ui/ui/sections/header.tpl

@@ -19,6 +19,191 @@
     <link rel="stylesheet" href="ui/ui/summernote/summernote.min.css" />
     <script src="ui/ui/scripts/sweetalert2.all.min.js"></script>
     <style>
+        /* New Customize Interface Start Here */
+        @import url(https://fonts.googleapis.com/css?family=Open+Sans);
+
+        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;
+        }
+
+        /* 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 {
             /* Code for Firefox */
             color: red;
@@ -266,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"

ui/ui/user-ui/header.tpl

@@ -17,6 +17,118 @@
 
 
     <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;