chore: Release v4.4.7 (#16574)

Co-authored-by: Anik Dhabal Babu <81948346+anikdhabal@users.noreply.github.com>

.env.example

@@ -334,6 +334,8 @@ AB_TEST_BUCKET_PROBABILITY=50
 # whether we redirect to the future/event-types from event-types or not
 APP_ROUTER_EVENT_TYPES_ENABLED=0
 APP_ROUTER_SETTINGS_ADMIN_ENABLED=0
+APP_ROUTER_SETTINGS_PLATFORM_ENABLED=0
+APP_ROUTER_SETTINGS_ORG_ENABLED=0
 APP_ROUTER_APPS_INSTALLED_CATEGORY_ENABLED=0
 APP_ROUTER_APPS_SLUG_ENABLED=0
 APP_ROUTER_APPS_SLUG_SETUP_ENABLED=0
@@ -357,6 +359,10 @@ APP_ROUTER_AUTH_SAML_ENABLED=0
 APP_ROUTER_AUTH_ERROR_ENABLED=0
 APP_ROUTER_AUTH_PLATFORM_ENABLED=0
 APP_ROUTER_AUTH_OAUTH2_ENABLED=0
+APP_ROUTER_MORE_ENABLED=0
+APP_ROUTER_MAINTENANCE_ENABLED=0
+APP_ROUTER_UPGRADE_ENABLED=0
+APP_ROUTER_CONNECT_AND_JOIN_ENABLED=0
 
 # disable setry server source maps
 SENTRY_DISABLE_SERVER_WEBPACK_PLUGIN=1

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,39 @@
+---
+name: Bug report
+about: Report any issues with the platform
+title: ""
+labels: ["🐛 bug"]
+assignees: ""
+---
+
+Found a bug? Please fill out the sections below. 👍
+
+### Issue Summary
+
+A summary of the issue. This needs to be a clear detailed-rich summary.
+
+### Steps to Reproduce
+
+1. (for example) Went to ...
+2. Clicked on...
+3. ...
+
+Any other relevant information. For example, why do you consider this a bug and what did you expect to happen instead?
+
+### Actual Results
+
+- What's happening right now that is different from what is expected
+
+### Expected Results
+
+- This is an ideal result that the system should get after the tests are performed
+
+### Technical details
+
+- Browser version, screen recording, console logs, network requests: You can make a recording with [Bird Eats Bug](https://birdeatsbug.com/).
+- Node.js version
+- Anything else that you think could be an issue.
+
+### Evidence
+
+- How was this tested? This is quite mandatory in terms of bugs. Providing evidence of your testing with screenshots or/and videos is an amazing way to prove the bug and a troubleshooting chance to find the solution.

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -1,49 +0,0 @@
----
-name: Bug report
-about: Please make sure you have checked for any duplicate issues
-title: ""
-labels: ["🐛 bug"]
-assignees: ""
----
-
-### Is your proposal related to a problem?
-
-<!--
-  Provide a clear and concise description of what the problem is.
-  For example, "I'm always frustrated when..."
--->
-
-(Write your answer here.)
-
-### Describe the solution you'd like
-
-<!--
-  Provide a clear and concise description of what you want to happen.
--->
-
-(Describe your proposed solution here.)
-
-### Describe alternatives you've considered
-
-<!--
-  Let us know about other solutions you've tried or researched.
--->
-
-(Write your answer here.)
-
-### Additional context
-
-<!--
-  Is there anything else you can add about the proposal?
-  You might want to link to related issues here, if you haven't already.
--->
-
-(Write your answer here.)
-
-### Requirement/Document
-
-<!--
-  Is there any type of document that could support that feature?
--->
-
-(Share it here.)

apps/api/v1/lib/validations/event-type.ts

@@ -168,6 +168,7 @@ export const schemaEventTypeReadPublic = EventType.pick({
     metadata: jsonSchema.nullable(),
     customInputs: customInputSchema.array().optional(),
     link: z.string().optional(),
+    hashedLink: z.object({ link: z.string() }).optional().nullable(),
     bookingFields: eventTypeBookingFields.optional().nullable(),
   })
 );

apps/api/v1/pages/api/event-types/[id]/_get.ts

@@ -51,6 +51,7 @@ export async function getHandler(req: NextApiRequest) {
     where: { id },
     include: {
       customInputs: true,
+      hashedLink: { select: { link: true } },
       team: { select: { slug: true } },
       hosts: { select: { userId: true, isFixed: true } },
       owner: { select: { username: true, id: true } },

apps/api/v1/pages/api/event-types/_get.ts

@@ -56,6 +56,7 @@ async function getHandler(req: NextApiRequest) {
     },
     include: {
       customInputs: true,
+      hashedLink: { select: { link: true } },
       team: { select: { slug: true } },
       hosts: { select: { userId: true, isFixed: true } },
       owner: { select: { username: true, id: true } },

apps/api/v2/src/ee/provider/outputs/verify-client.output.ts

@@ -1,10 +1,20 @@
 import { ApiProperty } from "@nestjs/swagger";
-import { IsEnum } from "class-validator";
+import { IsEnum, IsNumber, IsString } from "class-validator";
 
 import { SUCCESS_STATUS, ERROR_STATUS } from "@calcom/platform-constants";
 
+export class ProviderVerifyClientData {
+  @IsString()
+  clientId!: string;
+  @IsNumber()
+  organizationId!: number;
+  @IsString()
+  name!: string;
+}
 export class ProviderVerifyClientOutput {
   @ApiProperty({ example: SUCCESS_STATUS, enum: [SUCCESS_STATUS, ERROR_STATUS] })
   @IsEnum([SUCCESS_STATUS, ERROR_STATUS])
   status!: typeof SUCCESS_STATUS | typeof ERROR_STATUS;
+
+  data!: ProviderVerifyClientData;
 }

apps/api/v2/src/ee/provider/provider.controller.ts

@@ -40,6 +40,11 @@ export class CalProviderController {
 
     return {
       status: SUCCESS_STATUS,
+      data: {
+        clientId: oAuthClient.id,
+        organizationId: oAuthClient.organizationId,
+        name: oAuthClient.name,
+      },
     };
   }
 

apps/api/v2/swagger/documentation.json

@@ -9313,6 +9313,25 @@
           "status"
         ]
       },
+      "ProviderVerifyClientData": {
+        "type": "object",
+        "properties": {
+          "clientId": {
+            "type": "string"
+          },
+          "organizationId": {
+            "type": "number"
+          },
+          "name": {
+            "type": "string"
+          }
+        },
+        "required": [
+          "clientId",
+          "organizationId",
+          "name"
+        ]
+      },
       "ProviderVerifyClientOutput": {
         "type": "object",
         "properties": {
@@ -9323,10 +9342,14 @@
               "success",
               "error"
             ]
+          },
+          "data": {
+            "$ref": "#/components/schemas/ProviderVerifyClientData"
           }
         },
         "required": [
-          "status"
+          "status",
+          "data"
         ]
       },
       "ProviderVerifyAccessTokenOutput": {

apps/web/abTest/middlewareFactory.ts

@@ -8,6 +8,8 @@ import { FUTURE_ROUTES_ENABLED_COOKIE_NAME, FUTURE_ROUTES_OVERRIDE_COOKIE_NAME }
 const ROUTES: [URLPattern, boolean][] = [
   ["/event-types", process.env.APP_ROUTER_EVENT_TYPES_ENABLED === "1"] as const,
   ["/settings/admin/:path*", process.env.APP_ROUTER_SETTINGS_ADMIN_ENABLED === "1"] as const,
+  ["/settings/platform/:path*", process.env.APP_ROUTER_SETTINGS_PLATFORM_ENABLED === "1"] as const,
+  ["/settings/organizations/:path*", process.env.APP_ROUTER_SETTINGS_ORG_ENABLED === "1"] as const,
   ["/apps/installed/:category", process.env.APP_ROUTER_APPS_INSTALLED_CATEGORY_ENABLED === "1"] as const,
   ["/apps/:slug", process.env.APP_ROUTER_APPS_SLUG_ENABLED === "1"] as const,
   ["/apps/:slug/setup", process.env.APP_ROUTER_APPS_SLUG_SETUP_ENABLED === "1"] as const,
@@ -28,6 +30,10 @@ const ROUTES: [URLPattern, boolean][] = [
   ["/bookings/:status", process.env.APP_ROUTER_BOOKINGS_STATUS_ENABLED === "1"] as const,
   ["/video/:path*", process.env.APP_ROUTER_VIDEO_ENABLED === "1"] as const,
   ["/teams", process.env.APP_ROUTER_TEAMS_ENABLED === "1"] as const,
+  ["/more", process.env.APP_ROUTER_MORE_ENABLED === "1"] as const,
+  ["/maintenance", process.env.APP_ROUTER_MAINTENANCE_ENABLED === "1"] as const,
+  ["/upgrade", process.env.APP_ROUTER_UPGRADE_ENABLED === "1"] as const,
+  ["/connect-and-join", process.env.APP_ROUTER_CONNECT_AND_JOIN_ENABLED === "1"] as const,
   ["/availability", process.env.APP_ROUTER_AVAILABILITY_ENABLED === "1"] as const,
 ].map(([pathname, enabled]) => [
   new URLPattern({

apps/web/app/_utils.tsx

@@ -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);

apps/web/app/future/apps/[slug]/[...pages]/page.tsx

@@ -1,46 +1,17 @@
-import LegacyPage, { getLayout } from "@pages/apps/[slug]/[...pages]";
-import type { PageProps, SearchParams } from "app/_types";
+import { withAppDirSsr } from "app/WithAppDirSsr";
+import type { SearchParams } from "app/_types";
 import { _generateMetadata } from "app/_utils";
-import type { GetServerSidePropsContext } from "next";
+import { WithLayout } from "app/layoutHOC";
+import type { GetServerSidePropsResult } from "next";
 import type { Params } from "next/dist/shared/lib/router/utils/route-matcher";
 import { cookies, headers } from "next/headers";
-import { notFound, redirect } from "next/navigation";
+import { notFound } from "next/navigation";
 import z from "zod";
 
-import { getAppWithMetadata } from "@calcom/app-store/_appRegistry";
-import RoutingFormsRoutingConfig, {
-  serverSidePropsConfig,
-} from "@calcom/app-store/routing-forms/pages/app-routing.config";
-import TypeformRoutingConfig from "@calcom/app-store/typeform/pages/app-routing.config";
-import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
-import prisma from "@calcom/prisma";
-import type { AppGetServerSideProps } from "@calcom/types/AppGetServerSideProps";
-
-import type { AppProps } from "@lib/app-providers";
+import { getServerSideProps } from "@lib/apps/[slug]/[...pages]/getServerSideProps";
 import { buildLegacyCtx } from "@lib/buildLegacyCtx";
 
-import PageWrapper from "@components/PageWrapperAppDir";
-
-import { ssrInit } from "@server/lib/ssr";
-
-type AppPageType = {
-  getServerSideProps: AppGetServerSideProps;
-  // A component than can accept any properties
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  default: ((props: any) => JSX.Element) &
-    Pick<AppProps["Component"], "isBookingPage" | "getLayout" | "PageWrapper">;
-};
-
-type Found = {
-  notFound: false;
-  Component: AppPageType["default"];
-  getServerSideProps: AppPageType["getServerSideProps"];
-};
-
-const AppsRouting = {
-  "routing-forms": RoutingFormsRoutingConfig,
-  typeform: TypeformRoutingConfig,
-};
+import LegacyPage, { getLayout } from "~/apps/[slug]/[...pages]/pages-view";
 
 const paramsSchema = z.object({
   slug: z.string(),
@@ -60,127 +31,22 @@ export const generateMetadata = async ({
     return notFound();
   }
 
-  const mainPage = p.data.pages[0];
-
-  if (mainPage === "forms") {
-    return await _generateMetadata(
-      () => `Forms`,
-      () => ""
-    );
-  }
-
   const legacyContext = buildLegacyCtx(headers(), cookies(), params, searchParams);
-  const { form } = await getPageProps(legacyContext);
+  const data = await getData(legacyContext);
+  const form = "form" in data ? (data.form as { name?: string; description?: string }) : null;
+  const formName = form?.name ?? "Forms";
+  const formDescription = form?.description ?? "";
 
   return await _generateMetadata(
-    () => `${form.name}`,
-    () => form.description
+    () => formName,
+    () => formDescription
   );
 };
 
-function getRoute(appName: string, pages: string[]) {
-  const routingConfig = AppsRouting[appName as keyof typeof AppsRouting] as Record<string, AppPageType>;
+const getData = withAppDirSsr<GetServerSidePropsResult<any>>(getServerSideProps);
 
-  if (!routingConfig) {
-    notFound();
-  }
-
-  const mainPage = pages[0];
-  const appPage = routingConfig.layoutHandler || (routingConfig[mainPage] as AppPageType);
-
-  const getServerSidePropsHandler = serverSidePropsConfig[mainPage];
-
-  if (!appPage) {
-    notFound();
-  }
-
-  return {
-    notFound: false,
-    Component: appPage.default,
-    ...appPage,
-    getServerSideProps: getServerSidePropsHandler,
-  } as Found;
-}
-
-const getPageProps = async ({ params, query, req }: GetServerSidePropsContext) => {
-  const p = paramsSchema.safeParse(params);
-
-  if (!p.success) {
-    return notFound();
-  }
-
-  const { slug: appName, pages } = p.data;
-
-  const route = getRoute(appName, pages);
-
-  if (route.notFound) {
-    return route;
-  }
-
-  if (route.getServerSideProps) {
-    // TODO: Document somewhere that right now it is just a convention that filename should have appPages in it's name.
-    // appPages is actually hardcoded here and no matter the fileName the same variable would be used.
-    // We can write some validation logic later on that ensures that [...appPages].tsx file exists
-    params!.appPages = pages.slice(1);
-
-    const ctx = { req, params, query };
-
-    const session = await getServerSession({ req });
-    const user = session?.user;
-    const app = await getAppWithMetadata({ slug: appName });
-
-    if (!app) {
-      notFound();
-    }
-
-    const result = await route.getServerSideProps(
-      {
-        ...ctx,
-        params: {
-          ...ctx.params,
-          appPages: pages.slice(1),
-        },
-      } as GetServerSidePropsContext<{
-        slug: string;
-        pages: string[];
-        appPages: string[];
-      }>,
-      prisma,
-      user,
-      ssrInit
-    );
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    //@ts-ignore
-
-    if (result.notFound) {
-      notFound();
-    }
-
-    if (result.redirect) {
-      redirect(result.redirect.destination);
-    }
-
-    return {
-      appName,
-      appUrl: app.simplePath || `/apps/${appName}`,
-      ...result.props,
-    };
-  } else {
-    return {
-      appName,
-    };
-  }
-};
-
-export default async function Page({ params, searchParams }: PageProps) {
-  const h = headers();
-  const nonce = h.get("x-nonce") ?? undefined;
-
-  const legacyContext = buildLegacyCtx(h, cookies(), params, searchParams);
-  const props = await getPageProps(legacyContext);
-  return (
-    <PageWrapper getLayout={getLayout} requiresLicense={false} nonce={nonce} themeBasis={null} {...props}>
-      <LegacyPage {...props} />
-    </PageWrapper>
-  );
-}
+export default WithLayout({
+  getLayout,
+  getData,
+  Page: LegacyPage,
+});

apps/web/app/future/apps/[slug]/page.tsx

@@ -1,21 +1,21 @@
-import Page from "@pages/apps/[slug]/index";
 import { Prisma } from "@prisma/client";
 import { withAppDirSsg } from "app/WithAppDirSsg";
-import type { PageProps } from "app/_types";
+import type { PageProps as _PageProps } from "app/_types";
 import { _generateMetadata } from "app/_utils";
 import { WithLayout } from "app/layoutHOC";
-import type { InferGetStaticPropsType } from "next";
 import { cookies, headers } from "next/headers";
 
-import prisma from "@calcom/prisma";
+import { AppRepository } from "@calcom/lib/server/repository/app";
 
 import { getStaticProps } from "@lib/apps/[slug]/getStaticProps";
 import { buildLegacyCtx } from "@lib/buildLegacyCtx";
 
-type Y = InferGetStaticPropsType<typeof getStaticProps>;
-const getData = withAppDirSsg<Y>(getStaticProps);
+import type { PageProps } from "~/apps/[slug]/slug-view";
+import Page from "~/apps/[slug]/slug-view";
 
-export const generateMetadata = async ({ params, searchParams }: PageProps) => {
+const getData = withAppDirSsg<PageProps>(getStaticProps);
+
+export const generateMetadata = async ({ params, searchParams }: _PageProps) => {
   const legacyContext = buildLegacyCtx(headers(), cookies(), params, searchParams);
   const res = await getData(legacyContext);
 
@@ -27,7 +27,7 @@ export const generateMetadata = async ({ params, searchParams }: PageProps) => {
 
 export const generateStaticParams = async () => {
   try {
-    const appStore = await prisma.app.findMany({ select: { slug: true } });
+    const appStore = await AppRepository.findAppStore();
     return appStore.map(({ slug }) => ({ slug }));
   } catch (e: unknown) {
     if (e instanceof Prisma.PrismaClientInitializationError) {

apps/web/app/future/apps/[slug]/setup/page.tsx

@@ -1,20 +1,19 @@
-import Page from "@pages/apps/[slug]/setup";
 import { withAppDirSsr } from "app/WithAppDirSsr";
+import type { PageProps as _PageProps } from "app/_types";
 import { _generateMetadata } from "app/_utils";
 import { WithLayout } from "app/layoutHOC";
-import type { InferGetServerSidePropsType } from "next";
 
 import { getServerSideProps } from "@calcom/app-store/_pages/setup/_getServerSideProps";
 
-export const generateMetadata = async ({ params }: { params: Record<string, string | string[]> }) => {
+import Page, { type PageProps } from "~/apps/[slug]/setup/setup-view";
+
+export const generateMetadata = async ({ params }: _PageProps) => {
   return await _generateMetadata(
     () => `${params.slug}`,
     () => ""
   );
 };
 
-type T = InferGetServerSidePropsType<typeof getServerSideProps>;
-
-const getData = withAppDirSsr<T>(getServerSideProps);
+const getData = withAppDirSsr<PageProps>(getServerSideProps);
 
 export default WithLayout({ getLayout: null, Page, getData });

apps/web/app/future/apps/categories/[category]/page.tsx

@@ -1,18 +1,18 @@
-import CategoryPage, { type PageProps } from "@pages/apps/categories/[category]";
 import { withAppDirSsg } from "app/WithAppDirSsg";
 import { _generateMetadata } from "app/_utils";
 import { WithLayout } from "app/layoutHOC";
 
-import { APP_NAME } from "@calcom/lib/constants";
 import { AppCategories } from "@calcom/prisma/enums";
 import { isPrismaAvailableCheck } from "@calcom/prisma/is-prisma-available-check";
 
 import { getStaticProps } from "@lib/apps/categories/[category]/getStaticProps";
 
+import CategoryPage, { type PageProps } from "~/apps/categories/[category]/category-view";
+
 export const generateMetadata = async () => {
   return await _generateMetadata(
-    () => `${APP_NAME}`,
-    () => ""
+    () => "Apps Store",
+    () => "Connecting people, technology and the workplace."
   );
 };
 

apps/web/app/future/apps/categories/page.tsx

@@ -1,14 +1,15 @@
-import Page from "@pages/apps/categories/index";
 import { withAppDirSsr } from "app/WithAppDirSsr";
 import { _generateMetadata } from "app/_utils";
 import { WithLayout } from "app/layoutHOC";
 
 import { getServerSideProps } from "@lib/apps/categories/getServerSideProps";
 
+import Page from "~/apps/categories/categories-view";
+
 export const generateMetadata = async () => {
   return await _generateMetadata(
-    () => `Categories`,
-    () => ""
+    () => "Apps Store",
+    () => "Connecting people, technology and the workplace."
   );
 };
 

apps/web/app/future/apps/installation/[[...step]]/page.tsx

@@ -0,0 +1,25 @@
+import { withAppDirSsr } from "app/WithAppDirSsr";
+import type { PageProps } from "app/_types";
+import { _generateMetadata } from "app/_utils";
+import { WithLayout } from "app/layoutHOC";
+import { cookies, headers } from "next/headers";
+
+import { getServerSideProps } from "@lib/apps/installation/[[...step]]/getServerSideProps";
+import { buildLegacyCtx } from "@lib/buildLegacyCtx";
+
+import type { OnboardingPageProps } from "~/apps/installation/[[...step]]/step-view";
+import Page from "~/apps/installation/[[...step]]/step-view";
+
+export const generateMetadata = async ({ params, searchParams }: PageProps) => {
+  const legacyCtx = buildLegacyCtx(headers(), cookies(), params, searchParams);
+
+  const { appMetadata } = await getData(legacyCtx);
+  return await _generateMetadata(
+    (t) => `${t("install")} ${appMetadata?.name ?? ""}`,
+    () => ""
+  );
+};
+
+const getData = withAppDirSsr<OnboardingPageProps>(getServerSideProps);
+
+export default WithLayout({ getLayout: null, getData, Page });

apps/web/app/future/apps/installed/[category]/page.tsx

@@ -1,17 +1,18 @@
-import Page from "@pages/apps/installed/[category]";
 import { withAppDirSsr } from "app/WithAppDirSsr";
 import { _generateMetadata } from "app/_utils";
 import { WithLayout } from "app/layoutHOC";
 
-import { getServerSideProps } from "@lib/apps/installed/[category]/getServerSideProps";
+import { getServerSidePropsAppDir } from "@lib/apps/installed/[category]/getServerSideProps";
+
+import Page from "~/apps/installed/[category]/installed-category-view";
 
 export const generateMetadata = async () => {
   return await _generateMetadata(
-    (t) => `${t("installed_apps")}`,
+    (t) => t("installed_apps"),
     (t) => t("manage_your_connected_apps")
   );
 };
 
-const getData = withAppDirSsr(getServerSideProps);
+const getData = withAppDirSsr(getServerSidePropsAppDir);
 
 export default WithLayout({ getLayout: null, getData, Page });

apps/web/app/future/apps/installed/page.tsx

@@ -0,0 +1,7 @@
+import { redirect } from "next/navigation";
+
+const Page = () => {
+  redirect("/apps/installed/calendar");
+};
+
+export default Page;

apps/web/app/future/apps/page.tsx

@@ -1,18 +1,20 @@
-import AppsPage from "@pages/apps";
 import { withAppDirSsr } from "app/WithAppDirSsr";
 import { _generateMetadata } from "app/_utils";
 import { WithLayout } from "app/layoutHOC";
 
-import { getLayout } from "@calcom/features/MainLayoutAppDir";
-import { APP_NAME } from "@calcom/lib/constants";
-
 import { getServerSideProps } from "@lib/apps/getServerSideProps";
 
+import AppsPage, { LayoutWrapper } from "~/apps/apps-view";
+
 export const generateMetadata = async () => {
   return await _generateMetadata(
-    () => `Apps | ${APP_NAME}`,
-    () => ""
+    (t) => t("app_store"),
+    (t) => t("app_store_description")
   );
 };
 
-export default WithLayout({ getLayout, getData: withAppDirSsr(getServerSideProps), Page: AppsPage });
+export default WithLayout({
+  getLayout: LayoutWrapper,
+  getData: withAppDirSsr(getServerSideProps),
+  Page: AppsPage,
+});

apps/web/app/future/auth/logout/page.tsx

@@ -1,11 +1,10 @@
 import type { PageProps } from "app/_types";
 import { _generateMetadata } from "app/_utils";
+import { WithLayout } from "app/layoutHOC";
 import { cookies, headers } from "next/headers";
 
 import { buildLegacyCtx } from "@lib/buildLegacyCtx";
 
-import PageWrapper from "@components/PageWrapperAppDir";
-
 import { ssrInit } from "@server/lib/ssr";
 
 import Logout from "~/auth/logout-view";
@@ -20,7 +19,6 @@ export const generateMetadata = async () => {
 const Page = async ({ params, searchParams }: PageProps) => {
   // cookie will be cleared in `/apps/web/middleware.ts`
   const h = headers();
-  const nonce = h.get("x-nonce") ?? undefined;
   const context = buildLegacyCtx(h, cookies(), params, searchParams);
   const ssr = await ssrInit(context);
   const props = {
@@ -28,11 +26,7 @@ const Page = async ({ params, searchParams }: PageProps) => {
     query: context.query,
   };
 
-  return (
-    <PageWrapper requiresLicense={false} getLayout={null} nonce={nonce} themeBasis={null}>
-      <Logout {...props} />
-    </PageWrapper>
-  );
+  return <Logout {...props} />;
 };
 
-export default Page;
+export default WithLayout({ getLayout: null, ServerPage: Page })<"P">;

apps/web/app/future/connect-and-join/page.tsx

@@ -1,4 +1,13 @@
-import LegacyPage from "@pages/connect-and-join";
+import { _generateMetadata } from "app/_utils";
 import { WithLayout } from "app/layoutHOC";
 
+import LegacyPage from "~/connect-and-join/connect-and-join-view";
+
+export const generateMetadata = async () => {
+  return await _generateMetadata(
+    () => "Connect and Join",
+    () => ""
+  );
+};
+
 export default WithLayout({ getLayout: null, Page: LegacyPage })<"P">;

apps/web/app/future/maintenance/page.tsx

@@ -1,12 +1,13 @@
-import LegacyPage from "@pages/maintenance";
 import { _generateMetadata } from "app/_utils";
 import { WithLayout } from "app/layoutHOC";
 
 import { APP_NAME } from "@calcom/lib/constants";
 
+import LegacyPage from "~/maintenance/maintenance-view";
+
 export const generateMetadata = async () =>
   await _generateMetadata(
-    (t) => `${t("under_maintenance")}`,
+    (t) => t("under_maintenance"),
     (t) => t("under_maintenance_description", { appName: APP_NAME })
   );
 

apps/web/app/future/more/page.tsx

@@ -1,4 +1,13 @@
-import Page from "@pages/more";
+import { _generateMetadata } from "app/_utils";
 import { WithLayout } from "app/layoutHOC";
 
+import Page from "~/more/more-page-view";
+
+export const generateMetadata = async () => {
+  return await _generateMetadata(
+    () => "More",
+    () => ""
+  );
+};
+
 export default WithLayout({ getLayout: null, Page })<"P">;

apps/web/app/future/reschedule/[uid]/embed/page.tsx

@@ -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);

apps/web/app/future/reschedule/[uid]/page.tsx

@@ -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) => {

apps/web/app/future/routing-forms/page.tsx

@@ -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);

apps/web/app/future/settings/(admin)/admin/apps/[category]/page.tsx

@@ -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;

apps/web/app/future/settings/(admin)/admin/apps/page.tsx

@@ -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;

apps/web/app/future/settings/(admin)/admin/flags/page.tsx

@@ -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;

apps/web/app/future/settings/(admin)/admin/impersonation/page.tsx

@@ -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;

apps/web/app/future/settings/(admin)/admin/lockedSMS/page.tsx

@@ -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;

apps/web/app/future/settings/(admin)/admin/oAuth/page.tsx

@@ -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;

apps/web/app/future/settings/(admin)/admin/organizations/[id]/edit/page.tsx

@@ -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;

apps/web/app/future/settings/(admin)/admin/organizations/page.tsx

@@ -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;

apps/web/app/future/settings/(admin)/admin/page.tsx

@@ -10,4 +10,4 @@ export const generateMetadata = async () =>
     () => "admin_description"
   );
 
-export default WithLayout({ getLayout, Page: LegacyPage })<"P">;
+export default WithLayout({ getServerLayout: getLayout, Page: LegacyPage })<"P">;

apps/web/app/future/settings/(admin)/admin/users/[id]/edit/page.tsx

@@ -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;

apps/web/app/future/settings/(admin)/admin/users/add/page.tsx

@@ -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;

apps/web/app/future/settings/(admin)/admin/users/page.tsx

@@ -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;

apps/web/app/future/settings/(admin)/layout.tsx

@@ -2,4 +2,4 @@ import { WithLayout } from "app/layoutHOC";
 
 import { getLayout } from "@components/auth/layouts/AdminLayoutAppDir";
 
-export default WithLayout({ getLayout })<"L">;
+export default WithLayout({ getServerLayout: getLayout })<"L">;

apps/web/app/future/settings/(settings)/billing/page.tsx

@@ -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;

apps/web/app/future/settings/(settings)/developer/api-keys/page.tsx

@@ -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;

apps/web/app/future/settings/(settings)/developer/webhooks/[id]/page.tsx

@@ -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;

apps/web/app/future/settings/(settings)/developer/webhooks/new/page.tsx

@@ -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;

apps/web/app/future/settings/(settings)/developer/webhooks/page.tsx

@@ -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;

apps/web/app/future/settings/(settings)/layout.tsx

@@ -0,0 +1,5 @@
+import { WithLayout } from "app/layoutHOC";
+
+import { getLayout } from "@calcom/features/settings/appDir/SettingsLayoutAppDir";
+
+export default WithLayout({ getServerLayout: getLayout })<"L">;

apps/web/app/future/settings/(settings)/my-account/appearance/page.tsx

@@ -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;

apps/web/app/future/settings/(settings)/my-account/calendars/page.tsx

@@ -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;

apps/web/app/future/settings/(settings)/my-account/conferencing/page.tsx

@@ -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;

apps/web/app/future/settings/(settings)/my-account/general/page.tsx

@@ -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;

apps/web/app/future/settings/(settings)/my-account/out-of-office/page.tsx

@@ -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;

apps/web/app/future/settings/(settings)/my-account/profile/page.tsx

@@ -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;

apps/web/app/future/settings/(settings)/organizations/admin-api/page.tsx

@@ -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;

apps/web/app/future/settings/(settings)/organizations/appearance/layout.tsx

@@ -0,0 +1,5 @@
+import { WithLayout } from "app/layoutHOC";
+
+import { getLayout } from "@calcom/features/settings/appDir/SettingsLayoutAppDir";
+
+export default WithLayout({ getServerLayout: getLayout });

apps/web/app/future/settings/(settings)/organizations/attributes/[id]/edit/page.tsx

@@ -0,0 +1,11 @@
+import { _generateMetadata } from "app/_utils";
+
+import Page from "@calcom/ee/organizations/pages/settings/attributes/attributes-edit-view";
+
+export const generateMetadata = async () =>
+  await _generateMetadata(
+    () => "Attribute",
+    (t) => t("edit_attribute_description")
+  );
+
+export default Page;

apps/web/app/future/settings/(settings)/organizations/attributes/create/page.tsx

@@ -0,0 +1,11 @@
+import { _generateMetadata } from "app/_utils";
+
+import Page from "@calcom/ee/organizations/pages/settings/attributes/attributes-create-view";
+
+export const generateMetadata = async () =>
+  await _generateMetadata(
+    () => "Attribute",
+    () => "Create an attribute for your team members"
+  );
+
+export default Page;

apps/web/app/future/settings/(settings)/organizations/attributes/page.tsx

@@ -0,0 +1,11 @@
+import { _generateMetadata } from "app/_utils";
+
+import Page from "@calcom/ee/organizations/pages/settings/attributes/attributes-list-view";
+
+export const generateMetadata = async () =>
+  await _generateMetadata(
+    (t) => t("attributes"),
+    (t) => t("attribute_meta_description")
+  );
+
+export default Page;

apps/web/app/future/settings/(settings)/organizations/billing/layout.tsx

@@ -0,0 +1,5 @@
+import { WithLayout } from "app/layoutHOC";
+
+import { getLayout } from "@calcom/features/settings/appDir/SettingsLayoutAppDir";
+
+export default WithLayout({ getServerLayout: getLayout });

apps/web/app/future/settings/(settings)/organizations/billing/page.tsx

@@ -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"),

apps/web/app/future/settings/(settings)/organizations/dsync/page.tsx

@@ -0,0 +1,25 @@
+import { _generateMetadata, getFixedT } from "app/_utils";
+import { getServerSession } from "next-auth";
+
+import { AUTH_OPTIONS } from "@calcom/features/auth/lib/next-auth-options";
+import DirectorySyncTeamView from "@calcom/features/ee/dsync/page/team-dsync-view";
+import SettingsHeader from "@calcom/features/settings/appDir/SettingsHeader";
+
+export const generateMetadata = async () =>
+  await _generateMetadata(
+    (t) => t("directory_sync"),
+    (t) => t("directory_sync_description")
+  );
+
+const Page = async () => {
+  const session = await getServerSession(AUTH_OPTIONS);
+  const t = await getFixedT(session?.user.locale || "en");
+
+  return (
+    <SettingsHeader title={t("directory_sync")} description={t("directory_sync_description")}>
+      <DirectorySyncTeamView />
+    </SettingsHeader>
+  );
+};
+
+export default Page;

apps/web/app/future/settings/(settings)/organizations/general/layout.tsx

@@ -0,0 +1,5 @@
+import { WithLayout } from "app/layoutHOC";
+
+import { getLayout } from "@calcom/features/settings/appDir/SettingsLayoutAppDir";
+
+export default WithLayout({ getServerLayout: getLayout });

apps/web/app/future/settings/(settings)/organizations/members/layout.tsx

@@ -0,0 +1,5 @@
+import { WithLayout } from "app/layoutHOC";
+
+import { getLayout } from "@calcom/features/settings/appDir/SettingsLayoutAppDir";
+
+export default WithLayout({ getServerLayout: getLayout });

apps/web/app/future/settings/(settings)/organizations/privacy/page.tsx

@@ -0,0 +1,25 @@
+import { _generateMetadata, getFixedT } from "app/_utils";
+import { getServerSession } from "next-auth";
+
+import { AUTH_OPTIONS } from "@calcom/features/auth/lib/next-auth-options";
+import PrivacyView from "@calcom/features/ee/organizations/pages/settings/privacy";
+import SettingsHeader from "@calcom/features/settings/appDir/SettingsHeader";
+
+export const generateMetadata = async () =>
+  await _generateMetadata(
+    (t) => t("privacy"),
+    (t) => t("privacy_organization_description")
+  );
+
+const Page = async () => {
+  const session = await getServerSession(AUTH_OPTIONS);
+  const t = await getFixedT(session?.user.locale || "en");
+
+  return (
+    <SettingsHeader title={t("privacy")} description={t("privacy_organization_description")}>
+      <PrivacyView />
+    </SettingsHeader>
+  );
+};
+
+export default Page;

apps/web/app/future/settings/(settings)/organizations/profile/layout.tsx

@@ -0,0 +1,5 @@
+import { WithLayout } from "app/layoutHOC";
+
+import { getLayout } from "@calcom/features/settings/appDir/SettingsLayoutAppDir";
+
+export default WithLayout({ getServerLayout: getLayout });

apps/web/app/future/settings/(settings)/organizations/teams/other/[id]/appearance/layout.tsx

@@ -0,0 +1,5 @@
+import { WithLayout } from "app/layoutHOC";
+
+import { getLayout } from "@calcom/features/settings/appDir/SettingsLayoutAppDir";
+
+export default WithLayout({ getServerLayout: getLayout });

apps/web/app/future/settings/(settings)/organizations/teams/other/[id]/members/layout.tsx

@@ -0,0 +1,5 @@
+import { WithLayout } from "app/layoutHOC";
+
+import { getLayout } from "@calcom/features/settings/appDir/SettingsLayoutAppDir";
+
+export default WithLayout({ getServerLayout: getLayout });

apps/web/app/future/settings/(settings)/organizations/teams/other/[id]/profile/layout.tsx

@@ -0,0 +1,5 @@
+import { WithLayout } from "app/layoutHOC";
+
+import { getLayout } from "@calcom/features/settings/appDir/SettingsLayoutAppDir";
+
+export default WithLayout({ getServerLayout: getLayout });

apps/web/app/future/settings/(settings)/organizations/teams/other/layout.tsx

@@ -0,0 +1,5 @@
+import { WithLayout } from "app/layoutHOC";
+
+import { getLayout } from "@calcom/features/settings/appDir/SettingsLayoutAppDir";
+
+export default WithLayout({ getServerLayout: getLayout });

apps/web/app/future/settings/(settings)/security/impersonation/page.tsx

@@ -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;

apps/web/app/future/settings/(settings)/security/password/page.tsx

@@ -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;

apps/web/app/future/settings/(settings)/security/sso/page.tsx

@@ -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;

apps/web/app/future/settings/(settings)/security/two-factor-auth/page.tsx

@@ -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;

apps/web/app/future/settings/(settings)/teams/[id]/billing/page.tsx

@@ -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"),

apps/web/app/future/settings/(settings)/teams/[id]/event-type/page.tsx

@@ -0,0 +1,11 @@
+import LegacyPage, { GetLayout } from "@pages/settings/teams/[id]/event-type";
+import { _generateMetadata } from "app/_utils";
+import { WithLayout } from "app/layoutHOC";
+
+export const generateMetadata = async () =>
+  await _generateMetadata(
+    (t) => t("add_new_team_event_type"),
+    (t) => t("new_event_type_to_book_description")
+  );
+
+export default WithLayout({ Page: LegacyPage, getLayout: GetLayout })<"P">;

apps/web/app/future/settings/(settings)/teams/layout.tsx

@@ -0,0 +1,5 @@
+import { WithLayout } from "app/layoutHOC";
+
+import { getLayout } from "@calcom/features/settings/appDir/SettingsLayoutAppDir";
+
+export default WithLayout({ getServerLayout: getLayout })<"L">;

apps/web/app/future/settings/admin/apps/layout.tsx

@@ -1,5 +0,0 @@
-import { WithLayout } from "app/layoutHOC";
-
-import { getLayout } from "@components/auth/layouts/AdminLayoutAppDir";
-
-export default WithLayout({ getLayout })<"L">;

apps/web/app/future/settings/admin/apps/page.tsx

@@ -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;

apps/web/app/future/settings/admin/flags/page.tsx

@@ -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;

apps/web/app/future/settings/admin/impersonation/layout.tsx

@@ -1,5 +0,0 @@
-import { WithLayout } from "app/layoutHOC";
-
-import { getLayout } from "@components/auth/layouts/AdminLayoutAppDir";
-
-export default WithLayout({ getLayout })<"L">;

apps/web/app/future/settings/admin/impersonation/page.tsx

@@ -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;

apps/web/app/future/settings/admin/oAuth/oAuthView/layout.tsx

@@ -1,3 +0,0 @@
-import { WithLayout } from "app/layoutHOC";
-
-export default WithLayout({ getLayout: null })<"L">;

apps/web/app/future/settings/admin/oAuth/oAuthView/page.tsx

@@ -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;

apps/web/app/future/settings/admin/oAuth/page.tsx

@@ -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">;

apps/web/app/future/settings/admin/organizations/layout.tsx

@@ -1,5 +0,0 @@
-import { WithLayout } from "app/layoutHOC";
-
-import { getLayout } from "@calcom/features/settings/layouts/SettingsLayoutAppDir";
-
-export default WithLayout({ getLayout })<"L">;

apps/web/app/future/settings/admin/organizations/page.tsx

@@ -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;

apps/web/app/future/settings/admin/users/[id]/edit/page.tsx

@@ -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">;