Comprehensive admin + user dashboards (production-ready)

components/app/billing-client.tsx

@@ -7,6 +7,7 @@ import { toast } from "sonner";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { Card, CardContent } from "@/components/ui/card";
+import { ConfirmDialog } from "@/components/admin/ui/confirm-dialog";
 import { cn, formatPrice } from "@/lib/utils";
 import { PLAN_ORDER, PLANS, type PlanKey } from "@/lib/billing/plans";
 import type { BillingInterval } from "@/lib/billing/catalog";
@@ -83,19 +84,21 @@ export function BillingClient({
                 </Button>
               )}
               {!subscription.cancelAtPeriodEnd && (
-                <Button
-                  variant="ghost"
-                  className="text-destructive"
-                  onClick={() => {
-                    if (confirm("Cancel your subscription at the end of the period?")) {
-                      go(cancelSubscriptionAction, "cancel");
-                    }
+                <ConfirmDialog
+                  trigger={
+                    <Button variant="ghost" className="text-destructive">
+                      Cancel
+                    </Button>
+                  }
+                  title="Cancel subscription?"
+                  description="Your plan stays active until the end of the current billing period, then reverts to Free. You can resubscribe any time."
+                  confirmLabel="Cancel subscription"
+                  successMessage="Subscription will cancel at period end"
+                  onConfirm={async () => {
+                    const res = await cancelSubscriptionAction();
+                    return res.ok ? { ok: true } : { ok: false, error: res.error };
                   }}
-                  disabled={busy === "cancel"}
-                >
-                  {busy === "cancel" && <Loader2 className="h-4 w-4 animate-spin" />}
-                  Cancel
-                </Button>
+                />
               )}
             </div>
           </CardContent>