feat: İhaleist - Akıllı İhale Takip ve Analiz Platformu (Full PRD + 7 Enterprise Modül)
This commit is contained in:
@@ -0,0 +1,187 @@
|
||||
import React, { useState } from 'react';
|
||||
import { useApp } from '../context/AppContext';
|
||||
import { Bot, Search, SlidersHorizontal, Gift, Bell, User, ChevronDown, CheckCircle, LogOut, Globe } from 'lucide-react';
|
||||
|
||||
export const Header = () => {
|
||||
const {
|
||||
searchQuery,
|
||||
setSearchQuery,
|
||||
setIsDetailedSearchOpen,
|
||||
setIsCompanyScannerOpen,
|
||||
setIsAiSpecAnalyzerOpen,
|
||||
userProfile,
|
||||
notifications,
|
||||
setActiveTab,
|
||||
clearAllFilters
|
||||
} = useApp();
|
||||
|
||||
const [showNotifications, setShowNotifications] = useState(false);
|
||||
const [showUserMenu, setShowUserMenu] = useState(false);
|
||||
|
||||
const handleSearchSubmit = (e) => {
|
||||
e.preventDefault();
|
||||
setActiveTab('list');
|
||||
};
|
||||
|
||||
return (
|
||||
<header className="bg-[#1f2937] text-white border-b border-slate-700 sticky top-0 z-40 shadow-sm">
|
||||
<div className="max-w-[1600px] mx-auto px-4 h-16 flex items-center justify-between gap-4">
|
||||
|
||||
{/* Logo */}
|
||||
<div
|
||||
onClick={() => { setActiveTab('list'); clearAllFilters(); }}
|
||||
className="flex items-center gap-2.5 cursor-pointer select-none group"
|
||||
>
|
||||
<div className="w-10 h-10 rounded-xl bg-blue-600 flex items-center justify-center shadow-md group-hover:bg-blue-500 transition-colors">
|
||||
<Bot className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<span className="font-black text-2xl tracking-tight text-white flex items-center gap-1">
|
||||
İhale<span className="text-blue-400 font-extrabold">ist</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Search Bar */}
|
||||
<form onSubmit={handleSearchSubmit} className="flex-1 max-w-2xl flex items-center gap-2">
|
||||
<div className="relative flex-1">
|
||||
<input
|
||||
type="text"
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
placeholder="İhale, kurum veya İKN no ile arayın..."
|
||||
className="w-full bg-[#374151] text-white placeholder-slate-400 pl-4 pr-10 py-2 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 border border-slate-600 transition-all"
|
||||
/>
|
||||
{searchQuery && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setSearchQuery('')}
|
||||
className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-white text-xs"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
className="bg-slate-700 hover:bg-slate-600 text-white font-medium px-4 py-2 rounded-lg text-sm flex items-center gap-1.5 transition-colors border border-slate-600 shrink-0"
|
||||
>
|
||||
<Search className="w-4 h-4" />
|
||||
<span className="font-semibold text-xs tracking-wider">ARA</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setIsDetailedSearchOpen(true)}
|
||||
title="Detaylı İhale Arama"
|
||||
className="bg-blue-600 hover:bg-blue-500 text-white p-2 rounded-lg text-sm flex items-center justify-center transition-colors shadow-sm shrink-0"
|
||||
>
|
||||
<SlidersHorizontal className="w-4 h-4" />
|
||||
</button>
|
||||
</form>
|
||||
|
||||
{/* Right Action Icons */}
|
||||
<div className="flex items-center gap-3">
|
||||
|
||||
{/* Gemini 3.6 Flash PDF Spec Analyzer Button */}
|
||||
<button
|
||||
onClick={() => setIsAiSpecAnalyzerOpen(true)}
|
||||
className="bg-purple-600 hover:bg-purple-500 text-white font-extrabold px-3 py-1.5 rounded-lg text-xs flex items-center gap-1.5 shadow-xs transition-colors shrink-0"
|
||||
title="Teknik Şartname PDF'ini Gemini 3.6 Flash İle Analiz Edin"
|
||||
>
|
||||
<Sparkles className="w-4 h-4 text-amber-300" />
|
||||
<span className="hidden md:inline">Gemini 3.6 PDF Analizi</span>
|
||||
</button>
|
||||
|
||||
{/* Company Web Scanner Button */}
|
||||
<button
|
||||
onClick={() => setIsCompanyScannerOpen(true)}
|
||||
className="bg-blue-600 hover:bg-blue-500 text-white font-bold px-3 py-1.5 rounded-lg text-xs flex items-center gap-1.5 shadow-xs transition-colors shrink-0"
|
||||
title="Web Sitenizi Tarayın & AI İhale Profiline İşleyin"
|
||||
>
|
||||
<Globe className="w-4 h-4 text-blue-200" />
|
||||
<span className="hidden sm:inline">Web Siteni Tara (AI)</span>
|
||||
</button>
|
||||
|
||||
{/* Trial Badge */}
|
||||
<div className="bg-amber-400 text-slate-900 font-bold px-3 py-1.5 rounded-lg text-xs flex items-center gap-1.5 shadow-sm">
|
||||
<Gift className="w-4 h-4 text-slate-900" />
|
||||
<span>{userProfile.trialDaysLeft} gün</span>
|
||||
</div>
|
||||
|
||||
{/* Notifications Dropdown */}
|
||||
<div className="relative">
|
||||
<button
|
||||
onClick={() => setShowNotifications(!showNotifications)}
|
||||
className="relative p-2 text-slate-300 hover:text-white hover:bg-slate-700 rounded-lg transition-colors"
|
||||
>
|
||||
<Bell className="w-5 h-5" />
|
||||
{notifications.some(n => !n.read) && (
|
||||
<span className="absolute top-1 right-1 w-2.5 h-2.5 bg-blue-500 rounded-full ring-2 ring-[#1f2937]" />
|
||||
)}
|
||||
</button>
|
||||
|
||||
{showNotifications && (
|
||||
<div className="absolute right-0 mt-2 w-80 bg-white text-slate-800 rounded-xl shadow-xl border border-slate-200 py-2 z-50 animate-fade-in">
|
||||
<div className="px-4 py-2 border-b border-slate-100 flex items-center justify-between">
|
||||
<h4 className="font-bold text-sm">Bildirimler</h4>
|
||||
<span className="text-xs text-blue-600 cursor-pointer hover:underline">Tümünü Okundu İşaretle</span>
|
||||
</div>
|
||||
<div className="max-h-64 overflow-y-auto divide-y divide-slate-100">
|
||||
{notifications.map(n => (
|
||||
<div key={n.id} className="p-3 hover:bg-slate-50 transition-colors cursor-pointer text-xs">
|
||||
<div className="font-semibold text-slate-900 flex justify-between">
|
||||
<span>{n.title}</span>
|
||||
<span className="text-slate-400 font-normal text-[10px]">{n.time}</span>
|
||||
</div>
|
||||
<p className="text-slate-600 mt-1 leading-relaxed">{n.text}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* User Profile */}
|
||||
<div className="relative">
|
||||
<button
|
||||
onClick={() => setShowUserMenu(!showUserMenu)}
|
||||
className="bg-slate-700 hover:bg-slate-600 text-white px-3 py-1.5 rounded-lg text-xs font-semibold flex items-center gap-2 transition-colors border border-slate-600"
|
||||
>
|
||||
<div className="w-6 h-6 rounded-full bg-blue-600 flex items-center justify-center text-white font-bold text-xs">
|
||||
{userProfile.username.charAt(0).toUpperCase()}
|
||||
</div>
|
||||
<span>{userProfile.username}</span>
|
||||
<ChevronDown className="w-3.5 h-3.5 text-slate-400" />
|
||||
</button>
|
||||
|
||||
{showUserMenu && (
|
||||
<div className="absolute right-0 mt-2 w-60 bg-white text-slate-800 rounded-xl shadow-xl border border-slate-200 py-2 z-50 animate-fade-in">
|
||||
<div className="px-4 py-2 border-b border-slate-100">
|
||||
<p className="font-bold text-sm text-slate-900">{userProfile.name}</p>
|
||||
<p className="text-xs text-slate-500 truncate">{userProfile.company}</p>
|
||||
</div>
|
||||
<div className="py-1 text-xs">
|
||||
<a href="#profile" className="px-4 py-2 hover:bg-slate-50 flex items-center gap-2 text-slate-700">
|
||||
<User className="w-4 h-4 text-slate-400" /> Firma Bilgileri & Üyeler
|
||||
</a>
|
||||
<a href="#trial" className="px-4 py-2 hover:bg-slate-50 flex items-center gap-2 text-slate-700">
|
||||
<Gift className="w-4 h-4 text-amber-500" /> Abonelik Planları (7 Gün Kalan)
|
||||
</a>
|
||||
<a href="#settings" className="px-4 py-2 hover:bg-slate-50 flex items-center gap-2 text-slate-700">
|
||||
<CheckCircle className="w-4 h-4 text-slate-400" /> Bildirim Tercihleri
|
||||
</a>
|
||||
</div>
|
||||
<div className="border-t border-slate-100 pt-1 text-xs">
|
||||
<button className="w-full text-left px-4 py-2 text-red-600 hover:bg-red-50 flex items-center gap-2">
|
||||
<LogOut className="w-4 h-4" /> Çıkış Yap
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user