feat: renamed old frontend and fixed some minor bugs

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

@@ -0,0 +1,67 @@
+import { Helmet } from "react-helmet";
+import { useTranslation } from "react-i18next";
+
+import { ProjectPermissionCan } from "@app/components/permissions";
+import { Tab, TabList, TabPanel, Tabs } from "@app/components/v2";
+import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
+
+import { CaTab, CertificatesTab, PkiAlertsTab } from "./components";
+
+enum TabSections {
+  Ca = "certificate-authorities",
+  Certificates = "certificates",
+  Alerting = "alerting"
+}
+
+export const CertificatesPage = () => {
+  const { t } = useTranslation();
+  return (
+    <div className="container mx-auto flex h-full flex-col justify-between bg-bunker-800 text-white">
+      <Helmet>
+        <title>{t("common.head-title", { title: "Certificates" })}</title>
+        <link rel="icon" href="/infisical.ico" />
+        <meta property="og:image" content="/images/message.png" />
+      </Helmet>
+      <div className="mx-auto mb-6 w-full max-w-7xl px-6 py-6">
+        <p className="mb-4 mr-4 text-3xl font-semibold text-white">Internal PKI</p>
+        <Tabs defaultValue={TabSections.Certificates}>
+          <TabList>
+            <Tab value={TabSections.Certificates}>Certificates</Tab>
+            <Tab value={TabSections.Ca}>Certificate Authorities</Tab>
+            <Tab value={TabSections.Alerting}>Alerting</Tab>
+          </TabList>
+          <TabPanel value={TabSections.Certificates}>
+            <ProjectPermissionCan
+              renderGuardBanner
+              passThrough={false}
+              I={ProjectPermissionActions.Read}
+              a={ProjectPermissionSub.Certificates}
+            >
+              <CertificatesTab />
+            </ProjectPermissionCan>
+          </TabPanel>
+          <TabPanel value={TabSections.Ca}>
+            <ProjectPermissionCan
+              renderGuardBanner
+              passThrough={false}
+              I={ProjectPermissionActions.Read}
+              a={ProjectPermissionSub.CertificateAuthorities}
+            >
+              <CaTab />
+            </ProjectPermissionCan>
+          </TabPanel>
+          <TabPanel value={TabSections.Alerting}>
+            <ProjectPermissionCan
+              renderGuardBanner
+              passThrough={false}
+              I={ProjectPermissionActions.Read}
+              a={ProjectPermissionSub.PkiAlerts}
+            >
+              <PkiAlertsTab />
+            </ProjectPermissionCan>
+          </TabPanel>
+        </Tabs>
+      </div>
+    </div>
+  );
+};

frontend/src/pages/cert-manager/CertificatesPage/components/CaTab/CaTab.tsx

@@ -0,0 +1,17 @@
+import { motion } from "framer-motion";
+
+import { CaSection } from "./components";
+
+export const CaTab = () => {
+  return (
+    <motion.div
+      key="panel-certificate-authorities"
+      transition={{ duration: 0.15 }}
+      initial={{ opacity: 0, translateX: 30 }}
+      animate={{ opacity: 1, translateX: 0 }}
+      exit={{ opacity: 0, translateX: 30 }}
+    >
+      <CaSection />
+    </motion.div>
+  );
+};

frontend/src/pages/cert-manager/CertificatesPage/components/CaTab/components/CaCertModal.tsx

@@ -0,0 +1,34 @@
+import { Modal, ModalContent } from "@app/components/v2";
+import { useGetCaCert } from "@app/hooks/api";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+import { CertificateContent } from "../../CertificatesTab/components/CertificateContent";
+
+type Props = {
+  popUp: UsePopUpState<["caCert"]>;
+  handlePopUpToggle: (popUpName: keyof UsePopUpState<["caCert"]>, state?: boolean) => void;
+};
+
+export const CaCertModal = ({ popUp, handlePopUpToggle }: Props) => {
+  const { data } = useGetCaCert((popUp?.caCert?.data as { caId: string })?.caId || "");
+  return (
+    <Modal
+      isOpen={popUp?.caCert?.isOpen}
+      onOpenChange={(isOpen) => {
+        handlePopUpToggle("caCert", isOpen);
+      }}
+    >
+      <ModalContent title="CA Certificate">
+        {data ? (
+          <CertificateContent
+            serialNumber={data.serialNumber}
+            certificate={data.certificate}
+            certificateChain={data.certificateChain}
+          />
+        ) : (
+          <div />
+        )}
+      </ModalContent>
+    </Modal>
+  );
+};

frontend/src/pages/cert-manager/CertificatesPage/components/CaTab/components/CaInstallCertModal/CaInstallCertModal.tsx

@@ -0,0 +1,75 @@
+import { useEffect, useState } from "react";
+
+import { FormControl, Modal, ModalContent, Select, SelectItem } from "@app/components/v2";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+import { ExternalCaInstallForm } from "./ExternalCaInstallForm";
+import { InternalCaInstallForm } from "./InternalCaInstallForm";
+
+type Props = {
+  popUp: UsePopUpState<["installCaCert"]>;
+  handlePopUpToggle: (popUpName: keyof UsePopUpState<["installCaCert"]>, state?: boolean) => void;
+};
+
+enum ParentCaType {
+  Internal = "internal",
+  External = "external"
+}
+
+export const CaInstallCertModal = ({ popUp, handlePopUpToggle }: Props) => {
+  const popupData = popUp?.installCaCert?.data;
+  const caId = popupData?.caId || "";
+  const isParentCaExternal = popupData?.isParentCaExternal || false;
+  const [parentCaType, setParentCaType] = useState<ParentCaType>(ParentCaType.Internal);
+
+  useEffect(() => {
+    if (popupData?.isParentCaExternal) {
+      setParentCaType(ParentCaType.External);
+    }
+  }, [popupData]);
+
+  const renderForm = (parentCaTypeInput: ParentCaType) => {
+    switch (parentCaTypeInput) {
+      case ParentCaType.Internal:
+        return <InternalCaInstallForm caId={caId} handlePopUpToggle={handlePopUpToggle} />;
+      default:
+        return <ExternalCaInstallForm caId={caId} handlePopUpToggle={handlePopUpToggle} />;
+    }
+  };
+
+  return (
+    <Modal
+      isOpen={popUp?.installCaCert?.isOpen}
+      onOpenChange={(isOpen) => {
+        handlePopUpToggle("installCaCert", isOpen);
+      }}
+    >
+      <ModalContent
+        title={`${isParentCaExternal ? "Renew" : "Install"} Intermediate CA certificate`}
+      >
+        <FormControl label="Parent CA Type">
+          <Select
+            value={parentCaType}
+            onValueChange={(e) => setParentCaType(e as ParentCaType)}
+            className="w-full"
+            isDisabled={isParentCaExternal}
+          >
+            <SelectItem
+              value={ParentCaType.Internal}
+              key={`parent-ca-type-${ParentCaType.Internal}`}
+            >
+              Infisical CA
+            </SelectItem>
+            <SelectItem
+              value={ParentCaType.External}
+              key={`parent-ca-type-${ParentCaType.External}`}
+            >
+              External CA
+            </SelectItem>
+          </Select>
+        </FormControl>
+        {renderForm(parentCaType)}
+      </ModalContent>
+    </Modal>
+  );
+};

frontend/src/pages/cert-manager/CertificatesPage/components/CaTab/components/CaInstallCertModal/ExternalCaInstallForm.tsx

@@ -0,0 +1,172 @@
+import { useEffect } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { faCheck, faCopy, faDownload } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { zodResolver } from "@hookform/resolvers/zod";
+import FileSaver from "file-saver";
+import { z } from "zod";
+
+import { createNotification } from "@app/components/notifications";
+import { Button, FormControl, IconButton, TextArea, Tooltip } from "@app/components/v2";
+import { useWorkspace } from "@app/context";
+import { useTimedReset } from "@app/hooks";
+import { useGetCaCsr, useImportCaCertificate } from "@app/hooks/api";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+const schema = z.object({
+  certificate: z.string().min(1),
+  certificateChain: z.string().min(1)
+});
+
+export type FormData = z.infer<typeof schema>;
+
+type Props = {
+  caId: string;
+  handlePopUpToggle: (popUpName: keyof UsePopUpState<["installCaCert"]>, state?: boolean) => void;
+};
+
+export const ExternalCaInstallForm = ({ caId, handlePopUpToggle }: Props) => {
+  const { currentWorkspace } = useWorkspace();
+  const [copyTextCaCsr, isCopyingCaCsr, setCopyTextCaCsr] = useTimedReset<string>({
+    initialState: "Copy to clipboard"
+  });
+
+  const {
+    control,
+    handleSubmit,
+    reset,
+    formState: { isSubmitting }
+  } = useForm<FormData>({
+    resolver: zodResolver(schema)
+  });
+
+  const { data: csr } = useGetCaCsr(caId);
+  const { mutateAsync: importCaCertificate } = useImportCaCertificate();
+
+  useEffect(() => {
+    reset();
+  }, []);
+
+  const onFormSubmit = async ({ certificate, certificateChain }: FormData) => {
+    try {
+      if (!csr || !caId || !currentWorkspace?.slug) return;
+
+      await importCaCertificate({
+        caId,
+        projectSlug: currentWorkspace?.slug,
+        certificate,
+        certificateChain
+      });
+
+      reset();
+
+      createNotification({
+        text: "Successfully installed certificate for CA",
+        type: "success"
+      });
+      handlePopUpToggle("installCaCert", false);
+    } catch {
+      createNotification({
+        text: "Failed to install certificate for CA",
+        type: "error"
+      });
+    }
+  };
+
+  const downloadTxtFile = (filename: string, content: string) => {
+    const blob = new Blob([content], { type: "text/plain;charset=utf-8" });
+    FileSaver.saveAs(blob, filename);
+  };
+
+  return (
+    <form onSubmit={handleSubmit(onFormSubmit)}>
+      {csr && (
+        <>
+          <div className="my-4 flex items-center justify-between">
+            <h2>CSR for this CA</h2>
+            <div className="flex">
+              <Tooltip content={copyTextCaCsr}>
+                <IconButton
+                  ariaLabel="copy icon"
+                  colorSchema="secondary"
+                  className="group relative"
+                  onClick={() => {
+                    navigator.clipboard.writeText(csr);
+                    setCopyTextCaCsr("Copied");
+                  }}
+                >
+                  <FontAwesomeIcon icon={isCopyingCaCsr ? faCheck : faCopy} />
+                </IconButton>
+              </Tooltip>
+              <Tooltip content="Download">
+                <IconButton
+                  ariaLabel="copy icon"
+                  colorSchema="secondary"
+                  className="group relative ml-2"
+                  onClick={() => {
+                    downloadTxtFile("csr.pem", csr);
+                  }}
+                >
+                  <FontAwesomeIcon icon={faDownload} />
+                </IconButton>
+              </Tooltip>
+            </div>
+          </div>
+          <div className="mb-8 flex items-center justify-between rounded-md bg-white/[0.07] p-2 text-base text-gray-400">
+            <p className="mr-4 whitespace-pre-wrap break-all">{csr}</p>
+          </div>
+        </>
+      )}
+      <Controller
+        control={control}
+        name="certificate"
+        render={({ field, fieldState: { error } }) => (
+          <FormControl label="Certificate Body" errorText={error?.message} isError={Boolean(error)}>
+            <TextArea
+              {...field}
+              placeholder="PEM-encoded certificate..."
+              reSize="none"
+              className="h-48"
+            />
+          </FormControl>
+        )}
+      />
+      <Controller
+        control={control}
+        name="certificateChain"
+        render={({ field, fieldState: { error } }) => (
+          <FormControl
+            label="Certificate Chain"
+            errorText={error?.message}
+            isError={Boolean(error)}
+          >
+            <TextArea
+              {...field}
+              placeholder="PEM-encoded certificate chain..."
+              reSize="none"
+              className="h-48"
+            />
+          </FormControl>
+        )}
+      />
+      <div className="flex items-center">
+        <Button
+          className="mr-4"
+          size="sm"
+          type="submit"
+          isLoading={isSubmitting}
+          isDisabled={isSubmitting}
+        >
+          Install
+        </Button>
+        <Button
+          colorSchema="secondary"
+          variant="plain"
+          onClick={() => handlePopUpToggle("installCaCert", false)}
+        >
+          Cancel
+        </Button>
+      </div>
+    </form>
+  );
+};

frontend/src/pages/cert-manager/CertificatesPage/components/CaTab/components/CaInstallCertModal/InternalCaInstallForm.tsx

@@ -0,0 +1,236 @@
+import { useEffect } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { format } from "date-fns";
+import { z } from "zod";
+
+import { createNotification } from "@app/components/notifications";
+import { Button, FormControl, Input, Select, SelectItem } from "@app/components/v2";
+import { useWorkspace } from "@app/context";
+import {
+  CaStatus,
+  useGetCaById,
+  useGetCaCsr,
+  useImportCaCertificate,
+  useListWorkspaceCas,
+  useSignIntermediate
+} from "@app/hooks/api";
+import { caTypeToNameMap } from "@app/hooks/api/ca/constants";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+const isValidDate = (dateString: string) => {
+  const date = new Date(dateString);
+  return !Number.isNaN(date.getTime());
+};
+
+const getMiddleDate = (date1: Date, date2: Date) => {
+  const timestamp1 = date1.getTime();
+  const timestamp2 = date2.getTime();
+
+  const middleTimestamp = (timestamp1 + timestamp2) / 2;
+
+  return new Date(middleTimestamp);
+};
+
+const schema = z.object({
+  parentCaId: z.string(),
+  notAfter: z.string().trim().refine(isValidDate, { message: "Invalid date format" }),
+  maxPathLength: z.string()
+});
+
+export type FormData = z.infer<typeof schema>;
+
+type Props = {
+  caId: string;
+  handlePopUpToggle: (popUpName: keyof UsePopUpState<["installCaCert"]>, state?: boolean) => void;
+};
+
+export const InternalCaInstallForm = ({ caId, handlePopUpToggle }: Props) => {
+  const { currentWorkspace } = useWorkspace();
+  const { data: cas } = useListWorkspaceCas({
+    projectSlug: currentWorkspace?.slug ?? "",
+    status: CaStatus.ACTIVE
+  });
+  const { data: ca } = useGetCaById(caId);
+  const { data: csr } = useGetCaCsr(caId);
+
+  const { mutateAsync: signIntermediate } = useSignIntermediate();
+  const { mutateAsync: importCaCertificate } = useImportCaCertificate();
+
+  const {
+    control,
+    handleSubmit,
+    reset,
+    formState: { isSubmitting },
+    setValue,
+    watch
+  } = useForm<FormData>({
+    resolver: zodResolver(schema),
+    defaultValues: {
+      maxPathLength: "0"
+    }
+  });
+
+  useEffect(() => {
+    reset();
+  }, []);
+
+  useEffect(() => {
+    if (cas?.length) {
+      setValue("parentCaId", cas[0].id);
+    }
+  }, [cas, setValue]);
+
+  const parentCaId = watch("parentCaId");
+
+  const { data: parentCa } = useGetCaById(parentCaId);
+
+  useEffect(() => {
+    if (parentCa?.maxPathLength) {
+      setValue(
+        "maxPathLength",
+        (parentCa.maxPathLength === -1 ? 3 : parentCa.maxPathLength - 1).toString()
+      );
+    }
+
+    if (parentCa?.notAfter) {
+      const parentCaNotAfter = new Date(parentCa.notAfter);
+      const middleDate = getMiddleDate(new Date(), parentCaNotAfter);
+      setValue("notAfter", format(middleDate, "yyyy-MM-dd"));
+    }
+  }, [parentCa]);
+
+  const onFormSubmit = async ({ notAfter, maxPathLength }: FormData) => {
+    try {
+      if (!csr || !caId || !currentWorkspace?.slug) return;
+
+      const { certificate, certificateChain } = await signIntermediate({
+        caId: parentCaId,
+        csr,
+        maxPathLength: Number(maxPathLength),
+        notAfter,
+        notBefore: new Date().toISOString()
+      });
+
+      await importCaCertificate({
+        caId,
+        projectSlug: currentWorkspace?.slug,
+        certificate,
+        certificateChain
+      });
+
+      reset();
+
+      createNotification({
+        text: "Successfully installed certificate for CA",
+        type: "success"
+      });
+      handlePopUpToggle("installCaCert", false);
+    } catch {
+      createNotification({
+        text: "Failed to install certificate for CA",
+        type: "error"
+      });
+    }
+  };
+
+  function generatePathLengthOpts(parentCaMaxPathLength: number): number[] {
+    if (parentCaMaxPathLength === -1) {
+      return [-1, 0, 1, 2, 3];
+    }
+
+    return Array.from({ length: parentCaMaxPathLength }, (_, index) => index);
+  }
+
+  return (
+    <form onSubmit={handleSubmit(onFormSubmit)}>
+      <Controller
+        control={control}
+        name="parentCaId"
+        // defaultValue=""
+        render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+          <FormControl
+            label="Parent CA"
+            errorText={error?.message}
+            isError={Boolean(error)}
+            isRequired
+          >
+            <Select
+              //   defaultValue={field.value}
+              {...field}
+              onValueChange={onChange}
+              className="w-full"
+            >
+              {(cas || [])
+                .filter((c) => {
+                  const isParentCaNotSelf = c.id !== ca?.id;
+                  const isParentCaActive = c.status === CaStatus.ACTIVE;
+                  const isParentCaAllowedChildrenCas = c.maxPathLength && c.maxPathLength !== 0;
+
+                  return isParentCaNotSelf && isParentCaActive && isParentCaAllowedChildrenCas;
+                })
+                .map(({ id, type, dn }) => (
+                  <SelectItem value={id} key={`parent-ca-${id}`}>
+                    {`${caTypeToNameMap[type]}: ${dn}`}
+                  </SelectItem>
+                ))}
+            </Select>
+          </FormControl>
+        )}
+      />
+      <Controller
+        control={control}
+        name="notAfter"
+        render={({ field, fieldState: { error } }) => (
+          <FormControl
+            label="Valid Until"
+            isError={Boolean(error)}
+            errorText={error?.message}
+            isRequired
+          >
+            <Input {...field} placeholder="YYYY-MM-DD" />
+          </FormControl>
+        )}
+      />
+      <Controller
+        control={control}
+        name="maxPathLength"
+        // defaultValue="0"
+        render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+          <FormControl label="Path Length" errorText={error?.message} isError={Boolean(error)}>
+            <Select
+              //   defaultValue={field.value}
+              {...field}
+              onValueChange={onChange}
+              className="w-full"
+            >
+              {generatePathLengthOpts(parentCa?.maxPathLength || 0).map((value) => (
+                <SelectItem value={String(value)} key={`ca-path-length-${value}`}>
+                  {`${value}`}
+                </SelectItem>
+              ))}
+            </Select>
+          </FormControl>
+        )}
+      />
+      <div className="flex items-center">
+        <Button
+          className="mr-4"
+          size="sm"
+          type="submit"
+          isLoading={isSubmitting}
+          isDisabled={isSubmitting}
+        >
+          Install
+        </Button>
+        <Button
+          colorSchema="secondary"
+          variant="plain"
+          onClick={() => handlePopUpToggle("installCaCert", false)}
+        >
+          Cancel
+        </Button>
+      </div>
+    </form>
+  );
+};

