feat: replace native confirm() dialogs with custom modal component

- Add ModalProvider context and useConfirm hook (confirm-modal.tsx)
- Support danger/warning/info variants with icons and colors
- Animated backdrop and dialog with CSS keyframes
- Accessible: aria-modal, role=dialog, ESC to close, auto-focus
- Replace all 6 native confirm() calls across dashboard pages
- Integrate ModalProvider in app providers

frontend/src/app/dashboard/admin/billing/page.tsx

@@ -6,6 +6,7 @@ import api from '@/lib/api';
 import { toast } from 'react-toastify';
 import type { ServicePlan, BillingCycle, PricingResourceType } from '@/types';
 import { DollarSign, Plus, Trash2, Edit2, ToggleLeft, ToggleRight, ChevronDown, ChevronUp } from 'lucide-react';
+import { useConfirm } from '@/components/confirm-modal';
 
 const runtimeOptions = [
   { value: 'nodejs', label: 'Node.js' },
@@ -47,6 +48,7 @@ const emptyRule = (): RuleForm => ({ resourceType: 'base_fee', unitPrice: '', de
 
 export default function AdminBillingPage() {
   const queryClient = useQueryClient();
+  const confirm = useConfirm();
   const [showForm, setShowForm] = useState(false);
   const [editingId, setEditingId] = useState<string | null>(null);
   const [expandedPlan, setExpandedPlan] = useState<string | null>(null);
@@ -282,7 +284,10 @@ export default function AdminBillingPage() {
                     <Edit2 className="w-4 h-4" />
                   </button>
                   <button
-                    onClick={() => { if (confirm('Delete this plan?')) deleteMutation.mutate(plan.id); }}
+                    onClick={async () => {
+                      const ok = await confirm({ title: 'Delete Plan', message: `Are you sure you want to delete "${plan.name}"?`, confirmText: 'Delete', variant: 'danger' });
+                      if (ok) deleteMutation.mutate(plan.id);
+                    }}
                     className="p-1 text-red-500 hover:text-red-700"
                   >
                     <Trash2 className="w-4 h-4" />