From 6cf0c137bdc567abe58d57cea941d89bd623b789 Mon Sep 17 00:00:00 2001
From: marszayn <official.muammar@gmail.com>
Date: Fri, 4 Jul 2025 09:50:22 +0700
Subject: [PATCH] update

---
 resources/views/dashboard/index.blade.php | 105 +++++++++++++++++-----
 1 file changed, 82 insertions(+), 23 deletions(-)

diff --git a/resources/views/dashboard/index.blade.php b/resources/views/dashboard/index.blade.php
index 98391ef..84ccc20 100644
--- a/resources/views/dashboard/index.blade.php
+++ b/resources/views/dashboard/index.blade.php
@@ -12,11 +12,9 @@
         <div class="card shadow-lg border-0 overflow-hidden">
             <div class="card-body p-0">
                 <ul class="nav nav-justified position-relative flex-wrap flex-md-nowrap" id="dashboard-tabs" role="tablist" style="gap: 4px; overflow-x: auto; white-space: nowrap;">
-                    {{-- <div class="position-absolute bg-primary rounded-pill transition-all d-none d-md-block"
-                         style="height: 100%; width: 20%; left: 0; top: 0; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); z-index: 1;"></div> --}}
 
-                    <li class="nav-item position-relative flex-fill" role="presentation" style="z-index: 2; min-width: 80px;">
-                        <button class="nav-link active fw-semibold d-flex align-items-center justify-content-center gap-2 text-md py-3 px-2 border-0 bg-transparent position-relative overflow-hidden w-100"
+                    <li class="nav-item position-relative flex-fill" role="presentation" style="z-index: 2; min-width: 90px;">
+                        <button class="nav-link active fw-semibold d-flex align-items-center justify-content-center gap-2 text-md py-3 px-2 border-0 bg-transparent position-relative overflow-hidden w-100 flex-column flex-sm-row"
                                 id="pertek-tab" data-bs-toggle="pill" data-bs-target="#pertek-content"
                                 type="button" role="tab" aria-controls="pertek-content" aria-selected="true"
                                 data-bs-toggle="tooltip" data-bs-placement="bottom"
@@ -25,14 +23,14 @@
                             <div class="icon-wrapper d-flex align-items-center justify-content-center">
                                 <x-lucide-shield-check class="w-20-px h-20-px w-md-22-px h-md-22-px transition-all duration-300"/>
                             </div>
-                            <span class="nav-text transition-all duration-300 d-none d-sm-inline">PERTEK</span>
+                            <span class="nav-text transition-all duration-300 text-center">PERTEK</span>
                             <div class="nav-ripple position-absolute rounded-circle bg-white opacity-0 transition-all"
                                  style="width: 0; height: 0; top: 50%; left: 50%; transform: translate(-50%, -50%);"></div>
                         </button>
                     </li>
 
-                    <li class="nav-item position-relative flex-fill" role="presentation" style="z-index: 2; min-width: 80px;">
-                        <button class="nav-link fw-semibold d-flex align-items-center justify-content-center gap-2 text-md py-3 px-2 border-0 bg-transparent position-relative overflow-hidden w-100"
+                    <li class="nav-item position-relative flex-fill" role="presentation" style="z-index: 2; min-width: 90px;">
+                        <button class="nav-link fw-semibold d-flex align-items-center justify-content-center gap-2 text-md py-3 px-2 border-0 bg-transparent position-relative overflow-hidden w-100 flex-column flex-sm-row"
                                 id="rintek-tab" data-bs-toggle="pill" data-bs-target="#rintek-content"
                                 type="button" role="tab" aria-controls="rintek-content" aria-selected="false"
                                 data-bs-toggle="tooltip" data-bs-placement="bottom"
@@ -41,14 +39,14 @@
                             <div class="icon-wrapper d-flex align-items-center justify-content-center">
                                 <x-lucide-settings class="w-20-px h-20-px w-md-22-px h-md-22-px transition-all duration-300"/>
                             </div>
-                            <span class="nav-text transition-all duration-300 d-none d-sm-inline">RINTEK</span>
+                            <span class="nav-text transition-all duration-300 text-center">RINTEK</span>
                             <div class="nav-ripple position-absolute rounded-circle bg-white opacity-0 transition-all"
                                  style="width: 0; height: 0; top: 50%; left: 50%; transform: translate(-50%, -50%);"></div>
                         </button>
                     </li>
 
