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>
+    );
+}