Add PKI Alerting v2

frontend/src/hooks/api/pkiAlertsV2/index.ts

@@ -0,0 +1,30 @@
+export { useCreatePkiAlertV2, useDeletePkiAlertV2, useUpdatePkiAlertV2 } from "./mutations";
+export {
+  pkiAlertsV2Keys,
+  useGetPkiAlertsV2,
+  useGetPkiAlertV2ById,
+  useGetPkiAlertV2CurrentMatchingCertificates,
+  useGetPkiAlertV2MatchingCertificates
+} from "./queries";
+export type {
+  TCreatePkiAlertV2,
+  TDeletePkiAlertV2,
+  TGetPkiAlertsV2,
+  TGetPkiAlertV2ById,
+  TGetPkiAlertV2CurrentMatchingCertificates,
+  TGetPkiAlertV2CurrentMatchingCertificatesResponse,
+  TGetPkiAlertV2MatchingCertificates,
+  TPkiAlertChannelConfigEmail,
+  TPkiAlertChannelV2,
+  TPkiAlertV2,
+  TPkiFilterRuleV2,
+  TUpdatePkiAlertV2
+} from "./types";
+export {
+  createPkiAlertV2Schema,
+  PkiAlertChannelTypeV2,
+  PkiAlertEventTypeV2,
+  PkiFilterFieldV2,
+  PkiFilterOperatorV2,
+  updatePkiAlertV2Schema
+} from "./types";

frontend/src/hooks/api/pkiAlertsV2/mutations.ts

@@ -0,0 +1,63 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+
+import { apiRequest } from "@app/config/request";
+
+import { pkiAlertsV2Keys } from "./queries";
+import { TCreatePkiAlertV2, TDeletePkiAlertV2, TPkiAlertV2, TUpdatePkiAlertV2 } from "./types";
+
+export const useCreatePkiAlertV2 = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation<TPkiAlertV2, unknown, TCreatePkiAlertV2>({
+    mutationFn: async (data) => {
+      const { data: response } = await apiRequest.post<TPkiAlertV2>("/api/v2/pki/alerts", data);
+      return response;
+    },
+    onSuccess: (_, variables) => {
+      queryClient.invalidateQueries({
+        queryKey: pkiAlertsV2Keys.allPkiAlertsV2({ projectId: variables.projectId })
+      });
+    }
+  });
+};
+
+export const useUpdatePkiAlertV2 = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation<TPkiAlertV2, unknown, TUpdatePkiAlertV2>({
+    mutationFn: async ({ alertId, ...data }) => {
+      const { data: response } = await apiRequest.patch<TPkiAlertV2>(
+        `/api/v2/pki/alerts/${alertId}`,
+        data
+      );
+      return response;
+    },
+    onSuccess: (_, variables) => {
+      queryClient.invalidateQueries({
+        queryKey: pkiAlertsV2Keys.specificPkiAlertV2(variables.alertId)
+      });
+      queryClient.invalidateQueries({
+        queryKey: pkiAlertsV2Keys.all
+      });
+    }
+  });
+};
+
+export const useDeletePkiAlertV2 = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation<TPkiAlertV2, unknown, TDeletePkiAlertV2>({
+    mutationFn: async ({ alertId }) => {
+      const { data } = await apiRequest.delete<TPkiAlertV2>(`/api/v2/pki/alerts/${alertId}`);
+      return data;
+    },
+    onSuccess: (_, variables) => {
+      queryClient.invalidateQueries({
+        queryKey: pkiAlertsV2Keys.all
+      });
+      queryClient.removeQueries({
+        queryKey: pkiAlertsV2Keys.specificPkiAlertV2(variables.alertId)
+      });
+    }
+  });
+};

frontend/src/hooks/api/pkiAlertsV2/queries.ts

@@ -0,0 +1,139 @@
+import { useQuery, UseQueryOptions } from "@tanstack/react-query";
+
+import { apiRequest } from "@app/config/request";
+
+import {
+  TGetPkiAlertsV2,
+  TGetPkiAlertsV2Response,
+  TGetPkiAlertV2ById,
+  TGetPkiAlertV2CurrentMatchingCertificates,
+  TGetPkiAlertV2CurrentMatchingCertificatesResponse,
+  TGetPkiAlertV2MatchingCertificates,
+  TGetPkiAlertV2MatchingCertificatesResponse,
+  TPkiAlertV2
+} from "./types";
+
+export const pkiAlertsV2Keys = {
+  all: ["pki-alerts-v2"] as const,
+  allPkiAlertsV2: (filters?: TGetPkiAlertsV2) => [pkiAlertsV2Keys.all[0], filters] as const,
+  specificPkiAlertV2: (alertId: string) => [...pkiAlertsV2Keys.all, alertId] as const,
+  pkiAlertV2MatchingCertificates: (alertId: string, filters?: TGetPkiAlertV2MatchingCertificates) =>
+    [...pkiAlertsV2Keys.specificPkiAlertV2(alertId), "certificates", filters] as const,
+  pkiAlertV2CurrentMatchingCertificates: (filters?: TGetPkiAlertV2CurrentMatchingCertificates) =>
+    [...pkiAlertsV2Keys.all, "current-certificates", filters] as const
+};
+
+const fetchPkiAlertsV2 = async (params: TGetPkiAlertsV2): Promise<TGetPkiAlertsV2Response> => {
+  const { data } = await apiRequest.get<TGetPkiAlertsV2Response>("/api/v2/pki/alerts", {
+    params
+  });
+  return data;
+};
+
+const fetchPkiAlertV2ById = async ({ alertId }: TGetPkiAlertV2ById): Promise<TPkiAlertV2> => {
+  const { data } = await apiRequest.get<TPkiAlertV2>(`/api/v2/pki/alerts/${alertId}`);
+  return data;
+};
+
+const fetchPkiAlertV2MatchingCertificates = async (
+  params: TGetPkiAlertV2MatchingCertificates
+): Promise<TGetPkiAlertV2MatchingCertificatesResponse> => {
+  const { alertId, ...queryParams } = params;
+  const { data } = await apiRequest.get<TGetPkiAlertV2MatchingCertificatesResponse>(
+    `/api/v2/pki/alerts/${alertId}/certificates`,
+    { params: queryParams }
+  );
+  return data;
+};
+
+const fetchPkiAlertV2CurrentMatchingCertificates = async (
+  params: TGetPkiAlertV2CurrentMatchingCertificates
+): Promise<TGetPkiAlertV2CurrentMatchingCertificatesResponse> => {
+  const { data } = await apiRequest.post<TGetPkiAlertV2CurrentMatchingCertificatesResponse>(
+    "/api/v2/pki/alerts/preview/certificates",
+    params
+  );
+  return data;
+};
+
+export const useGetPkiAlertsV2 = (
+  params: TGetPkiAlertsV2,
+  options?: Omit<
+    UseQueryOptions<
+      TGetPkiAlertsV2Response,
+      unknown,
+      TGetPkiAlertsV2Response,
+      ReturnType<typeof pkiAlertsV2Keys.allPkiAlertsV2>
+    >,
+    "queryKey" | "queryFn"
+  >
+) => {
+  return useQuery({
+    queryKey: pkiAlertsV2Keys.allPkiAlertsV2(params),
+    queryFn: () => fetchPkiAlertsV2(params),
+    enabled: !!params.projectId,
+    ...options
+  });
+};
+
+export const useGetPkiAlertV2ById = (
+  params: TGetPkiAlertV2ById,
+  options?: Omit<
+    UseQueryOptions<
+      TPkiAlertV2,
+      unknown,
+      TPkiAlertV2,
+      ReturnType<typeof pkiAlertsV2Keys.specificPkiAlertV2>
+    >,
+    "queryKey" | "queryFn"
+  >
+) => {
+  return useQuery({
+    queryKey: pkiAlertsV2Keys.specificPkiAlertV2(params.alertId),
+    queryFn: () => fetchPkiAlertV2ById(params),
+    enabled: !!params.alertId,
+    ...options
+  });
+};
+
+export const useGetPkiAlertV2MatchingCertificates = (
+  params: TGetPkiAlertV2MatchingCertificates,
+  options?: Omit<
+    UseQueryOptions<
+      TGetPkiAlertV2MatchingCertificatesResponse,
+      unknown,
+      TGetPkiAlertV2MatchingCertificatesResponse,
+      ReturnType<typeof pkiAlertsV2Keys.pkiAlertV2MatchingCertificates>
+    >,
+    "queryKey" | "queryFn"
+  >
+) => {
+  return useQuery({
+    queryKey: pkiAlertsV2Keys.pkiAlertV2MatchingCertificates(params.alertId, params),
+    queryFn: () => fetchPkiAlertV2MatchingCertificates(params),
+    enabled: !!params.alertId,
+    placeholderData: (previousData) => previousData,
+    ...options
+  });
+};
+
+export const useGetPkiAlertV2CurrentMatchingCertificates = (
+  params: TGetPkiAlertV2CurrentMatchingCertificates,
+  options?: Omit<
+    UseQueryOptions<
+      TGetPkiAlertV2CurrentMatchingCertificatesResponse,
+      unknown,
+      TGetPkiAlertV2CurrentMatchingCertificatesResponse,
+      ReturnType<typeof pkiAlertsV2Keys.pkiAlertV2CurrentMatchingCertificates>
+    >,
+    "queryKey" | "queryFn"
+  >
+) => {
+  return useQuery({
+    queryKey: pkiAlertsV2Keys.pkiAlertV2CurrentMatchingCertificates(params),
+    queryFn: () => fetchPkiAlertV2CurrentMatchingCertificates(params),
+    enabled: !!params.projectId && params.filters !== undefined,
+    placeholderData: (previousData) => previousData,
+    ...options
+  });
+};

frontend/src/hooks/api/pkiAlertsV2/types.ts

