feat: add administrative settings UI with sidebar navigation and search functionality

resources/views/admin/type/predefined-variables.blade.php

@@ -1,40 +1,6 @@
 <?php 
 $tabs = [
-    'Naks Center' => 'setting',
-    'Welding Methods' => 'setting',
-    'Materials' => 'setting',
-    'P-Numbers' => 'setting',
-    'Welding Positions' => 'setting',
-    'Hazard Classes' => 'setting',
-    'Joint Type' => 'setting',
-    'Joint View' => 'setting',
-    'Electrode Coating' => 'setting',
-    'Ru Welding Geometry ' => 'setting',
-    'Current Types' => 'setting',
-    'Welding Consumables' => 'setting',
-    'Product Type' => 'setting',
-    'Welding Machine Type' => 'setting',
-    'Welding Materials Brend' => 'setting',
-    'Work Type' => 'setting',
-    'Performed Works Type' => 'setting',
-    'Type of Consumable' => 'setting',
-    'Job Descriptions' => 'setting',
-    'Results' => 'setting',
-    'NDE Defects' => 'setting',
-    'Line List Category' => 'setting',
-    'Line List Group' => 'setting',
-    'UT Types' => 'setting',
-    'Beveelings' => 'setting',
-    'Discipline' => 'setting',
-    'TP Discipline' => 'setting',
-    'Locations' => 'setting',
-    'Piping Types' => 'setting',
-    'Duty Types' => 'setting',
     'User Levels' => 'user-levels',
-    'Material Group Map' => 'material-group-map',
-    'QC Activity' => 'qc-activity',
-    'Material Group Test Piece' => 'material-group-test-piece',
-    'Surface Area Constants' => 'surface-area-constants',
 ];
 
 // Aktif tab'ı belirle
@@ -42,9 +8,9 @@ $currentTab = get("t");
 $currentTitle = "";
 
 // Eğer aktif bir tab varsa başlığını bulalım
