From cd69638199bdc0117dea04db94097a5d039558f5 Mon Sep 17 00:00:00 2001
From: Bro <bro@local>
Date: Fri, 24 Jul 2026 18:25:43 +0700
Subject: [PATCH] feat: flatpickr date picker premium di semua input tanggal
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Flatpickr (CDN) dengan tema Airbnb — bersih & modern
- Lokalisasi Bahasa Indonesia
- altInput: tampil dd/mm/yyyy, simpan yyyy-mm-dd
- Animasi mulus + shadow premium
- Berlaku otomatis ke semua <input type='date'> di seluruh app
- Style kustom: border-radius 12px, shadow 3D
---
 resources/views/layouts/app.blade.php | 31 +++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)

diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index 7428991..27b01c3 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -41,6 +41,19 @@
         .animate-fade-in { animation: fadeInUp 0.3s ease-out; }
         .stat-card-glow:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.08); transform: translateY(-1px); }
     </style>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/themes/airbnb.css">
+    <style>
+        @keyframes fadeInUp {
+            from { opacity: 0; transform: translateY(8px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        .animate-fade-in { animation: fadeInUp 0.3s ease-out; }
+        .stat-card-glow:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.08); transform: translateY(-1px); }
+        .flatpickr-calendar { border-radius: 12px !important; box-shadow: 0 8px 30px rgba(0,0,0,0.12) !important; }
+        .flatpickr-day.selected { border-radius: 8px !important; }
+        .flatpickr-day.today { border-radius: 8px !important; }
+    </style>
     @stack('styles')
 </head>
 <body class="h-full antialiased">
@@ -255,6 +268,24 @@
         </div>
     </div>
 
+    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
+    <script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/id.js"></script>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            flatpickr.localize(flatpickr.l10ns.id);
+            document.querySelectorAll('input[type="date"]').forEach(function(el) {
+                el.type = 'text';
+                flatpickr(el, {
+                    dateFormat: 'Y-m-d',
+                    altFormat: 'd/m/Y',
+                    altInput: true,
+                    allowInput: true,
+                    animate: true,
+                });
+            });
+        });
+    </script>
+
     @stack('scripts')
 
     {{-- Reverb Config --}}