From 5d502c8ae4086793de9f73aaebd16bff561b9578 Mon Sep 17 00:00:00 2001
From: ht <hikmet@texmart.com>
Date: Sat, 29 Aug 2026 17:39:31 +0300
Subject: [PATCH] =?UTF-8?q?fix:=20Planlar=20sekmesi=20eri=C5=9Filemiyordu?=
 =?UTF-8?q?=20(gizli=20ta=C5=9Fma)=20+=20isim=20men=C3=BCs=C3=BCndeki=20?=
 =?UTF-8?q?=C3=B6l=C3=BC=20ba=C4=9Flant=C4=B1lar=20ve=20uydurma=20'7=20g?=
 =?UTF-8?q?=C3=BCn=20kalan'=20etiketi?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Header.jsx        | 32 ++++++++++++----
 src/components/TopNavigation.jsx | 66 ++++++++++++++++++++++++++++++--
 2 files changed, 88 insertions(+), 10 deletions(-)

diff --git a/src/components/Header.jsx b/src/components/Header.jsx
index 6e81f74..c8e9595 100644
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
@@ -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
diff --git a/src/components/TopNavigation.jsx b/src/components/TopNavigation.jsx
index ae2a80b..f0e23e7 100644
--- a/src/components/TopNavigation.jsx
+++ b/src/components/TopNavigation.jsx
@@ -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
@@ -54,6 +113,7 @@ export const TopNavigation = () => {
           );
         })}
       </div>
+      </div>
     </div>
   );
 };