frontend/src/pages/cert-manager/CertificatesPage/components/CaTab/components/CaInstallCertModal/index.tsx

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

frontend/src/pages/cert-manager/CertificatesPage/components/CaTab/components/CaModal.tsx

@@ -0,0 +1,471 @@
+import { useEffect } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { format } from "date-fns";
+import { z } from "zod";
+
+import { createNotification } from "@app/components/notifications";
+import {
+  Button,
+  FormControl,
+  Input,
+  Modal,
+  ModalContent,
+  Select,
+  SelectItem,
+  Switch
+  // DatePicker
+} from "@app/components/v2";
+import { useWorkspace } from "@app/context";
+import { CaType, useCreateCa, useGetCaById, useUpdateCa } from "@app/hooks/api/ca";
+import { certKeyAlgorithms } from "@app/hooks/api/certificates/constants";
+import { CertKeyAlgorithm } from "@app/hooks/api/certificates/enums";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+const isValidDate = (dateString: string) => {
+  const date = new Date(dateString);
+  return !Number.isNaN(date.getTime());
+};
+
+const getDateTenYearsFromToday = () => {
+  const date = new Date();
+  date.setFullYear(date.getFullYear() + 10);
+  return format(date, "yyyy-MM-dd");
+};
+
+const schema = z
+  .object({
+    type: z.enum([CaType.ROOT, CaType.INTERMEDIATE]),
+    friendlyName: z.string(),
+    organization: z.string(),
+    ou: z.string(),
+    country: z.string(),
+    province: z.string(),
+    locality: z.string(),
+    commonName: z.string(),
+    notAfter: z.string().trim().refine(isValidDate, { message: "Invalid date format" }),
+    maxPathLength: z.string(),
+    keyAlgorithm: z.enum([
+      CertKeyAlgorithm.RSA_2048,
+      CertKeyAlgorithm.RSA_4096,
+      CertKeyAlgorithm.ECDSA_P256,
+      CertKeyAlgorithm.ECDSA_P384
+    ]),
+    requireTemplateForIssuance: z.boolean()
+  })
+  .required();
+
+export type FormData = z.infer<typeof schema>;
+
+type Props = {
+  popUp: UsePopUpState<["ca"]>;
+  handlePopUpToggle: (popUpName: keyof UsePopUpState<["ca"]>, state?: boolean) => void;
+};
+
+const caTypes = [
+  { label: "Root", value: CaType.ROOT },
+  { label: "Intermediate", value: CaType.INTERMEDIATE }
+];
+
+export const CaModal = ({ popUp, handlePopUpToggle }: Props) => {
+  const { currentWorkspace } = useWorkspace();
+  // const [isStartDatePickerOpen, setIsStartDatePickerOpen] = useState(false);
+
+  const { data: ca } = useGetCaById((popUp?.ca?.data as { caId: string })?.caId || "");
+
+  const { mutateAsync: createMutateAsync } = useCreateCa();
+  const { mutateAsync: updateMutateAsync } = useUpdateCa();
+
+  const {
+    control,
+    handleSubmit,
+    reset,
+    formState: { isSubmitting },
+    watch
+  } = useForm<FormData>({
+    resolver: zodResolver(schema),
+    defaultValues: {
+      type: CaType.ROOT,
+      friendlyName: "",
+      organization: "",
+      ou: "",
+      country: "",
+      province: "",
+      locality: "",
+      commonName: "",
+      notAfter: getDateTenYearsFromToday(),
+      maxPathLength: "-1",
+      keyAlgorithm: CertKeyAlgorithm.RSA_2048
+    }
+  });
+
+  const caType = watch("type");
+
+  useEffect(() => {
+    if (ca) {
+      reset({
+        type: ca.type,
+        friendlyName: ca.friendlyName,
+        organization: ca.organization,
+        ou: ca.ou,
+        country: ca.country,
+        province: ca.province,
+        locality: ca.locality,
+        commonName: ca.commonName,
+        notAfter: ca.notAfter ? format(new Date(ca.notAfter), "yyyy-MM-dd") : "",
+        maxPathLength: ca.maxPathLength ? String(ca.maxPathLength) : "",
+        keyAlgorithm: ca.keyAlgorithm,
+        requireTemplateForIssuance: ca.requireTemplateForIssuance
+      });
+    } else {
+      reset({
+        type: CaType.ROOT,
+        friendlyName: "",
+        organization: "",
+        ou: "",
+        country: "",
+        province: "",
+        locality: "",
+        commonName: "",
+        notAfter: getDateTenYearsFromToday(),
+        maxPathLength: "-1",
+        keyAlgorithm: CertKeyAlgorithm.RSA_2048,
+        requireTemplateForIssuance: true
+      });
+    }
+  }, [ca]);
+
+  const onFormSubmit = async ({
+    type,
+    friendlyName,
+    commonName,
+    organization,
+    ou,
+    country,
+    locality,
+    province,
+    notAfter,
+    maxPathLength,
+    keyAlgorithm,
+    requireTemplateForIssuance
+  }: FormData) => {
+    try {
+      if (!currentWorkspace?.slug) return;
+
+      if (ca) {
+        // update
+        await updateMutateAsync({
+          projectSlug: currentWorkspace.slug,
+          caId: ca.id,
+          requireTemplateForIssuance
+        });
+      } else {
+        // create
+        await createMutateAsync({
+          projectSlug: currentWorkspace.slug,
+          type,
+          friendlyName,
+          commonName,
+          organization,
+          ou,
+          country,
+          province,
+          locality,
+          notAfter,
+          maxPathLength: Number(maxPathLength),
+          keyAlgorithm,
+          requireTemplateForIssuance
+        });
+      }
+
+      reset();
+      handlePopUpToggle("ca", false);
+
+      createNotification({
+        text: `Successfully ${ca ? "updated" : "created"} CA`,
+        type: "success"
+      });
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: "Failed to create CA",
+        type: "error"
+      });
+    }
+  };
+
+  return (
+    <Modal
+      isOpen={popUp?.ca?.isOpen}
+      onOpenChange={(isOpen) => {
+        reset();
+        handlePopUpToggle("ca", isOpen);
+      }}
+    >
+      <ModalContent title={`${ca ? "View" : "Create"} Private CA`}>
+        <form onSubmit={handleSubmit(onFormSubmit)}>
+          {ca && (
+            <FormControl label="CA ID">
+              <Input value={ca.id} isDisabled className="bg-white/[0.07]" />
+            </FormControl>
+          )}
+          <Controller
+            control={control}
+            name="type"
+            defaultValue={CaType.ROOT}
+            render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+              <FormControl label="CA Type" errorText={error?.message} isError={Boolean(error)}>
+                <Select
+                  defaultValue={field.value}
+                  {...field}
+                  onValueChange={(e) => onChange(e)}
+                  className="w-full"
+                  isDisabled={Boolean(ca)}
+                >
+                  {caTypes.map(({ label, value }) => (
+                    <SelectItem value={String(value || "")} key={label}>
+                      {label}
+                    </SelectItem>
+                  ))}
+                </Select>
+              </FormControl>
+            )}
+          />
+          {caType === CaType.ROOT && (
+            <>
+              {/* <Controller
+                name="notAfter"
+                control={control}
+                defaultValue={getDefaultNotAfterDate()}
+                render={({ field: { onChange, ...field }, fieldState: { error } }) => {
+                  return (
+                    <FormControl
+                      label="Validity"
+                      errorText={error?.message}
+                      isError={Boolean(error)}
+                      className="mr-4"
+                    >
+                      <DatePicker
+                        value={field.value || undefined}
+                        onChange={(date) => {
+                          onChange(date);
+                          setIsStartDatePickerOpen(false);
+                        }}
+                        popUpProps={{
+                          open: isStartDatePickerOpen,
+                          onOpenChange: setIsStartDatePickerOpen
+                        }}
+                        popUpContentProps={{}}
+                      />
+                    </FormControl>
+                  );
+                }}
+              /> */}
+              <Controller
+                control={control}
+                defaultValue=""
+                name="notAfter"
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    label="Valid Until"
+                    isError={Boolean(error)}
+                    errorText={error?.message}
+                    isRequired
+                  >
+                    <Input {...field} placeholder="YYYY-MM-DD" isDisabled={Boolean(ca)} />
+                  </FormControl>
+                )}
+              />
+              <Controller
+                control={control}
+                name="maxPathLength"
+                defaultValue="-1"
+                render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+                  <FormControl
+                    label="Path Length"
+                    errorText={error?.message}
+                    isError={Boolean(error)}
+                    className="mt-4"
+                  >
+                    <Select
+                      defaultValue={field.value}
+                      {...field}
+                      onValueChange={(e) => onChange(e)}
+                      className="w-full"
+                      isDisabled={Boolean(ca)}
+                    >
+                      {[-1, 0, 1, 2, 3, 4].map((value) => (
+                        <SelectItem value={String(value)} key={`ca-path-length-${value}`}>
+                          {`${value}`}
+                        </SelectItem>
+                      ))}
+                    </Select>
+                  </FormControl>
+                )}
+              />
+            </>
+          )}
+          <Controller
+            control={control}
+            name="keyAlgorithm"
+            defaultValue={CertKeyAlgorithm.RSA_2048}
+            render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+              <FormControl
+                label="Key Algorithm"
+                errorText={error?.message}
+                isError={Boolean(error)}
+              >
+                <Select
+                  defaultValue={field.value}
+                  {...field}
+                  onValueChange={(e) => onChange(e)}
+                  className="w-full"
+                  isDisabled={Boolean(ca)}
+                >
+                  {certKeyAlgorithms.map(({ label, value }) => (
+                    <SelectItem value={String(value || "")} key={label}>
+                      {label}
+                    </SelectItem>
+                  ))}
+                </Select>
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            defaultValue=""
+            name="friendlyName"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Friendly Name"
+                isError={Boolean(error)}
+                errorText={error?.message}
+              >
+                <Input {...field} placeholder="My CA" isDisabled={Boolean(ca)} />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            defaultValue=""
+            name="organization"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Organization (O)"
+                isError={Boolean(error)}
+                errorText={error?.message}
+              >
+                <Input {...field} placeholder="Acme Corp" isDisabled={Boolean(ca)} />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            defaultValue=""
+            name="ou"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Organization Unit (OU)"
+                isError={Boolean(error)}
+                errorText={error?.message}
+              >
+                <Input {...field} placeholder="Engineering" isDisabled={Boolean(ca)} />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            defaultValue=""
+            name="country"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Country Name (C)"
+                isError={Boolean(error)}
+                errorText={error?.message}
+              >
+                <Input {...field} placeholder="United States (US)" isDisabled={Boolean(ca)} />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            defaultValue=""
+            name="province"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="State or Province Name"
+                isError={Boolean(error)}
+                errorText={error?.message}
+              >
+                <Input {...field} placeholder="California" isDisabled={Boolean(ca)} />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            defaultValue=""
+            name="locality"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Locality Name"
+                isError={Boolean(error)}
+                errorText={error?.message}
+              >
+                <Input {...field} placeholder="San Francisco" isDisabled={Boolean(ca)} />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            defaultValue=""
+            name="commonName"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Common Name (CN)"
+                isError={Boolean(error)}
+                errorText={error?.message}
+              >
+                <Input {...field} placeholder="Example CA" isDisabled={Boolean(ca)} />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            name="requireTemplateForIssuance"
+            render={({ field, fieldState: { error } }) => {
+              return (
+                <FormControl isError={Boolean(error)} errorText={error?.message} className="my-8">
+                  <Switch
+                    id="is-active"
+                    onCheckedChange={(value) => field.onChange(value)}
+                    isChecked={field.value}
+                  >
+                    <p className="w-full">Require Template for Certificate Issuance</p>
+                  </Switch>
+                </FormControl>
+              );
+            }}
+          />
+          <div className="flex items-center">
+            <Button
+              className="mr-4"
+              size="sm"
+              type="submit"
+              isLoading={isSubmitting}
+              isDisabled={isSubmitting}
+            >
+              {popUp?.ca?.data ? "Update" : "Create"}
+            </Button>
+            <Button
+              colorSchema="secondary"
+              variant="plain"
+              onClick={() => handlePopUpToggle("ca", false)}
+            >
+              Cancel
+            </Button>
+          </div>
+        </form>
+      </ModalContent>
+    </Modal>
+  );
+};

frontend/src/pages/cert-manager/CertificatesPage/components/CaTab/components/CaSection.tsx

@@ -0,0 +1,132 @@
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal";
+import { createNotification } from "@app/components/notifications";
+import { ProjectPermissionCan } from "@app/components/permissions";
+import { Button, DeleteActionModal } from "@app/components/v2";
+import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
+import { CaStatus, useDeleteCa, useUpdateCa } from "@app/hooks/api";
+import { usePopUp } from "@app/hooks/usePopUp";
+
+import { CaCertModal } from "./CaCertModal";
+import { CaInstallCertModal } from "./CaInstallCertModal";
+import { CaModal } from "./CaModal";
+import { CaTable } from "./CaTable";
+
+export const CaSection = () => {
+  const { currentWorkspace } = useWorkspace();
+  const { mutateAsync: deleteCa } = useDeleteCa();
+  const { mutateAsync: updateCa } = useUpdateCa();
+
+  const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
+    "ca",
+    "caCert",
+    "installCaCert",
+    "deleteCa",
+    "caStatus", // enable / disable
+    "upgradePlan"
+  ] as const);
+
+  const onRemoveCaSubmit = async (caId: string) => {
+    try {
+      if (!currentWorkspace?.slug) return;
+
+      await deleteCa({ caId, projectSlug: currentWorkspace.slug });
+
+      createNotification({
+        text: "Successfully deleted CA",
+        type: "success"
+      });
+
+      handlePopUpClose("deleteCa");
+    } catch {
+      createNotification({
+        text: "Failed to delete CA",
+        type: "error"
+      });
+    }
+  };
+
+  const onUpdateCaStatus = async ({ caId, status }: { caId: string; status: CaStatus }) => {
+    try {
+      if (!currentWorkspace?.slug) return;
+
+      await updateCa({ caId, projectSlug: currentWorkspace.slug, status });
+
+      createNotification({
+        text: `Successfully ${status === CaStatus.ACTIVE ? "enabled" : "disabled"} CA`,
+        type: "success"
+      });
+
+      handlePopUpClose("caStatus");
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: `Failed to ${status === CaStatus.ACTIVE ? "enabled" : "disabled"} CA`,
+        type: "error"
+      });
+    }
+  };
+
+  return (
+    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <div className="mb-4 flex justify-between">
+        <p className="text-xl font-semibold text-mineshaft-100">Certificate Authorities</p>
+        <ProjectPermissionCan
+          I={ProjectPermissionActions.Create}
+          a={ProjectPermissionSub.CertificateAuthorities}
+        >
+          {(isAllowed) => (
+            <Button
+              colorSchema="primary"
+              type="submit"
+              leftIcon={<FontAwesomeIcon icon={faPlus} />}
+              onClick={() => handlePopUpOpen("ca")}
+              isDisabled={!isAllowed}
+            >
+              Create CA
+            </Button>
+          )}
+        </ProjectPermissionCan>
+      </div>
+      <CaModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
+      <CaInstallCertModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
+      <CaCertModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
+      <CaTable handlePopUpOpen={handlePopUpOpen} />
+      <DeleteActionModal
+        isOpen={popUp.deleteCa.isOpen}
+        title={`Are you sure want to remove the CA ${
+          (popUp?.deleteCa?.data as { dn: string })?.dn || ""
+        } from the project?`}
+        subTitle="This action will delete other CAs and certificates below it in your CA hierarchy."
+        onChange={(isOpen) => handlePopUpToggle("deleteCa", isOpen)}
+        deleteKey="confirm"
+        onDeleteApproved={() => onRemoveCaSubmit((popUp?.deleteCa?.data as { caId: string })?.caId)}
+      />
+      <DeleteActionModal
+        isOpen={popUp.caStatus.isOpen}
+        title={`Are you sure want to ${
+          (popUp?.caStatus?.data as { status: string })?.status === CaStatus.ACTIVE
+            ? "enable"
+            : "disable"
+        } the CA ${(popUp?.caStatus?.data as { dn: string })?.dn || ""} from the project?`}
+        subTitle={
+          (popUp?.caStatus?.data as { status: string })?.status === CaStatus.ACTIVE
+            ? "This action will allow the CA to start issuing certificates again."
+            : "This action will prevent the CA from issuing new certificates."
+        }
+        onChange={(isOpen) => handlePopUpToggle("caStatus", isOpen)}
+        deleteKey="confirm"
+        onDeleteApproved={() =>
+          onUpdateCaStatus(popUp?.caStatus?.data as { caId: string; status: CaStatus })
+        }
+      />
+      <UpgradePlanModal
+        isOpen={popUp.upgradePlan.isOpen}
+        onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
+        text={(popUp.upgradePlan?.data as { description: string })?.description}
+      />
+    </div>
+  );
+};

