fix: Planlar sekmesi erişilemiyordu (gizli taşma) + isim menüsündeki ölü bağlantılar ve uydurma '7 gün kalan' etiketi

This commit is contained in:
2026-08-29 17:39:31 +03:00
parent 351884ac02
commit 5d502c8ae4
2 changed files with 88 additions and 10 deletions
+25 -7
View File
@@ -17,9 +17,14 @@ export const Header = () => {
refreshLiveEKAPData,
authUser,
isAdmin,
plan,
handleLogout
} = useApp();
// Plan rozeti gerçek /api/me/plan yanıtından gelir (uydurma "7 gün kalan" değil).
const PLAN_ADLARI = { ucretsiz: 'Ücretsiz', pro: 'Pro', kurumsal: 'Kurumsal' };
const planAdi = PLAN_ADLARI[plan?.plan] || 'Ücretsiz';
const [showNotifications, setShowNotifications] = useState(false);
const [showUserMenu, setShowUserMenu] = useState(false);
@@ -184,15 +189,28 @@ export const Header = () => {
<p className="text-xs text-slate-500 truncate">{authUser?.email || 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">
<button
onClick={() => { setShowUserMenu(false); setActiveTab('list'); }}
className="w-full text-left 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">
</button>
<button
onClick={() => { setShowUserMenu(false); setActiveTab('planlar'); }}
className="w-full text-left 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" />
<span>Abonelik & Planlar</span>
<span className="ml-auto text-[10px] font-bold px-1.5 py-0.5 rounded-full bg-slate-100 text-slate-600 border border-slate-200">
{planAdi}
</span>
</button>
<button
onClick={() => { setShowUserMenu(false); setActiveTab('pwa_settings'); }}
className="w-full text-left 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>
</button>
</div>
<div className="border-t border-slate-100 pt-1 text-xs">
<button
+63 -3
View File
@@ -1,6 +1,6 @@
import React from 'react';
import React, { useRef, useState, useEffect, useCallback } from 'react';
import { useApp } from '../context/AppContext';
import { Newspaper, Trophy, CalendarDays, FileCheck2, Calculator, TrendingUp, LayoutGrid, Kanban, Radar, FolderKanban, BarChart3, Webhook, Smartphone, Cpu, ShieldAlert, Globe2, Gavel, CreditCard } from 'lucide-react';
import { Newspaper, Trophy, CalendarDays, FileCheck2, Calculator, TrendingUp, LayoutGrid, Kanban, Radar, FolderKanban, BarChart3, Webhook, Smartphone, Cpu, ShieldAlert, Globe2, Gavel, CreditCard, ChevronLeft, ChevronRight } from 'lucide-react';
export const TopNavigation = () => {
const { activeTab, setActiveTab, isAdmin } = useApp();
@@ -27,15 +27,74 @@ export const TopNavigation = () => {
{ id: 'pwa_settings', label: 'Mobil PWA', icon: Smartphone }
];
// 18 sekme çoğu ekrana sığmıyor. Kaydırma çubuğu gizli olduğu için sondaki
// sekmeler (Planlar, API & Webhooks, Mobil PWA) görünmez kalıyordu; taşma
// olduğunda ok düğmeleri gösterilir ve etkin sekme görünür alana kaydırılır.
const seritRef = useRef(null);
const [tasma, setTasma] = useState({ sol: false, sag: false });
const tasmaHesapla = useCallback(() => {
const el = seritRef.current;
if (!el) return;
setTasma({
sol: el.scrollLeft > 4,
sag: el.scrollLeft + el.clientWidth < el.scrollWidth - 4,
});
}, []);
useEffect(() => {
tasmaHesapla();
const el = seritRef.current;
if (!el) return;
el.addEventListener('scroll', tasmaHesapla, { passive: true });
window.addEventListener('resize', tasmaHesapla);
return () => {
el.removeEventListener('scroll', tasmaHesapla);
window.removeEventListener('resize', tasmaHesapla);
};
}, [tasmaHesapla]);
// Etkin sekme (ör. menüden 'Planlar' seçilince) görünür alana getirilir.
useEffect(() => {
const el = seritRef.current?.querySelector(`[data-tab="${activeTab}"]`);
el?.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });
}, [activeTab]);
const kaydir = (yon) => {
seritRef.current?.scrollBy({ left: yon * 280, behavior: 'smooth' });
};
return (
<div className="bg-white border-b border-slate-200 shadow-xs sticky top-16 z-30">
<div className="max-w-[1600px] mx-auto px-4 flex items-center gap-1 overflow-x-auto py-1 scrollbar-none">
<div className="max-w-[1600px] mx-auto px-4 relative">
{tasma.sol && (
<button
type="button"
onClick={() => kaydir(-1)}
aria-label="Önceki sekmeler"
className="absolute left-1 top-1/2 -translate-y-1/2 z-10 w-7 h-7 rounded-full bg-white border border-slate-200 shadow-md flex items-center justify-center text-slate-600 hover:text-slate-900 hover:bg-slate-50"
>
<ChevronLeft className="w-4 h-4" />
</button>
)}
{tasma.sag && (
<button
type="button"
onClick={() => kaydir(1)}
aria-label="Sonraki sekmeler"
className="absolute right-1 top-1/2 -translate-y-1/2 z-10 w-7 h-7 rounded-full bg-white border border-slate-200 shadow-md flex items-center justify-center text-slate-600 hover:text-slate-900 hover:bg-slate-50"
>
<ChevronRight className="w-4 h-4" />
</button>
)}
<div ref={seritRef} className="flex items-center gap-1 overflow-x-auto py-1 scrollbar-none scroll-smooth">
{navItems.map(item => {
const Icon = item.icon;
const isActive = activeTab === item.id;
return (
<button
key={item.id}
data-tab={item.id}
onClick={() => setActiveTab(item.id)}
className={`flex items-center gap-2 px-3.5 py-2 rounded-lg text-xs font-semibold whitespace-nowrap transition-all select-none ${
isActive
@@ -55,5 +114,6 @@ export const TopNavigation = () => {
})}
</div>
</div>
</div>
);
};