feat: inisialisasi project kit v2

2026-05-21 15:57:29 +07:00
commit d4fd478e1f
271 changed files with 35300 additions and 0 deletions
@@ -0,0 +1,46 @@
+import { router } from '@inertiajs/react';
+import { useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+
+export function RouterProgress() {
+    const [progress, setProgress] = useState<number | null>(null);
+
+    useEffect(() => {
+        let timer: ReturnType<typeof setTimeout>;
+
+        const offStart = router.on('start', () => {
+            setProgress(0);
+            // Animate to ~80% quickly, then slow down while waiting for response
+            timer = setTimeout(() => setProgress(30), 50);
+            timer = setTimeout(() => setProgress(60), 300);
+            timer = setTimeout(() => setProgress(80), 800);
+        });
+
+        const offFinish = router.on('finish', () => {
+            clearTimeout(timer);
+            setProgress(100);
+            // Remove bar after fade-out
+            setTimeout(() => setProgress(null), 400);
+        });
+
+        return () => { offStart(); offFinish(); clearTimeout(timer); };
+    }, []);
+
+    if (progress === null) return null;
+
+    return createPortal(
+        <div
+            className="fixed top-0 left-0 z-[9999] h-[3px] pointer-events-none"
+            style={{
+                width: `${progress}%`,
+                background: 'linear-gradient(90deg, #D4A017, #f0c040)',
+                boxShadow: '0 0 8px rgba(212,160,23,0.6)',
+                transition: progress === 100
+                    ? 'width 0.15s ease-out, opacity 0.3s ease 0.15s'
+                    : 'width 0.4s cubic-bezier(0.16, 1, 0.3, 1)',
+                opacity: progress === 100 ? 0 : 1,
+            }}
+        />,
+        document.body
+    );
+}