"use client"; import React, { useState, useCallback } from 'react'; import { motion, AnimatePresence } from 'framer-motion'; import { Truck, CreditCard, FileText, MessageSquare, Mail, Plus, Trash2, Edit2, CheckCircle2, XCircle, RefreshCw, TestTube2, Eye, EyeOff, ChevronDown, ChevronUp, Shield, Copy, AlertTriangle, } from 'lucide-react'; // ─── Servis tipleri tanımı ────────────────────────────────────────────────── interface ServiceGroup { id: string; label: string; icon: React.ElementType; color: string; bgColor: string; borderColor: string; services: ServiceDef[]; } interface ServiceDef { type: string; label: string; description: string; fields: FieldDef[]; } interface FieldDef { key: string; label: string; placeholder: string; secret?: boolean; required?: boolean; extra?: boolean; } const SERVICE_GROUPS: ServiceGroup[] = [ { id: 'SHIPPING', label: 'Kargo Entegrasyonları', icon: Truck, color: 'from-blue-500 to-cyan-500', bgColor: 'bg-blue-500/10', borderColor: 'border-blue-500/20', services: [ { type: 'SHIPPING_ARAS', label: 'Aras Kargo', description: 'Aras Kargo otomatik sevkiyat ve takip', fields: [ { key: 'apiUrl', label: 'API URL', placeholder: 'https://customerws.araskargo.com.tr/arascargoservice.asmx', required: false }, { key: 'apiKey', label: 'Web Servis Kullanıcı Adı', placeholder: 'EsasWeb kullanıcı adınız', required: true }, { key: 'apiSecret', label: 'Web Servis Şifre', placeholder: 'EsasWeb şifreniz', secret: true, required: true }, { key: 'customerCode', label: 'Müşteri Kodu (SetOrder)', placeholder: 'Opsiyonel — farklıysa girin', required: false, extra: true }, ], }, { type: 'SHIPPING_YURTICI', label: 'Yurtiçi Kargo', description: 'Yurtiçi Kargo otomatik sevkiyat ve takip', fields: [ { key: 'apiUrl', label: 'API URL', placeholder: 'https://ws.yurticikargo.com/...', required: false }, { key: 'apiKey', label: 'Kullanıcı Adı', placeholder: 'Yurtiçi kullanıcı adınız', required: true }, { key: 'apiSecret', label: 'Şifre', placeholder: 'Yurtiçi şifreniz', secret: true, required: true }, ], }, { type: 'SHIPPING_MNG', label: 'MNG Kargo', description: 'MNG Kargo otomatik sevkiyat ve takip', fields: [ { key: 'apiUrl', label: 'API URL', placeholder: 'https://api.mngkargo.com.tr/...', required: false }, { key: 'apiKey', label: 'API Token', placeholder: 'MNG API token', required: true }, { key: 'apiSecret', label: 'Secret', placeholder: 'MNG secret', secret: true, required: false }, ], }, { type: 'SHIPPING_PTT', label: 'PTT Kargo', description: 'PTT Kargo otomatik sevkiyat ve takip', fields: [ { key: 'apiUrl', label: 'API URL', placeholder: 'https://pttapi.ptt.gov.tr/...', required: false }, { key: 'apiKey', label: 'Kullanıcı Adı', placeholder: 'PTT kullanıcı adınız', required: true }, { key: 'apiSecret', label: 'Şifre', placeholder: 'PTT şifreniz', secret: true, required: true }, ], }, ], }, { id: 'PAYMENT', label: 'Ödeme Entegrasyonları', icon: CreditCard, color: 'from-green-500 to-emerald-500', bgColor: 'bg-green-500/10', borderColor: 'border-green-500/20', services: [ { type: 'PAYMENT_IYZICO', label: 'iyzico', description: 'iyzico ödeme altyapısı — kredi kartı, taksit, 3D Secure', fields: [ { key: 'apiUrl', label: 'Base URL', placeholder: 'https://sandbox-api.iyzipay.com', required: true }, { key: 'apiKey', label: 'API Key', placeholder: 'iyzico API Key', required: true }, { key: 'apiSecret', label: 'Secret Key', placeholder: 'iyzico Secret Key', secret: true, required: true }, ], }, { type: 'PAYMENT_PAYTR', label: 'PayTR', description: 'PayTR ödeme altyapısı', fields: [ { key: 'apiKey', label: 'Merchant ID', placeholder: 'PayTR Merchant ID', required: true }, { key: 'apiSecret', label: 'Merchant Key', placeholder: 'PayTR Merchant Key', secret: true, required: true }, ], }, { type: 'PAYMENT_PARAM', label: 'Param', description: 'Param ödeme altyapısı', fields: [ { key: 'apiKey', label: 'Client Code', placeholder: 'Param Client Code', required: true }, { key: 'apiSecret', label: 'Client Secret', placeholder: 'Param Client Secret', secret: true, required: true }, ], }, ], }, { id: 'EINVOICE', label: 'E-Fatura Entegrasyonları', icon: FileText, color: 'from-purple-500 to-pink-500', bgColor: 'bg-purple-500/10', borderColor: 'border-purple-500/20', services: [ { type: 'EINVOICE_FORIBA', label: 'Foriba / Fitbul', description: 'Foriba e-fatura entegratörü (GİB onaylı)', fields: [ { key: 'apiUrl', label: 'API URL', placeholder: 'https://efatura.foriba.com/api/...', required: true }, { key: 'apiKey', label: 'API Key', placeholder: 'Foriba API Key', required: true }, { key: 'apiSecret', label: 'API Secret', placeholder: 'Foriba API Secret', secret: true, required: true }, ], }, { type: 'EINVOICE_LOGO', label: 'Logo E-Fatura', description: 'Logo e-fatura entegratörü (GİB onaylı)', fields: [ { key: 'apiUrl', label: 'API URL', placeholder: 'https://efatura.logo.com.tr/...', required: true }, { key: 'apiKey', label: 'API Key', placeholder: 'Logo API Key', required: true }, { key: 'apiSecret', label: 'API Secret', placeholder: 'Logo API Secret', secret: true, required: true }, ], }, { type: 'EINVOICE_PARASUT', label: 'Paraşüt', description: 'Paraşüt e-fatura entegrasyonu', fields: [ { key: 'apiKey', label: 'Client ID', placeholder: 'Paraşüt Client ID', required: true }, { key: 'apiSecret', label: 'Client Secret', placeholder: 'Paraşüt Client Secret', secret: true, required: true }, ], }, { type: 'EINVOICE_EFINANS', label: 'eFinans', description: 'eFinans e-fatura entegrasyonu', fields: [ { key: 'apiUrl', label: 'API URL', placeholder: 'https://efatura.efinans.com.tr/...', required: true }, { key: 'apiKey', label: 'Kullanıcı Adı', placeholder: 'eFinans kullanıcı adı', required: true }, { key: 'apiSecret', label: 'Şifre', placeholder: 'eFinans şifre', secret: true, required: true }, ], }, ], }, { id: 'SMS', label: 'SMS Entegrasyonları', icon: MessageSquare, color: 'from-orange-500 to-amber-500', bgColor: 'bg-orange-500/10', borderColor: 'border-orange-500/20', services: [ { type: 'SMS_NETGSM', label: 'NetGSM', description: 'NetGSM toplu SMS gönderimi', fields: [ { key: 'apiKey', label: 'Kullanıcı Kodu', placeholder: 'NetGSM kullanıcı kodunuz', required: true }, { key: 'apiSecret', label: 'Şifre', placeholder: 'NetGSM şifreniz', secret: true, required: true }, ], }, { type: 'SMS_ILETIMERKEZI', label: 'İletimerkezi', description: 'İletimerkezi toplu SMS gönderimi', fields: [ { key: 'apiKey', label: 'API Username', placeholder: 'İletimerkezi kullanıcı adı', required: true }, { key: 'apiSecret', label: 'API Pass', placeholder: 'İletimerkezi şifre', secret: true, required: true }, ], }, ], }, { id: 'EMAIL', label: 'E-posta Entegrasyonları', icon: Mail, color: 'from-red-500 to-rose-500', bgColor: 'bg-red-500/10', borderColor: 'border-red-500/20', services: [ { type: 'EMAIL_SMTP', label: 'SMTP', description: 'Özel SMTP sunucusu ile e-posta gönderimi', fields: [ { key: 'apiUrl', label: 'Sunucu:Port', placeholder: 'smtp.example.com:587', required: true }, { key: 'apiKey', label: 'Kullanıcı Adı', placeholder: 'SMTP kullanıcı adı', required: true }, { key: 'apiSecret', label: 'Şifre', placeholder: 'SMTP şifre', secret: true, required: true }, ], }, { type: 'EMAIL_SENDGRID', label: 'SendGrid', description: 'SendGrid e-posta servisi', fields: [ { key: 'apiKey', label: 'API Key', placeholder: 'SG.xxxxx', required: true }, ], }, ], }, ]; // ─── Tip tanımları ────────────────────────────────────────────────────────── interface SavedCredential { id: string; serviceType: string; label: string | null; apiUrl: string | null; apiKey: string | null; apiSecret: string | null; isActive: boolean; isDefault: boolean; lastTestedAt: string | null; lastTestOk: boolean | null; } // ─── Component: Form Modal ───────────────────────────────────────────────── function CredentialFormModal({ serviceType, fieldDefs, existing, onSave, onClose, }: { serviceType: string; fieldDefs: FieldDef[]; existing?: SavedCredential | null; onSave: (data: Record) => Promise; onClose: () => void; }) { const [form, setForm] = useState>({ label: existing?.label ?? '', }); const [showSecret, setShowSecret] = useState>({}); const [saving, setSaving] = useState(false); const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); setSaving(true); try { await onSave(form); } finally { setSaving(false); } }; return (

