feat: platform onboarding flow and dashboard

apps/api/v2/src/modules/billing/services/billing.service.ts

@@ -62,8 +62,8 @@ export class BillingService {
             quantity: 1,
           },
         ],
-        success_url: `${this.webAppUrl}/settings/platform/oauth-clients`,
-        cancel_url: `${this.webAppUrl}/settings/platform/oauth-clients`,
+        success_url: `${this.webAppUrl}/settings/platform/`,
+        cancel_url: `${this.webAppUrl}/settings/platform/`,
         mode: "subscription",
         metadata: {
           teamId: teamId.toString(),

apps/api/v2/src/modules/billing/types.ts

@@ -1,5 +1,6 @@
 export enum PlatformPlan {
   STARTER = "STARTER",
   ESSENTIALS = "ESSENTIALS",
+  SCALE = "SCALE",
   ENTERPRISE = "ENTERPRISE",
 }

apps/api/v2/src/modules/oauth-clients/controllers/oauth-clients/oauth-clients.controller.ts

@@ -3,13 +3,15 @@ import { GetUser } from "@/modules/auth/decorators/get-user/get-user.decorator";
 import { Roles } from "@/modules/auth/decorators/roles/roles.decorator";
 import { NextAuthGuard } from "@/modules/auth/guards/next-auth/next-auth.guard";
 import { OrganizationRolesGuard } from "@/modules/auth/guards/organization-roles/organization-roles.guard";
+import { ManagedUserOutput } from "@/modules/oauth-clients/controllers/oauth-client-users/outputs/managed-user.output";
 import { CreateOAuthClientResponseDto } from "@/modules/oauth-clients/controllers/oauth-clients/responses/CreateOAuthClientResponse.dto";
 import { GetOAuthClientResponseDto } from "@/modules/oauth-clients/controllers/oauth-clients/responses/GetOAuthClientResponse.dto";
 import { GetOAuthClientsResponseDto } from "@/modules/oauth-clients/controllers/oauth-clients/responses/GetOAuthClientsResponse.dto";
 import { UpdateOAuthClientInput } from "@/modules/oauth-clients/inputs/update-oauth-client.input";
 import { OAuthClientRepository } from "@/modules/oauth-clients/oauth-client.repository";
 import { OrganizationsRepository } from "@/modules/organizations/organizations.repository";
 import { UserWithProfile } from "@/modules/users/users.repository";
+import { UsersRepository } from "@/modules/users/users.repository";
 import {
   Body,
   Controller,
@@ -32,6 +34,7 @@ import {
   ApiCreatedResponse as DocsCreatedResponse,
 } from "@nestjs/swagger";
 import { MembershipRole } from "@prisma/client";
+import { User } from "@prisma/client";
 
 import { SUCCESS_STATUS } from "@calcom/platform-constants";
 import { CreateOAuthClientInput } from "@calcom/platform-types";
@@ -51,6 +54,7 @@ export class OAuthClientsController {
 
   constructor(
     private readonly oauthClientRepository: OAuthClientRepository,
+    private readonly userRepository: UsersRepository,
     private readonly teamsRepository: OrganizationsRepository
   ) {}
 
@@ -131,4 +135,17 @@ export class OAuthClientsController {
     const client = await this.oauthClientRepository.deleteOAuthClient(clientId);
     return { status: SUCCESS_STATUS, data: client };
   }
+
+  private getResponseUser(user: User): ManagedUserOutput {
+    return {
+      id: user.id,
+      email: user.email,
+      username: user.username,
+      timeZone: user.timeZone,
+      weekStart: user.weekStart,
+      createdDate: user.createdDate,
+      timeFormat: user.timeFormat,
+      defaultScheduleId: user.defaultScheduleId,
+    };
+  }
 }

apps/web/components/settings/platform/dashboard/managed-user-header/index.tsx

@@ -0,0 +1,33 @@
+import type { PlatformOAuthClient } from "@calcom/prisma/client";
+
+import { OAuthClientsDropdown } from "@components/settings/platform/dashboard/oauth-client-dropdown";
+
+type ManagedUserHeaderProps = {
+  oauthClients: PlatformOAuthClient[];
+  initialClientName: string;
+  handleChange: (clientId: string, clientName: string) => void;
+};
+
+export const ManagedUserHeader = ({
+  oauthClients,
+  initialClientName,
+  handleChange,
+}: ManagedUserHeaderProps) => {
+  return (
+    <div className="border-subtle mx-auto block justify-between rounded-t-lg border px-4 py-6 sm:flex sm:px-6">
+      <div className="flex w-full flex-col">
+        <h1 className="font-cal text-emphasis mb-1 text-xl font-semibold leading-5 tracking-wide">
+          Managed Users
+        </h1>
+        <p className="text-default text-sm ltr:mr-4 rtl:ml-4">
+          See all the managed users created by your OAuth client.
+        </p>
+      </div>
+      <OAuthClientsDropdown
+        oauthClients={oauthClients}
+        initialClientName={initialClientName}
+        handleChange={handleChange}
+      />
+    </div>
+  );
+};

apps/web/components/settings/platform/dashboard/managed-user-list/index.tsx

@@ -0,0 +1,39 @@
+import type { PlatformOAuthClient } from "@calcom/prisma/client";
+
+import type { ManagedUser } from "@lib/hooks/settings/platform/oauth-clients/useOAuthClients";
+
+import { ManagedUserHeader } from "@components/settings/platform/dashboard/managed-user-header";
+import { ManagedUserTable } from "@components/settings/platform/dashboard/managed-user-table";
+
+type ManagedUserListProps = {
+  oauthClients: PlatformOAuthClient[];
+  managedUsers?: ManagedUser[];
+  initialClientName: string;
+  initialClientId: string;
+  isManagedUserLoading: boolean;
+  handleChange: (clientId: string, clientName: string) => void;
+};
+
+export const ManagedUserList = ({
+  initialClientName,
+  initialClientId,
+  oauthClients,
+  managedUsers,
+  isManagedUserLoading,
+  handleChange,
+}: ManagedUserListProps) => {
+  return (
+    <div>
+      <ManagedUserHeader
+        oauthClients={oauthClients}
+        initialClientName={initialClientName}
+        handleChange={handleChange}
+      />
+      <ManagedUserTable
+        managedUsers={managedUsers}
+        isManagedUserLoading={isManagedUserLoading}
+        initialClientId={initialClientId}
+      />
+    </div>
+  );
+};

apps/web/components/settings/platform/dashboard/managed-user-table/index.tsx

@@ -0,0 +1,60 @@
+import { EmptyScreen } from "@calcom/ui";
+
+import type { ManagedUser } from "@lib/hooks/settings/platform/oauth-clients/useOAuthClients";
+
+type ManagedUserTableProps = {
+  managedUsers?: ManagedUser[];
+  isManagedUserLoading: boolean;
+  initialClientId: string;
+};
+
+export const ManagedUserTable = ({
+  managedUsers,
+  isManagedUserLoading,
+  initialClientId,
+}: ManagedUserTableProps) => {
+  const showUsers = !isManagedUserLoading && managedUsers?.length;
+
+  return (
+    <div>
+      {showUsers ? (
+        <>
+          <table className="w-[100%] rounded-lg">
+            <colgroup className="border-subtle overflow-hidden rounded-b-lg border border-b-0" span={3} />
+            <tr>
+              <td className="border-subtle border px-4 py-3 md:text-center">Id</td>
+              <td className="border-subtle border px-4 py-3 md:text-center">Username</td>
+              <td className="border-subtle border px-4 py-3 md:text-center">Email</td>
+            </tr>
+            {managedUsers.map((user) => {
+              return (
+                <tr key={user.id} className="">
+                  <td className="border-subtle overflow-hidden border px-4 py-3 md:text-center">{user.id}</td>
+                  <td className="border-subtle border px-4 py-3 md:text-center">{user.username}</td>
+                  <td className="border-subtle overflow-hidden border px-4 py-3 md:overflow-auto md:text-center">
+                    {user.email}
+                  </td>
+                </tr>
+              );
+            })}
+          </table>
+        </>
+      ) : (
+        <EmptyScreen
+          limitWidth={false}
+          headline={
+            initialClientId == undefined
+              ? "OAuth client is missing. You need to create an OAuth client first in order to create a managed user."
+              : `OAuth client ${initialClientId} does not have a managed user present.`
+          }
+          description={
+            initialClientId == undefined
+              ? "Refer to the Platform Docs from the sidebar in order to create an OAuth client."
+              : "Refer to the Platform Docs from the sidebar in order to create a managed user."
+          }
+          className="items-center border"
+        />
+      )}
+    </div>
+  );
+};

apps/web/components/settings/platform/dashboard/oauth-client-dropdown/index.tsx

@@ -0,0 +1,50 @@
+import type { PlatformOAuthClient } from "@calcom/prisma/client";
+import {
+  Button,
+  Dropdown,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownItem,
+} from "@calcom/ui";
+
+type OAuthClientsDropdownProps = {
+  oauthClients: PlatformOAuthClient[];
+  initialClientName: string;
+  handleChange: (clientId: string, clientName: string) => void;
+};
+
+export const OAuthClientsDropdown = ({
+  oauthClients,
+  initialClientName,
+  handleChange,
+}: OAuthClientsDropdownProps) => {
+  return (
+    <div>
+      {Array.isArray(oauthClients) && oauthClients.length > 0 ? (
+        <Dropdown modal={false}>
+          <DropdownMenuTrigger asChild>
+            <Button color="secondary">{initialClientName}</Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent>
+            {oauthClients.map((client) => {
+              return (
+                <div key={client.id}>
+                  {initialClientName !== client.name ? (
+                    <DropdownMenuItem className="outline-none">
+                      <DropdownItem type="button" onClick={() => handleChange(client.id, client.name)}>
+                        {client.name}
+                      </DropdownItem>
+                    </DropdownMenuItem>
+                  ) : (
+                    <></>
+                  )}
+                </div>
+              );
+            })}
+          </DropdownMenuContent>
+        </Dropdown>
+      ) : null}
+    </div>
+  );
+};

apps/web/components/settings/platform/dashboard/oauth-clients-list/index.tsx

@@ -0,0 +1,81 @@
+import { useRouter } from "next/navigation";
+
+import type { PlatformOAuthClient } from "@calcom/prisma/client";
+import { EmptyScreen, Button } from "@calcom/ui";
+
+import { OAuthClientCard } from "@components/settings/platform/oauth-clients/OAuthClientCard";
+
+type OAuthClientsListProps = {
+  oauthClients: PlatformOAuthClient[];
+  isDeleting: boolean;
+  handleDelete: (id: string) => Promise<void>;
+};
+
+export const OAuthClientsList = ({ oauthClients, isDeleting, handleDelete }: OAuthClientsListProps) => {
+  return (
+    <div className="mb-10">
+      <div className="border-subtle mx-auto block justify-between rounded-t-lg border px-4 py-6 sm:flex sm:px-6">
+        <div className="flex w-full flex-col">
+          <h1 className="font-cal text-emphasis mb-1 text-xl font-semibold leading-5 tracking-wide">
+            OAuth Clients
+          </h1>
+          <p className="text-default text-sm ltr:mr-4 rtl:ml-4">
+            Connect your platform to cal.com with OAuth
+          </p>
+        </div>
+        <div>
+          <NewOAuthClientButton redirectLink="/settings/platform/oauth-clients/create" />
+        </div>
+      </div>
+      {Array.isArray(oauthClients) && oauthClients.length ? (
+        <>
+          <div className="border-subtle rounded-b-lg border border-t-0">
+            {oauthClients.map((client, index) => {
+              return (
+                <OAuthClientCard
+                  name={client.name}
+                  redirectUris={client.redirectUris}
+                  bookingRedirectUri={client.bookingRedirectUri}
+                  bookingRescheduleRedirectUri={client.bookingRescheduleRedirectUri}
+                  bookingCancelRedirectUri={client.bookingCancelRedirectUri}
+                  permissions={client.permissions}
+                  key={index}
+                  lastItem={oauthClients.length === index + 1}
+                  id={client.id}
+                  secret={client.secret}
+                  isLoading={isDeleting}
+                  onDelete={handleDelete}
+                  areEmailsEnabled={client.areEmailsEnabled}
+                />
+              );
+            })}
+          </div>
+        </>
+      ) : (
+        <EmptyScreen
+          headline="Create your first OAuth client"
+          description="OAuth clients facilitate access to Cal.com on behalf of users"
+          Icon="plus"
+          className=""
+          buttonRaw={<NewOAuthClientButton redirectLink="/settings/platform/oauth-clients/create" />}
+        />
+      )}
+    </div>
+  );
+};
+
+const NewOAuthClientButton = ({ redirectLink, label }: { redirectLink: string; label?: string }) => {
+  const router = useRouter();
+
+  return (
+    <Button
+      onClick={(e) => {
+        e.preventDefault();
+        router.push(redirectLink);
+      }}
+      color="secondary"
+      StartIcon="plus">
+      {!!label ? label : "Add"}
+    </Button>
+  );
+};

apps/web/components/settings/organizations/platform/oauth-clients/OAuthClientCard.tsx → apps/web/components/settings/platform/oauth-clients/OAuthClientCard.tsx

@@ -6,7 +6,7 @@ import { PERMISSIONS_GROUPED_MAP } from "@calcom/platform-constants";
 import type { Avatar } from "@calcom/prisma/client";
 import { Button, Icon, showToast } from "@calcom/ui";
 
-import { hasPermission } from "../../../../../../../packages/platform/utils/permissions";
+import { hasPermission } from "../../../../../../packages/platform/utils/permissions";
 
 type OAuthClientCardProps = {
   name: string;
@@ -115,7 +115,7 @@ export const OAuthClientCard = ({
         </div>
         <div className="border-subtle flex text-sm">
           <span className="font-semibold">Permissions: </span>
-          <div className="flex">{clientPermissions}</div>
+          {permissions ? <div className="flex">{clientPermissions}</div> : <>&nbsp;Disabled</>}
         </div>
         <div className="flex gap-1 text-sm">
           <span className="font-semibold">Redirect uris: </span>
@@ -145,7 +145,7 @@ export const OAuthClientCard = ({
           className="bg-subtle hover:bg-emphasis text-white"
           loading={isLoading}
           disabled={isLoading}
-          onClick={() => router.push(`/settings/organizations/platform/oauth-clients/create?clientId=${id}`)}>
+          onClick={() => router.push(`/settings/platform/oauth-clients/${id}/edit`)}>
           Edit
         </Button>
         <Button