From a2d1dbebba5230a0b797e82f975a4b595ac8c6ce Mon Sep 17 00:00:00 2001
From: sean-brydon <55134778+sean-brydon@users.noreply.github.com>
Date: Thu, 14 Sep 2023 09:45:13 +0100
Subject: [PATCH] feat: editmode availbility slider (#11197)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Add loading data and banner

* [WIP] hasEditPerms middleware

* fix: type error in booker (#11011)

* New Crowdin translations by Github Action

* refactor: removed redundant test (#10785)

Co-authored-by: gitstart-calcom <gitstart@users.noreply.github.com>
Co-authored-by: Shivam Kalra <shivamkalra98@gmail.com>

* feat: 2fa backup codes (#10600)

Co-authored-by: Peer Richelsen <peeroke@gmail.com>

* Delete add-PRs-to-project-reviewing-PRs.yml (#11008)

Co-authored-by: alannnc <alannnc@gmail.com>

* New Crowdin translations by Github Action

* fix: multiple duration when booking (#11032)

* fix: other reported issues (#11015)

* fix: weird margin top in avatar

* fix: pending users are shown on booking page

* fix: avatar and naming issues

* fix: toast alignment and removing unneeded titles

* missing changes from toast improvements

* feat: empty state for teams without event types

* Removing console.log

* feat: cal ai (#10992)

Co-authored-by: nicktrn <55853254+nicktrn@users.noreply.github.com>
Co-authored-by: tedspare <ted.spare@gmail.com>
Co-authored-by: Alex van Andel <me@alexvanandel.com>

* New Crowdin translations by Github Action

* fix: meeting ended trigger for webhooks and zapier sometimes not working (#10946)

Co-authored-by: mohammed gehad <mohammed.gehad.1998@gmail.com>
Co-authored-by: Monto <138862352+monto7926@users.noreply.github.com>
Co-authored-by: Carina Wollendorfer <30310907+CarinaWolli@users.noreply.github.com>

* feat: team admin: see connected apps of team members (#11036)

* added feature:team admin can see connected apps of members

* fixed the type error

* Update packages/lib/server/queries/teams/index.ts

* Minor fixes

---------

Co-authored-by: alannnc <alannnc@gmail.com>

* fix: lower case slugs in teams (#11026)

* fix: lower case slugs in teams

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>

* fix: use slugify

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>

---------

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>

* refactor: improvements on german translation (#10898)

* fix: fix-tablet-menu-not-centered-sidebar (#11020)

Co-authored-by: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com>

* chore: add Popover in storybook (#11021)

Co-authored-by: gitstart-calcom <gitstart@users.noreply.github.com>
Co-authored-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>

* fix: Set mobile availability (#11027)

* chore: add ColorPicker in storybook (CALCOM-10760) (#10866)

Co-authored-by: gitstart-calcom <gitstart@users.noreply.github.com>

* feat: adds next cold start profiler (#11014)

* Handle disabling of ORGANIZATIONS_ENABLED flag (#11041)

* New Crowdin translations by Github Action

* styles:dark mode color fix (#11004)

* chore: sheet darkmode and improve responsive (#11047)

* fix: handle collective multiple host on destinationCalendar (#10967)

* fix: include app data and credentials from DB (#11048)

* include app data and credentials from DB

* Improve performance

* fix: Error when running storybook (#11037)

Co-authored-by: gitstart-calcom <gitstart@users.noreply.github.com>
Co-authored-by: Peer Richelsen <peeroke@gmail.com>

* fix: broken company profile link on team booking page (#10978)

* chore: add ErrorBoundary in storybook (CALCOM-10760) (#10872)

Co-authored-by: gitstart-calcom <gitstart@users.noreply.github.com>

* feat: sorting for workflow and routing forms (#10780)

Co-authored-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>
Co-authored-by: Peer Richelsen <peeroke@gmail.com>

* resolve zod versions across child packages (#11052)

* fix: List storybook file is empty (fix-list) (#10965)

Co-authored-by: gitstart-calcom <gitstart@users.noreply.github.com>

* fix: admin org list without members (#11051)

Co-authored-by: Peer Richelsen <peeroke@gmail.com>

* chore: add ToggleGroup in storybook (#10802)

Co-authored-by: gitstart-calcom <gitstart@users.noreply.github.com>
Co-authored-by: sean-brydon <55134778+sean-brydon@users.noreply.github.com>

* fix: add metadata to stripe payment intent (#11053)

* fix: Logo storybook file with invalid icons (fix-logo) (#11018)

Co-authored-by: gitstart-calcom <gitstart@users.noreply.github.com>

* fix: Add controls for Select Field storybook file (#10936)

Co-authored-by: gitstart-calcom <gitstart@users.noreply.github.com>

* fix: Fix tooltip control on ButtonPlayground storybook file (fix-ButtonTooltip) (#10937)

Co-authored-by: gitstart-calcom <gitstart@users.noreply.github.com>

* fix: email embed – remove collapsible and permanently show times (#10996)

Co-authored-by: Hariom Balhara <hariombalhara@gmail.com>
Co-authored-by: Mehul <mehulzr@gmail.com>

* chore: add Timezone Select in storybook (CALCOM-10760) (#10966)

Co-authored-by: gitstart-calcom <gitstart@users.noreply.github.com>
Co-authored-by: Peer Richelsen <peeroke@gmail.com>

* chore: add Switch in storybook (CALCOM-10760) (#10804)

Co-authored-by: gitstart-calcom <gitstart@users.noreply.github.com>
Co-authored-by: Peer Richelsen <peeroke@gmail.com>

* Sync packages

* fix: zod utils due to upgrade

* easy fix (#11054)

* fix sub quantity update stripe (#11057)

* v3.2.7

* Revert "feat: adds next cold start profiler (#11014)" (#11072)

This reverts commit 05631d093f30f9c74ebc58b0ff6a8b11824dffe1.

* fix: Fixes username invite issue (#10998)

* Fixes username invite issue

* Ensure we only suggest email invites in org members

---------

Co-authored-by: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com>

* Fix sheet layout

* WIP permissions when userschedule doesnt match

* WIP get handler weird behaviour

* Update toast

* add disabled - handle membership overlap

* Handle permissions + perf improvments

* use input uid

* Remove Console.log

* Clean up

* Revert changes accidental

* Fix merge artifacts

* Remove dead code

* Remove code after return

* Update read permission check

* Revert avatar changes as fixed elsewhere

* Handle if user has not completed onboarding

* Disable button

* Update packages/lib/hasEditPermissionForUser.ts

* Correct Error throwing

* Update packages/features/timezone-buddy/components/AvailabilityEditSheet.tsx

* Fix type erro

* Add i18n

* Improve Spacing

* Update yarn.lock

---------

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>
Co-authored-by: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com>
Co-authored-by: Crowdin Bot <support+bot@crowdin.com>
Co-authored-by: GitStart-Cal.com <121884634+gitstart-calcom@users.noreply.github.com>
Co-authored-by: gitstart-calcom <gitstart@users.noreply.github.com>
Co-authored-by: Shivam Kalra <shivamkalra98@gmail.com>
Co-authored-by: nicktrn <55853254+nicktrn@users.noreply.github.com>
Co-authored-by: Peer Richelsen <peeroke@gmail.com>
Co-authored-by: alannnc <alannnc@gmail.com>
Co-authored-by: Leo Giovanetti <hello@leog.me>
Co-authored-by: DexterStorey <36115192+DexterStorey@users.noreply.github.com>
Co-authored-by: tedspare <ted.spare@gmail.com>
Co-authored-by: Alex van Andel <me@alexvanandel.com>
Co-authored-by: Monto <138862352+montocoder@users.noreply.github.com>
Co-authored-by: mohammed gehad <mohammed.gehad.1998@gmail.com>
Co-authored-by: Monto <138862352+monto7926@users.noreply.github.com>
Co-authored-by: Carina Wollendorfer <30310907+CarinaWolli@users.noreply.github.com>
Co-authored-by: Abhijeet Singh <asingh9829@gmail.com>
Co-authored-by: Kamil B. Demirci <kamil.demirci@indyaner.ch>
Co-authored-by: Denzil Samuel <71846487+samueldenzil@users.noreply.github.com>
Co-authored-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>
Co-authored-by: Anik Dhabal Babu <81948346+anikdhabal@users.noreply.github.com>
Co-authored-by: Omar López <zomars@me.com>
Co-authored-by: Hariom Balhara <hariombalhara@gmail.com>
Co-authored-by: Sahil Padvi <71093044+Sahil25061999@users.noreply.github.com>
Co-authored-by: Patel Divyesh <pateldivyesh1323@gmail.com>
Co-authored-by: neo773 <62795688+neo773@users.noreply.github.com>
Co-authored-by: Mehul <mehulzr@gmail.com>
---
 apps/web/public/static/locales/en/common.json |   3 +
 .../schedules/components/Schedule.tsx         |  26 ++-
 .../components/AvailabilityEditSheet.tsx      | 199 ++++++++++++++++++
 .../components/AvailabilitySliderTable.tsx    |  41 +++-
 packages/lib/hasEditPermissionForUser.ts      |  64 ++++++
 .../viewer/availability/schedule/_router.tsx  |  20 ++
 .../availability/schedule/get.handler.ts      |  24 +--
 .../schedule/getScheduleByUserId.handler.ts   |  52 +++++
 .../schedule/getScheduleByUserId.schema.ts    |   7 +
 .../availability/schedule/update.handler.ts   |  17 +-
 .../team/listTeamAvailability.handler.ts      |   2 +
 .../server/routers/viewer/teams/_router.tsx   |  21 ++
 .../teams/hasEditPermissionForUser.handler.ts |  19 ++
 .../teams/hasEditPermissionForUser.schema.ts  |   7 +
 packages/ui/components/data-table/index.tsx   |  11 +-
 packages/ui/components/sheet/sheet.tsx        |  19 +-
 packages/ui/components/table/TableNew.tsx     |   5 +-
 yarn.lock                                     |   7 +-
 18 files changed, 502 insertions(+), 42 deletions(-)
 create mode 100644 packages/features/timezone-buddy/components/AvailabilityEditSheet.tsx
 create mode 100644 packages/lib/hasEditPermissionForUser.ts
 create mode 100644 packages/trpc/server/routers/viewer/availability/schedule/getScheduleByUserId.handler.ts
 create mode 100644 packages/trpc/server/routers/viewer/availability/schedule/getScheduleByUserId.schema.ts
 create mode 100644 packages/trpc/server/routers/viewer/teams/hasEditPermissionForUser.handler.ts
 create mode 100644 packages/trpc/server/routers/viewer/teams/hasEditPermissionForUser.schema.ts

diff --git a/apps/web/public/static/locales/en/common.json b/apps/web/public/static/locales/en/common.json
index 478d87fdfc..278afdba9e 100644
--- a/apps/web/public/static/locales/en/common.json
+++ b/apps/web/public/static/locales/en/common.json
@@ -2050,5 +2050,8 @@
   "no_members_found": "No members found",
   "event_setup_length_error":"Event Setup: The duration must be at least 1 minute.",
   "availability_schedules":"Availability Schedules",
+  "view_only_edit_availability_not_onboarded":"This user has not completed onboarding. You will not be able to set their availability until they have completed onboarding.",
+  "view_only_edit_availability":"You are viewing this user's availability. You can only edit your own availability.",
+  "edit_users_availability":"Edit user's availability: {{username}}",
   "ADD_NEW_STRINGS_ABOVE_THIS_LINE_TO_PREVENT_MERGE_CONFLICTS": "↑↑↑↑↑↑↑↑↑↑↑↑↑ Add your new strings above here ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑"
 }
diff --git a/packages/features/schedules/components/Schedule.tsx b/packages/features/schedules/components/Schedule.tsx
index 5ceec95205..50b6c609f9 100644
--- a/packages/features/schedules/components/Schedule.tsx
+++ b/packages/features/schedules/components/Schedule.tsx
@@ -43,11 +43,13 @@ const ScheduleDay = <TFieldValues extends FieldValues>({
   weekday,
   control,
   CopyButton,
+  disabled,
 }: {
   name: ArrayPath<TFieldValues>;
   weekday: string;
   control: Control<TFieldValues>;
   CopyButton: JSX.Element;
+  disabled?: boolean;
 }) => {
   const { watch, setValue } = useFormContext();
   const watchDayRange = watch(name);
@@ -60,7 +62,7 @@ const ScheduleDay = <TFieldValues extends FieldValues>({
           <label className="text-default flex flex-row items-center space-x-2 rtl:space-x-reverse">
             <div>
               <Switch
-                disabled={!watchDayRange}
+                disabled={!watchDayRange || disabled}
                 defaultChecked={watchDayRange && watchDayRange.length > 0}
                 checked={watchDayRange && !!watchDayRange.length}
                 onCheckedChange={(isChecked) => {
@@ -75,8 +77,8 @@ const ScheduleDay = <TFieldValues extends FieldValues>({
       <>
         {watchDayRange ? (
           <div className="flex sm:ml-2">
-            <DayRanges control={control} name={name} />
-            {!!watchDayRange.length && <div className="block">{CopyButton}</div>}
+            <DayRanges control={control} name={name} disabled={disabled} />
+            {!!watchDayRange.length && !disabled && <div className="block">{CopyButton}</div>}
           </div>
         ) : (
           <SkeletonText className="ml-1 mt-2.5 h-6 w-48" />
@@ -133,11 +135,13 @@ const Schedule = <
 >({
   name,
   control,
+  disabled,
   weekStart = 0,
 }: {
   name: TPath;
   control: Control<TFieldValues>;
   weekStart?: number;
+  disabled?: boolean;
 }) => {
   const { i18n } = useLocale();
 
@@ -149,6 +153,7 @@ const Schedule = <
         const dayRangeName = `${name}.${weekdayIndex}` as ArrayPath<TFieldValues>;
         return (
           <ScheduleDay
+            disabled={disabled}
             name={dayRangeName}
             key={weekday}
             weekday={weekday}
@@ -163,10 +168,12 @@ const Schedule = <
 
 export const DayRanges = <TFieldValues extends FieldValues>({
   name,
+  disabled,
   control,
 }: {
   name: ArrayPath<TFieldValues>;
   control?: Control<TFieldValues>;
+  disabled?: boolean;
 }) => {
   const { t } = useLocale();
   const { getValues } = useFormContext();
@@ -184,6 +191,7 @@ export const DayRanges = <TFieldValues extends FieldValues>({
             <Controller name={`${name}.${index}`} render={({ field }) => <TimeRangeField {...field} />} />
             {index === 0 && (
               <Button
+                disabled={disabled}
                 tooltip={t("add_time_availability")}
                 className="text-default mx-2 "
                 type="button"
@@ -220,15 +228,18 @@ export const DayRanges = <TFieldValues extends FieldValues>({
 const RemoveTimeButton = ({
   index,
   remove,
+  disabled,
   className,
 }: {
   index: number | number[];
   remove: UseFieldArrayRemove;
   className?: string;
+  disabled?: boolean;
 }) => {
   const { t } = useLocale();
   return (
     <Button
+      disabled={disabled}
       type="button"
       variant="icon"
       color="destructive"
@@ -240,12 +251,18 @@ const RemoveTimeButton = ({
   );
 };
 
-const TimeRangeField = ({ className, value, onChange }: { className?: string } & ControllerRenderProps) => {
+const TimeRangeField = ({
+  className,
+  value,
+  onChange,
+  disabled,
+}: { className?: string; disabled?: boolean } & ControllerRenderProps) => {
   // this is a controlled component anyway given it uses LazySelect, so keep it RHF agnostic.
   return (
     <div className={classNames("flex flex-row gap-1", className)}>
       <LazySelect
         className="inline-block w-[100px]"
+        isDisabled={disabled}
         value={value.start}
         max={value.end}
         onChange={(option) => {
@@ -255,6 +272,7 @@ const TimeRangeField = ({ className, value, onChange }: { className?: string } &
       <span className="text-default mx-2 w-2 self-center"> - </span>
       <LazySelect
         className="inline-block w-[100px] rounded-md"
+        isDisabled={disabled}
         value={value.end}
         min={value.start}
         onChange={(option) => {
diff --git a/packages/features/timezone-buddy/components/AvailabilityEditSheet.tsx b/packages/features/timezone-buddy/components/AvailabilityEditSheet.tsx
new file mode 100644
index 0000000000..7e7464bcad
--- /dev/null
+++ b/packages/features/timezone-buddy/components/AvailabilityEditSheet.tsx
@@ -0,0 +1,199 @@
+import { useForm, useFieldArray } from "react-hook-form";
+
+import dayjs from "@calcom/dayjs";
+import { DateOverrideInputDialog, DateOverrideList } from "@calcom/features/schedules";
+import Schedule from "@calcom/features/schedules/components/Schedule";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { HttpError } from "@calcom/lib/http-error";
+import { trpc } from "@calcom/trpc/react";
+import type { Schedule as ScheduleType, TimeRange, WorkingHours } from "@calcom/types/schedule";
+import {
+  Button,
+  Form,
+  Label,
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  TimezoneSelect,
+  showToast,
+  Alert,
+} from "@calcom/ui";
+import { Plus } from "@calcom/ui/components/icon";
+
+import type { SliderUser } from "./AvailabilitySliderTable";
+
+interface Props {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  selectedUser?: SliderUser | null;
+}
+
+type AvailabilityFormValues = {
+  name: string;
+  schedule: ScheduleType;
+  dateOverrides: { ranges: TimeRange[] }[];
+  timeZone: string;
+  isDefault: boolean;
+};
+
+const DateOverride = ({ workingHours, disabled }: { workingHours: WorkingHours[]; disabled?: boolean }) => {
+  const { remove, append, replace, fields } = useFieldArray<AvailabilityFormValues, "dateOverrides">({
+    name: "dateOverrides",
+  });
+  const excludedDates = fields.map((field) => dayjs(field.ranges[0].start).utc().format("YYYY-MM-DD"));
+  const { t } = useLocale();
+  return (
+    <div className="">
+      <Label>{t("date_overrides")}</Label>
+      <div className="space-y-2">
+        <DateOverrideList
+          excludedDates={excludedDates}
+          remove={remove}
+          replace={replace}
+          items={fields}
+          workingHours={workingHours}
+        />
+        <DateOverrideInputDialog
+          workingHours={workingHours}
+          excludedDates={excludedDates}
+          onChange={(ranges) => ranges.forEach((range) => append({ ranges: [range] }))}
+          Trigger={
+            <Button color="secondary" StartIcon={Plus} data-testid="add-override" disabled={disabled}>
+              {t("add_an_override")}
+            </Button>
+          }
+        />
+      </div>
+    </div>
+  );
+};
+
+export function AvailabilityEditSheet(props: Props) {
+  // This sheet will not be rendered without a selected user
+  const userId = props.selectedUser?.id as number;
+  const { t } = useLocale();
+  const utils = trpc.useContext();
+
+  const { data: hasEditPermission, isLoading: loadingPermissions } =
+    trpc.viewer.teams.hasEditPermissionForUser.useQuery({
+      memberId: userId,
+    });
+
+  const { data, isLoading } = trpc.viewer.availability.schedule.getScheduleByUserId.useQuery({
+    userId: userId,
+  });
+
+  const updateMutation = trpc.viewer.availability.schedule.update.useMutation({
+    onSuccess: async () => {
+      utils.viewer.availability.listTeam.invalidate();
+      showToast(t("success"), "success");
+      props.onOpenChange(false);
+    },
+    onError: (err) => {
+      if (err instanceof HttpError) {
+        const message = `${err.statusCode}: ${err.message}`;
+        showToast(message, "error");
+      }
+    },
+  });
+
+  const form = useForm<AvailabilityFormValues>({
+    values: data && {
+      ...data,
+      timeZone: data?.timeZone || Intl.DateTimeFormat().resolvedOptions().timeZone,
+      schedule: data?.availability || [],
+    },
+  });
+
+  const watchTimezone = form.watch("timeZone");
+
+  return (
+    <Sheet open={props.open} onOpenChange={props.onOpenChange}>
+      <Form
+        form={form}
+        id="availability-form"
+        handleSubmit={async ({ dateOverrides, ...values }) => {
+          // Just blocking on a UI side -> Backend will also do the validation
+          if (!hasEditPermission) return;
+          data &&
+            updateMutation.mutate({
+              scheduleId: data?.id,
+              dateOverrides: dateOverrides.flatMap((override) => override.ranges),
+              ...values,
+            });
+        }}>
+        <SheetContent
+          bottomActions={
+            <>
+              <Button color="secondary" className="w-full justify-center">
+                {t("cancel")}
+              </Button>
+              <Button
+                disabled={!hasEditPermission || !data?.hasDefaultSchedule}
+                className="w-full justify-center"
+                type="submit"
+                loading={updateMutation.isLoading}
+                form="availability-form">
+                {t("save")}
+              </Button>
+            </>
+          }>
+          <SheetHeader>
+            <SheetTitle>
+              {t("edit_users_availability", {
+                username: props.selectedUser?.username ?? "Nameless user",
+              })}
+            </SheetTitle>
+          </SheetHeader>
+          {!data?.hasDefaultSchedule && !isLoading && hasEditPermission && (
+            <div className="my-2">
+              <Alert severity="warning" title={t("view_only_edit_availability_not_onboarded")} />
+            </div>
+          )}
+          {!hasEditPermission && !loadingPermissions && (
+            <div className="my-2">
+              <Alert severity="warning" title={t("view_only_edit_availability")} />
+            </div>
+          )}
+
+          <div className="mt-4 flex flex-col space-y-4">
+            <div>
+              <Label className="text-emphasis">
+                <>{t("timezone")}</>
+              </Label>
+              <TimezoneSelect
+                id="timezone"
+                isDisabled={!hasEditPermission || !data?.hasDefaultSchedule}
+                value={watchTimezone ?? "Europe/London"}
+                onChange={(event) => {
+                  if (event) form.setValue("timeZone", event.value, { shouldDirty: true });
+                }}
+              />
+            </div>
+            <div className="mt-4">
+              <Label className="text-emphasis">{t("members_default_schedule")}</Label>
+              {/* Remove padding from schedule without touching the component */}
+              <div className="[&>*:first-child]:!p-0">
+                <Schedule
+                  control={form.control}
+                  name="schedule"
+                  weekStart={0}
+                  disabled={!hasEditPermission || !data?.hasDefaultSchedule}
+                />
+              </div>
+            </div>
+            <div className="mt-4">
+              {data?.workingHours && (
+                <DateOverride
+                  workingHours={data.workingHours}
+                  disabled={!hasEditPermission || !data.hasDefaultSchedule}
+                />
+              )}
+            </div>
+          </div>
+        </SheetContent>
+      </Form>
+    </Sheet>
+  );
+}
diff --git a/packages/features/timezone-buddy/components/AvailabilitySliderTable.tsx b/packages/features/timezone-buddy/components/AvailabilitySliderTable.tsx
index 2471548564..57ca159087 100644
--- a/packages/features/timezone-buddy/components/AvailabilitySliderTable.tsx
+++ b/packages/features/timezone-buddy/components/AvailabilitySliderTable.tsx
@@ -12,6 +12,7 @@ import { Avatar, Button, ButtonGroup, DataTable } from "@calcom/ui";
 
 import { UpgradeTip } from "../../tips/UpgradeTip";
 import { TBContext, createTimezoneBuddyStore } from "../store";
+import { AvailabilityEditSheet } from "./AvailabilityEditSheet";
 import { TimeDial } from "./TimeDial";
 
 export interface SliderUser {
@@ -20,6 +21,7 @@ export interface SliderUser {
   email: string;
   timeZone: string;
   role: MembershipRole;
+  defaultScheduleId: number | null;
   dateRanges: DateRange[];
 }
 
@@ -50,8 +52,11 @@ function UpgradeTeamTip() {
 }
 
 export function AvailabilitySliderTable() {
+  const { t } = useLocale();
   const tableContainerRef = useRef<HTMLDivElement>(null);
   const [browsingDate, setBrowsingDate] = useState(dayjs());
+  const [editSheetOpen, setEditSheetOpen] = useState(false);
+  const [selectedUser, setSelectedUser] = useState<SliderUser | null>(null);
 
   const { data, isLoading, fetchNextPage, isFetching } = trpc.viewer.availability.listTeam.useInfiniteQuery(
     {
@@ -175,16 +180,32 @@ export function AvailabilitySliderTable() {
       value={createTimezoneBuddyStore({
         browsingDate: browsingDate.toDate(),
       })}>
-      <div className="relative">
-        <DataTable
-          tableContainerRef={tableContainerRef}
-          columns={memorisedColumns}
-          data={flatData}
-          isLoading={isLoading}
-          // tableOverlay={<HoverOverview />}
-          onScroll={(e) => fetchMoreOnBottomReached(e.target as HTMLDivElement)}
-        />
-      </div>
+      <>
+        <div className="relative">
+          <DataTable
+            tableContainerRef={tableContainerRef}
+            columns={memorisedColumns}
+            onRowMouseclick={(row) => {
+              setEditSheetOpen(true);
+              setSelectedUser(row.original);
+            }}
+            data={flatData}
+            isLoading={isLoading}
+            // tableOverlay={<HoverOverview />}
+            onScroll={(e) => fetchMoreOnBottomReached(e.target as HTMLDivElement)}
+          />
+        </div>
+        {selectedUser && editSheetOpen ? (
+          <AvailabilityEditSheet
+            open={editSheetOpen}
+            onOpenChange={(e) => {
+              setEditSheetOpen(e);
+              setSelectedUser(null); // We need to clear the user here or else the sheet will not re-render when opening a new user
+            }}
+            selectedUser={selectedUser}
+          />
+        ) : null}
+      </>
     </TBContext.Provider>
   );
 }
diff --git a/packages/lib/hasEditPermissionForUser.ts b/packages/lib/hasEditPermissionForUser.ts
new file mode 100644
index 0000000000..eaeb65f92e
--- /dev/null
+++ b/packages/lib/hasEditPermissionForUser.ts
@@ -0,0 +1,64 @@
+import { MembershipRole } from "@calcom/prisma/enums";
+import type { TrpcSessionUser } from "@calcom/trpc/server/trpc";
+
+const ROLES_WITH_EDIT_PERMISSION = [MembershipRole.ADMIN, MembershipRole.OWNER] as MembershipRole[];
+
+type InputOptions = {
+  ctx: {
+    user: NonNullable<TrpcSessionUser>;
+  };
+  input: {
+    memberId: number;
+  };
+};
+
+export async function hasEditPermissionForUserID({ ctx, input }: InputOptions) {
+  const { user } = ctx;
+
+  const authedUsersTeams = await prisma.membership.findMany({
+    where: {
+      userId: user.id,
+      accepted: true,
+      role: {
+        in: [MembershipRole.ADMIN, MembershipRole.OWNER],
+      },
+    },
+  });
+
+  const targetUsersTeams = await prisma.membership.findMany({
+    where: {
+      userId: input.memberId,
+      accepted: true,
+    },
+  });
+
+  const teamIdOverlaps = authedUsersTeams.some((authedTeam) => {
+    return targetUsersTeams.some((targetTeam) => targetTeam.teamId === authedTeam.teamId);
+  });
+
+  return teamIdOverlaps;
+}
+
+export async function hasReadPermissionsForUserId({ ctx, input }: InputOptions) {
+  const { user } = ctx;
+
+  const authedUsersTeams = await prisma.membership.findMany({
+    where: {
+      userId: user.id,
+      accepted: true,
+    },
+  });
+
+  const targetUsersTeams = await prisma.membership.findMany({
+    where: {
+      userId: input.memberId,
+      accepted: true,
+    },
+  });
+
+  const teamIdOverlaps = authedUsersTeams.some((authedTeam) => {
+    return targetUsersTeams.some((targetTeam) => targetTeam.teamId === authedTeam.teamId);
+  });
+
+  return teamIdOverlaps;
+}
diff --git a/packages/trpc/server/routers/viewer/availability/schedule/_router.tsx b/packages/trpc/server/routers/viewer/availability/schedule/_router.tsx
index fe9e062cad..b886f81a64 100644
--- a/packages/trpc/server/routers/viewer/availability/schedule/_router.tsx
+++ b/packages/trpc/server/routers/viewer/availability/schedule/_router.tsx
@@ -4,6 +4,7 @@ import { ZCreateInputSchema } from "./create.schema";
 import { ZDeleteInputSchema } from "./delete.schema";
 import { ZScheduleDuplicateSchema } from "./duplicate.schema";
 import { ZGetInputSchema } from "./get.schema";
+import { ZGetByUserIdInputSchema } from "./getScheduleByUserId.schema";
 import { ZUpdateInputSchema } from "./update.schema";
 
 type ScheduleRouterHandlerCache = {
@@ -12,6 +13,7 @@ type ScheduleRouterHandlerCache = {
   delete?: typeof import("./delete.handler").deleteHandler;
   update?: typeof import("./update.handler").updateHandler;
   duplicate?: typeof import("./duplicate.handler").duplicateHandler;
+  getScheduleByUserId?: typeof import("./getScheduleByUserId.handler").getScheduleByUserIdHandler;
 };
 
 const UNSTABLE_HANDLER_CACHE: ScheduleRouterHandlerCache = {};
@@ -98,4 +100,22 @@ export const scheduleRouter = router({
       input,
     });
   }),
+
+  getScheduleByUserId: authedProcedure.input(ZGetByUserIdInputSchema).query(async ({ input, ctx }) => {
+    if (!UNSTABLE_HANDLER_CACHE.getScheduleByUserId) {
+      UNSTABLE_HANDLER_CACHE.getScheduleByUserId = await import("./getScheduleByUserId.handler").then(
+        (mod) => mod.getScheduleByUserIdHandler
+      );
+    }
+
+    // Unreachable code but required for type safety
+    if (!UNSTABLE_HANDLER_CACHE.getScheduleByUserId) {
+      throw new Error("Failed to load handler");
+    }
+
+    return UNSTABLE_HANDLER_CACHE.getScheduleByUserId({
+      ctx,
+      input,
+    });
+  }),
 });
diff --git a/packages/trpc/server/routers/viewer/availability/schedule/get.handler.ts b/packages/trpc/server/routers/viewer/availability/schedule/get.handler.ts
index f5c96e9080..afabbf4542 100644
--- a/packages/trpc/server/routers/viewer/availability/schedule/get.handler.ts
+++ b/packages/trpc/server/routers/viewer/availability/schedule/get.handler.ts
@@ -1,6 +1,7 @@
 import dayjs from "@calcom/dayjs";
 import { getWorkingHours } from "@calcom/lib/availability";
 import { yyyymmdd } from "@calcom/lib/date-fns";
+import { hasReadPermissionsForUserId } from "@calcom/lib/hasEditPermissionForUser";
 import { prisma } from "@calcom/prisma";
 import type { TimeRange } from "@calcom/types/schedule";
 
@@ -30,25 +31,22 @@ export const getHandler = async ({ ctx, input }: GetOptions) => {
       name: true,
       availability: true,
       timeZone: true,
-      eventType: {
-        select: {
-          id: true,
-          eventName: true,
-          team: {
-            select: { members: { select: { userId: true } } },
-          },
-        },
-      },
     },
   });
 
-  const isCurrentUserPartOfTeam = schedule?.eventType.some((eventType) =>
-    eventType.team?.members.some((teamMember) => teamMember.userId === user.id)
-  );
+  if (!schedule) {
+    throw new TRPCError({
+      code: "UNAUTHORIZED",
+    });
+  }
+  const isCurrentUserPartOfTeam = hasReadPermissionsForUserId({
+    ctx,
+    input: { memberId: schedule?.userId },
+  });
 
   const isCurrentUserOwner = schedule?.userId === user.id;
 
-  if (!schedule || (!isCurrentUserOwner && !isCurrentUserPartOfTeam)) {
+  if (!isCurrentUserPartOfTeam && !isCurrentUserOwner) {
     throw new TRPCError({
       code: "UNAUTHORIZED",
     });
diff --git a/packages/trpc/server/routers/viewer/availability/schedule/getScheduleByUserId.handler.ts b/packages/trpc/server/routers/viewer/availability/schedule/getScheduleByUserId.handler.ts
new file mode 100644
index 0000000000..1313251652
--- /dev/null
+++ b/packages/trpc/server/routers/viewer/availability/schedule/getScheduleByUserId.handler.ts
@@ -0,0 +1,52 @@
+import type { TrpcSessionUser } from "../../../../trpc";
+import { getHandler } from "./get.handler";
+import type { TGetByUserIdInputSchema } from "./getScheduleByUserId.schema";
+
+type GetOptions = {
+  ctx: {
+    user: NonNullable<TrpcSessionUser>;
+  };
+  input: TGetByUserIdInputSchema;
+};
+
+const EMPTY_SCHEDULE = [[], [], [], [], [], [], []];
+
+export const getScheduleByUserIdHandler = async ({ ctx, input }: GetOptions) => {
+  const foundUserDefaultId = await prisma.user.findUnique({
+    where: {
+      id: input.userId,
+    },
+    select: {
+      defaultScheduleId: true,
+    },
+  });
+
+  try {
+    // This looks kinda weird that we throw straight in the catch - its so that we can return a default schedule if the user has not completed onboarding @shiraz will loveme for this
+    if (!foundUserDefaultId?.defaultScheduleId) {
+      throw new Error("NOT_FOUND");
+    }
+    const schedule = await getHandler({
+      ctx,
+      input: {
+        scheduleId: foundUserDefaultId?.defaultScheduleId,
+      },
+    });
+
+    return {
+      ...schedule,
+      hasDefaultSchedule: true,
+    };
+  } catch (e) {
+    return {
+      id: -1,
+      name: "Working Hourse",
+      availability: EMPTY_SCHEDULE,
+      dateOverrides: [],
+      timeZone: ctx.user.timeZone || "Europe/London",
+      workingHours: [],
+      isDefault: true,
+      hasDefaultSchedule: false, // This is the path that we take if the user has not completed onboarding
+    };
+  }
+};
diff --git a/packages/trpc/server/routers/viewer/availability/schedule/getScheduleByUserId.schema.ts b/packages/trpc/server/routers/viewer/availability/schedule/getScheduleByUserId.schema.ts
new file mode 100644
index 0000000000..c4f0f3791c
--- /dev/null
+++ b/packages/trpc/server/routers/viewer/availability/schedule/getScheduleByUserId.schema.ts
@@ -0,0 +1,7 @@
+import { z } from "zod";
+
+export const ZGetByUserIdInputSchema = z.object({
+  userId: z.optional(z.number()),
+});
+
+export type TGetByUserIdInputSchema = z.infer<typeof ZGetByUserIdInputSchema>;
diff --git a/packages/trpc/server/routers/viewer/availability/schedule/update.handler.ts b/packages/trpc/server/routers/viewer/availability/schedule/update.handler.ts
index e5d7cf4d3f..22935c35bb 100644
--- a/packages/trpc/server/routers/viewer/availability/schedule/update.handler.ts
+++ b/packages/trpc/server/routers/viewer/availability/schedule/update.handler.ts
@@ -1,4 +1,5 @@
 import { getAvailabilityFromSchedule } from "@calcom/lib/availability";
+import { hasEditPermissionForUserID } from "@calcom/lib/hasEditPermissionForUser";
 import { prisma } from "@calcom/prisma";
 
 import { TRPCError } from "@trpc/server";
@@ -38,14 +39,24 @@ export const updateHandler = async ({ input, ctx }: UpdateOptions) => {
     },
   });
 
-  if (userSchedule?.userId !== user.id) throw new TRPCError({ code: "UNAUTHORIZED" });
-
-  if (!userSchedule || userSchedule.userId !== user.id) {
+  if (!userSchedule) {
     throw new TRPCError({
       code: "UNAUTHORIZED",
     });
   }
 
+  if (userSchedule?.userId !== user.id) {
+    const hasEditPermission = await hasEditPermissionForUserID({
+      ctx,
+      input: { memberId: userSchedule.userId },
+    });
+    if (!hasEditPermission) {
+      throw new TRPCError({
+        code: "UNAUTHORIZED",
+      });
+    }
+  }
+
   let updatedUser;
   if (input.isDefault) {
     const setupDefault = await setupDefaultSchedule(user.id, input.scheduleId, prisma);
diff --git a/packages/trpc/server/routers/viewer/availability/team/listTeamAvailability.handler.ts b/packages/trpc/server/routers/viewer/availability/team/listTeamAvailability.handler.ts
index e3df16fc9f..f495e8d047 100644
--- a/packages/trpc/server/routers/viewer/availability/team/listTeamAvailability.handler.ts
+++ b/packages/trpc/server/routers/viewer/availability/team/listTeamAvailability.handler.ts
@@ -65,6 +65,7 @@ async function buildMember(member: Member, dateFrom: Dayjs, dateTo: Dayjs) {
       email: member.user.email,
       timeZone: member.user.timeZone,
       role: member.role,
+      defaultScheduleId: -1,
       dateRanges: [] as DateRange[],
     };
   }
@@ -88,6 +89,7 @@ async function buildMember(member: Member, dateFrom: Dayjs, dateTo: Dayjs) {
     email: member.user.email,
     timeZone,
     role: member.role,
+    defaultScheduleId: member.user.defaultScheduleId ?? -1,
     dateRanges,
   };
 }
diff --git a/packages/trpc/server/routers/viewer/teams/_router.tsx b/packages/trpc/server/routers/viewer/teams/_router.tsx
index 5eb09deb6c..3ddc6b3003 100644
--- a/packages/trpc/server/routers/viewer/teams/_router.tsx
+++ b/packages/trpc/server/routers/viewer/teams/_router.tsx
@@ -9,6 +9,7 @@ import { ZDeleteInviteInputSchema } from "./deleteInvite.schema";
 import { ZGetInputSchema } from "./get.schema";
 import { ZGetMemberAvailabilityInputSchema } from "./getMemberAvailability.schema";
 import { ZGetMembershipbyUserInputSchema } from "./getMembershipbyUser.schema";
+import { ZHasEditPermissionForUserSchema } from "./hasEditPermissionForUser.schema";
 import { ZInviteMemberInputSchema } from "./inviteMember/inviteMember.schema";
 import { ZInviteMemberByTokenSchemaInputSchema } from "./inviteMemberByToken.schema";
 import { ZListMembersInputSchema } from "./listMembers.schema";
@@ -41,6 +42,7 @@ type TeamsRouterHandlerCache = {
   setInviteExpiration?: typeof import("./setInviteExpiration.handler").setInviteExpirationHandler;
   deleteInvite?: typeof import("./deleteInvite.handler").deleteInviteHandler;
   inviteMemberByToken?: typeof import("./inviteMemberByToken.handler").inviteMemberByTokenHandler;
+  hasEditPermissionForUser?: typeof import("./hasEditPermissionForUser.handler").hasEditPermissionForUser;
 };
 
 const UNSTABLE_HANDLER_CACHE: TeamsRouterHandlerCache = {};
@@ -433,4 +435,23 @@ export const viewerTeamsRouter = router({
         input,
       });
     }),
+  hasEditPermissionForUser: authedProcedure
+    .input(ZHasEditPermissionForUserSchema)
+    .query(async ({ ctx, input }) => {
+      if (!UNSTABLE_HANDLER_CACHE.hasEditPermissionForUser) {
+        UNSTABLE_HANDLER_CACHE.hasEditPermissionForUser = await import(
+          "./hasEditPermissionForUser.handler"
+        ).then((mod) => mod.hasEditPermissionForUser);
+      }
+
+      // Unreachable code but required for type safety
+      if (!UNSTABLE_HANDLER_CACHE.hasEditPermissionForUser) {
+        throw new Error("Failed to load handler");
+      }
+
+      return UNSTABLE_HANDLER_CACHE.hasEditPermissionForUser({
+        ctx,
+        input,
+      });
+    }),
 });
diff --git a/packages/trpc/server/routers/viewer/teams/hasEditPermissionForUser.handler.ts b/packages/trpc/server/routers/viewer/teams/hasEditPermissionForUser.handler.ts
new file mode 100644
index 0000000000..882e922e30
--- /dev/null
+++ b/packages/trpc/server/routers/viewer/teams/hasEditPermissionForUser.handler.ts
@@ -0,0 +1,19 @@
+import { hasEditPermissionForUserID as $hasEditPermissionForUser } from "@calcom/lib/hasEditPermissionForUser";
+import type { TrpcSessionUser } from "@calcom/trpc/server/trpc";
+
+import type { THasEditPermissionForUserSchema } from "./hasEditPermissionForUser.schema";
+
+type HasEditPermissionForUserOptions = {
+  ctx: {
+    user: NonNullable<TrpcSessionUser>;
+  };
+  input: THasEditPermissionForUserSchema;
+};
+
+export const hasEditPermissionForUser = async ({ ctx, input }: HasEditPermissionForUserOptions) => {
+  // Calculate if the logged in User has edit permission for the given User.
+  return $hasEditPermissionForUser({
+    ctx,
+    input,
+  });
+};
diff --git a/packages/trpc/server/routers/viewer/teams/hasEditPermissionForUser.schema.ts b/packages/trpc/server/routers/viewer/teams/hasEditPermissionForUser.schema.ts
new file mode 100644
index 0000000000..1239d81151
--- /dev/null
+++ b/packages/trpc/server/routers/viewer/teams/hasEditPermissionForUser.schema.ts
@@ -0,0 +1,7 @@
+import { z } from "zod";
+
+export const ZHasEditPermissionForUserSchema = z.object({
+  memberId: z.number(),
+});
+
+export type THasEditPermissionForUserSchema = z.infer<typeof ZHasEditPermissionForUserSchema>;
diff --git a/packages/ui/components/data-table/index.tsx b/packages/ui/components/data-table/index.tsx
index 0099beed16..3cf83a7906 100644
--- a/packages/ui/components/data-table/index.tsx
+++ b/packages/ui/components/data-table/index.tsx
@@ -17,6 +17,8 @@ import {
 import { useState } from "react";
 import { useVirtual } from "react-virtual";
 
+import classNames from "@calcom/lib/classNames";
+
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../table/TableNew";
 import type { ActionItem } from "./DataTableSelectionBar";
 import { DataTableSelectionBar } from "./DataTableSelectionBar";
@@ -32,6 +34,7 @@ export interface DataTableProps<TData, TValue> {
   selectionOptions?: ActionItem<TData>[];
   tableCTA?: React.ReactNode;
   isLoading?: boolean;
+  onRowMouseclick?: (row: Row<TData>) => void;
   onScroll?: (e: React.UIEvent<HTMLDivElement, UIEvent>) => void;
   CTA?: React.ReactNode;
   tableOverlay?: React.ReactNode;
@@ -47,6 +50,8 @@ export function DataTable<TData, TValue>({
   tableContainerRef,
   isLoading,
   tableOverlay,
+  /** This should only really be used if you dont have actions in a row. */
+  onRowMouseclick,
   onScroll,
 }: DataTableProps<TData, TValue>) {
   const [rowSelection, setRowSelection] = useState({});
@@ -137,7 +142,11 @@ export function DataTable<TData, TValue>({
                 const row = rows[virtualRow.index] as Row<TData>;
 
                 return (
-                  <TableRow key={row.id} data-state={row.getIsSelected() && "selected"}>
+                  <TableRow
+                    key={row.id}
+                    data-state={row.getIsSelected() && "selected"}
+                    onClick={() => onRowMouseclick && onRowMouseclick(row)}
+                    className={classNames(onRowMouseclick && "hover:cursor-pointer")}>
                     {row.getVisibleCells().map((cell) => {
                       return (
                         <TableCell key={cell.id}>
diff --git a/packages/ui/components/sheet/sheet.tsx b/packages/ui/components/sheet/sheet.tsx
index 5c362fed82..e0e6827780 100644
--- a/packages/ui/components/sheet/sheet.tsx
+++ b/packages/ui/components/sheet/sheet.tsx
@@ -49,7 +49,7 @@ const SheetOverlay = React.forwardRef<
 SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
 
 const sheetVariants = cva(
-  "fixed z-50 scale-100 gap-4 bg-default m-4 rounded-xl p-6 opacity-100 shadow-lg border border-default overflow-y-scroll ",
+  "fixed z-50 scale-100 gap-4 bg-default m-4 rounded-xl p-6 opacity-100 shadow-lg border border-default flex flex-col ",
   {
     variants: {
       position: {
@@ -138,17 +138,24 @@ const sheetVariants = cva(
 
 export interface DialogContentProps
   extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
-    VariantProps<typeof sheetVariants> {}
+    VariantProps<typeof sheetVariants> {
+  bottomActions?: React.ReactNode;
+}
 
 const SheetContent = React.forwardRef<React.ElementRef<typeof SheetPrimitive.Content>, DialogContentProps>(
-  ({ position, size, className, children, ...props }, ref) => (
+  ({ position, size, className, children, bottomActions, ...props }, ref) => (
     <SheetPortal position={position}>
       <SheetOverlay />
       <SheetPrimitive.Content
         ref={ref}
-        className={classNames(sheetVariants({ position, size }), className)}
-        {...props}>
-        {children}
+        {...props}
+        className={classNames(sheetVariants({ position, size }), className)}>
+        <div className="h-full overflow-y-scroll">{children}</div>
+        {bottomActions && (
+          <div className="mt-auto flex justify-end">
+            <div className="flex gap-2">{bottomActions}</div>
+          </div>
+        )}
         <SheetPrimitive.Close className="focus:ring-emphasis data-[state=open]:bg-deafult absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none">
           <X className="h-4 w-4" />
           <span className="sr-only">Close</span>
diff --git a/packages/ui/components/table/TableNew.tsx b/packages/ui/components/table/TableNew.tsx
index 7b29c46c5c..0825ff375b 100644
--- a/packages/ui/components/table/TableNew.tsx
+++ b/packages/ui/components/table/TableNew.tsx
@@ -36,7 +36,10 @@ const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTML
   ({ className, ...props }, ref) => (
     <tr
       ref={ref}
-      className={classNames("hover:muted data-[state=selected]:bg-muted border-subtle border-b", className)}
+      className={classNames(
+        "hover:bg-muted data-[state=selected]:bg-subtle border-subtle border-b",
+        className
+      )}
       {...props}
     />
   )
diff --git a/yarn.lock b/yarn.lock
index f5b5591f33..a0739e6802 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4398,7 +4398,6 @@ __metadata:
     next: ^13.4.6
     next-auth: ^4.22.1
     next-axiom: ^0.17.0
-    next-collect: ^0.2.1
     next-i18next: ^13.2.2
     next-seo: ^6.0.0
     playwright: ^1.31.2
@@ -27767,14 +27766,14 @@ __metadata:
   linkType: hard
 
 "mlly@npm:^1.4.0":
-  version: 1.4.1
-  resolution: "mlly@npm:1.4.1"
+  version: 1.4.2
+  resolution: "mlly@npm:1.4.2"
   dependencies:
     acorn: ^8.10.0
     pathe: ^1.1.1
     pkg-types: ^1.0.3
     ufo: ^1.3.0
-  checksum: b2b59ab3d70196127be4e54609d2a442bd252345727138940fb245672a238b2fbdd431e8c75ec5c741ff90410ce488c5fd6446d5d3e6476d21dbf4c3fa35d4a0
+  checksum: ad0813eca133e59ac03b356b87deea57da96083dce7dda58a8eeb2dce92b7cc2315bedd9268f3ff8e98effe1867ddb1307486d4c5cd8be162daa8e0fa0a98ed4
   languageName: node
   linkType: hard