frontend/src/pages/cert-manager/CertificatesPage/components/CaTab/components/CaTable.tsx

@@ -0,0 +1,227 @@
+import { faBan, faCertificate, faEllipsis, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useNavigate } from "@tanstack/react-router";
+import { format } from "date-fns";
+import { twMerge } from "tailwind-merge";
+
+import { ProjectPermissionCan } from "@app/components/permissions";
+import {
+  Badge,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  EmptyState,
+  Table,
+  TableContainer,
+  TableSkeleton,
+  TBody,
+  Td,
+  Th,
+  THead,
+  Tooltip,
+  Tr
+} from "@app/components/v2";
+import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
+import { CaStatus, useListWorkspaceCas } from "@app/hooks/api";
+import {
+  caStatusToNameMap,
+  caTypeToNameMap,
+  getCaStatusBadgeVariant
+} from "@app/hooks/api/ca/constants";
+import { ProjectType } from "@app/hooks/api/workspace/types";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+type Props = {
+  handlePopUpOpen: (
+    popUpName: keyof UsePopUpState<
+      ["installCaCert", "caCert", "ca", "deleteCa", "caStatus", "upgradePlan"]
+    >,
+    data?: {
+      caId?: string;
+      dn?: string;
+      status?: CaStatus;
+      description?: string;
+    }
+  ) => void;
+};
+
+export const CaTable = ({ handlePopUpOpen }: Props) => {
+  const navigate = useNavigate();
+  const { currentWorkspace } = useWorkspace();
+  const { data, isPending } = useListWorkspaceCas({
+    projectSlug: currentWorkspace?.slug ?? ""
+  });
+
+  return (
+    <div>
+      <TableContainer>
+        <Table>
+          <THead>
+            <Tr>
+              <Th>Friendly Name</Th>
+              <Th>Status</Th>
+              <Th>Type</Th>
+              <Th>Valid Until</Th>
+              <Th />
+            </Tr>
+          </THead>
+          <TBody>
+            {isPending && <TableSkeleton columns={3} innerKey="project-cas" />}
+            {!isPending &&
+              data &&
+              data.length > 0 &&
+              data.map((ca) => {
+                return (
+                  <Tr
+                    className="h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
+                    key={`ca-${ca.id}`}
+                    onClick={() =>
+                      navigate({
+                        to: `/${ProjectType.CertificateManager}/$projectId/ca/$caId` as const,
+                        params: {
+                          projectId: currentWorkspace.id,
+                          caId: ca.id
+                        }
+                      })
+                    }
+                  >
+                    <Td>{ca.friendlyName}</Td>
+                    <Td>
+                      <Badge variant={getCaStatusBadgeVariant(ca.status)}>
+                        {caStatusToNameMap[ca.status]}
+                      </Badge>
+                    </Td>
+                    <Td>{caTypeToNameMap[ca.type]}</Td>
+                    <Td>
+                      <div className="flex items-center">
+                        <p>{ca.notAfter ? format(new Date(ca.notAfter), "yyyy-MM-dd") : "-"}</p>
+                      </div>
+                    </Td>
+                    <Td className="flex justify-end">
+                      <DropdownMenu>
+                        <DropdownMenuTrigger asChild className="rounded-lg">
+                          <div className="hover:text-primary-400 data-[state=open]:text-primary-400">
+                            <Tooltip content="More options">
+                              <FontAwesomeIcon size="lg" icon={faEllipsis} />
+                            </Tooltip>
+                          </div>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent align="start" className="p-1">
+                          {ca.status === CaStatus.PENDING_CERTIFICATE && (
+                            <ProjectPermissionCan
+                              I={ProjectPermissionActions.Create}
+                              a={ProjectPermissionSub.CertificateAuthorities}
+                            >
+                              {(isAllowed) => (
+                                <DropdownMenuItem
+                                  className={twMerge(
+                                    !isAllowed &&
+                                      "pointer-events-none cursor-not-allowed opacity-50"
+                                  )}
+                                  onClick={(e) => {
+                                    e.stopPropagation();
+                                    handlePopUpOpen("installCaCert", {
+                                      caId: ca.id
+                                    });
+                                  }}
+                                  disabled={!isAllowed}
+                                  icon={<FontAwesomeIcon icon={faCertificate} />}
+                                >
+                                  Install CA Certificate
+                                </DropdownMenuItem>
+                              )}
+                            </ProjectPermissionCan>
+                          )}
+                          {ca.status !== CaStatus.PENDING_CERTIFICATE && (
+                            <ProjectPermissionCan
+                              I={ProjectPermissionActions.Read}
+                              a={ProjectPermissionSub.CertificateAuthorities}
+                            >
+                              {(isAllowed) => (
+                                <DropdownMenuItem
+                                  className={twMerge(
+                                    !isAllowed &&
+                                      "pointer-events-none cursor-not-allowed opacity-50"
+                                  )}
+                                  onClick={(e) => {
+                                    e.stopPropagation();
+                                    handlePopUpOpen("caCert", {
+                                      caId: ca.id
+                                    });
+                                  }}
+                                  disabled={!isAllowed}
+                                  icon={<FontAwesomeIcon icon={faCertificate} />}
+                                >
+                                  View Certificate
+                                </DropdownMenuItem>
+                              )}
+                            </ProjectPermissionCan>
+                          )}
+                          {(ca.status === CaStatus.ACTIVE || ca.status === CaStatus.DISABLED) && (
+                            <ProjectPermissionCan
+                              I={ProjectPermissionActions.Edit}
+                              a={ProjectPermissionSub.CertificateAuthorities}
+                            >
+                              {(isAllowed) => (
+                                <DropdownMenuItem
+                                  className={twMerge(
+                                    !isAllowed &&
+                                      "pointer-events-none cursor-not-allowed opacity-50"
+                                  )}
+                                  onClick={(e) => {
+                                    e.stopPropagation();
+                                    handlePopUpOpen("caStatus", {
+                                      caId: ca.id,
+                                      status:
+                                        ca.status === CaStatus.ACTIVE
+                                          ? CaStatus.DISABLED
+                                          : CaStatus.ACTIVE
+                                    });
+                                  }}
+                                  disabled={!isAllowed}
+                                  icon={<FontAwesomeIcon icon={faBan} />}
+                                >
+                                  {`${ca.status === CaStatus.ACTIVE ? "Disable" : "Enable"} CA`}
+                                </DropdownMenuItem>
+                              )}
+                            </ProjectPermissionCan>
+                          )}
+                          <ProjectPermissionCan
+                            I={ProjectPermissionActions.Delete}
+                            a={ProjectPermissionSub.CertificateAuthorities}
+                          >
+                            {(isAllowed) => (
+                              <DropdownMenuItem
+                                className={twMerge(
+                                  !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
+                                )}
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  handlePopUpOpen("deleteCa", {
+                                    caId: ca.id,
+                                    dn: ca.dn
+                                  });
+                                }}
+                                disabled={!isAllowed}
+                                icon={<FontAwesomeIcon icon={faTrash} />}
+                              >
+                                Delete CA
+                              </DropdownMenuItem>
+                            )}
+                          </ProjectPermissionCan>
+                        </DropdownMenuContent>
+                      </DropdownMenu>
+                    </Td>
+                  </Tr>
+                );
+              })}
+          </TBody>
+        </Table>
+        {!isPending && data?.length === 0 && (
+          <EmptyState title="No certificate authorities have been created" icon={faCertificate} />
+        )}
+      </TableContainer>
+    </div>
+  );
+};

frontend/src/pages/cert-manager/CertificatesPage/components/CaTab/components/index.tsx

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

frontend/src/pages/cert-manager/CertificatesPage/components/CaTab/index.tsx

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

frontend/src/pages/cert-manager/CertificatesPage/components/CertificatesTab/CertificatesTab.tsx

@@ -0,0 +1,21 @@
+import { motion } from "framer-motion";
+
+import { PkiCollectionSection } from "../PkiAlertsTab/components";
+// import { CertificateTemplatesSection } from "./components/CertificateTemplatesSection";
+import { CertificatesSection } from "./components";
+
+export const CertificatesTab = () => {
+  return (
+    <motion.div
+      key="panel-certificates"
+      transition={{ duration: 0.15 }}
+      initial={{ opacity: 0, translateX: 30 }}
+      animate={{ opacity: 1, translateX: 0 }}
+      exit={{ opacity: 0, translateX: 30 }}
+    >
+      <PkiCollectionSection />
+      {/* <CertificateTemplatesSection /> */}
+      <CertificatesSection />
+    </motion.div>
+  );
+};

frontend/src/pages/cert-manager/CertificatesPage/components/CertificatesTab/components/CertificateCertModal.tsx

@@ -0,0 +1,37 @@
+import { Modal, ModalContent } from "@app/components/v2";
+import { useGetCertBody } from "@app/hooks/api";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+import { CertificateContent } from "./CertificateContent";
+
+type Props = {
+  popUp: UsePopUpState<["certificateCert"]>;
+  handlePopUpToggle: (popUpName: keyof UsePopUpState<["certificateCert"]>, state?: boolean) => void;
+};
+
+export const CertificateCertModal = ({ popUp, handlePopUpToggle }: Props) => {
+  const { data } = useGetCertBody(
+    (popUp?.certificateCert?.data as { serialNumber: string })?.serialNumber || ""
+  );
+
+  return (
+    <Modal
+      isOpen={popUp?.certificateCert?.isOpen}
+      onOpenChange={(isOpen) => {
+        handlePopUpToggle("certificateCert", isOpen);
+      }}
+    >
+      <ModalContent title="Export Certificate">
+        {data ? (
+          <CertificateContent
+            serialNumber={data.serialNumber}
+            certificate={data.certificate}
+            certificateChain={data.certificateChain}
+          />
+        ) : (
+          <div />
+        )}
+      </ModalContent>
+    </Modal>
+  );
+};

frontend/src/pages/cert-manager/CertificatesPage/components/CertificatesTab/components/CertificateContent.tsx

@@ -0,0 +1,173 @@
+import { faCheck, faCopy, faDownload } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import FileSaver from "file-saver";
+
+import { IconButton, Tooltip } from "@app/components/v2";
+import { useTimedReset } from "@app/hooks";
+
+type Props = {
+  serialNumber: string;
+  certificate: string;
+  certificateChain: string;
+  privateKey?: string;
+};
+
+export const CertificateContent = ({
+  serialNumber,
+  certificate,
+  certificateChain,
+  privateKey
+}: Props) => {
+  const [copyTextSerialNumber, isCopyingSerialNumber, setCopyTextSerialNumber] =
+    useTimedReset<string>({
+      initialState: "Copy to clipboard"
+    });
+  const [copyTextCertificate, isCopyingCertificate, setCopyTextCertificate] = useTimedReset<string>(
+    {
+      initialState: "Copy to clipboard"
+    }
+  );
+  const [copyTextCertificateChain, isCopyingCertificateChain, setCopyTextCertificateChain] =
+    useTimedReset<string>({
+      initialState: "Copy to clipboard"
+    });
+
+  const [copyTextCertificateSk, isCopyingCertificateSk, setCopyTextCertificateSk] =
+    useTimedReset<string>({
+      initialState: "Copy to clipboard"
+    });
+
+  const downloadTxtFile = (filename: string, content: string) => {
+    const blob = new Blob([content], { type: "text/plain;charset=utf-8" });
+    FileSaver.saveAs(blob, filename);
+  };
+
+  return (
+    <div>
+      <h2 className="mb-4">Serial Number</h2>
+      <div className="mb-8 flex items-center justify-between rounded-md bg-white/[0.07] p-2 text-base text-gray-400">
+        <p className="mr-4 break-all">{serialNumber}</p>
+        <Tooltip content={copyTextSerialNumber}>
+          <IconButton
+            ariaLabel="copy icon"
+            colorSchema="secondary"
+            className="group relative"
+            onClick={() => {
+              navigator.clipboard.writeText(serialNumber);
+              setCopyTextSerialNumber("Copied");
+            }}
+          >
+            <FontAwesomeIcon icon={isCopyingSerialNumber ? faCheck : faCopy} />
+          </IconButton>
+        </Tooltip>
+      </div>
+      <div className="mb-4 flex items-center justify-between">
+        <h2>Certificate Body</h2>
+        <div className="flex">
+          <Tooltip content={copyTextCertificate}>
+            <IconButton
+              ariaLabel="copy icon"
+              colorSchema="secondary"
+              className="group relative"
+              onClick={() => {
+                navigator.clipboard.writeText(certificate);
+                setCopyTextCertificate("Copied");
+              }}
+            >
+              <FontAwesomeIcon icon={isCopyingCertificate ? faCheck : faCopy} />
+            </IconButton>
+          </Tooltip>
+          <Tooltip content="Download">
+            <IconButton
+              ariaLabel="copy icon"
+              colorSchema="secondary"
+              className="group relative ml-2"
+              onClick={() => {
+                downloadTxtFile("cert.pem", certificate);
+              }}
+            >
+              <FontAwesomeIcon icon={faDownload} />
+            </IconButton>
+          </Tooltip>
+        </div>
+      </div>
+      <div className="mb-8 flex items-center justify-between rounded-md bg-white/[0.07] p-2 text-base text-gray-400">
+        <p className="mr-4 whitespace-pre-wrap break-all">{certificate}</p>
+      </div>
+      {certificateChain && (
+        <>
+          <div className="mb-4 flex items-center justify-between">
+            <h2>Certificate Chain</h2>
+            <div className="flex">
+              <Tooltip content={copyTextCertificateChain}>
+                <IconButton
+                  ariaLabel="copy icon"
+                  colorSchema="secondary"
+                  className="group relative"
+                  onClick={() => {
+                    navigator.clipboard.writeText(certificateChain);
+                    setCopyTextCertificateChain("Copied");
+                  }}
+                >
+                  <FontAwesomeIcon icon={isCopyingCertificateChain ? faCheck : faCopy} />
+                </IconButton>
+              </Tooltip>
+              <Tooltip content="Download">
+                <IconButton
+                  ariaLabel="copy icon"
+                  colorSchema="secondary"
+                  className="group relative ml-2"
+                  onClick={() => {
+                    downloadTxtFile("chain.pem", certificateChain);
+                  }}
+                >
+                  <FontAwesomeIcon icon={faDownload} />
+                </IconButton>
+              </Tooltip>
+            </div>
+          </div>
+          <div className="mb-8 flex items-center justify-between rounded-md bg-white/[0.07] p-2 text-base text-gray-400">
+            <p className="mr-4 whitespace-pre-wrap break-all">{certificateChain}</p>
+          </div>
+        </>
+      )}
+      {privateKey && (
+        <>
+          <div className="mb-4 flex items-center justify-between">
+            <h2>Certificate Private Key</h2>
+            <div className="flex">
+              <Tooltip content={copyTextCertificateSk}>
+                <IconButton
+                  ariaLabel="copy icon"
+                  colorSchema="secondary"
+                  className="group relative"
+                  onClick={() => {
+                    navigator.clipboard.writeText(privateKey);
+                    setCopyTextCertificateSk("Copied");
+                  }}
+                >
+                  <FontAwesomeIcon icon={isCopyingCertificateSk ? faCheck : faCopy} />
+                </IconButton>
+              </Tooltip>
+              <Tooltip content={copyTextCertificateSk}>
+                <IconButton
+                  ariaLabel="copy icon"
+                  colorSchema="secondary"
+                  className="group relative ml-2"
+                  onClick={() => {
+                    downloadTxtFile("private_key.txt", privateKey);
+                  }}
+                >
+                  <FontAwesomeIcon icon={faDownload} />
+                </IconButton>
+              </Tooltip>
+            </div>
+          </div>
+          <div className="mb-8 flex items-center justify-between rounded-md bg-white/[0.07] p-2 text-base text-gray-400">
+            <p className="mr-4 whitespace-pre-wrap break-all">{privateKey}</p>
+          </div>
+        </>
+      )}
+    </div>
+  );
+};

frontend/src/pages/cert-manager/CertificatesPage/components/CertificatesTab/components/CertificateModal.tsx

