From c32b2ea6608ac785303fdefaa9fafbd112d2028c Mon Sep 17 00:00:00 2001
From: marszayn <official.muammar@gmail.com>
Date: Wed, 6 Aug 2025 10:44:27 +0700
Subject: [PATCH] update: kosong dan watch css

---
 .../Transport/SpjDriver/Home/Kosong.cshtml    | 221 ++++++++++++++++++
 wwwroot/driver/css/watch.css                  |  97 ++++++++
 2 files changed, 318 insertions(+)
 create mode 100644 Views/Admin/Transport/SpjDriver/Home/Kosong.cshtml

diff --git a/Views/Admin/Transport/SpjDriver/Home/Kosong.cshtml b/Views/Admin/Transport/SpjDriver/Home/Kosong.cshtml
new file mode 100644
index 0000000..b1f6c8d
--- /dev/null
+++ b/Views/Admin/Transport/SpjDriver/Home/Kosong.cshtml
@@ -0,0 +1,221 @@
+@{
+    Layout = "~/Views/Admin/Transport/SpjDriver/Shared/_Layout.cshtml";
+    ViewData["Title"] = "Home Page";
+}
+
+ <div class="container max-w-sm mx-auto bg-white min-h-screen">
+    
+        <div class="absolute top-0 max-w-sm container mx-auto bg-orange-500 text-white rounded-br-[125px] h-[250px] flex flex-row justify-between items-start px-6 py-6 shadow-lg z-20">
+            <div class="flex flex-col">
+                <h1 class="text-md font-bold leading-tight text-white">Bonny Agung Putra</h1>
+                <p class="text-xs opacity-90 font-medium text-orange-100">Driver UPST</span></p>
+                <div class="mt-5 flex items-center gap-2">
+                    <i class="w-4 h-4 text-white" data-lucide="map-pin"></i>
+                    <span class="text-sm opacity-90">Lokasi Anda:</span>
+                </div>
+                <p id="userLocation" class="font-semibold text-xs tracking-wide cursor-pointer underline text-white hover:text-orange-200 transition">
+                    Mendeteksi lokasi...
+                </p>
+            </div>
+            <div class="flex items-center justify-center">
+                <div class="relative flex flex-col items-center justify-center">
+                    <div class="w-12 h-12 rounded-full border-3 border-white overflow-hidden shadow-md flex items-center justify-center cursor-pointer group" id="profileMenuButton">
+                        <i class="w-8 h-8 text-white" data-lucide="user"></i>
+                    </div>
+                    <div id="profileMenuDropdown" class="absolute top-12 right-0 mt-2 w-32 bg-white rounded shadow-lg py-2 z-50 hidden">
+                        <form method="post" asp-controller="Auth" asp-action="Logout">
+                            <button type="submit" class="hover:cursor-pointer flex items-center gap-2 w-full text-left px-4 py-2 text-sm font-semibold text-red-600 hover:bg-red-50 transition rounded-md">
+                                <i class="w-4 h-4" data-lucide="log-out"></i>
+                                Logout
+                            </button>
+                        </form>
+                    </div>
+                </div>
+             
+            </div>
+        </div>
+
+        <div class="bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-100 mx-4 px-6 py-12 mt-40 rounded-3xl relative overflow-hidden shadow-2xl z-21 border border-slate-200">
+            <div class="absolute top-0 left-0 w-full h-full pointer-events-none">
+                <div class="absolute top-4 right-8 w-6 h-6 bg-orange-300 rounded-full opacity-60 animate-bounce" style="animation-delay: 0.5s;"></div>
+                <div class="absolute top-12 left-12 w-4 h-4 bg-blue-400 rounded-full opacity-40 animate-pulse" style="animation-delay: 1s;"></div>
+                <div class="absolute bottom-8 left-8 w-5 h-5 bg-indigo-300 rounded-full opacity-50 animate-bounce" style="animation-delay: 1.5s;"></div>
+                <div class="absolute bottom-16 right-16 w-3 h-3 bg-slate-400 rounded-full opacity-30 animate-pulse" style="animation-delay: 2s;"></div>
+            </div>
+            
+            <div class="relative z-10 text-center">
+                <div class="w-24 h-24 mx-auto mb-6 relative">
+                    <div class="w-full h-full bg-gradient-to-br from-orange-400 to-orange-600 rounded-full flex items-center justify-center shadow-xl animate-pulse">
+                        <div class="w-20 h-20 bg-white rounded-full flex items-center justify-center">
+                            <i class="w-10 h-10 text-orange-500" data-lucide="clipboard-list"></i>
+                        </div>
+                    </div>
+                    <div class="absolute inset-0 border-4 border-orange-300 rounded-full animate-ping opacity-30"></div>
+                </div>
+                
+                <div class="space-y-4">
+                    <h2 class="text-xl font-bold bg-gradient-to-r from-slate-700 to-slate-900 bg-clip-text text-transparent">
+                        Belum Ada SPJ
+                    </h2>
+                    <p class="text-sm text-slate-600 leading-relaxed px-4 mb-2">
+                        Anda belum memiliki <span class="font-semibold text-orange-600">Surat Perintah Jalan</span> yang aktif saat ini.
+                    </p>
+                </div>
+
+                <div class="bg-white/70 backdrop-blur-sm border border-white/30 rounded-2xl p-5 mb-6 text-left">
+                    <div class="space-y-2 text-xs text-slate-600">
+                        <div class="flex items-start gap-2">
+                            <div class="w-1 h-1 bg-orange-400 rounded-full mt-1.5 flex-shrink-0"></div>
+                            <p>SPJ akan diterbitkan oleh admin sesuai jadwal kerja</p>
+                        </div>
+                        <div class="flex items-start gap-2">
+                            <div class="w-1 h-1 bg-orange-400 rounded-full mt-1.5 flex-shrink-0"></div>
+                            <p>Periksa koneksi internet dan aktifkan lokasi GPS</p>
+                        </div>
+                    </div>
+                </div>
+                
+                <button id="refreshButton" class="bg-gradient-to-r from-orange-500 to-orange-600 hover:from-orange-600 hover:to-orange-700 text-white px-6 py-3 rounded-2xl text-sm font-bold shadow-lg hover:shadow-xl transition-all duration-300 flex items-center gap-2 mx-auto transform hover:scale-105">
+                    <i class="w-4 h-4" data-lucide="refresh-cw" id="refreshIcon"></i>
+                    <span id="refreshText">Refresh Halaman</span>
+                </button>
+            </div>
+        </div>
+
+        <partial name="~/Views/Admin/Transport/SpjDriver/Shared/Components/_NavigationAdmin.cshtml" />
+      
+    </div>
+
+
+<register-block dynamic-section="scripts" key="jsHomeKosong">
+<style>
+    @@keyframes float {
+        0%, 100% { transform: translateY(0px); }
+        50% { transform: translateY(-10px); }
+    }
+    
+    @@keyframes shimmer {
+        0% { background-position: -200px 0; }
+        100% { background-position: calc(200px + 100%) 0; }
+    }
+    
+    .float-animation {
+        animation: float 3s ease-in-out infinite;
+    }
+    
+    .shimmer {
+        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
+        background-size: 200px 100%;
+        animation: shimmer 2s infinite;
+    }
+    
+    .refresh-spin {
+        animation: spin 1s linear infinite;
+    }
+    
+    @@keyframes spin {
+        from { transform: rotate(0deg); }
+        to { transform: rotate(360deg); }
+    }
+</style>
+
+<script>
+document.addEventListener("DOMContentLoaded", function () {
+    const userLocationEl = document.getElementById("userLocation");
+
+    function reverseGeocode(lat, lng) {
+        fetch(`https://nominatim.openstreetmap.org/reverse?format=json&lat=${lat}&lon=${lng}`)
+            .then(res => res.json())
+            .then(data => {
+                const address = data.display_name || `${lat}, ${lng}`;
+                userLocationEl.textContent = address;
+                localStorage.setItem("user_latitude", lat);
+                localStorage.setItem("user_longitude", lng);
+                localStorage.setItem("user_address", address);
+            })
+            .catch(() => {
+                userLocationEl.textContent = `${lat}, ${lng}`;
+            });
+    }
+
+    function getLocationUpdate() {
+        if ("geolocation" in navigator) {
+            userLocationEl.textContent = "Mendeteksi lokasi baru...";
+            navigator.geolocation.getCurrentPosition(
+                function (position) {
+                    const lat = position.coords.latitude.toFixed(6);
+                    const lng = position.coords.longitude.toFixed(6);
+                    reverseGeocode(lat, lng);
+                },
+                function () {
+                    userLocationEl.textContent = "Lokasi tidak diizinkan";
+                }
+            );
+        } else {
+            userLocationEl.textContent = "Browser tidak mendukung lokasi";
+        }
+    }
+
+    const savedAddress = localStorage.getItem("user_address");
+    if (savedAddress) {
+        userLocationEl.textContent = savedAddress;
+    } else {
+        getLocationUpdate();
+    }
+
+    userLocationEl.addEventListener("click", function () {
+        getLocationUpdate();
+    });
+
+    const refreshBtn = document.getElementById('refreshButton');
+    const refreshIcon = document.getElementById('refreshIcon');
+    const refreshText = document.getElementById('refreshText');
+    
+    if (refreshBtn) {
+        refreshBtn.addEventListener("click", function() {
+            refreshIcon.style.animation = 'spin 1s linear infinite';
+            refreshText.textContent = 'Memuat...';
+            refreshBtn.disabled = true;
+            refreshBtn.style.opacity = '0.8';
+            
+            setTimeout(() => {
+                location.reload();
+            }, 1000);
+        });
+    }
+
+    const mainIcon = document.querySelector('[data-lucide="clipboard-list"]');
+    if (mainIcon) {
+        mainIcon.closest('.w-24').classList.add('float-animation');
+    }
+
+    const mainCard = document.querySelector('.bg-gradient-to-br');
+    if (mainCard) {
+        mainCard.style.opacity = '0';
+        mainCard.style.transform = 'translateY(20px)';
+        mainCard.style.transition = 'all 0.6s ease-out';
+        
+        setTimeout(() => {
+            mainCard.style.opacity = '1';
+            mainCard.style.transform = 'translateY(0)';
+        }, 100);
+    }
+});
+</script>
+
+<script>
+    document.addEventListener("DOMContentLoaded", function () {
+        const btn = document.getElementById("profileMenuButton");
+        const dropdown = document.getElementById("profileMenuDropdown");
+
+        btn.addEventListener("click", function (e) {
+            e.stopPropagation();
+            dropdown.classList.toggle("hidden");
+        });
+
+        document.addEventListener("click", function () {
+            dropdown.classList.add("hidden");
+        });
+    });
+</script>
+</register-block>
\ No newline at end of file
diff --git a/wwwroot/driver/css/watch.css b/wwwroot/driver/css/watch.css
index 1e04183..d180ee3 100644
--- a/wwwroot/driver/css/watch.css
+++ b/wwwroot/driver/css/watch.css
@@ -60,6 +60,7 @@
     --color-blue-800: oklch(42.4% 0.199 265.638);
     --color-indigo-50: oklch(96.2% 0.018 272.314);
     --color-indigo-100: oklch(93% 0.034 272.788);