{existing ? 'Kimlik Bilgilerini Düzenle' : 'Yeni Bağlantı Ekle'}

{serviceType.replace('_', ' ')}

setForm((f) => ({ ...f, label: e.target.value }))} className="w-full bg-slate-800 border border-slate-600 rounded-lg px-3 py-2 text-white text-sm placeholder-slate-500 focus:border-indigo-500 focus:outline-none" />
{fieldDefs.map((field) => (
setForm((f) => ({ ...f, [field.key]: e.target.value }))} className="w-full bg-slate-800 border border-slate-600 rounded-lg px-3 py-2 pr-10 text-white text-sm placeholder-slate-500 focus:border-indigo-500 focus:outline-none" /> {field.secret && ( )}
))}
setForm((f) => ({ ...f, isDefault: e.target.checked ? 'true' : 'false' }))} className="rounded border-slate-600 text-indigo-500" />
); } // ─── Component: Credential Card ───────────────────────────────────────────── function CredentialCard({ cred, onDelete, onTest, onRotate, }: { cred: SavedCredential; onDelete: () => Promise; onTest: () => Promise; onRotate: () => void; }) { const [testing, setTesting] = useState(false); const [deleting, setDeleting] = useState(false); return (

{cred.label || cred.serviceType} {cred.isDefault && ( varsayılan )}