@@ -0,0 +1,538 @@
+import { useEffect, useState } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { faQuestionCircle } from "@fortawesome/free-regular-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+import { createNotification } from "@app/components/notifications";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+  Button,
+  Checkbox,
+  FormControl,
+  FormLabel,
+  Input,
+  Modal,
+  ModalContent,
+  Select,
+  SelectItem,
+  Tooltip
+} from "@app/components/v2";
+import { useWorkspace } from "@app/context";
+import {
+  CaStatus,
+  useCreateCertificate,
+  useGetCert,
+  useGetCertTemplate,
+  useListWorkspaceCas,
+  useListWorkspaceCertificateTemplates,
+  useListWorkspacePkiCollections
+} from "@app/hooks/api";
+import { caTypeToNameMap } from "@app/hooks/api/ca/constants";
+import {
+  EXTENDED_KEY_USAGES_OPTIONS,
+  KEY_USAGES_OPTIONS
+} from "@app/hooks/api/certificates/constants";
+import { CertExtendedKeyUsage, CertKeyUsage } from "@app/hooks/api/certificates/enums";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+import { CertificateContent } from "./CertificateContent";
+
+const schema = z.object({
+  certificateTemplateId: z.string().optional(),
+  caId: z.string(),
+  collectionId: z.string().optional(),
+  friendlyName: z.string(),
+  commonName: z.string().trim().min(1),
+  altNames: z.string(),
+  ttl: z.string().trim(),
+  keyUsages: z.object({
+    [CertKeyUsage.DIGITAL_SIGNATURE]: z.boolean().optional(),
+    [CertKeyUsage.KEY_ENCIPHERMENT]: z.boolean().optional(),
+    [CertKeyUsage.NON_REPUDIATION]: z.boolean().optional(),
+    [CertKeyUsage.DATA_ENCIPHERMENT]: z.boolean().optional(),
+    [CertKeyUsage.KEY_AGREEMENT]: z.boolean().optional(),
+    [CertKeyUsage.KEY_CERT_SIGN]: z.boolean().optional(),
+    [CertKeyUsage.CRL_SIGN]: z.boolean().optional(),
+    [CertKeyUsage.ENCIPHER_ONLY]: z.boolean().optional(),
+    [CertKeyUsage.DECIPHER_ONLY]: z.boolean().optional()
+  }),
+  extendedKeyUsages: z.object({
+    [CertExtendedKeyUsage.CLIENT_AUTH]: z.boolean().optional(),
+    [CertExtendedKeyUsage.CODE_SIGNING]: z.boolean().optional(),
+    [CertExtendedKeyUsage.EMAIL_PROTECTION]: z.boolean().optional(),
+    [CertExtendedKeyUsage.OCSP_SIGNING]: z.boolean().optional(),
+    [CertExtendedKeyUsage.SERVER_AUTH]: z.boolean().optional(),
+    [CertExtendedKeyUsage.TIMESTAMPING]: z.boolean().optional()
+  })
+});
+
+export type FormData = z.infer<typeof schema>;
+
+type Props = {
+  popUp: UsePopUpState<["certificate"]>;
+  handlePopUpToggle: (popUpName: keyof UsePopUpState<["certificate"]>, state?: boolean) => void;
+};
+
+type TCertificateDetails = {
+  serialNumber: string;
+  certificate: string;
+  certificateChain: string;
+  privateKey: string;
+};
+
+const CERT_TEMPLATE_NONE_VALUE = "none";
+
+export const CertificateModal = ({ popUp, handlePopUpToggle }: Props) => {
+  const [certificateDetails, setCertificateDetails] = useState<TCertificateDetails | null>(null);
+  const { currentWorkspace } = useWorkspace();
+  const { data: cert } = useGetCert(
+    (popUp?.certificate?.data as { serialNumber: string })?.serialNumber || ""
+  );
+
+  const { data: cas } = useListWorkspaceCas({
+    projectSlug: currentWorkspace?.slug ?? "",
+    status: CaStatus.ACTIVE
+  });
+
+  const { data } = useListWorkspacePkiCollections({
+    workspaceId: currentWorkspace?.id || ""
+  });
+
+  const { data: templatesData } = useListWorkspaceCertificateTemplates({
+    workspaceId: currentWorkspace?.id || ""
+  });
+
+  const { mutateAsync: createCertificate } = useCreateCertificate();
+
+  const {
+    control,
+    handleSubmit,
+    reset,
+    formState: { isSubmitting },
+    setValue,
+    watch
+  } = useForm<FormData>({
+    resolver: zodResolver(schema),
+    defaultValues: {
+      keyUsages: {
+        [CertKeyUsage.DIGITAL_SIGNATURE]: true,
+        [CertKeyUsage.KEY_ENCIPHERMENT]: true
+      },
+      extendedKeyUsages: {}
+    }
+  });
+
+  const selectedCertTemplateId = watch("certificateTemplateId");
+  const hasCertTemplateSelected =
+    selectedCertTemplateId !== "" && selectedCertTemplateId !== CERT_TEMPLATE_NONE_VALUE;
+
+  const { data: selectedCertTemplate } = useGetCertTemplate(
+    hasCertTemplateSelected ? (selectedCertTemplateId as string) : ""
+  );
+
+  useEffect(() => {
+    if (cert) {
+      reset({
+        caId: cert.caId,
+        friendlyName: cert.friendlyName,
+        commonName: cert.commonName,
+        altNames: cert.altNames,
+        certificateTemplateId: cert.certificateTemplateId ?? CERT_TEMPLATE_NONE_VALUE,
+        ttl: "",
+        keyUsages: Object.fromEntries((cert.keyUsages || []).map((name) => [name, true])),
+        extendedKeyUsages: Object.fromEntries(
+          (cert.extendedKeyUsages || []).map((name) => [name, true])
+        )
+      });
+    } else {
+      reset({
+        caId: "",
+        friendlyName: "",
+        commonName: "",
+        altNames: "",
+        ttl: "",
+        certificateTemplateId: CERT_TEMPLATE_NONE_VALUE,
+        keyUsages: {
+          [CertKeyUsage.DIGITAL_SIGNATURE]: true,
+          [CertKeyUsage.KEY_ENCIPHERMENT]: true
+        },
+        extendedKeyUsages: {}
+      });
+    }
+  }, [cert]);
+
+  useEffect(() => {
+    if (!cert && selectedCertTemplate) {
+      setValue("ttl", selectedCertTemplate.ttl);
+      setValue(
+        "keyUsages",
+        Object.fromEntries(selectedCertTemplate.keyUsages.map((name) => [name, true]))
+      );
+      setValue(
+        "extendedKeyUsages",
+        Object.fromEntries(selectedCertTemplate.extendedKeyUsages.map((name) => [name, true]))
+      );
+    }
+  }, [selectedCertTemplate, cert]);
+
+  const onFormSubmit = async ({
+    caId,
+    friendlyName,
+    collectionId,
+    commonName,
+    altNames,
+    ttl,
+    keyUsages,
+    extendedKeyUsages
+  }: FormData) => {
+    try {
+      if (!currentWorkspace?.slug) return;
+
+      const { serialNumber, certificate, certificateChain, privateKey } = await createCertificate({
+        caId: !selectedCertTemplate ? caId : undefined,
+        certificateTemplateId: selectedCertTemplate ? selectedCertTemplateId : undefined,
+        projectSlug: currentWorkspace.slug,
+        pkiCollectionId: collectionId,
+        friendlyName,
+        commonName,
+        altNames,
+        ttl,
+        keyUsages: Object.entries(keyUsages)
+          .filter(([, value]) => value)
+          .map(([key]) => key as CertKeyUsage),
+        extendedKeyUsages: Object.entries(extendedKeyUsages)
+          .filter(([, value]) => value)
+          .map(([key]) => key as CertExtendedKeyUsage)
+      });
+
+      reset();
+
+      setCertificateDetails({
+        serialNumber,
+        certificate,
+        certificateChain,
+        privateKey
+      });
+
+      createNotification({
+        text: "Successfully created certificate",
+        type: "success"
+      });
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: "Failed to create certificate",
+        type: "error"
+      });
+    }
+  };
+
+  useEffect(() => {
+    if (cas?.length) {
+      setValue("caId", cas[0].id);
+    }
+  }, [cas]);
+
+  return (
+    <Modal
+      isOpen={popUp?.certificate?.isOpen}
+      onOpenChange={(isOpen) => {
+        handlePopUpToggle("certificate", isOpen);
+        reset();
+        setCertificateDetails(null);
+      }}
+    >
+      <ModalContent title={`${cert ? "View" : "Issue"} Certificate`}>
+        {!certificateDetails ? (
+          <form onSubmit={handleSubmit(onFormSubmit)}>
+            <Controller
+              control={control}
+              name="certificateTemplateId"
+              defaultValue=""
+              render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+                <FormControl
+                  label={
+                    <div>
+                      <FormLabel
+                        isRequired
+                        label="Certificate Template"
+                        icon={
+                          <Tooltip
+                            className="text-center"
+                            content={
+                              <span>
+                                When a template is selected, the details provided are validated
+                                against the template policies.
+                              </span>
+                            }
+                          >
+                            <FontAwesomeIcon icon={faQuestionCircle} size="sm" />
+                          </Tooltip>
+                        }
+                      />
+                    </div>
+                  }
+                  errorText={error?.message}
+                  isError={Boolean(error)}
+                  isRequired
+                >
+                  <Select
+                    defaultValue={field.value}
+                    {...field}
+                    onValueChange={(e) => onChange(e)}
+                    className="w-full"
+                    isDisabled={Boolean(cert)}
+                  >
+                    <SelectItem value={CERT_TEMPLATE_NONE_VALUE} key="cert-template-none">
+                      None
+                    </SelectItem>
+                    {(templatesData?.certificateTemplates || []).map(({ id, name }) => (
+                      <SelectItem value={id} key={`cert-template-${id}`}>
+                        {name}
+                      </SelectItem>
+                    ))}
+                  </Select>
+                </FormControl>
+              )}
+            />
+            {(!selectedCertTemplateId ||
+              selectedCertTemplateId === CERT_TEMPLATE_NONE_VALUE ||
+              cert) && (
+              <>
+                <Controller
+                  control={control}
+                  name="caId"
+                  render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+                    <FormControl
+                      label="Issuing CA"
+                      errorText={error?.message}
+                      isError={Boolean(error)}
+                      className="mt-4"
+                      isRequired
+                    >
+                      <Select
+                        defaultValue={field.value}
+                        {...field}
+                        onValueChange={(e) => onChange(e)}
+                        className="w-full"
+                        isDisabled={Boolean(cert)}
+                      >
+                        {(cas || []).map(({ id, type, dn }) => (
+                          <SelectItem value={id} key={`ca-${id}`}>
+                            {`${caTypeToNameMap[type]}: ${dn}`}
+                          </SelectItem>
+                        ))}
+                      </Select>
+                    </FormControl>
+                  )}
+                />
+                <Controller
+                  control={control}
+                  name="collectionId"
+                  render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+                    <FormControl
+                      label="Certificate Collection (Optional)"
+                      errorText={error?.message}
+                      isError={Boolean(error)}
+                      className="mt-4"
+                    >
+                      <Select
+                        defaultValue={field.value}
+                        {...field}
+                        onValueChange={(e) => onChange(e)}
+                        className="w-full"
+                        isDisabled={Boolean(cert)}
+                      >
+                        {(data?.collections || []).map(({ id, name }) => (
+                          <SelectItem value={id} key={`pki-collection-${id}`}>
+                            {name}
+                          </SelectItem>
+                        ))}
+                      </Select>
+                    </FormControl>
+                  )}
+                />
+              </>
+            )}
+            <Controller
+              control={control}
+              defaultValue=""
+              name="friendlyName"
+              render={({ field, fieldState: { error } }) => (
+                <FormControl
+                  label="Friendly Name"
+                  isError={Boolean(error)}
+                  errorText={error?.message}
+                >
+                  <Input {...field} placeholder="My Certificate" isDisabled={Boolean(cert)} />
+                </FormControl>
+              )}
+            />
+            <Controller
+              control={control}
+              defaultValue=""
+              name="commonName"
+              render={({ field, fieldState: { error } }) => (
+                <FormControl
+                  label="Common Name (CN)"
+                  isError={Boolean(error)}
+                  errorText={error?.message}
+                  isRequired
+                >
+                  <Input {...field} placeholder="service.acme.com" isDisabled={Boolean(cert)} />
+                </FormControl>
+              )}
+            />
+            <Controller
+              control={control}
+              defaultValue=""
+              name="altNames"
+              render={({ field, fieldState: { error } }) => (
+                <FormControl
+                  label="Alternative Names (SANs)"
+                  isError={Boolean(error)}
+                  errorText={error?.message}
+                >
+                  <Input
+                    {...field}
+                    placeholder="app1.acme.com, app2.acme.com, ..."
+                    isDisabled={Boolean(cert)}
+                  />
+                </FormControl>
+              )}
+            />
+            <Controller
+              control={control}
+              name="ttl"
+              render={({ field, fieldState: { error } }) => (
+                <FormControl
+                  label="TTL"
+                  isError={Boolean(error)}
+                  errorText={error?.message}
+                  isRequired
+                >
+                  <Input
+                    {...field}
+                    placeholder="2 days, 1d, 2h, 1y, ..."
+                    isDisabled={Boolean(cert)}
+                  />
+                </FormControl>
+              )}
+            />
+            <Accordion type="single" collapsible className="w-full">
+              <AccordionItem value="key-usages" className="data-[state=open]:border-none">
+                <AccordionTrigger className="h-fit flex-none pl-1 text-sm">
+                  <div className="order-1 ml-3">Key Usage</div>
+                </AccordionTrigger>
+                <AccordionContent>
+                  <Controller
+                    control={control}
+                    name="keyUsages"
+                    render={({ field: { onChange, value }, fieldState: { error } }) => {
+                      return (
+                        <FormControl
+                          label="Key Usage"
+                          errorText={error?.message}
+                          isError={Boolean(error)}
+                        >
+                          <div className="mb-7 mt-2 grid grid-cols-2 gap-2">
+                            {KEY_USAGES_OPTIONS.map(({ label, value: optionValue }) => {
+                              return (
+                                <Checkbox
+                                  id={optionValue}
+                                  key={optionValue}
+                                  className="data-[state=checked]:bg-primary"
+                                  isDisabled={Boolean(cert)}
+                                  isChecked={value[optionValue]}
+                                  onCheckedChange={(state) => {
+                                    onChange({
+                                      ...value,
+                                      [optionValue]: state
+                                    });
+                                  }}
+                                >
+                                  {label}
+                                </Checkbox>
+                              );
+                            })}
+                          </div>
+                        </FormControl>
+                      );
+                    }}
+                  />
+                  <Controller
+                    control={control}
+                    name="extendedKeyUsages"
+                    render={({ field: { onChange, value }, fieldState: { error } }) => {
+                      return (
+                        <FormControl
+                          label="Extended Key Usage"
+                          errorText={error?.message}
+                          isError={Boolean(error)}
+                        >
+                          <div className="mb-7 mt-2 grid grid-cols-2 gap-2">
+                            {EXTENDED_KEY_USAGES_OPTIONS.map(({ label, value: optionValue }) => {
+                              return (
+                                <Checkbox
+                                  id={optionValue}
+                                  key={optionValue}
+                                  className="data-[state=checked]:bg-primary"
+                                  isDisabled={Boolean(cert)}
+                                  isChecked={value[optionValue]}
+                                  onCheckedChange={(state) => {
+                                    onChange({
+                                      ...value,
+                                      [optionValue]: state
+                                    });
+                                  }}
+                                >
+                                  {label}
+                                </Checkbox>
+                              );
+                            })}
+                          </div>
+                        </FormControl>
+                      );
+                    }}
+                  />
+                </AccordionContent>
+              </AccordionItem>
+            </Accordion>
+            {!cert && (
+              <div className="mt-4 flex items-center">
+                <Button
+                  className="mr-4"
+                  size="sm"
+                  type="submit"
+                  isLoading={isSubmitting}
+                  isDisabled={isSubmitting}
+                >
+                  Create
+                </Button>
+                <Button
+                  colorSchema="secondary"
+                  variant="plain"
+                  onClick={() => handlePopUpToggle("certificate", false)}
+                >
+                  Cancel
+                </Button>
+              </div>
+            )}
+          </form>
+        ) : (
+          <CertificateContent
+            serialNumber={certificateDetails.serialNumber}
+            certificate={certificateDetails.certificate}
+            certificateChain={certificateDetails.certificateChain}
+            privateKey={certificateDetails.privateKey}
+          />
+        )}
+      </ModalContent>
+    </Modal>
+  );
+};

frontend/src/pages/cert-manager/CertificatesPage/components/CertificatesTab/components/CertificateRevocationModal.tsx