@@ -0,0 +1,191 @@
+import { z } from "zod";
+
+export enum PkiAlertEventTypeV2 {
+  EXPIRATION = "expiration",
+  RENEWAL = "renewal",
+  ISSUANCE = "issuance",
+  REVOCATION = "revocation"
+}
+
+export enum PkiAlertChannelTypeV2 {
+  EMAIL = "email"
+}
+
+export enum PkiFilterFieldV2 {
+  COMMON_NAME = "common_name",
+  PROFILE_NAME = "profile_name",
+  SAN = "san",
+  INCLUDE_CAS = "include_cas"
+}
+
+export enum PkiFilterOperatorV2 {
+  EQUALS = "equals",
+  CONTAINS = "contains",
+  STARTS_WITH = "starts_with",
+  ENDS_WITH = "ends_with",
+  MATCHES = "matches"
+}
+
+export interface TPkiFilterRuleV2 {
+  field: PkiFilterFieldV2;
+  operator: PkiFilterOperatorV2;
+  value: string | string[] | boolean;
+}
+
+export interface TPkiAlertChannelConfigEmail {
+  recipients: string[];
+}
+
+// In the future other channels like webhooks will be supported here
+export type TPkiAlertChannelConfig = TPkiAlertChannelConfigEmail;
+
+export interface TPkiAlertChannelV2 {
+  id: string;
+  channelType: PkiAlertChannelTypeV2;
+  config: TPkiAlertChannelConfig;
+  enabled: boolean;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface TPkiAlertV2 {
+  id: string;
+  projectId: string;
+  slug: string;
+  description?: string;
+  eventType: PkiAlertEventTypeV2;
+  alertBefore?: string;
+  filters: TPkiFilterRuleV2[];
+  enabled: boolean;
+  channels: TPkiAlertChannelV2[];
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface TPkiCertificateMatchV2 {
+  id: string;
+  serialNumber: string;
+  commonName?: string;
+  san?: string[];
+  profileName?: string;
+  enrollmentType?: string;
+  notBefore: string;
+  notAfter: string;
+  status: string;
+}
+
+export interface TGetPkiAlertsV2 {
+  projectId: string;
+  search?: string;
+  eventType?: PkiAlertEventTypeV2;
+  enabled?: boolean;
+  limit?: number;
+  offset?: number;
+}
+
+export interface TGetPkiAlertsV2Response {
+  alerts: TPkiAlertV2[];
+  total: number;
+}
+
+export interface TGetPkiAlertV2ById {
+  alertId: string;
+}
+
+export interface TCreatePkiAlertV2 {
+  projectId: string;
+  slug: string;
+  description?: string;
+  eventType: PkiAlertEventTypeV2;
+  alertBefore?: string;
+  filters: TPkiFilterRuleV2[];
+  enabled?: boolean;
+  channels: Omit<TPkiAlertChannelV2, "id" | "createdAt" | "updatedAt">[];
+}
+
+export interface TUpdatePkiAlertV2 {
+  alertId: string;
+  slug?: string;
+  description?: string;
+  eventType?: PkiAlertEventTypeV2;
+  alertBefore?: string;
+  filters?: TPkiFilterRuleV2[];
+  enabled?: boolean;
+  channels?: Omit<TPkiAlertChannelV2, "id" | "createdAt" | "updatedAt">[];
+}
+
+export interface TDeletePkiAlertV2 {
+  alertId: string;
+}
+
+export interface TGetPkiAlertV2MatchingCertificates {
+  alertId: string;
+  limit?: number;
+  offset?: number;
+}
+
+export interface TGetPkiAlertV2MatchingCertificatesResponse {
+  certificates: TPkiCertificateMatchV2[];
+  total: number;
+  limit: number;
+  offset: number;
+}
+
+export interface TGetPkiAlertV2CurrentMatchingCertificates {
+  projectId: string;
+  filters: TPkiFilterRuleV2[];
+  alertBefore: string;
+  limit?: number;
+  offset?: number;
+}
+
+export interface TGetPkiAlertV2CurrentMatchingCertificatesResponse {
+  certificates: TPkiCertificateMatchV2[];
+  total: number;
+  limit: number;
+  offset: number;
+}
+
+export const pkiFilterRuleV2Schema = z.object({
+  field: z.nativeEnum(PkiFilterFieldV2),
+  operator: z.nativeEnum(PkiFilterOperatorV2),
+  value: z.union([z.string(), z.array(z.string()), z.boolean()])
+});
+
+const emailChannelConfigSchema = z.object({
+  recipients: z
+    .array(z.string())
+    .transform((emails) => emails.filter(Boolean).map((email) => email.trim()))
+    .refine((emails) => emails.length > 0, "At least one email recipient is required")
+    .refine((emails) => emails.length <= 10, "Maximum 10 email recipients allowed")
+    .refine(
+      (emails) => emails.every((email) => z.string().email().safeParse(email).success),
+      "All recipients must be valid email addresses"
+    )
+});
+
+export const pkiAlertChannelV2Schema = z.object({
+  channelType: z.nativeEnum(PkiAlertChannelTypeV2),
+  config: emailChannelConfigSchema,
+  enabled: z.boolean().default(true)
+});
+
+export const createPkiAlertV2Schema = z.object({
+  projectId: z.string().uuid(),
+  slug: z
+    .string()
+    .min(1)
+    .max(255)
+    .regex(/^[a-z0-9]+(?:-[a-z0-9]+)*$/, "Must be a valid slug (lowercase, numbers, hyphens only)"),
+  description: z.string().max(1000).optional(),
+  eventType: z.nativeEnum(PkiAlertEventTypeV2),
+  alertBefore: z
+    .string()
+    .regex(/^\d+[dwmy]$/)
+    .optional(),
+  filters: z.array(pkiFilterRuleV2Schema),
+  enabled: z.boolean().default(true),
+  channels: z.array(pkiAlertChannelV2Schema).min(1)
+});
+
+export const updatePkiAlertV2Schema = createPkiAlertV2Schema.partial().omit({ projectId: true });

frontend/src/pages/cert-manager/AlertingPage/AlertingPage.tsx

@@ -1,15 +1,27 @@
+import { useState } from "react";
 import { Helmet } from "react-helmet";
 import { useTranslation } from "react-i18next";
 
 import { ProjectPermissionCan } from "@app/components/permissions";
-import { PageHeader } from "@app/components/v2";
-import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
+import { PageHeader, Tab, TabList, TabPanel, Tabs } from "@app/components/v2";
+import { ProjectPermissionActions, ProjectPermissionSub, useProject } from "@app/context";
+import { useListWorkspacePkiAlerts } from "@app/hooks/api";
 import { ProjectType } from "@app/hooks/api/projects/types";
+import { PkiAlertsV2Page } from "@app/views/PkiAlertsV2Page";
 
-import { PkiAlertsSection } from "./components";
+import { PkiAlertsSection, PkiCollectionSection } from "./components";
 
 export const AlertingPage = () => {
   const { t } = useTranslation();
+  const { currentProject } = useProject();
+  const [selectedTab, setSelectedTab] = useState("rule-based");
+
+  const { data: v1AlertsData } = useListWorkspacePkiAlerts({
+    projectId: currentProject?.id || ""
+  });
+
+  const hasV1Alerts = v1AlertsData?.alerts && v1AlertsData.alerts.length > 0;
+
   return (
     <div className="mx-auto flex h-full flex-col justify-between bg-bunker-800 text-white">
       <Helmet>
@@ -26,7 +38,33 @@ export const AlertingPage = () => {
           I={ProjectPermissionActions.Read}
           a={ProjectPermissionSub.PkiAlerts}
         >
-          <PkiAlertsSection />
+          {!hasV1Alerts ? (
+            <div>
+              <PkiAlertsV2Page hideContainer />
+            </div>
+          ) : (
+            <Tabs orientation="vertical" value={selectedTab} onValueChange={setSelectedTab}>
+              <TabList>
+                <Tab variant="project" value="rule-based">
+                  Certificate Alerts
+                </Tab>
+                <Tab variant="project" value="legacy">
+                  Collection Alerts (Legacy)
+                </Tab>
+              </TabList>
+
+              <TabPanel value="rule-based">
+                <PkiAlertsV2Page />
+              </TabPanel>
+
+              <TabPanel value="legacy">
+                <div className="space-y-6">
+                  <PkiAlertsSection />
+                  <PkiCollectionSection />
+                </div>
+              </TabPanel>
+            </Tabs>
+          )}
         </ProjectPermissionCan>
       </div>
     </div>

frontend/src/pages/cert-manager/PoliciesPage/PoliciesPage.tsx

@@ -9,7 +9,6 @@ import { ProjectType } from "@app/hooks/api/projects/types";
 import { CertificateProfilesTab } from "./components/CertificateProfilesTab";
 import { CertificatesTab } from "./components/CertificatesTab";
 import { CertificateTemplatesV2Tab } from "./components/CertificateTemplatesV2Tab";
-import { PkiCollectionsTab } from "./components/PkiCollectionsTab";
 
 enum TabSections {
   CertificateProfiles = "profiles",
@@ -54,9 +53,6 @@ export const PoliciesPage = () => {
             <Tab variant="project" value={TabSections.Certificates}>
               Certificates
             </Tab>
-            <Tab variant="project" value={TabSections.PkiCollections}>
-              Certificate Collections
-            </Tab>
           </TabList>
 
           <TabPanel value={TabSections.CertificateProfiles}>
@@ -70,10 +66,6 @@ export const PoliciesPage = () => {
           <TabPanel value={TabSections.Certificates}>
             <CertificatesTab />
           </TabPanel>
-
-          <TabPanel value={TabSections.PkiCollections}>
-            <PkiCollectionsTab />
-          </TabPanel>
         </Tabs>
       </div>
     </div>

frontend/src/views/PkiAlertsV2Page/PkiAlertsV2Page.tsx

@@ -0,0 +1,208 @@
+import { useState } from "react";
+import { faPlus, faSearch } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { createNotification } from "@app/components/notifications";
+import {
+  Button,
+  DeleteActionModal,
+  Input,
+  Pagination,
+  Skeleton,
+  Table,
+  TableContainer,
+  TBody,
+  Td,
+  Th,
+  THead,
+  Tr
+} from "@app/components/v2";
+import { useProject } from "@app/context";
+import { useDebounce } from "@app/hooks";
+import { useDeletePkiAlertV2, useGetPkiAlertsV2 } from "@app/hooks/api/pkiAlertsV2";
+
+import { CreatePkiAlertV2Modal } from "./components/CreatePkiAlertV2Modal";
+import { PkiAlertV2Row } from "./components/PkiAlertV2Row";
+import { ViewPkiAlertV2Modal } from "./components/ViewPkiAlertV2Modal";
+
+interface Props {
+  hideContainer?: boolean;
+}
+
+export const PkiAlertsV2Page = ({ hideContainer = false }: Props) => {
+  const { currentProject } = useProject();
+  const [page, setPage] = useState(1);
+  const [perPage, setPerPage] = useState(25);
+  const [search, setSearch] = useState("");
+  const [debouncedSearch] = useDebounce(search, 500);
+
+  const [alertModal, setAlertModal] = useState<{ isOpen: boolean; alertId?: string }>({
+    isOpen: false
+  });
+  const [viewModal, setViewModal] = useState<{ isOpen: boolean; alertId?: string }>({
+    isOpen: false
+  });
+  const [deleteModal, setDeleteModal] = useState<{
+    isOpen: boolean;
+    alertId?: string;
+    slug?: string;
+  }>({
+    isOpen: false
+  });
+
+  const { data: alertsData, isLoading } = useGetPkiAlertsV2({
+    projectId: currentProject?.id || "",
+    search: debouncedSearch || undefined,
+    limit: perPage,
+    offset: (page - 1) * perPage
+  });
+
+  const { mutateAsync: deletePkiAlert } = useDeletePkiAlertV2();
+
+  const handleDeleteAlert = async () => {
+    if (!deleteModal.alertId) return;
+
+    try {
+      await deletePkiAlert({ alertId: deleteModal.alertId });
+      setDeleteModal({ isOpen: false });
+      createNotification({
+        text: "PKI alert deleted successfully",
+        type: "success"
+      });
+    } catch {
+      createNotification({
+        text: "Failed to delete PKI alert",
+        type: "error"
+      });
+    }
+  };
+
+  const totalPages = Math.ceil((alertsData?.total || 0) / perPage);
+
+  const renderTableContent = () => {
+    if (isLoading) {
+      return Array.from({ length: 5 }, (_, index) => (
+        <Tr key={`skeleton-${index}`}>
+          <Td>
+            <Skeleton className="h-4 w-32" />
+          </Td>
+          <Td>
+            <Skeleton className="h-4 w-24" />
+          </Td>
+          <Td>
+            <Skeleton className="h-4 w-16" />
+          </Td>
+          <Td>
+            <Skeleton className="h-4 w-16" />
+          </Td>
+          <Td className="text-right">
+            <Skeleton className="ml-auto h-4 w-24" />
+          </Td>
+        </Tr>
+      ));
+    }
+
+    if (alertsData?.alerts?.length) {
+      return alertsData.alerts.map((alert) => (
+        <PkiAlertV2Row
+          key={alert.id}
+          alert={alert}
+          onView={() => setViewModal({ isOpen: true, alertId: alert.id })}
+          onEdit={() => setAlertModal({ isOpen: true, alertId: alert.id })}
+          onDelete={() =>
+            setDeleteModal({
+              isOpen: true,
+              alertId: alert.id,
+              slug: alert.slug
+            })
+          }
+        />
+      ));
+    }
+
+    return (
+      <Tr>
+        <Td colSpan={5} className="py-8 text-center text-gray-400">
+          {search ? "No alerts found matching your search." : "No PKI alerts configured yet."}
+        </Td>
+      </Tr>
+    );
+  };
+
+  return (
+    <div className={hideContainer ? "" : "container mx-auto p-6"}>
+      <div className="mb-4 flex items-center justify-between">
+        <div className="flex w-full items-center space-x-4">
+          <div className="relative mr-2 w-full">
+            <FontAwesomeIcon
+              icon={faSearch}
+              className="absolute top-1/2 left-3 -translate-y-1/2 transform text-gray-400"
+            />
+            <Input
+              placeholder="Search alerts..."
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              className="w-full pl-10"
+            />
+          </div>
+        </div>
+
+        <Button
+          variant="solid"
+          colorSchema="primary"
+          leftIcon={<FontAwesomeIcon icon={faPlus} />}
+          onClick={() => setAlertModal({ isOpen: true })}
+        >
+          Create Certificate Alert
+        </Button>
+      </div>
+
+      <TableContainer>
+        <Table>
+          <THead>
+            <Tr>
+              <Th>Name</Th>
+              <Th>Event Type</Th>
+              <Th>Status</Th>
+              <Th>Alert Before</Th>
+              <Th className="text-right">Actions</Th>
+            </Tr>
+          </THead>
+          <TBody>{renderTableContent()}</TBody>
+        </Table>
+      </TableContainer>
+
+      {totalPages > 1 && (
+        <div className="mt-4 flex justify-center">
+          <Pagination
+            count={totalPages}
+            page={page}
+            onChangePage={setPage}
+            perPage={perPage}
+            onChangePerPage={setPerPage}
+          />
+        </div>
+      )}
+
+      <CreatePkiAlertV2Modal
+        isOpen={alertModal.isOpen}
+        onOpenChange={(isOpen) => setAlertModal({ isOpen, alertId: undefined })}
+        alertId={alertModal.alertId}
+      />
+
+      <ViewPkiAlertV2Modal
+        isOpen={viewModal.isOpen}
+        onOpenChange={(isOpen) => setViewModal({ isOpen, alertId: undefined })}
+        alertId={viewModal.alertId}
+      />
+
+      <DeleteActionModal
+        isOpen={deleteModal.isOpen}
+        deleteKey="delete"
+        title={`Delete PKI Alert "${deleteModal.slug}"`}
+        onChange={(isOpen) => setDeleteModal({ isOpen, alertId: undefined, slug: undefined })}
+        onDeleteApproved={handleDeleteAlert}
+      />
+    </div>
+  );
+};

frontend/src/views/PkiAlertsV2Page/components/CreatePkiAlertV2FormSteps.tsx

@@ -0,0 +1,595 @@
+/* eslint-disable react/no-array-index-key */
+import { useState } from "react";
+import { Controller, useFormContext } from "react-hook-form";
+import { faPlus, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Tab } from "@headlessui/react";
+
+import { CertificateDisplayName } from "@app/components/utilities/certificateDisplayUtils";
+import {
+  Button,
+  FormControl,
+  FormLabel,
+  GenericFieldLabel,
+  IconButton,
+  Input,
+  Pagination,
+  Select,
+  SelectItem,
+  Skeleton,
+  Table,
+  TableContainer,
+  TBody,
+  Td,
+  TextArea,
+  Th,
+  THead,
+  Tr
+} from "@app/components/v2";
+import { Badge } from "@app/components/v3";
+import { useProject } from "@app/context";
+import {
+  PkiAlertEventTypeV2,
+  PkiFilterFieldV2,
+  PkiFilterOperatorV2,
+  TCreatePkiAlertV2,
+  TPkiAlertChannelV2,
+  TPkiFilterRuleV2,
+  useGetPkiAlertV2CurrentMatchingCertificates
+} from "@app/hooks/api/pkiAlertsV2";
+
+export const CreatePkiAlertV2FormSteps = () => {
+  const { control, watch, setValue } = useFormContext<TCreatePkiAlertV2>();
+  const { currentProject } = useProject();
+
+  const [certificatesPage, setCertificatesPage] = useState(1);
+  const certificatesPerPage = 10;
+
+  const watchedFilters = watch("filters");
+  const watchedChannels = watch("channels");
+  const watchedEventType = watch("eventType");
+  const watchedAlertBefore = watch("alertBefore");
+
+  const { data: currentCertificatesData, isLoading: isLoadingCurrentCertificates } =
+    useGetPkiAlertV2CurrentMatchingCertificates(
+      {
+        projectId: currentProject?.id || "",
+        filters: watchedFilters || [],
+        alertBefore: watchedAlertBefore || "30d",
+        limit: certificatesPerPage,
+        offset: (certificatesPage - 1) * certificatesPerPage
+      },
+      {
+        enabled: !!currentProject?.id && watchedEventType === PkiAlertEventTypeV2.EXPIRATION,
+        refetchOnWindowFocus: false
+      }
+    );
+
+  const addFilter = () => {
+    const currentFilters = watchedFilters || [];
+    setValue("filters", [
+      ...currentFilters,
+      {
+        field: PkiFilterFieldV2.COMMON_NAME,
+        operator: PkiFilterOperatorV2.CONTAINS,
+        value: ""
+      }
+    ]);
+  };
+
+  const removeFilter = (index: number) => {
+    const currentFilters = watchedFilters || [];
+    setValue(
+      "filters",
+      currentFilters.filter((_, i) => i !== index)
+    );
+  };
+
+  const updateFilter = (index: number, updatedFilter: Partial<TPkiFilterRuleV2>) => {
+    const currentFilters = [...(watchedFilters || [])];
+    currentFilters[index] = { ...currentFilters[index], ...updatedFilter };
+    setValue("filters", currentFilters);
+  };
+
+  const updateChannel = (
+    index: number,
+    updatedChannel: Partial<Omit<TPkiAlertChannelV2, "id" | "createdAt" | "updatedAt">>
+  ) => {
+    const currentChannels = [...(watchedChannels || [])];
+    currentChannels[index] = { ...currentChannels[index], ...updatedChannel };
+    setValue("channels", currentChannels);
+  };
+
+  const getFieldOperators = (field: PkiFilterFieldV2) => {
+    if (field === PkiFilterFieldV2.INCLUDE_CAS) {
+      return [PkiFilterOperatorV2.EQUALS];
+    }
+    return Object.values(PkiFilterOperatorV2);
+  };
+
+  const isValueBoolean = (field: PkiFilterFieldV2) => {
+    return field === PkiFilterFieldV2.INCLUDE_CAS;
+  };
+
+  const canOperatorTakeArray = (operator: PkiFilterOperatorV2) => {
+    return operator === PkiFilterOperatorV2.MATCHES;
+  };
+
+  const formatEventType = (eventType: PkiAlertEventTypeV2) => {
+    switch (eventType) {
+      case PkiAlertEventTypeV2.EXPIRATION:
+        return "Certificate Expiration";
+      case PkiAlertEventTypeV2.RENEWAL:
+        return "Certificate Renewal";
+      case PkiAlertEventTypeV2.ISSUANCE:
+        return "Certificate Issuance";
+      case PkiAlertEventTypeV2.REVOCATION:
+        return "Certificate Revocation";
+      default:
+        return eventType;
+    }
+  };
+
+  const formatAlertBefore = (alertBefore?: string) => {
+    if (!alertBefore) return "-";
+
+    const match = alertBefore.match(/^(\d+)([dwmy])$/);
+    if (!match) return alertBefore;
+
+    const [, value, unit] = match;
+    const unitMap = {
+      d: "days",
+      w: "weeks",
+      m: "months",
+      y: "years"
+    };
+
+    return `${value} ${unitMap[unit as keyof typeof unitMap] || unit}`;
+  };
+
+  return (
+    <>
+      <Tab.Panel>
+        <div className="space-y-6">
+          <p className="mb-4 text-sm text-bunker-300">
+            Choose the event that will trigger this alert notification.
+          </p>
+
+          <div className="w-full">
+            <Controller
+              control={control}
+              name="eventType"
+              render={({ field, fieldState: { error } }) => (
+                <FormControl label="Alert Type" isError={Boolean(error)} errorText={error?.message}>
+                  <Select
+                    defaultValue={field.value}
+                    onValueChange={(value) => field.onChange(value)}
+                    className="w-full"
+                  >
+                    <SelectItem value={PkiAlertEventTypeV2.EXPIRATION}>
+                      Certificate Expiration
+                    </SelectItem>
+                  </Select>
+                </FormControl>
+              )}
+            />
+          </div>
+        </div>
+      </Tab.Panel>
+
+      <Tab.Panel>
+        <div className="space-y-6">
+          <p className="mb-4 text-sm text-bunker-300">
+            Configure the name, description, and timing for your alert.
+          </p>
+
+          <Controller
+            control={control}
+            name="slug"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl label="Alert Slug" isError={Boolean(error)} errorText={error?.message}>
+                <Input {...field} placeholder="e.g., prod-cert-expiring-soon" />
+              </FormControl>
+            )}
+          />
+
+          <Controller
+            control={control}
+            name="description"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Description (Optional)"
+                isError={Boolean(error)}
+                errorText={error?.message}
+              >
+                <TextArea {...field} placeholder="Alert description..." rows={2} />
+              </FormControl>
+            )}
+          />
+
+          {watchedEventType === PkiAlertEventTypeV2.EXPIRATION && (
+            <Controller
+              control={control}
+              name="alertBefore"
+              render={({ field, fieldState: { error } }) => (
+                <FormControl
+                  label="Alert Before"
+                  isError={Boolean(error)}
+                  errorText={error?.message}
+                  helperText="Format: number + unit (d=days, w=weeks, m=months, y=years). Example: 30d"
+                >
+                  <Input {...field} placeholder="30d" />
+                </FormControl>
+              )}
+            />
+          )}
+        </div>
+      </Tab.Panel>
+
+      <Tab.Panel>
+        <div className="space-y-6">
+          <p className="mb-4 text-sm text-bunker-300">
+            Add filter rules to specify which certificates should trigger this alert. Leave empty to
+            monitor all certificates.
+          </p>
+
+          <div className="space-y-4">
+            <div className="flex items-center justify-between">
+              <FormLabel label="Certificate Filter Rules" />
+              <Button
+                type="button"
+                variant="outline_bg"
+                size="sm"
+                leftIcon={<FontAwesomeIcon icon={faPlus} />}
+                onClick={addFilter}
+              >
+                Add Filter
+              </Button>
+            </div>
+
+            {watchedFilters?.map((filter, index) => (
+              <div
+                key={`filter-${filter.field}-${filter.operator}-${String(filter.value)}-${index}`}
+                className="space-y-2 rounded-md border border-mineshaft-600 p-3"
+              >
+                <div className="flex items-center justify-between">
+                  <h4 className="text-sm font-medium text-mineshaft-100">
+                    Filter Rule #{index + 1}
+                  </h4>
+                  <IconButton
+                    size="sm"
+                    variant="plain"
+                    colorSchema="danger"
+                    ariaLabel="Remove filter"
+                    onClick={() => removeFilter(index)}
+                  >
+                    <FontAwesomeIcon icon={faTrash} />
+                  </IconButton>
+                </div>
+
+                <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
+                  <div className="md:col-span-1">
+                    <FormControl label="Field">
+                      <Select
+                        value={filter.field}
+                        onValueChange={(value) =>
+                          updateFilter(index, {
+                            field: value as PkiFilterFieldV2,
+                            operator:
+                              value === PkiFilterFieldV2.INCLUDE_CAS
+                                ? PkiFilterOperatorV2.EQUALS
+                                : filter.operator,
+                            value: isValueBoolean(value as PkiFilterFieldV2) ? false : ""
+                          })
+                        }
+                        className="w-full min-w-[200px]"
+                      >
+                        <SelectItem value={PkiFilterFieldV2.COMMON_NAME}>Common Name</SelectItem>
+                        <SelectItem value={PkiFilterFieldV2.PROFILE_NAME}>Profile Name</SelectItem>
+                        <SelectItem value={PkiFilterFieldV2.SAN}>
+                          Subject Alternative Names
+                        </SelectItem>
+                        <SelectItem value={PkiFilterFieldV2.INCLUDE_CAS}>
+                          Include Certificate Authorities
+                        </SelectItem>
+                      </Select>
+                    </FormControl>
+                  </div>
+
+                  <div className="md:col-span-1">
+                    <FormControl label="Operator">
+                      <Select
+                        value={filter.operator}
+                        onValueChange={(value) =>
+                          updateFilter(index, { operator: value as PkiFilterOperatorV2 })
+                        }
+                        className="w-full min-w-[140px]"
+                      >
+                        {getFieldOperators(filter.field).map((operator) => (
+                          <SelectItem key={operator} value={operator}>
+                            {operator
+                              .replace(/_/g, " ")
+                              .toLowerCase()
+                              .replace(/\b\w/g, (l) => l.toUpperCase())}
+                          </SelectItem>
+                        ))}
+                      </Select>
+                    </FormControl>
+                  </div>
+
+                  <div className="md:col-span-1">
+                    <FormControl label="Value">
+                      {isValueBoolean(filter.field) ? (
+                        <Select
+                          value={String(filter.value)}
+                          onValueChange={(value) =>
+                            updateFilter(index, { value: value === "true" })
+                          }
+                          className="w-full"
+                        >
+                          <SelectItem value="true">Yes</SelectItem>
+                          <SelectItem value="false">No</SelectItem>
+                        </Select>
+                      ) : (
+                        <Input
+                          value={
+                            Array.isArray(filter.value)
+                              ? filter.value.join(", ")
+                              : String(filter.value || "")
+                          }
+                          onChange={(e) => {
+                            const { value } = e.target;
+                            updateFilter(index, { value });
+                          }}
+                          onBlur={(e) => {
+                            const { value } = e.target;
+                            if (canOperatorTakeArray(filter.operator) && value.includes(",")) {
+                              const finalValue = value
+                                .split(",")
+                                .map((v) => v.trim())
+                                .filter(Boolean);
+                              updateFilter(index, { value: finalValue });
+                            }
+                          }}
+                          placeholder={
+                            canOperatorTakeArray(filter.operator)
+                              ? "example.com, test.com"
+                              : "example.com"
+                          }
+                          className="w-full"
+                        />
+                      )}
+                    </FormControl>
+                  </div>
+                </div>
+              </div>
+            ))}
+
+            {(!watchedFilters || watchedFilters.length === 0) && (
+              <div className="py-8 text-center text-bunker-400">
+                No filter rules configured. This alert will monitor all certificates.
+              </div>
+            )}
+          </div>
+        </div>
+      </Tab.Panel>
+
+      <Tab.Panel>
+        <div className="space-y-6">
+          <p className="mb-4 text-sm text-bunker-300">
+            Preview all certificates that match your filter criteria. This shows all non-expired
+            certificates that would be monitored by this alert.
+          </p>
+
+          <div className="space-y-4">
+            <TableContainer>
+              <Table>
+                <THead>
+                  <Tr>
+                    <Th className="w-1/2">SAN / CN</Th>
+                    <Th className="w-1/4">Not Before</Th>
+                    <Th className="w-1/4">Not After</Th>
+                  </Tr>
+                </THead>
+                <TBody>
+                  {(() => {
+                    if (watchedEventType !== PkiAlertEventTypeV2.EXPIRATION) {
+                      return (
+                        <Tr>
+                          <Td colSpan={3} className="py-8 text-center text-gray-400">
+                            Preview is only available for Certificate Expiration alerts
+                          </Td>
+                        </Tr>
+                      );
+                    }
+
+                    if (isLoadingCurrentCertificates) {
+                      return Array.from({ length: 5 }, (_, index) => (
+                        <Tr key={`skeleton-row-${index}`}>
+                          <Td>
+                            <Skeleton className="h-4 w-32" />
+                          </Td>
+                          <Td>
+                            <Skeleton className="h-4 w-24" />
+                          </Td>
+                          <Td>
+                            <Skeleton className="h-4 w-24" />
+                          </Td>
+                        </Tr>
+                      ));
+                    }
+
+                    if (currentCertificatesData?.certificates?.length) {
+                      return currentCertificatesData.certificates.map((cert) => (
+                        <Tr key={cert.id} className="group h-10">
+                          <Td className="max-w-0">
+                            <div className="flex items-center gap-2">
+                              <CertificateDisplayName
+                                cert={{
+                                  altNames: cert.san?.join(", ") || null,
+                                  commonName: cert.commonName
+                                }}
+                                maxLength={48}
+                                fallback="—"
+                              />
+                              {(cert.enrollmentType === "ca" ||
+                                cert.enrollmentType === "internal-ca") && (
+                                <Badge variant="info" className="shrink-0 text-xs">
+                                  CA
+                                </Badge>
+                              )}
+                            </div>
+                          </Td>
+                          <Td>
+                            {cert.notBefore
+                              ? new Date(cert.notBefore).toLocaleDateString("en-CA")
+                              : "-"}
+                          </Td>
+                          <Td>
+                            {cert.notAfter
+                              ? new Date(cert.notAfter).toLocaleDateString("en-CA")
+                              : "-"}
+                          </Td>
+                        </Tr>
+                      ));
+                    }
+
+                    return (
+                      <Tr>
+                        <Td colSpan={3} className="py-8 text-center text-gray-400">
+                          No certificates currently match this alert&apos;s criteria
+                        </Td>
+                      </Tr>
+                    );
+                  })()}
+                </TBody>
+              </Table>
+            </TableContainer>
+
+            {(currentCertificatesData?.total || 0) > 0 && (
+              <div className="flex justify-center">
+                <Pagination
+                  count={currentCertificatesData?.total || 0}
+                  page={certificatesPage}
+                  onChangePage={setCertificatesPage}
+                  perPage={certificatesPerPage}
+                  onChangePerPage={() => {}}
+                />
+              </div>
+            )}
+          </div>
+        </div>
+      </Tab.Panel>
+
+      <Tab.Panel>
+        <div className="space-y-6">
+          <p className="mb-4 text-sm text-bunker-300">
+            Set up email notifications to receive alerts when events occur.
+          </p>
+
+          <div className="space-y-4">
+            <FormControl label="Email Recipients">
+              <TextArea
+                defaultValue={
+                  Array.isArray((watchedChannels?.[0]?.config as any)?.recipients)
+                    ? (watchedChannels[0].config as any).recipients.join(", ")
+                    : ""
+                }
+                onBlur={(e) => {
+                  const emailList = e.target.value
+                    .split(",")
+                    .map((email) => email.trim())
+                    .filter((email) => email.length > 0);
+                  updateChannel(0, { config: { recipients: emailList }, enabled: true });
+                }}
+                placeholder="[email protected], [email protected]"
+                className="w-full"
+                rows={2}
+              />
+            </FormControl>
+          </div>
+        </div>
+      </Tab.Panel>
+
+      <Tab.Panel>
+        <div className="mb-4 flex flex-col gap-6">
+          <p className="mb-4 text-sm text-bunker-300">
+            Please review the settings below before creating your alert.
+          </p>
+
+          <div className="flex flex-col gap-3">
+            <div className="w-full border-b border-mineshaft-600">
+              <span className="text-sm text-mineshaft-300">Basic Information</span>
+            </div>
+            <div className="flex flex-wrap gap-x-8 gap-y-2">
+              <GenericFieldLabel label="Slug">{watch("slug") || "Not specified"}</GenericFieldLabel>
+              <GenericFieldLabel label="Event Type">
+                {formatEventType(watchedEventType)}
+              </GenericFieldLabel>
+              <GenericFieldLabel label="Status">
+                <div className="mt-1">
+                  <Badge variant={watch("enabled") ? "success" : "danger"}>
+                    {watch("enabled") ? "Enabled" : "Disabled"}
+                  </Badge>
+                </div>
+              </GenericFieldLabel>
+              {watchedEventType === PkiAlertEventTypeV2.EXPIRATION && (
+                <GenericFieldLabel label="Alert Before">
+                  {formatAlertBefore(watch("alertBefore"))}
+                </GenericFieldLabel>
+              )}
+              {watch("description") && (
+                <GenericFieldLabel label="Description">{watch("description")}</GenericFieldLabel>
+              )}
+            </div>
+          </div>
+
+          <div className="flex flex-col gap-3">
+            <div className="w-full border-b border-mineshaft-600">
+              <span className="text-sm text-mineshaft-300">Filter Rules</span>
+            </div>
+            <div className="flex flex-wrap gap-x-8 gap-y-2">
+              {watchedFilters && watchedFilters.length > 0 ? (
+                watchedFilters.map((filter, index) => (
+                  <GenericFieldLabel
+                    key={`review-filter-${filter.field}-${filter.operator}-${String(filter.value)}-${index}`}
+                    label={`Rule ${index + 1}`}
+                  >
+                    <span className="font-mono text-xs">
+                      {filter.field
+                        .replace(/_/g, " ")
+                        .toLowerCase()
+                        .replace(/\b\w/g, (l) => l.toUpperCase())}{" "}
+                      {filter.operator
+                        .replace(/_/g, " ")
+                        .toLowerCase()
+                        .replace(/\b\w/g, (l) => l.toUpperCase())}{" "}
+                      &quot;{String(filter.value)}&quot;
+                    </span>
+                  </GenericFieldLabel>
+                ))
+              ) : (
+                <span className="text-bunker-400">
+                  No filter rules - will monitor all certificates
+                </span>
+              )}
+            </div>
+          </div>
+
+          <div className="flex flex-col gap-3">
+            <div className="w-full border-b border-mineshaft-600">
+              <span className="text-sm text-mineshaft-300">Notifications</span>
+            </div>
+            <div className="flex flex-wrap gap-x-8 gap-y-3">
+              <GenericFieldLabel label="Email Recipients">
+                {Array.isArray((watchedChannels?.[0]?.config as any)?.recipients)
+                  ? (watchedChannels[0].config as any).recipients.join(", ")
+                  : (watchedChannels?.[0]?.config as any)?.recipients || "No recipients"}
+              </GenericFieldLabel>
+            </div>
+          </div>
+        </div>
+      </Tab.Panel>
+    </>
+  );
+};

frontend/src/views/PkiAlertsV2Page/components/CreatePkiAlertV2Modal.tsx

@@ -0,0 +1,268 @@
+import React, { useState } from "react";
+import { FormProvider, useForm } from "react-hook-form";
+import { Tab } from "@headlessui/react";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { twMerge } from "tailwind-merge";
+
+import { createNotification } from "@app/components/notifications";
+import { Button, Modal, ModalContent } from "@app/components/v2";
+import { useProject } from "@app/context";
+import {
+  createPkiAlertV2Schema,
+  PkiAlertChannelTypeV2,
+  PkiAlertEventTypeV2,
+  TCreatePkiAlertV2,
+  TPkiAlertChannelConfigEmail,
+  TPkiAlertV2,
+  TUpdatePkiAlertV2,
+  updatePkiAlertV2Schema,
+  useCreatePkiAlertV2,
+  useGetPkiAlertV2ById,
+  useUpdatePkiAlertV2
+} from "@app/hooks/api/pkiAlertsV2";
+
+import { CreatePkiAlertV2FormSteps } from "./CreatePkiAlertV2FormSteps";
+
+interface Props {
+  isOpen: boolean;
+  onOpenChange: (isOpen: boolean) => void;
+  alertToEdit?: TPkiAlertV2;
+  alertId?: string;
+}
+
+type TFormData = TCreatePkiAlertV2;
+
+const FORM_TABS: { name: string; key: string; fields: (keyof TFormData)[] }[] = [
+  { name: "Alert Type", key: "alertType", fields: ["eventType"] },
+  {
+    name: "Details",
+    key: "basicInfo",
+    fields: ["slug", "description", "alertBefore"]
+  },
+  { name: "Filters", key: "filterRules", fields: ["filters"] },
+  { name: "Preview", key: "preview", fields: [] },
+  { name: "Channels", key: "channels", fields: ["channels"] },
+  { name: "Review", key: "review", fields: [] }
+];
+
+export const CreatePkiAlertV2Modal = ({ isOpen, onOpenChange, alertToEdit, alertId }: Props) => {
+  const { currentProject } = useProject();
+  const [selectedTabIndex, setSelectedTabIndex] = useState(0);
+
+  const { data: fetchedAlert } = useGetPkiAlertV2ById(
+    { alertId: alertId || "" },
+    { enabled: !!alertId && isOpen && !alertToEdit }
+  );
+
+  const editingAlert = alertToEdit || fetchedAlert;
+  const isEditing = !!(editingAlert || alertId);
+
+  const formMethods = useForm<TFormData>({
+    resolver: zodResolver(isEditing ? updatePkiAlertV2Schema : createPkiAlertV2Schema),
+    defaultValues: {
+      projectId: currentProject?.id || "",
+      slug: "",
+      description: "",
+      eventType: PkiAlertEventTypeV2.EXPIRATION,
+      alertBefore: "30d",
+      filters: [],
+      enabled: true,
+      channels: [
+        {
+          channelType: PkiAlertChannelTypeV2.EMAIL,
+          config: { recipients: [] },
+          enabled: true
+        }
+      ]
+    },
+    reValidateMode: "onBlur"
+  });
+
+  const { handleSubmit, trigger, reset } = formMethods;
+
+  const { mutateAsync: createAlert } = useCreatePkiAlertV2();
+  const { mutateAsync: updateAlert } = useUpdatePkiAlertV2();
+
+  const handleModalClose = () => {
+    reset();
+    setSelectedTabIndex(0);
+    onOpenChange(false);
+  };
+
+  React.useEffect(() => {
+    if (editingAlert && isEditing) {
+      reset({
+        projectId: currentProject?.id || "",
+        slug: editingAlert.slug,
+        description: editingAlert.description || "",
+        eventType: editingAlert.eventType,
+        alertBefore: editingAlert.alertBefore || "30d",
+        filters: editingAlert.filters || [],
+        enabled: editingAlert.enabled,
+        channels: editingAlert.channels?.map(({ id, createdAt, updatedAt, ...channel }) => {
+          if (channel.channelType === PkiAlertChannelTypeV2.EMAIL) {
+            const emailConfig = channel.config as TPkiAlertChannelConfigEmail;
+            return {
+              ...channel,
+              config: {
+                recipients: Array.isArray(emailConfig.recipients) ? emailConfig.recipients : []
+              }
+            };
+          }
+          return channel;
+        }) || [
+          {
+            channelType: PkiAlertChannelTypeV2.EMAIL,
+            config: { recipients: [] },
+            enabled: true
+          }
+        ]
+      });
+    } else if (!isEditing) {
+      reset({
+        projectId: currentProject?.id || "",
+        slug: "",
+        description: "",
+        eventType: PkiAlertEventTypeV2.EXPIRATION,
+        alertBefore: "30d",
+        filters: [],
+        enabled: true,
+        channels: [
+          {
+            channelType: PkiAlertChannelTypeV2.EMAIL,
+            config: { recipients: [] },
+            enabled: true
+          }
+        ]
+      });
+    }
+  }, [editingAlert, isEditing, currentProject?.id, reset]);
+
+  const onSubmit = async (data: TFormData) => {
+    if (!currentProject?.id) return;
+
+    const processedData = {
+      ...data,
+      channels: data.channels?.map((channel) => {
+        if (channel.channelType === PkiAlertChannelTypeV2.EMAIL) {
+          const emailConfig = channel.config as TPkiAlertChannelConfigEmail;
+          return {
+            ...channel,
+            config: {
+              recipients: Array.isArray(emailConfig.recipients) ? emailConfig.recipients : []
+            }
+          };
+        }
+        return channel;
+      })
+    };
+
+    try {
+      if (isEditing && (alertId || editingAlert?.id)) {
+        await updateAlert({
+          alertId: alertId || editingAlert!.id,
+          ...processedData
+        } as TUpdatePkiAlertV2);
+      } else {
+        await createAlert({
+          ...processedData,
+          projectId: currentProject.id
+        });
+      }
+
+      createNotification({
+        text: `PKI alert ${isEditing ? "updated" : "created"} successfully`,
+        type: "success"
+      });
+
+      handleModalClose();
+    } catch {
+      createNotification({
+        text: `Failed to ${isEditing ? "update" : "create"} PKI alert`,
+        type: "error"
+      });
+    }
+  };
+
+  const handlePrev = () => {
+    if (selectedTabIndex === 0) {
+      onOpenChange(false);
+      return;
+    }
+    setSelectedTabIndex((prev) => prev - 1);
+  };
+
+  const isStepValid = async (index: number) => trigger(FORM_TABS[index].fields);
+
+  const isFinalStep = selectedTabIndex === FORM_TABS.length - 1;
+
+  const handleNext = async () => {
+    if (isFinalStep) {
+      await handleSubmit(onSubmit)();
+      return;
+    }
+
+    const isValid = await isStepValid(selectedTabIndex);
+    if (!isValid) return;
+
+    setSelectedTabIndex((prev) => prev + 1);
+  };
+
+  const isTabEnabled = async (index: number) => {
+    const validationPromises = [];
+    for (let i = index - 1; i >= 0; i -= 1) {
+      validationPromises.push(isStepValid(i));
+    }
+    const results = await Promise.all(validationPromises);
+    return results.every(Boolean);
+  };
+
+  return (
+    <Modal isOpen={isOpen} onOpenChange={handleModalClose}>
+      <ModalContent
+        title={`${isEditing ? "Update" : "Create"} Certificate Alert`}
+        className="max-w-2xl"
+      >
+        <form className={twMerge(isFinalStep && "max-h-[70vh] overflow-y-auto")}>
+          <FormProvider {...formMethods}>
+            <Tab.Group selectedIndex={selectedTabIndex} onChange={setSelectedTabIndex}>
+              <Tab.List className="-pb-1 mb-6 w-full border-b-2 border-mineshaft-600">
+                {FORM_TABS.map((tab, index) => (
+                  <Tab
+                    onClick={async (e) => {
+                      e.preventDefault();
+                      const isEnabled = await isTabEnabled(index);
+                      setSelectedTabIndex((prev) => (isEnabled ? index : prev));
+                    }}
+                    className={({ selected }) =>
+                      `-mb-[0.14rem] whitespace-nowrap ${index > selectedTabIndex ? "opacity-30" : ""} px-4 py-2 text-sm font-medium outline-hidden disabled:opacity-60 ${
+                        selected
+                          ? "border-b-2 border-mineshaft-300 text-mineshaft-200"
+                          : "text-bunker-300"
+                      }`
+                    }
+                    key={tab.key}
+                  >
+                    {index + 1}. {tab.name}
+                  </Tab>
+                ))}
+              </Tab.List>
+              <Tab.Panels>
+                <CreatePkiAlertV2FormSteps />
+              </Tab.Panels>
+            </Tab.Group>
+          </FormProvider>
+
+          <div className="flex w-full flex-row-reverse justify-between gap-4 pt-4">
+            <Button onClick={handleNext} colorSchema="secondary">
+              {isFinalStep ? `${isEditing ? "Update" : "Create"} Alert` : "Next"}
+            </Button>
+            <Button onClick={handlePrev} colorSchema="secondary">
+              {selectedTabIndex === 0 ? "Cancel" : "Back"}
+            </Button>
+          </div>
+        </form>
+      </ModalContent>
+    </Modal>
+  );
+};

frontend/src/views/PkiAlertsV2Page/components/PkiAlertV2Row.tsx

@@ -0,0 +1,136 @@
+import {
+  faCircleInfo,
+  faEllipsisH,
+  faEye,
+  faPencil,
+  faPlay,
+  faStop,
+  faTrash
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { createNotification } from "@app/components/notifications";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  IconButton,
+  Td,
+  Tooltip,
+  Tr
+} from "@app/components/v2";
+import { Badge } from "@app/components/v3";
+import { PkiAlertEventTypeV2, TPkiAlertV2, useUpdatePkiAlertV2 } from "@app/hooks/api/pkiAlertsV2";
+
+interface Props {
+  alert: TPkiAlertV2;
+  onView: () => void;
+  onEdit: () => void;
+  onDelete: () => void;
+}
+
+export const PkiAlertV2Row = ({ alert, onView, onEdit, onDelete }: Props) => {
+  const { mutateAsync: updateAlert } = useUpdatePkiAlertV2();
+
+  const formatEventType = (eventType: PkiAlertEventTypeV2) => {
+    switch (eventType) {
+      case PkiAlertEventTypeV2.EXPIRATION:
+        return "Certificate Expiration";
+      case PkiAlertEventTypeV2.RENEWAL:
+        return "Certificate Renewal";
+      case PkiAlertEventTypeV2.ISSUANCE:
+        return "Certificate Issuance";
+      case PkiAlertEventTypeV2.REVOCATION:
+        return "Certificate Revocation";
+      default:
+        return eventType;
+    }
+  };
+
+  const handleToggleAlert = async () => {
+    try {
+      await updateAlert({
+        alertId: alert.id,
+        enabled: !alert.enabled
+      });
+      createNotification({
+        text: `Alert ${!alert.enabled ? "enabled" : "disabled"} successfully`,
+        type: "success"
+      });
+    } catch {
+      createNotification({
+        text: "Failed to update alert status",
+        type: "error"
+      });
+    }
+  };
+
+  const formatAlertBefore = (alertBefore?: string) => {
+    if (!alertBefore) return "-";
+
+    const match = alertBefore.match(/^(\\d+)([dwmy])$/);
+    if (!match) return alertBefore;
+
+    const [, value, unit] = match;
+    const unitMap = {
+      d: "days",
+      w: "weeks",
+      m: "months",
+      y: "years"
+    };
+
+    return `${value} ${unitMap[unit as keyof typeof unitMap] || unit}`;
+  };
+
+  return (
+    <Tr>
+      <Td>
+        <div className="flex items-center gap-2">
+          <div className="font-medium text-gray-200">{alert.slug}</div>
+          {alert.description && (
+            <Tooltip content={alert.description}>
+              <FontAwesomeIcon icon={faCircleInfo} className="text-mineshaft-400" />
+            </Tooltip>
+          )}
+        </div>
+      </Td>
+      <Td>
+        <span className="text-gray-300">{formatEventType(alert.eventType)}</span>
+      </Td>
+      <Td>
+        <Badge variant={alert.enabled ? "success" : "neutral"}>
+          {alert.enabled ? "Enabled" : "Disabled"}
+        </Badge>
+      </Td>
+      <Td className="text-gray-300">{formatAlertBefore(alert.alertBefore)}</Td>
+      <Td className="text-right">
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <IconButton size="sm" variant="plain" ariaLabel="Alert actions">
+              <FontAwesomeIcon icon={faEllipsisH} />
+            </IconButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuItem onClick={onView}>
+              <FontAwesomeIcon icon={faEye} className="mr-2 h-4 w-4" />
+              View details
+            </DropdownMenuItem>
+            <DropdownMenuItem onClick={onEdit}>
+              <FontAwesomeIcon icon={faPencil} className="mr-2 h-4 w-4" />
+              Edit alert
+            </DropdownMenuItem>
+            <DropdownMenuItem onClick={handleToggleAlert}>
+              <FontAwesomeIcon icon={alert.enabled ? faStop : faPlay} className="mr-2 h-4 w-4" />
+              {alert.enabled ? "Disable" : "Enable"} alert
+            </DropdownMenuItem>
+            <DropdownMenuItem onClick={onDelete} className="text-red-600">
+              <FontAwesomeIcon icon={faTrash} className="mr-2 h-4 w-4" />
+              Delete alert
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </Td>
+    </Tr>
+  );
+};

frontend/src/views/PkiAlertsV2Page/components/UpdatePkiAlertV2Modal.tsx

@@ -0,0 +1,478 @@
+import { useEffect, useState } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { faPlus, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { zodResolver } from "@hookform/resolvers/zod";
+
+import { createNotification } from "@app/components/notifications";
+import {
+  Button,
+  FormControl,
+  FormLabel,
+  IconButton,
+  Input,
+  Modal,
+  ModalContent,
+  Select,
+  SelectItem,
+  Skeleton,
+  Switch,
+  TextArea
+} from "@app/components/v2";
+import {
+  PkiAlertChannelTypeV2,
+  PkiAlertEventTypeV2,
+  PkiFilterFieldV2,
+  PkiFilterOperatorV2,
+  TPkiAlertChannelV2,
+  TPkiFilterRuleV2,
+  TUpdatePkiAlertV2,
+  updatePkiAlertV2Schema,
+  useGetPkiAlertV2ById,
+  useUpdatePkiAlertV2
+} from "@app/hooks/api/pkiAlertsV2";
+
+interface Props {
+  isOpen: boolean;
+  onOpenChange: (isOpen: boolean) => void;
+  alertId?: string;
+}
+
+type TFormData = Omit<TUpdatePkiAlertV2, "alertId">;
+
+export const UpdatePkiAlertV2Modal = ({ isOpen, onOpenChange, alertId }: Props) => {
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const { control, handleSubmit, reset, watch, setValue } = useForm<TFormData>({
+    resolver: zodResolver(updatePkiAlertV2Schema)
+  });
+
+  const { data: alert, isLoading } = useGetPkiAlertV2ById(
+    { alertId: alertId || "" },
+    { enabled: !!alertId && isOpen }
+  );
+
+  const { mutateAsync: updateAlert } = useUpdatePkiAlertV2();
+
+  const watchedFilters = watch("filters");
+  const watchedChannels = watch("channels");
+
+  useEffect(() => {
+    if (alert) {
+      reset({
+        slug: alert.slug,
+        description: alert.description || "",
+        eventType: alert.eventType,
+        alertBefore: alert.alertBefore || "",
+        filters: alert.filters,
+        enabled: alert.enabled,
+        channels: alert.channels.map(({ id, createdAt, updatedAt, ...channel }) => channel)
+      });
+    }
+  }, [alert, reset]);
+
+  const addFilter = () => {
+    const currentFilters = watchedFilters || [];
+    setValue("filters", [
+      ...currentFilters,
+      {
+        field: PkiFilterFieldV2.COMMON_NAME,
+        operator: PkiFilterOperatorV2.CONTAINS,
+        value: ""
+      }
+    ]);
+  };
+
+  const removeFilter = (index: number) => {
+    const currentFilters = watchedFilters || [];
+    setValue(
+      "filters",
+      currentFilters.filter((_, i) => i !== index)
+    );
+  };
+
+  const updateFilter = (index: number, updatedFilter: Partial<TPkiFilterRuleV2>) => {
+    const currentFilters = [...(watchedFilters || [])];
+    currentFilters[index] = { ...currentFilters[index], ...updatedFilter };
+    setValue("filters", currentFilters);
+  };
+
+  const addChannel = () => {
+    const currentChannels = watchedChannels || [];
+    setValue("channels", [
+      ...currentChannels,
+      {
+        channelType: PkiAlertChannelTypeV2.EMAIL,
+        config: { recipients: [] },
+        enabled: true
+      }
+    ]);
+  };
+
+  const removeChannel = (index: number) => {
+    const currentChannels = watchedChannels || [];
+    if (currentChannels.length > 1) {
+      setValue(
+        "channels",
+        currentChannels.filter((_, i) => i !== index)
+      );
+    }
+  };
+
+  const updateChannel = (
+    index: number,
+    updatedChannel: Partial<Omit<TPkiAlertChannelV2, "id" | "createdAt" | "updatedAt">>
+  ) => {
+    const currentChannels = [...(watchedChannels || [])];
+    currentChannels[index] = { ...currentChannels[index], ...updatedChannel };
+    setValue("channels", currentChannels);
+  };
+
+  const onSubmit = async (data: TFormData) => {
+    if (!alertId) return;
+
+    setIsSubmitting(true);
+    try {
+      await updateAlert({
+        alertId,
+        ...data
+      });
+
+      createNotification({
+        text: "PKI alert updated successfully",
+        type: "success"
+      });
+
+      onOpenChange(false);
+    } catch {
+      createNotification({
+        text: "Failed to update PKI alert",
+        type: "error"
+      });
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const getFieldOperators = (field: PkiFilterFieldV2) => {
+    if (field === PkiFilterFieldV2.INCLUDE_CAS) {
+      return [PkiFilterOperatorV2.EQUALS];
+    }
+    return Object.values(PkiFilterOperatorV2);
+  };
+
+  const isValueBoolean = (field: PkiFilterFieldV2) => {
+    return field === PkiFilterFieldV2.INCLUDE_CAS;
+  };
+
+  const canOperatorTakeArray = (operator: PkiFilterOperatorV2) => {
+    return operator === PkiFilterOperatorV2.MATCHES;
+  };
+
+  if (isLoading) {
+    return (
+      <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
+        <ModalContent title="Update Certificate Alert" className="max-w-4xl">
+          <div className="space-y-6">
+            <Skeleton className="h-8 w-full" />
+            <Skeleton className="h-8 w-full" />
+            <Skeleton className="h-32 w-full" />
+          </div>
+        </ModalContent>
+      </Modal>
+    );
+  }
+
+  return (
+    <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
+      <ModalContent title="Update Certificate Alert" className="max-w-4xl">
+        <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
+          <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+            <Controller
+              control={control}
+              name="slug"
+              render={({ field, fieldState: { error } }) => (
+                <FormControl label="Alert Name" isError={Boolean(error)} errorText={error?.message}>
+                  <Input {...field} placeholder="certificate-expiration-alert" />
+                </FormControl>
+              )}
+            />
+
+            <Controller
+              control={control}
+              name="eventType"
+              render={({ field, fieldState: { error } }) => (
+                <FormControl label="Event Type" isError={Boolean(error)} errorText={error?.message}>
+                  <Select value={field.value} onValueChange={(value) => field.onChange(value)}>
+                    <SelectItem value={PkiAlertEventTypeV2.EXPIRATION}>
+                      Certificate Expiration
+                    </SelectItem>
+                    <SelectItem value={PkiAlertEventTypeV2.RENEWAL}>Certificate Renewal</SelectItem>
+                    <SelectItem value={PkiAlertEventTypeV2.ISSUANCE}>
+                      Certificate Issuance
+                    </SelectItem>
+                    <SelectItem value={PkiAlertEventTypeV2.REVOCATION}>
+                      Certificate Revocation
+                    </SelectItem>
+                  </Select>
+                </FormControl>
+              )}
+            />
+          </div>
+
+          <Controller
+            control={control}
+            name="description"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Description (Optional)"
+                isError={Boolean(error)}
+                errorText={error?.message}
+              >
+                <TextArea {...field} placeholder="Alert description..." rows={2} />
+              </FormControl>
+            )}
+          />
+
+          <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+            <Controller
+              control={control}
+              name="alertBefore"
+              render={({ field, fieldState: { error } }) => (
+                <FormControl
+                  label="Alert Before (for expiration)"
+                  isError={Boolean(error)}
+                  errorText={error?.message}
+                  helperText="Format: number + unit (d=days, w=weeks, m=months, y=years). Example: 30d"
+                >
+                  <Input {...field} placeholder="30d" />
+                </FormControl>
+              )}
+            />
+
+            <Controller
+              control={control}
+              name="enabled"
+              render={({ field }) => (
+                <FormControl label="Status">
+                  <div className="mt-2 flex items-center space-x-2">
+                    <Switch
+                      id="alert-enabled-update"
+                      isChecked={field.value}
+                      onCheckedChange={field.onChange}
+                    />
+                    <span className="text-sm text-gray-300">
+                      {field.value ? "Enabled" : "Disabled"}
+                    </span>
+                  </div>
+                </FormControl>
+              )}
+            />
+          </div>
+
+          <div className="space-y-4">
+            <div className="flex items-center justify-between">
+              <FormLabel label="Certificate Filter Rules" />
+              <Button
+                type="button"
+                variant="outline_bg"
+                size="sm"
+                leftIcon={<FontAwesomeIcon icon={faPlus} />}
+                onClick={addFilter}
+              >
+                Add Filter
+              </Button>
+            </div>
+
+            {watchedFilters?.map((filter, index) => (
+              <div
+                key={`filter-${filter.field}-${filter.operator}-${String(filter.value)}`}
+                className="space-y-3 rounded-lg border border-gray-600 p-4"
+              >
+                <div className="flex items-center justify-between">
+                  <h4 className="text-sm font-medium text-gray-200">Filter Rule #{index + 1}</h4>
+                  <IconButton
+                    size="sm"
+                    variant="plain"
+                    colorSchema="danger"
+                    ariaLabel="Remove filter"
+                    onClick={() => removeFilter(index)}
+                  >
+                    <FontAwesomeIcon icon={faTrash} />
+                  </IconButton>
+                </div>
+
+                <div className="grid grid-cols-1 gap-3 md:grid-cols-3">
+                  <FormControl label="Field">
+                    <Select
+                      value={filter.field}
+                      onValueChange={(value) =>
+                        updateFilter(index, {
+                          field: value as PkiFilterFieldV2,
+                          operator:
+                            value === PkiFilterFieldV2.INCLUDE_CAS
+                              ? PkiFilterOperatorV2.EQUALS
+                              : filter.operator,
+                          value: isValueBoolean(value as PkiFilterFieldV2) ? false : ""
+                        })
+                      }
+                    >
+                      <SelectItem value={PkiFilterFieldV2.COMMON_NAME}>Common Name</SelectItem>
+                      <SelectItem value={PkiFilterFieldV2.PROFILE_NAME}>Profile Name</SelectItem>
+                      <SelectItem value={PkiFilterFieldV2.SAN}>
+                        Subject Alternative Names
+                      </SelectItem>
+                      <SelectItem value={PkiFilterFieldV2.INCLUDE_CAS}>
+                        Include Certificate Authorities
+                      </SelectItem>
+                    </Select>
+                  </FormControl>
+
+                  <FormControl label="Operator">
+                    <Select
+                      value={filter.operator}
+                      onValueChange={(value) =>
+                        updateFilter(index, { operator: value as PkiFilterOperatorV2 })
+                      }
+                    >
+                      {getFieldOperators(filter.field).map((operator) => (
+                        <SelectItem key={operator} value={operator}>
+                          {operator.replace("_", " ").toUpperCase()}
+                        </SelectItem>
+                      ))}
+                    </Select>
+                  </FormControl>
+
+                  <FormControl label="Value">
+                    {isValueBoolean(filter.field) ? (
+                      <Select
+                        value={String(filter.value)}
+                        onValueChange={(value) => updateFilter(index, { value: value === "true" })}
+                      >
+                        <SelectItem value="true">Yes</SelectItem>
+                        <SelectItem value="false">No</SelectItem>
+                      </Select>
+                    ) : (
+                      <Input
+                        value={
+                          Array.isArray(filter.value)
+                            ? filter.value.join(", ")
+                            : String(filter.value)
+                        }
+                        onChange={(e) => {
+                          const { value } = e.target;
+                          const finalValue =
+                            canOperatorTakeArray(filter.operator) && value.includes(",")
+                              ? value
+                                  .split(",")
+                                  .map((v) => v.trim())
+                                  .filter(Boolean)
+                              : value;
+                          updateFilter(index, { value: finalValue });
+                        }}
+                        placeholder={
+                          canOperatorTakeArray(filter.operator)
+                            ? "example.com, test.com"
+                            : "example.com"
+                        }
+                      />
+                    )}
+                  </FormControl>
+                </div>
+              </div>
+            ))}
+          </div>
+
+          <div className="space-y-4">
+            <div className="flex items-center justify-between">
+              <FormLabel label="Notification Channels" />
+              <Button
+                type="button"
+                variant="outline_bg"
+                size="sm"
+                leftIcon={<FontAwesomeIcon icon={faPlus} />}
+                onClick={addChannel}
+              >
+                Add Channel
+              </Button>
+            </div>
+
+            {watchedChannels?.map((channel, index) => (
+              <div
+                key={`channel-${channel.channelType}-${JSON.stringify(channel.config)}`}
+                className="space-y-3 rounded-lg border border-gray-600 p-4"
+              >
+                <div className="flex items-center justify-between">
+                  <h4 className="text-sm font-medium text-gray-200">Channel #{index + 1}</h4>
+                  {watchedChannels.length > 1 && (
+                    <IconButton
+                      size="sm"
+                      variant="plain"
+                      colorSchema="danger"
+                      ariaLabel="Remove channel"
+                      onClick={() => removeChannel(index)}
+                    >
+                      <FontAwesomeIcon icon={faTrash} />
+                    </IconButton>
+                  )}
+                </div>
+
+                <div className="grid grid-cols-1 gap-3 md:grid-cols-2">
+                  <FormControl label="Channel Type">
+                    <Select
+                      value={channel.channelType}
+                      onValueChange={(value) =>
+                        updateChannel(index, {
+                          channelType: value as PkiAlertChannelTypeV2,
+                          config: { recipients: [] }
+                        })
+                      }
+                    >
+                      <SelectItem value={PkiAlertChannelTypeV2.EMAIL}>Email</SelectItem>
+                    </Select>
+                  </FormControl>
+
+                  <FormControl label="Status">
+                    <div className="mt-2 flex items-center space-x-2">
+                      <Switch
+                        id={`channel-enabled-update-${index}`}
+                        isChecked={channel.enabled}
+                        onCheckedChange={(enabled) => updateChannel(index, { enabled })}
+                      />
+                      <span className="text-sm text-gray-300">
+                        {channel.enabled ? "Enabled" : "Disabled"}
+                      </span>
+                    </div>
+                  </FormControl>
+                </div>
+
+                <FormControl label="Email Recipients">
+                  <Input
+                    value={(channel.config as any)?.recipients?.join(", ") || ""}
+                    onChange={(e) => {
+                      const recipients = e.target.value
+                        .split(",")
+                        .map((email) => email.trim())
+                        .filter(Boolean);
+                      updateChannel(index, { config: { recipients } });
+                    }}
+                    placeholder="[email protected], [email protected]"
+                  />
+                </FormControl>
+              </div>
+            ))}
+          </div>
+
+          <div className="flex justify-end space-x-3 pt-4">
+            <Button type="button" variant="plain" onClick={() => onOpenChange(false)}>
+              Cancel
+            </Button>
+            <Button type="submit" isLoading={isSubmitting} isDisabled={isSubmitting}>
+              Update Alert
+            </Button>
+          </div>
+        </form>
+      </ModalContent>
+    </Modal>
+  );
+};

frontend/src/views/PkiAlertsV2Page/components/ViewPkiAlertV2Modal.tsx

@@ -0,0 +1,359 @@
+import { useEffect, useState } from "react";
+
+import { CertificateDisplayName } from "@app/components/utilities/certificateDisplayUtils";
+import {
+  Modal,
+  ModalContent,
+  Pagination,
+  Skeleton,
+  Tab,
+  Table,
+  TableContainer,
+  TabList,
+  TabPanel,
+  Tabs,
+  TBody,
+  Td,
+  Th,
+  THead,
+  Tr
+} from "@app/components/v2";
+import { Badge } from "@app/components/v3";
+import {
+  PkiAlertEventTypeV2,
+  useGetPkiAlertV2ById,
+  useGetPkiAlertV2MatchingCertificates
+} from "@app/hooks/api/pkiAlertsV2";
+
+interface Props {
+  isOpen: boolean;
+  onOpenChange: (isOpen: boolean) => void;
+  alertId?: string;
+}
+
+export const ViewPkiAlertV2Modal = ({ isOpen, onOpenChange, alertId }: Props) => {
+  const [activeTab, setActiveTab] = useState("overview");
+  const [certificatesPage, setCertificatesPage] = useState(1);
+  const certificatesPerPage = 10;
+
+  const { data: alert, isLoading: isLoadingAlert } = useGetPkiAlertV2ById(
+    { alertId: alertId || "" },
+    { enabled: !!alertId && isOpen }
+  );
+
+  const { data: certificatesData, isLoading: isLoadingCertificates } =
+    useGetPkiAlertV2MatchingCertificates(
+      {
+        alertId: alertId || "",
+        limit: certificatesPerPage,
+        offset: (certificatesPage - 1) * certificatesPerPage
+      },
+      { enabled: !!alertId && isOpen }
+    );
+
+  useEffect(() => {
+    if (isOpen && alertId) {
+      setActiveTab("overview");
+      setCertificatesPage(1);
+    }
+  }, [isOpen, alertId]);
+
+  useEffect(() => {
+    if (!isOpen) {
+      setActiveTab("overview");
+      setCertificatesPage(1);
+    }
+  }, [isOpen]);
+
+  const formatEventType = (eventType: PkiAlertEventTypeV2) => {
+    switch (eventType) {
+      case PkiAlertEventTypeV2.EXPIRATION:
+        return "Certificate Expiration";
+      case PkiAlertEventTypeV2.RENEWAL:
+        return "Certificate Renewal";
+      case PkiAlertEventTypeV2.ISSUANCE:
+        return "Certificate Issuance";
+      case PkiAlertEventTypeV2.REVOCATION:
+        return "Certificate Revocation";
+      default:
+        return eventType;
+    }
+  };
+
+  const formatAlertBefore = (alertBefore?: string) => {
+    if (!alertBefore) return "Not set";
+
+    const match = alertBefore.match(/^(\\d+)([dwmy])$/);
+    if (!match) return alertBefore;
+
+    const [, value, unit] = match;
+    const unitMap = {
+      d: "days",
+      w: "weeks",
+      m: "months",
+      y: "years"
+    };
+
+    return `${value} ${unitMap[unit as keyof typeof unitMap] || unit}`;
+  };
+
+  const formatDate = (dateString: string) => {
+    return new Date(dateString).toLocaleDateString("en-US", {
+      year: "numeric",
+      month: "short",
+      day: "numeric",
+      hour: "2-digit",
+      minute: "2-digit"
+    });
+  };
+
+  if (isLoadingAlert) {
+    return (
+      <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
+        <ModalContent title="Certificate Alert Details" className="max-w-6xl">
+          <div className="space-y-6">
+            <Skeleton className="h-8 w-full" />
+            <Skeleton className="h-32 w-full" />
+            <Skeleton className="h-64 w-full" />
+          </div>
+        </ModalContent>
+      </Modal>
+    );
+  }
+
+  if (!alert) {
+    return (
+      <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
+        <ModalContent title="Certificate Alert Details" className="max-w-6xl">
+          <div className="py-8 text-center text-gray-400">Alert not found</div>
+        </ModalContent>
+      </Modal>
+    );
+  }
+
+  return (
+    <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
+      <ModalContent title="Certificate Alert Details" className="max-w-6xl">
+        <div className="space-y-6">
+          <div className="flex items-center justify-between">
+            <h2 className="text-xl font-semibold text-gray-200">{alert.slug}</h2>
+            <Badge variant={alert.enabled ? "success" : "neutral"}>
+              {alert.enabled ? "Enabled" : "Disabled"}
+            </Badge>
+          </div>
+
+          {alert.description && <p className="text-gray-300">{alert.description}</p>}
+
+          <Tabs value={activeTab} onValueChange={setActiveTab}>
+            <TabList>
+              <Tab value="overview">Overview</Tab>
+              <Tab value="certificates">Matching Certificates</Tab>
+            </TabList>
+
+            <TabPanel value="overview">
+              <div className="space-y-6">
+                <div className="space-y-4">
+                  <h3 className="text-lg font-medium text-gray-200">Basic Information</h3>
+                  <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+                    <div>
+                      <div className="mb-1 block text-sm font-medium text-gray-400">Event Type</div>
+                      <span className="text-gray-300">{formatEventType(alert.eventType)}</span>
+                    </div>
+
+                    <div>
+                      <div className="mb-1 block text-sm font-medium text-gray-400">
+                        Alert Before
+                      </div>
+                      <span className="text-gray-300">{formatAlertBefore(alert.alertBefore)}</span>
+                    </div>
+
+                    <div>
+                      <div className="mb-1 block text-sm font-medium text-gray-400">Created</div>
+                      <span className="text-gray-300">{formatDate(alert.createdAt)}</span>
+                    </div>
+                  </div>
+                </div>
+
+                <div className="space-y-3">
+                  <h3 className="text-lg font-medium text-gray-200">Filter Rules</h3>
+                  {alert.filters.length === 0 ? (
+                    <p className="text-gray-400">No filter rules configured</p>
+                  ) : (
+                    <div className="space-y-2">
+                      {alert.filters.map((filter) => {
+                        const formatFilterText = () => {
+                          const field = filter.field.replace(/_/g, " ");
+                          const operator = filter.operator.replace(/_/g, " ");
+                          const value = Array.isArray(filter.value)
+                            ? filter.value.join(", ")
+                            : String(filter.value);
+
+                          return `${field} ${operator} ${value}`;
+                        };
+
+                        return (
+                          <div
+                            key={`filter-${filter.field}-${filter.operator}-${String(filter.value)}`}
+                          >
+                            <div className="text-sm text-gray-200 capitalize">
+                              {formatFilterText()}
+                            </div>
+                          </div>
+                        );
+                      })}
+                    </div>
+                  )}
+                </div>
+
+                <div className="space-y-3">
+                  <h3 className="text-lg font-medium text-gray-200">Notification Recipients</h3>
+                  {alert.channels.some(
+                    (channel) =>
+                      channel.channelType === "email" && (channel.config as any)?.recipients
+                  ) ? (
+                    <div className="space-y-3">
+                      <div>
+                        <div className="flex flex-wrap gap-1">
+                          {alert.channels
+                            .filter(
+                              (channel) =>
+                                channel.channelType === "email" &&
+                                (channel.config as any)?.recipients
+                            )
+                            .flatMap((channel) => (channel.config as any).recipients)
+                            .map((email: string) => (
+                              <Badge key={`email-${email}`} variant="neutral" className="text-sm">
+                                {email}
+                              </Badge>
+                            ))}
+                        </div>
+                      </div>
+                    </div>
+                  ) : (
+                    <p className="text-gray-400">No notification channels configured</p>
+                  )}
+                </div>
+              </div>
+            </TabPanel>
+
+            <TabPanel value="certificates">
+              <div className="space-y-4">
+                <TableContainer>
+                  <Table>
+                    <THead>
+                      <Tr>
+                        <Th className="w-1/2">SAN / CN</Th>
+                        <Th className="w-1/6">Status</Th>
+                        <Th className="w-1/6">Not Before</Th>
+                        <Th className="w-1/6">Not After</Th>
+                      </Tr>
+                    </THead>
+                    <TBody>
+                      {(() => {
+                        if (isLoadingCertificates) {
+                          return Array.from({ length: 5 }, (_, index) => (
+                            <Tr key={`skeleton-row-${index}`}>
+                              <Td>
+                                <Skeleton className="h-4 w-32" />
+                              </Td>
+                              <Td>
+                                <Skeleton className="h-4 w-16" />
+                              </Td>
+                              <Td>
+                                <Skeleton className="h-4 w-24" />
+                              </Td>
+                              <Td>
+                                <Skeleton className="h-4 w-24" />
+                              </Td>
+                            </Tr>
+                          ));
+                        }
+
+                        if (certificatesData?.certificates?.length) {
+                          return certificatesData.certificates.map((cert) => (
+                            <Tr key={cert.id} className="group h-10">
+                              <Td className="max-w-0">
+                                <div className="flex items-center gap-2">
+                                  <CertificateDisplayName
+                                    cert={{
+                                      altNames: cert.san?.join(", ") || null,
+                                      commonName: cert.commonName
+                                    }}
+                                    maxLength={48}
+                                    fallback="—"
+                                  />
+                                  {cert.enrollmentType === "ca" && (
+                                    <Badge variant="info" className="shrink-0 text-xs">
+                                      CA
+                                    </Badge>
+                                  )}
+                                </div>
+                              </Td>
+                              <Td>
+                                <Badge
+                                  variant={(() => {
+                                    const now = new Date();
+                                    const expirationDate = new Date(cert.notAfter);
+                                    const isExpired = expirationDate < now;
+
+                                    if (isExpired) return "danger";
+                                    if (cert.status === "active") return "success";
+                                    return "neutral";
+                                  })()}
+                                  className="capitalize"
+                                >
+                                  {(() => {
+                                    const now = new Date();
+                                    const expirationDate = new Date(cert.notAfter);
+                                    const isExpired = expirationDate < now;
+
+                                    if (isExpired) return "Expired";
+                                    return cert.status;
+                                  })()}
+                                </Badge>
+                              </Td>
+                              <Td>
+                                {cert.notBefore
+                                  ? new Date(cert.notBefore).toLocaleDateString("en-CA")
+                                  : "-"}
+                              </Td>
+                              <Td>
+                                {cert.notAfter
+                                  ? new Date(cert.notAfter).toLocaleDateString("en-CA")
+                                  : "-"}
+                              </Td>
+                            </Tr>
+                          ));
+                        }
+
+                        return (
+                          <Tr>
+                            <Td colSpan={4} className="py-8 text-center text-gray-400">
+                              No certificates will match this alert&apos;s criteria in the future
+                            </Td>
+                          </Tr>
+                        );
+                      })()}
+                    </TBody>
+                  </Table>
+                </TableContainer>
+
+                {(certificatesData?.total || 0) > 0 && (
+                  <div className="flex justify-center">
+                    <Pagination
+                      count={certificatesData?.total || 0}
+                      page={certificatesPage}
+                      onChangePage={setCertificatesPage}
+                      perPage={certificatesPerPage}
+                      onChangePerPage={() => {}}
+                    />
+                  </div>
+                )}
+              </div>
+            </TabPanel>
+          </Tabs>
+        </div>
+      </ModalContent>
+    </Modal>
+  );
+};

frontend/src/views/PkiAlertsV2Page/components/index.ts

@@ -0,0 +1,4 @@
+export { CreatePkiAlertV2Modal } from "./CreatePkiAlertV2Modal";
+export { PkiAlertV2Row } from "./PkiAlertV2Row";
+export { UpdatePkiAlertV2Modal } from "./UpdatePkiAlertV2Modal";
+export { ViewPkiAlertV2Modal } from "./ViewPkiAlertV2Modal";

frontend/src/views/PkiAlertsV2Page/index.ts

@@ -0,0 +1 @@
+export { PkiAlertsV2Page } from "./PkiAlertsV2Page";