-                    <li class="nav-item position-relative flex-fill" role="presentation" style="z-index: 2; min-width: 80px;">
-                        <button class="nav-link fw-semibold d-flex align-items-center justify-content-center gap-2 text-md py-3 px-2 border-0 bg-transparent position-relative overflow-hidden w-100"
+                    <li class="nav-item position-relative flex-fill" role="presentation" style="z-index: 2; min-width: 90px;">
+                        <button class="nav-link fw-semibold d-flex align-items-center justify-content-center gap-2 text-md py-3 px-2 border-0 bg-transparent position-relative overflow-hidden w-100 flex-column flex-sm-row"
                                 id="amdal-tab" data-bs-toggle="pill" data-bs-target="#amdal-content"
                                 type="button" role="tab" aria-controls="amdal-content" aria-selected="false"
                                 data-bs-toggle="tooltip" data-bs-placement="bottom"
@@ -57,14 +55,14 @@
                             <div class="icon-wrapper d-flex align-items-center justify-content-center">
                                 <x-lucide-leaf class="w-20-px h-20-px w-md-22-px h-md-22-px transition-all duration-300"/>
                             </div>
-                            <span class="nav-text transition-all duration-300 d-none d-sm-inline">AMDAL</span>
+                            <span class="nav-text transition-all duration-300 text-center">AMDAL</span>
                             <div class="nav-ripple position-absolute rounded-circle bg-white opacity-0 transition-all"
                                  style="width: 0; height: 0; top: 50%; left: 50%; transform: translate(-50%, -50%);"></div>
                         </button>
                     </li>
 
-                    <li class="nav-item position-relative flex-fill" role="presentation" style="z-index: 2; min-width: 80px;">
-                        <button class="nav-link fw-semibold d-flex align-items-center justify-content-center gap-2 text-md py-3 px-2 border-0 bg-transparent position-relative overflow-hidden w-100"
+                    <li class="nav-item position-relative flex-fill" role="presentation" style="z-index: 2; min-width: 90px;">
+                        <button class="nav-link fw-semibold d-flex align-items-center justify-content-center gap-2 text-md py-3 px-2 border-0 bg-transparent position-relative overflow-hidden w-100 flex-column flex-sm-row"
                                 id="angkut-tab" data-bs-toggle="pill" data-bs-target="#angkut-content"
                                 type="button" role="tab" aria-controls="angkut-content" aria-selected="false"
                                 data-bs-toggle="tooltip" data-bs-placement="bottom"
@@ -73,13 +71,13 @@
                             <div class="icon-wrapper d-flex align-items-center justify-content-center">
                                 <x-lucide-bus-front class="w-20-px h-20-px w-md-22-px h-md-22-px transition-all duration-300"/>
                             </div>
-                            <span class="nav-text transition-all duration-300 d-none d-sm-inline text-center">IZIN ANGKUT & OLAH</span>
+                            <span class="nav-text transition-all duration-300 text-center">IZIN ANGKUT</span>
                             <div class="nav-ripple position-absolute rounded-circle bg-white opacity-0 transition-all"
                                  style="width: 0; height: 0; top: 50%; left: 50%; transform: translate(-50%, -50%);"></div>
                         </button>
                     </li>
-                    <li class="nav-item position-relative flex-fill" role="presentation" style="z-index: 2; min-width: 80px;">
-                        <button class="nav-link fw-semibold d-flex align-items-center justify-content-center gap-2 text-md py-3 px-2 border-0 bg-transparent position-relative overflow-hidden w-100"
+                    <li class="nav-item position-relative flex-fill" role="presentation" style="z-index: 2; min-width: 90px;">
+                        <button class="nav-link fw-semibold d-flex align-items-center justify-content-center gap-2 text-md py-3 px-2 border-0 bg-transparent position-relative overflow-hidden w-100 flex-column flex-sm-row"
                                 id="ujiemisi-tab" data-bs-toggle="pill" data-bs-target="#ujiemisi-content"
                                 type="button" role="tab" aria-controls="ujiemisi-content" aria-selected="false"
                                 data-bs-toggle="tooltip" data-bs-placement="bottom"
@@ -88,7 +86,7 @@
                             <div class="icon-wrapper d-flex align-items-center justify-content-center">
                                 <x-lucide-bus class="w-20-px h-20-px w-md-22-px h-md-22-px transition-all duration-300"/>
                             </div>
