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,232 @@
+import { usePage, Link, router } from '@inertiajs/react';
+import React, { useState, useRef, useEffect } from 'react';
+import { PageProps } from '@/types';
+
+export function Topbar({ theme, onThemeToggle, onMenuToggle, sidebarOpen }: { theme: string; onThemeToggle: () => void; onMenuToggle: () => void; sidebarOpen: boolean }) {
+    const props = usePage<PageProps>().props as any;
+    const { auth, system_settings, unread_notifications } = props;
+    const { user, roles } = auth;
+    
+    const [showDropdown, setShowDropdown] = useState(false);
+    const dropdownRef = useRef<HTMLDivElement>(null);
+    const [searchQuery, setSearchQuery] = useState('');
+    const [searchResults, setSearchResults] = useState<any[]>([]);
+    const [isSearching, setIsSearching] = useState(false);
+    const searchInputRef = useRef<HTMLInputElement>(null);
+    const path = window.location.pathname;
+
+    useEffect(() => {
+        function handleClickOutside(event: MouseEvent) {
+            if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+                setShowDropdown(false);
+            }
+        }
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, []);
+
+    // Global Search Logic
+    useEffect(() => {
+        if (searchQuery.length < 2) {
+            setSearchResults([]);
+            return;
+        }
+
+        const timer = setTimeout(async () => {
+            setIsSearching(true);
+            try {
+                const response = await fetch(`/api/search?query=${encodeURIComponent(searchQuery)}`);
+                const data = await response.json();
+                setSearchResults(data);
+            } catch (error) {
+                console.error('Search error:', error);
+            } finally {
+                setIsSearching(false);
+            }
+        }, 300);
+
+        return () => clearTimeout(timer);
+    }, [searchQuery]);
+
+    // Keyboard Shortcuts
+    useEffect(() => {
+        const handleKeyDown = (e: KeyboardEvent) => {
+            if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
+                e.preventDefault();
+                searchInputRef.current?.focus();
+            }
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        return () => window.removeEventListener('keydown', handleKeyDown);
+    }, []);
+
+    const handleLogout = () => {
+        router.post('/logout');
+    };
+
+    const initials = `${user?.first_name?.charAt(0) || ''}${user?.last_name?.charAt(0) || ''}`.toUpperCase();
+
+    const segments = path.split('/').filter(Boolean);
+    const formatSegment = (s: string) =>
+        s.replace(/-/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
+    const pageTitle = segments.length > 0 ? formatSegment(segments[0]) : 'Dashboard';
+    const breadcrumbs = segments.length > 1
+        ? segments.map((s, i) => ({ label: formatSegment(s), href: '/' + segments.slice(0, i + 1).join('/') }))
+        : null;
+
+    return (
+        <header className="h-16 flex items-center justify-between px-6 shrink-0 relative z-30 transition-colors duration-300 bg-transparent">
+            {/* Left: Breadcrumb area */}
+            <div className="flex items-center gap-6">
+                {/* Burger — mobile only */}
+                <button
+                    onClick={onMenuToggle}
+                    className="lg:hidden p-2 rounded-xl bg-white dark:bg-white/5 border border-gray-100 dark:border-white/5 text-gray-500 dark:text-gray-400 hover:text-[#3D4E4B] dark:hover:text-white transition-all"
+                    aria-label="Toggle menu"
+                >
+                    {sidebarOpen ? (
+                        <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
+                            <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+                        </svg>
+                    ) : (
+                        <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
+                            <path strokeLinecap="round" strokeLinejoin="round" d="M4 6h16M4 12h16M4 18h16" />
+                        </svg>
+                    )}
+                </button>
+
+                <div className="hidden lg:block">
+                    <h2 className="text-sm font-bold text-[#3D4E4B] dark:text-white tracking-tight leading-none">{pageTitle}</h2>
+                    <div className="flex items-center gap-1.5 text-xs font-semibold text-gray-400 tracking-tight mt-1">
+                        <Link href="/dashboard" className="hover:text-[#3D4E4B] dark:hover:text-white transition-colors">
+                            {system_settings?.app_name || 'biiproject kit'}
+                        </Link>
+                        {breadcrumbs ? breadcrumbs.map((crumb, i) => (
+                            <React.Fragment key={crumb.href}>
+                                <svg className="w-1 h-1 shrink-0" fill="currentColor" viewBox="0 0 24 24"><circle cx="12" cy="12" r="12" /></svg>
+                                {i === breadcrumbs.length - 1
+                                    ? <span className="text-[#D4A017] font-bold">{crumb.label}</span>
+                                    : <Link href={crumb.href} className="hover:text-[#3D4E4B] dark:hover:text-white transition-colors">{crumb.label}</Link>
+                                }
+                            </React.Fragment>
+                        )) : (
+                            <>
+                                <svg className="w-1 h-1 shrink-0" fill="currentColor" viewBox="0 0 24 24"><circle cx="12" cy="12" r="12" /></svg>
+                                <span className="text-[#D4A017] font-bold">{pageTitle}</span>
+                            </>
+                        )}
+                    </div>
+                </div>
+
+                {/* Global Search */}
+                <div className="relative group ml-4">
+                    <div className="relative w-[300px]">
+                        <svg className="absolute left-3.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-gray-400 pointer-events-none group-focus-within:text-[#D4A017] transition-colors" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={3}><path strokeLinecap="round" strokeLinejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /></svg>
+                        <input 
+                            ref={searchInputRef}
+                            type="text" 
+                            placeholder="Search anything... (Ctrl+K)" 
+                            value={searchQuery}
+                            onChange={(e) => setSearchQuery(e.target.value)}
+                            className="w-full h-10 pl-10 pr-4 rounded-xl border border-gray-100 dark:border-white/5 bg-white dark:bg-white/5 text-xs font-bold text-[#3D4E4B] dark:text-white placeholder-gray-400 focus:outline-none focus:border-[#D4A017] focus:ring-4 focus:ring-[#D4A017]/5 transition-all" 
+                        />
+                        {isSearching && (
+                            <div className="absolute right-3.5 top-1/2 -translate-y-1/2">
+                                <div className="w-3.5 h-3.5 border-2 border-[#D4A017] border-t-transparent rounded-full animate-spin" />
+                            </div>
+                        )}
+                    </div>
+
+                    {/* Search Results Dropdown */}
+                    {searchResults.length > 0 && (
+                        <div className="absolute left-0 right-0 mt-3 bg-white dark:bg-[#232D2B] rounded-2xl shadow-2xl border border-gray-100 dark:border-white/5 overflow-hidden anim-up z-50">
+                            <div className="p-2 max-h-[400px] overflow-y-auto custom-scrollbar">
+                                {searchResults.map((result, idx) => (
+                                    <Link 
+                                        key={idx} 
+                                        href={result.url} 
+                                        onClick={() => setSearchQuery('')}
+                                        className="flex items-center gap-3 p-3 rounded-xl hover:bg-gray-50 dark:hover:bg-white/5 transition-all group"
+                                    >
+                                        <div className="w-9 h-9 rounded-lg bg-gray-100 dark:bg-white/5 flex items-center justify-center text-gray-400 group-hover:text-[#D4A017] transition-colors shrink-0">
+                                            {result.icon === 'user' && <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}><path d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" /></svg>}
+                                            {result.icon === 'shield' && <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}><path d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" /></svg>}
+                                            {result.icon === 'clock' && <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}><path d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>}
+                                        </div>
+                                        <div>
+                                            <div className="text-xs font-bold text-[#3D4E4B] dark:text-white tracking-tight">{result.title}</div>
+                                            <div className="text-[10px] text-gray-400 font-bold uppercase tracking-widest mt-0.5">{result.type} • {result.subtitle}</div>
+                                        </div>
+                                    </Link>
+                                ))}
+                            </div>
+                        </div>
+                    )}
+                </div>
+            </div>
+
+            {/* Right: Actions Area */}
+            <div className="flex items-center gap-3">
+                {/* Theme Toggle */}
+                <button 
+                    onClick={onThemeToggle}
+                    className="p-2.5 rounded-xl bg-white dark:bg-white/5 text-gray-400 hover:text-[#D4A017] transition-all border border-gray-100 dark:border-white/5"
+                    title={`Switch to ${theme === 'dark' ? 'Light' : 'Dark'} Mode`}
+                >
+                    {theme === 'dark' ? (
+                        <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}><path d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364-6.364l-.707.707M6.343 17.657l-.707.707m12.728 0l-.707-.707M6.343 6.343l-.707.707M12 5a7 7 0 100 14 7 7 0 000-14z" /></svg>
+                    ) : (
+                        <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}><path d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" /></svg>
+                    )}
+                </button>
+
+                <Link href="/notifications" className="relative p-2.5 rounded-xl bg-white dark:bg-white/5 text-gray-400 hover:text-[#3D4E4B] dark:hover:text-white transition-all border border-gray-100 dark:border-white/5 flex items-center justify-center">
+                    <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
+                        <path strokeLinecap="round" strokeLinejoin="round" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
+                    </svg>
+                    {unread_notifications > 0 && (
+                        <span className="absolute top-1.5 right-1.5 min-w-[1rem] h-4 px-0.5 bg-red-500 rounded-full flex items-center justify-center text-[9px] font-black text-white leading-none">
+                            {unread_notifications > 99 ? '99+' : unread_notifications}
+                        </span>
+                    )}
+                </Link>
+
+                <div className="relative" ref={dropdownRef}>
+                    <button
+                        onClick={() => setShowDropdown(!showDropdown)}
+                        className="flex items-center gap-3 p-1.5 rounded-xl bg-white dark:bg-white/5 border border-gray-100 dark:border-white/5 hover:bg-gray-50 dark:hover:bg-white/10 transition-all group"
+                    >
+                        <div className="w-8 h-8 rounded-lg bg-[#3D4E4B] flex items-center justify-center font-bold text-white text-sm">
+                            {user?.avatar_url ? (
+                                <img src={user.avatar_url} className="w-full h-full object-cover rounded-lg" />
+                            ) : (
+                                initials
+                            )}
+                        </div>
+                        <div className="hidden sm:block text-left pr-2">
+                            <div className="text-xs font-bold text-[#3D4E4B] dark:text-white leading-none">{user?.first_name}</div>
+                            <div className="text-[10px] text-[#D4A017] font-black uppercase tracking-widest mt-1">{roles?.[0]?.replace('-', ' ') || 'User'}</div>
+                        </div>
+                    </button>
+
+                    {showDropdown && (
+                        <div className="absolute right-0 mt-3 w-56 bg-white dark:bg-[#232D2B] rounded-2xl shadow-2xl border border-gray-50 dark:border-white/5 py-2 z-50 anim-up">
+                            <div className="px-5 py-3 border-b border-gray-50 dark:border-white/5 mb-1">
+                                <div className="text-xs font-black text-[#3D4E4B] dark:text-white tracking-tight">{user?.first_name} {user?.last_name}</div>
+                                <div className="text-[10px] text-gray-400 font-bold truncate mt-1 uppercase tracking-widest">{user?.email}</div>
+                            </div>
+                            <Link href="/profile" className="flex items-center gap-2.5 px-5 py-3 text-xs font-bold text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-white/5 transition-all">
+                                <svg className="w-4 h-4 opacity-50" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}><path d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" /></svg>
+                                Account Settings
+                            </Link>
+                            <button onClick={handleLogout} className="w-full flex items-center gap-2.5 px-5 py-3 text-xs font-bold text-red-600 hover:bg-red-50 dark:hover:bg-red-500/10 transition-all text-left border-t border-gray-50 dark:border-white/5 mt-1">
+                                <svg className="w-4 h-4 opacity-50" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}><path d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" /></svg>
+                                Sign Out Session
+                            </button>
+                        </div>
+                    )}
+                </div>
+            </div>
+        </header>
+    );
+}