@@ -0,0 +1,131 @@
+import { Controller, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+import { createNotification } from "@app/components/notifications";
+import { Button, FormControl, Modal, ModalContent, Select, SelectItem } from "@app/components/v2";
+import { useWorkspace } from "@app/context";
+import { useRevokeCert } from "@app/hooks/api";
+import { crlReasons } from "@app/hooks/api/certificates/constants";
+import { CrlReason } from "@app/hooks/api/certificates/enums";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+const schema = z.object({
+  revocationReason: z.enum([
+    CrlReason.UNSPECIFIED,
+    CrlReason.KEY_COMPROMISE,
+    CrlReason.CA_COMPROMISE,
+    CrlReason.AFFILIATION_CHANGED,
+    CrlReason.SUPERSEDED,
+    CrlReason.CESSATION_OF_OPERATION,
+    CrlReason.CERTIFICATE_HOLD,
+    CrlReason.PRIVILEGE_WITHDRAWN,
+    CrlReason.A_A_COMPROMISE
+  ])
+});
+
+export type FormData = z.infer<typeof schema>;
+
+type Props = {
+  popUp: UsePopUpState<["revokeCertificate"]>;
+  handlePopUpToggle: (
+    popUpName: keyof UsePopUpState<["revokeCertificate"]>,
+    state?: boolean
+  ) => void;
+};
+
+export const CertificateRevocationModal = ({ popUp, handlePopUpToggle }: Props) => {
+  const { currentWorkspace } = useWorkspace();
+  const { mutateAsync: revokeCertificate } = useRevokeCert();
+
+  const {
+    control,
+    handleSubmit,
+    reset,
+    formState: { isSubmitting }
+  } = useForm<FormData>({
+    resolver: zodResolver(schema)
+  });
+
+  const onFormSubmit = async ({ revocationReason }: FormData) => {
+    try {
+      if (!currentWorkspace?.slug) return;
+
+      const { serialNumber } = popUp.revokeCertificate.data as { serialNumber: string };
+
+      await revokeCertificate({
+        projectSlug: currentWorkspace.slug,
+        serialNumber,
+        revocationReason
+      });
+
+      reset();
+      handlePopUpToggle("revokeCertificate", false);
+
+      createNotification({
+        text: "Successfully revoked certificate",
+        type: "success"
+      });
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: "Failed to revoke certificate",
+        type: "error"
+      });
+    }
+  };
+
+  return (
+    <Modal
+      isOpen={popUp?.revokeCertificate?.isOpen}
+      onOpenChange={(isOpen) => {
+        handlePopUpToggle("revokeCertificate", isOpen);
+        reset();
+      }}
+    >
+      <ModalContent title="Revoke Certificate">
+        <form onSubmit={handleSubmit(onFormSubmit)}>
+          <Controller
+            control={control}
+            name="revocationReason"
+            defaultValue={CrlReason.UNSPECIFIED}
+            render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+              <FormControl
+                label="Revocation Reason"
+                errorText={error?.message}
+                isError={Boolean(error)}
+              >
+                <Select
+                  defaultValue={field.value}
+                  {...field}
+                  onValueChange={(e) => onChange(e)}
+                  className="w-full"
+                >
+                  {crlReasons.map(({ label, value }) => (
+                    <SelectItem value={String(value || "")} key={label}>
+                      {label}
+                    </SelectItem>
+                  ))}
+                </Select>
+              </FormControl>
+            )}
+          />
+          <div className="flex items-center">
+            <Button
+              className="mr-4"
+              size="sm"
+              type="submit"
+              isLoading={isSubmitting}
+              isDisabled={isSubmitting}
+            >
+              Revoke
+            </Button>
+            <Button colorSchema="secondary" variant="plain">
+              Cancel
+            </Button>
+          </div>
+        </form>
+      </ModalContent>
+    </Modal>
+  );
+};

frontend/src/pages/cert-manager/CertificatesPage/components/CertificatesTab/components/CertificateTemplateEnrollmentModal.tsx

@@ -0,0 +1,261 @@
+import { useEffect } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import z from "zod";
+
+import { createNotification } from "@app/components/notifications";
+import {
+  Button,
+  FormControl,
+  Input,
+  Modal,
+  ModalContent,
+  Select,
+  SelectItem,
+  Switch,
+  TextArea
+} from "@app/components/v2";
+import { useToggle } from "@app/hooks";
+import { useCreateEstConfig, useGetEstConfig, useUpdateEstConfig } from "@app/hooks/api";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+enum EnrollmentMethod {
+  EST = "est"
+}
+
+type Props = {
+  popUp: UsePopUpState<["enrollmentOptions"]>;
+  handlePopUpToggle: (
+    popUpName: keyof UsePopUpState<["enrollmentOptions"]>,
+    state?: boolean
+  ) => void;
+};
+
+const schema = z.object({
+  method: z.nativeEnum(EnrollmentMethod),
+  caChain: z.string().optional(),
+  passphrase: z.string().optional(),
+  isEnabled: z.boolean(),
+  disableBootstrapCertValidation: z.boolean().optional().default(false)
+});
+
+export type FormData = z.infer<typeof schema>;
+
+export const CertificateTemplateEnrollmentModal = ({ popUp, handlePopUpToggle }: Props) => {
+  const popUpData = popUp?.enrollmentOptions?.data as {
+    id: string;
+  };
+  const certificateTemplateId = popUpData?.id;
+
+  const { data } = useGetEstConfig(certificateTemplateId);
+
+  const {
+    control,
+    handleSubmit,
+    reset,
+    setError,
+    watch,
+    setValue,
+    formState: { isSubmitting }
+  } = useForm<FormData>({
+    resolver: zodResolver(schema)
+  });
+
+  const { mutateAsync: createEstConfig } = useCreateEstConfig();
+  const { mutateAsync: updateEstConfig } = useUpdateEstConfig();
+  const [isPassphraseFocused, setIsPassphraseFocused] = useToggle(false);
+
+  const disableBootstrapCertValidation = watch("disableBootstrapCertValidation");
+
+  useEffect(() => {
+    if (disableBootstrapCertValidation) {
+      setValue("caChain", "");
+    }
+  }, [disableBootstrapCertValidation]);
+
+  useEffect(() => {
+    if (data) {
+      reset({
+        caChain: data.caChain,
+        isEnabled: data.isEnabled,
+        disableBootstrapCertValidation: data.disableBootstrapCertValidation
+      });
+    } else {
+      reset({
+        caChain: "",
+        isEnabled: false,
+        disableBootstrapCertValidation: false
+      });
+    }
+  }, [data]);
+
+  const onFormSubmit = async ({ caChain, passphrase, isEnabled }: FormData) => {
+    try {
+      if (data) {
+        await updateEstConfig({
+          certificateTemplateId,
+          caChain,
+          passphrase,
+          isEnabled,
+          disableBootstrapCertValidation
+        });
+      } else {
+        if (!passphrase) {
+          setError("passphrase", { message: "Passphrase is required to setup EST" });
+          return;
+        }
+
+        await createEstConfig({
+          certificateTemplateId,
+          caChain,
+          passphrase,
+          isEnabled,
+          disableBootstrapCertValidation
+        });
+      }
+
+      handlePopUpToggle("enrollmentOptions", false);
+
+      createNotification({
+        text: "Successfully saved changes",
+        type: "success"
+      });
+
+      reset();
+    } catch (err) {
+      console.error(err);
+    }
+  };
+
+  return (
+    <Modal
+      isOpen={popUp?.enrollmentOptions?.isOpen}
+      onOpenChange={(isOpen) => {
+        handlePopUpToggle("enrollmentOptions", isOpen);
+        reset();
+      }}
+    >
+      <ModalContent title="Manage Enrollment Options">
+        <form onSubmit={handleSubmit(onFormSubmit)}>
+          <Controller
+            control={control}
+            name="method"
+            defaultValue={EnrollmentMethod.EST}
+            render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+              <FormControl
+                label="Client Enrollment Method"
+                errorText={error?.message}
+                isError={Boolean(error)}
+              >
+                <Select
+                  defaultValue={field.value}
+                  {...field}
+                  onValueChange={(e) => onChange(e)}
+                  className="w-full"
+                >
+                  <SelectItem value={EnrollmentMethod.EST} key={EnrollmentMethod.EST}>
+                    EST
+                  </SelectItem>
+                </Select>
+              </FormControl>
+            )}
+          />
+          {data && (
+            <FormControl label="EST Label">
+              <Input value={data.certificateTemplateId} isDisabled className="bg-white/[0.07]" />
+            </FormControl>
+          )}
+          <Controller
+            control={control}
+            name="disableBootstrapCertValidation"
+            render={({ field, fieldState: { error } }) => {
+              return (
+                <FormControl isError={Boolean(error)} errorText={error?.message}>
+                  <Switch
+                    id="skip-bootstrap-cert-validation"
+                    onCheckedChange={(value) => field.onChange(value)}
+                    isChecked={field.value}
+                  >
+                    <p className="ml-1 w-full">Disable Bootstrap Certificate Validation</p>
+                  </Switch>
+                </FormControl>
+              );
+            }}
+          />
+          {!disableBootstrapCertValidation && (
+            <Controller
+              control={control}
+              name="caChain"
+              disabled={disableBootstrapCertValidation}
+              render={({ field, fieldState: { error } }) => (
+                <FormControl
+                  label="Certificate Authority Chain"
+                  isError={Boolean(error)}
+                  errorText={error?.message}
+                  isRequired={!disableBootstrapCertValidation}
+                >
+                  <TextArea
+                    {...field}
+                    isDisabled={disableBootstrapCertValidation}
+                    className="min-h-[15rem] border-none bg-mineshaft-900 text-gray-400"
+                    reSize="none"
+                  />
+                </FormControl>
+              )}
+            />
+          )}
+          <Controller
+            control={control}
+            name="passphrase"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl label="Passphrase" isError={Boolean(error)} errorText={error?.message}>
+                <Input
+                  {...field}
+                  type={isPassphraseFocused ? "text" : "password"}
+                  onFocus={() => setIsPassphraseFocused.on()}
+                  onBlur={() => setIsPassphraseFocused.off()}
+                />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            name="isEnabled"
+            render={({ field, fieldState: { error } }) => {
+              return (
+                <FormControl isError={Boolean(error)} errorText={error?.message}>
+                  <Switch
+                    id="is-active"
+                    onCheckedChange={(value) => field.onChange(value)}
+                    isChecked={field.value}
+                  >
+                    <p className="ml-1 w-full">EST Enabled</p>
+                  </Switch>
+                </FormControl>
+              );
+            }}
+          />
+
+          <div className="mt-8 flex items-center">
+            <Button
+              className="mr-4"
+              size="sm"
+              type="submit"
+              isLoading={isSubmitting}
+              isDisabled={isSubmitting}
+            >
+              Save
+            </Button>
+            <Button
+              colorSchema="secondary"
+              variant="plain"
+              onClick={() => handlePopUpToggle("enrollmentOptions", false)}
+            >
+              Cancel
+            </Button>
+          </div>
+        </form>
+      </ModalContent>
+    </Modal>
+  );
+};

frontend/src/pages/cert-manager/CertificatesPage/components/CertificatesTab/components/CertificateTemplateModal.tsx

@@ -0,0 +1,493 @@
+import { useEffect } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { faQuestionCircle } from "@fortawesome/free-regular-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+import { createNotification } from "@app/components/notifications";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+  Button,
+  Checkbox,
+  FormControl,
+  FormLabel,
+  Input,
+  Modal,
+  ModalContent,
+  Select,
+  SelectItem,
+  Tooltip
+} from "@app/components/v2";
+import { useWorkspace } from "@app/context";
+import {
+  CaStatus,
+  useCreateCertTemplate,
+  useGetCaById,
+  useGetCertTemplate,
+  useListWorkspaceCas,
+  useListWorkspacePkiCollections,
+  useUpdateCertTemplate
+} from "@app/hooks/api";
+import { caTypeToNameMap } from "@app/hooks/api/ca/constants";
+import {
+  EXTENDED_KEY_USAGES_OPTIONS,
+  KEY_USAGES_OPTIONS
+} from "@app/hooks/api/certificates/constants";
+import { CertExtendedKeyUsage, CertKeyUsage } from "@app/hooks/api/certificates/enums";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+const validateTemplateRegexField = z
+  .string()
+  .trim()
+  .min(1)
+  .max(100)
+  .regex(/^[a-zA-Z0-9 *@\-\\.\\]+$/, {
+    message:
+      "Invalid pattern: only alphanumeric characters, spaces, *, ., @, -, and \\ are allowed."
+  });
+
+const schema = z.object({
+  caId: z.string(),
+  collectionId: z.string().optional(),
+  name: z.string().min(1),
+  commonName: validateTemplateRegexField,
+  subjectAlternativeName: validateTemplateRegexField,
+  ttl: z.string().trim().min(1),
+  keyUsages: z.object({
+    [CertKeyUsage.DIGITAL_SIGNATURE]: z.boolean().optional(),
+    [CertKeyUsage.KEY_ENCIPHERMENT]: z.boolean().optional(),
+    [CertKeyUsage.NON_REPUDIATION]: z.boolean().optional(),
+    [CertKeyUsage.DATA_ENCIPHERMENT]: z.boolean().optional(),
+    [CertKeyUsage.KEY_AGREEMENT]: z.boolean().optional(),
+    [CertKeyUsage.KEY_CERT_SIGN]: z.boolean().optional(),
+    [CertKeyUsage.CRL_SIGN]: z.boolean().optional(),
+    [CertKeyUsage.ENCIPHER_ONLY]: z.boolean().optional(),
+    [CertKeyUsage.DECIPHER_ONLY]: z.boolean().optional()
+  }),
+  extendedKeyUsages: z.object({
+    [CertExtendedKeyUsage.CLIENT_AUTH]: z.boolean().optional(),
+    [CertExtendedKeyUsage.CODE_SIGNING]: z.boolean().optional(),
+    [CertExtendedKeyUsage.EMAIL_PROTECTION]: z.boolean().optional(),
+    [CertExtendedKeyUsage.OCSP_SIGNING]: z.boolean().optional(),
+    [CertExtendedKeyUsage.SERVER_AUTH]: z.boolean().optional(),
+    [CertExtendedKeyUsage.TIMESTAMPING]: z.boolean().optional()
+  })
+});
+
+export type FormData = z.infer<typeof schema>;
+
+type Props = {
+  caId: string;
+  popUp: UsePopUpState<["certificateTemplate"]>;
+  handlePopUpToggle: (
+    popUpName: keyof UsePopUpState<["certificateTemplate"]>,
+    state?: boolean
+  ) => void;
+};
+
+export const CertificateTemplateModal = ({ popUp, handlePopUpToggle, caId }: Props) => {
+  const { currentWorkspace } = useWorkspace();
+
+  const { data: ca } = useGetCaById(caId);
+
+  const { data: certTemplate } = useGetCertTemplate(
+    (popUp?.certificateTemplate?.data as { id: string })?.id || ""
+  );
+
+  const { data: cas } = useListWorkspaceCas({
+    projectSlug: currentWorkspace?.slug ?? "",
+    status: CaStatus.ACTIVE
+  });
+
+  const { data: collectionsData } = useListWorkspacePkiCollections({
+    workspaceId: currentWorkspace?.id || ""
+  });
+
+  const { mutateAsync: createCertTemplate } = useCreateCertTemplate();
+  const { mutateAsync: updateCertTemplate } = useUpdateCertTemplate();
+
+  const {
+    control,
+    handleSubmit,
+    reset,
+    formState: { isSubmitting }
+  } = useForm<FormData>({
+    resolver: zodResolver(schema),
+    defaultValues: {
+      keyUsages: {
+        [CertKeyUsage.DIGITAL_SIGNATURE]: true,
+        [CertKeyUsage.KEY_ENCIPHERMENT]: true
+      }
+    }
+  });
+
+  useEffect(() => {
+    if (certTemplate) {
+      reset({
+        caId: certTemplate.caId,
+        name: certTemplate.name,
+        commonName: certTemplate.commonName,
+        subjectAlternativeName: certTemplate.subjectAlternativeName,
+        collectionId: certTemplate.pkiCollectionId ?? undefined,
+        ttl: certTemplate.ttl,
+        keyUsages: Object.fromEntries(certTemplate.keyUsages.map((name) => [name, true]) ?? []),
+        extendedKeyUsages: Object.fromEntries(
+          certTemplate.extendedKeyUsages.map((name) => [name, true]) ?? []
+        )
+      });
+    } else {
+      reset({
+        caId,
+        name: "",
+        commonName: "",
+        ttl: "",
+        keyUsages: {
+          [CertKeyUsage.DIGITAL_SIGNATURE]: true,
+          [CertKeyUsage.KEY_ENCIPHERMENT]: true
+        },
+        extendedKeyUsages: {}
+      });
+    }
+  }, [certTemplate, ca]);
+
+  const onFormSubmit = async ({
+    collectionId,
+    name,
+    commonName,
+    subjectAlternativeName,
+    ttl,
+    keyUsages,
+    extendedKeyUsages
+  }: FormData) => {
+    if (!currentWorkspace?.id) {
+      return;
+    }
+
+    try {
+      if (certTemplate) {
+        await updateCertTemplate({
+          id: certTemplate.id,
+          projectId: currentWorkspace.id,
+          pkiCollectionId: collectionId,
+          caId,
+          name,
+          commonName,
+          subjectAlternativeName,
+          ttl,
+          keyUsages: Object.entries(keyUsages)
+            .filter(([, value]) => value)
+            .map(([key]) => key as CertKeyUsage),
+          extendedKeyUsages: Object.entries(extendedKeyUsages)
+            .filter(([, value]) => value)
+            .map(([key]) => key as CertExtendedKeyUsage)
+        });
+
+        createNotification({
+          text: "Successfully updated certificate template",
+          type: "success"
+        });
+      } else {
+        await createCertTemplate({
+          projectId: currentWorkspace.id,
+          pkiCollectionId: collectionId,
+          caId,
+          name,
+          commonName,
+          subjectAlternativeName,
+          ttl,
+          keyUsages: Object.entries(keyUsages)
+            .filter(([, value]) => value)
+            .map(([key]) => key as CertKeyUsage),
+          extendedKeyUsages: Object.entries(extendedKeyUsages)
+            .filter(([, value]) => value)
+            .map(([key]) => key as CertExtendedKeyUsage)
+        });
+
+        createNotification({
+          text: "Successfully created certificate template",
+          type: "success"
+        });
+      }
+
+      reset();
+      handlePopUpToggle("certificateTemplate", false);
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: "Failed to save changes",
+        type: "error"
+      });
+    }
+  };
+
+  return (
+    <Modal
+      isOpen={popUp?.certificateTemplate?.isOpen}
+      onOpenChange={(isOpen) => {
+        handlePopUpToggle("certificateTemplate", isOpen);
+        reset();
+      }}
+    >
+      <ModalContent title={certTemplate ? "Certificate Template" : "Create Certificate Template"}>
+        <form onSubmit={handleSubmit(onFormSubmit)}>
+          {certTemplate && (
+            <FormControl label="Certificate Template ID">
+              <Input value={certTemplate.id} isDisabled className="bg-white/[0.07]" />
+            </FormControl>
+          )}
+          <Controller
+            control={control}
+            defaultValue=""
+            name="name"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Template Name"
+                isError={Boolean(error)}
+                errorText={error?.message}
+                isRequired
+              >
+                <Input {...field} placeholder="My Certificate Template" />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            name="caId"
+            defaultValue={caId}
+            render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+              <FormControl
+                label="Issuing CA"
+                errorText={error?.message}
+                isError={Boolean(error)}
+                className="mt-4"
+                isRequired
+              >
+                <Select
+                  defaultValue={field.value}
+                  {...field}
+                  onValueChange={(e) => onChange(e)}
+                  className="w-full"
+                  isDisabled
+                >
+                  {(cas || []).map(({ id, type, dn }) => (
+                    <SelectItem value={id} key={`ca-${id}`}>
+                      {`${caTypeToNameMap[type]}: ${dn}`}
+                    </SelectItem>
+                  ))}
+                </Select>
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            name="collectionId"
+            render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+              <FormControl
+                label="Certificate Collection (Optional)"
+                errorText={error?.message}
+                isError={Boolean(error)}
+                className="mt-4"
+              >
+                <Select
+                  defaultValue={field.value}
+                  {...field}
+                  onValueChange={(e) => onChange(e)}
+                  className="w-full"
+                >
+                  {(collectionsData?.collections || []).map(({ id, name }) => (
+                    <SelectItem value={id} key={`pki-collection-${id}`}>
+                      {name}
+                    </SelectItem>
+                  ))}
+                </Select>
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            defaultValue=""
+            name="commonName"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label={
+                  <div>
+                    <FormLabel
+                      isRequired
+                      label="Common Name (CN)"
+                      icon={
+                        <Tooltip
+                          className="text-center"
+                          content={
+                            <span>
+                              This field accepts limited regular expressions: spaces, *, ., @, -, \
+                              (for escaping), and alphanumeric characters only
+                            </span>
+                          }
+                        >
+                          <FontAwesomeIcon icon={faQuestionCircle} size="sm" />
+                        </Tooltip>
+                      }
+                    />
+                  </div>
+                }
+                isError={Boolean(error)}
+                errorText={error?.message}
+                isRequired
+              >
+                <Input {...field} placeholder=".*\.acme.com" />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            defaultValue=""
+            name="subjectAlternativeName"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label={
+                  <div>
+                    <FormLabel
+                      isRequired
+                      label="Alternative Names (SAN)"
+                      icon={
+                        <Tooltip
+                          className="text-center"
+                          content={
+                            <span>
+                              This field accepts limited regular expressions: spaces, *, ., @, -, \
+                              (for escaping), and alphanumeric characters only
+                            </span>
+                          }
+                        >
+                          <FontAwesomeIcon icon={faQuestionCircle} size="sm" />
+                        </Tooltip>
+                      }
+                    />
+                  </div>
+                }
+                isError={Boolean(error)}
+                errorText={error?.message}
+                isRequired
+              >
+                <Input {...field} placeholder="service\.acme.\..*" />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            name="ttl"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Max TTL"
+                isError={Boolean(error)}
+                errorText={error?.message}
+                isRequired
+              >
+                <Input {...field} placeholder="2 days, 1d, 2h, 1y, ..." />
+              </FormControl>
+            )}
+          />
+          <Accordion type="single" collapsible className="w-full">
+            <AccordionItem value="key-usages" className="data-[state=open]:border-none">
+              <AccordionTrigger className="h-fit flex-none pl-1 text-sm">
+                <div className="order-1 ml-3">Key Usage</div>
+              </AccordionTrigger>
+              <AccordionContent>
+                <Controller
+                  control={control}
+                  name="keyUsages"
+                  render={({ field: { onChange, value }, fieldState: { error } }) => {
+                    return (
+                      <FormControl
+                        label="Key Usage"
+                        errorText={error?.message}
+                        isError={Boolean(error)}
+                      >
+                        <div className="mb-7 mt-2 grid grid-cols-2 gap-2">
+                          {KEY_USAGES_OPTIONS.map(({ label, value: optionValue }) => {
+                            return (
+                              <Checkbox
+                                id={optionValue}
+                                key={optionValue}
+                                className="data-[state=checked]:bg-primary"
+                                isChecked={value[optionValue]}
+                                onCheckedChange={(state) => {
+                                  onChange({
+                                    ...value,
+                                    [optionValue]: state
+                                  });
+                                }}
+                              >
+                                {label}
+                              </Checkbox>
+                            );
+                          })}
+                        </div>
+                      </FormControl>
+                    );
+                  }}
+                />
+                <Controller
+                  control={control}
+                  name="extendedKeyUsages"
+                  render={({ field: { onChange, value }, fieldState: { error } }) => {
+                    return (
+                      <FormControl
+                        label="Extended Key Usage"
+                        errorText={error?.message}
+                        isError={Boolean(error)}
+                      >
+                        <div className="mb-7 mt-2 grid grid-cols-2 gap-2">
+                          {EXTENDED_KEY_USAGES_OPTIONS.map(({ label, value: optionValue }) => {
+                            return (
+                              <Checkbox
+                                id={optionValue}
+                                key={optionValue}
+                                className="data-[state=checked]:bg-primary"
+                                isChecked={value[optionValue]}
+                                onCheckedChange={(state) => {
+                                  onChange({
+                                    ...value,
+                                    [optionValue]: state
+                                  });
+                                }}
+                              >
+                                {label}
+                              </Checkbox>
+                            );
+                          })}
+                        </div>
+                      </FormControl>
+                    );
+                  }}
+                />
+              </AccordionContent>
+            </AccordionItem>
+          </Accordion>
+          <div className="mt-4 flex items-center">
+            <Button
+              className="mr-4"
+              size="sm"
+              type="submit"
+              isLoading={isSubmitting}
+              isDisabled={isSubmitting}
+            >
+              Save
+            </Button>
+            <Button
+              colorSchema="secondary"
+              variant="plain"
+              onClick={() => handlePopUpToggle("certificateTemplate", false)}
+            >
+              Cancel
+            </Button>
+          </div>
+        </form>
+      </ModalContent>
+    </Modal>
+  );
+};

