feat: abonelik iptal ekranı (ayrılma nedeni + açıklama) & gerçek abonelik rozeti (yönetici erişimi aboneliği gizlemesin)

src/components/CancelSubscriptionModal.jsx

@@ -0,0 +1,119 @@
+import React, { useState } from 'react';
+import { X, AlertTriangle, Loader2 } from 'lucide-react';
+import { cancelSubscription } from '../services/account';
+
+/**
+ * Abonelik iptali — nedeni sorar, dönem sonunda iptal eder.
+ * Erişim ödenen sürenin sonuna kadar sürer; anında kesilmez.
+ */
+export const CancelSubscriptionModal = ({ planAdi, nedenler = [], onKapat, onIptalEdildi }) => {
+  const [neden, setNeden] = useState('');
+  const [aciklama, setAciklama] = useState('');
+  const [busy, setBusy] = useState(false);
+  const [hata, setHata] = useState(null);
+
+  // "Diğer" seçildiyse açıklama zorunlu — yoksa geri bildirim işe yaramaz.
+  const digerSecili = neden === 'other';
+  const gonderilebilir = Boolean(neden) && (!digerSecili || aciklama.trim().length >= 3);
+
+  const gonder = async () => {
+    setBusy(true);
+    setHata(null);
+    try {
+      const out = await cancelSubscription(neden, aciklama.trim());
+      onIptalEdildi(out);
+    } catch (e) {
+      setHata(e.message || 'İptal edilemedi');
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 bg-slate-900/60 backdrop-blur-xs flex items-center justify-center p-4">
+      <div className="bg-white rounded-2xl shadow-2xl w-full max-w-lg max-h-[90vh] overflow-y-auto">
+        <div className="flex items-start justify-between gap-3 p-5 border-b border-slate-100">
+          <div className="flex gap-3">
+            <div className="w-10 h-10 rounded-xl bg-amber-100 flex items-center justify-center shrink-0">
+              <AlertTriangle className="w-5 h-5 text-amber-700" />
+            </div>
+            <div>
+              <h3 className="font-black text-slate-900">Aboneliği iptal et</h3>
+              <p className="text-xs text-slate-500 mt-0.5">
+                {planAdi} planınız <strong>dönem sonunda</strong> sona erer. Ödediğiniz sürenin sonuna
+                kadar tüm özellikler açık kalır, yenileme yapılmaz.
+              </p>
+            </div>
+          </div>
+          <button onClick={onKapat} className="text-slate-400 hover:text-slate-700 shrink-0" aria-label="Kapat">
+            <X className="w-5 h-5" />
+          </button>
+        </div>
+
+        <div className="p-5 space-y-4">
+          <div>
+            <p className="text-xs font-bold text-slate-700 mb-2">Ayrılma nedeniniz nedir? <span className="text-red-500">*</span></p>
+            <div className="space-y-1.5">
+              {nedenler.map((n) => (
+                <label
+                  key={n.id}
+                  className={`flex items-center gap-2.5 px-3 py-2 rounded-lg border cursor-pointer text-xs transition-colors ${
+                    neden === n.id
+                      ? 'border-blue-500 bg-blue-50 text-blue-900 font-semibold'
+                      : 'border-slate-200 hover:bg-slate-50 text-slate-700'
+                  }`}
+                >
+                  <input
+                    type="radio"
+                    name="iptal-neden"
+                    value={n.id}
+                    checked={neden === n.id}
+                    onChange={() => setNeden(n.id)}
+                    className="accent-blue-600"
+                  />
+                  <span>{n.label}</span>
+                </label>
+              ))}
+            </div>
+          </div>
+
+          <div>
+            <label className="text-xs font-bold text-slate-700 block mb-1.5">
+              Biraz daha anlatır mısınız? {digerSecili ? <span className="text-red-500">*</span> : <span className="font-normal text-slate-400">(isteğe bağlı)</span>}
+            </label>
+            <textarea
+              rows={3}
+              value={aciklama}
+              maxLength={500}
+              onChange={(e) => setAciklama(e.target.value)}
+              placeholder="Neyi eksik bulduğunuzu yazarsanız düzeltiriz."
+              className="w-full border border-slate-200 rounded-lg px-3 py-2 text-xs focus:outline-hidden focus:ring-2 focus:ring-blue-500/30 focus:border-blue-400"
+            />
+            <p className="text-[10px] text-slate-400 mt-1 text-right">{aciklama.length}/500</p>
+          </div>
+
+          {hata && (
+            <div className="bg-red-50 border border-red-200 rounded-lg p-3 text-xs text-red-800">{hata}</div>
+          )}
+        </div>
+
+        <div className="flex gap-2 p-5 border-t border-slate-100">
+          <button
+            onClick={onKapat}
+            className="flex-1 py-2.5 rounded-xl text-xs font-bold text-slate-700 bg-slate-100 hover:bg-slate-200 transition-colors"
+          >
+            Vazgeç, kalıyorum
+          </button>
+          <button
+            onClick={gonder}
+            disabled={!gonderilebilir || busy}
+            className="flex-1 py-2.5 rounded-xl text-xs font-extrabold text-white bg-red-600 hover:bg-red-500 transition-colors disabled:opacity-40 disabled:cursor-not-allowed flex items-center justify-center gap-2"
+          >
+            {busy && <Loader2 className="w-4 h-4 animate-spin" />}
+            {busy ? 'İptal ediliyor…' : 'Aboneliği iptal et'}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};

src/components/Header.jsx

@@ -21,9 +21,9 @@ export const Header = () => {
     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';
+  // Rozet SATIN ALINAN aboneliği gösterir. Yönetici hesapları her özelliğe
+  // erişir ama bu bir abonelik değildir; ikisini karıştırmamak için ayrı yazılır.
+  const planAdi = plan?.abonelikVar ? plan.abonelikAdi : (plan?.yonetici ? 'Yönetici' : 'Ücretsiz');
 
   const [showNotifications, setShowNotifications] = useState(false);
   const [showUserMenu, setShowUserMenu] = useState(false);

src/components/tools/Pricing.jsx

@@ -1,14 +1,17 @@
 import React, { useState, useEffect } from 'react';
 import { useApp } from '../../context/AppContext';
 import { getToken } from '../../services/auth';
-import { Check, Sparkles, CreditCard, Loader2, Info } from 'lucide-react';
+import { Check, Sparkles, CreditCard, Loader2, Info, ShieldCheck, XCircle } from 'lucide-react';
+import { CancelSubscriptionModal } from '../CancelSubscriptionModal';
 
 export const Pricing = () => {
-  const { authUser } = useApp();
+  const { authUser, plan, planYenile } = useApp();
   const [data, setData] = useState(null);
   const [busy, setBusy] = useState(null);
   const [error, setError] = useState(null);
   const [yillik, setYillik] = useState(true); // yıllık varsayılan (indirimli)
+  const [iptalAcik, setIptalAcik] = useState(false);
+  const [iptalSonuc, setIptalSonuc] = useState(null);
 
   useEffect(() => {
     fetch('/api/billing/plans')
@@ -83,6 +86,50 @@ export const Pricing = () => {
         </div>
       )}
 
+      {/* Mevcut abonelik — gerçek /api/me/plan verisi */}
+      {plan && (
+        <div className="bg-white border border-slate-200 rounded-2xl p-5 shadow-xs">
+          <div className="flex flex-wrap items-center justify-between gap-3">
+            <div className="flex items-center gap-3">
+              <div className="w-10 h-10 rounded-xl bg-emerald-50 border border-emerald-200 flex items-center justify-center">
+                <ShieldCheck className="w-5 h-5 text-emerald-600" />
+              </div>
+              <div>
+                <p className="text-xs text-slate-500">Mevcut aboneliğiniz</p>
+                <p className="font-black text-slate-900">
+                  {plan.abonelikVar ? plan.abonelikAdi : 'Ücretsiz'}
+                  {plan.yonetici && (
+                    <span className="ml-2 text-[10px] font-bold px-1.5 py-0.5 rounded-full bg-indigo-50 text-indigo-700 border border-indigo-200">
+                      yönetici erişimi: {plan.planAdi}
+                    </span>
+                  )}
+                </p>
+              </div>
+            </div>
+            {plan.iptalEdilebilir && (
+              <button
+                onClick={() => setIptalAcik(true)}
+                className="text-xs font-bold text-red-600 hover:text-red-700 hover:bg-red-50 border border-red-200 px-3 py-2 rounded-xl flex items-center gap-1.5 transition-colors"
+              >
+                <XCircle className="w-4 h-4" /> Aboneliği iptal et
+              </button>
+            )}
+          </div>
+          {plan.yonetici && (
+            <p className="text-[11px] text-slate-400 mt-2 leading-relaxed">
+              Yönetici hesapları tüm özelliklere erişir; bu, satın aldığınız aboneliğin yerine geçmez.
+            </p>
+          )}
+          {iptalSonuc && (
+            <div className="mt-3 bg-amber-50 border border-amber-200 rounded-xl p-3 text-xs text-amber-900">
+              Aboneliğiniz iptal edildi. Erişiminiz{' '}
+              <strong>{iptalSonuc.bitis ? new Date(iptalSonuc.bitis).toLocaleDateString('tr-TR') : 'dönem sonuna'}</strong>{' '}
+              kadar açık kalacak, sonrasında yenileme yapılmayacak.
+            </div>
+          )}
+        </div>
+      )}
+
       <div className="grid grid-cols-1 md:grid-cols-3 gap-5">
         {plans.map((p) => (
           <div
@@ -152,6 +199,15 @@ export const Pricing = () => {
         ))}
       </div>
 
+      {iptalAcik && (
+        <CancelSubscriptionModal
+          planAdi={plan?.abonelikAdi || 'Mevcut'}
+          nedenler={data?.iptalNedenleri || []}
+          onKapat={() => setIptalAcik(false)}
+          onIptalEdildi={(out) => { setIptalAcik(false); setIptalSonuc(out); planYenile(); }}
+        />
+      )}
+
       <p className="text-[11px] text-slate-400 text-center leading-relaxed max-w-2xl mx-auto">
         Ödemeler Stripe üzerinden güvenli şekilde alınır; kart bilgileriniz İhaleist sunucularında saklanmaz.
         Aboneliğinizi istediğiniz zaman iptal edebilirsiniz.

src/services/account.js

@@ -74,3 +74,7 @@ export function formatBayt(b) {
   if (b < 1024 * 1024 * 1024) return `${(b / 1024 / 1024).toFixed(1)} MB`;
   return `${(b / 1024 / 1024 / 1024).toFixed(2)} GB`;
 }
+
+// --- Abonelik iptali ---
+export const cancelSubscription = (neden, aciklama) =>
+  iste('/api/billing/cancel', { method: 'POST', body: JSON.stringify({ neden, aciklama }) });