From 7affdb5458aa170145f96a6f69c17befa46b17a3 Mon Sep 17 00:00:00 2001
From: alejandrobailo <alejandrobailo94@gmail.com>
Date: Fri, 23 Jan 2026 15:16:11 +0100
Subject: [PATCH] refactor(ui): migrate CustomAlertModal to shadcn Modal

---
 .../config/(connect-llm)/layout.tsx           |  8 +--
 .../_components/advanced-mutelist-form.tsx    |  8 +--
 .../simple/mute-rules-table-client.tsx        | 14 ++---
 .../findings/mute-findings-modal.tsx          |  9 +--
 ui/components/findings/send-to-jira-modal.tsx |  8 +--
 .../jira/jira-integrations-manager.tsx        | 14 ++---
 .../s3/s3-integrations-manager.tsx            | 14 ++---
 .../saml/saml-integration-card.tsx            | 14 ++---
 .../security-hub-integrations-manager.tsx     | 14 ++---
 .../table/data-table-row-actions.tsx          | 14 ++---
 .../table/data-table-row-actions.tsx          |  8 +--
 .../table/data-table-row-actions.tsx          | 14 ++---
 .../roles/table/data-table-row-actions.tsx    |  8 +--
 .../table/scans/data-table-row-actions.tsx    |  8 +--
 .../ui/custom/custom-alert-modal.tsx          | 62 -------------------
 ui/components/ui/custom/index.ts              |  1 -
 .../users/profile/api-key-success-modal.tsx   |  8 +--
 .../users/profile/create-api-key-modal.tsx    |  8 +--
 .../users/profile/edit-api-key-name-modal.tsx |  8 +--
 .../users/profile/membership-item.tsx         | 10 +--
 .../users/profile/revoke-api-key-modal.tsx    |  8 +--
 .../users/table/data-table-row-actions.tsx    | 14 ++---
 22 files changed, 104 insertions(+), 170 deletions(-)
 delete mode 100644 ui/components/ui/custom/custom-alert-modal.tsx

