From 610c86837a5592e69576cfc2525dac70f105912e Mon Sep 17 00:00:00 2001
From: sean-brydon <55134778+sean-brydon@users.noreply.github.com>
Date: Wed, 19 Jul 2023 20:45:13 +0100
Subject: [PATCH] feat: orgs - user management v2

figma: https://www.figma.com/file/ZJNAFHCAq6rnuGRgUFxjzQ/Organizations----New-features?type=design&node-id=4304-330348&mode=design&t=nKonHZpucwxnqwQI-4 (Not all features are in this PR)
loom: https://www.loom.com/share/30e8ef20a5b34a708dca160d8c04ae6f

shoutout @shadcn for the base of this table <3

Member View:
![CleanShot 2023-07-14 at 14 09 02](https://github.com/calcom/cal.com/assets/55134778/5db6eedb-bece-4955-91f0-9f2b3b042300)

Admin view:
![CleanShot 2023-07-14 at 14 09 07](https://github.com/calcom/cal.com/assets/55134778/708c624d-1990-4075-8b32-d4587d09deff)

How to test
- Create ORG
- add members
- view settings -> orgs -> members
---
 .../components/eventtype/EventAdvancedTab.tsx |  17 +-
 .../bookings/components/EventTypeFilter.tsx   |   4 +-
 .../organizations/pages/settings/members.tsx  | 155 +---
 .../ee/payments/components/Payment.tsx        |   4 +-
 .../components/MemberChangeRoleModal.tsx      |   2 +-
 .../components/MemberInvitationModal.tsx      |   2 +-
 .../workflows/components/AddActionDialog.tsx  |   4 +-
 .../components/WorkflowStepContainer.tsx      |   4 +-
 .../BulkEditDefaultConferencingModal.tsx      |   6 +-
 packages/features/form-builder/Components.tsx |   4 +-
 .../insights/filters/EventTypeList.tsx        |   4 +-
 packages/features/package.json                |   2 +
 .../schedules/components/Schedule.tsx         |   6 +-
 .../settings/BookerLayoutSelector.tsx         |   4 +-
 .../settings/layouts/SettingsLayout.tsx       |   2 +-
 .../UserTable/ChangeUserRoleModal.tsx         |  27 +
 .../UserTable/DeleteMemberModal.tsx           |  55 ++
 .../UserTable/ImpersonationMemberModal.tsx    |  47 +
 .../UserTable/InviteMemberModal.tsx           |  76 ++
 .../components/UserTable/UserListTable.tsx    | 331 +++++++
 .../components/UserTable/UserTableActions.tsx | 182 ++++
 packages/lib/hooks/usePagination.ts           |  28 +
 .../routers/viewer/organizations/_router.tsx  |   4 +-
 .../organizations/adminVerify.handler.ts      |   9 -
 .../organizations/listMembers.handler.ts      |  94 +-
 .../organizations/listMembers.schema.ts       |   8 +
 packages/types/tanstack-table.d.ts            |   7 +
 packages/ui/components/command/index.tsx      | 136 +++
 .../components/data-table/DataTableFilter.tsx | 116 +++
 .../data-table/DataTablePagination.tsx        |  60 ++
 .../data-table/DataTableSelectionBar.tsx      |  31 +
 .../data-table/DataTableToolbar.tsx           |  76 ++
 .../data-table/__storybook__/columns.tsx      |  78 ++
 .../data-table/__storybook__/data.ts          | 100 ++
 .../__storybook__/datatable.stories.mdx       |  27 +
 packages/ui/components/data-table/index.tsx   | 173 ++++
 packages/ui/components/dialog/Dialog.tsx      |   1 +
 .../ui/components/form/checkbox/Checkbox.tsx  |  22 +-
 .../form/checkbox/checkbox.stories.mdx        |   2 +-
 packages/ui/components/form/checkbox/index.ts |   2 +-
 .../ui/components/form/dropdown/Dropdown.tsx  |   5 +-
 packages/ui/components/form/index.ts          |   2 +-
 packages/ui/components/popover/index.ts       |   2 -
 packages/ui/components/popover/index.tsx      |  32 +
 packages/ui/components/table/TableNew.tsx     |  78 ++
 packages/ui/index.tsx                         |   2 +
 packages/ui/package.json                      |   7 +-
 yarn.lock                                     | 855 ++++++++++++++++--
 48 files changed, 2635 insertions(+), 260 deletions(-)
 create mode 100644 packages/features/users/components/UserTable/ChangeUserRoleModal.tsx
 create mode 100644 packages/features/users/components/UserTable/DeleteMemberModal.tsx
 create mode 100644 packages/features/users/components/UserTable/ImpersonationMemberModal.tsx
 create mode 100644 packages/features/users/components/UserTable/InviteMemberModal.tsx
 create mode 100644 packages/features/users/components/UserTable/UserListTable.tsx
 create mode 100644 packages/features/users/components/UserTable/UserTableActions.tsx
 create mode 100644 packages/lib/hooks/usePagination.ts
 create mode 100644 packages/trpc/server/routers/viewer/organizations/listMembers.schema.ts
 create mode 100644 packages/types/tanstack-table.d.ts
 create mode 100644 packages/ui/components/command/index.tsx
 create mode 100644 packages/ui/components/data-table/DataTableFilter.tsx
 create mode 100644 packages/ui/components/data-table/DataTablePagination.tsx
 create mode 100644 packages/ui/components/data-table/DataTableSelectionBar.tsx
 create mode 100644 packages/ui/components/data-table/DataTableToolbar.tsx
 create mode 100644 packages/ui/components/data-table/__storybook__/columns.tsx
 create mode 100644 packages/ui/components/data-table/__storybook__/data.ts
 create mode 100644 packages/ui/components/data-table/__storybook__/datatable.stories.mdx
 create mode 100644 packages/ui/components/data-table/index.tsx
 delete mode 100644 packages/ui/components/popover/index.ts
 create mode 100644 packages/ui/components/popover/index.tsx
 create mode 100644 packages/ui/components/table/TableNew.tsx

diff --git a/apps/web/components/eventtype/EventAdvancedTab.tsx b/apps/web/components/eventtype/EventAdvancedTab.tsx
index 8e416b3884..b2ed894e9d 100644
--- a/apps/web/components/eventtype/EventAdvancedTab.tsx
+++ b/apps/web/components/eventtype/EventAdvancedTab.tsx
@@ -5,7 +5,7 @@ import { useEffect, useState } from "react";
 import { Controller, useFormContext } from "react-hook-form";
 import short from "short-uuid";
 import { v5 as uuidv5 } from "uuid";
-import { z } from "zod";
+import type { z } from "zod";
 
 import type { EventNameObjectType } from "@calcom/core/event";
 import { getEventName } from "@calcom/core/event";
@@ -17,14 +17,23 @@ import {
   allowDisablingHostConfirmationEmails,
 } from "@calcom/features/ee/workflows/lib/allowDisablingStandardEmails";
 import { FormBuilder } from "@calcom/features/form-builder/FormBuilder";
-import { EditableSchema } from "@calcom/features/form-builder/FormBuilderFieldsSchema";
+import type { EditableSchema } from "@calcom/features/form-builder/FormBuilderFieldsSchema";
 import { BookerLayoutSelector } from "@calcom/features/settings/BookerLayoutSelector";
 import { classNames } from "@calcom/lib";
 import { APP_NAME, CAL_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { Prisma } from "@calcom/prisma/client";
 import { trpc } from "@calcom/trpc/react";
-import { Button, Checkbox, Label, SettingsToggle, showToast, TextField, Tooltip, Alert } from "@calcom/ui";
+import {
+  Button,
+  CheckboxField,
+  Label,
+  SettingsToggle,
+  showToast,
+  TextField,
+  Tooltip,
+  Alert,
+} from "@calcom/ui";
 import { Edit, Copy } from "@calcom/ui/components/icon";
 
 import RequiresConfirmationController from "./RequiresConfirmationController";
@@ -342,7 +351,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
                       }}
                     />
                     <div className="mt-2">
-                      <Checkbox
+                      <CheckboxField
                         description={t("show_attendees")}
                         disabled={seatsLocked.disabled}
                         onChange={(e) => formMethods.setValue("seatsShowAttendees", e.target.checked)}
diff --git a/packages/features/bookings/components/EventTypeFilter.tsx b/packages/features/bookings/components/EventTypeFilter.tsx
index 4449fc5a51..9b1781573c 100644
--- a/packages/features/bookings/components/EventTypeFilter.tsx
+++ b/packages/features/bookings/components/EventTypeFilter.tsx
@@ -5,7 +5,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { RouterOutputs } from "@calcom/trpc/react";
 import { trpc } from "@calcom/trpc/react";
 import { AnimatedPopover } from "@calcom/ui";
-import { Checkbox } from "@calcom/ui";
+import { CheckboxField } from "@calcom/ui";
 
 import { groupBy } from "../groupBy";
 import { useFilterQuery } from "../lib/useFilterQuery";
@@ -73,7 +73,7 @@ export const EventTypeFilter = () => {
               </div>
               {groupedEventTypes[teamName].map((eventType) => (
                 <div key={eventType.id} className="flex items-center px-4 py-1.5">
-                  <Checkbox
+                  <CheckboxField
                     checked={query.eventTypeIds?.includes(eventType.id)}
                     onChange={(e) => {
                       if (e.target.checked) {
diff --git a/packages/features/ee/organizations/pages/settings/members.tsx b/packages/features/ee/organizations/pages/settings/members.tsx
index 43e38ee1ac..36ba6b64c5 100644
--- a/packages/features/ee/organizations/pages/settings/members.tsx
+++ b/packages/features/ee/organizations/pages/settings/members.tsx
@@ -1,133 +1,17 @@
-import { useRouter } from "next/router";
-import { useState } from "react";
-
 import LicenseRequired from "@calcom/features/ee/common/components/LicenseRequired";
-import MemberInvitationModal from "@calcom/features/ee/teams/components/MemberInvitationModal";
-import MemberListItem from "@calcom/features/ee/teams/components/MemberListItem";
-import TeamInviteList from "@calcom/features/ee/teams/components/TeamInviteList";
 import { getLayout } from "@calcom/features/settings/layouts/SettingsLayout";
+import { UserListTable } from "@calcom/features/users/components/UserTable/UserListTable";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { MembershipRole } from "@calcom/prisma/enums";
-import { trpc } from "@calcom/trpc/react";
-import type { RouterOutputs } from "@calcom/trpc/react";
-import { Button, Meta, TextField, showToast } from "@calcom/ui";
-import { Plus } from "@calcom/ui/components/icon";
-
-type Team = RouterOutputs["viewer"]["teams"]["get"];
-
-interface MembersListProps {
-  team: Team | undefined;
-}
-
-const checkIfExist = (comp: string, query: string) =>
-  comp.toLowerCase().replace(/\s+/g, "").includes(query.toLowerCase().replace(/\s+/g, ""));
-
-function MembersList(props: MembersListProps) {
-  const { team } = props;
-  const { t } = useLocale();
-  const [query, setQuery] = useState<string>("");
-
-  const members = team?.members;
-  const membersList = members
-    ? members && query === ""
-      ? members
-      : members.filter((member) => {
-          const email = member.email ? checkIfExist(member.email, query) : false;
-          const username = member.username ? checkIfExist(member.username, query) : false;
-          const name = member.name ? checkIfExist(member.name, query) : false;
-
-          return email || username || name;
-        })
-    : undefined;
-  return (
-    <div className="flex flex-col gap-y-3">
-      <TextField
-        type="search"
-        autoComplete="false"
-        onChange={(e) => setQuery(e.target.value)}
-        value={query}
-        placeholder={`${t("search")}...`}
-      />
-      {membersList?.length && team ? (
-        <ul className="divide-subtle border-subtle divide-y rounded-md border ">
-          {membersList.map((member) => {
-            return <MemberListItem key={member.id} team={team} member={member} />;
-          })}
-        </ul>
-      ) : null}
-    </div>
-  );
-}
+import { Meta } from "@calcom/ui";
 
 const MembersView = () => {
-  const { t, i18n } = useLocale();
-  const router = useRouter();
-  const utils = trpc.useContext();
-  const showDialog = router.query.inviteModal === "true";
-  const [showMemberInvitationModal, setShowMemberInvitationModal] = useState(showDialog);
-  const { data: team, isLoading } = trpc.viewer.organizations.listMembers.useQuery(undefined, {
-    onError: () => {
-      router.push("/settings");
-    },
-  });
-
-  const inviteMemberMutation = trpc.viewer.teams.inviteMember.useMutation({
-    async onSuccess(data) {
-      await utils.viewer.organizations.listMembers.invalidate();
-      setShowMemberInvitationModal(false);
-      if (data.sendEmailInvitation) {
-        if (Array.isArray(data.usernameOrEmail)) {
-          showToast(
-            t("email_invite_team_bulk", {
-              userCount: data.usernameOrEmail.length,
-            }),
-            "success"
-          );
-        } else {
-          showToast(
-            t("email_invite_team", {
-              email: data.usernameOrEmail,
-            }),
-            "success"
-          );
-        }
-      }
-    },
-    onError: (error) => {
-      showToast(error.message, "error");
-    },
-  });
-
-  const isInviteOpen = !team?.membership.accepted;
-
-  const isAdminOrOwner =
-    team && (team.membership.role === MembershipRole.OWNER || team.membership.role === MembershipRole.ADMIN);
+  const { t } = useLocale();
 
   return (
     <LicenseRequired>
-      <Meta
-        title={t("organization_members")}
-        description={t("organization_description")}
-        CTA={
-          isAdminOrOwner ? (
-            <Button
-              type="button"
-              color="primary"
-              StartIcon={Plus}
-              className="ml-auto"
-              onClick={() => setShowMemberInvitationModal(true)}
-              data-testid="new-organization-member-button">
-              {t("add")}
-            </Button>
-          ) : (
-            <></>
-          )
-        }
-      />
-      {!isLoading && (
-        <>
-          <div>
-            {team && (
+      <Meta title={t("organization_members")} description={t("organization_description")} />
+      <div>
+        {/* {team && (
               <>
                 {isInviteOpen && (
                   <TeamInviteList
@@ -144,30 +28,9 @@ const MembersView = () => {
                   />
                 )}
               </>
-            )}
-            <MembersList team={team} />
-          </div>
-          {showMemberInvitationModal && team && (
-            <MemberInvitationModal
-              teamId={team.id}
-              isOpen={showMemberInvitationModal}
-              members={team.members}
-              onExit={() => setShowMemberInvitationModal(false)}
-              isLoading={inviteMemberMutation.isLoading}
-              onSubmit={(values) => {
-                inviteMemberMutation.mutate({
-                  teamId: team.id,
-                  language: i18n.language,
-                  role: values.role,
-                  usernameOrEmail: values.emailOrUsername,
-                  sendEmailInvitation: values.sendInviteEmail,
-                  isOrg: true,
-                });
-              }}
-            />
-          )}
-        </>
-      )}
+            )} */}
+        <UserListTable />
+      </div>
     </LicenseRequired>
   );
 };
diff --git a/packages/features/ee/payments/components/Payment.tsx b/packages/features/ee/payments/components/Payment.tsx
index 510c601bd4..09b66a5504 100644
--- a/packages/features/ee/payments/components/Payment.tsx
+++ b/packages/features/ee/payments/components/Payment.tsx
@@ -11,7 +11,7 @@ import type { StripePaymentData, StripeSetupIntentData } from "@calcom/app-store
 import { bookingSuccessRedirect } from "@calcom/lib/bookingSuccessRedirect";
 import { CAL_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Button, Checkbox } from "@calcom/ui";
+import { Button, CheckboxField } from "@calcom/ui";
 
 import type { EventType } from ".prisma/client";
 
@@ -101,7 +101,7 @@ const PaymentForm = (props: Props) => {
       </div>
       {paymentOption === "HOLD" && (
         <div className="bg-info mb-5 mt-2 rounded-md p-3">
-          <Checkbox
+          <CheckboxField
             description={t("acknowledge_booking_no_show_fee", {
               amount: props.payment.amount / 100,
               formatParams: { amount: { currency: props.payment.currency } },
diff --git a/packages/features/ee/teams/components/MemberChangeRoleModal.tsx b/packages/features/ee/teams/components/MemberChangeRoleModal.tsx
index dced4ac636..4a28135c7c 100644
--- a/packages/features/ee/teams/components/MemberChangeRoleModal.tsx
+++ b/packages/features/ee/teams/components/MemberChangeRoleModal.tsx
@@ -102,7 +102,7 @@ export default function MemberChangeRoleModal(props: {
                 {errorMessage}
               </p>
             )}
-            <DialogFooter showDivider className="mt-12 sm:flex sm:flex-row-reverse">
+            <DialogFooter className="mt-12 sm:flex sm:flex-row-reverse">
               <Button type="button" color="secondary" onClick={props.onExit}>
                 {t("cancel")}
               </Button>
diff --git a/packages/features/ee/teams/components/MemberInvitationModal.tsx b/packages/features/ee/teams/components/MemberInvitationModal.tsx
index dd388009e2..811c030902 100644
--- a/packages/features/ee/teams/components/MemberInvitationModal.tsx
+++ b/packages/features/ee/teams/components/MemberInvitationModal.tsx
@@ -13,7 +13,7 @@ import type { RouterOutputs } from "@calcom/trpc";
 import { trpc } from "@calcom/trpc";
 import {
   Button,
-  Checkbox as CheckboxField,
+  CheckboxField,
   Dialog,
   DialogContent,
   DialogFooter,
diff --git a/packages/features/ee/workflows/components/AddActionDialog.tsx b/packages/features/ee/workflows/components/AddActionDialog.tsx
index 45a517549e..4562b6fc29 100644
--- a/packages/features/ee/workflows/components/AddActionDialog.tsx
+++ b/packages/features/ee/workflows/components/AddActionDialog.tsx
@@ -11,7 +11,7 @@ import { WorkflowActions } from "@calcom/prisma/enums";
 import { trpc } from "@calcom/trpc/react";
 import {
   Button,
-  Checkbox,
+  CheckboxField,
   Dialog,
   DialogClose,
   DialogContent,
@@ -239,7 +239,7 @@ export const AddActionDialog = (props: IAddActionDialog) => {
                   name="numberRequired"
                   control={form.control}
                   render={() => (
-                    <Checkbox
+                    <CheckboxField
                       defaultChecked={form.getValues("numberRequired") || false}
                       description={t("make_phone_number_required")}
                       onChange={(e) => form.setValue("numberRequired", e.target.checked)}
diff --git a/packages/features/ee/workflows/components/WorkflowStepContainer.tsx b/packages/features/ee/workflows/components/WorkflowStepContainer.tsx
index f51ccd6246..dd9516b00f 100644
--- a/packages/features/ee/workflows/components/WorkflowStepContainer.tsx
+++ b/packages/features/ee/workflows/components/WorkflowStepContainer.tsx
@@ -17,7 +17,7 @@ import type { RouterOutputs } from "@calcom/trpc/react";
 import {
   Badge,
   Button,
-  Checkbox,
+  CheckboxField,
   Dialog,
   DialogClose,
   DialogContent,
@@ -657,7 +657,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                     name={`steps.${step.stepNumber - 1}.numberRequired`}
                     control={form.control}
                     render={() => (
-                      <Checkbox
+                      <CheckboxField
                         disabled={props.readOnly}
                         defaultChecked={
                           form.getValues(`steps.${step.stepNumber - 1}.numberRequired`) || false
diff --git a/packages/features/eventtypes/components/BulkEditDefaultConferencingModal.tsx b/packages/features/eventtypes/components/BulkEditDefaultConferencingModal.tsx
index 33dcf1d13f..519fb5f368 100644
--- a/packages/features/eventtypes/components/BulkEditDefaultConferencingModal.tsx
+++ b/packages/features/eventtypes/components/BulkEditDefaultConferencingModal.tsx
@@ -4,7 +4,7 @@ import { z } from "zod";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { Dialog, DialogContent, Form, DialogFooter, DialogClose, Button, Checkbox } from "@calcom/ui";
+import { Dialog, DialogContent, Form, DialogFooter, DialogClose, Button, CheckboxField } from "@calcom/ui";
 
 export const BulkUpdateEventSchema = z.object({
   eventTypeIds: z.array(z.number()),
@@ -47,7 +47,7 @@ export function BulkEditDefaultConferencingModal(props: { open: boolean; setOpen
           <div className="flex flex-col space-y-2">
             {data.eventTypes.length > 0 && (
               <div className="flex items-center space-x-2 rounded-md px-3 pb-2.5 pt-1">
-                <Checkbox
+                <CheckboxField
                   description={t("select_all")}
                   descriptionAsLabel
                   onChange={(e) => {
@@ -59,7 +59,7 @@ export function BulkEditDefaultConferencingModal(props: { open: boolean; setOpen
             )}
             {data.eventTypes.map((eventType) => (
               <div key={eventType.id} className="bg-muted flex items-center space-x-2 rounded-md px-3 py-2.5">
-                <Checkbox
+                <CheckboxField
                   description={eventType.title}
                   descriptionAsLabel
                   checked={eventTypesSelected.includes(eventType.id)}
diff --git a/packages/features/form-builder/Components.tsx b/packages/features/form-builder/Components.tsx
index 3d9d821525..eae8b68cf9 100644
--- a/packages/features/form-builder/Components.tsx
+++ b/packages/features/form-builder/Components.tsx
@@ -17,7 +17,7 @@ import {
   RadioField,
   EmailField,
   Tooltip,
-  Checkbox,
+  CheckboxField,
 } from "@calcom/ui";
 import { UserPlus, X } from "@calcom/ui/components/icon";
 
@@ -370,7 +370,7 @@ export const Components: Record<BookingFieldType, Component> = {
     factory: ({ readOnly, label, value, setValue }) => {
       return (
         <div className="flex">
-          <Checkbox
+          <CheckboxField
             onChange={(e) => {
               if (e.target.checked) {
                 setValue(true);
diff --git a/packages/features/insights/filters/EventTypeList.tsx b/packages/features/insights/filters/EventTypeList.tsx
index 221a2762b4..e532d71180 100644
--- a/packages/features/insights/filters/EventTypeList.tsx
+++ b/packages/features/insights/filters/EventTypeList.tsx
@@ -4,7 +4,7 @@ import { FilterCheckboxFieldsContainer } from "@calcom/features/filters/componen
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { RouterOutputs } from "@calcom/trpc";
 import { trpc } from "@calcom/trpc";
-import { AnimatedPopover, Checkbox } from "@calcom/ui";
+import { AnimatedPopover, CheckboxField } from "@calcom/ui";
 
 import { useFilterContext } from "../context/provider";
 
@@ -49,7 +49,7 @@ export const EventTypeList = memo(() => {
       <FilterCheckboxFieldsContainer>
         {filterOptions?.map((eventType) => (
           <div key={eventType.value} className="item-center hover:bg-muted flex cursor-pointer px-4 py-2">
-            <Checkbox
+            <CheckboxField
               checked={eventTypeValue?.value === eventType.value}
               onChange={(e) => {
                 if (e.target.checked) {
diff --git a/packages/features/package.json b/packages/features/package.json
index 3d83161fc9..5763dbdffb 100644
--- a/packages/features/package.json
+++ b/packages/features/package.json
@@ -12,11 +12,13 @@
     "@calcom/trpc": "*",
     "@calcom/ui": "*",
     "@lexical/react": "^0.9.0",
+    "@tanstack/react-table": "^8.9.3",
     "dompurify": "^2.4.1",
     "framer-motion": "^10.12.8",
     "lexical": "^0.9.0",
     "react-select": "^5.7.0",
     "react-sticky-box": "^2.0.4",
+    "react-virtual": "^2.10.4",
     "zustand": "^4.3.2"
   },
   "devDependencies": {
diff --git a/packages/features/schedules/components/Schedule.tsx b/packages/features/schedules/components/Schedule.tsx
index ac705a51cf..463735f083 100644
--- a/packages/features/schedules/components/Schedule.tsx
+++ b/packages/features/schedules/components/Schedule.tsx
@@ -28,7 +28,7 @@ import {
   Select,
   SkeletonText,
   Switch,
-  Checkbox,
+  CheckboxField,
 } from "@calcom/ui";
 import { Copy, Plus, Trash } from "@calcom/ui/components/icon";
 
@@ -447,7 +447,7 @@ const CopyTimes = ({
           <li key="select all">
             <label className="text-default flex w-full items-center justify-between">
               <span className="px-1">{t("select_all")}</span>
-              <Checkbox
+              <CheckboxField
                 description=""
                 value={t("select_all")}
                 checked={selected.length === 7}
@@ -472,7 +472,7 @@ const CopyTimes = ({
               <li key={weekday}>
                 <label className="text-default flex w-full items-center justify-between">
                   <span className="px-1">{weekday}</span>
-                  <Checkbox
+                  <CheckboxField
                     description=""
                     value={weekdayIndex}
                     checked={selected.includes(weekdayIndex) || disabled === weekdayIndex}
diff --git a/packages/features/settings/BookerLayoutSelector.tsx b/packages/features/settings/BookerLayoutSelector.tsx
index 39eb3a2862..451e4eb66e 100644
--- a/packages/features/settings/BookerLayoutSelector.tsx
+++ b/packages/features/settings/BookerLayoutSelector.tsx
@@ -10,7 +10,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { BookerLayouts, defaultBookerLayoutSettings } from "@calcom/prisma/zod-utils";
 import { bookerLayoutOptions, type BookerLayoutSettings } from "@calcom/prisma/zod-utils";
 import useMeQuery from "@calcom/trpc/react/hooks/useMeQuery";
-import { Label, Checkbox, Button } from "@calcom/ui";
+import { Label, CheckboxField, Button } from "@calcom/ui";
 
 type BookerLayoutSelectorProps = {
   title?: string;
@@ -156,7 +156,7 @@ const BookerLayoutFields = ({ settings, onChange, showUserSettings, isDark }: Bo
                 src={`/bookerlayout_${layout}${isDark ? "_dark" : ""}.svg`}
                 alt="Layout preview"
               />
-              <Checkbox
+              <CheckboxField
                 value={layout}
                 name={`bookerlayout_${layout}`}
                 description={t(`bookerlayout_${layout}`)}
diff --git a/packages/features/settings/layouts/SettingsLayout.tsx b/packages/features/settings/layouts/SettingsLayout.tsx
index 3381ffb3fa..628ef47304 100644
--- a/packages/features/settings/layouts/SettingsLayout.tsx
+++ b/packages/features/settings/layouts/SettingsLayout.tsx
@@ -487,7 +487,7 @@ export default function SettingsLayout({
         <MobileSettingsContainer onSideContainerOpen={() => setSideContainerOpen(!sideContainerOpen)} />
       }>
       <div className="flex flex-1 [&>*]:flex-1">
-        <div className="mx-auto max-w-full justify-center md:max-w-3xl">
+        <div className="mx-auto max-w-full justify-center md:max-w-4xl">
           <ShellHeader />
           <ErrorBoundary>
             <Suspense fallback={<Loader />}>{children}</Suspense>
diff --git a/packages/features/users/components/UserTable/ChangeUserRoleModal.tsx b/packages/features/users/components/UserTable/ChangeUserRoleModal.tsx
new file mode 100644
index 0000000000..d96b5e8094
--- /dev/null
+++ b/packages/features/users/components/UserTable/ChangeUserRoleModal.tsx
@@ -0,0 +1,27 @@
+import { useSession } from "next-auth/react";
+import type { Dispatch } from "react";
+
+import MemberChangeRoleModal from "@calcom/features/ee/teams/components/MemberChangeRoleModal";
+
+import type { Action, State } from "./UserListTable";
+
+export function ChangeUserRoleModal(props: { state: State; dispatch: Dispatch<Action> }) {
+  const { data: session } = useSession();
+  const orgId = session?.user.organizationId;
+  if (!orgId || !props.state.changeMemberRole.user) return null;
+
+  return (
+    <MemberChangeRoleModal
+      isOpen={true}
+      currentMember={props.state.changeMemberRole.user?.role}
+      teamId={orgId}
+      memberId={props.state.changeMemberRole.user?.id}
+      initialRole={props.state.changeMemberRole.user?.role}
+      onExit={() =>
+        props.dispatch({
+          type: "CLOSE_MODAL",
+        })
+      }
+    />
+  );
+}
diff --git a/packages/features/users/components/UserTable/DeleteMemberModal.tsx b/packages/features/users/components/UserTable/DeleteMemberModal.tsx
new file mode 100644
index 0000000000..2651f90ced
--- /dev/null
+++ b/packages/features/users/components/UserTable/DeleteMemberModal.tsx
@@ -0,0 +1,55 @@
+import { useSession } from "next-auth/react";
+import type { Dispatch } from "react";
+
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { trpc } from "@calcom/trpc";
+import { Dialog, ConfirmationDialogContent, showToast } from "@calcom/ui";
+
+import type { State, Action } from "./UserListTable";
+
+export function DeleteMemberModal({ state, dispatch }: { state: State; dispatch: Dispatch<Action> }) {
+  const { t } = useLocale();
+  const { data: session } = useSession();
+  const utils = trpc.useContext();
+  const removeMemberMutation = trpc.viewer.teams.removeMember.useMutation({
+    onSuccess() {
+      // We don't need to wait for invalidate to finish
+      Promise.all([
+        utils.viewer.teams.get.invalidate(),
+        utils.viewer.eventTypes.invalidate(),
+        utils.viewer.organizations.listMembers.invalidate(),
+      ]);
+      showToast(t("success"), "success");
+    },
+    async onError(err) {
+      showToast(err.message, "error");
+    },
+  });
+  return (
+    <Dialog
+      open={state.deleteMember.showModal}
+      onOpenChange={(open) =>
+        !open &&
+        dispatch({
+          type: "CLOSE_MODAL",
+        })
+      }>
+      <ConfirmationDialogContent
+        variety="danger"
+        title={t("remove_member")}
+        confirmBtnText={t("confirm_remove_member")}
+        onConfirm={() => {
+          // Shouldnt ever happen just for type safety
+          if (!session?.user.organizationId || !state?.deleteMember?.user?.id) return;
+
+          removeMemberMutation.mutate({
+            teamId: session?.user.organizationId,
+            memberId: state?.deleteMember?.user.id,
+            isOrg: true,
+          });
+        }}>
+        {t("remove_member_confirmation_message")}
+      </ConfirmationDialogContent>
+    </Dialog>
+  );
+}
diff --git a/packages/features/users/components/UserTable/ImpersonationMemberModal.tsx b/packages/features/users/components/UserTable/ImpersonationMemberModal.tsx
new file mode 100644
index 0000000000..e17ae810d8
--- /dev/null
+++ b/packages/features/users/components/UserTable/ImpersonationMemberModal.tsx
@@ -0,0 +1,47 @@
+import { signIn, useSession } from "next-auth/react";
+import type { Dispatch } from "react";
+
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { Button, Dialog, DialogClose, DialogContent, DialogFooter } from "@calcom/ui";
+
+import type { Action, State } from "./UserListTable";
+
+export function ImpersonationMemberModal(props: { state: State; dispatch: Dispatch<Action> }) {
+  const { t } = useLocale();
+  const { data: session } = useSession();
+  const teamId = session?.user.organizationId;
+  const user = props.state.impersonateMember.user;
+
+  if (!user || !teamId) return null;
+
+  return (
+    <Dialog
+      open={true}
+      onOpenChange={() =>
+        props.dispatch({
+          type: "CLOSE_MODAL",
+        })
+      }>
+      <DialogContent type="creation" title={t("impersonate")} description={t("impersonation_user_tip")}>
+        <form
+          onSubmit={async (e) => {
+            e.preventDefault();
+            await signIn("impersonation-auth", {
+              username: user.username || user.email,
+              teamId: teamId,
+            });
+            props.dispatch({
+              type: "CLOSE_MODAL",
+            });
+          }}>
+          <DialogFooter showDivider className="mt-8">
+            <DialogClose color="secondary">{t("cancel")}</DialogClose>
+            <Button color="primary" type="submit">
+              {t("impersonate")}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/packages/features/users/components/UserTable/InviteMemberModal.tsx b/packages/features/users/components/UserTable/InviteMemberModal.tsx
new file mode 100644
index 0000000000..9b92bdf1ef
--- /dev/null
+++ b/packages/features/users/components/UserTable/InviteMemberModal.tsx
@@ -0,0 +1,76 @@
+import { useSession } from "next-auth/react";
+import type { Dispatch } from "react";
+
+import MemberInvitationModal from "@calcom/features/ee/teams/components/MemberInvitationModal";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { trpc } from "@calcom/trpc";
+import { showToast } from "@calcom/ui";
+
+import type { Action } from "./UserListTable";
+
+interface Props {
+  dispatch: Dispatch<Action>;
+}
+
+export function InviteMemberModal(props: Props) {
+  const { data: session } = useSession();
+  const utils = trpc.useContext();
+  const { t, i18n } = useLocale();
+  const inviteMemberMutation = trpc.viewer.teams.inviteMember.useMutation({
+    async onSuccess(data) {
+      props.dispatch({ type: "CLOSE_MODAL" });
+      // Need to figure out if invalidating here is the right approach - we could have already
+      // loaded a bunch of data and idk how pagination works with invalidation. We may need to use
+      // Optimistic updates here instead.
+      await utils.viewer.organizations.listMembers.invalidate();
+      if (data.sendEmailInvitation) {
+        if (Array.isArray(data.usernameOrEmail)) {
+          showToast(
+            t("email_invite_team_bulk", {
+              userCount: data.usernameOrEmail.length,
+            }),
+            "success"
+          );
+        } else {
+          showToast(
+            t("email_invite_team", {
+              email: data.usernameOrEmail,
+            }),
+            "success"
+          );
+        }
+      }
+    },
+    onError: (error) => {
+      showToast(error.message, "error");
+    },
+  });
+
+  if (!session?.user.organizationId) return null;
+
+  const orgId = session.user.organizationId;
+
+  return (
+    <MemberInvitationModal
+      members={[]}
+      isOpen={true}
+      onExit={() => {
+        props.dispatch({
+          type: "CLOSE_MODAL",
+        });
+      }}
+      teamId={orgId}
+      isLoading={inviteMemberMutation.isLoading}
+      onSubmit={(values) => {
+        inviteMemberMutation.mutate({
+          teamId: orgId,
+          language: i18n.language,
+          role: values.role,
+          usernameOrEmail: values.emailOrUsername,
+          sendEmailInvitation: values.sendInviteEmail,
+          isOrg: true,
+        });
+      }}
+    />
+  );
+}
diff --git a/packages/features/users/components/UserTable/UserListTable.tsx b/packages/features/users/components/UserTable/UserListTable.tsx
new file mode 100644
index 0000000000..5cbf102b5f
--- /dev/null
+++ b/packages/features/users/components/UserTable/UserListTable.tsx
@@ -0,0 +1,331 @@
+import type { ColumnDef } from "@tanstack/react-table";
+import { Plus, StopCircle, Users } from "lucide-react";
+import { useSession } from "next-auth/react";
+import { useMemo, useRef, useCallback, useEffect, useReducer } from "react";
+
+import { WEBAPP_URL } from "@calcom/lib/constants";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import type { MembershipRole } from "@calcom/prisma/enums";
+import { trpc } from "@calcom/trpc";
+import { Avatar, Badge, Button, DataTable } from "@calcom/ui";
+
+import { useOrgBrandingValues } from "../../../ee/organizations/hooks";
+import { ChangeUserRoleModal } from "./ChangeUserRoleModal";
+import { DeleteMemberModal } from "./DeleteMemberModal";
+import { ImpersonationMemberModal } from "./ImpersonationMemberModal";
+import { InviteMemberModal } from "./InviteMemberModal";
+import { TableActions } from "./UserTableActions";
+
+export interface User {
+  id: number;
+  username: string | null;
+  email: string;
+  timeZone: string;
+  role: MembershipRole;
+  accepted: boolean;
+  disableImpersonation: boolean;
+  completedOnboarding: boolean;
+  teams: {
+    id: number;
+    name: string;
+    slug: string | null;
+  }[];
+}
+
+type Payload = {
+  showModal: boolean;
+  user?: User;
+};
+
+export type State = {
+  changeMemberRole: Payload;
+  deleteMember: Payload;
+  impersonateMember: Payload;
+  inviteMember: Payload;
+};
+
+export type Action =
+  | {
+      type: "SET_CHANGE_MEMBER_ROLE_ID" | "SET_DELETE_ID" | "SET_IMPERSONATE_ID" | "INVITE_MEMBER";
+      payload: Payload;
+    }
+  | {
+      type: "CLOSE_MODAL";
+    };
+
+const initialState: State = {
+  changeMemberRole: {
+    showModal: false,
+  },
+  deleteMember: {
+    showModal: false,
+  },
+  impersonateMember: {
+    showModal: false,
+  },
+  inviteMember: {
+    showModal: false,
+  },
+};
+
+function reducer(state: State, action: Action): State {
+  switch (action.type) {
+    case "SET_CHANGE_MEMBER_ROLE_ID":
+      return { ...state, changeMemberRole: action.payload };
+    case "SET_DELETE_ID":
+      return { ...state, deleteMember: action.payload };
+    case "SET_IMPERSONATE_ID":
+      return { ...state, impersonateMember: action.payload };
+    case "INVITE_MEMBER":
+      return { ...state, inviteMember: action.payload };
+    case "CLOSE_MODAL":
+      return {
+        ...state,
+        changeMemberRole: { showModal: false },
+        deleteMember: { showModal: false },
+        impersonateMember: { showModal: false },
+        inviteMember: { showModal: false },
+      };
+    default:
+      return state;
+  }
+}
+
+export function UserListTable() {
+  const { data: session } = useSession();
+  const { data: currentMembership } = trpc.viewer.organizations.listCurrent.useQuery();
+  const tableContainerRef = useRef<HTMLDivElement>(null);
+  const [state, dispatch] = useReducer(reducer, initialState);
+  const { t } = useLocale();
+  const orgBranding = useOrgBrandingValues();
+
+  const { data, isLoading, fetchNextPage, isFetching } =
+    trpc.viewer.organizations.listMembers.useInfiniteQuery(
+      {
+        limit: 10,
+      },
+      {
+        getNextPageParam: (lastPage) => lastPage.nextCursor,
+        keepPreviousData: true,
+      }
+    );
+
+  const adminOrOwner = currentMembership?.user.role === "ADMIN" || currentMembership?.user.role === "OWNER";
+  const domain = orgBranding?.fullDomain ?? WEBAPP_URL;
+
+  const memorisedColumns = useMemo(() => {
+    const permissions = {
+      canEdit: adminOrOwner,
+      canRemove: adminOrOwner,
+      canImpersonate: false,
+    };
+    const cols: ColumnDef<User>[] = [
+      // Disabling select for this PR: Will work on actions etc in a follow up
+      // {
+      //   id: "select",
+      //   header: ({ table }) => (
+      //     <Checkbox
+      //       checked={table.getIsAllPageRowsSelected()}
+      //       onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+      //       aria-label="Select all"
+      //       className="translate-y-[2px]"
+      //     />
+      //   ),
+      //   cell: ({ row }) => (
+      //     <Checkbox
+      //       checked={row.getIsSelected()}
+      //       onCheckedChange={(value) => row.toggleSelected(!!value)}
+      //       aria-label="Select row"
+      //       className="translate-y-[2px]"
+      //     />
+      //   ),
+      // },
+      {
+        id: "member",
+        accessorFn: (data) => data.email,
+        header: "Member",
+        cell: ({ row }) => {
+          const { username, email } = row.original;
+          return (
+            <div className="flex items-center gap-2">
+              <Avatar
+                size="sm"
+                alt={username || email}
+                imageSrc={domain + "/" + username + "/avatar.png"}
+                gravatarFallbackMd5="fallback"
+              />
+              <div className="">
+                <div className="text-emphasis text-sm font-medium leading-none">
+                  {username || "No username"}
+                </div>
+                <div className="text-subtle text-sm leading-none">{email}</div>
+              </div>
+            </div>
+          );
+        },
+        filterFn: (rows, id, filterValue) => {
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore Weird typing issue
+          return rows.getValue(id).includes(filterValue);
+        },
+      },
+      {
+        id: "role",
+        accessorFn: (data) => data.role,
+        header: "Role",
+        cell: ({ row, table }) => {
+          const { role } = row.original;
+          return (
+            <Badge
+              variant={role === "MEMBER" ? "gray" : "blue"}
+              onClick={() => {
+                table.getColumn("role")?.setFilterValue(role);
+              }}>
+              {role}
+            </Badge>
+          );
+        },
+        filterFn: (rows, id, filterValue) => {
+          return filterValue.includes(rows.getValue(id));
+        },
+      },
+      {
+        id: "teams",
+        header: "Teams",
+        cell: ({ row }) => {
+          const { teams, accepted } = row.original;
+          // TODO: Implement click to filter
+          return (
+            <div className="flex h-full flex-wrap items-center gap-2">
+              {accepted ? null : (
+                <Badge variant="red" className="text-xs">
+                  Pending
+                </Badge>
+              )}
+              {teams.map((team) => (
+                <Badge key={team.id} variant="gray">
+                  {team.name}
+                </Badge>
+              ))}
+            </div>
+          );
+        },
+      },
+      {
+        id: "actions",
+        cell: ({ row }) => {
+          const user = row.original;
+          const permissionsRaw = permissions;
+          const isSelf = user.id === session?.user.id;
+
+          const permissionsForUser = {
+            canEdit: permissionsRaw.canEdit && user.accepted && !isSelf,
+            canRemove: permissionsRaw.canRemove && !isSelf,
+            canImpersonate: user.accepted && !user.disableImpersonation && !isSelf,
+            canLeave: user.accepted && isSelf,
+          };
+
+          return (
+            <TableActions
+              user={user}
+              permissionsForUser={permissionsForUser}
+              dispatch={dispatch}
+              domain={domain}
+            />
+          );
+        },
+      },
+    ];
+
+    return cols;
+  }, [session?.user.id, adminOrOwner, dispatch, domain]);
+
+  //we must flatten the array of arrays from the useInfiniteQuery hook
+  const flatData = useMemo(() => data?.pages?.flatMap((page) => page.rows) ?? [], [data]) as User[];
+  const totalDBRowCount = data?.pages?.[0]?.meta?.totalRowCount ?? 0;
+  const totalFetched = flatData.length;
+
+  //called on scroll and possibly on mount to fetch more data as the user scrolls and reaches bottom of table
+  const fetchMoreOnBottomReached = useCallback(
+    (containerRefElement?: HTMLDivElement | null) => {
+      if (containerRefElement) {
+        const { scrollHeight, scrollTop, clientHeight } = containerRefElement;
+        //once the user has scrolled within 300px of the bottom of the table, fetch more data if there is any
+        if (scrollHeight - scrollTop - clientHeight < 300 && !isFetching && totalFetched < totalDBRowCount) {
+          fetchNextPage();
+        }
+      }
+    },
+    [fetchNextPage, isFetching, totalFetched, totalDBRowCount]
+  );
+
+  useEffect(() => {
+    fetchMoreOnBottomReached(tableContainerRef.current);
+  }, [fetchMoreOnBottomReached]);
+
+  return (
+    <>
+      <DataTable
+        searchKey="member"
+        selectionOptions={[
+          {
+            label: "Add To Team",
+            onClick: () => {
+              console.log("Add To Team");
+            },
+            icon: Users,
+          },
+          {
+            label: "Delete",
+            onClick: () => {
+              console.log("Delete");
+            },
+            icon: StopCircle,
+          },
+        ]}
+        tableContainerRef={tableContainerRef}
+        tableCTA={
+          adminOrOwner && (
+            <Button
+              type="button"
+              color="primary"
+              StartIcon={Plus}
+              size="sm"
+              className="rounded-md"
+              onClick={() =>
+                dispatch({
+                  type: "INVITE_MEMBER",
+                  payload: {
+                    showModal: true,
+                  },
+                })
+              }
+              data-testid="new-organization-member-button">
+              {t("add")}
+            </Button>
+          )
+        }
+        columns={memorisedColumns}
+        data={flatData}
+        isLoading={isLoading}
+        onScroll={(e) => fetchMoreOnBottomReached(e.target as HTMLDivElement)}
+        filterableItems={[
+          {
+            tableAccessor: "role",
+            title: "Role",
+            options: [
+              { label: "Owner", value: "OWNER" },
+              { label: "Admin", value: "ADMIN" },
+              { label: "Member", value: "MEMBER" },
+            ],
+          },
+        ]}
+      />
+
+      {state.deleteMember.showModal && <DeleteMemberModal state={state} dispatch={dispatch} />}
+      {state.inviteMember.showModal && <InviteMemberModal dispatch={dispatch} />}
+      {state.impersonateMember.showModal && <ImpersonationMemberModal dispatch={dispatch} state={state} />}
+      {state.changeMemberRole.showModal && <ChangeUserRoleModal dispatch={dispatch} state={state} />}
+    </>
+  );
+}
diff --git a/packages/features/users/components/UserTable/UserTableActions.tsx b/packages/features/users/components/UserTable/UserTableActions.tsx
new file mode 100644
index 0000000000..d15148635b
--- /dev/null
+++ b/packages/features/users/components/UserTable/UserTableActions.tsx
@@ -0,0 +1,182 @@
+import { ExternalLink, MoreHorizontal, Edit2, UserX, Lock } from "lucide-react";
+
+import { classNames } from "@calcom/lib";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import {
+  ButtonGroup,
+  Tooltip,
+  Button,
+  Dropdown,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownItem,
+  DropdownMenuSeparator,
+} from "@calcom/ui";
+
+import { useOrgBrandingValues } from "../../../ee/organizations/hooks";
+import type { Action } from "./UserListTable";
+import type { User } from "./UserListTable";
+
+export function TableActions({
+  user,
+  permissionsForUser,
+  dispatch,
+  domain,
+}: {
+  user: User;
+  dispatch: React.Dispatch<Action>;
+  domain: string;
+  permissionsForUser: {
+    canEdit: boolean;
+    canRemove: boolean;
+    canImpersonate: boolean;
+  };
+}) {
+  const { t } = useLocale();
+  const orgBranding = useOrgBrandingValues();
+
+  const usersProfileUrl = domain + "/" + user.username;
+
+  return (
+    <>
+      <ButtonGroup combined containerProps={{ className: "border-default hidden md:flex" }}>
+        <Tooltip content={t("view_public_page")}>
+          <Button
+            target="_blank"
+            href={usersProfileUrl}
+            color="secondary"
+            className={classNames(!permissionsForUser.canEdit ? "rounded-r-md" : "")}
+            variant="icon"
+            StartIcon={ExternalLink}
+          />
+        </Tooltip>
+        {(permissionsForUser.canEdit || permissionsForUser.canRemove) && (
+          <Dropdown>
+            <DropdownMenuTrigger asChild>
+              <Button
+                className="radix-state-open:rounded-r-md"
+                color="secondary"
+                variant="icon"
+                StartIcon={MoreHorizontal}
+              />
+            </DropdownMenuTrigger>
+            <DropdownMenuContent>
+              {permissionsForUser.canEdit && (
+                <DropdownMenuItem>
+                  <DropdownItem
+                    type="button"
+                    onClick={() =>
+                      dispatch({
+                        type: "SET_CHANGE_MEMBER_ROLE_ID",
+                        payload: {
+                          user,
+                          showModal: true,
+                        },
+                      })
+                    }
+                    StartIcon={Edit2}>
+                    {t("edit")}
+                  </DropdownItem>
+                </DropdownMenuItem>
+              )}
+              {permissionsForUser.canImpersonate && (
+                <>
+                  <DropdownMenuItem>
+                    <DropdownItem
+                      type="button"
+                      onClick={() =>
+                        dispatch({
+                          type: "SET_IMPERSONATE_ID",
+                          payload: {
+                            user,
+                            showModal: true,
+                          },
+                        })
+                      }
+                      StartIcon={Lock}>
+                      {t("impersonate")}
+                    </DropdownItem>
+                  </DropdownMenuItem>
+                  <DropdownMenuSeparator />
+                </>
+              )}
+              {permissionsForUser.canRemove && (
+                <DropdownMenuItem>
+                  <DropdownItem
+                    type="button"
+                    onClick={() =>
+                      dispatch({
+                        type: "SET_DELETE_ID",
+                        payload: {
+                          user,
+                          showModal: true,
+                        },
+                      })
+                    }
+                    color="destructive"
+                    StartIcon={UserX}>
+                    {t("remove")}
+                  </DropdownItem>
+                </DropdownMenuItem>
+              )}
+            </DropdownMenuContent>
+          </Dropdown>
+        )}
+      </ButtonGroup>
+      <div className="flex md:hidden">
+        <Dropdown>
+          <DropdownMenuTrigger asChild>
+            <Button type="button" variant="icon" color="minimal" StartIcon={MoreHorizontal} />
+          </DropdownMenuTrigger>
+          <DropdownMenuContent>
+            <DropdownMenuItem className="outline-none">
+              <DropdownItem type="button" StartIcon={ExternalLink}>
+                {t("view_public_page")}
+              </DropdownItem>
+            </DropdownMenuItem>
+            {permissionsForUser.canEdit && (
+              <>
+                <DropdownMenuItem>
+                  <DropdownItem
+                    type="button"
+                    onClick={() =>
+                      dispatch({
+                        type: "SET_IMPERSONATE_ID",
+                        payload: {
+                          user,
+                          showModal: true,
+                        },
+                      })
+                    }
+                    StartIcon={Edit2}>
+                    {t("edit")}
+                  </DropdownItem>
+                </DropdownMenuItem>
+              </>
+            )}
+            {permissionsForUser.canRemove && (
+              <DropdownMenuItem>
+                <DropdownItem
+                  type="button"
+                  color="destructive"
+                  onClick={() =>
+                    dispatch({
+                      type: "SET_DELETE_ID",
+                      payload: {
+                        user,
+                        showModal: true,
+                      },
+                    })
+                  }
+                  StartIcon={UserX}>
+                  {t("remove")}
+                </DropdownItem>
+              </DropdownMenuItem>
+            )}
+          </DropdownMenuContent>
+        </Dropdown>
+      </div>
+    </>
+  );
+}
diff --git a/packages/lib/hooks/usePagination.ts b/packages/lib/hooks/usePagination.ts
new file mode 100644
index 0000000000..78e64a9f29
--- /dev/null
+++ b/packages/lib/hooks/usePagination.ts
@@ -0,0 +1,28 @@
+import type { PaginationState } from "@tanstack/react-table";
+import { useState, useMemo } from "react";
+
+export function usePagination({
+  defaultPageIndex = 1,
+  defaultPageSize = 20,
+}: {
+  defaultPageIndex?: number;
+  defaultPageSize?: number;
+}) {
+  const [{ pageIndex, pageSize }, setPagination] = useState<PaginationState>({
+    pageIndex: defaultPageIndex,
+    pageSize: defaultPageSize,
+  });
+
+  const pagination = useMemo(
+    () => ({
+      pageIndex,
+      pageSize,
+    }),
+    [pageIndex, pageSize]
+  );
+
+  return {
+    pagination,
+    setPagination,
+  };
+}
diff --git a/packages/trpc/server/routers/viewer/organizations/_router.tsx b/packages/trpc/server/routers/viewer/organizations/_router.tsx
index d9c316a89a..4462eb4b64 100644
--- a/packages/trpc/server/routers/viewer/organizations/_router.tsx
+++ b/packages/trpc/server/routers/viewer/organizations/_router.tsx
@@ -4,6 +4,7 @@ import { ZAdminVerifyInput } from "./adminVerify.schema";
 import { ZCreateInputSchema } from "./create.schema";
 import { ZCreateTeamsSchema } from "./createTeams.schema";
 import { ZGetMembersInput } from "./getMembers.schema";
+import { ZListMembersSchema } from "./listMembers.schema";
 import { ZSetPasswordSchema } from "./setPassword.schema";
 import { ZUpdateInputSchema } from "./update.schema";
 import { ZVerifyCodeInputSchema } from "./verifyCode.schema";
@@ -194,7 +195,7 @@ export const viewerOrganizationsRouter = router({
       input,
     });
   }),
-  listMembers: authedProcedure.query(async ({ ctx }) => {
+  listMembers: authedProcedure.input(ZListMembersSchema).query(async ({ ctx, input }) => {
     if (!UNSTABLE_HANDLER_CACHE.listMembers) {
       UNSTABLE_HANDLER_CACHE.listMembers = await import("./listMembers.handler").then(
         (mod) => mod.listMembersHandler
@@ -208,6 +209,7 @@ export const viewerOrganizationsRouter = router({
 
     return UNSTABLE_HANDLER_CACHE.listMembers({
       ctx,
+      input,
     });
   }),
   getBrand: authedProcedure.query(async ({ ctx }) => {
diff --git a/packages/trpc/server/routers/viewer/organizations/adminVerify.handler.ts b/packages/trpc/server/routers/viewer/organizations/adminVerify.handler.ts
index e773658449..7b3b238c46 100644
--- a/packages/trpc/server/routers/viewer/organizations/adminVerify.handler.ts
+++ b/packages/trpc/server/routers/viewer/organizations/adminVerify.handler.ts
@@ -75,7 +75,6 @@ export const adminVerifyHandler = async ({ input }: AdminVerifyOptions) => {
   });
 
   const userIds = foundUsersWithMatchingEmailDomain.map((user) => user.id);
-  const userEmails = foundUsersWithMatchingEmailDomain.map((user) => user.email);
 
   await prisma.$transaction([
     prisma.membership.updateMany({
@@ -108,14 +107,6 @@ export const adminVerifyHandler = async ({ input }: AdminVerifyOptions) => {
         organizationId: input.orgId,
       },
     }),
-    prisma.verificationToken.deleteMany({
-      where: {
-        identifier: {
-          in: userEmails,
-        },
-        teamId: input.orgId,
-      },
-    }),
   ]);
 
   return {
diff --git a/packages/trpc/server/routers/viewer/organizations/listMembers.handler.ts b/packages/trpc/server/routers/viewer/organizations/listMembers.handler.ts
index 28fed7436a..07c6cce118 100644
--- a/packages/trpc/server/routers/viewer/organizations/listMembers.handler.ts
+++ b/packages/trpc/server/routers/viewer/organizations/listMembers.handler.ts
@@ -1,36 +1,102 @@
-import { markdownToSafeHTML } from "@calcom/lib/markdownToSafeHTML";
-import { getTeamWithMembers } from "@calcom/lib/server/queries/teams";
-import type { MembershipRole } from "@calcom/prisma/enums";
-
 import { TRPCError } from "@trpc/server";
 
 import type { TrpcSessionUser } from "../../../trpc";
+import type { TListMembersSchema } from "./listMembers.schema";
 
 type GetOptions = {
   ctx: {
     user: NonNullable<TrpcSessionUser>;
   };
+  input: TListMembersSchema;
 };
 
-export const listMembersHandler = async ({ ctx }: GetOptions) => {
+export const listMembersHandler = async ({ ctx, input }: GetOptions) => {
   const organizationId = ctx.user.organizationId;
+
   if (!organizationId) {
     throw new TRPCError({ code: "NOT_FOUND", message: "User is not part of any organization." });
   }
-  const team = await getTeamWithMembers(organizationId, undefined, ctx.user.id);
 
-  if (!team) {
-    throw new TRPCError({ code: "NOT_FOUND", message: "Team not found." });
+  const { cursor, limit } = input;
+
+  const getTotalMembers = await prisma?.membership.count({
+    where: {
+      teamId: organizationId,
+    },
+  });
+
+  // I couldnt get this query to work direct on membership table
+  const teamMembers = await prisma?.membership.findMany({
+    where: {
+      teamId: organizationId,
+    },
+    select: {
+      id: true,
+      role: true,
+      accepted: true,
+      user: {
+        select: {
+          id: true,
+          username: true,
+          email: true,
+          timeZone: true,
+          disableImpersonation: true,
+          completedOnboarding: true,
+          teams: {
+            select: {
+              team: {
+                select: {
+                  id: true,
+                  name: true,
+                  slug: true,
+                },
+              },
+            },
+          },
+        },
+      },
+    },
+    cursor: cursor ? { id: cursor } : undefined,
+    take: limit + 1, // We take +1 as itll be used for the next cursor
+    orderBy: {
+      id: "asc",
+    },
+  });
+
+  let nextCursor: typeof cursor | undefined = undefined;
+  if (teamMembers && teamMembers.length > limit) {
+    const nextItem = teamMembers.pop();
+    nextCursor = nextItem!.id;
   }
 
-  const membership = team?.members.find((membership) => membership.id === ctx.user.id);
+  const members = teamMembers?.map((member) => {
+    return {
+      id: member.user.id,
+      username: member.user.username,
+      email: member.user.email,
+      timeZone: member.user.timeZone,
+      role: member.role,
+      accepted: member.accepted,
+      disableImpersonation: member.user.disableImpersonation,
+      completedOnboarding: member.user.completedOnboarding,
+      teams: member.user.teams
+        .filter((team) => team.team.id !== organizationId) // In this context we dont want to return the org team
+        .map((team) => {
+          if (team.team.id === organizationId) return;
+          return {
+            id: team.team.id,
+            name: team.team.name,
+            slug: team.team.slug,
+          };
+        }),
+    };
+  });
 
   return {
-    ...team,
-    safeBio: markdownToSafeHTML(team.bio),
-    membership: {
-      role: membership?.role as MembershipRole,
-      accepted: membership?.accepted,
+    rows: members || [],
+    nextCursor,
+    meta: {
+      totalRowCount: getTotalMembers || 0,
     },
   };
 };
diff --git a/packages/trpc/server/routers/viewer/organizations/listMembers.schema.ts b/packages/trpc/server/routers/viewer/organizations/listMembers.schema.ts
new file mode 100644
index 0000000000..4f07429566
--- /dev/null
+++ b/packages/trpc/server/routers/viewer/organizations/listMembers.schema.ts
@@ -0,0 +1,8 @@
+import { z } from "zod";
+
+export const ZListMembersSchema = z.object({
+  limit: z.number().min(1).max(100),
+  cursor: z.number().nullish(),
+});
+
+export type TListMembersSchema = z.infer<typeof ZListMembersSchema>;
diff --git a/packages/types/tanstack-table.d.ts b/packages/types/tanstack-table.d.ts
new file mode 100644
index 0000000000..bcc1837d06
--- /dev/null
+++ b/packages/types/tanstack-table.d.ts
@@ -0,0 +1,7 @@
+import "@tanstack/react-table";
+
+declare module "@tanstack/table-core" {
+  interface ColumnMeta<TData extends RowData, TValue> {
+    hasPermissions?: (data?: TData) => boolean; // We can conditionally render a column based on this callback -> User doesnt have admin for example.
+  }
+}
diff --git a/packages/ui/components/command/index.tsx b/packages/ui/components/command/index.tsx
new file mode 100644
index 0000000000..183df6c828
--- /dev/null
+++ b/packages/ui/components/command/index.tsx
@@ -0,0 +1,136 @@
+import type { DialogProps } from "@radix-ui/react-dialog";
+import { Command as CommandPrimitive } from "cmdk";
+import * as React from "react";
+
+import { classNames } from "@calcom/lib";
+
+import { Dialog, DialogContent } from "../dialog";
+
+const Command = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive
+    ref={ref}
+    className={classNames(
+      "bg-popover text-default flex h-full w-full flex-col overflow-hidden rounded-md",
+      className
+    )}
+    {...props}
+  />
+));
+Command.displayName = CommandPrimitive.displayName;
+
+type CommandDialogProps = DialogProps;
+
+const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
+  return (
+    <Dialog {...props}>
+      <DialogContent className="overflow-hidden p-0 shadow-lg">
+        <Command className="[&_[cmdk-group-heading]]:text-muted hover:bg-subtle [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+const CommandInput = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Input>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
+>(({ className, ...props }, ref) => (
+  <div className="flex items-center border-b px-3 py-2" cmdk-input-wrapper="">
+    <CommandPrimitive.Input
+      ref={ref}
+      className={classNames(
+        "placeholder:text-muted hover:border-emphasis dark:focus:border-emphasis border-default bg-default placeholder:text-muted text-emphasis disabled:hover:border-default disabled:bg-subtle focus:ring-brand-default block flex h-[28px] w-full rounded-md rounded-md border bg-transparent px-3 py-1.5 text-sm text-sm leading-4 outline-none focus:border-neutral-300 focus:outline-none focus:ring-2 disabled:cursor-not-allowed disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  </div>
+));
+
+CommandInput.displayName = CommandPrimitive.Input.displayName;
+
+const CommandList = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.List
+    ref={ref}
+    className={classNames("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
+    {...props}
+  />
+));
+
+CommandList.displayName = CommandPrimitive.List.displayName;
+
+const CommandEmpty = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Empty>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+>((props, ref) => <CommandPrimitive.Empty ref={ref} className="py-6 text-center text-sm" {...props} />);
+
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
+
+const CommandGroup = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Group>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Group
+    ref={ref}
+    className={classNames(
+      "text-default [&_[cmdk-group-heading]]:text-muted overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
+      className
+    )}
+    {...props}
+  />
+));
+
+CommandGroup.displayName = CommandPrimitive.Group.displayName;
+
+const CommandSeparator = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Separator
+    ref={ref}
+    className={classNames("bg-border -mx-1 h-px", className)}
+    {...props}
+  />
+));
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
+
+const CommandItem = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Item
+    ref={ref}
+    className={classNames(
+      "aria-selected:bg-subtle aria-selected:text-emphasis relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  />
+));
+
+CommandItem.displayName = CommandPrimitive.Item.displayName;
+
+const CommandShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
+  return <span className={classNames("text-muted ml-auto text-xs tracking-widest", className)} {...props} />;
+};
+
+CommandShortcut.displayName = "CommandShortcut";
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+};
diff --git a/packages/ui/components/data-table/DataTableFilter.tsx b/packages/ui/components/data-table/DataTableFilter.tsx
new file mode 100644
index 0000000000..3ec728b20e
--- /dev/null
+++ b/packages/ui/components/data-table/DataTableFilter.tsx
@@ -0,0 +1,116 @@
+import type { Column } from "@tanstack/react-table";
+import type { LucideIcon } from "lucide-react";
+import { Check, Filter } from "lucide-react";
+
+import { classNames } from "@calcom/lib";
+
+import { Badge } from "../badge";
+import { Button } from "../button";
+import {
+  Command,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandSeparator,
+} from "../command";
+import { Popover, PopoverTrigger, PopoverContent } from "../popover";
+
+interface DataTableFilter<TData, TValue> {
+  column?: Column<TData, TValue>;
+  title?: string;
+  options: {
+    label: string;
+    value: string;
+    icon?: LucideIcon;
+  }[];
+}
+export function DataTableFilter<TData, TValue>({ column, title, options }: DataTableFilter<TData, TValue>) {
+  const facets = column?.getFacetedUniqueValues();
+  const selectedValues = new Set(column?.getFilterValue() as string[]);
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button color="secondary" size="sm" className="border-subtle h-8 rounded-md">
+          <Filter className="mr-2 h-4 w-4" />
+          {title}
+          {selectedValues?.size > 0 && (
+            <>
+              <div className="ml-2 hidden space-x-1 md:flex">
+                {selectedValues.size > 2 ? (
+                  <Badge color="gray" className="rounded-sm px-1 font-normal">
+                    {selectedValues.size}
+                  </Badge>
+                ) : (
+                  options
+                    .filter((option) => selectedValues.has(option.value))
+                    .map((option) => (
+                      <Badge color="gray" key={option.value} className="rounded-sm px-1 font-normal">
+                        {option.label}
+                      </Badge>
+                    ))
+                )}
+              </div>
+            </>
+          )}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[200px] p-0" align="start">
+        <Command>
+          <CommandInput placeholder={title} />
+          <CommandList>
+            <CommandEmpty>No results found.</CommandEmpty>
+            <CommandGroup>
+              {options.map((option) => {
+                // TODO: It would be nice to pull these from data instead of options
+                const isSelected = selectedValues.has(option.value);
+                return (
+                  <CommandItem
+                    key={option.value}
+                    onSelect={() => {
+                      if (isSelected) {
+                        selectedValues.delete(option.value);
+                      } else {
+                        selectedValues.add(option.value);
+                      }
+                      const filterValues = Array.from(selectedValues);
+                      column?.setFilterValue(filterValues.length ? filterValues : undefined);
+                    }}>
+                    <div
+                      className={classNames(
+                        "border-subtle mr-2 flex h-4 w-4 items-center justify-center rounded-sm border",
+                        isSelected ? "text-emphasis" : "opacity-50 [&_svg]:invisible"
+                      )}>
+                      <Check className={classNames("h-4 w-4")} />
+                    </div>
+                    {option.icon && <option.icon className="text-muted mr-2 h-4 w-4" />}
+                    <span>{option.label}</span>
+                    {facets?.get(option.value) && (
+                      <span className="ml-auto flex h-4 w-4 items-center justify-center font-mono text-xs">
+                        {facets.get(option.value)}
+                      </span>
+                    )}
+                  </CommandItem>
+                );
+              })}
+            </CommandGroup>
+            {selectedValues.size > 0 && (
+              <>
+                <CommandSeparator />
+                <CommandGroup>
+                  <CommandItem
+                    onSelect={() => column?.setFilterValue(undefined)}
+                    className="justify-center text-center">
+                    Clear filters
+                  </CommandItem>
+                </CommandGroup>
+              </>
+            )}
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}
diff --git a/packages/ui/components/data-table/DataTablePagination.tsx b/packages/ui/components/data-table/DataTablePagination.tsx
new file mode 100644
index 0000000000..3d3cb7add0
--- /dev/null
+++ b/packages/ui/components/data-table/DataTablePagination.tsx
@@ -0,0 +1,60 @@
+import type { Table } from "@tanstack/react-table";
+import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from "lucide-react";
+
+import { Button } from "../button";
+
+interface DataTablePaginationProps<TData> {
+  table: Table<TData>;
+}
+
+export function DataTablePagination<TData>({ table }: DataTablePaginationProps<TData>) {
+  return (
+    <div className="flex items-center justify-between px-2">
+      <div className="text-muted-foreground flex-1 text-sm">
+        {table.getFilteredSelectedRowModel().rows.length} of {table.getFilteredRowModel().rows.length} row(s)
+        selected.
+      </div>
+      <div className="flex items-center space-x-6 lg:space-x-8">
+        <div className="flex w-[100px] items-center justify-center text-sm font-medium">
+          Page {table.getState().pagination.pageIndex} of {table.getPageCount() - 1}
+        </div>
+        <div className="flex items-center space-x-2">
+          <Button
+            color="secondary"
+            variant="icon"
+            StartIcon={ChevronsLeft}
+            className="hidden h-8 w-8 p-0 lg:flex"
+            onClick={() => table.setPageIndex(0)}>
+            <span className="sr-only">Go to first page</span>
+          </Button>
+          <Button
+            color="secondary"
+            variant="icon"
+            className="h-8 w-8 p-0"
+            onClick={() => table.previousPage()}
+            disabled={!table.getCanPreviousPage()}
+            StartIcon={ChevronLeft}>
+            <span className="sr-only">Go to previous page</span>
+          </Button>
+          <Button
+            color="secondary"
+            variant="icon"
+            StartIcon={ChevronRight}
+            className="h-8 w-8 p-0"
+            disabled={!table.getCanNextPage()}
+            onClick={() => table.nextPage()}>
+            <span className="sr-only">Go to next page</span>
+          </Button>
+          <Button
+            color="secondary"
+            variant="icon"
+            className="hidden h-8 w-8 p-0 lg:flex"
+            StartIcon={ChevronsRight}
+            onClick={() => table.setPageIndex(table.getPageCount())}>
+            <span className="sr-only">Go to last page</span>
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/packages/ui/components/data-table/DataTableSelectionBar.tsx b/packages/ui/components/data-table/DataTableSelectionBar.tsx
new file mode 100644
index 0000000000..ccd3728bce
--- /dev/null
+++ b/packages/ui/components/data-table/DataTableSelectionBar.tsx
@@ -0,0 +1,31 @@
+import type { Table } from "@tanstack/react-table";
+
+import type { SVGComponent } from "@calcom/types/SVGComponent";
+
+import { Button } from "../button";
+
+interface DataTableSelectionBarProps<TData> {
+  table: Table<TData>;
+  actions?: {
+    label: string;
+    onClick: () => void;
+    icon?: SVGComponent;
+  }[];
+}
+
+export function DataTableSelectionBar<TData>({ table, actions }: DataTableSelectionBarProps<TData>) {
+  const numberOfSelectedRows = table.getSelectedRowModel().rows.length;
+
+  if (numberOfSelectedRows === 0) return null;
+
+  return (
+    <div className="bg-brand-default text-brand item-center absolute bottom-0 left-1/2 flex -translate-x-1/2 gap-4 rounded-lg p-2">
+      <div className="text-brand-subtle my-auto px-2">{numberOfSelectedRows} selected</div>
+      {actions?.map((action) => (
+        <Button aria-label={action.label} onClick={action.onClick} StartIcon={action.icon} key={action.label}>
+          {action.label}
+        </Button>
+      ))}
+    </div>
+  );
+}
diff --git a/packages/ui/components/data-table/DataTableToolbar.tsx b/packages/ui/components/data-table/DataTableToolbar.tsx
new file mode 100644
index 0000000000..9e8250b3ba
--- /dev/null
+++ b/packages/ui/components/data-table/DataTableToolbar.tsx
@@ -0,0 +1,76 @@
+"use client";
+
+import type { Table } from "@tanstack/react-table";
+import type { LucideIcon } from "lucide-react";
+import { X } from "lucide-react";
+
+import { Button } from "../button";
+import { Input } from "../form";
+import { DataTableFilter } from "./DataTableFilter";
+
+export type FilterableItems = {
+  title: string;
+  tableAccessor: string;
+  options: {
+    label: string;
+    value: string;
+    icon?: LucideIcon;
+  }[];
+}[];
+
+interface DataTableToolbarProps<TData> {
+  table: Table<TData>;
+  filterableItems?: FilterableItems;
+  searchKey?: string;
+  tableCTA?: React.ReactNode;
+}
+
+export function DataTableToolbar<TData>({
+  table,
+  filterableItems,
+  tableCTA,
+  searchKey,
+}: DataTableToolbarProps<TData>) {
+  // TODO: Is there a better way to check if the table is filtered?
+  // If you select ALL filters for a column, the table is not filtered and we dont get a reset button
+  const isFiltered = table.getState().columnFilters.length > 0;
+
+  return (
+    <div className="flex items-center justify-end space-x-2">
+      {searchKey && (
+        <Input
+          className="max-w-64 mb-0 mr-auto"
+          placeholder="Search"
+          value={(table.getColumn(searchKey)?.getFilterValue() as string) ?? ""}
+          onChange={(event) => table.getColumn(searchKey)?.setFilterValue(event.target.value)}
+        />
+      )}
+      {isFiltered && (
+        <Button
+          color="minimal"
+          EndIcon={X}
+          onClick={() => table.resetColumnFilters()}
+          className="h-8 px-2 lg:px-3">
+          Reset
+        </Button>
+      )}
+
+      {filterableItems &&
+        filterableItems?.map((item) => {
+          const foundColumn = table.getColumn(item.tableAccessor);
+          if (foundColumn?.getCanFilter()) {
+            return (
+              <DataTableFilter
+                column={foundColumn}
+                title={item.title}
+                options={item.options}
+                key={item.title}
+              />
+            );
+          }
+        })}
+
+      {tableCTA ? tableCTA : null}
+    </div>
+  );
+}
diff --git a/packages/ui/components/data-table/__storybook__/columns.tsx b/packages/ui/components/data-table/__storybook__/columns.tsx
new file mode 100644
index 0000000000..e041aa9bfa
--- /dev/null
+++ b/packages/ui/components/data-table/__storybook__/columns.tsx
@@ -0,0 +1,78 @@
+import type { ColumnDef } from "@tanstack/react-table";
+
+import { Badge } from "../../badge";
+import { Checkbox } from "../../form";
+import type { FilterableItems } from "../DataTableToolbar";
+import type { DataTableUserStorybook } from "./data";
+
+export const columns: ColumnDef<DataTableUserStorybook>[] = [
+  {
+    id: "select",
+    header: ({ table }) => (
+      <Checkbox
+        checked={table.getIsAllPageRowsSelected()}
+        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+        aria-label="Select all"
+        className="translate-y-[2px]"
+      />
+    ),
+    cell: ({ row }) => (
+      <Checkbox
+        checked={row.getIsSelected()}
+        onCheckedChange={(value) => row.toggleSelected(!!value)}
+        aria-label="Select row"
+        className="translate-y-[2px]"
+      />
+    ),
+  },
+  {
+    accessorKey: "username",
+    header: "Username",
+  },
+  {
+    accessorKey: "email",
+    header: "Email",
+  },
+  {
+    accessorKey: "role",
+    header: "Role",
+    cell: ({ row, table }) => {
+      const user = row.original;
+      const BadgeColor = user.role === "admin" ? "blue" : "gray";
+
+      return (
+        <Badge
+          color={BadgeColor}
+          onClick={() => {
+            table.getColumn("role")?.setFilterValue(user.role);
+          }}>
+          {user.role}
+        </Badge>
+      );
+    },
+    filterFn: (rows, id, filterValue) => {
+      return filterValue.includes(rows.getValue(id));
+    },
+  },
+];
+
+export const filterableItems: FilterableItems = [
+  {
+    title: "Role",
+    tableAccessor: "role",
+    options: [
+      {
+        label: "Admin",
+        value: "admin",
+      },
+      {
+        label: "User",
+        value: "user",
+      },
+      {
+        label: "Owner",
+        value: "owner",
+      },
+    ],
+  },
+];
diff --git a/packages/ui/components/data-table/__storybook__/data.ts b/packages/ui/components/data-table/__storybook__/data.ts
new file mode 100644
index 0000000000..c5d0157963
--- /dev/null
+++ b/packages/ui/components/data-table/__storybook__/data.ts
@@ -0,0 +1,100 @@
+import { StopCircle, Users } from "lucide-react";
+
+export type DataTableUserStorybook = {
+  id: string;
+  username: string;
+  email: string;
+  role: "admin" | "user";
+};
+
+export const dataTableSelectionActions = [
+  {
+    label: "Add To Team",
+    onClick: () => {
+      console.log("Add To Team");
+    },
+    icon: Users,
+  },
+  {
+    label: "Delete",
+    onClick: () => {
+      console.log("Delete");
+    },
+    icon: StopCircle,
+  },
+];
+
+export const dataTableDemousers: DataTableUserStorybook[] = [
+  {
+    id: "728ed52f",
+    email: "m@example.com",
+    username: "m",
+    role: "admin",
+  },
+  {
+    id: "489e1d42",
+    email: "example@gmail.com",
+    username: "e",
+    role: "user",
+  },
+  {
+    id: "7b8a6f1d-2d2d-4d29-9c1a-0a8b3f5f9d2f",
+    email: "Keshawn_Schroeder@hotmail.com",
+    username: "Ava_Waelchi",
+    role: "user",
+  },
+  {
+    id: "f4d9e2a3-7e3c-4d6e-8e4c-8d0d7d1c2c9b",
+    email: "Jovanny_Grant@hotmail.com",
+    username: "Kamren_Gerhold",
+    role: "admin",
+  },
+  {
+    id: "1b2a4b6e-5b2d-4c38-9c7e-9d5e8f9c0a6a",
+    email: "Emilie.McKenzie@yahoo.com",
+    username: "Lennie_Harber",
+    role: "user",
+  },
+  {
+    id: "d6f3e6e9-9c2a-4c8a-8f3c-0d63a0eaf5a5",
+    email: "Jolie_Beatty@hotmail.com",
+    username: "Lorenzo_Will",
+    role: "admin",
+  },
+  {
+    id: "7c1e5d1d-8b9c-4b1c-9d1b-7d9f8b5a7e3e",
+    email: "Giovanny_Cruickshank@hotmail.com",
+    username: "Monserrat_Lang",
+    role: "user",
+  },
+  {
+    id: "f7d8b7a2-0a5c-4f8d-9f4f-8d1a2c3e4b3e",
+    email: "Lela_Haag@hotmail.com",
+    username: "Eddie_Effertz",
+    role: "user",
+  },
+  {
+    id: "2f8b9c8d-1a5c-4e3d-9b7a-6c5d4e3f2b1a",
+    email: "Lura_Kohler@gmail.com",
+    username: "Alyce_Olson",
+    role: "user",
+  },
+  {
+    id: "d8c7b6a5-4e3d-2b1a-9c8d-1f2e3d4c5b6a",
+    email: "Maurice.Koch@hotmail.com",
+    username: "Jovanny_Kiehn",
+    role: "admin",
+  },
+  {
+    id: "3c2b1a5d-4e3d-8c7b-9a6f-0d1e2f3g4h5i",
+    email: "Brenda_Bernhard@yahoo.com",
+    username: "Aurelia_Kemmer",
+    role: "user",
+  },
+  {
+    id: "e4d3c2b1-5e4d-3c2b-1a9f-8g7h6i5j4k3l",
+    email: "Lorenzo_Rippin@hotmail.com",
+    username: "Waino_Lang",
+    role: "admin",
+  },
+];
diff --git a/packages/ui/components/data-table/__storybook__/datatable.stories.mdx b/packages/ui/components/data-table/__storybook__/datatable.stories.mdx
new file mode 100644
index 0000000000..0de5d8af1b
--- /dev/null
+++ b/packages/ui/components/data-table/__storybook__/datatable.stories.mdx
@@ -0,0 +1,27 @@
+import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";
+
+import {
+  Examples,
+  Example,
+  Note,
+  Title,
+  CustomArgsTable,
+  VariantsTable,
+  VariantRow,
+} from "@calcom/storybook/components";
+
+import { DataTable } from "../";
+import { columns, filterableItems } from "./columns";
+import { dataTableDemousers,dataTableSelectionActions } from "./data";
+
+<Meta title="UI/table/data-table" component={DataTable} />
+
+<Title title="Data-table" suffix="Brief" subtitle="Version 2.0 — Last Update: 06 Jan 2023" />
+
+## Definition
+
+<Canvas>
+  <Story name="Datatable">
+    <DataTable columns={columns} data={dataTableDemousers} filterableItems={filterableItems} searchKey="username" selectionOptions={dataTableSelectionActions} />
+  </Story>
+</Canvas>
diff --git a/packages/ui/components/data-table/index.tsx b/packages/ui/components/data-table/index.tsx
new file mode 100644
index 0000000000..21cf8e768e
--- /dev/null
+++ b/packages/ui/components/data-table/index.tsx
@@ -0,0 +1,173 @@
+import type {
+  ColumnDef,
+  ColumnFiltersState,
+  Row,
+  SortingState,
+  VisibilityState,
+} from "@tanstack/react-table";
+import {
+  flexRender,
+  getCoreRowModel,
+  getFacetedRowModel,
+  getFacetedUniqueValues,
+  getFilteredRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
+import { useState } from "react";
+import { useVirtual } from "react-virtual";
+
+import type { SVGComponent } from "@calcom/types/SVGComponent";
+
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../table/TableNew";
+import { DataTableSelectionBar } from "./DataTableSelectionBar";
+import type { FilterableItems } from "./DataTableToolbar";
+import { DataTableToolbar } from "./DataTableToolbar";
+
+export interface DataTableProps<TData, TValue> {
+  tableContainerRef: React.RefObject<HTMLDivElement>;
+  columns: ColumnDef<TData, TValue>[];
+  data: TData[];
+  searchKey?: string;
+  filterableItems?: FilterableItems;
+  selectionOptions?: {
+    label: string;
+    onClick: () => void;
+    icon?: SVGComponent;
+  }[];
+  tableCTA?: React.ReactNode;
+  isLoading?: boolean;
+  onScroll?: (e: React.UIEvent<HTMLDivElement, UIEvent>) => void;
+  CTA?: React.ReactNode;
+}
+
+export function DataTable<TData, TValue>({
+  columns,
+  data,
+  filterableItems,
+  tableCTA,
+  searchKey,
+  selectionOptions,
+  tableContainerRef,
+  isLoading,
+  onScroll,
+}: DataTableProps<TData, TValue>) {
+  const [rowSelection, setRowSelection] = useState({});
+  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});
+  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
+  const [sorting, setSorting] = useState<SortingState>([]);
+
+  const table = useReactTable({
+    data,
+    columns,
+    state: {
+      sorting,
+      columnVisibility,
+      rowSelection,
+      columnFilters,
+    },
+    enableRowSelection: true,
+    debugTable: true,
+    manualPagination: true,
+    onRowSelectionChange: setRowSelection,
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    onColumnVisibilityChange: setColumnVisibility,
+    getCoreRowModel: getCoreRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFacetedRowModel: getFacetedRowModel(),
+    getFacetedUniqueValues: getFacetedUniqueValues(),
+  });
+
+  const { rows } = table.getRowModel();
+
+  const rowVirtualizer = useVirtual({
+    parentRef: tableContainerRef,
+    size: rows.length,
+    overscan: 10,
+  });
+  const { virtualItems: virtualRows, totalSize } = rowVirtualizer;
+  const paddingTop = virtualRows.length > 0 ? virtualRows?.[0]?.start || 0 : 0;
+  const paddingBottom =
+    virtualRows.length > 0 ? totalSize - (virtualRows?.[virtualRows.length - 1]?.end || 0) : 0;
+
+  return (
+    <div className="relative space-y-4">
+      <DataTableToolbar
+        table={table}
+        filterableItems={filterableItems}
+        searchKey={searchKey}
+        tableCTA={tableCTA}
+      />
+      <div
+        className="rounded-md border"
+        ref={tableContainerRef}
+        onScroll={onScroll}
+        style={{
+          height: "calc(100vh - 30vh)",
+          overflow: "auto",
+        }}>
+        <Table>
+          <TableHeader
+            style={{
+              position: "sticky",
+              top: 0,
+              zIndex: 1,
+            }}>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id}>
+                {headerGroup.headers.map((header) => {
+                  return (
+                    <TableHead key={header.id}>
+                      {header.isPlaceholder
+                        ? null
+                        : flexRender(header.column.columnDef.header, header.getContext())}
+                    </TableHead>
+                  );
+                })}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {paddingTop > 0 && (
+              <tr>
+                <td style={{ height: `${paddingTop}px` }} />
+              </tr>
+            )}
+            {virtualRows && !isLoading ? (
+              virtualRows.map((virtualRow) => {
+                const row = rows[virtualRow.index] as Row<TData>;
+
+                return (
+                  <TableRow key={row.id} data-state={row.getIsSelected() && "selected"}>
+                    {row.getVisibleCells().map((cell) => {
+                      return (
+                        <TableCell key={cell.id}>
+                          {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                        </TableCell>
+                      );
+                    })}
+                  </TableRow>
+                );
+              })
+            ) : (
+              <TableRow>
+                <TableCell colSpan={columns.length} className="h-24 text-center">
+                  No results.
+                </TableCell>
+              </TableRow>
+            )}
+            {paddingBottom > 0 && (
+              <tr>
+                <td style={{ height: `${paddingBottom}px` }} />
+              </tr>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+      {/* <DataTablePagination table={table} /> */}
+      <DataTableSelectionBar table={table} actions={selectionOptions} />
+    </div>
+  );
+}
diff --git a/packages/ui/components/dialog/Dialog.tsx b/packages/ui/components/dialog/Dialog.tsx
index f481fa98c3..7555bec29b 100644
--- a/packages/ui/components/dialog/Dialog.tsx
+++ b/packages/ui/components/dialog/Dialog.tsx
@@ -143,6 +143,7 @@ export function DialogFooter(props: {
   return (
     <div className={classNames("bg-default sticky bottom-0", props.className)}>
       {props.showDivider && (
+        // TODO: the -mx-8 is causing overflow in the dialog buttons
         <hr className={classNames("border-subtle -mx-8", props.customDividerClassNames)} />
       )}
       <div
diff --git a/packages/ui/components/form/checkbox/Checkbox.tsx b/packages/ui/components/form/checkbox/Checkbox.tsx
index 1cde1a388c..fbf0624059 100644
--- a/packages/ui/components/form/checkbox/Checkbox.tsx
+++ b/packages/ui/components/form/checkbox/Checkbox.tsx
@@ -1,4 +1,6 @@
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import { useId } from "@radix-ui/react-id";
+import { Check } from "lucide-react";
 import type { InputHTMLAttributes } from "react";
 import React, { forwardRef } from "react";
 
@@ -14,6 +16,24 @@ type Props = InputHTMLAttributes<HTMLInputElement> & {
   descriptionClassName?: string;
 };
 
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={classNames(
+      "border-default data-[state=checked]:bg-brand-default data-[state=checked]:text-brand peer h-4 w-4 shrink-0 rounded-[4px] border ring-offset-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed",
+      className
+    )}
+    {...props}>
+    <CheckboxPrimitive.Indicator className={classNames("flex items-center justify-center text-current")}>
+      <Check className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+));
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+
 const CheckboxField = forwardRef<HTMLInputElement, Props>(
   ({ label, description, error, disabled, ...rest }, ref) => {
     const descriptionAsLabel = !label || rest.descriptionAsLabel;
@@ -79,4 +99,4 @@ const CheckboxField = forwardRef<HTMLInputElement, Props>(
 
 CheckboxField.displayName = "CheckboxField";
 
-export default CheckboxField;
+export { Checkbox, CheckboxField };
diff --git a/packages/ui/components/form/checkbox/checkbox.stories.mdx b/packages/ui/components/form/checkbox/checkbox.stories.mdx
index 16243c02d1..128d7b4529 100644
--- a/packages/ui/components/form/checkbox/checkbox.stories.mdx
+++ b/packages/ui/components/form/checkbox/checkbox.stories.mdx
@@ -1,6 +1,6 @@
 import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
 import { Examples, Example, Note, Title,CustomArgsTable,VariantsTable,VariantRow } from '@calcom/storybook/components'
-import Checkbox from './Checkbox';
+import {CheckboxField as Checkbox} from './Checkbox';
 
 
 <Meta title="UI/Form/Checkbox" component={Checkbox} />
diff --git a/packages/ui/components/form/checkbox/index.ts b/packages/ui/components/form/checkbox/index.ts
index 3b0f20df5c..d29aab1b85 100644
--- a/packages/ui/components/form/checkbox/index.ts
+++ b/packages/ui/components/form/checkbox/index.ts
@@ -1,3 +1,3 @@
-export { default as Checkbox } from "./Checkbox";
+export { Checkbox, CheckboxField } from "./Checkbox";
 export { default as MultiSelectCheckbox } from "./MultiSelectCheckboxes";
 export type { Option } from "./MultiSelectCheckboxes";
diff --git a/packages/ui/components/form/dropdown/Dropdown.tsx b/packages/ui/components/form/dropdown/Dropdown.tsx
index 60093968b8..a91ef6a42d 100644
--- a/packages/ui/components/form/dropdown/Dropdown.tsx
+++ b/packages/ui/components/form/dropdown/Dropdown.tsx
@@ -74,7 +74,7 @@ type DropdownMenuCheckboxItemProps = ComponentProps<(typeof DropdownMenuPrimitiv
 export const DropdownMenuCheckboxItem = forwardRef<HTMLDivElement, DropdownMenuCheckboxItemProps>(
   ({ children, ...props }, forwardedRef) => {
     return (
-      <DropdownMenuPrimitive.CheckboxItem {...props} ref={forwardedRef}>
+      <DropdownMenuPrimitive.CheckboxItem {...props} ref={forwardedRef} className="">
         {children}
         <DropdownMenuPrimitive.ItemIndicator>
           <CheckCircle />
@@ -138,7 +138,8 @@ export const DropdownItem = (props: DropdownItemProps) => {
       {...rest}
       className={classNames(
         "hover:text-emphasis text-default inline-flex w-full items-center space-x-2 px-3 py-2 disabled:cursor-not-allowed",
-        color === "destructive" ? "hover:bg-error hover:text-red-700" : "hover:bg-subtle"
+        color === "destructive" ? "hover:bg-error hover:text-red-700" : "hover:bg-subtle",
+        props.className
       )}>
       <>
         {StartIcon && <StartIcon className="h-4 w-4" />}
diff --git a/packages/ui/components/form/index.ts b/packages/ui/components/form/index.ts
index 5467d214da..ba2e50ed0e 100644
--- a/packages/ui/components/form/index.ts
+++ b/packages/ui/components/form/index.ts
@@ -1,4 +1,4 @@
-export { Checkbox, MultiSelectCheckbox } from "./checkbox";
+export { Checkbox, MultiSelectCheckbox, CheckboxField } from "./checkbox";
 export type { Option } from "./checkbox";
 export { HintsOrErrors } from "./inputs/HintOrErrors";
 export {
diff --git a/packages/ui/components/popover/index.ts b/packages/ui/components/popover/index.ts
deleted file mode 100644
index 34c4a13876..0000000000
--- a/packages/ui/components/popover/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { AnimatedPopover } from "./AnimatedPopover";
-export { default as MeetingTimeInTimezones } from "./MeetingTimeInTimezones";
diff --git a/packages/ui/components/popover/index.tsx b/packages/ui/components/popover/index.tsx
new file mode 100644
index 0000000000..2841491d7e
--- /dev/null
+++ b/packages/ui/components/popover/index.tsx
@@ -0,0 +1,32 @@
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import * as React from "react";
+
+import { classNames } from "@calcom/lib";
+
+const Popover = PopoverPrimitive.Root;
+
+const PopoverTrigger = PopoverPrimitive.Trigger;
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={classNames(
+        "bg-default text-emphasis z-50 w-72 rounded-md border p-4 outline-none",
+        className
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+export { Popover, PopoverTrigger, PopoverContent };
+
+export { AnimatedPopover } from "./AnimatedPopover";
+export { default as MeetingTimeInTimezones } from "./MeetingTimeInTimezones";
diff --git a/packages/ui/components/table/TableNew.tsx b/packages/ui/components/table/TableNew.tsx
new file mode 100644
index 0000000000..f778e60906
--- /dev/null
+++ b/packages/ui/components/table/TableNew.tsx
@@ -0,0 +1,78 @@
+import * as React from "react";
+
+import { classNames } from "@calcom/lib";
+
+const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
+  ({ className, ...props }, ref) => (
+    <div className="w-full overflow-auto">
+      <table ref={ref} className={classNames("w-full caption-bottom text-sm", className)} {...props} />
+    </div>
+  )
+);
+Table.displayName = "Table";
+
+const TableHeader = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
+  ({ className, ...props }, ref) => (
+    <thead ref={ref} className={classNames("[&_tr]:bg-subtle [&_tr]:border-b", className)} {...props} />
+  )
+);
+TableHeader.displayName = "TableHeader";
+
+const TableBody = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
+  ({ className, ...props }, ref) => (
+    <tbody ref={ref} className={classNames("[&_tr:last-child]:border-0", className)} {...props} />
+  )
+);
+TableBody.displayName = "TableBody";
+
+const TableFooter = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
+  ({ className, ...props }, ref) => (
+    <tfoot ref={ref} className={classNames("bg-default text-emphasis font-medium", className)} {...props} />
+  )
+);
+TableFooter.displayName = "TableFooter";
+
+const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(
+  ({ className, ...props }, ref) => (
+    <tr
+      ref={ref}
+      className={classNames("hover:bg-subtle data-[state=selected]:bg-subtle border-b", className)}
+      {...props}
+    />
+  )
+);
+TableRow.displayName = "TableRow";
+
+const TableHead = React.forwardRef<HTMLTableCellElement, React.ThHTMLAttributes<HTMLTableCellElement>>(
+  ({ className, ...props }, ref) => (
+    <th
+      ref={ref}
+      className={classNames(
+        "text-default h-12 px-4 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0",
+        className
+      )}
+      {...props}
+    />
+  )
+);
+TableHead.displayName = "TableHead";
+
+const TableCell = React.forwardRef<HTMLTableCellElement, React.TdHTMLAttributes<HTMLTableCellElement>>(
+  ({ className, ...props }, ref) => (
+    <td
+      ref={ref}
+      className={classNames("text-default p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
+      {...props}
+    />
+  )
+);
+TableCell.displayName = "TableCell";
+
+const TableCaption = React.forwardRef<HTMLTableCaptionElement, React.HTMLAttributes<HTMLTableCaptionElement>>(
+  ({ className, ...props }, ref) => (
+    <caption ref={ref} className={classNames("text-default mt-4 text-sm", className)} {...props} />
+  )
+);
+TableCaption.displayName = "TableCaption";
+
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption };
diff --git a/packages/ui/index.tsx b/packages/ui/index.tsx
index c3ae7c75ad..bc368ac9f5 100644
--- a/packages/ui/index.tsx
+++ b/packages/ui/index.tsx
@@ -8,6 +8,7 @@ export type { ButtonBaseProps, ButtonProps } from "./components/button";
 export { ButtonGroup } from "./components/buttonGroup";
 export {
   Checkbox,
+  CheckboxField,
   EmailField,
   EmailInput,
   FieldsetLegend,
@@ -135,3 +136,4 @@ export { CreateButton, CreateButtonWithTeamsList } from "./components/createButt
 export { useCalcomTheme } from "./styles/useCalcomTheme";
 export { ScrollableArea } from "./components/scrollable/ScrollableArea";
 export { WizardLayout } from "./layouts/WizardLayout";
+export { DataTable } from "./components/data-table";
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 0b2b27ff10..36a639775a 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -23,14 +23,18 @@
     "@calcom/lib": "*",
     "@calcom/trpc": "*",
     "@formkit/auto-animate": "^1.0.0-beta.5",
+    "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.4",
     "@radix-ui/react-popover": "^1.0.2",
     "@radix-ui/react-portal": "^1.0.0",
     "@radix-ui/react-select": "^0.1.1",
     "@react-icons/all-files": "^4.1.0",
     "@tanstack/react-query": "^4.3.9",
+    "@tanstack/react-table": "^8.9.3",
     "@wojtekmaj/react-daterange-picker": "^3.3.1",
     "class-variance-authority": "^0.4.0",
+    "cmdk": "^0.2.0",
+    "cmk": "^0.1.1",
     "downshift": "^6.1.9",
     "lucide-react": "^0.171.0",
     "next": "^13.4.6",
@@ -39,7 +43,8 @@
     "react-feather": "^2.0.10",
     "react-hook-form": "^7.43.3",
     "react-icons": "^4.4.0",
-    "react-select": "^5.7.0"
+    "react-select": "^5.7.0",
+    "react-virtual": "^2.10.4"
   },
   "devDependencies": {
     "@calcom/config": "*",
diff --git a/yarn.lock b/yarn.lock
index 208f7a9573..09aa935113 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -17,6 +17,34 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@47ng/cloak@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "@47ng/cloak@npm:1.1.0"
+  dependencies:
+    "@47ng/codec": ^1.0.1
+    "@stablelib/base64": ^1.0.1
+    "@stablelib/hex": ^1.0.1
+    "@stablelib/utf8": ^1.0.1
+    chalk: ^4.1.2
+    commander: ^8.3.0
+    dotenv: ^10.0.0
+    s-ago: ^2.2.0
+  bin:
+    cloak: dist/cli.js
+  checksum: 7d72c66ff7837368e9ca8f5ba402d72041427eb47c53c340b4640e3352f2956d8673a4a8e97591fb2b9dfe27f3d2765bcd925617273ef2488df2565c77c78299
+  languageName: node
+  linkType: hard
+
+"@47ng/codec@npm:^1.0.1":
+  version: 1.1.0
+  resolution: "@47ng/codec@npm:1.1.0"
+  dependencies:
+    "@stablelib/base64": ^1.0.1
+    "@stablelib/hex": ^1.0.1
+  checksum: 4f780c4413fe78bbedbaff4135340c0e5f5a30df88f5cffbec51349eb0a1c909728e6c2bbda52506ff8c12653bf39b78c67b78bbe9501b0b9741da0cdaeec6ff
+  languageName: node
+  linkType: hard
+
 "@achrinza/event-pubsub@npm:5.0.8":
   version: 5.0.8
   resolution: "@achrinza/event-pubsub@npm:5.0.8"
@@ -45,6 +73,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@adobe/css-tools@npm:^4.0.1":
+  version: 4.2.0
+  resolution: "@adobe/css-tools@npm:4.2.0"
+  checksum: dc5cc92ba3d562e7ffddb79d6d222c7e00b65f255fd2725b3d71490ff268844be322f917415d8c4ab39eca646343b632058db8bd5b1d646193fcc94d1d3e420b
+  languageName: node
+  linkType: hard
+
 "@ampproject/remapping@npm:^2.1.0":
   version: 2.1.2
   resolution: "@ampproject/remapping@npm:2.1.2"
@@ -96,6 +131,25 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@auth/core@npm:^0.1.4":
+  version: 0.1.4
+  resolution: "@auth/core@npm:0.1.4"
+  dependencies:
+    "@panva/hkdf": 1.0.2
+    cookie: 0.5.0
+    jose: 4.11.1
+    oauth4webapi: 2.0.5
+    preact: 10.11.3
+    preact-render-to-string: 5.2.3
+  peerDependencies:
+    nodemailer: 6.8.0
+  peerDependenciesMeta:
+    nodemailer:
+      optional: true
+  checksum: 64854404ea1883e0deb5535b34bed95cd43fc85094aeaf4f15a79e14045020eb944f844defe857edfc8528a0a024be89cbb2a3069dedef0e9217a74ca6c3eb79
+  languageName: node
+  linkType: hard
+
 "@aws-crypto/ie11-detection@npm:^3.0.0":
   version: 3.0.0
   resolution: "@aws-crypto/ie11-detection@npm:3.0.0"
@@ -1181,6 +1235,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/code-frame@npm:^7.12.13":
+  version: 7.22.5
+  resolution: "@babel/code-frame@npm:7.22.5"
+  dependencies:
+    "@babel/highlight": ^7.22.5
+  checksum: cfe804f518f53faaf9a1d3e0f9f74127ab9a004912c3a16fda07fb6a633393ecb9918a053cb71804204c1b7ec3d49e1699604715e2cfb0c9f7bc4933d324ebb6
+  languageName: node
+  linkType: hard
+
 "@babel/compat-data@npm:^7.13.11, @babel/compat-data@npm:^7.18.6, @babel/compat-data@npm:^7.18.8":
   version: 7.18.8
   resolution: "@babel/compat-data@npm:7.18.8"
@@ -1904,6 +1967,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-validator-identifier@npm:^7.22.5":
+  version: 7.22.5
+  resolution: "@babel/helper-validator-identifier@npm:7.22.5"
+  checksum: 7f0f30113474a28298c12161763b49de5018732290ca4de13cdaefd4fd0d635a6fe3f6686c37a02905fb1e64f21a5ee2b55140cf7b070e729f1bd66866506aea
+  languageName: node
+  linkType: hard
+
 "@babel/helper-validator-option@npm:^7.16.7":
   version: 7.16.7
   resolution: "@babel/helper-validator-option@npm:7.16.7"
@@ -1996,6 +2066,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/highlight@npm:^7.22.5":
+  version: 7.22.5
+  resolution: "@babel/highlight@npm:7.22.5"
+  dependencies:
+    "@babel/helper-validator-identifier": ^7.22.5
+    chalk: ^2.0.0
+    js-tokens: ^4.0.0
+  checksum: f61ae6de6ee0ea8d9b5bcf2a532faec5ab0a1dc0f7c640e5047fc61630a0edb88b18d8c92eb06566d30da7a27db841aca11820ecd3ebe9ce514c9350fbed39c4
+  languageName: node
+  linkType: hard
+
 "@babel/parser@npm:^7.12.11, @babel/parser@npm:^7.18.6, @babel/parser@npm:^7.18.8":
   version: 7.18.8
   resolution: "@babel/parser@npm:7.18.8"
@@ -3770,6 +3851,41 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@calcom/auth@workspace:apps/auth":
+  version: 0.0.0-use.local
+  resolution: "@calcom/auth@workspace:apps/auth"
+  dependencies:
+    "@auth/core": ^0.1.4
+    "@calcom/app-store": "*"
+    "@calcom/app-store-cli": "*"
+    "@calcom/config": "*"
+    "@calcom/core": "*"
+    "@calcom/dayjs": "*"
+    "@calcom/embed-core": "workspace:*"
+    "@calcom/embed-react": "workspace:*"
+    "@calcom/embed-snippet": "workspace:*"
+    "@calcom/features": "*"
+    "@calcom/lib": "*"
+    "@calcom/prisma": "*"
+    "@calcom/trpc": "*"
+    "@calcom/tsconfig": "*"
+    "@calcom/types": "*"
+    "@calcom/ui": "*"
+    "@types/node": 16.9.1
+    "@types/react": 18.0.26
+    "@types/react-dom": ^18.0.9
+    eslint: ^8.34.0
+    eslint-config-next: ^13.2.1
+    next: ^13.4.6
+    next-auth: ^4.22.1
+    postcss: ^8.4.18
+    react: ^18.2.0
+    react-dom: ^18.2.0
+    tailwindcss: ^3.3.1
+    typescript: ^4.9.4
+  languageName: unknown
+  linkType: soft
+
 "@calcom/caldavcalendar@workspace:packages/app-store/caldavcalendar":
   version: 0.0.0-use.local
   resolution: "@calcom/caldavcalendar@workspace:packages/app-store/caldavcalendar"
@@ -3830,6 +3946,43 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@calcom/console@workspace:apps/console":
+  version: 0.0.0-use.local
+  resolution: "@calcom/console@workspace:apps/console"
+  dependencies:
+    "@calcom/dayjs": "*"
+    "@calcom/features": "*"
+    "@calcom/lib": "*"
+    "@calcom/tsconfig": "*"
+    "@calcom/ui": "*"
+    "@headlessui/react": ^1.5.0
+    "@heroicons/react": ^1.0.6
+    "@prisma/client": ^4.16.0
+    "@tailwindcss/forms": ^0.5.2
+    "@types/node": 16.9.1
+    "@types/react": 18.0.26
+    autoprefixer: ^10.4.12
+    chart.js: ^3.7.1
+    client-only: ^0.0.1
+    eslint: ^8.34.0
+    next: ^13.4.6
+    next-auth: ^4.22.1
+    next-i18next: ^13.2.2
+    postcss: ^8.4.18
+    prisma: ^4.16.0
+    prisma-field-encryption: ^1.4.0
+    react: ^18.2.0
+    react-chartjs-2: ^4.0.1
+    react-dom: ^18.2.0
+    react-hook-form: ^7.43.3
+    react-live-chat-loader: ^2.8.1
+    swr: ^1.2.2
+    tailwindcss: ^3.3.1
+    typescript: ^4.9.4
+    zod: ^3.20.2
+  languageName: unknown
+  linkType: soft
+
 "@calcom/core@*, @calcom/core@workspace:packages/core":
   version: 0.0.0-use.local
   resolution: "@calcom/core@workspace:packages/core"
@@ -4065,12 +4218,14 @@ __metadata:
     "@calcom/trpc": "*"
     "@calcom/ui": "*"
     "@lexical/react": ^0.9.0
+    "@tanstack/react-table": ^8.9.3
     "@testing-library/react-hooks": ^8.0.1
     dompurify: ^2.4.1
     framer-motion: ^10.12.8
     lexical: ^0.9.0
     react-select: ^5.7.0
     react-sticky-box: ^2.0.4
+    react-virtual: ^2.10.4
     zustand: ^4.3.2
   languageName: unknown
   linkType: soft
@@ -4528,16 +4683,20 @@ __metadata:
     "@calcom/trpc": "*"
     "@calcom/tsconfig": "*"
     "@formkit/auto-animate": ^1.0.0-beta.5
+    "@radix-ui/react-checkbox": ^1.0.4
     "@radix-ui/react-dialog": ^1.0.4
     "@radix-ui/react-popover": ^1.0.2
     "@radix-ui/react-portal": ^1.0.0
     "@radix-ui/react-select": ^0.1.1
     "@react-icons/all-files": ^4.1.0
     "@tanstack/react-query": ^4.3.9
+    "@tanstack/react-table": ^8.9.3
     "@types/react": 18.0.26
     "@types/react-dom": ^18.0.9
     "@wojtekmaj/react-daterange-picker": ^3.3.1
     class-variance-authority: ^0.4.0
+    cmdk: ^0.2.0
+    cmk: ^0.1.1
     downshift: ^6.1.9
     lucide-react: ^0.171.0
     next: ^13.4.6
@@ -4547,6 +4706,7 @@ __metadata:
     react-hook-form: ^7.43.3
     react-icons: ^4.4.0
     react-select: ^5.7.0
+    react-virtual: ^2.10.4
     typescript: ^4.9.4
   languageName: unknown
   linkType: soft
@@ -4794,7 +4954,6 @@ __metadata:
     globby: ^13.1.3
     gray-matter: ^4.0.3
     gsap: ^3.11.0
-    i18n-unused: ^0.13.0
     iframe-resizer-react: ^1.1.0
     keen-slider: ^6.8.0
     lucide-react: ^0.171.0
@@ -6235,6 +6394,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@jest/expect-utils@npm:^29.6.1":
+  version: 29.6.1
+  resolution: "@jest/expect-utils@npm:29.6.1"
+  dependencies:
+    jest-get-type: ^29.4.3
+  checksum: 037ee017eca62f7b45e1465fb5c6f9e92d5709a9ac716b8bff0bd294240a54de734e8f968fb69309cc4aef6c83b9552d5a821f3b18371af394bf04783859d706
+  languageName: node
+  linkType: hard
+
 "@jest/schemas@npm:^29.4.3":
   version: 29.4.3
   resolution: "@jest/schemas@npm:29.4.3"
@@ -6244,6 +6412,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@jest/schemas@npm:^29.6.0":
+  version: 29.6.0
+  resolution: "@jest/schemas@npm:29.6.0"
+  dependencies:
+    "@sinclair/typebox": ^0.27.8
+  checksum: c00511c69cf89138a7d974404d3a5060af375b5a52b9c87215d91873129b382ca11c1ff25bd6d605951404bb381ddce5f8091004a61e76457da35db1f5c51365
+  languageName: node
+  linkType: hard
+
 "@jest/transform@npm:^26.6.2":
   version: 26.6.2
   resolution: "@jest/transform@npm:26.6.2"
@@ -6293,6 +6470,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@jest/types@npm:^29.6.1":
+  version: 29.6.1
+  resolution: "@jest/types@npm:29.6.1"
+  dependencies:
+    "@jest/schemas": ^29.6.0
+    "@types/istanbul-lib-coverage": ^2.0.0
+    "@types/istanbul-reports": ^3.0.0
+    "@types/node": "*"
+    "@types/yargs": ^17.0.8
+    chalk: ^4.0.0
+  checksum: 89fc1ccf71a84fe0da643e0675b1cfe6a6f19ea72e935b2ab1dbdb56ec547e94433fb59b3536d3832a6e156c077865b7176fe9dae707dab9c3d2f9405ba6233c
+  languageName: node
+  linkType: hard
+
 "@jimp/bmp@npm:^0.16.1":
   version: 0.16.1
   resolution: "@jimp/bmp@npm:0.16.1"
@@ -7467,6 +7658,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@panva/hkdf@npm:1.0.2":
+  version: 1.0.2
+  resolution: "@panva/hkdf@npm:1.0.2"
+  checksum: 75183b4d5ea816ef516dcea70985c610683579a9e2ac540c2d59b9a3ed27eedaff830a43a1c43c1683556a457c92ac66e09109ee995ab173090e4042c4c4bb03
+  languageName: node
+  linkType: hard
+
 "@panva/hkdf@npm:^1.0.2":
   version: 1.0.4
   resolution: "@panva/hkdf@npm:1.0.4"
@@ -7586,6 +7784,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@prisma/debug@npm:4.15.0":
+  version: 4.15.0
+  resolution: "@prisma/debug@npm:4.15.0"
+  dependencies:
+    "@types/debug": 4.1.8
+    debug: 4.3.4
+    strip-ansi: 6.0.1
+  checksum: d911fbe540e2f6ecb3912fb871bedef63a6ded94e5f012b5afb580baf44c44dfddff095b22dbf9482bc62411217588892d723a42f0e8c497c20b9354e45ec081
+  languageName: node
+  linkType: hard
+
 "@prisma/engines-version@npm:4.16.0-66.b20ead4d3ab9e78ac112966e242ded703f4a052c":
   version: 4.16.0-66.b20ead4d3ab9e78ac112966e242ded703f4a052c
   resolution: "@prisma/engines-version@npm:4.16.0-66.b20ead4d3ab9e78ac112966e242ded703f4a052c"
@@ -7600,6 +7809,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@prisma/generator-helper@npm:^4.0.0":
+  version: 4.15.0
+  resolution: "@prisma/generator-helper@npm:4.15.0"
+  dependencies:
+    "@prisma/debug": 4.15.0
+    "@types/cross-spawn": 6.0.2
+    cross-spawn: 7.0.3
+    kleur: 4.1.5
+  checksum: a8692468b05a34b397bf7acc6fa71047ef7faaaa2208a14daac05efb80692a8592ec48c748bbe44e656095dc4fdaf2c77cd3b5bab2e29bce856ff6b0dac275ea
+  languageName: node
+  linkType: hard
+
 "@prisma/generator-helper@npm:^4.13.0":
   version: 4.13.0
   resolution: "@prisma/generator-helper@npm:4.13.0"
@@ -7651,6 +7872,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/primitive@npm:1.0.0":
+  version: 1.0.0
+  resolution: "@radix-ui/primitive@npm:1.0.0"
+  dependencies:
+    "@babel/runtime": ^7.13.10
+  checksum: 72996afaf346ec4f4c73422f14f6cb2d0de994801ba7cbb9a4a67b0050e0cd74625182c349ef8017ccae1406579d4b74a34a225ef2efe61e8e5337decf235deb
+  languageName: node
+  linkType: hard
+
 "@radix-ui/primitive@npm:1.0.1":
   version: 1.0.1
   resolution: "@radix-ui/primitive@npm:1.0.1"
@@ -7731,6 +7961,33 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-checkbox@npm:^1.0.4":
+  version: 1.0.4
+  resolution: "@radix-ui/react-checkbox@npm:1.0.4"
+  dependencies:
+    "@babel/runtime": ^7.13.10
+    "@radix-ui/primitive": 1.0.1
+    "@radix-ui/react-compose-refs": 1.0.1
+    "@radix-ui/react-context": 1.0.1
+    "@radix-ui/react-presence": 1.0.1
+    "@radix-ui/react-primitive": 1.0.3
+    "@radix-ui/react-use-controllable-state": 1.0.1
+    "@radix-ui/react-use-previous": 1.0.1
+    "@radix-ui/react-use-size": 1.0.1
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+    react-dom: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 6dac5bddd9e1c42b149555501440918d9eae70da13b6d8539c3bf46b6c07681119d865d2106a43f729884ae8e2043bedc34c4d00a09a527b3bf0feade088d188
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-collapsible@npm:1.0.3, @radix-ui/react-collapsible@npm:^1.0.0":
   version: 1.0.3
   resolution: "@radix-ui/react-collapsible@npm:1.0.3"
@@ -7807,6 +8064,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-compose-refs@npm:1.0.0":
+  version: 1.0.0
+  resolution: "@radix-ui/react-compose-refs@npm:1.0.0"
+  dependencies:
+    "@babel/runtime": ^7.13.10
+  peerDependencies:
+    react: ^16.8 || ^17.0 || ^18.0
+  checksum: fb98be2e275a1a758ccac647780ff5b04be8dcf25dcea1592db3b691fecf719c4c0700126da605b2f512dd89caa111352b9fad59528d736b4e0e9a0e134a74a1
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-compose-refs@npm:1.0.1":
   version: 1.0.1
   resolution: "@radix-ui/react-compose-refs@npm:1.0.1"
@@ -7833,6 +8101,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-context@npm:1.0.0":
+  version: 1.0.0
+  resolution: "@radix-ui/react-context@npm:1.0.0"
+  dependencies:
+    "@babel/runtime": ^7.13.10
+  peerDependencies:
+    react: ^16.8 || ^17.0 || ^18.0
+  checksum: 43c6b6f2183398161fe6b109e83fff240a6b7babbb27092b815932342a89d5ca42aa9806bfae5927970eed5ff90feed04c67aa29c6721f84ae826f17fcf34ce0
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-context@npm:1.0.1":
   version: 1.0.1
   resolution: "@radix-ui/react-context@npm:1.0.1"
@@ -7848,6 +8127,32 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-dialog@npm:1.0.0":
+  version: 1.0.0
+  resolution: "@radix-ui/react-dialog@npm:1.0.0"
+  dependencies:
+    "@babel/runtime": ^7.13.10
+    "@radix-ui/primitive": 1.0.0
+    "@radix-ui/react-compose-refs": 1.0.0
+    "@radix-ui/react-context": 1.0.0
+    "@radix-ui/react-dismissable-layer": 1.0.0
+    "@radix-ui/react-focus-guards": 1.0.0
+    "@radix-ui/react-focus-scope": 1.0.0
+    "@radix-ui/react-id": 1.0.0
+    "@radix-ui/react-portal": 1.0.0
+    "@radix-ui/react-presence": 1.0.0
+    "@radix-ui/react-primitive": 1.0.0
+    "@radix-ui/react-slot": 1.0.0
+    "@radix-ui/react-use-controllable-state": 1.0.0
+    aria-hidden: ^1.1.1
+    react-remove-scroll: 2.5.4
+  peerDependencies:
+    react: ^16.8 || ^17.0 || ^18.0
+    react-dom: ^16.8 || ^17.0 || ^18.0
+  checksum: 32a1ab36a483ceae40b804f116611577b976e1781f33c8d74093f4132fd230b325eadd0306efd77a628d604b61c3a592d4c720a5b7e69e74dbfb56ce85b2c6fd
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-dialog@npm:^1.0.4":
   version: 1.0.4
   resolution: "@radix-ui/react-dialog@npm:1.0.4"
@@ -7913,6 +8218,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-dismissable-layer@npm:1.0.0":
+  version: 1.0.0
+  resolution: "@radix-ui/react-dismissable-layer@npm:1.0.0"
+  dependencies:
+    "@babel/runtime": ^7.13.10
+    "@radix-ui/primitive": 1.0.0
+    "@radix-ui/react-compose-refs": 1.0.0
+    "@radix-ui/react-primitive": 1.0.0
+    "@radix-ui/react-use-callback-ref": 1.0.0
+    "@radix-ui/react-use-escape-keydown": 1.0.0
+  peerDependencies:
+    react: ^16.8 || ^17.0 || ^18.0
+    react-dom: ^16.8 || ^17.0 || ^18.0
+  checksum: c5af6445ea3f584bad1fb3ed01703c2d4a889d9b99b23bc2c821a2c166fdbb75cfdd1e4870d3f958d9ac78f5e1b8006f762317cba765839592e5c5af1183a7a7
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-dismissable-layer@npm:1.0.4":
   version: 1.0.4
   resolution: "@radix-ui/react-dismissable-layer@npm:1.0.4"
@@ -7963,6 +8285,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-focus-guards@npm:1.0.0":
+  version: 1.0.0
+  resolution: "@radix-ui/react-focus-guards@npm:1.0.0"
+  dependencies:
+    "@babel/runtime": ^7.13.10
+  peerDependencies:
+    react: ^16.8 || ^17.0 || ^18.0
+  checksum: 8c714e8caa6032f5402eecb0323addd7456d3496946dbad1b9ee8ebf5845943876945e7af9bca179e9f8ffe5100e61cb4ba54a185873949125c310c406be5aa4
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-focus-guards@npm:1.0.1":
   version: 1.0.1
   resolution: "@radix-ui/react-focus-guards@npm:1.0.1"
@@ -7992,6 +8325,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-focus-scope@npm:1.0.0":
+  version: 1.0.0
+  resolution: "@radix-ui/react-focus-scope@npm:1.0.0"
+  dependencies:
+    "@babel/runtime": ^7.13.10
+    "@radix-ui/react-compose-refs": 1.0.0
+    "@radix-ui/react-primitive": 1.0.0
+    "@radix-ui/react-use-callback-ref": 1.0.0
+  peerDependencies:
+    react: ^16.8 || ^17.0 || ^18.0
+    react-dom: ^16.8 || ^17.0 || ^18.0
+  checksum: 2ee0b9a2d1905aba25d0225c203d20745fd798aa61d65f55c6041169701d47d6b801d4392a57d94968f0d8ef3410eb79fcab19c9c80f03e9b9f6b24f6f997f98
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-focus-scope@npm:1.0.3":
   version: 1.0.3
   resolution: "@radix-ui/react-focus-scope@npm:1.0.3"
@@ -8026,6 +8374,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-id@npm:1.0.0":
+  version: 1.0.0
+  resolution: "@radix-ui/react-id@npm:1.0.0"
+  dependencies:
+    "@babel/runtime": ^7.13.10
+    "@radix-ui/react-use-layout-effect": 1.0.0
+  peerDependencies:
+    react: ^16.8 || ^17.0 || ^18.0
+  checksum: ba323cedd6a6df6f6e51ed1f7f7747988ce432b47fd94d860f962b14b342dcf049eae33f8ad0b72fd7df6329a7375542921132271fba64ab0a271c93f09c48d1
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-id@npm:1.0.1, @radix-ui/react-id@npm:^1.0.0":
   version: 1.0.1
   resolution: "@radix-ui/react-id@npm:1.0.1"
@@ -8204,6 +8564,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-portal@npm:1.0.0":
+  version: 1.0.0
+  resolution: "@radix-ui/react-portal@npm:1.0.0"
+  dependencies:
+    "@babel/runtime": ^7.13.10
+    "@radix-ui/react-primitive": 1.0.0
+  peerDependencies:
+    react: ^16.8 || ^17.0 || ^18.0
+    react-dom: ^16.8 || ^17.0 || ^18.0
+  checksum: dfb194b2df32830db2daf01569176c6e4cf3af2c6e393ece60532543902acf13a6629f9a45003902c99df195c2249bc56d4f4425a5fed2897555df9bdf01efa0
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-portal@npm:1.0.3, @radix-ui/react-portal@npm:^1.0.0":
   version: 1.0.3
   resolution: "@radix-ui/react-portal@npm:1.0.3"
@@ -8224,6 +8597,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-presence@npm:1.0.0":
+  version: 1.0.0
+  resolution: "@radix-ui/react-presence@npm:1.0.0"
+  dependencies:
+    "@babel/runtime": ^7.13.10
+    "@radix-ui/react-compose-refs": 1.0.0
+    "@radix-ui/react-use-layout-effect": 1.0.0
+  peerDependencies:
+    react: ^16.8 || ^17.0 || ^18.0
+    react-dom: ^16.8 || ^17.0 || ^18.0
+  checksum: a607d67795aa265e88f1765dcc7c18bebf6d88d116cb7f529ebe5a3fbbe751a42763aff0c1c89cdd8ce7f7664355936c4070fd3d4685774aff1a80fa95f4665b
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-presence@npm:1.0.1":
   version: 1.0.1
   resolution: "@radix-ui/react-presence@npm:1.0.1"
@@ -8257,6 +8644,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-primitive@npm:1.0.0":
+  version: 1.0.0
+  resolution: "@radix-ui/react-primitive@npm:1.0.0"
+  dependencies:
+    "@babel/runtime": ^7.13.10
+    "@radix-ui/react-slot": 1.0.0
+  peerDependencies:
+    react: ^16.8 || ^17.0 || ^18.0
+    react-dom: ^16.8 || ^17.0 || ^18.0
+  checksum: fb3fe8c8c5a57995716cce4d7e9039e474c09ba5d714994419ad4940bc954da670f1188813cc931f189b23d9bd5a67adf7087bf44fe1d4272b4a334a3514d38b
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-primitive@npm:1.0.3":
   version: 1.0.3
   resolution: "@radix-ui/react-primitive@npm:1.0.3"
@@ -8406,6 +8806,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-slot@npm:1.0.0":
+  version: 1.0.0
+  resolution: "@radix-ui/react-slot@npm:1.0.0"
+  dependencies:
+    "@babel/runtime": ^7.13.10
+    "@radix-ui/react-compose-refs": 1.0.0
+  peerDependencies:
+    react: ^16.8 || ^17.0 || ^18.0
+  checksum: 60c0190ebdca21785b4f8b58a0c52717600c98953fc49da9580870519c60f52d5cf873dffa05446f4bb539066326ccec0827f4ca252b02ec4ff1a4ae203f59d7
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-slot@npm:1.0.2":
   version: 1.0.2
   resolution: "@radix-ui/react-slot@npm:1.0.2"
@@ -8577,6 +8989,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-use-callback-ref@npm:1.0.0":
+  version: 1.0.0
+  resolution: "@radix-ui/react-use-callback-ref@npm:1.0.0"
+  dependencies:
+    "@babel/runtime": ^7.13.10
+  peerDependencies:
+    react: ^16.8 || ^17.0 || ^18.0
+  checksum: a8dda76ba0a26e23dc6ab5003831ad7439f59ba9d696a517643b9ee6a7fb06b18ae7a8f5a3c00c530d5c8104745a466a077b7475b99b4c0f5c15f5fc29474471
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-use-callback-ref@npm:1.0.1":
   version: 1.0.1
   resolution: "@radix-ui/react-use-callback-ref@npm:1.0.1"
@@ -8604,6 +9027,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-use-controllable-state@npm:1.0.0":
+  version: 1.0.0
+  resolution: "@radix-ui/react-use-controllable-state@npm:1.0.0"
+  dependencies:
+    "@babel/runtime": ^7.13.10
+    "@radix-ui/react-use-callback-ref": 1.0.0
+  peerDependencies:
+    react: ^16.8 || ^17.0 || ^18.0
+  checksum: 35f1e714bbe3fc9f5362a133339dd890fb96edb79b63168a99403c65dd5f2b63910e0c690255838029086719e31360fa92544a55bc902cfed4442bb3b55822e2
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-use-controllable-state@npm:1.0.1":
   version: 1.0.1
   resolution: "@radix-ui/react-use-controllable-state@npm:1.0.1"
@@ -8632,6 +9067,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-use-escape-keydown@npm:1.0.0":
+  version: 1.0.0
+  resolution: "@radix-ui/react-use-escape-keydown@npm:1.0.0"
+  dependencies:
+    "@babel/runtime": ^7.13.10
+    "@radix-ui/react-use-callback-ref": 1.0.0
+  peerDependencies:
+    react: ^16.8 || ^17.0 || ^18.0
+  checksum: a6728d40e059fdf2da0703cde9afb10defbcd951d6e1dc48522f33f9399f5aa0514751d9e25847bdcc57328b9d745a3baa36baf9f6af6453a5c894dfcbd40352
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-use-escape-keydown@npm:1.0.3":
   version: 1.0.3
   resolution: "@radix-ui/react-use-escape-keydown@npm:1.0.3"
@@ -8659,6 +9106,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-use-layout-effect@npm:1.0.0":
+  version: 1.0.0
+  resolution: "@radix-ui/react-use-layout-effect@npm:1.0.0"
+  dependencies:
+    "@babel/runtime": ^7.13.10
+  peerDependencies:
+    react: ^16.8 || ^17.0 || ^18.0
+  checksum: fcdc8cfa79bd45766ebe3de11039c58abe3fed968cb39c12b2efce5d88013c76fe096ea4cee464d42576d02fe7697779b682b4268459bca3c4e48644f5b4ac5e
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-use-layout-effect@npm:1.0.1":
   version: 1.0.1
   resolution: "@radix-ui/react-use-layout-effect@npm:1.0.1"
@@ -9219,6 +9677,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@sinclair/typebox@npm:^0.27.8":
+  version: 0.27.8
+  resolution: "@sinclair/typebox@npm:0.27.8"
+  checksum: 00bd7362a3439021aa1ea51b0e0d0a0e8ca1351a3d54c606b115fdcc49b51b16db6e5f43b4fe7a28c38688523e22a94d49dd31168868b655f0d4d50f032d07a1
+  languageName: node
+  linkType: hard
+
 "@sindresorhus/is@npm:^4.6.0":
   version: 4.6.0
   resolution: "@sindresorhus/is@npm:4.6.0"
@@ -9244,13 +9709,27 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@stablelib/base64@npm:^1.0.0":
+"@stablelib/base64@npm:^1.0.0, @stablelib/base64@npm:^1.0.1":
   version: 1.0.1
   resolution: "@stablelib/base64@npm:1.0.1"
   checksum: 3ef4466d1d6889ac3fc67407bc21aa079953981c322eeca3b29f426d05506c63011faab1bfc042d7406e0677a94de6c9d2db2ce079afdd1eccae90031bfb5859
   languageName: node
   linkType: hard
 
+"@stablelib/hex@npm:^1.0.1":
+  version: 1.0.1
+  resolution: "@stablelib/hex@npm:1.0.1"
+  checksum: 557f1c5d6b42963deee7627d4be1ae3542607851c5561e9419c42682d09562ebd3a06e2d92e088c52213a71ed121ec38221abfc5acd9e65707a77ecee3c96915
+  languageName: node
+  linkType: hard
+
+"@stablelib/utf8@npm:^1.0.1":
+  version: 1.0.1
+  resolution: "@stablelib/utf8@npm:1.0.1"
+  checksum: 098d9446f38a641a8ee265a7fc3467fefd561fc46ca65e1216c1df7a9b4d004e616347ce79f4b83d62e944f0f91d6be4af029ad0b027a20c3271951921ebfac5
+  languageName: node
+  linkType: hard
+
 "@storybook/addon-actions@npm:6.5.13, @storybook/addon-actions@npm:^6.5.13":
   version: 6.5.13
   resolution: "@storybook/addon-actions@npm:6.5.13"
@@ -11009,6 +11488,25 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@tanstack/react-table@npm:^8.9.3":
+  version: 8.9.3
+  resolution: "@tanstack/react-table@npm:8.9.3"
+  dependencies:
+    "@tanstack/table-core": 8.9.3
+  peerDependencies:
+    react: ">=16"
+    react-dom: ">=16"
+  checksum: a71fbbc608bb11b79ecd2b1a838fad2fc4140f9eb1a25bd44b6b1b4c6acd52741b5745e3e022390c642c284d0d528249360e322c0dbc3d34fea031611c207a7d
+  languageName: node
+  linkType: hard
+
+"@tanstack/table-core@npm:8.9.3":
+  version: 8.9.3
+  resolution: "@tanstack/table-core@npm:8.9.3"
+  checksum: 52c7e57daaa3160450fb0bde702ec0b8aab159e2b19efd1012e03b3e167acc52839f5b39578cc8bf96e91346719f400d0435a5191384c168d9477da82f276c38
+  languageName: node
+  linkType: hard
+
 "@tediousjs/connection-string@npm:^0.4.1":
   version: 0.4.1
   resolution: "@tediousjs/connection-string@npm:0.4.1"
@@ -11048,6 +11546,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@testing-library/jest-dom@npm:^5.16.5":
+  version: 5.17.0
+  resolution: "@testing-library/jest-dom@npm:5.17.0"
+  dependencies:
+    "@adobe/css-tools": ^4.0.1
+    "@babel/runtime": ^7.9.2
+    "@types/testing-library__jest-dom": ^5.9.1
+    aria-query: ^5.0.0
+    chalk: ^3.0.0
+    css.escape: ^1.5.1
+    dom-accessibility-api: ^0.5.6
+    lodash: ^4.17.15
+    redent: ^3.0.0
+  checksum: 9f28dbca8b50d7c306aae40c3aa8e06f0e115f740360004bd87d57f95acf7ab4b4f4122a7399a76dbf2bdaaafb15c99cc137fdcb0ae457a92e2de0f3fbf9b03b
+  languageName: node
+  linkType: hard
+
 "@testing-library/react-hooks@npm:^8.0.1":
   version: 8.0.1
   resolution: "@testing-library/react-hooks@npm:8.0.1"
@@ -11447,7 +11962,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/debug@npm:^4.0.0":
+"@types/debug@npm:4.1.8, @types/debug@npm:^4.0.0":
   version: 4.1.8
   resolution: "@types/debug@npm:4.1.8"
   dependencies:
@@ -11669,6 +12184,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/jest@npm:*":
+  version: 29.5.3
+  resolution: "@types/jest@npm:29.5.3"
+  dependencies:
+    expect: ^29.0.0
+    pretty-format: ^29.0.0
+  checksum: e36bb92e0b9e5ea7d6f8832baa42f087fc1697f6cd30ec309a07ea4c268e06ec460f1f0cfd2581daf5eff5763475190ec1ad8ac6520c49ccfe4f5c0a48bfa676
+  languageName: node
+  linkType: hard
+
 "@types/js-levenshtein@npm:^1.1.1":
   version: 1.1.1
   resolution: "@types/js-levenshtein@npm:1.1.1"
@@ -12104,6 +12629,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/stack-utils@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "@types/stack-utils@npm:2.0.1"
+  checksum: 205fdbe3326b7046d7eaf5e494d8084f2659086a266f3f9cf00bccc549c8e36e407f88168ad4383c8b07099957ad669f75f2532ed4bc70be2b037330f7bae019
+  languageName: node
+  linkType: hard
+
 "@types/stripe@npm:^8.0.417":
   version: 8.0.417
   resolution: "@types/stripe@npm:8.0.417"
@@ -12120,6 +12652,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/testing-library__jest-dom@npm:^5.9.1":
+  version: 5.14.8
+  resolution: "@types/testing-library__jest-dom@npm:5.14.8"
+  dependencies:
+    "@types/jest": "*"
+  checksum: 18f5ba7d0db8ebd91667b544537762ce63f11c4fd02b3d57afa92f9457a384d3ecf9bc7b50b6b445af1b3ea38b69862b4f95130720d4dd23621d598ac074d93a
+  languageName: node
+  linkType: hard
+
 "@types/tinycolor2@npm:^1.4.0":
   version: 1.4.3
   resolution: "@types/tinycolor2@npm:1.4.3"
@@ -12247,6 +12788,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/yargs@npm:^17.0.8":
+  version: 17.0.24
+  resolution: "@types/yargs@npm:17.0.24"
+  dependencies:
+    "@types/yargs-parser": "*"
+  checksum: 5f3ac4dc4f6e211c1627340160fbe2fd247ceba002190da6cf9155af1798450501d628c9165a183f30a224fc68fa5e700490d740ff4c73e2cdef95bc4e8ba7bf
+  languageName: node
+  linkType: hard
+
 "@types/yoga-layout@npm:1.9.2":
   version: 1.9.2
   resolution: "@types/yoga-layout@npm:1.9.2"
@@ -15141,6 +15691,7 @@ __metadata:
     "@deploysentinel/playwright": ^0.3.3
     "@playwright/test": ^1.31.2
     "@snaplet/copycat": ^0.3.0
+    "@testing-library/jest-dom": ^5.16.5
     "@types/dompurify": ^2.4.0
     c8: ^7.13.0
     city-timezones: ^1.2.1
@@ -15347,7 +15898,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"chalk@npm:3.0.0":
+"chalk@npm:3.0.0, chalk@npm:^3.0.0":
   version: 3.0.0
   resolution: "chalk@npm:3.0.0"
   dependencies:
@@ -15481,6 +16032,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"chart.js@npm:^3.7.1":
+  version: 3.9.1
+  resolution: "chart.js@npm:3.9.1"
+  checksum: 9ab0c0ac01215af0b3f020f2e313030fd6e347b48ed17d5484ee9c4e8ead45e78ae71bea16c397621c386b409ce0b14bf17f9f6c2492cd15b56c0f433efdfff6
+  languageName: node
+  linkType: hard
+
 "check-error@npm:^1.0.2":
   version: 1.0.2
   resolution: "check-error@npm:1.0.2"
@@ -15879,6 +16437,26 @@ __metadata:
   languageName: node
   linkType: hard
 
+"cmdk@npm:^0.2.0":
+  version: 0.2.0
+  resolution: "cmdk@npm:0.2.0"
+  dependencies:
+    "@radix-ui/react-dialog": 1.0.0
+    command-score: 0.1.2
+  peerDependencies:
+    react: ^18.0.0
+    react-dom: ^18.0.0
+  checksum: b81add6daebb192e0ab79bd776aa22c75a9aa5c8ca3c40d6c99cbe3ab4f276bf580eb49d1e568126b6af1e72c0012b53ec260c241a594baf782a80b866a0d17e
+  languageName: node
+  linkType: hard
+
+"cmk@npm:^0.1.1":
+  version: 0.1.1
+  resolution: "cmk@npm:0.1.1"
+  checksum: a05deef766a368c96d80bae89eb5046dfd708b0f3ca86ffa936f78ec2a49b4d9e5cab0c7a8b4e208b490354eaaf233a6e656a868c50876b4fdf5cd90de9e358d
+  languageName: node
+  linkType: hard
+
 "co-prompt@npm:^1.0.0":
   version: 1.0.0
   resolution: "co-prompt@npm:1.0.0"
@@ -16020,7 +16598,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"command-score@npm:^0.1.2":
+"command-score@npm:0.1.2, command-score@npm:^0.1.2":
   version: 0.1.2
   resolution: "command-score@npm:0.1.2"
   checksum: b733fd552d7e569070da3d474b1ed5f54785fdf3dd61670002e0a00b2eff1a547c2b6d3af3683c012f4f39c6455f9e7ee5e9997a79c08048ec37ec2195d3df08
@@ -16069,7 +16647,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"commander@npm:^8.0.0, commander@npm:^8.3.0":
+"commander@npm:^8.3.0":
   version: 8.3.0
   resolution: "commander@npm:8.3.0"
   checksum: 0f82321821fc27b83bd409510bb9deeebcfa799ff0bf5d102128b500b7af22872c0c92cb6a0ebc5a4cf19c6b550fba9cedfa7329d18c6442a625f851377bacf0
@@ -16761,7 +17339,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"css.escape@npm:1.5.1":
+"css.escape@npm:1.5.1, css.escape@npm:^1.5.1":
   version: 1.5.1
   resolution: "css.escape@npm:1.5.1"
   checksum: f6d38088d870a961794a2580b2b2af1027731bb43261cfdce14f19238a88664b351cc8978abc20f06cc6bbde725699dec8deb6fe9816b139fc3f2af28719e774
@@ -17511,6 +18089,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"dom-accessibility-api@npm:^0.5.6":
+  version: 0.5.16
+  resolution: "dom-accessibility-api@npm:0.5.16"
+  checksum: 005eb283caef57fc1adec4d5df4dd49189b628f2f575af45decb210e04d634459e3f1ee64f18b41e2dcf200c844bc1d9279d80807e686a30d69a4756151ad248
+  languageName: node
+  linkType: hard
+
 "dom-accessibility-api@npm:^0.5.9":
   version: 0.5.14
   resolution: "dom-accessibility-api@npm:0.5.14"
@@ -17731,6 +18316,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"dotenv@npm:^10.0.0":
+  version: 10.0.0
+  resolution: "dotenv@npm:10.0.0"
+  checksum: f412c5fe8c24fbe313d302d2500e247ba8a1946492db405a4de4d30dd0eb186a88a43f13c958c5a7de303938949c4231c56994f97d05c4bc1f22478d631b4005
+  languageName: node
+  linkType: hard
+
 "dotenv@npm:^16.0.0, dotenv@npm:^16.0.1":
   version: 16.0.1
   resolution: "dotenv@npm:16.0.1"
@@ -18834,13 +19426,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"esm@npm:^3.2.25":
-  version: 3.2.25
-  resolution: "esm@npm:3.2.25"
-  checksum: 978aabe2de83541c105605a6d60a26ed8e627ef6bb0a7605fe15a95bbdea6b8348bd045255cb22219c054dd09a81a94823df00843d9e97f42419c92015ce3a64
-  languageName: node
-  linkType: hard
-
 "espree@npm:9.2.0":
   version: 9.2.0
   resolution: "espree@npm:9.2.0"
@@ -19198,6 +19783,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"expect@npm:^29.0.0":
+  version: 29.6.1
+  resolution: "expect@npm:29.6.1"
+  dependencies:
+    "@jest/expect-utils": ^29.6.1
+    "@types/node": "*"
+    jest-get-type: ^29.4.3
+    jest-matcher-utils: ^29.6.1
+    jest-message-util: ^29.6.1
+    jest-util: ^29.6.1
+  checksum: 4e712e52c90f6c54e748fd2876be33c43ada6a59088ddf6a1acb08b18b3b97b3a672124684abe32599986d2f2a438d5afad148837ee06ea386d2a4bf0348de78
+  languageName: node
+  linkType: hard
+
 "express@npm:^4.14.0":
   version: 4.17.3
   resolution: "express@npm:4.17.3"
@@ -21799,19 +22398,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"i18n-unused@npm:^0.13.0":
-  version: 0.13.0
-  resolution: "i18n-unused@npm:0.13.0"
-  dependencies:
-    commander: ^8.0.0
-    esm: ^3.2.25
-    ts-import: ^2.0.39
-  bin:
-    i18n-unused: bin/i18n-unused.cjs
-  checksum: 000ad439edda9abf27ef3041ea96135f1b8a23632764ad6dad781fdf3e7483235e4fc863480707624f3ad2c48b555d5195b367fb3bbd54ac2e41c9ebcb88f8b5
-  languageName: node
-  linkType: hard
-
 "i18next-fs-backend@npm:^2.1.1":
   version: 2.1.3
   resolution: "i18next-fs-backend@npm:2.1.3"
@@ -21973,6 +22559,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"immer@npm:^9.0.15":
+  version: 9.0.21
+  resolution: "immer@npm:9.0.21"
+  checksum: 70e3c274165995352f6936695f0ef4723c52c92c92dd0e9afdfe008175af39fa28e76aafb3a2ca9d57d1fb8f796efc4dd1e1cc36f18d33fa5b74f3dfb0375432
+  languageName: node
+  linkType: hard
+
 "immutable@npm:^3.8.2, immutable@npm:^3.x.x":
   version: 3.8.2
   resolution: "immutable@npm:3.8.2"
@@ -23136,6 +23729,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jest-diff@npm:^29.6.1":
+  version: 29.6.1
+  resolution: "jest-diff@npm:29.6.1"
+  dependencies:
+    chalk: ^4.0.0
+    diff-sequences: ^29.4.3
+    jest-get-type: ^29.4.3
+    pretty-format: ^29.6.1
+  checksum: c6350178ca27d92c7fd879790fb2525470c1ff1c5d29b1834a240fecd26c6904fb470ebddb98dc96dd85389c56c3b50e6965a1f5203e9236d213886ed9806219
+  languageName: node
+  linkType: hard
+
 "jest-get-type@npm:^29.4.3":
   version: 29.4.3
   resolution: "jest-get-type@npm:29.4.3"
@@ -23168,6 +23773,35 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jest-matcher-utils@npm:^29.6.1":
+  version: 29.6.1
+  resolution: "jest-matcher-utils@npm:29.6.1"
+  dependencies:
+    chalk: ^4.0.0
+    jest-diff: ^29.6.1
+    jest-get-type: ^29.4.3
+    pretty-format: ^29.6.1
+  checksum: d2efa6aed6e4820758b732b9fefd315c7fa4508ee690da656e1c5ac4c1a0f4cee5b04c9719ee1fda9aeb883b4209186c145089ced521e715b9fa70afdfa4a9c6
+  languageName: node
+  linkType: hard
+
+"jest-message-util@npm:^29.6.1":
+  version: 29.6.1
+  resolution: "jest-message-util@npm:29.6.1"
+  dependencies:
+    "@babel/code-frame": ^7.12.13
+    "@jest/types": ^29.6.1
+    "@types/stack-utils": ^2.0.0
+    chalk: ^4.0.0
+    graceful-fs: ^4.2.9
+    micromatch: ^4.0.4
+    pretty-format: ^29.6.1
+    slash: ^3.0.0
+    stack-utils: ^2.0.3
+  checksum: 3e7cb2ff087fe72255292e151d24e4fbb4cd6134885c0a67a4b302f233fe4110bf7580b176f427f05ad7550eb878ed94237209785d09d659a7d171ffa59c068f
+  languageName: node
+  linkType: hard
+
 "jest-mock@npm:^27.0.6":
   version: 27.5.1
   resolution: "jest-mock@npm:27.5.1"
@@ -23209,6 +23843,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jest-util@npm:^29.6.1":
+  version: 29.6.1
+  resolution: "jest-util@npm:29.6.1"
+  dependencies:
+    "@jest/types": ^29.6.1
+    "@types/node": "*"
+    chalk: ^4.0.0
+    ci-info: ^3.2.0
+    graceful-fs: ^4.2.9
+    picomatch: ^2.2.3
+  checksum: fc553556c1350c443449cadaba5fb9d604628e8b5ceb6ceaf4e7e08975b24277d0a14bf2e0f956024e03c23e556fcb074659423422a06fbedf2ab52978697ac7
+  languageName: node
+  linkType: hard
+
 "jest-worker@npm:^26.5.0, jest-worker@npm:^26.6.2":
   version: 26.6.2
   resolution: "jest-worker@npm:26.6.2"
@@ -23266,6 +23914,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jose@npm:4.11.1":
+  version: 4.11.1
+  resolution: "jose@npm:4.11.1"
+  checksum: cd15cba258d0fd20f6168631ce2e94fda8442df80e43c1033c523915cecdf390a1cc8efe0eab0c2d65935ca973d791c668aea80724d2aa9c2879d4e70f3081d7
+  languageName: node
+  linkType: hard
+
 "jose@npm:4.12.0":
   version: 4.12.0
   resolution: "jose@npm:4.12.0"
@@ -23817,6 +24472,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"kleur@npm:4.1.5, kleur@npm:^4.0.3, kleur@npm:^4.1.5":
+  version: 4.1.5
+  resolution: "kleur@npm:4.1.5"
+  checksum: 1dc476e32741acf0b1b5b0627ffd0d722e342c1b0da14de3e8ae97821327ca08f9fb944542fb3c126d90ac5f27f9d804edbe7c585bf7d12ef495d115e0f22c12
+  languageName: node
+  linkType: hard
+
 "kleur@npm:^3.0.3":
   version: 3.0.3
   resolution: "kleur@npm:3.0.3"
@@ -23824,13 +24486,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"kleur@npm:^4.0.3, kleur@npm:^4.1.5":
-  version: 4.1.5
-  resolution: "kleur@npm:4.1.5"
-  checksum: 1dc476e32741acf0b1b5b0627ffd0d722e342c1b0da14de3e8ae97821327ca08f9fb944542fb3c126d90ac5f27f9d804edbe7c585bf7d12ef495d115e0f22c12
-  languageName: node
-  linkType: hard
-
 "klona@npm:^2.0.4, klona@npm:^2.0.5":
   version: 2.0.5
   resolution: "klona@npm:2.0.5"
@@ -26845,6 +27500,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"oauth4webapi@npm:2.0.5":
+  version: 2.0.5
+  resolution: "oauth4webapi@npm:2.0.5"
+  checksum: 32d0cb7b1cca42d51dfb88075ca2d69fe33172a807e8ea50e317d17cab3bc80588ab8ebcb7eb4600c371a70af4674595b4b341daf6f3a655f1efa1ab715bb6c9
+  languageName: node
+  linkType: hard
+
 "oauth@npm:^0.9.15":
   version: 0.9.15
   resolution: "oauth@npm:0.9.15"
@@ -26923,6 +27585,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"object-path@npm:^0.11.8":
+  version: 0.11.8
+  resolution: "object-path@npm:0.11.8"
+  checksum: 684ccf0fb6b82f067dc81e2763481606692b8485bec03eb2a64e086a44dbea122b2b9ef44423a08e09041348fe4b4b67bd59985598f1652f67df95f0618f5968
+  languageName: node
+  linkType: hard
+
 "object-visit@npm:^1.0.0":
   version: 1.0.1
   resolution: "object-visit@npm:1.0.1"
@@ -27242,13 +27911,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"options-defaults@npm:^2.0.39":
-  version: 2.0.40
-  resolution: "options-defaults@npm:2.0.40"
-  checksum: 2bb3697a1aabecee4b76ee68857bd857957f664b78b419306a05e9c36182305092b0fca39035f287c75d24568326e06a0234d168290a9e9c88f1f2ce6e6dd977
-  languageName: node
-  linkType: hard
-
 "ora@npm:^5.4.1":
   version: 5.4.1
   resolution: "ora@npm:5.4.1"
@@ -27997,7 +28659,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"picomatch@npm:^2.0.4, picomatch@npm:^2.2.1, picomatch@npm:^2.2.2, picomatch@npm:^2.3.0, picomatch@npm:^2.3.1":
+"picomatch@npm:^2.0.4, picomatch@npm:^2.2.1, picomatch@npm:^2.2.2, picomatch@npm:^2.2.3, picomatch@npm:^2.3.0, picomatch@npm:^2.3.1":
   version: 2.3.1
   resolution: "picomatch@npm:2.3.1"
   checksum: 050c865ce81119c4822c45d3c84f1ced46f93a0126febae20737bd05ca20589c564d6e9226977df859ed5e03dc73f02584a2b0faad36e896936238238b0446cf
@@ -28510,6 +29172,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"preact-render-to-string@npm:5.2.3":
+  version: 5.2.3
+  resolution: "preact-render-to-string@npm:5.2.3"
+  dependencies:
+    pretty-format: ^3.8.0
+  peerDependencies:
+    preact: ">=10"
+  checksum: 6e46288d8956adde35b9fe3a21aecd9dea29751b40f0f155dea62f3896f27cb8614d457b32f48d33909d2da81135afcca6c55077520feacd7d15164d1371fb44
+  languageName: node
+  linkType: hard
+
 "preact-render-to-string@npm:^5.1.19":
   version: 5.2.6
   resolution: "preact-render-to-string@npm:5.2.6"
@@ -28521,7 +29194,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"preact@npm:^10.6.3":
+"preact@npm:10.11.3, preact@npm:^10.6.3":
   version: 10.11.3
   resolution: "preact@npm:10.11.3"
   checksum: 9387115aa0581e8226309e6456e9856f17dfc0e3d3e63f774de80f3d462a882ba7c60914c05942cb51d51e23e120dcfe904b8d392d46f29ad15802941fe7a367
@@ -28683,6 +29356,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"pretty-format@npm:^29.0.0, pretty-format@npm:^29.6.1":
+  version: 29.6.1
+  resolution: "pretty-format@npm:29.6.1"
+  dependencies:
+    "@jest/schemas": ^29.6.0
+    ansi-styles: ^5.0.0
+    react-is: ^18.0.0
+  checksum: 6f923a2379a37a425241dc223d76f671c73c4f37dba158050575a54095867d565c068b441843afdf3d7c37bed9df4bbadf46297976e60d4149972b779474203a
+  languageName: node
+  linkType: hard
+
 "pretty-format@npm:^29.5.0":
   version: 29.5.0
   resolution: "pretty-format@npm:29.5.0"
@@ -28726,6 +29410,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"prisma-field-encryption@npm:^1.4.0":
+  version: 1.4.1
+  resolution: "prisma-field-encryption@npm:1.4.1"
+  dependencies:
+    "@47ng/cloak": ^1.1.0
+    "@prisma/generator-helper": ^4.0.0
+    debug: ^4.3.4
+    immer: ^9.0.15
+    object-path: ^0.11.8
+    zod: ^3.17.3
+  peerDependencies:
+    "@prisma/client": ^3.8.0 || ^4
+  bin:
+    prisma-field-encryption: dist/generator/main.js
+  checksum: cf059abc1c39ae9252494aaf6ce2bfa0f415583b8cd11b9d84eeadfbb504e00f61570b0e3158ba4b7d52daf91353ffe92766a717c03b9965c421cc08ed49c303
+  languageName: node
+  linkType: hard
+
 "prisma@npm:^4.16.0":
   version: 4.16.0
   resolution: "prisma@npm:4.16.0"
@@ -29299,6 +30001,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-chartjs-2@npm:^4.0.1":
+  version: 4.3.1
+  resolution: "react-chartjs-2@npm:4.3.1"
+  peerDependencies:
+    chart.js: ^3.5.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+  checksum: 574d12cc43b9b4a0f1e04cc692982e16ef7083c03da2a8a9fc2180fe9bcadc793008f81d8f4eec5465925eff84c95d7c523cb74376858b363ae75a83bb3c2a5d
+  languageName: node
+  linkType: hard
+
 "react-colorful@npm:^5.6.0":
   version: 5.6.0
   resolution: "react-colorful@npm:5.6.0"
@@ -29839,6 +30551,25 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-remove-scroll@npm:2.5.4":
+  version: 2.5.4
+  resolution: "react-remove-scroll@npm:2.5.4"
+  dependencies:
+    react-remove-scroll-bar: ^2.3.3
+    react-style-singleton: ^2.2.1
+    tslib: ^2.1.0
+    use-callback-ref: ^1.3.0
+    use-sidecar: ^1.1.2
+  peerDependencies:
+    "@types/react": ^16.8.0 || ^17.0.0 || ^18.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 01b0f65542a4c8803ee748b4e6cf2adad66d034e15fb72e8455773b0d7b178ec806b3194d74f412db7064670c45552cc666c04e9fb3b5d466dce5fb48e634825
+  languageName: node
+  linkType: hard
+
 "react-remove-scroll@npm:2.5.5":
   version: 2.5.5
   resolution: "react-remove-scroll@npm:2.5.5"
@@ -30103,7 +30834,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-virtual@npm:^2.8.2":
+"react-virtual@npm:^2.10.4, react-virtual@npm:^2.8.2":
   version: 2.10.4
   resolution: "react-virtual@npm:2.10.4"
   dependencies:
@@ -31143,6 +31874,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"s-ago@npm:^2.2.0":
+  version: 2.2.0
+  resolution: "s-ago@npm:2.2.0"
+  checksum: f665fef44d9d88322ce5a798ca3c49b40f96231ddc7bd46dc23c883e98215675aa422985760d45d3779faa3c0bc94edb2a50630bf15f54c239d11963e53d998c
+  languageName: node
+  linkType: hard
+
 "sade@npm:^1.7.3":
   version: 1.8.1
   resolution: "sade@npm:1.8.1"
@@ -32232,6 +32970,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"stack-utils@npm:^2.0.3":
+  version: 2.0.6
+  resolution: "stack-utils@npm:2.0.6"
+  dependencies:
+    escape-string-regexp: ^2.0.0
+  checksum: 052bf4d25bbf5f78e06c1d5e67de2e088b06871fa04107ca8d3f0e9d9263326e2942c8bedee3545795fc77d787d443a538345eef74db2f8e35db3558c6f91ff7
+  languageName: node
+  linkType: hard
+
 "stackback@npm:0.0.2":
   version: 0.0.2
   resolution: "stackback@npm:0.0.2"
@@ -33123,6 +33870,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"swr@npm:^1.2.2":
+  version: 1.3.0
+  resolution: "swr@npm:1.3.0"
+  peerDependencies:
+    react: ^16.11.0 || ^17.0.0 || ^18.0.0
+  checksum: e7a184f0d560e9c8be85c023cc8e65e56a88a6ed46f9394b301b07f838edca23d2e303685319a4fcd620b81d447a7bcb489c7fa0a752c259f91764903c690cdb
+  languageName: node
+  linkType: hard
+
 "symbol-tree@npm:^3.2.4":
   version: 3.2.4
   resolution: "symbol-tree@npm:3.2.4"
@@ -33872,15 +34628,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ts-import@npm:^2.0.39":
-  version: 2.0.40
-  resolution: "ts-import@npm:2.0.40"
-  dependencies:
-    options-defaults: ^2.0.39
-  checksum: 9d05df5825a88fcc57b069fab6ee52d405350a60d214c0df2d6288a69b6160ee80ac10f5bceab055698935987441f7f13fefb887654b32f157d3ef19ce4856b4
-  languageName: node
-  linkType: hard
-
 "ts-interface-checker@npm:^0.1.9":
   version: 0.1.13
   resolution: "ts-interface-checker@npm:0.1.13"
@@ -37028,7 +37775,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"zod@npm:3.21.4":
+"zod@npm:3.21.4, zod@npm:^3.17.3":
   version: 3.21.4
   resolution: "zod@npm:3.21.4"
   checksum: f185ba87342ff16f7a06686767c2b2a7af41110c7edf7c1974095d8db7a73792696bcb4a00853de0d2edeb34a5b2ea6a55871bc864227dace682a0a28de33e1f