Suspendedremoval

src/components/admin/admin-panel.tsx

@@ -362,9 +362,28 @@ export function AdminPanel({ initialTenants }: AdminPanelProps) {
                         className="border-b border-border last:border-0 hover:bg-surface-2/50 transition-colors"
                       >
                         <td className="px-4 py-3">
-                          <div className="font-medium text-text-primary text-sm">
+                          <div className="font-medium text-text-primary text-sm flex items-center gap-2">
                             {req.companyName}
+                            {/* Bug 37a: distinguish resume requests in the
+                                queue. Provision and resume share status
+                                semantics but very different action
+                                consequences — a resume approval just
+                                un-suspends an existing tenant, no
+                                provisioning workflow runs. */}
+                            {req.requestType === "resume" && (
+                              <span
+                                className="px-1.5 py-0.5 text-[10px] font-semibold rounded uppercase tracking-wider bg-success/15 text-success"
+                                title={t("resumeRequestTooltip")}
+                              >
+                                {t("resumeRequestBadge")}
+                              </span>
+                            )}
                           </div>
+                          {req.requestType === "resume" && req.tenantName && (
+                            <div className="text-text-muted text-xs font-mono mt-0.5">
+                              {req.tenantName}
+                            </div>
+                          )}
                         </td>
                         <td className="px-4 py-3">
                           <div className="text-text-primary text-sm">

src/components/tenants/subscription-toggle.tsx

@@ -2,49 +2,73 @@
 
 import { useState } from "react";
 import { useRouter } from "next/navigation";
-import { useTranslations } from "next-intl";
+import { useTranslations, useFormatter } from "next-intl";
 import { Modal } from "@/components/ui/modal";
 
 interface Props {
   tenantName: string;
   /**
-   * Current suspend state — server-derived. The control toggles this
-   * via PATCH /api/tenants/[name]/suspend, then refreshes the route
-   * so server-component-side data (status badge, suspended notice)
-   * re-renders.
+   * Current suspend state — server-derived. Drives which control the
+   * customer sees: "Cancel subscription" while active, the
+   * resume-request flow while suspended.
    */
   suspended: boolean;
+  /**
+   * True when the viewer has platform admin role. Platform users are
+   * the only ones who can directly resume a tenant via PATCH; owners
+   * must go through the resume-request flow. We use this in the
+   * suspended branch to decide whether to render a direct "Resume"
+   * button or the "Request reactivation" workflow.
+   */
+  isPlatform: boolean;
+  /**
+   * If a resume request is currently pending for this tenant, its
+   * id and submitted-at. The component renders an info card with
+   * a cancel-request button instead of the request-reactivation
+   * button. Only meaningful when `suspended === true`.
+   */
+  pendingResumeRequest: { id: string; createdAt: string } | null;
 }
 
 /**
- * SubscriptionToggle — owner-side cancel/resume control (Bug 31).
+ * SubscriptionToggle — owner-side cancel/resume control.
  *
- * Renders a single button that toggles between "Cancel subscription"
- * (when active) and "Resume subscription" (when suspended). Cancellation
- * is gated behind a confirmation modal because it's destructive
- * looking from the user's POV — even though no data is lost, the
- * AI assistant becomes unavailable until they resume. Resume has no
- * modal; it's a strict subset of cancellation in terms of risk.
+ * Three render states:
+ *   1. Active: "Cancel subscription" button + confirmation modal
+ *      (mentions 60-day retention before permanent deletion).
+ *   2. Suspended, no pending resume request: "Request reactivation"
+ *      button + simple confirmation modal explaining admin review.
+ *   3. Suspended, pending resume request: status card "Reactivation
+ *      requested X days ago" + "Cancel request" button.
  *
- * The control intentionally lives at the bottom of the tenant detail
- * page rather than next to the status badge — putting it near the
- * top would invite mis-clicks. Customers who want to cancel scroll
- * past the running configuration, billing-relevant info, and assigned
- * users first; that's the right friction level.
+ * Platform admins viewing a suspended tenant get a fourth state in
+ * place of #2/#3: a direct "Resume now" button (no admin queue, no
+ * request flow). This is the admin escape hatch.
  *
- * Suspended tenants render a top-of-page banner separately (see the
- * detail page); this component focuses on the action itself.
+ * The control intentionally lives at the bottom of the tenant
+ * detail page rather than near the top — putting it next to the
+ * status badge would invite mis-clicks.
  */
-export function SubscriptionToggle({ tenantName, suspended }: Props) {
+export function SubscriptionToggle({
+  tenantName,
+  suspended,
+  isPlatform,
+  pendingResumeRequest,
+}: Props) {
   const t = useTranslations("tenantDetail");
   const tCommon = useTranslations("common");
+  const f = useFormatter();
   const router = useRouter();
 
-  const [confirmOpen, setConfirmOpen] = useState(false);
+  const [confirmCancelOpen, setConfirmCancelOpen] = useState(false);
+  const [confirmResumeOpen, setConfirmResumeOpen] = useState(false);
   const [submitting, setSubmitting] = useState(false);
   const [error, setError] = useState("");
 
-  const toggleSuspend = async (next: boolean) => {
+  // Customer-side cancel: PATCH suspend=true. Same path as before.
+  // The 60-day retention copy in the modal is the new bit (Bug 37b);
+  // mechanics are unchanged.
+  const cancel = async () => {
     setSubmitting(true);
     setError("");
     try {
@@ -53,18 +77,14 @@ export function SubscriptionToggle({ tenantName, suspended }: Props) {
         {
           method: "PATCH",
           headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({ suspend: next }),
+          body: JSON.stringify({ suspend: true }),
         }
       );
       if (!res.ok) {
         const data = await res.json().catch(() => ({}));
         throw new Error(data.error || t("subscriptionUpdateFailed"));
       }
-      setConfirmOpen(false);
-      // The status badge + suspended banner are server-rendered, so
-      // a route refresh is the simplest way to reflect the new state.
-      // Optimistic local toggle would diverge from the actual CR if
-      // the operator hasn't observed the patch yet.
+      setConfirmCancelOpen(false);
       router.refresh();
     } catch (e: any) {
       setError(e.message);
@@ -73,39 +93,217 @@ export function SubscriptionToggle({ tenantName, suspended }: Props) {
     }
   };
 
+  // Owner-side resume request: POST a 'resume' tenant_request that
+  // sits pending until admin acts. Different from cancel: no PATCH
+  // on the CR — that happens only when admin approves.
+  const requestResume = async () => {
+    setSubmitting(true);
+    setError("");
+    try {
+      const res = await fetch(
+        `/api/tenants/${encodeURIComponent(tenantName)}/resume-request`,
+        {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+        }
+      );
+      if (!res.ok) {
+        const data = await res.json().catch(() => ({}));
+        throw new Error(data.error || t("subscriptionUpdateFailed"));
+      }
+      setConfirmResumeOpen(false);
+      router.refresh();
+    } catch (e: any) {
+      setError(e.message);
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  // Customer cancels their own pending resume request.
+  const cancelResumeRequest = async () => {
+    if (!pendingResumeRequest) return;
+    setSubmitting(true);
+    setError("");
+    try {
+      const res = await fetch(
+        `/api/onboarding/${pendingResumeRequest.id}`,
+        { method: "DELETE" }
+      );
+      if (!res.ok) {
+        const data = await res.json().catch(() => ({}));
+        throw new Error(data.error || t("subscriptionUpdateFailed"));
+      }
+      router.refresh();
+    } catch (e: any) {
+      setError(e.message);
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  // Platform admin: direct resume, bypassing the request flow.
+  const adminResume = async () => {
+    setSubmitting(true);
+    setError("");
+    try {
+      const res = await fetch(
+        `/api/tenants/${encodeURIComponent(tenantName)}/suspend`,
+        {
+          method: "PATCH",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ suspend: false }),
+        }
+      );
+      if (!res.ok) {
+        const data = await res.json().catch(() => ({}));
+        throw new Error(data.error || t("subscriptionUpdateFailed"));
+      }
+      router.refresh();
+    } catch (e: any) {
+      setError(e.message);
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  // ─── Suspended branch ───────────────────────────────────────────────
+
   if (suspended) {
+    // Platform admin sees direct resume. Independent of pending
+    // resume — admin can always resume immediately.
+    if (isPlatform) {
+      return (
+        <div>
+          <button
+            type="button"
+            onClick={adminResume}
+            disabled={submitting}
+            className="text-sm font-medium px-4 py-2 rounded-lg border border-success/30 text-success hover:bg-success/10 transition-colors disabled:opacity-50"
+          >
+            {submitting
+              ? tCommon("loading")
+              : t("resumeSubscription")}
+          </button>
+          {pendingResumeRequest && (
+            <p className="text-xs text-text-muted mt-2">
+              {t("resumeRequestPendingNoteAdmin")}
+            </p>
+          )}
+          {error && <p className="text-xs text-red-400 mt-2">{error}</p>}
+        </div>
+      );
+    }
+
+    // Owner with pending resume request: render the request status
+    // card with cancel.
+    if (pendingResumeRequest) {
+      const submittedDate = new Date(pendingResumeRequest.createdAt);
+      return (
+        <div>
+          <div className="rounded-xl border border-amber-500/30 bg-amber-500/5 px-4 py-3">
+            <div className="text-sm font-medium text-amber-400 mb-1">
+              {t("resumeRequestPendingTitle")}
+            </div>
+            <div className="text-xs text-text-secondary">
+              {t.rich("resumeRequestPendingDescription", {
+                when: f.relativeTime(submittedDate),
+              })}
+            </div>
+            <button
+              type="button"
+              onClick={cancelResumeRequest}
+              disabled={submitting}
+              className="mt-3 text-xs px-3 py-1.5 rounded-lg border border-border text-text-secondary hover:text-text-primary transition-colors disabled:opacity-50"
+            >
+              {submitting
+                ? tCommon("loading")
+                : t("cancelResumeRequest")}
+            </button>
+          </div>
+          {error && <p className="text-xs text-red-400 mt-2">{error}</p>}
+        </div>
+      );
+    }
+
+    // Owner with no pending request: offer to create one.
     return (
       <div>
         <button
           type="button"
-          onClick={() => toggleSuspend(false)}
-          disabled={submitting}
-          className="text-sm font-medium px-4 py-2 rounded-lg border border-success/30 text-success hover:bg-success/10 transition-colors disabled:opacity-50"
+          onClick={() => setConfirmResumeOpen(true)}
+          className="text-sm font-medium px-4 py-2 rounded-lg border border-success/30 text-success hover:bg-success/10 transition-colors"
         >
-          {submitting ? tCommon("loading") : t("resumeSubscription")}
+          {t("requestReactivation")}
         </button>
-        {error && <p className="text-xs text-red-400 mt-2">{error}</p>}
+        {error && !confirmResumeOpen && (
+          <p className="text-xs text-red-400 mt-2">{error}</p>
+        )}
+
+        {confirmResumeOpen && (
+          <Modal
+            open={confirmResumeOpen}
+            onClose={() => setConfirmResumeOpen(false)}
+            ariaLabel={t("requestReactivationConfirmTitle")}
+          >
+            <h3 className="font-display text-lg font-semibold text-text-primary mb-2">
+              {t("requestReactivationConfirmTitle")}
+            </h3>
+            <p className="text-sm text-text-secondary mb-5">
+              {t("requestReactivationConfirmDescription")}
+            </p>
+
+            {error && (
+              <div className="text-xs text-red-400 bg-red-400/10 border border-red-400/20 rounded-lg px-3 py-2 mb-3">
+                {error}
+              </div>
+            )}
+
+            <div className="flex justify-end gap-2">
+              <button
+                type="button"
+                onClick={() => setConfirmResumeOpen(false)}
+                disabled={submitting}
+                className="text-sm px-4 py-2 rounded-lg border border-border text-text-secondary hover:text-text-primary transition-colors"
+              >
+                {tCommon("cancel")}
+              </button>
+              <button
+                type="button"
+                onClick={requestResume}
+                disabled={submitting}
+                className="text-sm px-4 py-2 rounded-lg bg-success text-white hover:bg-success/90 transition-colors disabled:opacity-50"
+              >
+                {submitting
+                  ? tCommon("loading")
+                  : t("requestReactivationConfirm")}
+              </button>
+            </div>
+          </Modal>
+        )}
       </div>
     );
   }
 
+  // ─── Active branch ──────────────────────────────────────────────────
+
   return (
     <div>
       <button
         type="button"
-        onClick={() => setConfirmOpen(true)}
+        onClick={() => setConfirmCancelOpen(true)}
         className="text-sm font-medium px-4 py-2 rounded-lg border border-border text-text-secondary hover:text-text-primary hover:border-text-secondary transition-colors"
       >
         {t("cancelSubscription")}
       </button>
-      {error && !confirmOpen && (
+      {error && !confirmCancelOpen && (
         <p className="text-xs text-red-400 mt-2">{error}</p>
       )}
 
-      {confirmOpen && (
+      {confirmCancelOpen && (
         <Modal
-          open={confirmOpen}
-          onClose={() => setConfirmOpen(false)}
+          open={confirmCancelOpen}
+          onClose={() => setConfirmCancelOpen(false)}
           ariaLabel={t("cancelConfirmTitle")}
         >
           <h3 className="font-display text-lg font-semibold text-text-primary mb-2">
@@ -114,11 +312,17 @@ export function SubscriptionToggle({ tenantName, suspended }: Props) {
           <p className="text-sm text-text-secondary mb-3">
             {t("cancelConfirmDescription")}
           </p>
-          <ul className="text-xs text-text-muted list-disc list-inside space-y-1 mb-5">
+          <ul className="text-xs text-text-muted list-disc list-inside space-y-1 mb-3">
             <li>{t("cancelConfirmBullet1")}</li>
             <li>{t("cancelConfirmBullet2")}</li>
             <li>{t("cancelConfirmBullet3")}</li>
           </ul>
+          {/* Bug 37b: 60-day retention warning. Distinct paragraph so it
+              reads as a separate, more serious commitment than the
+              regular bullets above. */}
+          <div className="text-xs text-amber-400 bg-amber-400/10 border border-amber-400/20 rounded-lg px-3 py-2 mb-5">
+            {t("cancelConfirmRetentionWarning")}
+          </div>
 
           {error && (
             <div className="text-xs text-red-400 bg-red-400/10 border border-red-400/20 rounded-lg px-3 py-2 mb-3">
@@ -129,7 +333,7 @@ export function SubscriptionToggle({ tenantName, suspended }: Props) {
           <div className="flex justify-end gap-2">
             <button
               type="button"
-              onClick={() => setConfirmOpen(false)}
+              onClick={() => setConfirmCancelOpen(false)}
               disabled={submitting}
               className="text-sm px-4 py-2 rounded-lg border border-border text-text-secondary hover:text-text-primary transition-colors"
             >
@@ -137,7 +341,7 @@ export function SubscriptionToggle({ tenantName, suspended }: Props) {
             </button>
             <button
               type="button"
-              onClick={() => toggleSuspend(true)}
+              onClick={cancel}
               disabled={submitting}
               className="text-sm px-4 py-2 rounded-lg bg-amber-500 text-white hover:bg-amber-600 transition-colors disabled:opacity-50"
             >