checkpoint

frontend/src/layouts/AppLayout/AppLayout.tsx

@@ -475,6 +475,18 @@ export const AppLayout = ({ children }: LayoutProps) => {
                           </MenuItem>
                         </a>
                       </Link>
+                      <Link href={`/project/${currentWorkspace?._id}/approval`} passHref>
+                        <a>
+                          <MenuItem
+                            isSelected={
+                              router.asPath === `/project/${currentWorkspace?._id}/allowlist`
+                            }
+                            icon="system-outline-126-verified"
+                          >
+                            Secret Change Management
+                          </MenuItem>
+                        </a>
+                      </Link>
                       <Link href={`/project/${currentWorkspace?._id}/allowlist`} passHref>
                         <a>
                           <MenuItem

frontend/src/pages/project/[id]/approval/index.tsx

@@ -0,0 +1,27 @@
+import { useTranslation } from "react-i18next";
+import Head from "next/head";
+
+import { SecretApprovalListPage } from "@app/views/SecretApproval/SecretApprovalListPage";
+
+const SecretApproval = () => {
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <Head>
+        <title>{t("common.head-title", { title: t("approval.title") })}</title>
+        <link rel="icon" href="/infisical.ico" />
+        <meta property="og:image" content="/images/message.png" />
+        <meta property="og:title" content={String(t("approval.og-title"))} />
+        <meta name="og:description" content={String(t("approval.og-description"))} />
+      </Head>
+      <div className="h-full">
+        <SecretApprovalListPage />
+      </div>
+    </>
+  );
+};
+
+export default SecretApproval;
+
+SecretApproval.requireAuth = true;

frontend/src/views/SecretApproval/SecretApprovalListPage/SecretApprovalListPage.tsx

@@ -0,0 +1,73 @@
+import { faCheck, faCodeBranch, faXmark } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { Button, Table, TableContainer, TBody, Td, Th, THead, Tr } from "@app/components/v2";
+
+export const SecretApprovalListPage = () => {
+  return (
+    <div className="container mx-auto bg-bunker-800 text-white w-full h-full">
+      <div className="my-6">
+        <p className="text-3xl font-semibold text-gray-200">Admin Panels</p>
+      </div>
+      <div className="rounded-md bg-mineshaft-800 text-gray-300">
+        <div className="p-4 px-8 flex items-center space-x-8">
+          <div>
+            <FontAwesomeIcon icon={faCodeBranch} className="mr-2" />
+            27 Open
+          </div>
+          <div className="text-gray-500">
+            <FontAwesomeIcon icon={faCheck} className="mr-2" />
+            27 Closed
+          </div>
+        </div>
+        <div className="flex flex-col border-t border-mineshaft-600">
+          <div className="flex flex-col px-8 py-4">
+            <div className="mb-1">
+              <FontAwesomeIcon icon={faCodeBranch} className="mr-2" />2 secrets added and 1 deleted
+            </div>
+            <span className="text-xs text-gray-500">
+              Opened 2 hours ago by akhilmhdh - Review required
+            </span>
+          </div>
+        </div>
+      </div>
+      <div className="my-4 p-4 rounded-md bg-bunker-600 text-gray-300">
+        <div className="mb-4 text-lg">
+          Request for <span className="text-yellow-600">secret change</span>
+        </div>
+        <div>
+          <TableContainer>
+            <Table>
+              <THead>
+                <Tr>
+                  <Th className="min-table-row">Secret</Th>
+                  <Th>Value</Th>
+                  <Th className="min-table-row">Comment</Th>
+                  <Th className="min-table-row">Tags</Th>
+                </Tr>
+              </THead>
+              <TBody>
+                <Tr>
+                  <Td>TWILIO_SECRET_TOKEN</Td>
+                  <Td>value</Td>
+                  <Td>Some values</Td>
+                  <Td>-</Td>
+                </Tr>
+              </TBody>
+            </Table>
+          </TableContainer>
+        </div>
+        <div className="flex items-center mt-8 space-x-6">
+          <Button leftIcon={<FontAwesomeIcon icon={faCheck} />}>Approve</Button>
+          <Button
+            variant="outline_bg"
+            leftIcon={<FontAwesomeIcon icon={faXmark} />}
+            colorSchema="danger"
+          >
+            Deny
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};

frontend/src/views/SecretApproval/SecretApprovalListPage/index.tsx

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