frontend/src/pages/cert-manager/CertificatesPage/components/CertificatesTab/components/CertificateTemplatesSection.tsx

@@ -0,0 +1,107 @@
+/**
+ * TODO (dangtony98): Reevaluate if this component should be in main
+ * CertificateTab or under CA page in the future.
+ */
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal";
+import { createNotification } from "@app/components/notifications";
+import { ProjectPermissionCan } from "@app/components/permissions";
+import { DeleteActionModal, IconButton } from "@app/components/v2";
+import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
+import { usePopUp } from "@app/hooks";
+import { useDeleteCertTemplate } from "@app/hooks/api";
+
+import { CertificateTemplateEnrollmentModal } from "./CertificateTemplateEnrollmentModal";
+import { CertificateTemplateModal } from "./CertificateTemplateModal";
+import { CertificateTemplatesTable } from "./CertificateTemplatesTable";
+
+type Props = {
+  caId: string;
+};
+
+export const CertificateTemplatesSection = ({ caId }: Props) => {
+  const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
+    "certificateTemplate",
+    "deleteCertificateTemplate",
+    "enrollmentOptions",
+    "upgradePlan"
+  ] as const);
+
+  const { currentWorkspace } = useWorkspace();
+  const { mutateAsync: deleteCertTemplate } = useDeleteCertTemplate();
+
+  const onRemoveCertificateTemplateSubmit = async (id: string) => {
+    if (!currentWorkspace?.id) {
+      return;
+    }
+
+    try {
+      await deleteCertTemplate({
+        id,
+        projectId: currentWorkspace.id
+      });
+
+      createNotification({
+        text: "Successfully deleted certificate template",
+        type: "success"
+      });
+
+      handlePopUpClose("deleteCertificateTemplate");
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: "Failed to delete certificate template",
+        type: "error"
+      });
+    }
+  };
+
+  return (
+    <div className="mt-4 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <div className="flex items-center justify-between border-b border-mineshaft-400 pb-4">
+        <h3 className="text-lg font-semibold text-mineshaft-100">Certificate Templates</h3>
+        <ProjectPermissionCan
+          I={ProjectPermissionActions.Create}
+          a={ProjectPermissionSub.CertificateTemplates}
+        >
+          {(isAllowed) => (
+            <IconButton
+              ariaLabel="copy icon"
+              variant="plain"
+              className="group relative"
+              onClick={() => handlePopUpOpen("certificateTemplate")}
+              isDisabled={!isAllowed}
+            >
+              <FontAwesomeIcon icon={faPlus} />
+            </IconButton>
+          )}
+        </ProjectPermissionCan>
+      </div>
+      <div className="py-4">
+        <CertificateTemplatesTable handlePopUpOpen={handlePopUpOpen} caId={caId} />
+      </div>
+      <CertificateTemplateModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} caId={caId} />
+      <CertificateTemplateEnrollmentModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
+      <DeleteActionModal
+        isOpen={popUp.deleteCertificateTemplate.isOpen}
+        title={`Are you sure want to delete the certificate template ${
+          (popUp?.deleteCertificateTemplate?.data as { name: string })?.name || ""
+        } from the project?`}
+        onChange={(isOpen) => handlePopUpToggle("deleteCertificateTemplate", isOpen)}
+        deleteKey="confirm"
+        onDeleteApproved={() =>
+          onRemoveCertificateTemplateSubmit(
+            (popUp?.deleteCertificateTemplate?.data as { id: string })?.id
+          )
+        }
+      />
+      <UpgradePlanModal
+        isOpen={popUp.upgradePlan.isOpen}
+        onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
+        text="Managing template enrollment options for EST is only available on Infisical's Enterprise plan."
+      />
+    </div>
+  );
+};

frontend/src/pages/cert-manager/CertificatesPage/components/CertificatesTab/components/CertificateTemplatesTable.tsx

@@ -0,0 +1,146 @@
+import { faEllipsis, faFileAlt, faTrash, faUserPlus } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { twMerge } from "tailwind-merge";
+
+import { ProjectPermissionCan } from "@app/components/permissions";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  EmptyState,
+  Table,
+  TableContainer,
+  TableSkeleton,
+  TBody,
+  Td,
+  Th,
+  THead,
+  Tooltip,
+  Tr
+} from "@app/components/v2";
+import { ProjectPermissionActions, ProjectPermissionSub, useSubscription } from "@app/context";
+import { useGetCaCertTemplates } from "@app/hooks/api";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+type Props = {
+  caId: string;
+  handlePopUpOpen: (
+    popUpName: keyof UsePopUpState<
+      ["certificateTemplate", "deleteCertificateTemplate", "enrollmentOptions", "upgradePlan"]
+    >,
+    data?: {
+      id?: string;
+      name?: string;
+    }
+  ) => void;
+};
+
+export const CertificateTemplatesTable = ({ handlePopUpOpen, caId }: Props) => {
+  const { subscription } = useSubscription();
+
+  const { data, isPending } = useGetCaCertTemplates(caId);
+
+  return (
+    <div>
+      <TableContainer>
+        <Table>
+          <THead>
+            <Tr>
+              <Th>Name</Th>
+              <Th />
+            </Tr>
+          </THead>
+          <TBody>
+            {isPending && <TableSkeleton columns={2} innerKey="project-cas" />}
+            {!isPending &&
+              data?.certificateTemplates.map((certificateTemplate) => {
+                return (
+                  <Tr className="h-10" key={`certificate-${certificateTemplate.id}`}>
+                    <Td>{certificateTemplate.name}</Td>
+                    <Td className="flex justify-end">
+                      <DropdownMenu>
+                        <DropdownMenuTrigger asChild className="rounded-lg">
+                          <div className="hover:text-primary-400 data-[state=open]:text-primary-400">
+                            <Tooltip content="More options">
+                              <FontAwesomeIcon size="sm" icon={faEllipsis} />
+                            </Tooltip>
+                          </div>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent align="start" className="p-1">
+                          <DropdownMenuItem
+                            onClick={() =>
+                              handlePopUpOpen("certificateTemplate", {
+                                id: certificateTemplate.id
+                              })
+                            }
+                            icon={<FontAwesomeIcon icon={faFileAlt} size="sm" className="mr-1" />}
+                          >
+                            Manage Policies
+                          </DropdownMenuItem>
+                          <ProjectPermissionCan
+                            I={ProjectPermissionActions.Edit}
+                            a={ProjectPermissionSub.CertificateTemplates}
+                          >
+                            {(isAllowed) => (
+                              <DropdownMenuItem
+                                onClick={() => {
+                                  if (!subscription?.pkiEst) {
+                                    handlePopUpOpen("upgradePlan");
+                                    return;
+                                  }
+
+                                  handlePopUpOpen("enrollmentOptions", {
+                                    id: certificateTemplate.id
+                                  });
+                                }}
+                                className={twMerge(
+                                  !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
+                                )}
+                                disabled={!isAllowed}
+                                icon={<FontAwesomeIcon icon={faUserPlus} size="sm" />}
+                              >
+                                Manage Enrollment
+                              </DropdownMenuItem>
+                            )}
+                          </ProjectPermissionCan>
+                          <ProjectPermissionCan
+                            I={ProjectPermissionActions.Delete}
+                            a={ProjectPermissionSub.CertificateTemplates}
+                          >
+                            {(isAllowed) => (
+                              <DropdownMenuItem
+                                className={twMerge(
+                                  !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
+                                )}
+                                disabled={!isAllowed}
+                                icon={<FontAwesomeIcon icon={faTrash} size="sm" className="mr-1" />}
+                                onClick={() =>
+                                  handlePopUpOpen("deleteCertificateTemplate", {
+                                    id: certificateTemplate.id,
+                                    name: certificateTemplate.name
+                                  })
+                                }
+                              >
+                                Delete Template
+                              </DropdownMenuItem>
+                            )}
+                          </ProjectPermissionCan>
+                        </DropdownMenuContent>
+                      </DropdownMenu>
+                    </Td>
+                  </Tr>
+                );
+              })}
+          </TBody>
+        </Table>
+        {!isPending && !data?.certificateTemplates?.length && (
+          <EmptyState
+            title="No certificate templates have been created for this CA"
+            icon={faFileAlt}
+          />
+        )}
+      </TableContainer>
+    </div>
+  );
+};

frontend/src/pages/cert-manager/CertificatesPage/components/CertificatesTab/components/CertificatesSection.tsx

@@ -0,0 +1,88 @@
+import { faPlus } 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 { Button, DeleteActionModal } from "@app/components/v2";
+import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
+import { useDeleteCert } from "@app/hooks/api";
+import { usePopUp } from "@app/hooks/usePopUp";
+
+import { CertificateCertModal } from "./CertificateCertModal";
+import { CertificateModal } from "./CertificateModal";
+import { CertificateRevocationModal } from "./CertificateRevocationModal";
+import { CertificatesTable } from "./CertificatesTable";
+
+export const CertificatesSection = () => {
+  const { currentWorkspace } = useWorkspace();
+  const { mutateAsync: deleteCert } = useDeleteCert();
+
+  const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
+    "certificate",
+    "certificateCert",
+    "deleteCertificate",
+    "revokeCertificate"
+  ] as const);
+
+  const onRemoveCertificateSubmit = async (serialNumber: string) => {
+    try {
+      if (!currentWorkspace?.slug) return;
+
+      await deleteCert({ serialNumber, projectSlug: currentWorkspace.slug });
+
+      createNotification({
+        text: "Successfully deleted certificate",
+        type: "success"
+      });
+
+      handlePopUpClose("deleteCertificate");
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: "Failed to delete certificate",
+        type: "error"
+      });
+    }
+  };
+
+  return (
+    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <div className="mb-4 flex justify-between">
+        <p className="text-xl font-semibold text-mineshaft-100">Certificates</p>
+        <ProjectPermissionCan
+          I={ProjectPermissionActions.Create}
+          a={ProjectPermissionSub.Certificates}
+        >
+          {(isAllowed) => (
+            <Button
+              colorSchema="primary"
+              type="submit"
+              leftIcon={<FontAwesomeIcon icon={faPlus} />}
+              onClick={() => handlePopUpOpen("certificate")}
+              isDisabled={!isAllowed}
+            >
+              Issue
+            </Button>
+          )}
+        </ProjectPermissionCan>
+      </div>
+      <CertificatesTable handlePopUpOpen={handlePopUpOpen} />
+      <CertificateModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
+      <CertificateCertModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
+      <CertificateRevocationModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
+      <DeleteActionModal
+        isOpen={popUp.deleteCertificate.isOpen}
+        title={`Are you sure want to remove the certificate ${
+          (popUp?.deleteCertificate?.data as { commonName: string })?.commonName || ""
+        } from the project?`}
+        onChange={(isOpen) => handlePopUpToggle("deleteCertificate", isOpen)}
+        deleteKey="confirm"
+        onDeleteApproved={() =>
+          onRemoveCertificateSubmit(
+            (popUp?.deleteCertificate?.data as { serialNumber: string })?.serialNumber
+          )
+        }
+      />
+    </div>
+  );
+};

frontend/src/pages/cert-manager/CertificatesPage/components/CertificatesTab/components/CertificatesTable.tsx