{cred.lastTestedAt && (

Son test: {new Date(cred.lastTestedAt).toLocaleString('tr-TR')} —{' '} {cred.lastTestOk ? ( Başarılı ) : ( Başarısız )}

)}
); } // ─── Component: Service Group Section ─────────────────────────────────────── function ServiceGroupSection({ group, credentials, onRefresh }: { group: ServiceGroup; credentials: SavedCredential[]; onRefresh: () => void; }) { const [expanded, setExpanded] = useState(false); const [openForm, setOpenForm] = useState(null); const [openRotateId, setOpenRotateId] = useState(null); const [rotateForm, setRotateForm] = useState({ apiKey: '', apiSecret: '', apiUrl: '' }); const Icon = group.icon; const connectedCount = credentials.filter( (c) => group.services.some((s) => s.type === c.serviceType), ).length; const handleSave = async (serviceType: string, data: Record) => { const API = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3001'; const serviceDef = group.services.find((s) => s.type === serviceType); const apiExtra: Record = {}; for (const field of serviceDef?.fields ?? []) { if (field.extra && data[field.key]?.trim()) { apiExtra[field.key] = data[field.key].trim(); } } await fetch(`${API}/tenant-credentials`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, credentials: 'include', body: JSON.stringify({ serviceType, label: data.label || undefined, apiUrl: data.apiUrl || undefined, apiKey: data.apiKey || undefined, apiSecret: data.apiSecret || undefined, apiExtra: Object.keys(apiExtra).length > 0 ? apiExtra : undefined, isDefault: data.isDefault === 'true', }), }); setOpenForm(null); onRefresh(); }; const handleDelete = async (id: string) => { const API = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3001'; await fetch(`${API}/tenant-credentials/${id}`, { method: 'DELETE', credentials: 'include', }); onRefresh(); }; const handleTest = async (id: string) => { const API = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3001'; await fetch(`${API}/tenant-credentials/${id}/test`, { method: 'POST', credentials: 'include', }); onRefresh(); }; const handleRotate = async (id: string) => { const API = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3001'; await fetch(`${API}/tenant-credentials/${id}/rotate`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, credentials: 'include', body: JSON.stringify({ apiKey: rotateForm.apiKey || undefined, apiSecret: rotateForm.apiSecret || undefined, apiUrl: rotateForm.apiUrl || undefined, }), }); setOpenRotateId(null); setRotateForm({ apiKey: '', apiSecret: '', apiUrl: '' }); onRefresh(); }; return (
{expanded && (
{group.services.map((svc) => { const svcCreds = credentials.filter((c) => c.serviceType === svc.type); return (

{svc.label}

{svc.description}

{svcCreds.length > 0 && (
{svcCreds.map((cred) => ( handleDelete(cred.id)} onTest={() => handleTest(cred.id)} onRotate={() => setOpenRotateId(cred.id)} /> ))}
)} {/* Rotasyon formu */} {openRotateId && svcCreds.some((c) => c.id === openRotateId) && (
Anahtar Rotasyonu

Yeni bilgileri girin. Doğrulanırsa eski bilgiler otomatik deaktive edilir.

setRotateForm((f) => ({ ...f, apiKey: e.target.value }))} className="w-full bg-slate-800 border border-slate-600 rounded-lg px-3 py-2 text-white text-sm placeholder-slate-500 focus:border-amber-500 focus:outline-none" /> setRotateForm((f) => ({ ...f, apiSecret: e.target.value }))} className="w-full bg-slate-800 border border-slate-600 rounded-lg px-3 py-2 text-white text-sm placeholder-slate-500 focus:border-amber-500 focus:outline-none" />
)}
); })}
{/* Form Modal */} {openForm && ( s.type === openForm)?.fields ?? []} onSave={(data) => handleSave(openForm, data)} onClose={() => setOpenForm(null)} /> )} )}
); } // ─── Component: Webhook Secret Panel ──────────────────────────────────────── function WebhookSecretPanel() { const [secret, setSecret] = useState(null); const [loading, setLoading] = useState(false); const [rotating, setRotating] = useState(false); const [copied, setCopied] = useState(false); const [visible, setVisible] = useState(false); const API = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3001'; const fetchSecret = async () => { setLoading(true); try { const res = await fetch(`${API}/tenant-credentials/webhook-secret`, { credentials: 'include' }); const data = await res.json(); setSecret(data.secret); setVisible(true); } finally { setLoading(false); } }; const rotateSecret = async () => { if (!confirm('Webhook secret yenilenirse mevcut entegrasyonlarınızın güncellenmesi gerekir. Devam edilsin mi?')) return; setRotating(true); try { const res = await fetch(`${API}/tenant-credentials/webhook-secret/rotate`, { method: 'POST', credentials: 'include', }); const data = await res.json(); setSecret(data.secret); setVisible(true); } finally { setRotating(false); } }; const copySecret = () => { if (secret) { navigator.clipboard.writeText(secret); setCopied(true); setTimeout(() => setCopied(false), 2000); } }; return (

