feat: renamed old frontend and fixed some minor bugs

frontend/src/pages/ssh/OverviewPage/OverviewPage.tsx

@@ -0,0 +1,75 @@
+import { Helmet } from "react-helmet";
+import { useTranslation } from "react-i18next";
+import { motion } from "framer-motion";
+
+import { ProjectPermissionCan } from "@app/components/permissions";
+import { Tab, TabList, TabPanel, Tabs } from "@app/components/v2";
+import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
+
+import { SshCaSection, SshCertificatesSection } from "./components";
+
+enum TabSections {
+  SshCa = "ssh-certificate-authorities",
+  SshCertificates = "ssh-certificates"
+}
+
+export const OverviewPage = () => {
+  const { t } = useTranslation();
+  return (
+    <>
+      <Helmet>
+        <title>{t("common.head-title", { title: "Certificates" })}</title>
+        <meta property="og:image" content="/images/message.png" />
+      </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 px-6 py-6">
+            <p className="mb-4 mr-4 text-3xl font-semibold text-white">SSH</p>
+            <Tabs defaultValue={TabSections.SshCertificates}>
+              <TabList>
+                <Tab value={TabSections.SshCertificates}>SSH Certificates</Tab>
+                <Tab value={TabSections.SshCa}>Certificate Authorities</Tab>
+              </TabList>
+              <TabPanel value={TabSections.SshCertificates}>
+                <motion.div
+                  key="panel-ssh-certificate-s"
+                  transition={{ duration: 0.15 }}
+                  initial={{ opacity: 0, translateX: 30 }}
+                  animate={{ opacity: 1, translateX: 0 }}
+                  exit={{ opacity: 0, translateX: 30 }}
+                >
+                  <ProjectPermissionCan
+                    I={ProjectPermissionActions.Read}
+                    a={ProjectPermissionSub.SshCertificates}
+                    renderGuardBanner
+                    passThrough={false}
+                  >
+                    <SshCertificatesSection />
+                  </ProjectPermissionCan>
+                </motion.div>
+              </TabPanel>
+              <TabPanel value={TabSections.SshCa}>
+                <motion.div
+                  key="panel-ssh-certificate-authorities"
+                  transition={{ duration: 0.15 }}
+                  initial={{ opacity: 0, translateX: 30 }}
+                  animate={{ opacity: 1, translateX: 0 }}
+                  exit={{ opacity: 0, translateX: 30 }}
+                >
+                  <ProjectPermissionCan
+                    I={ProjectPermissionActions.Read}
+                    a={ProjectPermissionSub.SshCertificateAuthorities}
+                    renderGuardBanner
+                    passThrough={false}
+                  >
+                    <SshCaSection />
+                  </ProjectPermissionCan>
+                </motion.div>
+              </TabPanel>
+            </Tabs>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};