@@ -0,0 +1,219 @@
+import { useState } from "react";
+import {
+  faBan,
+  faCertificate,
+  faEllipsis,
+  faEye,
+  faFileExport,
+  faTrash
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { format } from "date-fns";
+import { twMerge } from "tailwind-merge";
+
+import { ProjectPermissionCan } from "@app/components/permissions";
+import {
+  Badge,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  EmptyState,
+  Pagination,
+  Table,
+  TableContainer,
+  TableSkeleton,
+  TBody,
+  Td,
+  Th,
+  THead,
+  Tooltip,
+  Tr
+} from "@app/components/v2";
+import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
+import { useListWorkspaceCertificates } from "@app/hooks/api";
+import { CertStatus } from "@app/hooks/api/certificates/enums";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+import { getCertValidUntilBadgeDetails } from "./CertificatesTable.utils";
+
+type Props = {
+  handlePopUpOpen: (
+    popUpName: keyof UsePopUpState<
+      ["certificate", "deleteCertificate", "revokeCertificate", "certificateCert"]
+    >,
+    data?: {
+      serialNumber?: string;
+      commonName?: string;
+    }
+  ) => void;
+};
+
+const PER_PAGE_INIT = 25;
+
+export const CertificatesTable = ({ handlePopUpOpen }: Props) => {
+  const [page, setPage] = useState(1);
+  const [perPage, setPerPage] = useState(PER_PAGE_INIT);
+
+  const { currentWorkspace } = useWorkspace();
+  const { data, isPending } = useListWorkspaceCertificates({
+    projectSlug: currentWorkspace?.slug ?? "",
+    offset: (page - 1) * perPage,
+    limit: perPage
+  });
+
+  return (
+    <TableContainer>
+      <Table>
+        <THead>
+          <Tr>
+            <Th>Friendly Name</Th>
+            <Th>Status</Th>
+            <Th>Not Before</Th>
+            <Th>Not After</Th>
+            <Th />
+          </Tr>
+        </THead>
+        <TBody>
+          {isPending && <TableSkeleton columns={3} innerKey="project-cas" />}
+          {!isPending &&
+            data?.certificates.map((certificate) => {
+              const { variant, label } = getCertValidUntilBadgeDetails(certificate.notAfter);
+              return (
+                <Tr className="h-10" key={`certificate-${certificate.id}`}>
+                  <Td>{certificate.friendlyName}</Td>
+                  <Td>
+                    {certificate.status === CertStatus.REVOKED ? (
+                      <Badge variant="danger">Revoked</Badge>
+                    ) : (
+                      <Badge variant={variant}>{label}</Badge>
+                    )}
+                  </Td>
+                  <Td>
+                    {certificate.notBefore
+                      ? format(new Date(certificate.notBefore), "yyyy-MM-dd")
+                      : "-"}
+                  </Td>
+                  <Td>
+                    {certificate.notAfter
+                      ? format(new Date(certificate.notAfter), "yyyy-MM-dd")
+                      : "-"}
+                  </Td>
+                  <Td className="flex justify-end">
+                    <DropdownMenu>
+                      <DropdownMenuTrigger asChild className="rounded-lg">
+                        <div className="hover:text-primary-400 data-[state=open]:text-primary-400">
+                          <Tooltip content="More options">
+                            <FontAwesomeIcon size="lg" icon={faEllipsis} />
+                          </Tooltip>
+                        </div>
+                      </DropdownMenuTrigger>
+                      <DropdownMenuContent align="start" className="p-1">
+                        <ProjectPermissionCan
+                          I={ProjectPermissionActions.Read}
+                          a={ProjectPermissionSub.Certificates}
+                        >
+                          {(isAllowed) => (
+                            <DropdownMenuItem
+                              className={twMerge(
+                                !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
+                              )}
+                              onClick={async () =>
+                                handlePopUpOpen("certificateCert", {
+                                  serialNumber: certificate.serialNumber
+                                })
+                              }
+                              disabled={!isAllowed}
+                              icon={<FontAwesomeIcon icon={faFileExport} />}
+                            >
+                              Export Certificate
+                            </DropdownMenuItem>
+                          )}
+                        </ProjectPermissionCan>
+                        <ProjectPermissionCan
+                          I={ProjectPermissionActions.Read}
+                          a={ProjectPermissionSub.Certificates}
+                        >
+                          {(isAllowed) => (
+                            <DropdownMenuItem
+                              className={twMerge(
+                                !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
+                              )}
+                              onClick={async () =>
+                                handlePopUpOpen("certificate", {
+                                  serialNumber: certificate.serialNumber
+                                })
+                              }
+                              disabled={!isAllowed}
+                              icon={<FontAwesomeIcon icon={faEye} />}
+                            >
+                              View Details
+                            </DropdownMenuItem>
+                          )}
+                        </ProjectPermissionCan>
+                        <ProjectPermissionCan
+                          I={ProjectPermissionActions.Delete}
+                          a={ProjectPermissionSub.Certificates}
+                        >
+                          {(isAllowed) => (
+                            <DropdownMenuItem
+                              className={twMerge(
+                                !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
+                              )}
+                              onClick={async () =>
+                                handlePopUpOpen("revokeCertificate", {
+                                  serialNumber: certificate.serialNumber
+                                })
+                              }
+                              disabled={!isAllowed}
+                              icon={<FontAwesomeIcon icon={faBan} />}
+                            >
+                              Revoke Certificate
+                            </DropdownMenuItem>
+                          )}
+                        </ProjectPermissionCan>
+                        <ProjectPermissionCan
+                          I={ProjectPermissionActions.Delete}
+                          a={ProjectPermissionSub.Certificates}
+                        >
+                          {(isAllowed) => (
+                            <DropdownMenuItem
+                              className={twMerge(
+                                !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
+                              )}
+                              onClick={async () =>
+                                handlePopUpOpen("deleteCertificate", {
+                                  serialNumber: certificate.serialNumber,
+                                  commonName: certificate.commonName
+                                })
+                              }
+                              disabled={!isAllowed}
+                              icon={<FontAwesomeIcon icon={faTrash} />}
+                            >
+                              Delete Certificate
+                            </DropdownMenuItem>
+                          )}
+                        </ProjectPermissionCan>
+                      </DropdownMenuContent>
+                    </DropdownMenu>
+                  </Td>
+                </Tr>
+              );
+            })}
+        </TBody>
+      </Table>
+      {!isPending && data?.totalCount !== undefined && data.totalCount >= PER_PAGE_INIT && (
+        <Pagination
+          count={data.totalCount}
+          page={page}
+          perPage={perPage}
+          onChangePage={(newPage) => setPage(newPage)}
+          onChangePerPage={(newPerPage) => setPerPage(newPerPage)}
+        />
+      )}
+      {!isPending && !data?.certificates?.length && (
+        <EmptyState title="No certificates have been issued" icon={faCertificate} />
+      )}
+    </TableContainer>
+  );
+};

frontend/src/pages/cert-manager/CertificatesPage/components/CertificatesTab/components/CertificatesTable.utils.ts

@@ -0,0 +1,28 @@
+import ms from "ms";
+
+export const getCertValidUntilBadgeDetails = (notAfter: string) => {
+  const currentDate = new Date().getTime();
+  const notAfterDate = new Date(notAfter).getTime();
+  const diffInMs = notAfterDate - currentDate;
+
+  let variant: "success" | "primary" | "danger" = "success";
+  let label = "Healthy";
+
+  if (diffInMs > ms("60d")) {
+    variant = "success";
+  } else if (diffInMs > ms("30d")) {
+    variant = "primary";
+  } else {
+    variant = "danger";
+  }
+
+  if (diffInMs > ms("60d")) {
+    label = "Healthy";
+  } else if (diffInMs > ms("0d")) {
+    label = `Expires in ${ms(diffInMs)}`;
+  } else {
+    label = "Expired";
+  }
+
+  return { variant, label };
+};

frontend/src/pages/cert-manager/CertificatesPage/components/CertificatesTab/components/index.tsx

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

frontend/src/pages/cert-manager/CertificatesPage/components/CertificatesTab/index.tsx

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

frontend/src/pages/cert-manager/CertificatesPage/components/PkiAlertsTab/PkiAlertsTab.tsx

@@ -0,0 +1,17 @@
+import { motion } from "framer-motion";
+
+import { PkiAlertsSection } from "./components";
+
+export const PkiAlertsTab = () => {
+  return (
+    <motion.div
+      key="panel-alerts"
+      transition={{ duration: 0.15 }}
+      initial={{ opacity: 0, translateX: 30 }}
+      animate={{ opacity: 1, translateX: 0 }}
+      exit={{ opacity: 0, translateX: 30 }}
+    >
+      <PkiAlertsSection />
+    </motion.div>
+  );
+};

frontend/src/pages/cert-manager/CertificatesPage/components/PkiAlertsTab/components/PkiAlertModal.tsx

@@ -0,0 +1,295 @@
+import { useEffect } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+import { createNotification } from "@app/components/notifications";
+import {
+  Button,
+  FormControl,
+  Input,
+  Modal,
+  ModalContent,
+  Select,
+  SelectItem
+} from "@app/components/v2";
+import { useWorkspace } from "@app/context";
+import {
+  useCreatePkiAlert,
+  useGetPkiAlertById,
+  useListWorkspacePkiCollections,
+  useUpdatePkiAlert
+} from "@app/hooks/api";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+enum TimeUnit {
+  DAY = "days",
+  WEEK = "weeks",
+  MONTH = "months",
+  YEAR = "years"
+}
+
+const schema = z.object({
+  name: z.string().trim().min(1),
+  pkiCollectionId: z.string(),
+  alertBefore: z.string(),
+  alertUnit: z.nativeEnum(TimeUnit),
+  emails: z.string().trim()
+});
+
+const convertToDays = (unit: TimeUnit, value: number) => {
+  switch (unit) {
+    case TimeUnit.DAY:
+      return value;
+    case TimeUnit.WEEK:
+      return value * 7;
+    case TimeUnit.MONTH:
+      return value * 30;
+    case TimeUnit.YEAR:
+      return value * 365;
+    default:
+      throw new Error(`Unknown time unit: ${unit}`);
+  }
+};
+
+export type FormData = z.infer<typeof schema>;
+
+type Props = {
+  popUp: UsePopUpState<["pkiAlert"]>;
+  handlePopUpToggle: (popUpName: keyof UsePopUpState<["pkiAlert"]>, state?: boolean) => void;
+};
+
+export const PkiAlertModal = ({ popUp, handlePopUpToggle }: Props) => {
+  const { currentWorkspace } = useWorkspace();
+  const projectId = currentWorkspace?.id || "";
+
+  const { data: alert } = useGetPkiAlertById(
+    (popUp?.pkiAlert?.data as { alertId: string })?.alertId || ""
+  );
+
+  const { data: pkiCollections } = useListWorkspacePkiCollections({
+    workspaceId: projectId
+  });
+
+  const { mutateAsync: createPkiAlert } = useCreatePkiAlert();
+  const { mutateAsync: updatePkiAlert } = useUpdatePkiAlert();
+
+  const {
+    control,
+    handleSubmit,
+    reset,
+    formState: { isSubmitting }
+  } = useForm<FormData>({
+    resolver: zodResolver(schema),
+    defaultValues: {
+      alertUnit: TimeUnit.DAY
+    }
+  });
+
+  useEffect(() => {
+    if (alert) {
+      reset({
+        name: alert.name,
+        pkiCollectionId: alert.pkiCollectionId,
+        alertBefore: alert.alertBeforeDays.toString(),
+        alertUnit: TimeUnit.DAY,
+        emails: alert.recipientEmails
+      });
+    } else {
+      // TODO: add default collection?
+      reset({
+        name: "",
+        ...(pkiCollections?.collections?.[0] && {
+          pkiCollectionId: pkiCollections.collections[0].id
+        })
+      });
+    }
+  }, [alert, pkiCollections]);
+
+  const onFormSubmit = async ({
+    name,
+    pkiCollectionId,
+    alertBefore,
+    alertUnit,
+    emails
+  }: FormData) => {
+    try {
+      if (!projectId) return;
+
+      const emailArray = emails
+        .split(",")
+        .map((email) => email.trim())
+        .filter((email) => email.length > 0);
+
+      const alertBeforeDays = convertToDays(alertUnit, Number(alertBefore));
+
+      if (alert) {
+        // update
+        await updatePkiAlert({
+          alertId: alert.id,
+          pkiCollectionId,
+          name,
+          projectId,
+          alertBeforeDays,
+          emails: emailArray
+        });
+      } else {
+        // create
+        await createPkiAlert({
+          name,
+          projectId,
+          pkiCollectionId,
+          alertBeforeDays,
+          emails: emailArray
+        });
+      }
+
+      handlePopUpToggle("pkiAlert", false);
+
+      reset();
+
+      createNotification({
+        text: `Successfully ${alert ? "updated" : "created"} alert`,
+        type: "success"
+      });
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: `Failed to ${alert ? "updated" : "created"} alert`,
+        type: "error"
+      });
+    }
+  };
+
+  return (
+    <Modal
+      isOpen={popUp?.pkiAlert?.isOpen}
+      onOpenChange={(isOpen) => {
+        handlePopUpToggle("pkiAlert", isOpen);
+        reset();
+      }}
+    >
+      <ModalContent title={`${alert ? "Edit" : "Create"} Alert`}>
+        <form onSubmit={handleSubmit(onFormSubmit)}>
+          <Controller
+            control={control}
+            defaultValue=""
+            name="name"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Name"
+                isError={Boolean(error)}
+                errorText={error?.message}
+                isRequired
+              >
+                <Input {...field} placeholder="My Alert" />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            name="pkiCollectionId"
+            defaultValue=""
+            render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+              <FormControl
+                label="Certificate Collection"
+                errorText={error?.message}
+                isError={Boolean(error)}
+                isRequired
+              >
+                <Select
+                  defaultValue={field.value}
+                  {...field}
+                  onValueChange={(e) => onChange(e)}
+                  className="w-full"
+                >
+                  {(pkiCollections?.collections || []).map(({ id, name }) => (
+                    <SelectItem value={id} key={`project-${id}`}>
+                      {name}
+                    </SelectItem>
+                  ))}
+                </Select>
+              </FormControl>
+            )}
+          />
+          <div className="flex items-center">
+            <Controller
+              control={control}
+              defaultValue=""
+              name="alertBefore"
+              render={({ field, fieldState: { error } }) => (
+                <FormControl
+                  label="Alert Before"
+                  isError={Boolean(error)}
+                  errorText={error?.message}
+                  className="w-full"
+                  isRequired
+                >
+                  <Input {...field} placeholder="5" type="number" min={1} />
+                </FormControl>
+              )}
+            />
+            <Controller
+              control={control}
+              name="alertUnit"
+              defaultValue={TimeUnit.YEAR}
+              render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+                <FormControl
+                  className="ml-4"
+                  label="Alert Unit"
+                  errorText={error?.message}
+                  isError={Boolean(error)}
+                >
+                  <Select
+                    defaultValue={field.value}
+                    {...field}
+                    onValueChange={(e) => onChange(e)}
+                    className="w-48"
+                  >
+                    <SelectItem value={TimeUnit.DAY}>Days</SelectItem>
+                    <SelectItem value={TimeUnit.WEEK}>Weeks</SelectItem>
+                    <SelectItem value={TimeUnit.MONTH}>Months</SelectItem>
+                    <SelectItem value={TimeUnit.YEAR}>Years</SelectItem>
+                  </Select>
+                </FormControl>
+              )}
+            />
+          </div>
+          <Controller
+            control={control}
+            defaultValue=""
+            name="emails"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Emails to Alert"
+                isError={Boolean(error)}
+                errorText={error?.message}
+                isRequired
+              >
+                <Input {...field} placeholder="[email protected], [email protected], ..." />
+              </FormControl>
+            )}
+          />
+          <div className="flex items-center">
+            <Button
+              className="mr-4"
+              size="sm"
+              type="submit"
+              isLoading={isSubmitting}
+              isDisabled={isSubmitting}
+            >
+              {alert ? "Update" : "Create"}
+            </Button>
+            <Button
+              colorSchema="secondary"
+              variant="plain"
+              onClick={() => handlePopUpToggle("pkiAlert", false)}
+            >
+              Cancel
+            </Button>
+          </div>
+        </form>
+      </ModalContent>
+    </Modal>
+  );
+};

frontend/src/pages/cert-manager/CertificatesPage/components/PkiAlertsTab/components/PkiAlertRow.tsx

@@ -0,0 +1,92 @@
+import { faEllipsis } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { twMerge } from "tailwind-merge";
+
+import { ProjectPermissionCan } from "@app/components/permissions";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  Td,
+  Tr
+} from "@app/components/v2";
+import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
+import { useGetPkiCollectionById } from "@app/hooks/api";
+import { TPkiAlert } from "@app/hooks/api/pkiAlerts/types";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+type Props = {
+  alert: TPkiAlert;
+  handlePopUpOpen: (
+    popUpName: keyof UsePopUpState<["pkiAlert", "deletePkiAlert"]>,
+    data?: object
+  ) => void;
+};
+
+export const PkiAlertRow = ({ alert, handlePopUpOpen }: Props) => {
+  const { data: pkiCollection } = useGetPkiCollectionById(alert.pkiCollectionId || "");
+  return (
+    <Tr className="h-10" key={`pki-alert-${alert.id}`}>
+      <Td>{alert.name}</Td>
+      <Td>{alert.alertBeforeDays}</Td>
+      <Td>{pkiCollection ? pkiCollection.name : "-"}</Td>
+      <Td>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild className="rounded-lg">
+            <div className="hover:text-primary-400 data-[state=open]:text-primary-400">
+              <FontAwesomeIcon size="sm" icon={faEllipsis} />
+            </div>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="start" className="p-1">
+            <ProjectPermissionCan
+              I={ProjectPermissionActions.Edit}
+              a={ProjectPermissionSub.PkiAlerts}
+            >
+              {(isAllowed) => (
+                <DropdownMenuItem
+                  className={twMerge(
+                    !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
+                  )}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    handlePopUpOpen("pkiAlert", {
+                      alertId: alert.id
+                    });
+                  }}
+                  disabled={!isAllowed}
+                >
+                  Edit Alert
+                </DropdownMenuItem>
+              )}
+            </ProjectPermissionCan>
+            <ProjectPermissionCan
+              I={ProjectPermissionActions.Delete}
+              a={ProjectPermissionSub.PkiAlerts}
+            >
+              {(isAllowed) => (
+                <DropdownMenuItem
+                  className={twMerge(
+                    isAllowed
+                      ? "hover:!bg-red-500 hover:!text-white"
+                      : "pointer-events-none cursor-not-allowed opacity-50"
+                  )}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    handlePopUpOpen("deletePkiAlert", {
+                      alertId: alert.id,
+                      name: alert.name
+                    });
+                  }}
+                  disabled={!isAllowed}
+                >
+                  Delete Alert
+                </DropdownMenuItem>
+              )}
+            </ProjectPermissionCan>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </Td>
+    </Tr>
+  );
+};

