Feature: Upgrade-Anfragen-System — User-Flow + Admin-Panel (SW by-v920)

- DB: upgrade_requests-Tabelle (user_id, tier, message, fulfilled_at)
- POST /api/upgrade-request: Anfrage speichern + Admin-Benachrichtigungsmail
- GET/POST /api/admin/upgrade-requests[/{id}/fulfill]: Admin-Endpunkte
  — fulfill setzt subscription_tier + sendet Bestätigungsmail an User
- action-items: upgrades_pending zählt offene Anfragen → Badge im Admin
- Admin-Tab "Upgrades": Tabelle offener/erledigter Anfragen, Freischalten-Button
  mit Confirm-Modal, automatischer Tier-Setzung und Bestätigungsmail
- Settings: Upgrade-Modal sendet echte API-Anfrage statt nur mailto
  — doppelte Anfrage wird erkannt (already:true → Toast statt Fehler)
- api.js: API.auth.upgradeRequest(tier, message) hinzugefügt
- SW by-v920, APP_VER 920

backend/static/js/api.js

@@ -124,6 +124,9 @@ const API = (() => {
       return get('/auth/me');
     },
     referral: () => get('/auth/referral'),
+    upgradeRequest(tier, message) {
+      return post('/auth/upgrade-request', { tier, message });
+    },
   };
 
   // ----------------------------------------------------------

backend/static/js/app.js

@@ -3,7 +3,7 @@
    Router, State-Management, Navigation, Initialisierung.
    ============================================================ */
 
-const APP_VER     = '919'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
+const APP_VER     = '920'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
 const APP_VERSION = '1.5.1'; // ← semantische Version, wird bei make release gesetzt
 const IS_STAGING  = location.hostname === 'staging.banyaro.app';
 // Cache-Bust-Parameter nach Update-Reload sofort entfernen

backend/static/js/pages/admin.js

