Add ssh host endpoint for issuing ssh host cert

frontend/src/pages/ssh/SshCertsPage/SshCertsPage.tsx

@@ -0,0 +1,28 @@
+import { Helmet } from "react-helmet";
+import { useTranslation } from "react-i18next";
+
+import { PageHeader } from "@app/components/v2";
+
+import { SshCertificatesSection } from "./components";
+
+export const SshCertsPage = () => {
+  const { t } = useTranslation();
+  return (
+    <>
+      <Helmet>
+        <title>{t("common.head-title", { title: "Certificates" })}</title>
+      </Helmet>
+      <div className="h-full bg-bunker-800">
+        <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
+          <div className="mx-auto mb-6 w-full max-w-7xl">
+            <PageHeader
+              title="SSH Certificates"
+              description="View and audit all issued SSH certificates, including validity and associated access metadata."
+            />
+            <SshCertificatesSection />
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};

frontend/src/pages/ssh/SshCertsPage/components/SshCertificatesSection.tsx

@@ -0,0 +1,33 @@
+import { usePopUp } from "@app/hooks/usePopUp";
+
+import { SshCertificateModal } from "../../SshCaByIDPage/components/SshCertificateModal";
+import { SshCertificatesTable } from "./SshCertificatesTable";
+
+export const SshCertificatesSection = () => {
+  const { popUp, handlePopUpToggle } = usePopUp(["sshCertificate"] as const);
+  return (
+    <div className="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.SshCertificates}
+        >
+          {(isAllowed) => (
+            <Button
+              colorSchema="primary"
+              type="submit"
+              leftIcon={<FontAwesomeIcon icon={faPlus} />}
+              onClick={() => handlePopUpOpen("sshCertificate")}
+              isDisabled={!isAllowed}
+            >
+              Request
+            </Button>
+          )}
+        </ProjectPermissionCan> */}
+      </div>
+      <SshCertificatesTable />
+      <SshCertificateModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
+    </div>
+  );
+};

frontend/src/pages/ssh/SshCertsPage/components/SshCertificatesTable.tsx

@@ -0,0 +1,87 @@
+import { useState } from "react";
+import { faCertificate } from "@fortawesome/free-solid-svg-icons";
+import { format } from "date-fns";
+
+import {
+  Badge,
+  EmptyState,
+  Pagination,
+  Table,
+  TableContainer,
+  TableSkeleton,
+  TBody,
+  Td,
+  Th,
+  THead,
+  Tr
+} from "@app/components/v2";
+import { useWorkspace } from "@app/context";
+import { useListWorkspaceSshCertificates } from "@app/hooks/api";
+
+import { getSshCertStatusBadgeDetails } from "./SshCertificatesTable.utils";
+
+const PER_PAGE_INIT = 25;
+
+export const SshCertificatesTable = () => {
+  const { currentWorkspace } = useWorkspace();
+  const [page, setPage] = useState(1);
+  const [perPage, setPerPage] = useState(PER_PAGE_INIT);
+
+  const { data, isPending } = useListWorkspaceSshCertificates({
+    projectId: currentWorkspace?.id || "",
+    offset: (page - 1) * perPage,
+    limit: perPage
+  });
+
+  return (
+    <TableContainer>
+      <Table>
+        <THead>
+          <Tr>
+            <Th>Principals</Th>
+            <Th>Status</Th>
+            <Th>Not Before</Th>
+            <Th>Not After</Th>
+          </Tr>
+        </THead>
+        <TBody>
+          {isPending && <TableSkeleton columns={4} innerKey="org-ssh-certificates" />}
+          {!isPending &&
+            data?.certificates?.map((certificate) => {
+              const { variant, label } = getSshCertStatusBadgeDetails(certificate.notAfter);
+              return (
+                <Tr className="h-10" key={`certificate-${certificate.id}`}>
+                  <Td>{certificate.principals.join(", ")}</Td>
+                  <Td>
+                    <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>
+                </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 SSH certificates have been issued" icon={faCertificate} />
+      )}
+    </TableContainer>
+  );
+};

frontend/src/pages/ssh/SshCertsPage/components/SshCertificatesTable.utils.ts

@@ -0,0 +1,17 @@
+export const getSshCertStatusBadgeDetails = (notAfter: string) => {
+  const currentDate = new Date().getTime();
+  const notAfterDate = new Date(notAfter).getTime();
+
+  let variant: "success" | "primary" | "danger" = "success";
+  let label = "Active";
+
+  if (notAfterDate > currentDate) {
+    variant = "success";
+    label = "Active";
+  } else {
+    variant = "danger";
+    label = "Expired";
+  }
+
+  return { variant, label };
+};

frontend/src/pages/ssh/SshCertsPage/components/index.tsx

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

frontend/src/pages/ssh/SshCertsPage/route.tsx

@@ -0,0 +1,9 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+import { SshCertsPage } from "./SshCertsPage";
+
+export const Route = createFileRoute(
+  "/_authenticate/_inject-org-details/_org-layout/ssh/$projectId/_ssh-layout/certificates"
+)({
+  component: SshCertsPage
+});