feat: enhance merchant panel with balance breakdown, payout history, and security improvements

components/merchant/ApiKeyVisibilityToggle.tsx

@@ -0,0 +1,44 @@
+
+'use client';
+
+import React, { useState } from 'react';
+import { Copy, Check, Eye, EyeOff } from 'lucide-react';
+
+interface ApiKeyVisibilityToggleProps {
+    apiKey: string;
+}
+
+export default function ApiKeyVisibilityToggle({ apiKey }: ApiKeyVisibilityToggleProps) {
+    const [isVisible, setIsVisible] = useState(false);
+    const [copied, setCopied] = useState(false);
+
+    const handleCopy = () => {
+        navigator.clipboard.writeText(apiKey);
+        setCopied(true);
+        setTimeout(() => setCopied(false), 2000);
+    };
+
+    return (
+        <div className="bg-gray-50 p-5 rounded-2xl border border-gray-100 flex items-center justify-between gap-4">
+            <code className="text-xs font-mono font-bold text-gray-600 truncate flex-1">
+                {isVisible ? apiKey : `${apiKey.substring(0, 8)}${'•'.repeat(24)}`}
+            </code>
+            <div className="flex items-center gap-3 shrink-0">
+                <button 
+                    onClick={() => setIsVisible(!isVisible)}
+                    className="p-2 hover:bg-white rounded-lg transition-colors text-gray-400 hover:text-blue-600"
+                    title={isVisible ? "Gizle" : "Göster"}
+                >
+                    {isVisible ? <EyeOff size={16} /> : <Eye size={16} />}
+                </button>
+                <button 
+                    onClick={handleCopy}
+                    className="p-2 hover:bg-white rounded-lg transition-colors text-gray-400 hover:text-blue-600"
+                    title="Kopyala"
+                >
+                    {copied ? <Check size={16} className="text-emerald-500" /> : <Copy size={16} />}
+                </button>
+            </div>
+        </div>
+    );
+}

components/merchant/MerchantSidebar.tsx

@@ -10,7 +10,8 @@ import {
     Terminal,
     Building2,
     ShieldCheck,
-    LogOut
+    LogOut,
+    Wallet
 } from 'lucide-react';
 
 export default function MerchantSidebar({ merchantId }: { merchantId: string }) {
@@ -34,6 +35,7 @@ export default function MerchantSidebar({ merchantId }: { merchantId: string })
     const navItems = [
         { label: 'Panel', icon: LayoutDashboard, href: `/merchant/${merchantId}` },
         { label: 'İşlemler', icon: CreditCard, href: `/merchant/${merchantId}/transactions` },
+        { label: 'Ödemeler', icon: Wallet, href: `/merchant/${merchantId}/payouts` },
         { label: 'Entegrasyon', icon: Terminal, href: `/merchant/${merchantId}/integration` },
     ];