-                            <span class="nav-text transition-all duration-300 d-none d-sm-inline text-center">IZIN TEMPAT UJI EMISI</span>
+                            <span class="nav-text transition-all duration-300 text-center">IZIN TUE</span>
                             <div class="nav-ripple position-absolute rounded-circle bg-white opacity-0 transition-all"
                                  style="width: 0; height: 0; top: 50%; left: 50%; transform: translate(-50%, -50%);"></div>
                         </button>
@@ -1679,11 +1677,29 @@ document.addEventListener('DOMContentLoaded', function() {
     }
 });
 
-// Aktifkan tooltip Bootstrap pada semua tab di mobile
+// Aktifkan tooltip Bootstrap hanya pada desktop, karena mobile sudah menampilkan text
 document.addEventListener('DOMContentLoaded', function () {
-    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
-    tooltipTriggerList.forEach(function (tooltipTriggerEl) {
-        new bootstrap.Tooltip(tooltipTriggerEl);
+    // Hanya aktifkan tooltip pada desktop (768px ke atas)
+    if (window.innerWidth >= 768) {
+        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
+        tooltipTriggerList.forEach(function (tooltipTriggerEl) {
+            new bootstrap.Tooltip(tooltipTriggerEl);
+        });
+    }
+
+    // Update tooltip saat resize window
+    window.addEventListener('resize', function() {
+        var tooltips = document.querySelectorAll('.tooltip');
+        tooltips.forEach(function(tooltip) {
+            tooltip.remove();
+        });
+
+        if (window.innerWidth >= 768) {
+            var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
+            tooltipTriggerList.forEach(function (tooltipTriggerEl) {
+                new bootstrap.Tooltip(tooltipTriggerEl);
+            });
+        }
     });
 });
 </script>
@@ -1736,6 +1752,11 @@ document.addEventListener('DOMContentLoaded', function () {
     .tooltip-mobile {
         display: none !important;
     }
+
+    /* Hide all tooltips on desktop since we have better hover states */
+    .tooltip {
+        display: none !important;
+    }
 }
 
 @media (max-width: 767.98px) {
@@ -1745,11 +1766,32 @@ document.addEventListener('DOMContentLoaded', function () {
         -webkit-overflow-scrolling: touch;
     }
     #dashboard-tabs .nav-item {
-        min-width: 100px;
+        min-width: 110px;
         flex: 0 0 auto;
     }
+
+    /* Mobile tab styling for vertical layout (icon above text) */
+    #dashboard-tabs .nav-link {
+        flex-direction: column !important;
+        gap: 4px !important;
+        padding: 12px 8px !important;
+        min-height: 70px;
+    }
+
     #dashboard-tabs .nav-text {
-        display: none !important;
+        font-size: 0.7rem !important;
+        line-height: 1.1 !important;
+        font-weight: 600 !important;
+        text-align: center !important;
+        max-width: 80px;
+        word-wrap: break-word;
+        hyphens: auto;
+    }
+
+    #dashboard-tabs .icon-wrapper {
+        width: 28px !important;
+        height: 28px !important;
+        margin-bottom: 2px;
     }
 
     /* Mobile active state styles */
@@ -1763,6 +1805,10 @@ document.addEventListener('DOMContentLoaded', function () {
         color: white !important;
     }
 
+    #dashboard-tabs .nav-link.active .nav-text {
+        color: white !important;
+    }
+
     #dashboard-tabs .nav-link:not(.active) {
         background-color: transparent !important;
         color: var(--bs-gray-600) !important;
@@ -1772,6 +1818,10 @@ document.addEventListener('DOMContentLoaded', function () {
         color: var(--bs-gray-600) !important;
     }
 
+    #dashboard-tabs .nav-link:not(.active) .nav-text {
+        color: var(--bs-gray-600) !important;
+    }
+
     /* Hover states for mobile */
     #dashboard-tabs .nav-link:not(.active):hover {
         background-color: var(--bs-gray-100) !important;
@@ -1781,6 +1831,15 @@ document.addEventListener('DOMContentLoaded', function () {
     #dashboard-tabs .nav-link:not(.active):hover svg {
         color: var(--bs-primary) !important;
     }
+
+    #dashboard-tabs .nav-link:not(.active):hover .nav-text {
+        color: var(--bs-primary) !important;
+    }
+
+    /* Hide tooltips on mobile since we now show text */
+    .tooltip {
+        display: none !important;
+    }
 }
 
 /* Custom tooltip styles for mobile */