refactor(ui): migrate CustomAlertModal to shadcn Modal

2026-01-25 02:08:11 +00:00 · 2026-01-23 15:16:11 +01:00
parent 75973d4475
commit 7affdb5458
22 changed files with 104 additions and 170 deletions
--- 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"}
--- 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">
--- 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>
      )}
    </>
  );
--- 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>
  );
 }
--- 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>
  );
 };
--- 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 */}
--- 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 */}
--- 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>
--- 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">
--- 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
--- 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
--- 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
--- 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"
--- 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
--- a/ui/components/ui/custom/custom-alert-modal.tsx
+++ b/ui/components/ui/custom/custom-alert-modal.tsx
@@ -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>
-  );
-};
--- 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";
--- 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>
  );
 };
--- 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>
  );
 };
--- 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>
  );
 };
--- 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">
--- 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>
  );
 };
--- 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