-if($currentTab) {
+if ($currentTab) {
-    foreach($tabs as $tabName => $val) {
+    foreach ($tabs as $tabName => $val) {
-        if(str_slug($tabName) == $currentTab) {
+        if (str_slug($tabName) == $currentTab) {
             $currentTitle = $tabName;
             break;
         }
@@ -66,11 +32,8 @@ if($currentTab) {
                     <!-- Arama Kutusu -->
                     <div class="mb-3">
                         <div class="input-group">
-                            <input type="text" 
+                            <input type="text" class="form-control" id="settingSearch"
-                                   class="form-control" 
+                                placeholder="{{e2('Search settings...')}}" autocomplete="off">
-                                   id="settingSearch" 
-                                   placeholder="{{e2('Search settings...')}}"
-                                   autocomplete="off">
                             <div class="input-group-append">
                                 <span class="input-group-text">
                                     <i class="fa fa-search"></i>
@@ -78,17 +41,16 @@ if($currentTab) {
                             </div>
                         </div>
                     </div>
-                    
+
                     <!-- Menü Listesi -->
-                    <div class="list-group list-group-flush" id="settingsList" style="max-height: 78vh; overflow-y: auto;">
+                    <div class="list-group list-group-flush" id="settingsList"
-                        <?php foreach($tabs AS $tab => $icon) { 
+                        style="max-height: 78vh; overflow-y: auto;">
-                            $id = str_slug($tab);
+                        <?php foreach ($tabs as $tab => $icon) {
-                            $isActive = ($currentTab == $id);
+    $id = str_slug($tab);
+    $isActive = ($currentTab == $id);
                         ?>
-                        <a class="list-group-item list-group-item-action setting-link {{$isActive ? 'active' : ''}}" 
+                        <a class="list-group-item list-group-item-action setting-link {{$isActive ? 'active' : ''}}"
-                           href="?t={{$id}}"
+                            href="?t={{$id}}" data-title="{{strtolower($tab)}}" style="display: block; width: 100%;">
-                           data-title="{{strtolower($tab)}}"
-                           style="display: block; width: 100%;">
                             <i class="fa fa-cog mr-2"></i>
                             {{e2($tab)}}
                         </a>
@@ -97,126 +59,133 @@ if($currentTab) {
                 </div>
             </div>
         </div>
-        
+
         <!-- Sağ Taraf: İçerik -->
         <div class="col-md-9">
-            <?php if(getisset("t")) { ?>
+            <?php if (getisset("t")) { ?>
-                <div class="block block-rounded block-bordered">
+            <div class="block block-rounded block-bordered">
-                    <div class="block-header block-header-default">
+                <div class="block-header block-header-default">
-                        <h3 class="block-title">{{e2($currentTitle)}}</h3>
+                    <h3 class="block-title">{{e2($currentTitle)}}</h3>
-                    </div>
-                    <div class="block-content p-0">
-                        @include("admin.type.settings." . get("t"))
-                    </div>
                 </div>
+                <div class="block-content p-0">
+                    @include("admin.type.settings." . get("t"))
+                </div>
+            </div>
             <?php } else { ?>
-                <div class="block block-rounded block-bordered">
+            <div class="block block-rounded block-bordered">
-                    <div class="block-content block-content-full">
+                <div class="block-content block-content-full">
-                        <div class="py-50 text-center">
+                    <div class="py-50 text-center">
-                            <i class="si si-settings text-primary display-3"></i>
+                        <i class="si si-settings text-primary display-3"></i>
-                            <h1 class="h2 font-w700 mt-30 mb-10">{{e2("Settings System")}}</h1>
+                        <h1 class="h2 font-w700 mt-30 mb-10">{{e2("Settings System")}}</h1>
-                            <h2 class="h3 font-w400 text-muted mb-50">{{e2("Please select a setting from the list to configure")}}</h2>
+                        <h2 class="h3 font-w400 text-muted mb-50">
-                            
+                            {{e2("Please select a setting from the list to configure")}}
-                            <div class="row justify-content-center">
+                        </h2>
-                                <div class="col-md-6">
+
-                                    <div class="alert alert-info">
+                        <div class="row justify-content-center">
-                                        <i class="fa fa-info-circle mr-1"></i>
+                            <div class="col-md-6">
-                                        {{e2("You can use the search box on the left to quickly find the setting you are looking for.")}}
+                                <div class="alert alert-info">
-                                    </div>
+                                    <i class="fa fa-info-circle mr-1"></i>
+                                    {{e2("You can use the search box on the left to quickly find the setting you are looking for.")}}
                                 </div>
                             </div>
                         </div>
                     </div>
                 </div>
+            </div>
             <?php } ?>
         </div>
     </div>
 </div>
 
 <style>
-/* Sidebar Link Stilleri */
+    /* Sidebar Link Stilleri */
-.setting-link {
+    .setting-link {
-    border: none;
+        border: none;
-    border-left: 3px solid transparent;
+        border-left: 3px solid transparent;
-    transition: all 0.2s ease;
+        transition: all 0.2s ease;
-    padding: 10px 15px;
+        padding: 10px 15px;
-}
+    }
 
-.setting-link:hover {
+    .setting-link:hover {
-    background-color: #f8f9fa;
+        background-color: #f8f9fa;
-    text-decoration: none;
+        text-decoration: none;
-    padding-left: 20px;
+        padding-left: 20px;
-    border-left-color: #dee2e6;
+        border-left-color: #dee2e6;
-}
+    }
 
-.setting-link.active {
+    .setting-link.active {
-    background-color: #007bff;
+        background-color: #007bff;
-    color: white;
+        color: white;
-    border-left-color: #0056b3;
+        border-left-color: #0056b3;
-}
+    }
 
-.setting-link.active:hover {
+    .setting-link.active:hover {
-    background-color: #0069d9;
+        background-color: #0069d9;
-}
+    }
 
-/* Scrollbar düzenlemesi */
+    /* Scrollbar düzenlemesi */
-#settingsList::-webkit-scrollbar {
+    #settingsList::-webkit-scrollbar {
-    width: 6px;
+        width: 6px;
-}
+    }
-#settingsList::-webkit-scrollbar-track {
+
-    background: #f1f1f1; 
+    #settingsList::-webkit-scrollbar-track {
-}
+        background: #f1f1f1;
-#settingsList::-webkit-scrollbar-thumb {
+    }
-    background: #ccc; 
+
-    border-radius: 3px;
+    #settingsList::-webkit-scrollbar-thumb {
-}
+        background: #ccc;
-#settingsList::-webkit-scrollbar-thumb:hover {
+        border-radius: 3px;
-    background: #bbb; 
+    }
-}
+
-.block-content .content {
+    #settingsList::-webkit-scrollbar-thumb:hover {
-    padding: 0 10px;
+        background: #bbb;
-}
+    }
-/* Arama kutusu odaklanma efekti */
+
-.input-group-focus {
+    .block-content .content {
-    box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
+        padding: 0 10px;
-    border-radius: 0.25rem;
+    }
-}
+
+    /* Arama kutusu odaklanma efekti */
+    .input-group-focus {
+        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25);
+        border-radius: 0.25rem;
+    }
 </style>
 
 <script>
-document.addEventListener('DOMContentLoaded', function() {
+    document.addEventListener('DOMContentLoaded', function () {
-    const searchInput = document.getElementById('settingSearch');
+        const searchInput = document.getElementById('settingSearch');
-    
-    if (searchInput) {
-        // Arama fonksiyonu
-        searchInput.addEventListener('input', function(e) {
-            const searchTerm = e.target.value.toLowerCase();
-            const links = document.querySelectorAll('.setting-link');
-            
-            links.forEach(link => {
-                const title = link.getAttribute('data-title') || '';
-                if (title.includes(searchTerm)) {
-                    link.style.display = 'block';
-                } else {
-                    link.style.display = 'none';
-                }
-            });
-        });
-        
-        // Input focus efektleri
-        searchInput.addEventListener('focus', function() {
-            this.closest('.input-group').classList.add('input-group-focus');
-        });
-        
-        searchInput.addEventListener('blur', function() {
-            this.closest('.input-group').classList.remove('input-group-focus');
-        });
 
-        // Eğer aktif link varsa, scroll'u oraya kaydır
+        if (searchInput) {
-        const activeLink = document.querySelector('.setting-link.active');
+            // Arama fonksiyonu
-        if (activeLink) {
+            searchInput.addEventListener('input', function (e) {
-            activeLink.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                const searchTerm = e.target.value.toLowerCase();
+                const links = document.querySelectorAll('.setting-link');
+
+                links.forEach(link => {
+                    const title = link.getAttribute('data-title') || '';
+                    if (title.includes(searchTerm)) {
+                        link.style.display = 'block';
+                    } else {
+                        link.style.display = 'none';
+                    }
+                });
+            });
+
+            // Input focus efektleri
+            searchInput.addEventListener('focus', function () {
+                this.closest('.input-group').classList.add('input-group-focus');
+            });
+
+            searchInput.addEventListener('blur', function () {
+                this.closest('.input-group').classList.remove('input-group-focus');
+            });
+
+            // Eğer aktif link varsa, scroll'u oraya kaydır
+            const activeLink = document.querySelector('.setting-link.active');
+            if (activeLink) {
+                activeLink.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
         }
-    }
+    });
-});
 </script>