Improve delete UX and prepaid credit time display.

Show minutes and local expiry for resource credits; add shared delete hook with row/card loading overlays, detail-page deleting modal, and disabled controls to prevent double-delete. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-05-24 00:33:16 +03:30
parent 695e05f948
commit abbe821d91
15 changed files with 352 additions and 83 deletions
@@ -0,0 +1,44 @@
+'use client';
+
+import { Clock } from 'lucide-react';
+
+export function DeletingModal({
+  open,
+  resourceName,
+  resourceKind = 'application',
+}: {
+  open: boolean;
+  resourceName: string;
+  resourceKind?: 'application' | 'service';
+}) {
+  if (!open) return null;
+
+  const detail =
+    resourceKind === 'service'
+      ? 'Removing this service and its data from the cluster. This may take a minute.'
+      : 'Removing this application, deployments, and data from the cluster. This may take a minute.';
+
+  return (
+    <div
+      className="fixed inset-0 z-[100] flex items-center justify-center bg-black/45 p-4"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="deleting-modal-title"
+      aria-busy="true"
+    >
+      <div className="bg-white rounded-2xl shadow-xl max-w-md w-full p-8 text-center space-y-3">
+        <div className="mx-auto w-14 h-14 rounded-full bg-red-50 flex items-center justify-center">
+          <Clock className="w-7 h-7 text-red-600 animate-spin" />
+        </div>
+        <h2 id="deleting-modal-title" className="text-lg font-semibold text-gray-900">
+          Deleting…
+        </h2>
+        <p className="text-sm text-gray-600">
+          <span className="font-semibold text-gray-900">{resourceName}</span> is being permanently removed.
+        </p>
+        <p className="text-xs text-gray-500">{detail}</p>
+        <p className="text-xs text-amber-700 font-medium pt-1">Please wait — do not close this page.</p>
+      </div>
+    </div>
+  );
+}