chore: App router migration - general settings (#16312)

* added lockedSMS to future routes * add orgMigrations routes to future * correct metadata * small fix * add orgMigrations to future * Move components to client components * Remove tRPC element from edit user RSC * Get username for meta * Remove suspense query * Remove orgMigrations from app router * Type fix * Revert "Remove suspense query" This reverts commit eadd814f6e4a5d6856d9218342b7909c22fe62c6. * Handle suspenseQuery in app router * User edit page, fetch data server side * Update yarn.lock * Export getFixedT * Set PageWrapper as root layout for settings * Settings Layout accepts strings for shell heading * Add OOO to app router settings * Refactor layout for my-account pages * Remove instances of pages router from my-account * Refactor security pages * Add billing to app router * Add admin API link to layout * Add api keys page * Webhooks WIP * Refactor SettingsHeader to client component * Add webhook pages * Refactor API keys page * Add admin app page * Type fix * fix types * fix developer/webhooks/[id] param value type error * remove unnecessary code * do not pass t prop to CreateNewWebhookButton * fix type errors in webhook-edit-view * fix the remaining type errors * do not use prisma directly in generateMetadata * remove use client if unnecessary * Remove unused shell heading from SettingsLayoutAppDir * improve metadata * fix billing page * fix import in settings/teams * Use next `notFound()` * fix type check * fix type check * remove unused code * Fix calendar setting page * Separate settings pages into route groups * Refactor admin settings pages * Remove meta instance from billing page route * Update settings layoutAppDir * Refactor developer settings pages * Refactor out of office * Refactor my account settings * Refactor admin api page * Refactor security pages * Type fix * fix styling in settings layout --------- Co-authored-by: Somay Chauhan <somaychauhan98@gmail.com> Co-authored-by: Omar López <zomars@me.com> Co-authored-by: Benny Joo <sldisek783@gmail.com>
2024-09-09 01:15:03 -04:00
parent 21e23f32ac
commit 84a2e55125
187 changed files with 4629 additions and 3587 deletions
@@ -22,7 +22,7 @@ const create = async (locale: string, ns: string) => {
  return _i18n;
 };

-const getFixedT = async (locale: string, ns: string) => {
+export const getFixedT = async (locale: string, ns = "common") => {
  const i18n = await create(locale, ns);

  return i18n.getFixedT(locale, ns);
@@ -1,17 +1,11 @@
 import { getServerSideProps } from "@pages/reschedule/[uid]";
 import { withAppDirSsr } from "app/WithAppDirSsr";
-import type { SearchParams } from "app/_types";
-import type { Params } from "next/dist/shared/lib/router/utils/route-matcher";
+import type { PageProps } from "app/_types";
 import { cookies, headers } from "next/headers";

 import { buildLegacyCtx } from "@lib/buildLegacyCtx";
 import withEmbedSsr from "@lib/withEmbedSsr";

-type PageProps = Readonly<{
-  params: Params;
-  searchParams: SearchParams;
-}>;
-
 const Page = async ({ params, searchParams }: PageProps) => {
  const legacyCtx = buildLegacyCtx(headers(), cookies(), params, searchParams);
  await withAppDirSsr(withEmbedSsr(getServerSideProps))(legacyCtx);
@@ -1,8 +1,7 @@
 import { getServerSideProps } from "@pages/reschedule/[uid]";
 import { withAppDirSsr } from "app/WithAppDirSsr";
-import type { SearchParams } from "app/_types";
+import type { PageProps } from "app/_types";
 import { _generateMetadata } from "app/_utils";
-import type { Params } from "next/dist/shared/lib/router/utils/route-matcher";
 import { headers, cookies } from "next/headers";

 import { buildLegacyCtx } from "@lib/buildLegacyCtx";
@@ -13,11 +12,6 @@ export const generateMetadata = async () =>
    () => ""
  );

-type PageProps = Readonly<{
-  params: Params;
-  searchParams: SearchParams;
-}>;
-
 const getData = withAppDirSsr(getServerSideProps);

 const Page = async ({ params, searchParams }: PageProps) => {
@@ -1,6 +1,5 @@
-import { type SearchParams } from "app/_types";
+import type { PageProps } from "app/_types";
 import { type GetServerSidePropsContext } from "next";
-import type { Params } from "next/dist/shared/lib/router/utils/route-matcher";
 import { cookies, headers } from "next/headers";
 import { redirect } from "next/navigation";
 import z from "zod";
@@ -21,11 +20,6 @@ const getPageProps = async (context: GetServerSidePropsContext) => {
  return redirect(`/apps/routing-forms/${pages.length ? pages.join("/") : ""}`);
 };

-type PageProps = Readonly<{
-  params: Params;
-  searchParams: SearchParams;
-}>;
-
 const Page = async ({ params, searchParams }: PageProps) => {
  const legacyCtx = buildLegacyCtx(headers(), cookies(), params, searchParams);
  await getPageProps(legacyCtx);
@@ -0,0 +1,34 @@
+import { _generateMetadata } from "app/_utils";
+import { getFixedT } from "app/_utils";
+import { getServerSession } from "next-auth";
+
+import { AUTH_OPTIONS } from "@calcom/feature-auth/lib/next-auth-options";
+import AdminAppsList from "@calcom/features/apps/AdminAppsList";
+import SettingsHeader from "@calcom/features/settings/appDir/SettingsHeader";
+
+export const generateMetadata = async () =>
+  await _generateMetadata(
+    (t) => t("apps"),
+    (t) => t("admin_apps_description")
+  );
+
+const Page = async () => {
+  const session = await getServerSession(AUTH_OPTIONS);
+
+  const t = await getFixedT(session?.user.locale || "en");
+
+  return (
+    <SettingsHeader title={t("apps")} description={t("admin_apps_description")}>
+      <div className="flex">
+        <AdminAppsList
+          baseURL="/settings/admin/apps"
+          classNames={{
+            appCategoryNavigationRoot: "overflow-x-scroll",
+          }}
+        />
+      </div>
+    </SettingsHeader>
+  );
+};
+
+export default Page;
@@ -1,5 +1,5 @@
-import Page from "@pages/settings/admin/apps/[category]";
 import { _generateMetadata } from "app/_utils";
+import { redirect } from "next/navigation";

 export const generateMetadata = async () =>
  await _generateMetadata(
@@ -7,4 +7,8 @@ export const generateMetadata = async () =>
    (t) => t("admin_apps_description")
  );

+const Page = () => {
+  redirect("/[category]");
+};
+
 export default Page;
@@ -0,0 +1,20 @@
+import { _generateMetadata } from "app/_utils";
+
+import { FlagListingView } from "@calcom/features/flags/pages/flag-listing-view";
+import SettingsHeader from "@calcom/features/settings/appDir/SettingsHeader";
+
+export const generateMetadata = async () =>
+  await _generateMetadata(
+    () => "Feature Flags",
+    () => "Here you can toggle your Cal.com instance features."
+  );
+
+const Page = async () => {
+  return (
+    <SettingsHeader title="Feature Flags" description="Here you can toggle your Cal.com instance features.">
+      <FlagListingView />
+    </SettingsHeader>
+  );
+};
+
+export default Page;
@@ -0,0 +1,27 @@
+import { _generateMetadata } from "app/_utils";
+import { getFixedT } from "app/_utils";
+import { getServerSession } from "next-auth";
+
+import { AUTH_OPTIONS } from "@calcom/feature-auth/lib/next-auth-options";
+import SettingsHeader from "@calcom/features/settings/appDir/SettingsHeader";
+
+import ImpersonationView from "~/settings/admin/impersonation-view";
+
+export const generateMetadata = async () =>
+  await _generateMetadata(
+    (t) => t("admin"),
+    (t) => t("impersonation")
+  );
+
+const Page = async () => {
+  const session = await getServerSession(AUTH_OPTIONS);
+
+  const t = await getFixedT(session?.user.locale || "en");
+  return (
+    <SettingsHeader title={t("admin")} description={t("impersonation")}>
+      <ImpersonationView />
+    </SettingsHeader>
+  );
+};
+
+export default Page;
@@ -0,0 +1,21 @@
+import { _generateMetadata } from "app/_utils";
+
+import SettingsHeader from "@calcom/features/settings/appDir/SettingsHeader";
+
+import LockedSMSView from "~/settings/admin/locked-sms-view";
+
+export const generateMetadata = async () =>
+  await _generateMetadata(
+    () => "Locked SMS",
+    () => "Lock or unlock SMS sending for users"
+  );
+
+const Page = () => {
+  return (
+    <SettingsHeader title="Locked SMS" description="Lock or unlock SMS sending for users">
+      <LockedSMSView />
+    </SettingsHeader>
+  );
+};
+
+export default Page;
@@ -0,0 +1,21 @@
+import { _generateMetadata } from "app/_utils";
+
+import SettingsHeader from "@calcom/features/settings/appDir/SettingsHeader";
+
+import LegacyPage from "~/settings/admin/oauth-view";
+
+export const generateMetadata = async () =>
+  await _generateMetadata(
+    () => "OAuth",
+    () => "Add new OAuth Clients"
+  );
+
+const Page = () => {
+  return (
+    <SettingsHeader title="OAuth" description="Add new OAuth Clients">
+      <LegacyPage />
+    </SettingsHeader>
+  );
+};
+
+export default Page;
@@ -0,0 +1,52 @@
+import { type Params } from "app/_types";
+import { _generateMetadata } from "app/_utils";
+import { notFound } from "next/navigation";
+import { z } from "zod";
+
+import LicenseRequired from "@calcom/features/ee/common/components/LicenseRequired";
+import { OrgForm } from "@calcom/features/ee/organizations/pages/settings/admin/AdminOrgEditPage";
+import SettingsHeader from "@calcom/features/settings/appDir/SettingsHeader";
+import { OrganizationRepository } from "@calcom/lib/server/repository/organization";
+
+const orgIdSchema = z.object({ id: z.coerce.number() });
+
+export const generateMetadata = async ({ params }: { params: Params }) => {
+  const input = orgIdSchema.safeParse(params);
+  if (!input.success) {
+    return await _generateMetadata(
+      () => `Editing organization`,
+      () => "Here you can edit an organization."
+    );
+  }
+
+  const org = await OrganizationRepository.adminFindById({ id: input.data.id });
+
+  return await _generateMetadata(
+    () => `Editing organization: ${org.name}`,
+    () => "Here you can edit an organization."
+  );
+};
+
+const Page = async ({ params }: { params: Params }) => {
+  const input = orgIdSchema.safeParse(params);
+
+  if (!input.success) notFound();
+
+  try {
+    const org = await OrganizationRepository.adminFindById({ id: input.data.id });
+
+    return (
+      <SettingsHeader
+        title={`Editing organization: ${org.name}`}
+        description="Here you can edit an organization.">
+        <LicenseRequired>
+          <OrgForm org={org} />
+        </LicenseRequired>
+      </SettingsHeader>
+    );
+  } catch {
+    notFound();
+  }
+};
+
+export default Page;
@@ -0,0 +1,29 @@
+import { _generateMetadata } from "app/_utils";
+import { getFixedT } from "app/_utils";
+import { getServerSession } from "next-auth";
+
+import { AUTH_OPTIONS } from "@calcom/feature-auth/lib/next-auth-options";
+import LicenseRequired from "@calcom/features/ee/common/components/LicenseRequired";
+import AdminOrgTable from "@calcom/features/ee/organizations/pages/settings/admin/AdminOrgPage";
+import SettingsHeader from "@calcom/features/settings/appDir/SettingsHeader";
+
+export const generateMetadata = async () =>
+  await _generateMetadata(
+    (t) => t("organizations"),
+    (t) => t("orgs_page_description")
+  );
+
+const Page = async () => {
+  const session = await getServerSession(AUTH_OPTIONS);
+
+  const t = await getFixedT(session?.user.locale || "en");
+  return (
+    <SettingsHeader title={t("organizations")} description={t("orgs_page_description")}>
+      <LicenseRequired>
+        <AdminOrgTable />
+      </LicenseRequired>
+    </SettingsHeader>
+  );
+};
+
+export default Page;
@@ -0,0 +1,52 @@
+import { type Params } from "app/_types";
+import { _generateMetadata } from "app/_utils";
+import { notFound } from "next/navigation";
+import { z } from "zod";
+
+import LicenseRequired from "@calcom/features/ee/common/components/LicenseRequired";
+import { UsersEditView } from "@calcom/features/ee/users/pages/users-edit-view";
+import SettingsHeader from "@calcom/features/settings/appDir/SettingsHeader";
+import { UserRepository } from "@calcom/lib/server/repository/user";
+
+const userIdSchema = z.object({ id: z.coerce.number() });
+
+export const generateMetadata = async ({ params }: { params: Params }) => {
+  const input = userIdSchema.safeParse(params);
+  if (!input.success) {
+    return await _generateMetadata(
+      () => `Editing user`,
+      () => "Here you can edit a current user."
+    );
+  }
+
+  const user = await UserRepository.adminFindById(input.data.id);
+
+  return await _generateMetadata(
+    () => `Editing user: ${user.username}`,
+    () => "Here you can edit a current user."
+  );
+};
+
+const Page = async ({ params }: { params: Params }) => {
+  const input = userIdSchema.safeParse(params);
+
+  if (!input.success) {
+    notFound();
+  }
+
+  try {
+    const user = await UserRepository.adminFindById(input.data.id);
+
+    return (
+      <SettingsHeader title="Editing user" description="Here you can edit a current user">
+        <LicenseRequired>
+          <UsersEditView user={user} />
+        </LicenseRequired>
+      </SettingsHeader>
+    );
+  } catch {
+    notFound();
+  }
+};
+
+export default Page;
@@ -0,0 +1,20 @@
+import { _generateMetadata } from "app/_utils";
+
+import UsersAddView from "@calcom/features/ee/users/pages/users-add-view";
+import SettingsHeader from "@calcom/features/settings/appDir/SettingsHeader";
+
+export const generateMetadata = async () =>
+  await _generateMetadata(
+    () => "Add new user",
+    () => "Here you can add a new user."
+  );
+
+const Page = () => {
+  return (
+    <SettingsHeader title="Add new user" description="Here you can add a new user">
+      <UsersAddView />
+    </SettingsHeader>
+  );
+};
+
+export default Page;
@@ -0,0 +1,30 @@
+import { _generateMetadata } from "app/_utils";
+
+import UsersListingView from "@calcom/features/ee/users/pages/users-listing-view";
+import SettingsHeader from "@calcom/features/settings/appDir/SettingsHeader";
+import { Button } from "@calcom/ui";
+
+export const generateMetadata = async () =>
+  await _generateMetadata(
+    () => "Users",
+    () => "A list of all the users in your account including their name, title, email and role."
+  );
+
+const Page = () => {
+  return (
+    <SettingsHeader
+      title="Users"
+      description="A list of all the users in your account including their name, title, email and role."
+      CTA={
+        <div className="mt-4 space-x-5 sm:ml-16 sm:mt-0 sm:flex-none">
+          {/* TODO: Add import users functionality */}
+          {/* <Button disabled>Import users</Button> */}
+          <Button href="/settings/admin/users/add">Add user</Button>
+        </div>
+      }>
+      <UsersListingView />
+    </SettingsHeader>
+  );
+};
+
+export default Page;
@@ -0,0 +1,31 @@
+import { _generateMetadata } from "app/_utils";
+import { getFixedT } from "app/_utils";
+import { getServerSession } from "next-auth";
+
+import { AUTH_OPTIONS } from "@calcom/feature-auth/lib/next-auth-options";
+import SettingsHeader from "@calcom/features/settings/appDir/SettingsHeader";
+
+import BillingView from "~/settings/billing/billing-view";
+
+export const generateMetadata = async () =>
+  await _generateMetadata(
+    (t) => t("billing"),
+    (t) => t("manage_billing_description")
+  );
+
+const Page = async () => {
+  const session = await getServerSession(AUTH_OPTIONS);
+
+  const t = await getFixedT(session?.user.locale || "en");
+
+  return (
+    <SettingsHeader
+      title={t("billing")}
+      description={t("manage_billing_description")}
+      borderInShellHeader={true}>
+      <BillingView />
+    </SettingsHeader>
+  );
+};
+
+export default Page;
@@ -0,0 +1,33 @@
+import { getFixedT, _generateMetadata } from "app/_utils";
+import { getServerSession } from "next-auth";
+
+import { AUTH_OPTIONS } from "@calcom/feature-auth/lib/next-auth-options";
+import SettingsHeader from "@calcom/features/settings/appDir/SettingsHeader";
+import { APP_NAME } from "@calcom/lib/constants";
+
+import ApiKeysView from "~/settings/developer/api-keys-view";
+import NewApiKeyButton from "~/settings/developer/components/CreateApiKeyButton";
+
+export const generateMetadata = async () =>
+  await _generateMetadata(
+    (t) => t("api_keys"),
+    (t) => t("create_first_api_key_description", { appName: APP_NAME })
+  );
+
+const Page = async () => {
+  const session = await getServerSession(AUTH_OPTIONS);
+
+  const t = await getFixedT(session?.user.locale || "en");
+
+  return (
+    <SettingsHeader
+      title={t("api_keys")}
+      description={t("create_first_api_key_description", { appName: APP_NAME })}
+      CTA={<NewApiKeyButton />}
+      borderInShellHeader={true}>
+      <ApiKeysView />
+    </SettingsHeader>
+  );
+};
+
+export default Page;
@@ -0,0 +1,36 @@
+import type { PageProps } from "app/_types";
+import { getFixedT, _generateMetadata } from "app/_utils";
+import { getServerSession } from "next-auth";
+
+import { AUTH_OPTIONS } from "@calcom/feature-auth/lib/next-auth-options";
+import SettingsHeader from "@calcom/features/settings/appDir/SettingsHeader";
+import { EditWebhookView } from "@calcom/features/webhooks/pages/webhook-edit-view";
+import { APP_NAME } from "@calcom/lib/constants";
+import { WebhookRepository } from "@calcom/lib/server/repository/webhook";
+
+export const generateMetadata = async () =>
+  await _generateMetadata(
+    (t) => t("webhooks"),
+    (t) => t("add_webhook_description", { appName: APP_NAME })
+  );
+
+const Page = async ({ params }: PageProps) => {
+  const session = await getServerSession(AUTH_OPTIONS);
+
+  const t = await getFixedT(session?.user.locale || "en");
+  const id = typeof params?.id === "string" ? params.id : undefined;
+
+  const webhook = await WebhookRepository.findByWebhookId(id);
+  console.log("This is the webhook", webhook);
+  return (
+    <SettingsHeader
+      title={t("edit_webhook")}
+      description={t("add_webhook_description", { appName: APP_NAME })}
+      borderInShellHeader={true}
+      backButton>
+      <EditWebhookView webhook={webhook} />
+    </SettingsHeader>
+  );
+};
+
+export default Page;
@@ -0,0 +1,31 @@
+import { getFixedT, _generateMetadata } from "app/_utils";
+import { getServerSession } from "next-auth";
+
+import { AUTH_OPTIONS } from "@calcom/feature-auth/lib/next-auth-options";
+import SettingsHeader from "@calcom/features/settings/appDir/SettingsHeader";
+import { NewWebhookView } from "@calcom/features/webhooks/pages/webhook-new-view";
+import { APP_NAME } from "@calcom/lib/constants";
+
+export const generateMetadata = async () =>
+  await _generateMetadata(
+    (t) => t("webhooks"),
+    (t) => t("add_webhook_description", { appName: APP_NAME })
+  );
+
+const Page = async () => {
+  const session = await getServerSession(AUTH_OPTIONS);
+
+  const t = await getFixedT(session?.user.locale || "en");
+
+  return (
+    <SettingsHeader
+      title={t("add_webhook")}
+      description={t("add_webhook_description", { appName: APP_NAME })}
+      borderInShellHeader={true}
+      backButton>
+      <NewWebhookView />
+    </SettingsHeader>
+  );
+};
+
+export default Page;
@@ -0,0 +1,16 @@
+import { _generateMetadata } from "app/_utils";
+
+import { WebhooksViewAppDir } from "@calcom/features/webhooks/pages/webhooks-view";
+import { APP_NAME } from "@calcom/lib/constants";
+
+export const generateMetadata = async () =>
+  await _generateMetadata(
+    (t) => t("webhooks"),
+    (t) => t("add_webhook_description", { appName: APP_NAME })
+  );
+
+const Page = () => {
+  return <WebhooksViewAppDir />;
+};
+
+export default Page;
@@ -0,0 +1,5 @@
+import { WithLayout } from "app/layoutHOC";
+
+import { getLayout } from "@calcom/features/settings/appDir/SettingsLayoutAppDir";
+
+export default WithLayout({ getLayout: getLayout })<"L">;
@@ -0,0 +1,27 @@
+import { _generateMetadata } from "app/_utils";
+import { getFixedT } from "app/_utils";
+import { getServerSession } from "next-auth";
+
+import { AUTH_OPTIONS } from "@calcom/feature-auth/lib/next-auth-options";
+import SettingsHeader from "@calcom/features/settings/appDir/SettingsHeader";
+
+import AppearancePage from "~/settings/my-account/appearance-view";
+
+export const generateMetadata = async () =>
+  await _generateMetadata(
+    (t) => t("appearance"),
+    (t) => t("appearance_description")
+  );
+
+const Page = async () => {
+  const session = await getServerSession(AUTH_OPTIONS);
+  const t = await getFixedT(session?.user.locale || "en");
+
+  return (
+    <SettingsHeader title={t("appearance")} description={t("appearance_description")}>
+      <AppearancePage />
+    </SettingsHeader>
+  );
+};
+
+export default Page;
@@ -0,0 +1,41 @@
+import { _generateMetadata } from "app/_utils";
+import { getFixedT } from "app/_utils";
+import { getServerSession } from "next-auth";
+
+import { AUTH_OPTIONS } from "@calcom/feature-auth/lib/next-auth-options";
+import SettingsHeader from "@calcom/features/settings/appDir/SettingsHeader";
+import { Button } from "@calcom/ui";
+
+import { CalendarListContainer } from "@components/apps/CalendarListContainer";
+
+export const generateMetadata = async () =>
+  await _generateMetadata(
+    (t) => t("calendars"),
+    (t) => t("calendars_description")
+  );
+
+const Page = async () => {
+  const session = await getServerSession(AUTH_OPTIONS);
+  const t = await getFixedT(session?.user.locale || "en");
+
+  const AddCalendarButton = () => {
+    return (
+      <>
+        <Button color="secondary" StartIcon="plus" href="/apps/categories/calendar">
+          {t("add_calendar")}
+        </Button>
+      </>
+    );
+  };
+
+  return (
+    <SettingsHeader
+      title={t("calendars")}
+      description={t("calendars_description")}
+      CTA={<AddCalendarButton />}>
+      <CalendarListContainer />
+    </SettingsHeader>
+  );
+};
+
+export default Page;
@@ -0,0 +1,40 @@
+import { _generateMetadata } from "app/_utils";
+import { getFixedT } from "app/_utils";
+import { getServerSession } from "next-auth";
+
+import { AUTH_OPTIONS } from "@calcom/feature-auth/lib/next-auth-options";
+import SettingsHeader from "@calcom/features/settings/appDir/SettingsHeader";
+import { Button } from "@calcom/ui";
+
+import ConferencingView from "~/settings/my-account/conferencing-view";
+
+export const generateMetadata = async () =>
+  await _generateMetadata(
+    (t) => t("conferencing"),
+    (t) => t("conferencing_description")
+  );
+
+const Page = async () => {
+  const session = await getServerSession(AUTH_OPTIONS);
+  const t = await getFixedT(session?.user.locale || "en");
+
+  const AddConferencingButton = () => {
+    return (
+      <Button color="secondary" StartIcon="plus" href="/apps/categories/conferencing">
+        {t("add")}
+      </Button>
+    );
+  };
+
+  return (
+    <SettingsHeader
+      title={t("conferencing")}
+      description={t("conferencing_description")}
+      CTA={<AddConferencingButton />}
+      borderInShellHeader={true}>
+      <ConferencingView />
+    </SettingsHeader>
+  );
+};
+
+export default Page;
@@ -0,0 +1,27 @@
+import { _generateMetadata } from "app/_utils";
+import { getFixedT } from "app/_utils";
+import { getServerSession } from "next-auth";
+
+import { AUTH_OPTIONS } from "@calcom/feature-auth/lib/next-auth-options";
+import SettingsHeader from "@calcom/features/settings/appDir/SettingsHeader";
+
+import GeneralQueryView from "~/settings/my-account/general-view";
+
+export const generateMetadata = async () =>
+  await _generateMetadata(
+    (t) => t("general"),
+    (t) => t("general_description")
+  );
+
+const Page = async () => {
+  const session = await getServerSession(AUTH_OPTIONS);
+
+  const t = await getFixedT(session?.user.locale || "en");
+  return (
+    <SettingsHeader title={t("general")} description={t("general_description")} borderInShellHeader={true}>
+      <GeneralQueryView />
+    </SettingsHeader>
+  );
+};
+
+export default Page;
@@ -0,0 +1,31 @@
+import { _generateMetadata } from "app/_utils";
+import { getFixedT } from "app/_utils";
+import { getServerSession } from "next-auth";
+
+import { AUTH_OPTIONS } from "@calcom/feature-auth/lib/next-auth-options";
+import SettingsHeader from "@calcom/features/settings/appDir/SettingsHeader";
+import CreateNewOutOfOfficeEntryButton from "@calcom/features/settings/outOfOffice/CreateNewOutOfOfficeEntryButton";
+import { OutOfOfficeEntriesList } from "@calcom/features/settings/outOfOffice/OutOfOfficeEntriesList";
+
+export const generateMetadata = async () =>
+  await _generateMetadata(
+    (t) => t("out_of_office"),
+    (t) => t("out_of_office_description")
+  );
+
+const Page = async () => {
+  const session = await getServerSession(AUTH_OPTIONS);
+
+  const t = await getFixedT(session?.user.locale || "en");
+
+  return (
+    <SettingsHeader
+      title={t("out_of_office")}
+      description={t("out_of_office_description")}
+      CTA={<CreateNewOutOfOfficeEntryButton />}>
+      <OutOfOfficeEntriesList />
+    </SettingsHeader>
+  );
+};
+
+export default Page;
@@ -0,0 +1,31 @@
+import { _generateMetadata } from "app/_utils";
+import { getFixedT } from "app/_utils";
+import { getServerSession } from "next-auth";
+
+import { AUTH_OPTIONS } from "@calcom/feature-auth/lib/next-auth-options";
+import SettingsHeader from "@calcom/features/settings/appDir/SettingsHeader";
+import { APP_NAME } from "@calcom/lib/constants";
+
+import ProfileView from "~/settings/my-account/profile-view";
+
+export const generateMetadata = async () =>
+  await _generateMetadata(
+    (t) => t("profile"),
+    (t) => t("profile_description")
+  );
+
+const Page = async () => {
+  const session = await getServerSession(AUTH_OPTIONS);
+  const t = await getFixedT(session?.user.locale || "en");
+
+  return (
+    <SettingsHeader
+      title={t("profile")}
+      description={t("profile_description", { appName: APP_NAME })}
+      borderInShellHeader={true}>
+      <ProfileView />
+    </SettingsHeader>
+  );
+};
+
+export default Page;
@@ -1,16 +1,12 @@
 import LegacyPage, {
  buildWrappedOnboardTeamMembersPage,
 } from "@pages/settings/organizations/[id]/onboard-members";
-import { type Params } from "app/_types";
+import type { PageProps } from "app/_types";
 import { _generateMetadata } from "app/_utils";
 import { headers } from "next/headers";

 import PageWrapper from "@components/PageWrapperAppDir";

-type PageProps = Readonly<{
-  params: Params;
-}>;
-
 export const generateMetadata = async () =>
  await _generateMetadata(
    (t) => t("invite_organization_admins"),
@@ -0,0 +1,29 @@
+import { getFixedT, _generateMetadata } from "app/_utils";
+import { getServerSession } from "next-auth";
+
+import { AUTH_OPTIONS } from "@calcom/feature-auth/lib/next-auth-options";
+import { AdminAPIView } from "@calcom/features/ee/organizations/pages/settings/admin-api";
+import SettingsHeader from "@calcom/features/settings/appDir/SettingsHeader";
+
+export const generateMetadata = async () =>
+  await _generateMetadata(
+    (t) => `${t("admin")} ${t("api_reference")}`,
+    (t) => t("leverage_our_api")
+  );
+
+const Page = async () => {
+  const session = await getServerSession(AUTH_OPTIONS);
+
+  const t = await getFixedT(session?.user.locale || "en");
+
+  return (
+    <SettingsHeader
+      title={`${t("admin")} ${t("api_reference")}`}
+      description={t("leverage_our_api")}
+      borderInShellHeader={false}>
+      <AdminAPIView />
+    </SettingsHeader>
+  );
+};
+
+export default Page;
@@ -1,5 +1,5 @@
 import { WithLayout } from "app/layoutHOC";

-import { getLayout } from "@calcom/features/settings/layouts/SettingsLayoutAppDir";
+import { getLayout } from "@calcom/features/settings/appDir/SettingsLayoutAppDir";

 export default WithLayout({ getLayout });
@@ -1,5 +1,5 @@
 import { WithLayout } from "app/layoutHOC";

-import { getLayout } from "@calcom/features/settings/layouts/SettingsLayoutAppDir";
+import { getLayout } from "@calcom/features/settings/appDir/SettingsLayoutAppDir";

 export default WithLayout({ getLayout });
@@ -1,6 +1,7 @@
-import Page from "@pages/settings/billing/index";
 import { _generateMetadata } from "app/_utils";

+import Page from "~/settings/billing/billing-view";
+
 export const generateMetadata = async () =>
  await _generateMetadata(
    (t) => t("billing"),
@@ -1,5 +1,5 @@
 import { WithLayout } from "app/layoutHOC";

-import { getLayout } from "@calcom/features/settings/layouts/SettingsLayoutAppDir";
+import { getLayout } from "@calcom/features/settings/appDir/SettingsLayoutAppDir";

 export default WithLayout({ getLayout });
@@ -1,5 +1,5 @@
 import { WithLayout } from "app/layoutHOC";

-import { getLayout } from "@calcom/features/settings/layouts/SettingsLayoutAppDir";
+import { getLayout } from "@calcom/features/settings/appDir/SettingsLayoutAppDir";

 export default WithLayout({ getLayout });
@@ -0,0 +1,5 @@
+import { WithLayout } from "app/layoutHOC";
+
+import { getLayout } from "@calcom/features/settings/appDir/SettingsLayoutAppDir";
+
+export default WithLayout({ getLayout });
@@ -0,0 +1,5 @@
+import { WithLayout } from "app/layoutHOC";
+
+import { getLayout } from "@calcom/features/settings/appDir/SettingsLayoutAppDir";
+
+export default WithLayout({ getLayout });
@@ -0,0 +1,5 @@
+import { WithLayout } from "app/layoutHOC";
+
+import { getLayout } from "@calcom/features/settings/appDir/SettingsLayoutAppDir";
+
+export default WithLayout({ getLayout });
@@ -0,0 +1,5 @@
+import { WithLayout } from "app/layoutHOC";
+
+import { getLayout } from "@calcom/features/settings/appDir/SettingsLayoutAppDir";
+
+export default WithLayout({ getLayout });
@@ -0,0 +1,5 @@
+import { WithLayout } from "app/layoutHOC";
+
+import { getLayout } from "@calcom/features/settings/appDir/SettingsLayoutAppDir";
+
+export default WithLayout({ getLayout });
@@ -0,0 +1,31 @@
+import { _generateMetadata } from "app/_utils";
+import { getFixedT } from "app/_utils";
+import { getServerSession } from "next-auth";
+
+import { AUTH_OPTIONS } from "@calcom/feature-auth/lib/next-auth-options";
+import SettingsHeader from "@calcom/features/settings/appDir/SettingsHeader";
+
+import ProfileImpersonationViewWrapper from "~/settings/security/impersonation-view";
+
+export const generateMetadata = async () =>
+  await _generateMetadata(
+    (t) => t("impersonation"),
+    (t) => t("impersonation_description")
+  );
+
+const Page = async () => {
+  const session = await getServerSession(AUTH_OPTIONS);
+
+  const t = await getFixedT(session?.user.locale || "en");
+
+  return (
+    <SettingsHeader
+      title={t("impersonation")}
+      description={t("impersonation_description")}
+      borderInShellHeader={true}>
+      <ProfileImpersonationViewWrapper />
+    </SettingsHeader>
+  );
+};
+
+export default Page;
@@ -0,0 +1,28 @@
+import { _generateMetadata } from "app/_utils";
+import { getFixedT } from "app/_utils";
+import { getServerSession } from "next-auth";
+
+import { AUTH_OPTIONS } from "@calcom/feature-auth/lib/next-auth-options";
+import SettingsHeader from "@calcom/features/settings/appDir/SettingsHeader";
+
+import PasswordViewWrapper from "~/settings/security/password-view";
+
+export const generateMetadata = async () =>
+  await _generateMetadata(
+    (t) => t("password"),
+    (t) => t("password_description")
+  );
+
+const Page = async () => {
+  const session = await getServerSession(AUTH_OPTIONS);
+
+  const t = await getFixedT(session?.user.locale || "en");
+
+  return (
+    <SettingsHeader title={t("password")} description={t("password_description")} borderInShellHeader={true}>
+      <PasswordViewWrapper />
+    </SettingsHeader>
+  );
+};
+
+export default Page;
@@ -0,0 +1,30 @@
+import { _generateMetadata } from "app/_utils";
+import { getFixedT } from "app/_utils";
+import { getServerSession } from "next-auth";
+
+import { AUTH_OPTIONS } from "@calcom/feature-auth/lib/next-auth-options";
+import SAMLSSO from "@calcom/features/ee/sso/page/user-sso-view";
+import SettingsHeader from "@calcom/features/settings/appDir/SettingsHeader";
+
+export const generateMetadata = async () =>
+  await _generateMetadata(
+    (t) => t("sso_configuration"),
+    (t) => t("sso_configuration_description")
+  );
+
+const Page = async () => {
+  const session = await getServerSession(AUTH_OPTIONS);
+
+  const t = await getFixedT(session?.user.locale || "en");
+
+  return (
+    <SettingsHeader
+      title={t("sso_configuration")}
+      description={t("sso_configuration_description")}
+      borderInShellHeader={true}>
+      <SAMLSSO />
+    </SettingsHeader>
+  );
+};
+
+export default Page;
@@ -0,0 +1,30 @@
+import { _generateMetadata } from "app/_utils";
+import { getFixedT } from "app/_utils";
+import { getServerSession } from "next-auth";
+
+import { AUTH_OPTIONS } from "@calcom/feature-auth/lib/next-auth-options";
+import SettingsHeader from "@calcom/features/settings/appDir/SettingsHeader";
+
+import TwoFactorAuthView from "~/settings/security/two-factor-auth-view";
+
+export const generateMetadata = async () =>
+  await _generateMetadata(
+    (t) => t("two_factor_auth"),
+    (t) => t("add_an_extra_layer_of_security")
+  );
+const Page = async () => {
+  const session = await getServerSession(AUTH_OPTIONS);
+
+  const t = await getFixedT(session?.user.locale || "en");
+
+  return (
+    <SettingsHeader
+      title={t("2fa")}
+      description={t("set_up_two_factor_authentication")}
+      borderInShellHeader={true}>
+      <TwoFactorAuthView />
+    </SettingsHeader>
+  );
+};
+
+export default Page;
@@ -1,6 +1,7 @@
-import Page from "@pages/settings/billing/index";
 import { _generateMetadata } from "app/_utils";

+import Page from "~/settings/billing/billing-view";
+
 export const generateMetadata = async () =>
  await _generateMetadata(
    (t) => t("billing"),
@@ -1,5 +1,5 @@
 import { WithLayout } from "app/layoutHOC";

-import { getLayout } from "@components/auth/layouts/AdminLayoutAppDir";
+import { getLayout } from "@calcom/features/settings/appDir/SettingsLayoutAppDir";

 export default WithLayout({ getLayout })<"L">;
@@ -1,10 +0,0 @@
-import Page from "@pages/settings/admin/apps/index";
-import { _generateMetadata } from "app/_utils";
-
-export const generateMetadata = async () =>
-  await _generateMetadata(
-    (t) => t("apps"),
-    (t) => t("admin_apps_description")
-  );
-
-export default Page;
@@ -1,10 +0,0 @@
-import Page from "@pages/settings/admin/flags";
-import { _generateMetadata } from "app/_utils";
-
-export const generateMetadata = async () =>
-  await _generateMetadata(
-    () => "Feature Flags",
-    () => "Here you can toggle your Cal.com instance features."
-  );
-
-export default Page;
@@ -1,5 +0,0 @@
-import { WithLayout } from "app/layoutHOC";
-
-import { getLayout } from "@components/auth/layouts/AdminLayoutAppDir";
-
-export default WithLayout({ getLayout })<"L">;
@@ -1,10 +0,0 @@
-import Page from "@pages/settings/admin/impersonation";
-import { _generateMetadata } from "app/_utils";
-
-export const generateMetadata = async () =>
-  await _generateMetadata(
-    (t) => t("admin"),
-    (t) => t("impersonation")
-  );
-
-export default Page;
@@ -1,3 +0,0 @@
-import { WithLayout } from "app/layoutHOC";
-
-export default WithLayout({ getLayout: null })<"L">;
@@ -1,10 +0,0 @@
-import Page from "@pages/settings/admin/oAuth/oAuthView";
-import { _generateMetadata } from "app/_utils";
-
-export const generateMetadata = async () =>
-  await _generateMetadata(
-    () => "OAuth",
-    () => "Add new OAuth Clients"
-  );
-
-export default Page;
@@ -1,13 +0,0 @@
-import LegacyPage from "@pages/settings/admin/oAuth/index";
-import { _generateMetadata } from "app/_utils";
-import { WithLayout } from "app/layoutHOC";
-
-import { getLayout } from "@components/auth/layouts/AdminLayoutAppDir";
-
-export const generateMetadata = async () =>
-  await _generateMetadata(
-    () => "OAuth",
-    () => "Add new OAuth Clients"
-  );
-
-export default WithLayout({ getLayout, Page: LegacyPage })<"P">;
@@ -1,5 +0,0 @@
-import { WithLayout } from "app/layoutHOC";
-
-import { getLayout } from "@calcom/features/settings/layouts/SettingsLayoutAppDir";
-
-export default WithLayout({ getLayout })<"L">;
@@ -1,11 +0,0 @@
-import { _generateMetadata } from "app/_utils";
-
-import Page from "@calcom/features/ee/organizations/pages/settings/admin/AdminOrgPage";
-
-export const generateMetadata = async () =>
-  await _generateMetadata(
-    (t) => t("organizations"),
-    (t) => t("orgs_page_description")
-  );
-
-export default Page;
@@ -1,32 +0,0 @@
-import { type Params } from "app/_types";
-import { _generateMetadata } from "app/_utils";
-import { WithLayout } from "app/layoutHOC";
-import { z } from "zod";
-
-import Page from "@calcom/features/ee/users/pages/users-edit-view";
-import { getLayout } from "@calcom/features/settings/layouts/SettingsLayoutAppDir";
-
-const userIdSchema = z.object({ id: z.coerce.number() });
-
-export const generateMetadata = async ({ params }: { params: Params }) => {
-  const input = userIdSchema.safeParse(params);
-  if (!input.success) {
-    return await _generateMetadata(
-      () => "",
-      () => "Here you can edit a current user."
-    );
-  }
-
-  const userId = input.data.id;
-  const { trpc } = await import("@calcom/trpc");
-  const [data] = trpc.viewer.users.get.useSuspenseQuery({ userId });
-  const { user } = data;
-  const title = `Editing user: ${user.username}`;
-
-  return await _generateMetadata(
-    () => title,
-    () => "Here you can edit a current user."
-  );
-};
-
-export default WithLayout({ getLayout, Page })<"P">;
@@ -1,13 +0,0 @@
-import { _generateMetadata } from "app/_utils";
-import { WithLayout } from "app/layoutHOC";
-
-import Page from "@calcom/features/ee/users/pages/users-add-view";
-import { getLayout } from "@calcom/features/settings/layouts/SettingsLayoutAppDir";
-
-export const generateMetadata = async () =>
-  await _generateMetadata(
-    () => "Add new user",
-    () => "Here you can add a new user."
-  );
-
-export default WithLayout({ getLayout, Page })<"P">;
@@ -1,13 +0,0 @@
-import { _generateMetadata } from "app/_utils";
-import { WithLayout } from "app/layoutHOC";
-
-import Page from "@calcom/features/ee/users/pages/users-listing-view";
-import { getLayout } from "@calcom/features/settings/layouts/SettingsLayoutAppDir";
-
-export const generateMetadata = async () =>
-  await _generateMetadata(
-    () => "Users",
-    () => "A list of all the users in your account including their name, title, email and role."
-  );
-
-export default WithLayout({ getLayout, Page })<"P">;
@@ -1,10 +0,0 @@
-import Page from "@pages/settings/my-account/appearance";
-import { _generateMetadata } from "app/_utils";
-
-export const generateMetadata = async () =>
-  await _generateMetadata(
-    (t) => t("appearance"),
-    (t) => t("appearance_description")
-  );
-
-export default Page;
@@ -1,10 +0,0 @@
-import Page from "@pages/settings/my-account/calendars";
-import { _generateMetadata } from "app/_utils";
-
-export const generateMetadata = async () =>
-  await _generateMetadata(
-    (t) => t("calendars"),
-    (t) => t("calendars_description")
-  );
-
-export default Page;
@@ -1,10 +0,0 @@
-import Page from "@pages/settings/my-account/conferencing";
-import { _generateMetadata } from "app/_utils";
-
-export const generateMetadata = async () =>
-  await _generateMetadata(
-    (t) => t("conferencing"),
-    (t) => t("conferencing_description")
-  );
-
-export default Page;
@@ -1,10 +0,0 @@
-import Page from "@pages/settings/my-account/general";
-import { _generateMetadata } from "app/_utils";
-
-export const generateMetadata = async () =>
-  await _generateMetadata(
-    (t) => t("general"),
-    (t) => t("general_description")
-  );
-
-export default Page;
@@ -1,5 +0,0 @@
-import { WithLayout } from "app/layoutHOC";
-
-import { getLayout } from "@calcom/features/settings/layouts/SettingsLayoutAppDir";
-
-export default WithLayout({ getLayout });
@@ -1,10 +0,0 @@
-import Page from "@pages/settings/my-account/profile";
-import { _generateMetadata } from "app/_utils";
-
-export const generateMetadata = async () =>
-  await _generateMetadata(
-    (t) => t("profile"),
-    (t) => t("profile_description")
-  );
-
-export default Page;
@@ -1,5 +0,0 @@
-import { WithLayout } from "app/layoutHOC";
-
-import { getLayout } from "@calcom/features/settings/layouts/SettingsLayoutAppDir";
-
-export default WithLayout({ getLayout });
@@ -1,5 +0,0 @@
-import { WithLayout } from "app/layoutHOC";
-
-import { getLayout } from "@calcom/features/settings/layouts/SettingsLayoutAppDir";
-
-export default WithLayout({ getLayout });
@@ -1,5 +0,0 @@
-import { WithLayout } from "app/layoutHOC";
-
-import { getLayout } from "@calcom/features/settings/layouts/SettingsLayoutAppDir";
-
-export default WithLayout({ getLayout });
@@ -1,5 +0,0 @@
-import { WithLayout } from "app/layoutHOC";
-
-import { getLayout } from "@calcom/features/settings/layouts/SettingsLayoutAppDir";
-
-export default WithLayout({ getLayout });
@@ -1,5 +0,0 @@
-import { WithLayout } from "app/layoutHOC";
-
-import { getLayout } from "@calcom/features/settings/layouts/SettingsLayoutAppDir";
-
-export default WithLayout({ getLayout });
@@ -1,5 +0,0 @@
-import { WithLayout } from "app/layoutHOC";
-
-import { getLayout } from "@calcom/features/settings/layouts/SettingsLayoutAppDir";
-
-export default WithLayout({ getLayout });
@@ -1,5 +0,0 @@
-import { WithLayout } from "app/layoutHOC";
-
-import { getLayout } from "@calcom/features/settings/layouts/SettingsLayoutAppDir";
-
-export default WithLayout({ getLayout });
@@ -1,5 +0,0 @@
-import { WithLayout } from "app/layoutHOC";
-
-import { getLayout } from "@calcom/features/settings/layouts/SettingsLayoutAppDir";
-
-export default WithLayout({ getLayout });
@@ -1,5 +0,0 @@
-import { WithLayout } from "app/layoutHOC";
-
-import { getLayout } from "@calcom/features/settings/layouts/SettingsLayoutAppDir";
-
-export default WithLayout({ getLayout });
@@ -1,5 +0,0 @@
-import { WithLayout } from "app/layoutHOC";
-
-import { getLayout } from "@calcom/features/settings/layouts/SettingsLayoutAppDir";
-
-export default WithLayout({ getLayout });
@@ -1,10 +0,0 @@
-import Page from "@pages/settings/security/impersonation";
-import { _generateMetadata } from "app/_utils";
-
-export const generateMetadata = async () =>
-  await _generateMetadata(
-    (t) => t("impersonation"),
-    (t) => t("impersonation_description")
-  );
-
-export default Page;
@@ -1,5 +0,0 @@
-import { WithLayout } from "app/layoutHOC";
-
-import { getLayout } from "@calcom/features/settings/layouts/SettingsLayoutAppDir";
-
-export default WithLayout({ getLayout });
@@ -1,10 +0,0 @@
-import Page from "@pages/settings/security/password";
-import { _generateMetadata } from "app/_utils";
-
-export const generateMetadata = async () =>
-  await _generateMetadata(
-    (t) => t("password"),
-    (t) => t("password_description")
-  );
-
-export default Page;
@@ -1,5 +0,0 @@
-import { WithLayout } from "app/layoutHOC";
-
-import { getLayout } from "@calcom/features/settings/layouts/SettingsLayoutAppDir";
-
-export default WithLayout({ getLayout });
@@ -1,11 +0,0 @@
-import { _generateMetadata } from "app/_utils";
-
-import Page from "@calcom/features/ee/sso/page/user-sso-view";
-
-export const generateMetadata = async () =>
-  await _generateMetadata(
-    (t) => t("sso_configuration"),
-    (t) => t("sso_configuration_description")
-  );
-
-export default Page;
@@ -1,5 +0,0 @@
-import { WithLayout } from "app/layoutHOC";
-
-import { getLayout } from "@calcom/features/settings/layouts/SettingsLayoutAppDir";
-
-export default WithLayout({ getLayout });
@@ -1,10 +0,0 @@
-import Page from "@pages/settings/security/two-factor-auth";
-import { _generateMetadata } from "app/_utils";
-
-export const generateMetadata = async () =>
-  await _generateMetadata(
-    (t) => t("two_factor_auth"),
-    (t) => t("add_an_extra_layer_of_security")
-  );
-
-export default Page;
--- a/Show More
+++ b/Show More