feat: implement merchant dashboard, secure auth, and short_id system

- Added dedicated merchant dashboard with analytics and transactions
- Implemented API Key based authentication for merchants
- Introduced 8-character Short IDs for merchants to use in URLs
- Refactored checkout and payment intent APIs to support multi-gateway
- Enhanced Landing Page with Merchant Portal access and marketing copy
- Fixed Next.js 15 async params build issues
- Updated internal branding to P2CGateway
- Added AyrisTech credits to footer

components/admin/AddMerchantModal.tsx

@@ -0,0 +1,146 @@
+'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { X, Building2, Globe, CheckCircle2, Loader2 } from 'lucide-react';
+
+interface AddMerchantModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+}
+
+export default function AddMerchantModal({ isOpen, onClose }: AddMerchantModalProps) {
+    const router = useRouter();
+    const [isLoading, setIsLoading] = useState(false);
+    const [name, setName] = useState('');
+    const [webhookUrl, setWebhookUrl] = useState('');
+    const [success, setSuccess] = useState(false);
+
+    if (!isOpen) return null;
+
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault();
+        setIsLoading(true);
+
+        try {
+            const response = await fetch('/api/merchants', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ name, webhook_url: webhookUrl }),
+            });
+
+            if (!response.ok) {
+                const data = await response.json();
+                throw new Error(data.error || 'Firma eklenemedi.');
+            }
+
+            setSuccess(true);
+            setTimeout(() => {
+                onClose();
+                setSuccess(false);
+                setName('');
+                setWebhookUrl('');
+                router.refresh();
+            }, 2000);
+        } catch (err: any) {
+            console.error('Error adding merchant:', err);
+            alert(err.message || 'Firma eklenirken bir hata oluştu.');
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    return (
+        <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+            {/* Backdrop */}
+            <div
+                className="absolute inset-0 bg-gray-900/40 backdrop-blur-sm transition-opacity"
+                onClick={onClose}
+            ></div>
+
+            {/* Modal Content */}
+            <div className="relative bg-white w-full max-w-lg rounded-[40px] shadow-2xl border border-gray-100 overflow-hidden animate-in fade-in zoom-in-95 duration-200">
+                <div className="p-8">
+                    <div className="flex justify-between items-center mb-8">
+                        <div className="flex items-center gap-3">
+                            <div className="w-10 h-10 bg-blue-50 rounded-xl flex items-center justify-center text-blue-600">
+                                <Building2 size={20} />
+                            </div>
+                            <h2 className="text-xl font-black text-gray-900">Yeni Firma Ekle</h2>
+                        </div>
+                        <button
+                            onClick={onClose}
+                            className="p-2 hover:bg-gray-50 rounded-full transition-colors text-gray-400"
+                        >
+                            <X size={20} />
+                        </button>
+                    </div>
+
+                    {success ? (
+                        <div className="py-12 flex flex-col items-center text-center space-y-4">
+                            <div className="w-20 h-20 bg-emerald-50 rounded-full flex items-center justify-center text-emerald-500 animate-bounce">
+                                <CheckCircle2 size={40} />
+                            </div>
+                            <div>
+                                <h3 className="text-xl font-black text-gray-900">Firma Eklendi!</h3>
+                                <p className="text-gray-500 text-sm mt-1">Firma başarıyla kaydedildi, yönlendiriliyorsunuz...</p>
+                            </div>
+                        </div>
+                    ) : (
+                        <form onSubmit={handleSubmit} className="space-y-6">
+                            <div className="space-y-2">
+                                <label className="text-[10px] font-black text-gray-400 uppercase tracking-[0.2em] ml-1">Firma Adı</label>
+                                <div className="relative">
+                                    <input
+                                        required
+                                        type="text"
+                                        placeholder="Örn: X Firması Limited"
+                                        value={name}
+                                        onChange={(e) => setName(e.target.value)}
+                                        className="w-full px-6 py-4 bg-gray-50 border-none rounded-2xl text-sm font-bold focus:ring-2 focus:ring-blue-500 outline-none placeholder:text-gray-300"
+                                    />
+                                </div>
+                            </div>
+
+                            <div className="space-y-2">
+                                <label className="text-[10px] font-black text-gray-400 uppercase tracking-[0.2em] ml-1">Geri Dönüş (Webhook) URL</label>
+                                <div className="relative">
+                                    <Globe className="absolute left-6 top-1/2 -translate-y-1/2 text-gray-300" size={18} />
+                                    <input
+                                        type="url"
+                                        placeholder="https://firma.com/api/callback"
+                                        value={webhookUrl}
+                                        onChange={(e) => setWebhookUrl(e.target.value)}
+                                        className="w-full pl-14 pr-6 py-4 bg-gray-50 border-none rounded-2xl text-sm font-bold focus:ring-2 focus:ring-blue-500 outline-none placeholder:text-gray-300"
+                                    />
+                                </div>
+                                <p className="text-[10px] text-gray-400 font-medium ml-1">Ödeme başarılı olduğunda sistemin bu adrese veri göndermesini istiyorsanız girin.</p>
+                            </div>
+
+                            <div className="pt-4 flex gap-4">
+                                <button
+                                    type="button"
+                                    onClick={onClose}
+                                    className="flex-1 px-6 py-4 bg-gray-50 text-gray-500 rounded-2xl text-sm font-bold hover:bg-gray-100 transition"
+                                >
+                                    İptal
+                                </button>
+                                <button
+                                    type="submit"
+                                    disabled={isLoading}
+                                    className="flex-1 px-6 py-4 bg-blue-600 text-white rounded-2xl text-sm font-bold hover:bg-blue-700 transition shadow-lg shadow-blue-100 disabled:opacity-50 flex items-center justify-center gap-2"
+                                >
+                                    {isLoading ? (
+                                        <Loader2 className="animate-spin" size={18} />
+                                    ) : (
+                                        'Firmayı Oluştur'
+                                    )}
+                                </button>
+                            </div>
+                        </form>
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+}

components/admin/AnalyticsBarChart.tsx

@@ -0,0 +1,81 @@
+'use client';
+
+import React from 'react';
+import {
+    BarChart,
+    Bar,
+    XAxis,
+    YAxis,
+    CartesianGrid,
+    Tooltip,
+    ResponsiveContainer,
+    Cell
+} from 'recharts';
+
+interface AnalyticsBarChartProps {
+    data: {
+        label: string;
+        amount: number;
+    }[];
+}
+
+export default function AnalyticsBarChart({ data }: AnalyticsBarChartProps) {
+    return (
+        <div className="h-72 w-full">
+            <ResponsiveContainer width="100%" height="100%">
+                <BarChart
+                    data={data}
+                    margin={{
+                        top: 20,
+                        right: 0,
+                        left: 0,
+                        bottom: 0,
+                    }}
+                >
+                    <CartesianGrid
+                        vertical={false}
+                        strokeDasharray="3 3"
+                        stroke="#F1F5F9"
+                    />
+                    <XAxis
+                        dataKey="label"
+                        axisLine={false}
+                        tickLine={false}
+                        tick={{ fill: '#94A3B8', fontSize: 10, fontWeight: 700 }}
+                        dy={10}
+                    />
+                    <YAxis
+                        hide
+                    />
+                    <Tooltip
+                        content={<CustomTooltip />}
+                        cursor={{ fill: '#F8FAFC' }}
+                    />
+                    <Bar
+                        dataKey="amount"
+                        radius={[6, 6, 0, 0]}
+                        animationDuration={1500}
+                    >
+                        {data.map((entry, index) => (
+                            <Cell key={`cell-${index}`} fill="#2563EB" />
+                        ))}
+                    </Bar>
+                </BarChart>
+            </ResponsiveContainer>
+        </div>
+    );
+}
+
+function CustomTooltip({ active, payload, label }: any) {
+    if (active && payload && payload.length) {
+        return (
+            <div className="bg-gray-900 px-4 py-3 rounded-2xl shadow-2xl border border-white/10 backdrop-blur-md">
+                <p className="text-[10px] font-black text-blue-400 uppercase tracking-widest mb-1">{label}</p>
+                <p className="text-sm font-black text-white">
+                    {payload[0].value.toLocaleString('tr-TR', { minimumFractionDigits: 2 })} ₺
+                </p>
+            </div>
+        );
+    }
+    return null;
+}

components/admin/CustomerSearch.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { Search } from 'lucide-react';
+
+export default function CustomerSearch() {
+    const router = useRouter();
+    const searchParams = useSearchParams();
+    const [searchTerm, setSearchTerm] = useState(searchParams.get('q') || '');
+
+    useEffect(() => {
+        const currentQ = searchParams.get('q') || '';
+        if (searchTerm === currentQ) return;
+
+        const delayDebounceFn = setTimeout(() => {
+            const params = new URLSearchParams(searchParams.toString());
+            if (searchTerm) {
+                params.set('q', searchTerm);
+            } else {
+                params.delete('q');
+            }
+            router.push(`/admin/customers?${params.toString()}`);
+        }, 500);
+
+        return () => clearTimeout(delayDebounceFn);
+    }, [searchTerm, searchParams, router]);
+
+    return (
+        <div className="relative flex-1 max-w-md">
+            <Search className="absolute left-6 top-1/2 -translate-y-1/2 text-gray-300" size={20} />
+            <input
+                type="text"
+                placeholder="İsim veya telefon ile ara..."
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
+                className="w-full pl-16 pr-6 py-5 bg-gray-50 border-none rounded-2xl text-sm font-medium focus:ring-2 focus:ring-blue-500 outline-none placeholder:text-gray-300"
+            />
+        </div>
+    );
+}

components/admin/QueryRangeSelector.tsx

@@ -0,0 +1,29 @@
+'use client';
+
+import React from 'react';
+import { useRouter, useSearchParams } from 'next/navigation';
+
+export default function QueryRangeSelector() {
+    const router = useRouter();
+    const searchParams = useSearchParams();
+    const currentRange = searchParams.get('range') || '30';
+
+    const handleRangeChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+        const newRange = e.target.value;
+        const params = new URLSearchParams(searchParams.toString());
+        params.set('range', newRange);
+        router.push(`/admin?${params.toString()}`);
+    };
+
+    return (
+        <select
+            value={currentRange}
+            onChange={handleRangeChange}
+            className="bg-gray-50 border-none rounded-xl text-[10px] font-black uppercase tracking-widest px-4 py-2 outline-none cursor-pointer hover:bg-gray-100 transition-colors"
+        >
+            <option value="30">Son 30 Gün</option>
+            <option value="7">Son 7 Gün</option>
+            <option value="14">Son 14 Gün</option>
+        </select>
+    );
+}

components/admin/TransactionChart.tsx

@@ -0,0 +1,87 @@
+'use client';
+
+import React from 'react';
+import {
+    AreaChart,
+    Area,
+    XAxis,
+    YAxis,
+    CartesianGrid,
+    Tooltip,
+    ResponsiveContainer
+} from 'recharts';
+
+interface TransactionChartProps {
+    data: {
+        displayDate: string;
+        amount: number;
+    }[];
+}
+
+export default function TransactionChart({ data }: TransactionChartProps) {
+    return (
+        <div className="h-72 w-full mt-6">
+            <ResponsiveContainer width="100%" height="100%">
+                <AreaChart
+                    data={data}
+                    margin={{
+                        top: 10,
+                        right: 10,
+                        left: 0,
+                        bottom: 0,
+                    }}
+                >
+                    <defs>
+                        <linearGradient id="colorAmount" x1="0" y1="0" x2="0" y2="1">
+                            <stop offset="5%" stopColor="#2563EB" stopOpacity={0.1} />
+                            <stop offset="95%" stopColor="#2563EB" stopOpacity={0} />
+                        </linearGradient>
+                    </defs>
+                    <CartesianGrid
+                        vertical={false}
+                        strokeDasharray="3 3"
+                        stroke="#F1F5F9"
+                    />
+                    <XAxis
+                        dataKey="displayDate"
+                        axisLine={false}
+                        tickLine={false}
+                        tick={{ fill: '#94A3B8', fontSize: 10, fontWeight: 700 }}
+                        dy={10}
+                        interval={3} // Show fewer labels for clarity
+                    />
+                    <YAxis
+                        hide
+                    />
+                    <Tooltip
+                        content={<CustomTooltip />}
+                        cursor={{ stroke: '#2563EB', strokeWidth: 1, strokeDasharray: '4 4' }}
+                    />
+                    <Area
+                        type="monotone"
+                        dataKey="amount"
+                        stroke="#2563EB"
+                        strokeWidth={3}
+                        fillOpacity={1}
+                        fill="url(#colorAmount)"
+                        animationDuration={1500}
+                    />
+                </AreaChart>
+            </ResponsiveContainer>
+        </div>
+    );
+}
+
+function CustomTooltip({ active, payload, label }: any) {
+    if (active && payload && payload.length) {
+        return (
+            <div className="bg-gray-900 px-4 py-3 rounded-2xl shadow-2xl border border-white/10 backdrop-blur-md">
+                <p className="text-[10px] font-black text-blue-400 uppercase tracking-widest mb-1">{label}</p>
+                <p className="text-sm font-black text-white">
+                    {payload[0].value.toLocaleString('tr-TR', { minimumFractionDigits: 2 })} ₺
+                </p>
+            </div>
+        );
+    }
+    return null;
+}

components/admin/TransactionSearch.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { Search } from 'lucide-react';
+
+export default function TransactionSearch() {
+    const router = useRouter();
+    const searchParams = useSearchParams();
+    const [searchTerm, setSearchTerm] = useState(searchParams.get('q') || '');
+
+    useEffect(() => {
+        const currentQ = searchParams.get('q') || '';
+        if (searchTerm === currentQ) return;
+
+        const delayDebounceFn = setTimeout(() => {
+            const params = new URLSearchParams(searchParams.toString());
+            if (searchTerm) {
+                params.set('q', searchTerm);
+            } else {
+                params.delete('q');
+            }
+            router.push(`/admin/transactions?${params.toString()}`);
+        }, 500);
+
+        return () => clearTimeout(delayDebounceFn);
+    }, [searchTerm, searchParams, router]);
+
+    return (
+        <div className="relative flex-1 max-w-md">
+            <Search className="absolute left-4 top-1/2 -translate-y-1/2 text-gray-400" size={20} />
+            <input
+                type="text"
+                placeholder="İşlem ID veya referans ile ara..."
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
+                className="w-full pl-12 pr-6 py-3 bg-gray-50 border-none rounded-2xl text-sm font-medium focus:ring-2 focus:ring-blue-500 outline-none placeholder:text-gray-300"
+            />
+        </div>
+    );
+}

components/admin/TransactionStatusFilter.tsx

@@ -0,0 +1,40 @@
+'use client';
+
+import React from 'react';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { Filter } from 'lucide-react';
+
+export default function TransactionStatusFilter() {
+    const router = useRouter();
+    const searchParams = useSearchParams();
+    const currentStatus = searchParams.get('status') || '';
+
+    const handleStatusChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+        const value = e.target.value;
+        if (value === currentStatus) return;
+
+        const params = new URLSearchParams(searchParams.toString());
+        if (value) {
+            params.set('status', value);
+        } else {
+            params.delete('status');
+        }
+        router.push(`/admin/transactions?${params.toString()}`);
+    };
+
+    return (
+        <div className="flex items-center gap-2 px-4 py-3 bg-white border border-gray-100 rounded-2xl">
+            <Filter size={18} className="text-gray-400" />
+            <select
+                value={currentStatus}
+                onChange={handleStatusChange}
+                className="bg-transparent border-none text-sm font-bold text-gray-600 outline-none cursor-pointer"
+            >
+                <option value="">Tüm Durumlar</option>
+                <option value="succeeded">Başarılı</option>
+                <option value="pending">Bekliyor</option>
+                <option value="failed">Hatalı</option>
+            </select>
+        </div>
+    );
+}

components/merchant/MerchantSidebar.tsx

@@ -0,0 +1,91 @@
+'use client';
+
+import React from 'react';
+import Link from 'next/link';
+import { usePathname, useRouter } from 'next/navigation';
+import {
+    LayoutDashboard,
+    CreditCard,
+    ExternalLink,
+    Terminal,
+    Building2,
+    ShieldCheck,
+    LogOut
+} from 'lucide-react';
+
+export default function MerchantSidebar({ merchantId }: { merchantId: string }) {
+    const pathname = usePathname();
+    const router = useRouter();
+
+    const handleLogout = async () => {
+        try {
+            await fetch('/api/merchants/logout', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ identifier: merchantId })
+            });
+            router.push('/');
+            router.refresh();
+        } catch (err) {
+            console.error('Logout failed');
+        }
+    };
+
+    const navItems = [
+        { label: 'Panel', icon: LayoutDashboard, href: `/merchant/${merchantId}` },
+        { label: 'İşlemler', icon: CreditCard, href: `/merchant/${merchantId}/transactions` },
+        { label: 'Entegrasyon', icon: Terminal, href: `/merchant/${merchantId}/integration` },
+    ];
+
+    return (
+        <aside className="w-72 bg-white border-r border-gray-100 flex flex-col shrink-0">
+            <div className="p-8 flex items-center gap-4">
+                <div className="w-12 h-12 bg-blue-600 rounded-xl flex items-center justify-center text-white shadow-lg shadow-blue-100">
+                    <Building2 size={24} />
+                </div>
+                <div>
+                    <h1 className="font-black text-gray-900 leading-tight text-lg">P2C<span className="text-blue-600">Merchant</span></h1>
+                    <p className="text-[10px] text-gray-400 font-bold uppercase tracking-wider">Firma Yönetim Paneli</p>
+                </div>
+            </div>
+
+            <nav className="flex-1 px-4 mt-4 space-y-2">
+                <p className="px-6 text-[9px] font-black text-gray-300 uppercase tracking-[0.2em] mb-4">Menü</p>
+                {navItems.map((item) => {
+                    const isActive = pathname === item.href;
+                    return (
+                        <Link
+                            key={item.label}
+                            href={item.href}
+                            className={`flex items-center gap-4 px-6 py-4 rounded-2xl text-sm font-bold transition-all duration-200 group ${isActive
+                                ? 'bg-blue-600 text-white shadow-lg shadow-blue-100'
+                                : 'text-gray-400 hover:text-gray-900 hover:bg-gray-50'
+                                }`}
+                        >
+                            <item.icon size={20} className={isActive ? 'text-white' : 'text-gray-300 group-hover:text-gray-500'} />
+                            {item.label}
+                        </Link>
+                    );
+                })}
+            </nav>
+
+            <div className="p-4 space-y-2">
+                <div className="p-6 bg-blue-50/50 rounded-3xl space-y-4 border border-blue-100/50 mb-4">
+                    <div className="flex items-center gap-2 text-blue-600">
+                        <ShieldCheck size={14} />
+                        <span className="text-[9px] font-black uppercase tracking-widest">Güvenli Oturum</span>
+                    </div>
+                    <p className="text-[10px] text-gray-500 font-medium leading-relaxed">Verileriniz 256-bit şifreleme ile korunmaktadır.</p>
+                </div>
+
+                <button
+                    onClick={handleLogout}
+                    className="w-full flex items-center gap-4 px-6 py-4 rounded-2xl text-sm font-bold text-red-400 hover:bg-red-50 transition-colors group"
+                >
+                    <LogOut size={20} className="text-red-200 group-hover:text-red-400" />
+                    Çıkış Yap
+                </button>
+            </div>
+        </aside>
+    );
+}