PKI Syncs revamp

2026-10-21 01:16:49 +00:00 · 2025-10-29 13:01:27 -03:00
parent 3e83ae95d1
commit 39eecb328d
64 changed files with 2799 additions and 350 deletions
@@ -1,61 +0,0 @@
-import { Helmet } from "react-helmet";
-import { useTranslation } from "react-i18next";
-
-import { ProjectPermissionCan } from "@app/components/permissions";
-import { PageHeader } from "@app/components/v2";
-import {
-  ProjectPermissionActions,
-  ProjectPermissionCertificateActions,
-  ProjectPermissionSub,
-  useProjectPermission
-} from "@app/context";
-import { ProjectType } from "@app/hooks/api/projects/types";
-
-import { PkiCollectionSection } from "../AlertingPage/components";
-import { CertificatesSection } from "./components";
-
-export const CertificatesPage = () => {
-  const { t } = useTranslation();
-  const { permission } = useProjectPermission();
-
-  const canAccessPkiColl = permission.can(
-    ProjectPermissionActions.Read,
-    ProjectPermissionSub.PkiCollections
-  );
-  const canAccessCerts = permission.can(
-    ProjectPermissionCertificateActions.Read,
-    ProjectPermissionSub.Certificates
-  );
-
-  return (
-    <div className="mx-auto flex h-full flex-col justify-between bg-bunker-800 text-white">
-      <Helmet>
-        <title>{t("common.head-title", { title: "Certificates" })}</title>
-      </Helmet>
-      <div className="mx-auto mb-6 w-full max-w-8xl">
-        <PageHeader
-          scope={ProjectType.CertificateManager}
-          title="Certificates"
-          description="View and track issued certificates, monitor expiration dates, and manage certificate lifecycles."
-        />
-        {/* If both are false, the section does not render. This is to prevent duplicate banners. */}
-        {(canAccessCerts || canAccessPkiColl) && (
-          <ProjectPermissionCan
-            renderGuardBanner
-            I={ProjectPermissionActions.Read}
-            a={ProjectPermissionSub.PkiCollections}
-          >
-            <PkiCollectionSection />
-          </ProjectPermissionCan>
-        )}
-        <ProjectPermissionCan
-          renderGuardBanner
-          I={ProjectPermissionCertificateActions.Read}
-          a={ProjectPermissionSub.Certificates}
-        >
-          <CertificatesSection />
-        </ProjectPermissionCan>
-      </div>
-    </div>
-  );
-};
@@ -0,0 +1,253 @@
+import { useEffect, useMemo, useState } from "react";
+import { faPlus, faSearch } from "@fortawesome/free-solid-svg-icons";
+
+import { createNotification } from "@app/components/notifications";
+import {
+  Button,
+  Checkbox,
+  EmptyState,
+  Input,
+  Modal,
+  ModalContent,
+  Pagination,
+  Table,
+  TableContainer,
+  TBody,
+  Td,
+  Th,
+  THead,
+  Tr
+} from "@app/components/v2";
+import { useProject } from "@app/context";
+import {
+  useAddCertificatesToPkiSync,
+  useListPkiSyncsWithCertificate,
+  useRemoveCertificatesFromPkiSync
+} from "@app/hooks/api/pkiSyncs";
+
+type Props = {
+  popUp: {
+    isOpen: boolean;
+    data?: {
+      certificateId?: string;
+      commonName?: string;
+    };
+  };
+  handlePopUpToggle: (popUpName: "managePkiSyncs", state?: boolean) => void;
+};
+
+const PER_PAGE = 10;
+
+export const CertificateManagePkiSyncsModal = ({ popUp, handlePopUpToggle }: Props) => {
+  const [selectedSyncIds, setSelectedSyncIds] = useState<Set<string>>(new Set());
+  const [initialSyncIds, setInitialSyncIds] = useState<Set<string>>(new Set());
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [searchTerm, setSearchTerm] = useState("");
+
+  const { currentProject } = useProject();
+  const { certificateId, commonName } = popUp.data || {};
+
+  const { data: pkiSyncs = [], isPending } = useListPkiSyncsWithCertificate(
+    currentProject?.id || "",
+    certificateId || "",
+    {
+      enabled: !!currentProject?.id && !!certificateId
+    }
+  );
+  const addCertificatesToSync = useAddCertificatesToPkiSync();
+  const removeCertificatesFromSync = useRemoveCertificatesFromPkiSync();
+
+  const filteredSyncs = useMemo(() => {
+    if (!searchTerm.trim()) return pkiSyncs;
+
+    const searchLower = searchTerm.toLowerCase();
+    return pkiSyncs.filter((sync) => sync.name.toLowerCase().includes(searchLower));
+  }, [pkiSyncs, searchTerm]);
+
+  const startIndex = (currentPage - 1) * PER_PAGE;
+  const endIndex = startIndex + PER_PAGE;
+  const paginatedSyncs = filteredSyncs.slice(startIndex, endIndex);
+
+  useEffect(() => {
+    setCurrentPage(1);
+  }, [searchTerm]);
+
+  const handleClose = () => {
+    handlePopUpToggle("managePkiSyncs", false);
+    setSelectedSyncIds(new Set());
+    setInitialSyncIds(new Set());
+    setSearchTerm("");
+    setCurrentPage(1);
+  };
+
+  useEffect(() => {
+    if (!certificateId || !pkiSyncs || pkiSyncs.length === 0) return;
+
+    const currentSyncIds = new Set(
+      pkiSyncs.filter((sync) => sync.hasCertificate).map((sync) => sync.id)
+    );
+    setSelectedSyncIds(currentSyncIds);
+    setInitialSyncIds(new Set(currentSyncIds));
+  }, [certificateId, pkiSyncs]);
+
+  const handleSyncToggle = (syncId: string) => {
+    setSelectedSyncIds((prev) => {
+      const newSet = new Set(prev);
+      if (newSet.has(syncId)) {
+        newSet.delete(syncId);
+      } else {
+        newSet.add(syncId);
+      }
+      return newSet;
+    });
+  };
+
+  const handleSaveChanges = async () => {
+    if (!certificateId) return;
+
+    try {
+      setIsSubmitting(true);
+
+      const syncsToAdd = Array.from(selectedSyncIds).filter((id) => !initialSyncIds.has(id));
+      const syncsToRemove = Array.from(initialSyncIds).filter((id) => !selectedSyncIds.has(id));
+
+      await Promise.all(
+        syncsToAdd.map((syncId) =>
+          addCertificatesToSync.mutateAsync({
+            pkiSyncId: syncId,
+            certificateIds: [certificateId]
+          })
+        )
+      );
+
+      await Promise.all(
+        syncsToRemove.map((syncId) =>
+          removeCertificatesFromSync.mutateAsync({
+            pkiSyncId: syncId,
+            certificateIds: [certificateId]
+          })
+        )
+      );
+
+      createNotification({
+        text: `PKI sync settings updated for certificate "${commonName}"`,
+        type: "success"
+      });
+
+      handleClose();
+    } catch (error) {
+      console.error(error);
+      createNotification({
+        text: "Failed to update PKI sync settings",
+        type: "error"
+      });
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <Modal isOpen={popUp.isOpen} onOpenChange={handleClose}>
+      <ModalContent
+        title="Manage PKI Syncs"
+        subTitle={`Select which PKI syncs "${commonName}" should be part of`}
+        className="max-w-3xl"
+      >
+        <div className="mb-4">
+          <Input
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+            placeholder="Search PKI syncs by name..."
+          />
+        </div>
+        <div className="max-h-96 overflow-y-auto">
+          {isPending && (
+            <div className="flex h-32 items-center justify-center">
+              <div className="text-bunker-300">Loading PKI syncs...</div>
+            </div>
+          )}
+          {!isPending && pkiSyncs.length === 0 && (
+            <EmptyState title="No PKI syncs available" icon={faPlus}>
+              Create a PKI sync first to manage certificate syncing.
+            </EmptyState>
+          )}
+          {!isPending && pkiSyncs.length > 0 && filteredSyncs.length === 0 && searchTerm && (
+            <EmptyState title="No PKI syncs found" icon={faSearch}>
+              No PKI syncs match your search criteria. Try a different search term.
+            </EmptyState>
+          )}
+          {!isPending && filteredSyncs.length > 0 && (
+            <TableContainer>
+              <Table>
+                <THead>
+                  <Tr>
+                    <Th className="w-12" />
+                    <Th className="w-1/2">Name</Th>
+                    <Th className="w-1/2">Destination</Th>
+                  </Tr>
+                </THead>
+                <TBody>
+                  {paginatedSyncs.map((sync) => (
+                    <Tr
+                      key={sync.id}
+                      className="cursor-pointer hover:bg-mineshaft-700"
+                      onClick={() => handleSyncToggle(sync.id)}
+                    >
+                      <Td>
+                        <Checkbox
+                          isChecked={selectedSyncIds.has(sync.id)}
+                          onCheckedChange={() => handleSyncToggle(sync.id)}
+                          id={`sync-${sync.id}`}
+                        />
+                      </Td>
+                      <Td className="w-1/2 max-w-0">
+                        <div className="truncate" title={sync.name}>
+                          {sync.name}
+                        </div>
+                      </Td>
+                      <Td className="w-1/2 max-w-0">
+                        <div
+                          className="truncate capitalize"
+                          title={sync.destination.replace(/-/g, " ")}
+                        >
+                          {sync.destination.replace(/-/g, " ")}
+                        </div>
+                      </Td>
+                    </Tr>
+                  ))}
+                </TBody>
+              </Table>
+            </TableContainer>
+          )}
+          {!isPending && filteredSyncs.length > PER_PAGE && (
+            <div className="mt-4">
+              <Pagination
+                count={filteredSyncs.length}
+                page={currentPage}
+                perPage={PER_PAGE}
+                onChangePage={setCurrentPage}
+                onChangePerPage={() => {}}
+              />
+            </div>
+          )}
+        </div>
+
+        <div className="mt-6 flex justify-end gap-3">
+          <Button variant="outline_bg" onClick={handleClose} isDisabled={isSubmitting}>
+            Cancel
+          </Button>
+          <Button
+            variant="solid"
+            colorSchema="primary"
+            onClick={handleSaveChanges}
+            isDisabled={isSubmitting}
+            isLoading={isSubmitting}
+          >
+            Save Changes
+          </Button>
+        </div>
+      </ModalContent>
+    </Modal>
+  );
+};
@@ -16,6 +16,7 @@ import { usePopUp } from "@app/hooks/usePopUp";
 import { CertificateCertModal } from "./CertificateCertModal";
 import { CertificateImportModal } from "./CertificateImportModal";
 import { CertificateIssuanceModal } from "./CertificateIssuanceModal";
+import { CertificateManagePkiSyncsModal } from "./CertificateManagePkiSyncsModal";
 import { CertificateManageRenewalModal } from "./CertificateManageRenewalModal";
 import { CertificateModal } from "./CertificateModal";
 import { CertificateRenewalModal } from "./CertificateRenewalModal";
@@ -37,7 +38,8 @@ export const CertificatesSection = () => {
    "deleteCertificate",
    "revokeCertificate",
    "manageRenewal",
-    "renewCertificate"
+    "renewCertificate",
+    "managePkiSyncs"
  ] as const);

  const onRemoveCertificateSubmit = async (serialNumber: string) => {
@@ -105,6 +107,10 @@ export const CertificatesSection = () => {
      <CertificateManageRenewalModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
      <CertificateRenewalModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
      <CertificateRevocationModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
+      <CertificateManagePkiSyncsModal
+        popUp={popUp.managePkiSyncs}
+        handlePopUpToggle={handlePopUpToggle}
+      />
      <DeleteActionModal
        isOpen={popUp.deleteCertificate.isOpen}
        title={`Are you sure you want to remove the certificate ${
@@ -5,6 +5,7 @@ import {
  faEllipsis,
  faEye,
  faFileExport,
+  faLink,
  faQuestionCircle,
  faRedo,
  faTrash
@@ -39,12 +40,13 @@ import {
  useProject,
  useSubscription
 } from "@app/context";
-import { useListWorkspaceCertificates, useUpdateRenewalConfig } from "@app/hooks/api";
+import { useUpdateRenewalConfig } from "@app/hooks/api";
 import { caSupportsCapability } from "@app/hooks/api/ca/constants";
 import { CaCapability, CaType } from "@app/hooks/api/ca/enums";
 import { useListCasByProjectId } from "@app/hooks/api/ca/queries";
 import { CertStatus } from "@app/hooks/api/certificates/enums";
 import { TCertificate } from "@app/hooks/api/certificates/types";
+import { useListWorkspaceCertificates } from "@app/hooks/api/projects";
 import { UsePopUpState } from "@app/hooks/usePopUp";

 import { getCertValidUntilBadgeDetails } from "./CertificatesTable.utils";
@@ -152,7 +154,8 @@ type Props = {
        "revokeCertificate",
        "certificateCert",
        "manageRenewal",
-        "renewCertificate"
+        "renewCertificate",
+        "managePkiSyncs"
      ]
    >,
    data?: {
@@ -488,6 +491,31 @@ export const CertificatesTable = ({ handlePopUpOpen }: Props) => {
                            </ProjectPermissionCan>
                          );
                        })()}
+                        {/* PKI Sync management - only for active certificates */}
+                        {certificate.status === CertStatus.ACTIVE && (
+                          <ProjectPermissionCan
+                            I={ProjectPermissionCertificateActions.Edit}
+                            a={ProjectPermissionSub.Certificates}
+                          >
+                            {(isAllowed) => (
+                              <DropdownMenuItem
+                                className={twMerge(
+                                  !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
+                                )}
+                                onClick={async () =>
+                                  handlePopUpOpen("managePkiSyncs", {
+                                    certificateId: certificate.id,
+                                    commonName: certificate.commonName
+                                  })
+                                }
+                                disabled={!isAllowed}
+                                icon={<FontAwesomeIcon icon={faLink} />}
+                              >
+                                PKI Syncs
+                              </DropdownMenuItem>
+                            )}
+                          </ProjectPermissionCan>
+                        )}
                        {/* Only show revoke button if CA supports revocation */}
                        {(() => {
                          const caType = caCapabilityMap[certificate.caId];
@@ -1,19 +0,0 @@
-import { createFileRoute } from "@tanstack/react-router";
-
-import { CertificatesPage } from "./CertificatesPage";
-
-export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/_org-layout/projects/cert-management/$projectId/_cert-manager-layout/certificates"
-)({
-  component: CertificatesPage,
-  beforeLoad: ({ context }) => {
-    return {
-      breadcrumbs: [
-        ...context.breadcrumbs,
-        {
-          label: "Certificates"
-        }
-      ]
-    };
-  }
-});
@@ -59,9 +59,9 @@ export const PkiCollectionPage = () => {
      });
      handlePopUpClose("deletePkiCollection");
      navigate({
-        to: "/projects/cert-management/$projectId/certificates",
+        to: "/projects/cert-management/$projectId/policies",
        params: {
-          projectId
+          projectId: params.projectId
        }
      });
    } catch {
@@ -77,9 +77,9 @@ export const PkiCollectionPage = () => {
      {data && (
        <div className="mx-auto mb-6 w-full max-w-8xl">
          <Link
-            to="/projects/cert-management/$projectId/certificates"
+            to="/projects/cert-management/$projectId/policies"
            params={{
-              projectId
+              projectId: params.projectId
            }}
            className="mb-4 flex items-center gap-x-2 text-sm text-mineshaft-400"
          >
@@ -5,13 +5,9 @@ import { z } from "zod";
 import { createNotification } from "@app/components/notifications";
 import { Button, FormControl, Modal, ModalContent, Select, SelectItem } from "@app/components/v2";
 import { useProject } from "@app/context";
-import {
-  CaStatus,
-  useAddItemToPkiCollection,
-  useListWorkspaceCas,
-  useListWorkspaceCertificates
-} from "@app/hooks/api";
+import { CaStatus, useAddItemToPkiCollection, useListWorkspaceCas } from "@app/hooks/api";
 import { PkiItemType, pkiItemTypeToNameMap } from "@app/hooks/api/pkiCollections/constants";
+import { useListWorkspaceCertificates } from "@app/hooks/api/projects";
 import { UsePopUpState } from "@app/hooks/usePopUp";

 const schema = z
@@ -13,7 +13,7 @@ export const Route = createFileRoute(
        {
          label: "Certificate Collections",
          link: linkOptions({
-            to: "/projects/cert-management/$projectId/certificates",
+            to: "/projects/cert-management/$projectId/policies",
            params: {
              projectId: params.projectId
            }
@@ -18,10 +18,10 @@ import { IntegrationsListPageTabs } from "@app/types/integrations";
 import {
  PkiSyncActionTriggers,
  PkiSyncAuditLogsSection,
+  PkiSyncCertificatesSection,
  PkiSyncDestinationSection,
  PkiSyncDetailsSection,
-  PkiSyncOptionsSection,
-  PkiSyncSourceSection
+  PkiSyncOptionsSection
 } from "./components";

 const PageContent = () => {
@@ -62,7 +62,6 @@ const PageContent = () => {
  const destinationDetails = PKI_SYNC_MAP[pkiSync.destination];

  const handleEditDetails = () => handlePopUpOpen("editSync", PkiSyncEditFields.Details);
-  const handleEditSource = () => handlePopUpOpen("editSync", PkiSyncEditFields.Source);
  const handleEditOptions = () => handlePopUpOpen("editSync", PkiSyncEditFields.Options);
  const handleEditDestination = () => handlePopUpOpen("editSync", PkiSyncEditFields.Destination);

@@ -103,7 +102,6 @@ const PageContent = () => {
          <div className="flex justify-center">
            <div className="mr-4 flex w-72 flex-col gap-4">
              <PkiSyncDetailsSection pkiSync={pkiSync} onEditDetails={handleEditDetails} />
-              <PkiSyncSourceSection pkiSync={pkiSync} onEditSource={handleEditSource} />
              <PkiSyncOptionsSection pkiSync={pkiSync} onEditOptions={handleEditOptions} />
            </div>
            <div className="flex flex-1 flex-col gap-4">
@@ -111,6 +109,7 @@ const PageContent = () => {
                pkiSync={pkiSync}
                onEditDestination={handleEditDestination}
              />
+              <PkiSyncCertificatesSection pkiSync={pkiSync} />
              <PkiSyncAuditLogsSection pkiSync={pkiSync} />
            </div>
          </div>
@@ -0,0 +1,223 @@
+import { useState } from "react";
+import { subject } from "@casl/ability";
+import { faEdit, faPlus, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { createNotification } from "@app/components/notifications";
+import { ProjectPermissionCan } from "@app/components/permissions";
+import { CertificateManagementModal } from "@app/components/pki-syncs/CertificateManagementModal";
+import {
+  Badge,
+  EmptyState,
+  IconButton,
+  Pagination,
+  Table,
+  TableContainer,
+  TBody,
+  Td,
+  Th,
+  THead,
+  Tooltip,
+  Tr
+} from "@app/components/v2";
+import { ProjectPermissionSub } from "@app/context";
+import { ProjectPermissionPkiSyncActions } from "@app/context/ProjectPermissionContext/types";
+import { useListPkiSyncCertificates, useRemoveCertificatesFromPkiSync } from "@app/hooks/api";
+import { CertificateSyncStatus, TPkiSync } from "@app/hooks/api/pkiSyncs";
+
+type Props = {
+  pkiSync: TPkiSync;
+};
+
+const getSyncStatusVariant = (status?: CertificateSyncStatus | null) => {
+  if (status === CertificateSyncStatus.Succeeded) return "success";
+  if (status === CertificateSyncStatus.Failed) return "danger";
+  if (status === CertificateSyncStatus.Syncing) return "primary";
+  return "project";
+};
+
+const getSyncStatusText = (status?: CertificateSyncStatus | null) => {
+  if (status === CertificateSyncStatus.Succeeded) return "Synced";
+  if (status === CertificateSyncStatus.Failed) return "Failed";
+  if (status === CertificateSyncStatus.Syncing) return "Syncing";
+  if (status === CertificateSyncStatus.Pending) return "Pending";
+  return "Unknown";
+};
+
+export const PkiSyncCertificatesSection = ({ pkiSync }: Props) => {
+  const [isManageModalOpen, setIsManageModalOpen] = useState(false);
+  const [currentPage, setCurrentPage] = useState(1);
+  const pageSize = 10;
+
+  const { data, refetch: refetchSyncCertificates } = useListPkiSyncCertificates(pkiSync.id, {
+    offset: (currentPage - 1) * pageSize,
+    limit: pageSize
+  });
+  const syncCertificates = data?.certificates || [];
+  const totalCount = data?.totalCount || 0;
+  const removeCertificatesFromSync = useRemoveCertificatesFromPkiSync();
+
+  const permissionSubject = subject(ProjectPermissionSub.PkiSyncs, {
+    subscriberId: pkiSync.subscriberId || ""
+  });
+
+  const handleRemoveCertificate = async (certificateId: string) => {
+    try {
+      await removeCertificatesFromSync.mutateAsync({
+        pkiSyncId: pkiSync.id,
+        certificateIds: [certificateId]
+      });
+
+      await refetchSyncCertificates();
+
+      createNotification({
+        text: "Certificate removed from sync",
+        type: "success"
+      });
+    } catch {
+      createNotification({
+        text: "Failed to remove certificate from sync",
+        type: "error"
+      });
+    }
+  };
+
+  const totalPages = Math.ceil(totalCount / pageSize);
+
+  return (
+    <div>
+      <div className="flex w-full flex-col gap-3 rounded-lg border border-mineshaft-600 bg-mineshaft-900 px-4 py-3">
+        <div className="flex items-center justify-between border-b border-mineshaft-400 pb-2">
+          <h3 className="font-medium text-mineshaft-100">Certificates ({totalCount})</h3>
+          <ProjectPermissionCan I={ProjectPermissionPkiSyncActions.Edit} a={permissionSubject}>
+            {(isAllowed) => (
+              <IconButton
+                variant="plain"
+                colorSchema="secondary"
+                isDisabled={!isAllowed}
+                ariaLabel="Edit certificates"
+                onClick={() => setIsManageModalOpen(true)}
+              >
+                <FontAwesomeIcon icon={faEdit} />
+              </IconButton>
+            )}
+          </ProjectPermissionCan>
+        </div>
+
+        <div>
+          {syncCertificates.length === 0 ? (
+            <EmptyState title="No certificates" icon={faPlus}>
+              No certificates are currently synced with this PKI destination.
+            </EmptyState>
+          ) : (
+            <div className="space-y-4">
+              <TableContainer>
+                <Table>
+                  <THead>
+                    <Tr>
+                      <Th className="w-1/3">Common Name</Th>
+                      <Th className="w-1/3">Serial Number</Th>
+                      <Th className="w-1/9">Status</Th>
+                      <Th className="w-1/9">Expires</Th>
+                      <Th className="w-1/9">Actions</Th>
+                    </Tr>
+                  </THead>
+                  <TBody>
+                    {syncCertificates.map((syncCert) => {
+                      const isExpired = syncCert.certificateNotAfter
+                        ? new Date(syncCert.certificateNotAfter) < new Date()
+                        : false;
+
+                      return (
+                        <Tr key={syncCert.id}>
+                          <Td className="max-w-0">
+                            <div
+                              className="truncate"
+                              title={syncCert.certificateCommonName || "Unknown"}
+                            >
+                              {syncCert.certificateCommonName || "Unknown"}
+                            </div>
+                          </Td>
+                          <Td className="max-w-0">
+                            <div
+                              className="truncate text-xs"
+                              title={syncCert.certificateSerialNumber || "Unknown"}
+                            >
+                              {syncCert.certificateSerialNumber || "Unknown"}
+                            </div>
+                          </Td>
+                          <Td>
+                            {syncCert.lastSyncMessage &&
+                            syncCert.syncStatus === CertificateSyncStatus.Failed ? (
+                              <Tooltip content={syncCert.lastSyncMessage}>
+                                <Badge variant="danger">Failed</Badge>
+                              </Tooltip>
+                            ) : (
+                              <Badge variant={getSyncStatusVariant(syncCert.syncStatus)}>
+                                {getSyncStatusText(syncCert.syncStatus)}
+                              </Badge>
+                            )}
+                          </Td>
+                          <Td>
+                            <span
+                              className={`text-sm ${isExpired ? "text-red-400" : "text-bunker-300"}`}
+                            >
+                              {syncCert.certificateNotAfter
+                                ? new Date(syncCert.certificateNotAfter).toLocaleDateString()
+                                : "Unknown"}
+                            </span>
+                          </Td>
+                          <Td className="flex items-center">
+                            <ProjectPermissionCan
+                              I={ProjectPermissionPkiSyncActions.Edit}
+                              a={permissionSubject}
+                            >
+                              {(isAllowed) => (
+                                <IconButton
+                                  size="xs"
+                                  variant="plain"
+                                  colorSchema="danger"
+                                  ariaLabel="Remove certificate"
+                                  isDisabled={!isAllowed}
+                                  onClick={() => handleRemoveCertificate(syncCert.certificateId)}
+                                >
+                                  <FontAwesomeIcon icon={faTrash} />
+                                </IconButton>
+                              )}
+                            </ProjectPermissionCan>
+                          </Td>
+                        </Tr>
+                      );
+                    })}
+                  </TBody>
+                </Table>
+              </TableContainer>
+
+              {/* Pagination */}
+              {totalPages > 1 && (
+                <div className="flex justify-center">
+                  <Pagination
+                    count={totalCount}
+                    page={currentPage}
+                    perPage={pageSize}
+                    onChangePage={(page: number) => setCurrentPage(page)}
+                    onChangePerPage={() => {}}
+                  />
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+
+      <CertificateManagementModal
+        pkiSync={pkiSync}
+        isOpen={isManageModalOpen}
+        onClose={() => setIsManageModalOpen(false)}
+        onCertificatesUpdated={() => {
+          refetchSyncCertificates();
+        }}
+      />
+    </div>
+  );
+};
@@ -1,5 +1,6 @@
 export { PkiSyncActionTriggers } from "./PkiSyncActionTriggers";
 export { PkiSyncAuditLogsSection } from "./PkiSyncAuditLogsSection";
+export { PkiSyncCertificatesSection } from "./PkiSyncCertificatesSection";
 export { PkiSyncDestinationSection } from "./PkiSyncDestinationSection";
 export { PkiSyncDetailsSection } from "./PkiSyncDetailsSection";
 export { PkiSyncOptionsSection } from "./PkiSyncOptionsSection";
@@ -2,17 +2,20 @@ import { useState } from "react";
 import { Helmet } from "react-helmet";
 import { useTranslation } from "react-i18next";

-import { ProjectPermissionCan } from "@app/components/permissions";
 import { ContentLoader, PageHeader, Tab, TabList, TabPanel, Tabs } from "@app/components/v2";
-import { ProjectPermissionActions, ProjectPermissionSub, useProject } from "@app/context";
+import { useProject } from "@app/context";
 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",
-  CertificateTemplatesV2 = "templates-v2"
+  CertificateTemplatesV2 = "templates-v2",
+  Certificates = "certificates",
+  PkiCollections = "pki-collections"
 }

 export const PoliciesPage = () => {
@@ -25,59 +28,54 @@ export const PoliciesPage = () => {
  }

  return (
-    <ProjectPermissionCan
-      I={ProjectPermissionActions.Read}
-      a={ProjectPermissionSub.CertificateAuthorities}
-    >
-      {(isAllowed) => {
-        if (!isAllowed) {
-          return (
-            <div className="mx-auto flex h-full flex-col justify-center bg-bunker-800 text-white">
-              <div className="mx-auto mb-6 w-full max-w-8xl text-center">
-                <p>You don&apos;t have permission to access certificate policies.</p>
-              </div>
-            </div>
-          );
-        }
+    <div className="mx-auto flex h-full flex-col justify-between bg-bunker-800 text-white">
+      <Helmet>
+        <title>{t("common.head-title", { title: "Certificate Management" })}</title>
+      </Helmet>
+      <div className="mx-auto mb-6 w-full max-w-8xl">
+        <PageHeader
+          scope={ProjectType.CertificateManager}
+          title="Certificate Management"
+          description="Manage certificate templates, profiles, certificates, and PKI collections for unified certificate issuance"
+        />

-        return (
-          <div className="mx-auto flex flex-col justify-between bg-bunker-800 text-white">
-            <Helmet>
-              <title>{t("common.head-title", { title: "Certificate Policies" })}</title>
-            </Helmet>
-            <div className="mx-auto mb-6 w-full max-w-8xl">
-              <PageHeader
-                scope={ProjectType.CertificateManager}
-                title="Certificate Policies"
-                description="Manage certificate templates and profiles for unified certificate issuance"
-              />
+        <Tabs
+          orientation="vertical"
+          value={activeTab}
+          onValueChange={(value) => setActiveTab(value as TabSections)}
+        >
+          <TabList>
+            <Tab variant="project" value={TabSections.CertificateProfiles}>
+              Certificate Profiles
+            </Tab>
+            <Tab variant="project" value={TabSections.CertificateTemplatesV2}>
+              Certificate Templates
+            </Tab>
+            <Tab variant="project" value={TabSections.Certificates}>
+              Certificates
+            </Tab>
+            <Tab variant="project" value={TabSections.PkiCollections}>
+              Certificate Collections
+            </Tab>
+          </TabList>

-              <Tabs
-                orientation="vertical"
-                value={activeTab}
-                onValueChange={(value) => setActiveTab(value as TabSections)}
-              >
-                <TabList>
-                  <Tab variant="project" value={TabSections.CertificateProfiles}>
-                    Certificate Profiles
-                  </Tab>
-                  <Tab variant="project" value={TabSections.CertificateTemplatesV2}>
-                    Certificate Templates
-                  </Tab>
-                </TabList>
+          <TabPanel value={TabSections.CertificateProfiles}>
+            <CertificateProfilesTab />
+          </TabPanel>

-                <TabPanel value={TabSections.CertificateProfiles}>
-                  <CertificateProfilesTab />
-                </TabPanel>
+          <TabPanel value={TabSections.CertificateTemplatesV2}>
+            <CertificateTemplatesV2Tab />
+          </TabPanel>

-                <TabPanel value={TabSections.CertificateTemplatesV2}>
-                  <CertificateTemplatesV2Tab />
-                </TabPanel>
-              </Tabs>
-            </div>
-          </div>
-        );
-      }}
-    </ProjectPermissionCan>
+          <TabPanel value={TabSections.Certificates}>
+            <CertificatesTab />
+          </TabPanel>
+
+          <TabPanel value={TabSections.PkiCollections}>
+            <PkiCollectionsTab />
+          </TabPanel>
+        </Tabs>
+      </div>
+    </div>
  );
 };
@@ -0,0 +1,5 @@
+import { CertificatesSection } from "../../../CertificatesPage/components/CertificatesSection";
+
+export const CertificatesTab = () => {
+  return <CertificatesSection />;
+};
@@ -0,0 +1 @@
+export { CertificatesTab } from "./CertificatesTab";
@@ -0,0 +1,5 @@
+import { PkiCollectionSection } from "../../../AlertingPage/components/PkiCollectionSection";
+
+export const PkiCollectionsTab = () => {
+  return <PkiCollectionSection />;
+};
@@ -0,0 +1 @@
+export { PkiCollectionsTab } from "./PkiCollectionsTab";
@@ -1,2 +1,4 @@
 export { CertificateProfilesTab } from "./CertificateProfilesTab";
+export { CertificatesTab } from "./CertificatesTab";
 export { CertificateTemplatesV2Tab } from "./CertificateTemplatesV2Tab";
+export { PkiCollectionsTab } from "./PkiCollectionsTab";
				`@@ -0,0 +1 @@`
				`export { CertificatesTab } from "./CertificatesTab";`
				`@@ -0,0 +1 @@`
				`export { PkiCollectionsTab } from "./PkiCollectionsTab";`