+    --color-indigo-300: oklch(78.5% 0.115 274.713);
     --color-indigo-400: oklch(67.3% 0.182 276.935);
     --color-indigo-600: oklch(51.1% 0.262 276.966);
     --color-indigo-700: oklch(45.7% 0.24 277.023);
@@ -81,6 +82,7 @@
     --color-slate-600: oklch(44.6% 0.043 257.281);
     --color-slate-700: oklch(37.2% 0.044 257.287);
     --color-slate-800: oklch(27.9% 0.041 260.031);
+    --color-slate-900: oklch(20.8% 0.042 265.755);
     --color-gray-50: oklch(98.5% 0.002 247.839);
     --color-gray-100: oklch(96.7% 0.003 264.542);
     --color-gray-200: oklch(92.8% 0.006 264.531);
@@ -129,6 +131,7 @@
     --animate-spin: spin 1s linear infinite;
     --animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
     --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+    --animate-bounce: bounce 1s infinite;
     --blur-sm: 8px;
     --blur-md: 12px;
     --blur-lg: 16px;
@@ -374,6 +377,12 @@
   .right-4 {
     right: calc(var(--spacing) * 4);
   }
+  .right-8 {
+    right: calc(var(--spacing) * 8);
+  }
+  .right-16 {
+    right: calc(var(--spacing) * 16);
+  }
   .right-full {
     right: 100%;
   }
