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,45 @@
+'use client';
+
+import { Clock } from 'lucide-react';
+
+export function deletingResourceMessage(
+  kind: 'application' | 'service',
+  name?: string,
+): string {
+  if (kind === 'service') {
+    return name ? `Deleting “${name}”…` : 'Deleting service…';
+  }
+  return name ? `Deleting “${name}”…` : 'Deleting application…';
+}
+
+/** Single table cell spanning the full row — content centered in the row. */
+export function DeletingTableRowCell({
+  colSpan,
+  message = 'Deleting…',
+}: {
+  colSpan: number;
+  message?: string;
+}) {
+  return (
+    <td colSpan={colSpan} className="px-6 py-4 bg-white/95" aria-live="polite" aria-busy="true">
+      <div className="flex min-h-[52px] w-full items-center justify-center gap-2 text-sm font-semibold text-gray-800">
+        <Clock className="w-4 h-4 shrink-0 animate-spin text-red-600" />
+        <span>{message}</span>
+      </div>
+    </td>
+  );
+}
+
+/** Full-card overlay while delete is in progress. Parent must be `relative`. */
+export function DeletingCardOverlay({ message = 'Deleting…' }: { message?: string }) {
+  return (
+    <div
+      className="absolute inset-0 z-20 flex items-center justify-center gap-2 rounded-xl bg-white/92 backdrop-blur-[2px] text-sm font-semibold text-gray-800"
+      aria-live="polite"
+      aria-busy="true"
+    >
+      <Clock className="w-4 h-4 shrink-0 animate-spin text-red-600" />
+      <span>{message}</span>
+    </div>
+  );
+}