frontend/src/pages/cert-manager/CertificatesPage/components/PkiAlertsTab/components/PkiAlertsSection.tsx

@@ -0,0 +1,84 @@
+import { faPlus } 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 { Button, DeleteActionModal } from "@app/components/v2";
+import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
+import { useDeletePkiAlert } from "@app/hooks/api";
+import { usePopUp } from "@app/hooks/usePopUp";
+
+import { PkiAlertModal } from "./PkiAlertModal";
+import { PkiAlertsTable } from "./PkiAlertsTable";
+
+export const PkiAlertsSection = () => {
+  const { currentWorkspace } = useWorkspace();
+  const projectId = currentWorkspace?.id || "";
+  const { mutateAsync: deletePkiAlert } = useDeletePkiAlert();
+
+  const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
+    "pkiAlert",
+    "deletePkiAlert"
+  ] as const);
+
+  const onRemoveAlertSubmit = async (alertId: string) => {
+    try {
+      if (!projectId) return;
+
+      await deletePkiAlert({
+        alertId,
+        projectId
+      });
+
+      createNotification({
+        text: "Successfully deleted alert",
+        type: "success"
+      });
+
+      handlePopUpClose("deletePkiAlert");
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: "Failed to delete alert",
+        type: "error"
+      });
+    }
+  };
+
+  return (
+    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <div className="mb-4 flex justify-between">
+        <p className="text-xl font-semibold text-mineshaft-100">Alerts</p>
+        <ProjectPermissionCan
+          I={ProjectPermissionActions.Create}
+          a={ProjectPermissionSub.PkiAlerts}
+        >
+          {(isAllowed) => (
+            <Button
+              colorSchema="primary"
+              type="submit"
+              leftIcon={<FontAwesomeIcon icon={faPlus} />}
+              onClick={() => handlePopUpOpen("pkiAlert")}
+              isDisabled={!isAllowed}
+            >
+              Create
+            </Button>
+          )}
+        </ProjectPermissionCan>
+      </div>
+      <PkiAlertsTable handlePopUpOpen={handlePopUpOpen} />
+      <PkiAlertModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
+      <DeleteActionModal
+        isOpen={popUp.deletePkiAlert.isOpen}
+        title={`Are you sure want to remove the alert ${
+          (popUp?.deletePkiAlert?.data as { name: string })?.name || ""
+        } from the project?`}
+        onChange={(isOpen) => handlePopUpToggle("deletePkiAlert", isOpen)}
+        deleteKey="confirm"
+        onDeleteApproved={() =>
+          onRemoveAlertSubmit((popUp?.deletePkiAlert?.data as { alertId: string })?.alertId)
+        }
+      />
+    </div>
+  );
+};

frontend/src/pages/cert-manager/CertificatesPage/components/PkiAlertsTab/components/PkiAlertsTable.tsx

@@ -0,0 +1,67 @@
+import { faExclamationCircle } from "@fortawesome/free-solid-svg-icons";
+
+import {
+  EmptyState,
+  Table,
+  TableContainer,
+  TableSkeleton,
+  TBody,
+  Th,
+  THead,
+  Tr
+} from "@app/components/v2";
+import { useWorkspace } from "@app/context";
+import { useListWorkspacePkiAlerts } from "@app/hooks/api";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+import { PkiAlertRow } from "./PkiAlertRow";
+
+type Props = {
+  handlePopUpOpen: (
+    popUpName: keyof UsePopUpState<["pkiAlert", "deletePkiAlert"]>,
+    data?: object
+  ) => void;
+};
+
+export const PkiAlertsTable = ({ handlePopUpOpen }: Props) => {
+  const { currentWorkspace } = useWorkspace();
+  const projectId = currentWorkspace?.id || "";
+
+  const { data, isPending } = useListWorkspacePkiAlerts({
+    workspaceId: projectId
+  });
+
+  return (
+    <TableContainer>
+      <Table>
+        <THead>
+          <Tr>
+            <Th>Alert Name</Th>
+            <Th>Alert Before Days</Th>
+            <Th>Certificate Collection</Th>
+            <Th className="w-5" />
+          </Tr>
+        </THead>
+        <TBody>
+          {isPending && <TableSkeleton columns={4} innerKey="project-pki-alerts" />}
+          {!isPending &&
+            data?.alerts.map((alert) => {
+              return (
+                <PkiAlertRow
+                  key={`alert-${alert.id}`}
+                  alert={alert}
+                  handlePopUpOpen={handlePopUpOpen}
+                />
+              );
+            })}
+        </TBody>
+      </Table>
+      {!isPending && !data?.alerts?.length && (
+        <EmptyState
+          title="No alerts have been created for any certificate collections"
+          icon={faExclamationCircle}
+        />
+      )}
+    </TableContainer>
+  );
+};

frontend/src/pages/cert-manager/CertificatesPage/components/PkiAlertsTab/components/PkiCollectionModal.tsx

@@ -0,0 +1,171 @@
+import { useEffect } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useNavigate } from "@tanstack/react-router";
+import { z } from "zod";
+
+import { createNotification } from "@app/components/notifications";
+import { Button, FormControl, Input, Modal, ModalContent } from "@app/components/v2";
+import { useWorkspace } from "@app/context";
+import {
+  useCreatePkiCollection,
+  useGetPkiCollectionById,
+  useUpdatePkiCollection
+} from "@app/hooks/api";
+import { ProjectType } from "@app/hooks/api/workspace/types";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+const schema = z.object({
+  name: z.string().trim().min(1),
+  description: z.string()
+});
+
+export type FormData = z.infer<typeof schema>;
+
+type Props = {
+  popUp: UsePopUpState<["pkiCollection"]>;
+  handlePopUpToggle: (popUpName: keyof UsePopUpState<["pkiCollection"]>, state?: boolean) => void;
+};
+
+export const PkiCollectionModal = ({ popUp, handlePopUpToggle }: Props) => {
+  const navigate = useNavigate();
+  const { currentWorkspace } = useWorkspace();
+  const projectId = currentWorkspace?.id || "";
+
+  const { data: pkiCollection } = useGetPkiCollectionById(
+    (popUp?.pkiCollection?.data as { collectionId: string })?.collectionId || ""
+  );
+
+  const { mutateAsync: createPkiCollection } = useCreatePkiCollection();
+  const { mutateAsync: updatePkiCollection } = useUpdatePkiCollection();
+
+  const {
+    control,
+    handleSubmit,
+    reset,
+    formState: { isSubmitting }
+  } = useForm<FormData>({
+    resolver: zodResolver(schema)
+  });
+
+  useEffect(() => {
+    if (pkiCollection) {
+      reset({
+        name: pkiCollection.name,
+        description: pkiCollection.description
+      });
+    } else {
+      reset({
+        name: "",
+        description: ""
+      });
+    }
+  }, [pkiCollection]);
+
+  const onFormSubmit = async ({ name, description }: FormData) => {
+    try {
+      if (!projectId) return;
+
+      if (pkiCollection) {
+        // update
+        await updatePkiCollection({
+          collectionId: pkiCollection.id,
+          name,
+          description,
+          projectId
+        });
+      } else {
+        // create
+        const { id: collectionId } = await createPkiCollection({
+          name,
+          description,
+          projectId
+        });
+
+        navigate({
+          to: `/${ProjectType.CertificateManager}/$projectId/pki-collections/$collectionId` as const,
+          params: {
+            projectId,
+            collectionId
+          }
+        });
+      }
+
+      handlePopUpToggle("pkiCollection", false);
+
+      reset();
+
+      createNotification({
+        text: `Successfully ${pkiCollection ? "updated" : "created"} PKI collection`,
+        type: "success"
+      });
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: `Failed to ${pkiCollection ? "updated" : "created"} PKI collection`,
+        type: "error"
+      });
+    }
+  };
+
+  return (
+    <Modal
+      isOpen={popUp?.pkiCollection?.isOpen}
+      onOpenChange={(isOpen) => {
+        handlePopUpToggle("pkiCollection", isOpen);
+        reset();
+      }}
+    >
+      <ModalContent title={`${pkiCollection ? "Edit" : "Create"} Certificate Collection`}>
+        <form onSubmit={handleSubmit(onFormSubmit)}>
+          <Controller
+            control={control}
+            defaultValue=""
+            name="name"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Name"
+                isError={Boolean(error)}
+                errorText={error?.message}
+                isRequired
+              >
+                <Input {...field} placeholder="My Certificate Collection" />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            defaultValue=""
+            name="description"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl label="Description" isError={Boolean(error)} errorText={error?.message}>
+                <Input
+                  {...field}
+                  placeholder="A collection to house certificates for ACME device"
+                />
+              </FormControl>
+            )}
+          />
+          <div className="flex items-center">
+            <Button
+              className="mr-4"
+              size="sm"
+              type="submit"
+              isLoading={isSubmitting}
+              isDisabled={isSubmitting}
+            >
+              {pkiCollection ? "Update" : "Create"}
+            </Button>
+            <Button
+              colorSchema="secondary"
+              variant="plain"
+              onClick={() => handlePopUpToggle("pkiCollection", false)}
+            >
+              Cancel
+            </Button>
+          </div>
+        </form>
+      </ModalContent>
+    </Modal>
+  );
+};

frontend/src/pages/cert-manager/CertificatesPage/components/PkiAlertsTab/components/PkiCollectionSection.tsx

@@ -0,0 +1,86 @@
+import { faPlus } 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 { Button, DeleteActionModal } from "@app/components/v2";
+import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
+import { useDeletePkiCollection } from "@app/hooks/api";
+import { usePopUp } from "@app/hooks/usePopUp";
+
+import { PkiCollectionModal } from "./PkiCollectionModal";
+import { PkiCollectionTable } from "./PkiCollectionTable";
+
+export const PkiCollectionSection = () => {
+  const { currentWorkspace } = useWorkspace();
+  const projectId = currentWorkspace?.id || "";
+  const { mutateAsync: deletePkiCollection } = useDeletePkiCollection();
+
+  const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
+    "pkiCollection",
+    "deletePkiCollection"
+  ] as const);
+
+  const onRemovePkiCollectionSubmit = async (collectionId: string) => {
+    try {
+      if (!projectId) return;
+
+      await deletePkiCollection({
+        collectionId,
+        projectId
+      });
+
+      createNotification({
+        text: "Successfully deleted PKI collection",
+        type: "success"
+      });
+
+      handlePopUpClose("deletePkiCollection");
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: "Failed to delete PKI collection",
+        type: "error"
+      });
+    }
+  };
+
+  return (
+    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <div className="mb-4 flex justify-between">
+        <p className="text-xl font-semibold text-mineshaft-100">Certificate Collections</p>
+        <ProjectPermissionCan
+          I={ProjectPermissionActions.Create}
+          a={ProjectPermissionSub.PkiCollections}
+        >
+          {(isAllowed) => (
+            <Button
+              colorSchema="primary"
+              type="submit"
+              leftIcon={<FontAwesomeIcon icon={faPlus} />}
+              onClick={() => handlePopUpOpen("pkiCollection")}
+              isDisabled={!isAllowed}
+            >
+              Create
+            </Button>
+          )}
+        </ProjectPermissionCan>
+      </div>
+      <PkiCollectionTable handlePopUpOpen={handlePopUpOpen} />
+      <PkiCollectionModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
+      <DeleteActionModal
+        isOpen={popUp.deletePkiCollection.isOpen}
+        title={`Are you sure want to remove the alert ${
+          (popUp?.deletePkiCollection?.data as { name: string })?.name || ""
+        } from the project?`}
+        onChange={(isOpen) => handlePopUpToggle("deletePkiCollection", isOpen)}
+        deleteKey="confirm"
+        onDeleteApproved={() =>
+          onRemovePkiCollectionSubmit(
+            (popUp?.deletePkiCollection?.data as { collectionId: string })?.collectionId
+          )
+        }
+      />
+    </div>
+  );
+};

frontend/src/pages/cert-manager/CertificatesPage/components/PkiAlertsTab/components/PkiCollectionTable.tsx

@@ -0,0 +1,141 @@
+import { faBoxesStacked, faEllipsis } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useNavigate } from "@tanstack/react-router";
+import { twMerge } from "tailwind-merge";
+
+import { ProjectPermissionCan } from "@app/components/permissions";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  EmptyState,
+  Table,
+  TableContainer,
+  TableSkeleton,
+  TBody,
+  Td,
+  Th,
+  THead,
+  Tr
+} from "@app/components/v2";
+import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
+import { useListWorkspacePkiCollections } from "@app/hooks/api";
+import { ProjectType } from "@app/hooks/api/workspace/types";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+type Props = {
+  handlePopUpOpen: (
+    popUpName: keyof UsePopUpState<["pkiCollection", "deletePkiCollection"]>,
+    data?: object
+  ) => void;
+};
+
+export const PkiCollectionTable = ({ handlePopUpOpen }: Props) => {
+  const navigate = useNavigate();
+  const { currentWorkspace } = useWorkspace();
+  const projectId = currentWorkspace?.id || "";
+
+  const { data, isPending } = useListWorkspacePkiCollections({
+    workspaceId: projectId
+  });
+
+  return (
+    <div>
+      <TableContainer>
+        <Table>
+          <THead>
+            <Tr>
+              <Th>Name</Th>
+              <Th>Description</Th>
+              <Th className="w-5" />
+            </Tr>
+          </THead>
+          <TBody>
+            {isPending && <TableSkeleton columns={3} innerKey="pki-collections" />}
+            {!isPending &&
+              data?.collections.map((pkiCollection) => {
+                return (
+                  <Tr
+                    className="h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
+                    key={`pki-collection-${pkiCollection.id}`}
+                    onClick={() =>
+                      navigate({
+                        to: `/${ProjectType.CertificateManager}/$projectId/pki-collections/$collectionId` as const,
+                        params: {
+                          projectId,
+                          collectionId: pkiCollection.id
+                        }
+                      })
+                    }
+                  >
+                    <Td>{pkiCollection.name}</Td>
+                    <Td>{pkiCollection.description ? pkiCollection.description : "-"}</Td>
+                    <Td>
+                      <DropdownMenu>
+                        <DropdownMenuTrigger asChild className="rounded-lg">
+                          <div className="hover:text-primary-400 data-[state=open]:text-primary-400">
+                            <FontAwesomeIcon size="sm" icon={faEllipsis} />
+                          </div>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent align="start" className="p-1">
+                          <ProjectPermissionCan
+                            I={ProjectPermissionActions.Edit}
+                            a={ProjectPermissionSub.PkiCollections}
+                          >
+                            {(isAllowed) => (
+                              <DropdownMenuItem
+                                className={twMerge(
+                                  !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
+                                )}
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  handlePopUpOpen("pkiCollection", {
+                                    collectionId: pkiCollection.id
+                                  });
+                                }}
+                                disabled={!isAllowed}
+                              >
+                                Edit Collection
+                              </DropdownMenuItem>
+                            )}
+                          </ProjectPermissionCan>
+                          <ProjectPermissionCan
+                            I={ProjectPermissionActions.Delete}
+                            a={ProjectPermissionSub.PkiCollections}
+                          >
+                            {(isAllowed) => (
+                              <DropdownMenuItem
+                                className={twMerge(
+                                  isAllowed
+                                    ? "hover:!bg-red-500 hover:!text-white"
+                                    : "pointer-events-none cursor-not-allowed opacity-50"
+                                )}
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  handlePopUpOpen("deletePkiCollection", {
+                                    collectionId: pkiCollection.id,
+                                    name: pkiCollection.name
+                                  });
+                                }}
+                                disabled={!isAllowed}
+                              >
+                                Delete Collection
+                              </DropdownMenuItem>
+                            )}
+                          </ProjectPermissionCan>
+                        </DropdownMenuContent>
+                      </DropdownMenu>
+                    </Td>
+                  </Tr>
+                );
+              })}
+          </TBody>
+        </Table>
+        {!isPending && !data?.collections?.length && (
+          <EmptyState title="No certificate collections have been created" icon={faBoxesStacked} />
+        )}
+      </TableContainer>
+    </div>
+  );
+};

frontend/src/pages/cert-manager/CertificatesPage/components/PkiAlertsTab/components/index.tsx

@@ -0,0 +1,2 @@
+export { PkiAlertsSection } from "./PkiAlertsSection";
+export { PkiCollectionSection } from "./PkiCollectionSection";

frontend/src/pages/cert-manager/CertificatesPage/components/PkiAlertsTab/index.tsx

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

frontend/src/pages/cert-manager/CertificatesPage/components/index.tsx

@@ -0,0 +1,3 @@
+export { CaTab } from "./CaTab";
+export { CertificatesTab } from "./CertificatesTab";
+export { PkiAlertsTab } from "./PkiAlertsTab";

frontend/src/pages/cert-manager/CertificatesPage/route.tsx

@@ -0,0 +1,9 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+import { CertificatesPage } from "./CertificatesPage";
+
+export const Route = createFileRoute(
+  "/_authenticate/_inject-org-details/cert-manager/$projectId/_cert-manager-layout/overview"
+)({
+  component: CertificatesPage
+});