@@ -26,6 +26,7 @@ window.Page_admin = (() => {
     { id: 'hilfe',       label: 'Hilfe/FAQ',           icon: 'question'          },
     { id: 'uebungen_admin', label: 'Übungen',          icon: 'barbell'           },
     { id: 'referrals',      label: 'Referrals',         icon: 'share-network'     },
+    { id: 'upgrades',       label: 'Upgrades',           icon: 'crown-simple'       },
   ];
 
   // ------------------------------------------------------------------
@@ -90,6 +91,7 @@ window.Page_admin = (() => {
     try { d = await API.get('/admin/action-items'); } catch { return; }
 
     const items = [
+      { key: 'upgrades_pending',   label: 'Upgrade-Anfragen', tab: 'upgrades',    icon: 'crown-simple'    },
       { key: 'jobs_pending',      label: 'Bewerbungen',      tab: 'bewerbungen', icon: 'user-plus'       },
       { key: 'breeder_pending',   label: 'Züchter-Anträge',  tab: 'zuchter',     icon: 'certificate'     },
       { key: 'reports_open',      label: 'Meldungen',        tab: 'moderation',  icon: 'warning'         },
@@ -163,6 +165,7 @@ window.Page_admin = (() => {
         case 'hilfe':           await _renderHilfe(el);           break;
         case 'uebungen_admin': await _renderUebungenAdmin(el); break;
         case 'referrals':      await _renderReferrals(el);      break;
+        case 'upgrades':       await _renderUpgrades(el);       break;
       }
     } catch (e) {
       el.innerHTML = _emptyState('warning', 'Fehler', e.message || 'Unbekannter Fehler.');
@@ -3419,6 +3422,104 @@ window.Page_admin = (() => {
       </div>`;
   }
 
+  // ------------------------------------------------------------------
+  // TAB: UPGRADES
+  // ------------------------------------------------------------------
+  async function _renderUpgrades(el) {
+    const rows = await API.get('/admin/upgrade-requests');
+
+    const tierBadge = t => {
+      const cfg = { pro: ['Pro', '#16a34a'], breeder: ['Züchter', '#C4843A'] };
+      const [label, color] = cfg[t] || [t, '#888'];
+      return `<span style="display:inline-block;padding:1px 8px;border-radius:999px;
+                           font-size:11px;font-weight:700;background:${color};color:#fff">${label}</span>`;
+    };
+
+    const pending  = rows.filter(r => !r.fulfilled_at);
+    const done     = rows.filter(r =>  r.fulfilled_at);
+
+    const _row = (r, showBtn) => `
+      <tr>
+        <td style="padding:var(--space-2) var(--space-3)">${_esc(r.name)}<br>
+          <span style="font-size:var(--text-xs);color:var(--c-text-muted)">${_esc(r.email)}</span></td>
+        <td style="padding:var(--space-2) var(--space-3)">${tierBadge(r.tier)}</td>
+        <td style="padding:var(--space-2) var(--space-3);font-size:var(--text-xs);color:var(--c-text-muted)">
+          ${r.message ? _esc(r.message) : '—'}</td>
+        <td style="padding:var(--space-2) var(--space-3);font-size:var(--text-xs);color:var(--c-text-muted)">
+          ${r.created_at?.slice(0,10) || ''}</td>
+        <td style="padding:var(--space-2) var(--space-3)">
+          ${showBtn
+            ? `<button class="btn btn-sm adm-fulfill-btn" data-id="${r.id}" data-name="${_esc(r.name)}" data-tier="${r.tier}"
+                       style="background:#16a34a;color:#fff;border:none;padding:4px 12px;
+                              border-radius:var(--radius-md);cursor:pointer;font-size:var(--text-xs);font-weight:600">
+                 Freischalten
+               </button>`
+            : `<span style="font-size:var(--text-xs);color:var(--c-success)">✓ ${r.fulfilled_at?.slice(0,10)}</span>`}
+        </td>
+      </tr>`;
+
+    const thead = `<thead><tr>
+      ${['Nutzer','Tarif','Nachricht','Datum','Aktion'].map(h =>
+        `<th style="padding:var(--space-2) var(--space-3);text-align:left;font-size:var(--text-xs);
+                    color:var(--c-text-muted);font-weight:600;border-bottom:1px solid var(--c-border)">${h}</th>`
+      ).join('')}</tr></thead>`;
+
+    el.innerHTML = `
+      <div class="card adm-table-card" style="margin-bottom:var(--space-4)">
+        <div class="by-card-section-header">Offene Anfragen (${pending.length})</div>
+        <div class="adm-table-scroll">
+          <table class="adm-table" style="width:100%;border-collapse:collapse">
+            ${thead}
+            <tbody>
+              ${pending.length
+                ? pending.map(r => _row(r, true)).join('')
+                : `<tr><td colspan="5" style="padding:var(--space-4);text-align:center;color:var(--c-text-muted)">
+                     Keine offenen Anfragen
+                   </td></tr>`}
+            </tbody>
+          </table>
+        </div>
+      </div>
+      ${done.length ? `
+      <div class="card adm-table-card">
+        <div class="by-card-section-header">Erledigt (${done.length})</div>
+        <div class="adm-table-scroll">
+          <table class="adm-table" style="width:100%;border-collapse:collapse">
+            ${thead}
+            <tbody>${done.map(r => _row(r, false)).join('')}</tbody>
+          </table>
+        </div>
+      </div>` : ''}`;
+
+    el.querySelectorAll('.adm-fulfill-btn').forEach(btn => {
+      btn.addEventListener('click', async () => {
+        const { id, name, tier } = btn.dataset;
+        const tierLabel = { pro: 'Pro', breeder: 'Züchter' }[tier] || tier;
+        const ok = await UI.modal.confirm({
+          title: `${name} auf ${tierLabel} freischalten?`,
+          body:  `<p style="font-size:var(--text-sm)">
+                    Der Account wird auf <strong>${tierLabel}</strong> gesetzt und
+                    eine Bestätigungsmail gesendet.
+                  </p>`,
+          confirmLabel: 'Freischalten',
+          danger: false,
+        });
+        if (!ok) return;
+        btn.disabled = true;
+        btn.textContent = '…';
+        try {
+          const res = await API.post(`/admin/upgrade-requests/${id}/fulfill`);
+          UI.toast.success(`${res.user} wurde auf ${tierLabel} freigeschaltet.`);
+          _renderTab();
+        } catch (e) {
+          UI.toast.error(e.message);
+          btn.disabled = false;
+          btn.textContent = 'Freischalten';
+        }
+      });
+    });
+  }
+
   return { init, refresh, onDogChange };
 
 })();

backend/static/js/pages/settings.js

@@ -143,6 +143,7 @@ window.Page_settings = (() => {
     const isPro = tier === 'pro';
     const label = isPro ? 'Ban Yaro Pro' : 'Züchter';
     const price = isPro ? '29 €/Jahr' : '49 €/Jahr';
+    const color = isPro ? '#16a34a' : '#C4843A';
     const features = isPro
       ? ['Mehrere Hunde verwalten', 'Ernährungsbereich mit KI-Berater', 'Erweiterte Karten-Layer', 'Alle künftigen Pro-Features']
       : ['Vollständige Züchter-Plattform', 'Warteliste, Läufigkeit & Trächtigkeit', 'Wurfverwaltung, Stammbaum, IK-Rechner', 'KI-Züchter-Assistent & Datenexport'];
@@ -151,18 +152,12 @@ window.Page_settings = (() => {
       `<li style="padding:var(--space-1) 0;font-size:var(--text-sm)">✓ ${f}</li>`
     ).join('');
 
-    const subject = encodeURIComponent(`Upgrade auf ${label} — Ban Yaro`);
-    const body    = encodeURIComponent(
-      `Hallo,\n\nich möchte meinen Account auf ${label} upgraden.\n\nMein Account: ${_appState.user?.email || ''}\n\nBitte schickt mir die Zahlungsinformationen.\n\nViele Grüße`
-    );
-    const mailHref = `mailto:hallo@banyaro.app?subject=${subject}&body=${body}`;
-
     UI.modal.open({
       title: `${label} freischalten`,
       body: `
         <div style="padding:var(--space-2) 0">
           <div style="display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-4)">
-            <div style="font-size:2rem;font-weight:800;color:var(--c-primary)">${price}</div>
+            <div style="font-size:2rem;font-weight:800;color:${color}">${price}</div>
             <div style="font-size:var(--text-xs);color:var(--c-text-secondary);line-height:1.5">
               Einmaliger Jahresbeitrag<br>Kündigung jederzeit möglich
             </div>
@@ -173,9 +168,8 @@ window.Page_settings = (() => {
           <div style="padding:var(--space-3);border-radius:var(--radius-md);
                       background:var(--c-surface-raised,rgba(0,0,0,.04));
                       font-size:var(--text-xs);color:var(--c-text-secondary);line-height:1.6">
-            Aktuell läuft die Freischaltung noch manuell. Schreib uns kurz eine E-Mail —
-            wir schalten deinen Account innerhalb von 24 Stunden frei und schicken
-            dir die Bankverbindung.
+            Wir schalten deinen Account manuell frei — innerhalb von 24 Stunden.
+            Wir melden uns mit den Zahlungsdetails per E-Mail.
           </div>
         </div>`,
       footer: `
@@ -185,14 +179,32 @@ window.Page_settings = (() => {
                        color:var(--c-text);font-size:var(--text-sm);cursor:pointer">
           Abbrechen
         </button>
-        <a href="${mailHref}"
-           style="display:inline-flex;align-items:center;gap:var(--space-2);
-                  padding:var(--space-2) var(--space-4);
-                  border-radius:var(--radius-md);border:none;cursor:pointer;
-                  background:var(--c-primary);color:#fff;
-                  font-size:var(--text-sm);font-weight:600;text-decoration:none">
-          E-Mail senden
-        </a>`
+        <button id="upgrade-request-send-btn"
+                style="padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);
+                       border:none;cursor:pointer;background:${color};color:#fff;
+                       font-size:var(--text-sm);font-weight:600">
+          Anfrage senden
+        </button>`
+    });
+
+    document.getElementById('upgrade-request-send-btn')?.addEventListener('click', async () => {
+      const btn = document.getElementById('upgrade-request-send-btn');
+      if (!btn) return;
+      btn.disabled = true;
+      btn.textContent = 'Wird gesendet…';
+      try {
+        const res = await API.auth.upgradeRequest(tier);
+        UI.modal.close();
+        if (res.already) {
+          UI.toast.info('Deine Anfrage liegt bereits vor — wir melden uns bald.');
+        } else {
+          UI.toast.success('Anfrage gesendet! Wir melden uns per E-Mail.');
+        }
+      } catch (e) {
+        btn.disabled = false;
+        btn.textContent = 'Anfrage senden';
+        UI.toast.error(e.message || 'Fehler beim Senden.');
+      }
     });
   }