diff --git a/ui/app/(prowler)/lighthouse/config/(connect-llm)/layout.tsx b/ui/app/(prowler)/lighthouse/config/(connect-llm)/layout.tsx
index fa058f9c09..61579abcb0 100644
--- a/ui/app/(prowler)/lighthouse/config/(connect-llm)/layout.tsx
+++ b/ui/app/(prowler)/lighthouse/config/(connect-llm)/layout.tsx
@@ -14,8 +14,8 @@ import {
 import { DeleteLLMProviderForm } from "@/components/lighthouse/forms/delete-llm-provider-form";
 import { WorkflowConnectLLM } from "@/components/lighthouse/workflow";
 import { Button } from "@/components/shadcn";
+import { Modal } from "@/components/shadcn/modal";
 import { NavigationHeader } from "@/components/ui";
-import { CustomAlertModal } from "@/components/ui/custom";
 import type { LighthouseProvider } from "@/types/lighthouse";
 
 interface ConnectLLMLayoutProps {
@@ -63,8 +63,8 @@ export default function ConnectLLMLayout({ children }: ConnectLLMLayoutProps) {
 
   return (
     <>
-      <CustomAlertModal
-        isOpen={isDeleteOpen}
+      <Modal
+        open={isDeleteOpen}
         onOpenChange={setIsDeleteOpen}
         title="Are you absolutely sure?"
         description="This action cannot be undone. This will permanently delete your LLM provider configuration and remove your data from the server."
@@ -73,7 +73,7 @@ export default function ConnectLLMLayout({ children }: ConnectLLMLayoutProps) {
           providerType={provider}
           setIsOpen={setIsDeleteOpen}
         />
-      </CustomAlertModal>
+      </Modal>
 
       <NavigationHeader
         title={isEditMode ? "Configure LLM Provider" : "Connect LLM Provider"}
diff --git a/ui/app/(prowler)/mutelist/_components/advanced-mutelist-form.tsx b/ui/app/(prowler)/mutelist/_components/advanced-mutelist-form.tsx
index 6309d1f0af..d6992d6fb5 100644
--- a/ui/app/(prowler)/mutelist/_components/advanced-mutelist-form.tsx
+++ b/ui/app/(prowler)/mutelist/_components/advanced-mutelist-form.tsx
@@ -11,8 +11,8 @@ import {
   updateMutedFindingsConfig,
 } from "@/actions/processors";
 import { Button, Card, Skeleton } from "@/components/shadcn";
+import { Modal } from "@/components/shadcn/modal";
 import { useToast } from "@/components/ui";
-import { CustomAlertModal } from "@/components/ui/custom";
 import { CustomLink } from "@/components/ui/custom/custom-link";
 import { fontMono } from "@/config/fonts";
 import {
@@ -152,8 +152,8 @@ export function AdvancedMutelistForm() {
   return (
     <>
       {/* Delete Confirmation Modal */}
-      <CustomAlertModal
-        isOpen={showDeleteConfirmation}
+      <Modal
+        open={showDeleteConfirmation}
         onOpenChange={setShowDeleteConfirmation}
         title="Delete Mutelist Configuration"
         size="md"
@@ -185,7 +185,7 @@ export function AdvancedMutelistForm() {
             </Button>
           </div>
         </div>
-      </CustomAlertModal>
+      </Modal>
 
       <Card variant="base" className="p-6">
         <form action={formAction} className="flex flex-col gap-4">
diff --git a/ui/app/(prowler)/mutelist/_components/simple/mute-rules-table-client.tsx b/ui/app/(prowler)/mutelist/_components/simple/mute-rules-table-client.tsx
index a88d57972a..b5e9e45e74 100644
--- a/ui/app/(prowler)/mutelist/_components/simple/mute-rules-table-client.tsx
+++ b/ui/app/(prowler)/mutelist/_components/simple/mute-rules-table-client.tsx
@@ -8,8 +8,8 @@ import { useActionState, useEffect, useRef, useState } from "react";
 import { deleteMuteRule } from "@/actions/mute-rules";
 import { MuteRuleData } from "@/actions/mute-rules/types";
 import { Button } from "@/components/shadcn";
+import { Modal } from "@/components/shadcn/modal";
 import { useToast } from "@/components/ui";
-import { CustomAlertModal } from "@/components/ui/custom";
 import { DataTable } from "@/components/ui/table";
 import { MetaDataProps } from "@/types";
 
@@ -82,8 +82,8 @@ export function MuteRulesTableClient({
 
       {/* Edit Modal */}
       {selectedMuteRule && (
-        <CustomAlertModal
-          isOpen={editModal.isOpen}
+        <Modal
+          open={editModal.isOpen}
           onOpenChange={editModal.onOpenChange}
           title="Edit Mute Rule"
           size="lg"
@@ -93,13 +93,13 @@ export function MuteRulesTableClient({
             onSuccess={handleEditSuccess}
             onCancel={editModal.onClose}
           />
-        </CustomAlertModal>
+        </Modal>
       )}
 
       {/* Delete Confirmation Modal */}
       {selectedMuteRule && (
-        <CustomAlertModal
-          isOpen={deleteModal.isOpen}
+        <Modal
+          open={deleteModal.isOpen}
           onOpenChange={deleteModal.onOpenChange}
           title="Delete Mute Rule"
           size="md"
@@ -138,7 +138,7 @@ export function MuteRulesTableClient({
               </form>
             </div>
           </div>
-        </CustomAlertModal>
+        </Modal>
       )}
     </>
   );
diff --git a/ui/components/findings/mute-findings-modal.tsx b/ui/components/findings/mute-findings-modal.tsx
index 0f4b95e6ad..c1ffa774d8 100644
--- a/ui/components/findings/mute-findings-modal.tsx
+++ b/ui/components/findings/mute-findings-modal.tsx
@@ -11,8 +11,8 @@ import {
 
 import { createMuteRule } from "@/actions/mute-rules";
 import { MuteRuleActionState } from "@/actions/mute-rules/types";
+import { Modal } from "@/components/shadcn/modal";
 import { useToast } from "@/components/ui";
-import { CustomAlertModal } from "@/components/ui/custom";
 import { FormButtons } from "@/components/ui/form";
 
 interface MuteFindingsModalProps {
@@ -44,6 +44,7 @@ export function MuteFindingsModal({
 
   useEffect(() => {
     if (state?.success) {
+      console.log("[MuteFindingsModal] success, calling onComplete:", !!onCompleteRef.current);
       toast({
         title: "Success",
         description: state.success,
@@ -65,8 +66,8 @@ export function MuteFindingsModal({
   };
 
   return (
-    <CustomAlertModal
-      isOpen={isOpen}
+    <Modal
+      open={isOpen}
       onOpenChange={onOpenChange}
       title="Mute Findings"
       size="lg"
@@ -125,6 +126,6 @@ export function MuteFindingsModal({
           isDisabled={isPending}
         />
       </form>
-    </CustomAlertModal>
+    </Modal>
   );
 }
diff --git a/ui/components/findings/send-to-jira-modal.tsx b/ui/components/findings/send-to-jira-modal.tsx
index aae94afe4d..a692fe20b7 100644
--- a/ui/components/findings/send-to-jira-modal.tsx
+++ b/ui/components/findings/send-to-jira-modal.tsx
@@ -15,8 +15,8 @@ import {
   sendFindingToJira,
 } from "@/actions/integrations/jira-dispatch";
 import { JiraIcon } from "@/components/icons/services/IconServices";
+import { Modal } from "@/components/shadcn/modal";
 import { useToast } from "@/components/ui";
-import { CustomAlertModal } from "@/components/ui/custom";
 import { CustomBanner } from "@/components/ui/custom/custom-banner";
 import {
   Form,
@@ -215,8 +215,8 @@ export const SendToJiraModal = ({
   // }, [issueTypes, searchIssueTypeValue]);
 
   return (
-    <CustomAlertModal
-      isOpen={isOpen}
+    <Modal
+      open={isOpen}
       onOpenChange={onOpenChange}
       title="Send Finding to Jira"
       description={
@@ -389,6 +389,6 @@ export const SendToJiraModal = ({
           )}
         </form>
       </Form>
-    </CustomAlertModal>
+    </Modal>
   );
 };
diff --git a/ui/components/integrations/jira/jira-integrations-manager.tsx b/ui/components/integrations/jira/jira-integrations-manager.tsx
index 0ad5f58f9a..3802ad4080 100644
--- a/ui/components/integrations/jira/jira-integrations-manager.tsx
+++ b/ui/components/integrations/jira/jira-integrations-manager.tsx
@@ -16,8 +16,8 @@ import {
   IntegrationSkeleton,
 } from "@/components/integrations/shared";
 import { Button } from "@/components/shadcn";
+import { Modal } from "@/components/shadcn/modal";
 import { useToast } from "@/components/ui";
-import { CustomAlertModal } from "@/components/ui/custom";
 import { DataTablePagination } from "@/components/ui/table/data-table-pagination";
 import { triggerTestConnectionWithDelay } from "@/lib/integrations/test-connection-helper";
 import { MetaDataProps } from "@/types";
@@ -209,8 +209,8 @@ export const JiraIntegrationsManager = ({
 
   return (
     <>
-      <CustomAlertModal
-        isOpen={isDeleteOpen}
+      <Modal
+        open={isDeleteOpen}
         onOpenChange={setIsDeleteOpen}
         title="Delete Jira Integration"
         description="This action cannot be undone. This will permanently delete your Jira integration."
@@ -243,10 +243,10 @@ export const JiraIntegrationsManager = ({
             {isDeleting ? "Deleting..." : "Delete"}
           </Button>
         </div>
-      </CustomAlertModal>
+      </Modal>
 
-      <CustomAlertModal
-        isOpen={isModalOpen}
+      <Modal
+        open={isModalOpen}
         onOpenChange={setIsModalOpen}
         title={
           editingIntegration
@@ -259,7 +259,7 @@ export const JiraIntegrationsManager = ({
           onSuccess={handleFormSuccess}
           onCancel={handleModalClose}
         />
-      </CustomAlertModal>
+      </Modal>
 
       <div className="flex flex-col gap-6">
         {/* Header with Add Button */}
diff --git a/ui/components/integrations/s3/s3-integrations-manager.tsx b/ui/components/integrations/s3/s3-integrations-manager.tsx
index 6246f941fe..493ae6fc70 100644
--- a/ui/components/integrations/s3/s3-integrations-manager.tsx
+++ b/ui/components/integrations/s3/s3-integrations-manager.tsx
@@ -16,8 +16,8 @@ import {
   IntegrationSkeleton,
 } from "@/components/integrations/shared";
 import { Button } from "@/components/shadcn";
+import { Modal } from "@/components/shadcn/modal";
 import { useToast } from "@/components/ui";
-import { CustomAlertModal } from "@/components/ui/custom";
 import { DataTablePagination } from "@/components/ui/table/data-table-pagination";
 import { triggerTestConnectionWithDelay } from "@/lib/integrations/test-connection-helper";
 import { MetaDataProps } from "@/types";
@@ -209,8 +209,8 @@ export const S3IntegrationsManager = ({
 
   return (
     <>
-      <CustomAlertModal
-        isOpen={isDeleteOpen}
+      <Modal
+        open={isDeleteOpen}
         onOpenChange={setIsDeleteOpen}
         title="Delete S3 Integration"
         description="This action cannot be undone. This will permanently delete your S3 integration."
@@ -243,10 +243,10 @@ export const S3IntegrationsManager = ({
             {isDeleting ? "Deleting..." : "Delete"}
           </Button>
         </div>
-      </CustomAlertModal>
+      </Modal>
 
-      <CustomAlertModal
-        isOpen={isModalOpen}
+      <Modal
+        open={isModalOpen}
         onOpenChange={setIsModalOpen}
         title={
           editMode === "configuration"
@@ -265,7 +265,7 @@ export const S3IntegrationsManager = ({
           onCancel={handleModalClose}
           editMode={editMode}
         />
-      </CustomAlertModal>
+      </Modal>
 
       <div className="flex flex-col gap-6">
         {/* Header with Add Button */}
diff --git a/ui/components/integrations/saml/saml-integration-card.tsx b/ui/components/integrations/saml/saml-integration-card.tsx
index ca5c752154..f1b5c2c966 100644
--- a/ui/components/integrations/saml/saml-integration-card.tsx
+++ b/ui/components/integrations/saml/saml-integration-card.tsx
@@ -5,8 +5,8 @@ import { useState } from "react";
 
 import { deleteSamlConfig } from "@/actions/integrations";
 import { Button } from "@/components/shadcn";
+import { Modal } from "@/components/shadcn/modal";
 import { useToast } from "@/components/ui";
-import { CustomAlertModal } from "@/components/ui/custom";
 import { CustomLink } from "@/components/ui/custom/custom-link";
 
 import { Card, CardContent, CardHeader } from "../../shadcn";
@@ -53,8 +53,8 @@ export const SamlIntegrationCard = ({ samlConfig }: { samlConfig?: any }) => {
   return (
     <>
       {/* Configure SAML Modal */}
-      <CustomAlertModal
-        isOpen={isSamlModalOpen}
+      <Modal
+        open={isSamlModalOpen}
         onOpenChange={setIsSamlModalOpen}
         title="Configure SAML SSO"
       >
@@ -62,11 +62,11 @@ export const SamlIntegrationCard = ({ samlConfig }: { samlConfig?: any }) => {
           setIsOpen={setIsSamlModalOpen}
           samlConfig={samlConfig}
         />
-      </CustomAlertModal>
+      </Modal>
 
       {/* Delete Confirmation Modal */}
-      <CustomAlertModal
-        isOpen={isDeleteModalOpen}
+      <Modal
+        open={isDeleteModalOpen}
         onOpenChange={setIsDeleteModalOpen}
         title="Remove SAML Configuration"
         size="md"
@@ -98,7 +98,7 @@ export const SamlIntegrationCard = ({ samlConfig }: { samlConfig?: any }) => {
             </Button>
           </div>
         </div>
-      </CustomAlertModal>
+      </Modal>
 
       <Card variant="base" padding="lg">
         <CardHeader>
diff --git a/ui/components/integrations/security-hub/security-hub-integrations-manager.tsx b/ui/components/integrations/security-hub/security-hub-integrations-manager.tsx
index 270318008a..40f8c9dc9c 100644
--- a/ui/components/integrations/security-hub/security-hub-integrations-manager.tsx
+++ b/ui/components/integrations/security-hub/security-hub-integrations-manager.tsx
@@ -17,8 +17,8 @@ import {
   IntegrationSkeleton,
 } from "@/components/integrations/shared";
 import { Button } from "@/components/shadcn";
+import { Modal } from "@/components/shadcn/modal";
 import { useToast } from "@/components/ui";
-import { CustomAlertModal } from "@/components/ui/custom";
 import { DataTablePagination } from "@/components/ui/table/data-table-pagination";
 import { triggerTestConnectionWithDelay } from "@/lib/integrations/test-connection-helper";
 import { MetaDataProps } from "@/types";
@@ -259,8 +259,8 @@ export const SecurityHubIntegrationsManager = ({
 
   return (
     <>
-      <CustomAlertModal
-        isOpen={isDeleteOpen}
+      <Modal
+        open={isDeleteOpen}
         onOpenChange={setIsDeleteOpen}
         title="Delete Security Hub Integration"
         description="This action cannot be undone. This will permanently delete your Security Hub integration."
@@ -293,10 +293,10 @@ export const SecurityHubIntegrationsManager = ({
             {isDeleting ? "Deleting..." : "Delete"}
           </Button>
         </div>
-      </CustomAlertModal>
+      </Modal>
 
-      <CustomAlertModal
-        isOpen={isModalOpen}
+      <Modal
+        open={isModalOpen}
         onOpenChange={setIsModalOpen}
         title={
           editMode === "configuration"
@@ -316,7 +316,7 @@ export const SecurityHubIntegrationsManager = ({
           onCancel={handleModalClose}
           editMode={editMode}
         />
-      </CustomAlertModal>
+      </Modal>
 
       <div className="flex flex-col gap-6">
         <div className="flex items-center justify-between">
diff --git a/ui/components/invitations/table/data-table-row-actions.tsx b/ui/components/invitations/table/data-table-row-actions.tsx
index 320f84fc35..4ec5f50e79 100644
--- a/ui/components/invitations/table/data-table-row-actions.tsx
+++ b/ui/components/invitations/table/data-table-row-actions.tsx
@@ -19,7 +19,7 @@ import { useState } from "react";
 
 import { VerticalDotsIcon } from "@/components/icons";
 import { Button } from "@/components/shadcn";
-import { CustomAlertModal } from "@/components/ui/custom";
+import { Modal } from "@/components/shadcn/modal";
 
 import { DeleteForm, EditForm } from "../forms";
 
@@ -44,8 +44,8 @@ export function DataTableRowActions<InvitationProps>({
 
   return (
     <>
-      <CustomAlertModal
-        isOpen={isEditOpen}
+      <Modal
+        open={isEditOpen}
         onOpenChange={setIsEditOpen}
         title="Edit invitation details"
       >
@@ -56,15 +56,15 @@ export function DataTableRowActions<InvitationProps>({
           roles={roles || []}
           setIsOpen={setIsEditOpen}
         />
-      </CustomAlertModal>
-      <CustomAlertModal
-        isOpen={isDeleteOpen}
+      </Modal>
+      <Modal
+        open={isDeleteOpen}
         onOpenChange={setIsDeleteOpen}
         title="Are you absolutely sure?"
         description="This action cannot be undone. This will permanently revoke your invitation."
       >
         <DeleteForm invitationId={invitationId} setIsOpen={setIsDeleteOpen} />
-      </CustomAlertModal>
+      </Modal>
 
       <div className="relative flex items-center justify-end gap-2">
         <Dropdown
diff --git a/ui/components/manage-groups/table/data-table-row-actions.tsx b/ui/components/manage-groups/table/data-table-row-actions.tsx
index af9d2e0ade..3ea2f9c9a1 100644
--- a/ui/components/manage-groups/table/data-table-row-actions.tsx
+++ b/ui/components/manage-groups/table/data-table-row-actions.tsx
@@ -18,7 +18,7 @@ import { useState } from "react";
 
 import { VerticalDotsIcon } from "@/components/icons";
 import { Button } from "@/components/shadcn";
-import { CustomAlertModal } from "@/components/ui/custom";
+import { Modal } from "@/components/shadcn/modal";
 
 import { DeleteGroupForm } from "../forms";
 
@@ -37,14 +37,14 @@ export function DataTableRowActions<ProviderProps>({
 
   return (
     <>
-      <CustomAlertModal
-        isOpen={isDeleteOpen}
+      <Modal
+        open={isDeleteOpen}
         onOpenChange={setIsDeleteOpen}
         title="Are you absolutely sure?"
         description="This action cannot be undone. This will permanently delete your provider account and remove your data from the server."
       >
         <DeleteGroupForm groupId={groupId} setIsOpen={setIsDeleteOpen} />
-      </CustomAlertModal>
+      </Modal>
 
       <div className="relative flex items-center justify-end gap-2">
         <Dropdown
diff --git a/ui/components/providers/table/data-table-row-actions.tsx b/ui/components/providers/table/data-table-row-actions.tsx
index 1c47d2feee..1866abe8ab 100644
--- a/ui/components/providers/table/data-table-row-actions.tsx
+++ b/ui/components/providers/table/data-table-row-actions.tsx
@@ -20,7 +20,7 @@ import { useState } from "react";
 import { checkConnectionProvider } from "@/actions/providers/providers";
 import { VerticalDotsIcon } from "@/components/icons";
 import { Button } from "@/components/shadcn";
-import { CustomAlertModal } from "@/components/ui/custom";
+import { Modal } from "@/components/shadcn/modal";
 
 import { EditForm } from "../forms";
 import { DeleteForm } from "../forms/delete-form";
@@ -61,8 +61,8 @@ export function DataTableRowActions<ProviderProps>({
 
   return (
     <>
-      <CustomAlertModal
-        isOpen={isEditOpen}
+      <Modal
+        open={isEditOpen}
         onOpenChange={setIsEditOpen}
         title="Edit Provider Alias"
       >
@@ -71,15 +71,15 @@ export function DataTableRowActions<ProviderProps>({
           providerAlias={providerAlias}
           setIsOpen={setIsEditOpen}
         />
-      </CustomAlertModal>
-      <CustomAlertModal
-        isOpen={isDeleteOpen}
+      </Modal>
+      <Modal
+        open={isDeleteOpen}
         onOpenChange={setIsDeleteOpen}
         title="Are you absolutely sure?"
         description="This action cannot be undone. This will permanently delete your provider account and remove your data from the server."
       >
         <DeleteForm providerId={providerId} setIsOpen={setIsDeleteOpen} />
-      </CustomAlertModal>
+      </Modal>
 
       <div className="relative flex items-center justify-end gap-2">
         <Dropdown
diff --git a/ui/components/roles/table/data-table-row-actions.tsx b/ui/components/roles/table/data-table-row-actions.tsx
index 7e6f0e94ff..0eb7864a51 100644
--- a/ui/components/roles/table/data-table-row-actions.tsx
+++ b/ui/components/roles/table/data-table-row-actions.tsx
@@ -18,7 +18,7 @@ import { useState } from "react";
 
 import { VerticalDotsIcon } from "@/components/icons";
 import { Button } from "@/components/shadcn";
-import { CustomAlertModal } from "@/components/ui/custom/custom-alert-modal";
+import { Modal } from "@/components/shadcn/modal";
 
 import { DeleteRoleForm } from "../workflow/forms";
 interface DataTableRowActionsProps<RoleProps> {
@@ -34,14 +34,14 @@ export function DataTableRowActions<RoleProps>({
   const roleId = (row.original as { id: string }).id;
   return (
     <>
-      <CustomAlertModal
-        isOpen={isDeleteOpen}
+      <Modal
+        open={isDeleteOpen}
         onOpenChange={setIsDeleteOpen}
         title="Are you absolutely sure?"
         description="This action cannot be undone. This will permanently delete your role and remove your data from the server."
       >
         <DeleteRoleForm roleId={roleId} setIsOpen={setIsDeleteOpen} />
-      </CustomAlertModal>
+      </Modal>
       <div className="relative flex items-center justify-end gap-2">
         <Dropdown
           className="border-border-neutral-secondary bg-bg-neutral-secondary border shadow-xl"
diff --git a/ui/components/scans/table/scans/data-table-row-actions.tsx b/ui/components/scans/table/scans/data-table-row-actions.tsx
index 8e284df763..b9d16db9ab 100644
--- a/ui/components/scans/table/scans/data-table-row-actions.tsx
+++ b/ui/components/scans/table/scans/data-table-row-actions.tsx
@@ -17,8 +17,8 @@ import { useState } from "react";
 
 import { VerticalDotsIcon } from "@/components/icons";
 import { Button } from "@/components/shadcn";
+import { Modal } from "@/components/shadcn/modal";
 import { useToast } from "@/components/ui";
-import { CustomAlertModal } from "@/components/ui/custom";
 import { downloadScanZip } from "@/lib/helper";
 
 import { EditScanForm } from "../../forms";
@@ -39,8 +39,8 @@ export function DataTableRowActions<ScanProps>({
 
   return (
     <>
-      <CustomAlertModal
-        isOpen={isEditOpen}
+      <Modal
+        open={isEditOpen}
         onOpenChange={setIsEditOpen}
         title="Edit Scan Name"
       >
@@ -49,7 +49,7 @@ export function DataTableRowActions<ScanProps>({
           scanName={scanName}
           setIsOpen={setIsEditOpen}
         />
-      </CustomAlertModal>
+      </Modal>
 
       <div className="relative flex items-center justify-end gap-2">
         <Dropdown
diff --git a/ui/components/ui/custom/custom-alert-modal.tsx b/ui/components/ui/custom/custom-alert-modal.tsx
deleted file mode 100644
index 16605467e9..0000000000
--- a/ui/components/ui/custom/custom-alert-modal.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import { ReactNode } from "react";
-
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/shadcn/dialog";
-import { cn } from "@/lib/utils";
-
-interface CustomAlertModalProps {
-  isOpen: boolean;
-  onOpenChange: (isOpen: boolean) => void;
-  title?: string;
-  description?: string;
-  children: ReactNode;
-  size?: "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl";
-}
-
-const sizeClasses = {
-  sm: "sm:max-w-sm",
-  md: "sm:max-w-md",
-  lg: "sm:max-w-lg",
-  xl: "sm:max-w-xl",
-  "2xl": "sm:max-w-2xl",
-  "3xl": "sm:max-w-3xl",
-  "4xl": "sm:max-w-4xl",
-  "5xl": "sm:max-w-5xl",
-} as const;
-
-export const CustomAlertModal = ({
-  isOpen,
-  onOpenChange,
-  title,
-  description,
-  children,
-  size = "xl",
-}: CustomAlertModalProps) => {
-  return (
-    <Dialog open={isOpen} onOpenChange={onOpenChange}>
-      <DialogContent
-        className={cn(
-          "border-border-neutral-secondary bg-bg-neutral-secondary",
-          sizeClasses[size],
-        )}
-      >
-        {title && (
-          <DialogHeader>
-            <DialogTitle>{title}</DialogTitle>
-            {description && (
-              <DialogDescription className="text-small text-gray-600 dark:text-gray-300">
-                {description}
-              </DialogDescription>
-            )}
-          </DialogHeader>
-        )}
-        {children}
-      </DialogContent>
-    </Dialog>
-  );
-};
diff --git a/ui/components/ui/custom/index.ts b/ui/components/ui/custom/index.ts
index 19e8fef2f4..0007e08580 100644
--- a/ui/components/ui/custom/index.ts
+++ b/ui/components/ui/custom/index.ts
@@ -1,4 +1,3 @@
-export * from "./custom-alert-modal";
 export * from "./custom-banner";
 export * from "./custom-dropdown-selection";
 export * from "./custom-input";
diff --git a/ui/components/users/profile/api-key-success-modal.tsx b/ui/components/users/profile/api-key-success-modal.tsx
index 4379b0b076..c3e039cab8 100644
--- a/ui/components/users/profile/api-key-success-modal.tsx
+++ b/ui/components/users/profile/api-key-success-modal.tsx
@@ -3,8 +3,8 @@
 import { Snippet } from "@heroui/snippet";
 
 import { Button } from "@/components/shadcn";
+import { Modal } from "@/components/shadcn/modal";
 import { Alert, AlertDescription } from "@/components/ui/alert/Alert";
-import { CustomAlertModal } from "@/components/ui/custom/custom-alert-modal";
 
 interface ApiKeySuccessModalProps {
   isOpen: boolean;
@@ -18,8 +18,8 @@ export const ApiKeySuccessModal = ({
   apiKey,
 }: ApiKeySuccessModalProps) => {
   return (
-    <CustomAlertModal
-      isOpen={isOpen}
+    <Modal
+      open={isOpen}
       onOpenChange={(open) => !open && onClose()}
       title="API Key Created Successfully"
     >
@@ -56,6 +56,6 @@ export const ApiKeySuccessModal = ({
           Acknowledged
         </Button>
       </div>
-    </CustomAlertModal>
+    </Modal>
   );
 };
diff --git a/ui/components/users/profile/create-api-key-modal.tsx b/ui/components/users/profile/create-api-key-modal.tsx
index 5f99c1d0fb..a76fe8d53b 100644
--- a/ui/components/users/profile/create-api-key-modal.tsx
+++ b/ui/components/users/profile/create-api-key-modal.tsx
@@ -5,9 +5,9 @@ import { useForm } from "react-hook-form";
 import * as z from "zod";
 
 import { createApiKey } from "@/actions/api-keys/api-keys";
+import { Modal } from "@/components/shadcn/modal";
 import { useToast } from "@/components/ui";
 import { CustomInput } from "@/components/ui/custom";
-import { CustomAlertModal } from "@/components/ui/custom/custom-alert-modal";
 import { CustomLink } from "@/components/ui/custom/custom-link";
 import { Form, FormButtons } from "@/components/ui/form";
 
@@ -86,8 +86,8 @@ export const CreateApiKeyModal = ({
   };
 
   return (
-    <CustomAlertModal
-      isOpen={isOpen}
+    <Modal
+      open={isOpen}
       onOpenChange={(open) => !open && handleClose()}
       title="Create API Key"
       size="lg"
@@ -139,6 +139,6 @@ export const CreateApiKeyModal = ({
           />
         </form>
       </Form>
-    </CustomAlertModal>
+    </Modal>
   );
 };
diff --git a/ui/components/users/profile/edit-api-key-name-modal.tsx b/ui/components/users/profile/edit-api-key-name-modal.tsx
index 460c39419e..b015f7b732 100644
--- a/ui/components/users/profile/edit-api-key-name-modal.tsx
+++ b/ui/components/users/profile/edit-api-key-name-modal.tsx
@@ -6,9 +6,9 @@ import { useForm } from "react-hook-form";
 import * as z from "zod";
 
 import { updateApiKey } from "@/actions/api-keys/api-keys";
+import { Modal } from "@/components/shadcn/modal";
 import { useToast } from "@/components/ui";
 import { CustomInput } from "@/components/ui/custom";
-import { CustomAlertModal } from "@/components/ui/custom/custom-alert-modal";
 import { Form, FormButtons } from "@/components/ui/form";
 
 import { EnrichedApiKey } from "./api-keys/types";
@@ -92,8 +92,8 @@ export const EditApiKeyNameModal = ({
   };
 
   return (
-    <CustomAlertModal
-      isOpen={isOpen}
+    <Modal
+      open={isOpen}
       onOpenChange={(open) => !open && handleClose()}
       title="Edit API Key Name"
       size="lg"
@@ -129,6 +129,6 @@ export const EditApiKeyNameModal = ({
           />
         </form>
       </Form>
-    </CustomAlertModal>
+    </Modal>
   );
 };
diff --git a/ui/components/users/profile/membership-item.tsx b/ui/components/users/profile/membership-item.tsx
index 1099e326ae..b13574ad8e 100644
--- a/ui/components/users/profile/membership-item.tsx
+++ b/ui/components/users/profile/membership-item.tsx
@@ -4,7 +4,7 @@ import { Chip } from "@heroui/chip";
 import { useState } from "react";
 
 import { Button, Card } from "@/components/shadcn";
-import { CustomAlertModal } from "@/components/ui/custom";
+import { Modal } from "@/components/shadcn/modal";
 import { DateWithTime, InfoField } from "@/components/ui/entities";
 import { MembershipDetailData } from "@/types/users";
 
@@ -25,17 +25,13 @@ export const MembershipItem = ({
 
   return (
     <>
-      <CustomAlertModal
-        isOpen={isEditOpen}
-        onOpenChange={setIsEditOpen}
-        title=""
-      >
+      <Modal open={isEditOpen} onOpenChange={setIsEditOpen} title="">
         <EditTenantForm
           tenantId={tenantId}
           tenantName={tenantName}
           setIsOpen={setIsEditOpen}
         />
-      </CustomAlertModal>
+      </Modal>
       <Card variant="inner" className="min-w-[320px] p-2">
         <div className="flex w-full items-center gap-4">
           <Chip size="sm" variant="flat" color="secondary">
diff --git a/ui/components/users/profile/revoke-api-key-modal.tsx b/ui/components/users/profile/revoke-api-key-modal.tsx
index ff5bf507fa..781440bc92 100644
--- a/ui/components/users/profile/revoke-api-key-modal.tsx
+++ b/ui/components/users/profile/revoke-api-key-modal.tsx
@@ -4,12 +4,12 @@ import { Snippet } from "@heroui/snippet";
 import { Trash2Icon } from "lucide-react";
 
 import { revokeApiKey } from "@/actions/api-keys/api-keys";
+import { Modal } from "@/components/shadcn/modal";
 import {
   Alert,
   AlertDescription,
   AlertTitle,
 } from "@/components/ui/alert/Alert";
-import { CustomAlertModal } from "@/components/ui/custom/custom-alert-modal";
 import { ModalButtons } from "@/components/ui/custom/custom-modal-buttons";
 
 import { FALLBACK_VALUES } from "./api-keys/constants";
@@ -49,8 +49,8 @@ export const RevokeApiKeyModal = ({
   });
 
   return (
-    <CustomAlertModal
-      isOpen={isOpen}
+    <Modal
+      open={isOpen}
       onOpenChange={(open) => !open && handleClose()}
       title="Revoke API Key"
       size="lg"
@@ -95,6 +95,6 @@ export const RevokeApiKeyModal = ({
         submitColor="danger"
         submitIcon={<Trash2Icon size={24} />}
       />
-    </CustomAlertModal>
+    </Modal>
   );
 };
diff --git a/ui/components/users/table/data-table-row-actions.tsx b/ui/components/users/table/data-table-row-actions.tsx
index 23b673cf98..41f81290da 100644
--- a/ui/components/users/table/data-table-row-actions.tsx
+++ b/ui/components/users/table/data-table-row-actions.tsx
@@ -17,7 +17,7 @@ import { useState } from "react";
 
 import { VerticalDotsIcon } from "@/components/icons";
 import { Button } from "@/components/shadcn";
-import { CustomAlertModal } from "@/components/ui/custom";
+import { Modal } from "@/components/shadcn/modal";
 
 import { DeleteForm, EditForm } from "../forms";
 
@@ -41,8 +41,8 @@ export function DataTableRowActions<UserProps>({
 
   return (
     <>
-      <CustomAlertModal
-        isOpen={isEditOpen}
+      <Modal
+        open={isEditOpen}
         onOpenChange={setIsEditOpen}
         title="Edit user details"
       >
@@ -55,15 +55,15 @@ export function DataTableRowActions<UserProps>({
           roles={roles || []}
           setIsOpen={setIsEditOpen}
         />
-      </CustomAlertModal>
-      <CustomAlertModal
-        isOpen={isDeleteOpen}
+      </Modal>
+      <Modal
+        open={isDeleteOpen}
         onOpenChange={setIsDeleteOpen}
         title="Are you absolutely sure?"
         description="This action cannot be undone. This will permanently delete your user account and remove your data from the server."
       >
         <DeleteForm userId={userId} setIsOpen={setIsDeleteOpen} />
-      </CustomAlertModal>
+      </Modal>
 
       <div className="relative flex items-center justify-end gap-2">
         <Dropdown