233 lines
15 KiB
TypeScript
233 lines
15 KiB
TypeScript
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>
|
|
);
|
|
}
|