feat: renamed old frontend and fixed some minor bugs

frontend/src/pages/organization/AdminPage/AdminPage.tsx

@@ -0,0 +1,39 @@
+import { useState } from "react";
+import { Helmet } from "react-helmet";
+import { useTranslation } from "react-i18next";
+
+import { Tab, TabList, TabPanel, Tabs } from "@app/components/v2";
+
+import { OrgAdminProjects } from "./components/OrgAdminProjects";
+
+enum TabSections {
+  Projects = "projects"
+}
+
+export const AdminPage = () => {
+  const { t } = useTranslation();
+  const [activeTab, setActiveTab] = useState<TabSections>(TabSections.Projects);
+  return (
+    <>
+      <Helmet>
+        <title>{t("common.head-title", { title: t("settings.org.title") })}</title>
+        <link rel="icon" href="/infisical.ico" />
+      </Helmet>
+      <div className="flex w-full justify-center bg-bunker-800 py-6 text-white">
+        <div className="w-full max-w-6xl px-6">
+          <div className="mb-4">
+            <p className="text-3xl font-semibold text-gray-200">Organization Admin Console</p>
+          </div>
+          <Tabs value={activeTab} onValueChange={(el) => setActiveTab(el as TabSections)}>
+            <TabList>
+              <Tab value={TabSections.Projects}>Projects</Tab>
+            </TabList>
+            <TabPanel value={TabSections.Projects}>
+              <OrgAdminProjects />
+            </TabPanel>
+          </Tabs>
+        </div>
+      </div>
+    </>
+  );
+};

frontend/src/pages/organization/AdminPage/components/OrgAdminProjects/OrgAdminProjects.tsx

@@ -0,0 +1,168 @@
+import { useState } from "react";
+import { faEllipsis, faMagnifyingGlass, faSignIn } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useNavigate } from "@tanstack/react-router";
+import { format } from "date-fns";
+import { motion } from "framer-motion";
+
+import { createNotification } from "@app/components/notifications";
+import {
+  Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  EmptyState,
+  Input,
+  Pagination,
+  Spinner,
+  Table,
+  TableContainer,
+  TableSkeleton,
+  TBody,
+  Td,
+  Th,
+  THead,
+  Tr
+} from "@app/components/v2";
+import {
+  OrgPermissionAdminConsoleAction,
+  OrgPermissionSubjects
+} from "@app/context/OrgPermissionContext/types";
+import { withPermission } from "@app/hoc";
+import { useDebounce } from "@app/hooks";
+import { useOrgAdminAccessProject, useOrgAdminGetProjects } from "@app/hooks/api";
+import { ProjectType } from "@app/hooks/api/workspace/types";
+
+export const OrgAdminProjects = withPermission(
+  () => {
+    const [page, setPage] = useState(1);
+    const [search, setSearch] = useState("");
+    const [debouncedSearch] = useDebounce(search);
+    const [perPage, setPerPage] = useState(25);
+    const navigate = useNavigate();
+    const orgAdminAccessProject = useOrgAdminAccessProject();
+
+    const { data, isPending: isProjectsLoading } = useOrgAdminGetProjects({
+      offset: (page - 1) * perPage,
+      limit: perPage,
+      search: debouncedSearch || undefined
+    });
+
+    const projects = data?.projects || [];
+    const projectCount = data?.count || 0;
+    const isEmpty = !isProjectsLoading && projects.length === 0;
+
+    const handleAccessProject = async (type: ProjectType, projectId: string) => {
+      try {
+        await orgAdminAccessProject.mutateAsync({
+          projectId
+        });
+        await navigate({
+          to: `/${type}/$projectId/overview` as const,
+          params: {
+            projectId
+          }
+        });
+      } catch {
+        createNotification({
+          text: "Failed to access project",
+          type: "error"
+        });
+      }
+    };
+
+    return (
+      <motion.div
+        key="panel-projects"
+        transition={{ duration: 0.15 }}
+        initial={{ opacity: 0, translateX: 30 }}
+        animate={{ opacity: 1, translateX: 0 }}
+        exit={{ opacity: 0, translateX: 30 }}
+      >
+        <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">Projects</p>
+          </div>
+          <div>
+            <Input
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
+              placeholder="Search by project name"
+            />
+            <TableContainer className="mt-4">
+              <Table>
+                <THead>
+                  <Tr>
+                    <Th>Name</Th>
+                    <Th>Slug</Th>
+                    <Th>Created At</Th>
+                    <Th className="w-5" />
+                  </Tr>
+                </THead>
+                <TBody>
+                  {isProjectsLoading && <TableSkeleton columns={4} innerKey="projects" />}
+                  {!isProjectsLoading &&
+                    projects?.map(({ name, slug, createdAt, type, id }) => (
+                      <Tr key={`project-${id}`} className="group w-full">
+                        <Td>{name}</Td>
+                        <Td>{slug}</Td>
+                        <Td>{format(new Date(createdAt), "yyyy-MM-dd, hh:mm aaa")}</Td>
+                        <Td>
+                          <div>
+                            <DropdownMenu>
+                              <DropdownMenuTrigger asChild className="rounded-lg">
+                                <Button
+                                  variant="link"
+                                  className="text-bunker-300 hover:text-primary-400 data-[state=open]:text-primary-400"
+                                >
+                                  <FontAwesomeIcon size="sm" icon={faEllipsis} />
+                                </Button>
+                              </DropdownMenuTrigger>
+                              <DropdownMenuContent align="start" className="p-1">
+                                <DropdownMenuItem
+                                  onClick={(e) => {
+                                    e.stopPropagation();
+                                    e.preventDefault();
+                                    handleAccessProject(type, id);
+                                  }}
+                                  icon={<FontAwesomeIcon icon={faSignIn} />}
+                                  disabled={
+                                    orgAdminAccessProject.variables?.projectId === id &&
+                                    orgAdminAccessProject.isPending
+                                  }
+                                >
+                                  Access{" "}
+                                  {orgAdminAccessProject.variables?.projectId === id &&
+                                    orgAdminAccessProject.isPending && <Spinner size="xs" />}
+                                </DropdownMenuItem>
+                              </DropdownMenuContent>
+                            </DropdownMenu>
+                          </div>
+                        </Td>
+                      </Tr>
+                    ))}
+                </TBody>
+              </Table>
+              {!isProjectsLoading && (
+                <Pagination
+                  count={projectCount}
+                  page={page}
+                  perPage={perPage}
+                  onChangePage={(newPage) => setPage(newPage)}
+                  onChangePerPage={(newPerPage) => setPerPage(newPerPage)}
+                />
+              )}
+              {isEmpty && <EmptyState title="No projects found" />}
+            </TableContainer>
+          </div>
+        </div>
+      </motion.div>
+    );
+  },
+  {
+    action: OrgPermissionAdminConsoleAction.AccessAllProjects,
+    subject: OrgPermissionSubjects.AdminConsole
+  }
+);

frontend/src/pages/organization/AdminPage/components/OrgAdminProjects/index.tsx

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

frontend/src/pages/organization/AdminPage/route.tsx

@@ -0,0 +1,9 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+import { AdminPage } from "./AdminPage";
+
+export const Route = createFileRoute(
+  "/_authenticate/_inject-org-details/organization/_layout/admin"
+)({
+  component: AdminPage
+});