Webhook İmzalama Secret

Gelen webhook isteklerini doğrulamak için kullanılır

{!secret ? ( ) : (
{visible ? secret : '•'.repeat(64)}
)}
); } // ─── Ana Sayfa ─────────────────────────────────────────────────────────────── export default function ServiceIntegrationsPage() { const [credentials, setCredentials] = useState([]); const [loading, setLoading] = useState(true); const API = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3001'; const fetchCredentials = useCallback(async () => { setLoading(true); try { const res = await fetch(`${API}/tenant-credentials`, { credentials: 'include' }); if (res.ok) { const data = await res.json(); setCredentials(data); } } catch { // Geliştirme ortamında sessizce devam et } finally { setLoading(false); } }, [API]); React.useEffect(() => { fetchCredentials(); }, [fetchCredentials]); return (
{/* Header */}

Servis Entegrasyonları

Kargo, ödeme, e-fatura ve diğer servislerin bağlantı bilgilerini yönetin. Tüm bilgiler şifreli olarak saklanır.

{/* Bilgi Kutusu */}

Girilen API anahtarları ve şifreler AES-256-GCM ile şifrelenerek veritabanında güvenli biçimde saklanır. Hiçbir bilgi sunucularda düz metin olarak tutulmaz.

{/* Servis Grupları */} {loading ? (
{[1, 2, 3, 4, 5].map((i) => (
))}
) : (
{SERVICE_GROUPS.map((group) => ( ))}
)} {/* Webhook Secret Paneli */}
); }