fixing scroll bar

resources/views/dataAkreditasi/index.blade.php

@@ -221,7 +221,7 @@
     const paginationEl = document.getElementById('paginationControls');
     // === INITIALIZATION ===
     document.addEventListener('DOMContentLoaded', () => {
-        fetchData();
+        loadAkreData().finally(() => fetchData());
         initEventListeners();
         initTooltips();
     });
@@ -319,12 +319,13 @@
 
         // MODE 1: SEARCH VIEW (Flat View - Langsung tampilkan semua file)
         if (keyword.length > 0) {
-            currentData.forEach(item => renderFileRow(tbody, item));
+            sortAkreItemsByJff(currentData).forEach(item => renderFileRow(tbody, item));
             return;
         }
 
         // MODE 2: TREE VIEW (All folders & files)
-        const tree = buildTree(currentData);
+        const orderedItems = sortAkreItemsByJff(currentData);
+        const tree = buildTree(orderedItems);
         if (expandedFolders.size === 0) {
             expandAllFolders(tree, '');
         }
@@ -398,7 +399,11 @@
     }
 
     function renderTree(tbody, node, basePath, level) {
-        const folderNames = Object.keys(node.folders || {}).sort();
+        const folderNames = Object.keys(node.folders || {}).sort((left, right) => {
+            const leftPath = basePath ? `${basePath}/${left}` : left;
+            const rightPath = basePath ? `${basePath}/${right}` : right;
+            return compareAkrePaths(leftPath, rightPath);
+        });
 
         folderNames.forEach(folder => {
             const folderPath = basePath ? `${basePath}/${folder}` : folder;
@@ -683,6 +688,64 @@
     let akreData = [];
     let akreLoaded = false;
     let akreFlat = [];
+    let akreOrderMap = new Map();
+
+    function buildAkreOrderMap() {
+        akreOrderMap = new Map();
+        (akreData || []).forEach((typeItem, typeIndex) => {
+            const typeName = String(typeItem?.name || '').trim();
+            if (!typeName) return;
+            akreOrderMap.set(typeName, [typeIndex, -1, -1]);
+
+            const segments = Array.isArray(typeItem?.segment) ? typeItem.segment : [];
+            segments.forEach((segment, segmentIndex) => {
+                const segmentName = String(segment?.name || '').trim();
+                if (!segmentName) return;
+                const segmentPath = `${typeName}/${segmentName}`;
+                akreOrderMap.set(segmentPath, [typeIndex, segmentIndex, -1]);
+
+                const children = Array.isArray(segment?.turunan) ? segment.turunan : [];
+                children.forEach((child, childIndex) => {
+                    const childName = String(child?.name || '').trim();
+                    if (!childName) return;
+                    akreOrderMap.set(`${segmentPath}/${childName}`, [typeIndex, segmentIndex, childIndex]);
+                });
+            });
+        });
+    }
+
+    function getAkreFolderPathFromFile(filePath) {
+        const parts = String(filePath || '').split('/').filter(Boolean);
+        if (parts.length <= 1) return '';
+        parts.pop();
+        return parts.join('/');
+    }
+
+    function compareAkrePaths(leftPath, rightPath) {
+        const leftOrder = akreOrderMap.get(leftPath) || [Number.MAX_SAFE_INTEGER, Number.MAX_SAFE_INTEGER, Number.MAX_SAFE_INTEGER];
+        const rightOrder = akreOrderMap.get(rightPath) || [Number.MAX_SAFE_INTEGER, Number.MAX_SAFE_INTEGER, Number.MAX_SAFE_INTEGER];
+
+        for (let i = 0; i < 3; i++) {
+            if (leftOrder[i] !== rightOrder[i]) {
+                return leftOrder[i] - rightOrder[i];
+            }
+        }
+
+        return leftPath.localeCompare(rightPath, undefined, { numeric: true, sensitivity: 'base' });
+    }
+
+    function sortAkreItemsByJff(items = []) {
+        return [...items].sort((left, right) => {
+            const leftFolderPath = getAkreFolderPathFromFile(left?.file || '');
+            const rightFolderPath = getAkreFolderPathFromFile(right?.file || '');
+            const pathCompare = compareAkrePaths(leftFolderPath, rightFolderPath);
+            if (pathCompare !== 0) return pathCompare;
+
+            const leftName = String(left?.nama_dokumen || left?.file || '').toLowerCase();
+            const rightName = String(right?.nama_dokumen || right?.file || '').toLowerCase();
+            return leftName.localeCompare(rightName, undefined, { numeric: true, sensitivity: 'base' });
+        });
+    }
 
     function loadAkreData(){
         if(akreLoaded) return Promise.resolve(akreData);
@@ -691,12 +754,14 @@
             .then(data => {
                 akreData = Array.isArray(data) ? data : [];
                 akreFlat = [];
+                buildAkreOrderMap();
                 akreLoaded = true;
                 return akreData;
             })
             .catch(() => {
                 akreData = [];
                 akreFlat = [];
+                akreOrderMap = new Map();
                 akreLoaded = true;
                 return akreData;
             });

resources/views/layout/main.blade.php

@@ -21,6 +21,55 @@
   <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
   <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
   <style>
+    html,
+    body,
+    .body-wrapper,
+    .body-wrapper-inner,
+    .container-fluid {
+      scroll-behavior: smooth;
+      scrollbar-width: thin;
+      scrollbar-color: rgba(148, 163, 184, 0.5) transparent;
+    }
+
+    html::-webkit-scrollbar,
+    body::-webkit-scrollbar,
+    .body-wrapper::-webkit-scrollbar,
+    .body-wrapper-inner::-webkit-scrollbar,
+    .container-fluid::-webkit-scrollbar {
+      width: 6px;
+      height: 6px;
+    }
+
+    html::-webkit-scrollbar-track,
+    body::-webkit-scrollbar-track,
+    .body-wrapper::-webkit-scrollbar-track,
+    .body-wrapper-inner::-webkit-scrollbar-track,
+    .container-fluid::-webkit-scrollbar-track {
+      background: transparent;
+      border-radius: 999px;
+    }
+
+    html::-webkit-scrollbar-thumb,
+    body::-webkit-scrollbar-thumb,
+    .body-wrapper::-webkit-scrollbar-thumb,
+    .body-wrapper-inner::-webkit-scrollbar-thumb,
+    .container-fluid::-webkit-scrollbar-thumb {
+      background: rgba(148, 163, 184, 0.5);
+      border-radius: 999px;
+      border: 1px solid transparent;
+      background-clip: padding-box;
+    }
+
+    html::-webkit-scrollbar-thumb:hover,
+    body::-webkit-scrollbar-thumb:hover,
+    .body-wrapper::-webkit-scrollbar-thumb:hover,
+    .body-wrapper-inner::-webkit-scrollbar-thumb:hover,
+    .container-fluid::-webkit-scrollbar-thumb:hover {
+      background: rgba(100, 116, 139, 0.68);
+      border: 1px solid transparent;
+      background-clip: padding-box;
+    }
+
     .modal,
     .modal-content,
     .modal-body,