@@ -395,6 +404,9 @@
   .bottom-8 {
     bottom: calc(var(--spacing) * 8);
   }
+  .bottom-16 {
+    bottom: calc(var(--spacing) * 16);
+  }
   .bottom-50 {
     bottom: calc(var(--spacing) * 50);
   }
@@ -407,6 +419,12 @@
   .left-1\/2 {
     left: calc(1/2 * 100%);
   }
+  .left-8 {
+    left: calc(var(--spacing) * 8);
+  }
+  .left-12 {
+    left: calc(var(--spacing) * 12);
+  }
   .z-0 {
     z-index: 0;
   }
@@ -656,6 +674,9 @@
   .mt-1 {
     margin-top: calc(var(--spacing) * 1);
   }
+  .mt-1\.5 {
+    margin-top: calc(var(--spacing) * 1.5);
+  }
   .mt-2 {
     margin-top: calc(var(--spacing) * 2);
   }
@@ -839,6 +860,9 @@
   .w-0 {
     width: calc(var(--spacing) * 0);
   }
+  .w-1 {
+    width: calc(var(--spacing) * 1);
+  }
   .w-2 {
     width: calc(var(--spacing) * 2);
   }
@@ -986,6 +1010,12 @@
   .transform {
     transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
   }
+  .animate-bounce {
+    animation: var(--animate-bounce);
+  }
+  .animate-ping {
+    animation: var(--animate-ping);
+  }
   .animate-pulse {
     animation: var(--animate-pulse);
   }
@@ -1183,6 +1213,9 @@
   .rounded-2xl {
     border-radius: var(--radius-2xl);
   }
+  .rounded-3xl {
+    border-radius: var(--radius-3xl);
+  }
   .rounded-full {
     border-radius: calc(infinity * 1px);
   }
@@ -1334,6 +1367,9 @@
   .border-red-400 {
     border-color: var(--color-red-400);
   }
+  .border-slate-200 {
+    border-color: var(--color-slate-200);
+  }
   .border-slate-200\/50 {
     border-color: color-mix(in srgb, oklch(92.9% 0.013 255.508) 50%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1379,6 +1415,9 @@
   .bg-blue-100 {
     background-color: var(--color-blue-100);
   }
+  .bg-blue-400 {
+    background-color: var(--color-blue-400);
+  }
   .bg-blue-500 {
     background-color: var(--color-blue-500);
   }
@@ -1421,12 +1460,18 @@
   .bg-green-600 {
     background-color: var(--color-green-600);
   }
+  .bg-indigo-300 {
+    background-color: var(--color-indigo-300);
+  }
   .bg-orange-50 {
     background-color: var(--color-orange-50);
   }
   .bg-orange-100 {
     background-color: var(--color-orange-100);
   }
+  .bg-orange-300 {
+    background-color: var(--color-orange-300);
+  }
   .bg-orange-400 {
     background-color: var(--color-orange-400);
   }
@@ -1454,6 +1499,9 @@
   .bg-slate-100 {
     background-color: var(--color-slate-100);
   }
+  .bg-slate-400 {
+    background-color: var(--color-slate-400);
+  }
   .bg-transparent {
     background-color: transparent;
   }
@@ -1478,6 +1526,12 @@
       background-color: color-mix(in oklab, var(--color-white) 20%, transparent);
     }
   }
+  .bg-white\/70 {
+    background-color: color-mix(in srgb, #fff 70%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-white) 70%, transparent);
+    }
+  }
   .bg-yellow-50 {
     background-color: var(--color-yellow-50);
   }
@@ -1563,10 +1617,23 @@
     --tw-gradient-from: var(--color-red-600);
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
+  .from-slate-50 {
+    --tw-gradient-from: var(--color-slate-50);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+  .from-slate-700 {
+    --tw-gradient-from: var(--color-slate-700);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
   .from-white {
     --tw-gradient-from: var(--color-white);
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
+  .via-blue-50 {
+    --tw-gradient-via: var(--color-blue-50);
+    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
+    --tw-gradient-stops: var(--tw-gradient-via-stops);
+  }
   .via-emerald-50 {
     --tw-gradient-via: var(--color-emerald-50);
     --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
@@ -1616,6 +1683,10 @@
     --tw-gradient-to: var(--color-green-400);
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
+  .to-indigo-100 {
+    --tw-gradient-to: var(--color-indigo-100);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
   .to-orange-50 {
     --tw-gradient-to: var(--color-orange-50);
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
@@ -1672,6 +1743,10 @@
     --tw-gradient-to: var(--color-rose-600);
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
+  .to-slate-900 {
+    --tw-gradient-to: var(--color-slate-900);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
   .to-teal-50 {
     --tw-gradient-to: var(--color-teal-50);
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
@@ -1758,6 +1833,9 @@
   .py-6 {
     padding-block: calc(var(--spacing) * 6);
   }
+  .py-12 {
+    padding-block: calc(var(--spacing) * 12);
+  }
   .py-16 {
     padding-block: calc(var(--spacing) * 16);
   }
@@ -2034,6 +2112,9 @@
   .text-slate-400 {
     color: var(--color-slate-400);
   }
+  .text-slate-600 {
+    color: var(--color-slate-600);
+  }
   .text-slate-700 {
     color: var(--color-slate-700);
   }
@@ -2085,9 +2166,15 @@
   .opacity-30 {
     opacity: 30%;
   }
+  .opacity-40 {
+    opacity: 40%;
+  }
   .opacity-50 {
     opacity: 50%;
   }
+  .opacity-60 {
+    opacity: 60%;
+  }
   .opacity-75 {
     opacity: 75%;
   }
@@ -2849,6 +2936,16 @@
     opacity: 0.5;
   }
 }
+@keyframes bounce {
+  0%, 100% {
+    transform: translateY(-25%);
+    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
+  }
+  50% {
+    transform: none;
+    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+  }
+}
 @layer properties {
   @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
     *, ::before, ::after, ::backdrop {