Repository: makeplane/plane
Pull request #7033: [WEB-3523] feat: start of week preference
Author: login: anmolsinghbhatia
Labels: name: ✨feature
name: 🌐frontend
name: ready to merge
Created: 2025-05-08T13:37:34Z | Merged: 2025-05-12T13:43:40Z

### Description
This PR implements support for the start of week user preference. Users can now choose their preferred start day of the week from their profile settings. This setting will be applied consistently across the following areas:
- Calendar layout
- Timeline layout
- Date picker

### Type of Change
- [x] Feature
- [x] Code refactoring

### Media
| Preview |
|--------|
| ![preview1](https://github.com/user-attachments/assets/a6d13ea4-1fdb-445f-a827-fd2138cea3d3) |

### References
[[WEB-3523]](https://app.plane.so/plane/browse/WEB-3523/)

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- **New Features**
  - Added user preference for selecting the start day of the week.
  - Introduced a setting in the profile appearance page to customize the first day of the week.
  - Calendar views, date dropdowns, and Gantt charts now display weeks based on the user's selected start day.

- **Improvements**
  - Weekday headers and calendars dynamically reorder days to match user preferences.
  - Weeks in calendar views are consistently sorted and aligned with the chosen start of the week.
  - Added notifications for successful or failed updates when changing the start day of the week preference.

- **Bug Fixes**
  - Ensured weekend filtering and week alignment respect the selected start day.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->


Diff:
diff --git a/packages/constants/src/profile.ts b/packages/constants/src/profile.ts
index f7765a0cfc0..032e4526a84 100644
--- a/packages/constants/src/profile.ts
+++ b/packages/constants/src/profile.ts
@@ -71,3 +71,53 @@ export const PROFILE_ADMINS_TAB = [
     selected: "/activity/",
   },
 ];
+
+/**
+ * @description The start of the week for the user
+ * @enum {number}
+ */
+export enum EStartOfTheWeek {
+  SUNDAY = 0,
+  MONDAY = 1,
+  TUESDAY = 2,
+  WEDNESDAY = 3,
+  THURSDAY = 4,
+  FRIDAY = 5,
+  SATURDAY = 6,
+}
+
+/**
+ * @description The options for the start of the week
+ * @type {Array<{value: EStartOfTheWeek, label: string}>}
+ * @constant
+ */
+export const START_OF_THE_WEEK_OPTIONS = [
+  {
+    value: EStartOfTheWeek.SUNDAY,
+    label: "Sunday",
+  },
+  {
+    value: EStartOfTheWeek.MONDAY,
+    label: "Monday",
+  },
+  {
+    value: EStartOfTheWeek.TUESDAY,
+    label: "Tuesday",
+  },
+  {
+    value: EStartOfTheWeek.WEDNESDAY,
+    label: "Wednesday",
+  },
+  {
+    value: EStartOfTheWeek.THURSDAY,
+    label: "Thursday",
+  },
+  {
+    value: EStartOfTheWeek.FRIDAY,
+    label: "Friday",
+  },
+  {
+    value: EStartOfTheWeek.SATURDAY,
+    label: "Saturday",
+  },
+];
diff --git a/packages/types/src/users.d.ts b/packages/types/src/users.d.ts
index e5140fdef10..9f6ac490559 100644
--- a/packages/types/src/users.d.ts
+++ b/packages/types/src/users.d.ts
@@ -1,3 +1,4 @@
+import { EStartOfTheWeek } from "@plane/constants";
 import { IIssueActivity, TIssuePriorities, TStateGroups } from ".";
 import { TUserPermissions } from "./enums";
 
@@ -64,6 +65,7 @@ export type TUserProfile = {
   language: string;
   created_at: Date | string;
   updated_at: Date | string;
+  start_of_the_week: EStartOfTheWeek;
 };
 
 export interface IInstanceAdminStatus {
@@ -155,14 +157,7 @@ export interface IUserProfileProjectSegregation {
     id: string;
     pending_issues: number;
   }[];
-  user_data: Pick<
-    IUser,
-    | "avatar_url"
-    | "cover_image_url"
-    | "display_name"
-    | "first_name"
-    | "last_name"
-  > & {
+  user_data: Pick<IUser, "avatar_url" | "cover_image_url" | "display_name" | "first_name" | "last_name"> & {
     date_joined: Date;
     user_timezone: string;
   };
diff --git a/packages/ui/src/calendar.tsx b/packages/ui/src/calendar.tsx
index 9fdbab17662..80b160cc1b4 100644
--- a/packages/ui/src/calendar.tsx
+++ b/packages/ui/src/calendar.tsx
@@ -17,6 +17,7 @@ export const Calendar = ({ className, classNames, showOutsideDays = true, ...pro
     <DayPicker
       showOutsideDays={showOutsideDays}
       className={cn("p-3", className)}
+      weekStartsOn={props.weekStartsOn}
       // classNames={{
       //   months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
       //   month: "space-y-4",
diff --git a/space/core/store/profile.store.ts b/space/core/store/profile.store.ts
index 5523e8daddb..c032efba998 100644
--- a/space/core/store/profile.store.ts
+++ b/space/core/store/profile.store.ts
@@ -1,6 +1,7 @@
 import set from "lodash/set";
 import { action, makeObservable, observable, runInAction } from "mobx";
 // plane imports
+import { EStartOfTheWeek } from "@plane/constants";
 import { UserService } from "@plane/services";
 import { TUserProfile } from "@plane/types";
 // store
@@ -54,6 +55,7 @@ export class ProfileStore implements IProfileStore {
     created_at: "",
     updated_at: "",
     language: "",
+    start_of_the_week: EStartOfTheWeek.SUNDAY,
   };
 
   // services
diff --git a/web/app/profile/appearance/page.tsx b/web/app/profile/appearance/page.tsx
index c89bcdf3c33..db367e49a7c 100644
--- a/web/app/profile/appearance/page.tsx
+++ b/web/app/profile/appearance/page.tsx
@@ -10,13 +10,13 @@ import { IUserTheme } from "@plane/types";
 import { setPromiseToast } from "@plane/ui";
 // components
 import { LogoSpinner } from "@/components/common";
-import { CustomThemeSelector, ThemeSwitch, PageHead } from "@/components/core";
-import { ProfileSettingContentHeader, ProfileSettingContentWrapper } from "@/components/profile";
-// constants
+import { ThemeSwitch, PageHead, CustomThemeSelector } from "@/components/core";
+import { ProfileSettingContentHeader, ProfileSettingContentWrapper, StartOfWeekPreference } from "@/components/profile";
 // helpers
 import { applyTheme, unsetCustomCssVariables } from "@/helpers/theme.helper";
 // hooks
 import { useUserProfile } from "@/hooks/store";
+
 const ProfileAppearancePage = observer(() => {
   const { t } = useTranslation();
   const { setTheme } = useTheme();
@@ -75,6 +75,7 @@ const ProfileAppearancePage = observer(() => {
             </div>
           </div>
           {userProfile?.theme?.theme === "custom" && <CustomThemeSelector applyThemeChange={applyThemeChange} />}
+          <StartOfWeekPreference />
         </ProfileSettingContentWrapper>
       ) : (
         <div className="grid h-full w-full place-items-center px-4 sm:px-0">
diff --git a/web/core/components/dropdowns/date.tsx b/web/core/components/dropdowns/date.tsx
index 83a5e7b368a..684d6f3ef00 100644
--- a/web/core/components/dropdowns/date.tsx
+++ b/web/core/components/dropdowns/date.tsx
@@ -1,15 +1,18 @@
 import React, { useRef, useState } from "react";
+import { observer } from "mobx-react";
 import { Matcher } from "react-day-picker";
 import { createPortal } from "react-dom";
 import { usePopper } from "react-popper";
 import { CalendarDays, X } from "lucide-react";
 import { Combobox } from "@headlessui/react";
 // ui
+import { EStartOfTheWeek } from "@plane/constants";
 import { ComboDropDown, Calendar } from "@plane/ui";
 // helpers
 import { cn } from "@/helpers/common.helper";
 import { renderFormattedDate, getDate } from "@/helpers/date-time.helper";
 // hooks
+import { useUserProfile } from "@/hooks/store";
 import { useDropdown } from "@/hooks/use-dropdown";
 // components
 import { DropdownButton } from "./buttons";
@@ -33,7 +36,7 @@ type Props = TDropdownProps & {
   renderByDefault?: boolean;
 };
 
-export const DateDropdown: React.FC<Props> = (props) => {
+export const DateDropdown: React.FC<Props> = observer((props) => {
   const {
     buttonClassName = "",
     buttonContainerClassName,
@@ -62,6 +65,9 @@ export const DateDropdown: React.FC<Props> = (props) => {
   const [isOpen, setIsOpen] = useState(false);
   // refs
   const dropdownRef = useRef<HTMLDivElement | null>(null);
+  // hooks
+  const { data } = useUserProfile();
+  const startOfWeek = data?.start_of_the_week;
   // popper-js refs
   const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
   const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
@@ -186,6 +192,7 @@ export const DateDropdown: React.FC<Props> = (props) => {
                 disabled={disabledDays}
                 mode="single"
                 fixedWeeks
+                weekStartsOn={startOfWeek}
               />
             </div>
           </Combobox.Options>,
@@ -193,4 +200,4 @@ export const DateDropdown: React.FC<Props> = (props) => {
         )}
     </ComboDropDown>
   );
-};
+});
diff --git a/web/core/components/gantt-chart/chart/root.tsx b/web/core/components/gantt-chart/chart/root.tsx
index 03e63e7a5bf..16604d88170 100644
--- a/web/core/components/gantt-chart/chart/root.tsx
+++ b/web/core/components/gantt-chart/chart/root.tsx
@@ -1,10 +1,13 @@
 import { FC, useEffect, useState } from "react";
 import { observer } from "mobx-react";
+// plane imports
+import { EStartOfTheWeek } from "@plane/constants";
 // components
 import { GanttChartHeader, GanttChartMainContent } from "@/components/gantt-chart";
 // helpers
 import { cn } from "@/helpers/common.helper";
 // hooks
+import { useUserProfile } from "@/hooks/store";
 import { useTimeLineChartStore } from "@/hooks/use-timeline-chart";
 //
 import { SIDEBAR_WIDTH } from "../constants";
@@ -87,6 +90,8 @@ export const ChartViewRoot: FC<ChartViewRootProps> = observer((props) => {
     updateRenderView,
     updateAllBlocksOnChartChangeWhileDragging,
   } = useTimeLineChartStore();
+  const { data } = useUserProfile();
+  const startOfWeek = data?.start_of_the_week;
 
   const updateCurrentViewRenderPayload = (side: null | "left" | "right", view: TGanttViews, targetDate?: Date) => {
     const selectedCurrentView: TGanttViews = view;
@@ -98,7 +103,7 @@ export const ChartViewRoot: FC<ChartViewRootProps> = observer((props) => {
     if (selectedCurrentViewData === undefined) return;
 
     const currentViewHelpers = timelineViewHelpers[selectedCurrentView];
-    const currentRender = currentViewHelpers.generateChart(selectedCurrentViewData, side, targetDate);
+    const currentRender = currentViewHelpers.generateChart(selectedCurrentViewData, side, targetDate, startOfWeek);
     const mergeRenderPayloads = currentViewHelpers.mergeRenderPayloads as (
       a: IWeekBlock[] | IMonthView | IMonthBlock[],
       b: IWeekBlock[] | IMonthView | IMonthBlock[]
diff --git a/web/core/components/gantt-chart/data/index.ts b/web/core/components/gantt-chart/data/index.ts
index 6db8dda659f..2e72810d87b 100644
--- a/web/core/components/gantt-chart/data/index.ts
+++ b/web/core/components/gantt-chart/data/index.ts
@@ -1,7 +1,13 @@
 // types
+import { EStartOfTheWeek } from "@plane/constants";
 import { WeekMonthDataType, ChartDataType, TGanttViews } from "../types";
 
 // constants
+export const generateWeeks = (startOfWeek: EStartOfTheWeek = EStartOfTheWeek.SUNDAY): WeekMonthDataType[] => [
+  ...weeks.slice(startOfWeek),
+  ...weeks.slice(0, startOfWeek),
+];
+
 export const weeks: WeekMonthDataType[] = [
   { key: 0, shortTitle: "sun", title: "sunday", abbreviation: "Su" },
   { key: 1, shortTitle: "mon", title: "monday", abbreviation: "M" },
diff --git a/web/core/components/gantt-chart/views/week-view.ts b/web/core/components/gantt-chart/views/week-view.ts
index 65915274c53..ea3d75f91b5 100644
--- a/web/core/components/gantt-chart/views/week-view.ts
+++ b/web/core/components/gantt-chart/views/week-view.ts
@@ -1,5 +1,6 @@
 //
-import { weeks, months } from "../data";
+import { EStartOfTheWeek } from "@plane/constants";
+import { months, generateWeeks } from "../data";
 import { ChartDataType } from "../types";
 import { getNumberOfDaysBetweenTwoDates, getWeekNumberByDate } from "./helpers";
 export interface IDayBlock {
@@ -38,7 +39,12 @@ export interface IWeekBlock {
  * @param side
  * @returns
  */
-const generateWeekChart = (weekPayload: ChartDataType, side: null | "left" | "right", targetDate?: Date) => {
+const generateWeekChart = (
+  weekPayload: ChartDataType,
+  side: null | "left" | "right",
+  targetDate?: Date,
+  startOfWeek: EStartOfTheWeek = EStartOfTheWeek.SUNDAY
+) => {
   let renderState = weekPayload;
 
   const range: number = renderState.data.approxFilterRange || 6;
@@ -56,7 +62,7 @@ const generateWeekChart = (weekPayload: ChartDataType, side: null | "left" | "ri
     minusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() - range, currentDate.getDate());
     plusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + range, currentDate.getDate());
 
-    if (minusDate && plusDate) filteredDates = getWeeksBetweenTwoDates(minusDate, plusDate);
+    if (minusDate && plusDate) filteredDates = getWeeksBetweenTwoDates(minusDate, plusDate, true, startOfWeek);
 
     startDate = filteredDates[0].startDate;
     endDate = filteredDates[filteredDates.length - 1].endDate;
@@ -77,7 +83,7 @@ const generateWeekChart = (weekPayload: ChartDataType, side: null | "left" | "ri
     minusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() - range, 1);
     plusDate = new Date(chartStartDate.getFullYear(), chartStartDate.getMonth(), chartStartDate.getDate() - 1);
 
-    if (minusDate && plusDate) filteredDates = getWeeksBetweenTwoDates(minusDate, plusDate);
+    if (minusDate && plusDate) filteredDates = getWeeksBetweenTwoDates(minusDate, plusDate, true, startOfWeek);
 
     startDate = filteredDates[0].startDate;
     endDate = new Date(chartStartDate.getFullYear(), chartStartDate.getMonth(), chartStartDate.getDate() - 1);
@@ -94,7 +100,7 @@ const generateWeekChart = (weekPayload: ChartDataType, side: null | "left" | "ri
     minusDate = new Date(chartEndDate.getFullYear(), chartEndDate.getMonth(), chartEndDate.getDate() + 1);
     plusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + range, 1);
 
-    if (minusDate && plusDate) filteredDates = getWeeksBetweenTwoDates(minusDate, plusDate);
+    if (minusDate && plusDate) filteredDates = getWeeksBetweenTwoDates(minusDate, plusDate, true, startOfWeek);
 
     startDate = new Date(chartEndDate.getFullYear(), chartEndDate.getMonth(), chartEndDate.getDate() + 1);
     endDate = filteredDates[filteredDates.length - 1].endDate;
@@ -120,14 +126,18 @@ const generateWeekChart = (weekPayload: ChartDataType, side: null | "left" | "ri
 export const getWeeksBetweenTwoDates = (
   startDate: Date,
   endDate: Date,
-  shouldPopulateDaysForWeek: boolean = true
+  shouldPopulateDaysForWeek: boolean = true,
+  startOfWeek: EStartOfTheWeek = EStartOfTheWeek.SUNDAY
 ): IWeekBlock[] => {
   const weeks: IWeekBlock[] = [];
 
   const currentDate = new Date(startDate.getTime());
   const today = new Date();
 
-  currentDate.setDate(currentDate.getDate() - currentDate.getDay());
+  // Adjust the current date to the start of the week
+  const day = currentDate.getDay();
+  const diff = (day + 7 - startOfWeek) % 7; // Calculate days to subtract to get to startOfWeek
+  currentDate.setDate(currentDate.getDate() - diff);
 
   while (currentDate <= endDate) {
     const weekStartDate = new Date(currentDate.getTime());
@@ -141,7 +151,7 @@ export const getWeeksBetweenTwoDates = (
     const weekNumber = getWeekNumberByDate(currentDate);
 
     weeks.push({
-      children: shouldPopulateDaysForWeek ? populateDaysForWeek(weekStartDate) : undefined,
+      children: shouldPopulateDaysForWeek ? populateDaysForWeek(weekStartDate, startOfWeek) : undefined,
       weekNumber,
       weekData: {
         shortTitle: `w${weekNumber}`,
@@ -171,17 +181,18 @@ export const getWeeksBetweenTwoDates = (
  * @param startDate
  * @returns
  */
-const populateDaysForWeek = (startDate: Date): IDayBlock[] => {
+const populateDaysForWeek = (startDate: Date, startOfWeek: EStartOfTheWeek = EStartOfTheWeek.SUNDAY): IDayBlock[] => {
   const currentDate = new Date(startDate);
   const days: IDayBlock[] = [];
   const today = new Date();
+  const weekDays = generateWeeks(startOfWeek);
 
   for (let i = 0; i < 7; i++) {
     days.push({
       date: new Date(currentDate),
       day: currentDate.getDay(),
-      dayData: weeks[currentDate.getDay()],
-      title: `${weeks[currentDate.getDay()].abbreviation} ${currentDate.getDate()}`,
+      dayData: weekDays[i],
+      title: `${weekDays[i].abbreviation} ${currentDate.getDate()}`,
       today: today.setHours(0, 0, 0, 0) == currentDate.setHours(0, 0, 0, 0),
     });
     currentDate.setDate(currentDate.getDate() + 1);
diff --git a/web/core/components/issues/issue-layouts/calendar/week-days.tsx b/web/core/components/issues/issue-layouts/calendar/week-days.tsx
index 9aaa132294c..c5ba104ee58 100644
--- a/web/core/components/issues/issue-layouts/calendar/week-days.tsx
+++ b/web/core/components/issues/issue-layouts/calendar/week-days.tsx
@@ -1,9 +1,14 @@
 import { observer } from "mobx-react";
+import { EStartOfTheWeek } from "@plane/constants";
 import { TGroupedIssues, TIssue, TIssueMap, TPaginationData } from "@plane/types";
+import { cn } from "@plane/utils";
 // components
 import { CalendarDayTile } from "@/components/issues";
 // helpers
+import { getOrderedDays } from "@/helpers/calendar.helper";
 import { renderFormattedPayloadDate } from "@/helpers/date-time.helper";
+// hooks
+import { useUserProfile } from "@/hooks/store";
 // types
 import { IProjectEpicsFilter } from "@/plane-web/store/issue/epic";
 import { ICycleIssuesFilter } from "@/store/issue/cycle";
@@ -65,20 +70,33 @@ export const CalendarWeekDays: React.FC<Props> = observer((props) => {
     canEditProperties,
     isEpic = false,
   } = props;
+  // hooks
+  const { data } = useUserProfile();
+  const startOfWeek = data?.start_of_the_week;
 
   const calendarLayout = issuesFilterStore?.issueFilters?.displayFilters?.calendar?.layout ?? "month";
   const showWeekends = issuesFilterStore?.issueFilters?.displayFilters?.calendar?.show_weekends ?? false;
 
   if (!week) return null;
 
+  const shouldShowDay = (dayDate: Date) => {
+    if (showWeekends) return true;
+    const day = dayDate.getDay();
+    return !(day === 0 || day === 6);
+  };
+
+  const sortedWeekDays = getOrderedDays(Object.values(week), (item) => item.date.getDay(), startOfWeek);
+
   return (
     <div
-      className={`grid divide-custom-border-200 md:divide-x-[0.5px] ${showWeekends ? "grid-cols-7" : "grid-cols-5"} ${
-        calendarLayout === "month" ? "" : "h-full"
-      }`}
+      className={cn("grid divide-custom-border-200 md:divide-x-[0.5px]", {
+        "grid-cols-7": showWeekends,
+        "grid-cols-5": !showWeekends,
+        "h-full": calendarLayout !== "month",
+      })}
     >
-      {Object.values(week).map((date: ICalendarDate) => {
-        if (!showWeekends && (date.date.getDay() === 0 || date.date.getDay() === 6)) return null;
+      {sortedWeekDays.map((date: ICalendarDate) => {
+        if (!shouldShowDay(date.date)) return null;
 
         return (
           <CalendarDayTile
diff --git a/web/core/components/issues/issue-layouts/calendar/week-header.tsx b/web/core/components/issues/issue-layouts/calendar/week-header.tsx
index df432491448..d97a9340e72 100644
--- a/web/core/components/issues/issue-layouts/calendar/week-header.tsx
+++ b/web/core/components/issues/issue-layouts/calendar/week-header.tsx
@@ -1,7 +1,10 @@
 import { observer } from "mobx-react";
-
-// constants
+import { EStartOfTheWeek } from "@plane/constants";
 import { DAYS_LIST } from "@/constants/calendar";
+// helpers
+import { getOrderedDays } from "@/helpers/calendar.helper";
+// hooks
+import { useUserProfile } from "@/hooks/store";
 
 type Props = {
   isLoading: boolean;
@@ -10,6 +13,12 @@ type Props = {
 
 export const CalendarWeekHeader: React.FC<Props> = observer((props) => {
   const { isLoading, showWeekends } = props;
+  // hooks
+  const { data } = useUserProfile();
+  const startOfWeek = data?.start_of_the_week;
+
+  // derived
+  const orderedDays = getOrderedDays(Object.values(DAYS_LIST), (item) => item.value, startOfWeek);
 
   return (
     <div
@@ -20,8 +29,9 @@ export const CalendarWeekHeader: React.FC<Props> = observer((props) => {
       {isLoading && (
         <div className="absolute h-[1.5px] w-3/4 animate-[bar-loader_2s_linear_infinite] bg-custom-primary-100" />
       )}
-      {Object.values(DAYS_LIST).map((day) => {
-        if (!showWeekends && (day.shortTitle === "Sat" || day.shortTitle === "Sun")) return null;
+      {orderedDays.map((day) => {
+        if (!showWeekends && (day.value === EStartOfTheWeek.SUNDAY || day.value === EStartOfTheWeek.SATURDAY))
+          return null;
 
         return (
           <div
diff --git a/web/core/components/profile/index.ts b/web/core/components/profile/index.ts
index e5495aba1f5..5ccaa341645 100644
--- a/web/core/components/profile/index.ts
+++ b/web/core/components/profile/index.ts
@@ -6,3 +6,4 @@ export * from "./time";
 export * from "./profile-setting-content-wrapper";
 export * from "./profile-setting-content-header";
 export * from "./form";
+export * from "./start-of-week-preference";
diff --git a/web/core/components/profile/start-of-week-preference.tsx b/web/core/components/profile/start-of-week-preference.tsx
new file mode 100644
index 00000000000..91049b8099b
--- /dev/null
+++ b/web/core/components/profile/start-of-week-preference.tsx
@@ -0,0 +1,55 @@
+"use client";
+
+import React from "react";
+import { observer } from "mobx-react";
+// plane imports
+import { EStartOfTheWeek, START_OF_THE_WEEK_OPTIONS } from "@plane/constants";
+import { CustomSelect, setToast, TOAST_TYPE } from "@plane/ui";
+// hooks
+import { useUserProfile } from "@/hooks/store";
+
+const getStartOfWeekLabel = (startOfWeek: EStartOfTheWeek) =>
+  START_OF_THE_WEEK_OPTIONS.find((option) => option.value === startOfWeek)?.label;
+
+export const StartOfWeekPreference = observer(() => {
+  // hooks
+  const { data: userProfile, updateUserProfile } = useUserProfile();
+
+  return (
+    <div className="grid grid-cols-12 gap-4 py-6 sm:gap-16">
+      <div className="col-span-12 sm:col-span-6">
+        <h4 className="text-lg font-semibold text-custom-text-100">First day of the week</h4>
+        <p className="text-sm text-custom-text-200">This will change how all calendars in your app look.</p>
+      </div>
+      <div className="col-span-12 sm:col-span-6">
+        <CustomSelect
+          value={userProfile.start_of_the_week}
+          label={getStartOfWeekLabel(userProfile.start_of_the_week)}
+          onChange={(val: number) => {
+            updateUserProfile({ start_of_the_week: val })
+              .then(() => {
+                setToast({
+                  type: TOAST_TYPE.SUCCESS,
+                  title: "Success",
+                  message: "First day of the week updated successfully",
+                });
+              })
+              .catch(() => {
+                setToast({ type: TOAST_TYPE.ERROR, title: "Update failed", message: "Please try again later." });
+              });
+          }}
+          input
+          maxHeight="lg"
+        >
+          <>
+            {START_OF_THE_WEEK_OPTIONS.map((day) => (
+              <CustomSelect.Option key={day.value} value={day.value}>
+                {day.label}
+              </CustomSelect.Option>
+            ))}
+          </>
+        </CustomSelect>
+      </div>
+    </div>
+  );
+});
diff --git a/web/core/constants/calendar.ts b/web/core/constants/calendar.ts
index b2d0624c564..79db73ef7f1 100644
--- a/web/core/constants/calendar.ts
+++ b/web/core/constants/calendar.ts
@@ -1,3 +1,4 @@
+import { EStartOfTheWeek } from "@plane/constants";
 import { TCalendarLayouts } from "@plane/types";
 
 export const MONTHS_LIST: {
@@ -60,35 +61,43 @@ export const DAYS_LIST: {
   [dayIndex: number]: {
     shortTitle: string;
     title: string;
+    value: EStartOfTheWeek;
   };
 } = {
   1: {
     shortTitle: "Sun",
     title: "Sunday",
+    value: EStartOfTheWeek.SUNDAY,
   },
   2: {
     shortTitle: "Mon",
     title: "Monday",
+    value: EStartOfTheWeek.MONDAY,
   },
   3: {
     shortTitle: "Tue",
     title: "Tuesday",
+    value: EStartOfTheWeek.TUESDAY,
   },
   4: {
     shortTitle: "Wed",
     title: "Wednesday",
+    value: EStartOfTheWeek.WEDNESDAY,
   },
   5: {
     shortTitle: "Thu",
     title: "Thursday",
+    value: EStartOfTheWeek.THURSDAY,
   },
   6: {
     shortTitle: "Fri",
     title: "Friday",
+    value: EStartOfTheWeek.FRIDAY,
   },
   7: {
     shortTitle: "Sat",
     title: "Saturday",
+    value: EStartOfTheWeek.SATURDAY,
   },
 };
 
diff --git a/web/core/store/issue/issue_calendar_view.store.ts b/web/core/store/issue/issue_calendar_view.store.ts
index c84fe956bcd..4757fb5b3b6 100644
--- a/web/core/store/issue/issue_calendar_view.store.ts
+++ b/web/core/store/issue/issue_calendar_view.store.ts
@@ -68,7 +68,29 @@ export class CalendarStore implements ICalendarStore {
 
     const { activeMonthDate } = this.calendarFilters;
 
-    return this.calendarPayload[`y-${activeMonthDate.getFullYear()}`][`m-${activeMonthDate.getMonth()}`];
+    const year = activeMonthDate.getFullYear();
+    const month = activeMonthDate.getMonth();
+
+    // Get the weeks for the current month
+    const weeks = this.calendarPayload[`y-${year}`][`m-${month}`];
+
+    // If no weeks exist, return undefined
+    if (!weeks) return undefined;
+
+    // Create a new object to store the reordered weeks
+    const reorderedWeeks: { [weekNumber: string]: ICalendarWeek } = {};
+
+    // Get all week numbers and sort them
+    const weekNumbers = Object.keys(weeks).map((key) => parseInt(key.replace("w-", "")));
+    weekNumbers.sort((a, b) => a - b);
+
+    // Reorder weeks based on start_of_week
+    weekNumbers.forEach((weekNumber) => {
+      const weekKey = `w-${weekNumber}`;
+      reorderedWeeks[weekKey] = weeks[weekKey];
+    });
+
+    return reorderedWeeks;
   }
 
   get activeWeekNumber() {
diff --git a/web/core/store/user/profile.store.ts b/web/core/store/user/profile.store.ts
index 08cbe1fc70f..d5e796be668 100644
--- a/web/core/store/user/profile.store.ts
+++ b/web/core/store/user/profile.store.ts
@@ -2,6 +2,7 @@ import cloneDeep from "lodash/cloneDeep";
 import set from "lodash/set";
 import { action, makeObservable, observable, runInAction } from "mobx";
 // types
+import { EStartOfTheWeek } from "@plane/constants";
 import { IUserTheme, TUserProfile } from "@plane/types";
 // services
 import { UserService } from "@/services/user.service";
@@ -58,7 +59,8 @@ export class ProfileStore implements IUserProfileStore {
     has_billing_address: false,
     created_at: "",
     updated_at: "",
-    language: ""
+    language: "",
+    start_of_the_week: EStartOfTheWeek.SUNDAY,
   };
 
   // services
diff --git a/web/helpers/calendar.helper.ts b/web/helpers/calendar.helper.ts
index 5b89d8625f8..709cf9c9610 100644
--- a/web/helpers/calendar.helper.ts
+++ b/web/helpers/calendar.helper.ts
@@ -1,5 +1,7 @@
+import { EStartOfTheWeek } from "@plane/constants";
 // helpers
 import { ICalendarDate, ICalendarPayload } from "@/components/issues";
+import { DAYS_LIST } from "@/constants/calendar";
 import { getWeekNumberOfDate, renderFormattedPayloadDate } from "@/helpers/date-time.helper";
 // types
 
@@ -92,3 +94,21 @@ export const generateCalendarData = (currentStructure: ICalendarPayload | null,
 
   return calendarData;
 };
+
+/**
+ * Returns a new array sorted by the startOfWeek.
+ * @param items Array of items to sort.
+ * @param getDayIndex Function to get the day index (0-6) from an item.
+ * @param startOfWeek The day to start the week on.
+ */
+export function getOrderedDays<T>(
+  items: T[],
+  getDayIndex: (item: T) => number,
+  startOfWeek: EStartOfTheWeek = EStartOfTheWeek.SUNDAY
+): T[] {
+  return [...items].sort((a, b) => {
+    const dayA = (7 + getDayIndex(a) - startOfWeek) % 7;
+    const dayB = (7 + getDayIndex(b) - startOfWeek) % 7;
+    return dayA - dayB;
+  });
+}


Reviews:
user: login: coderabbitai[bot]
body: **Actionable comments posted: 4**

<details>
<summary>🧹 Nitpick comments (5)</summary><blockquote>

<details>
<summary>web/core/store/user/profile.store.ts (1)</summary><blockquote>

`62-63`: **Consider updating ProfileStore action signatures for consistency.**

The store has methods like `updateUserProfile` and `updateUserTheme`, but no specific method for updating just the start of the week preference. While not strictly necessary since the generic `updateUserProfile` method works, adding a dedicated method would maintain consistency with the pattern used for theme updates.


```diff
 export interface IUserProfileStore {
   // ...existing methods
   updateUserTheme: (data: Partial<IUserTheme>) => Promise<TUserProfile | undefined>;
+  updateStartOfTheWeek: (startOfTheWeek: EStartOfTheWeek) => Promise<TUserProfile | undefined>;
 }

 // In the class implementation
+/**
+ * @description updates the user's start of the week preference
+ * @returns {Promise<TUserProfile | undefined>}
+ */
+updateStartOfTheWeek = async (startOfTheWeek: EStartOfTheWeek) => {
+  const currentStartOfTheWeek = this.data.start_of_the_week;
+  try {
+    this.mutateUserProfile({ start_of_the_week: startOfTheWeek });
+    const userProfile = await this.userService.updateCurrentUserProfile({ start_of_the_week: startOfTheWeek });
+    return userProfile;
+  } catch (error) {
+    runInAction(() => {
+      this.mutateUserProfile({ start_of_the_week: currentStartOfTheWeek });
+      this.error = {
+        status: "user-profile-start-of-week-update-error",
+        message: "Failed to update start of the week preference",
+      };
+    });
+    throw error;
+  }
+};
```

</blockquote></details>
<details>
<summary>web/core/components/gantt-chart/data/index.ts (1)</summary><blockquote>

`6-19`: **Consider consolidating duplicated day definitions**

The implementation of `generateWeeks` is solid, but it duplicates the day definitions that already exist in the static `weeks` array below. This creates a maintenance burden as any updates would need to be applied in two places.


Consider refactoring to eliminate duplication by reusing the static `weeks` array:

```diff
-export const generateWeeks = (startOfWeek: EStartOfTheWeek = EStartOfTheWeek.SUNDAY): WeekMonthDataType[] => {
-  const allDays: WeekMonthDataType[] = [
-    { key: 0, shortTitle: "sun", title: "sunday", abbreviation: "Su" },
-    { key: 1, shortTitle: "mon", title: "monday", abbreviation: "M" },
-    { key: 2, shortTitle: "tue", title: "tuesday", abbreviation: "T" },
-    { key: 3, shortTitle: "wed", title: "wednesday", abbreviation: "W" },
-    { key: 4, shortTitle: "thurs", title: "thursday", abbreviation: "Th" },
-    { key: 5, shortTitle: "fri", title: "friday", abbreviation: "F" },
-    { key: 6, shortTitle: "sat", title: "saturday", abbreviation: "Sa" },
-  ];
+/**
+ * Generates an array of weekday objects ordered by the user's preferred start of week
+ * @param startOfWeek The day to use as the start of the week
+ * @returns Ordered array of week days
+ */
+export const generateWeeks = (startOfWeek: EStartOfTheWeek = EStartOfTheWeek.SUNDAY): WeekMonthDataType[] => {
+  const allDays = [...weeks];

  // Reorder the array based on startOfWeek
  return [...allDays.slice(startOfWeek), ...allDays.slice(0, startOfWeek)];
};
```

</blockquote></details>
<details>
<summary>web/core/components/issues/issue-layouts/calendar/week-days.tsx (1)</summary><blockquote>

`81-85`: **Leverage `startOfWeek` when filtering weekends**

When the user chooses a week that starts on Saturday/Sunday, the current logic might unintentionally exclude two working days instead of weekends.  
Consider deriving weekend keys (typically 0 & 6) once, unrelated to `startOfWeek`, to ensure correctness regardless of user preference.

</blockquote></details>
<details>
<summary>web/core/components/profile/start-of-week-preference.tsx (1)</summary><blockquote>

`40-46`: **Remove the redundant fragment (`<>…</>`)**

Static analysis is correct – the fragment only wraps a single map. You can return the mapped elements directly:

```diff
-<>
-  {START_OF_THE_WEEK_OPTIONS.map((day) => (
-    <CustomSelect.Option key={day.value} value={day.value}>
-      {day.label}
-    </CustomSelect.Option>
-  ))}
-</>
+{START_OF_THE_WEEK_OPTIONS.map((day) => (
+  <CustomSelect.Option key={day.value} value={day.value}>
+    {day.label}
+  </CustomSelect.Option>
+))}
```

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 Biome (1.9.4)</summary>

[error] 40-46: Avoid using unnecessary Fragment.

A fragment is redundant if it contains only one child, or if it is the child of a html element, and is not a keyed fragment.
Unsafe fix: Remove the Fragment


(lint/complexity/noUselessFragments)

</details>

</details>

</blockquote></details>
<details>
<summary>web/core/components/gantt-chart/views/week-view.ts (1)</summary><blockquote>

`137-141`: **Edge-case: aligning to the correct week when `startDate` is already the desired start-day**

Current math works, but using date-fns `startOfWeek(currentDate, { weekStartsOn: startOfWeek })` would be more readable and locale-proof (handles DST transitions, etc.).  
Consider switching to the utility function in a follow-up refactor.

</blockquote></details>

</blockquote></details>

<details>
<summary>📜 Review details</summary>

**Configuration used: CodeRabbit UI**
**Review profile: CHILL**
**Plan: Pro**

<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between 14ebaf079968e4ad2f338f1a6800402efc5419b5 and 18e5a4c74b492d63733b0b251edeb74052ac0551.

</details>

<details>
<summary>📒 Files selected for processing (16)</summary>

* `packages/constants/src/profile.ts` (1 hunks)
* `packages/types/src/users.d.ts` (3 hunks)
* `packages/ui/src/calendar.tsx` (1 hunks)
* `web/app/profile/appearance/page.tsx` (2 hunks)
* `web/core/components/dropdowns/date.tsx` (5 hunks)
* `web/core/components/gantt-chart/chart/root.tsx` (3 hunks)
* `web/core/components/gantt-chart/data/index.ts` (1 hunks)
* `web/core/components/gantt-chart/views/week-view.ts` (8 hunks)
* `web/core/components/issues/issue-layouts/calendar/week-days.tsx` (2 hunks)
* `web/core/components/issues/issue-layouts/calendar/week-header.tsx` (3 hunks)
* `web/core/components/profile/index.ts` (1 hunks)
* `web/core/components/profile/start-of-week-preference.tsx` (1 hunks)
* `web/core/constants/calendar.ts` (2 hunks)
* `web/core/store/issue/issue_calendar_view.store.ts` (1 hunks)
* `web/core/store/user/profile.store.ts` (2 hunks)
* `web/helpers/calendar.helper.ts` (2 hunks)

</details>

<details>
<summary>🧰 Additional context used</summary>

<details>
<summary>🧬 Code Graph Analysis (5)</summary>

<details>
<summary>web/core/store/issue/issue_calendar_view.store.ts (1)</summary><blockquote>

<details>
<summary>web/core/components/gantt-chart/data/index.ts (1)</summary>

* `weeks` (21-29)

</details>

</blockquote></details>
<details>
<summary>web/core/components/issues/issue-layouts/calendar/week-header.tsx (1)</summary><blockquote>

<details>
<summary>web/helpers/calendar.helper.ts (1)</summary>

* `getOrderedDays` (98-103)

</details>

</blockquote></details>
<details>
<summary>web/helpers/calendar.helper.ts (1)</summary><blockquote>

<details>
<summary>web/core/constants/calendar.ts (1)</summary>

* `DAYS_LIST` (60-102)

</details>

</blockquote></details>
<details>
<summary>web/app/profile/appearance/page.tsx (1)</summary><blockquote>

<details>
<summary>web/core/components/profile/start-of-week-preference.tsx (1)</summary>

* `StartOfWeekPreference` (14-51)

</details>

</blockquote></details>
<details>
<summary>web/core/components/gantt-chart/views/week-view.ts (1)</summary><blockquote>

<details>
<summary>web/core/components/gantt-chart/data/index.ts (2)</summary>

* `weeks` (21-29)
* `generateWeeks` (6-19)

</details>

</blockquote></details>

</details><details>
<summary>🪛 Biome (1.9.4)</summary>

<details>
<summary>web/core/components/profile/start-of-week-preference.tsx</summary>

[error] 40-46: Avoid using unnecessary Fragment.

A fragment is redundant if it contains only one child, or if it is the child of a html element, and is not a keyed fragment.
Unsafe fix: Remove the Fragment


(lint/complexity/noUselessFragments)

</details>

</details>

</details>

<details>
<summary>🔇 Additional comments (25)</summary><blockquote>

<details>
<summary>packages/constants/src/profile.ts (2)</summary>

`75-87`: **Well-structured enum implementation for week start days.**

The `EStartOfTheWeek` enum is correctly implemented with values matching JavaScript's Date object convention (0 for Sunday through 6 for Saturday). The JSDoc documentation clearly explains the purpose of this enum.

---

`89-123`: **Well-defined options array with clear type documentation.**

The `START_OF_THE_WEEK_OPTIONS` array properly maps each enum value to its corresponding label, making it ready for use in dropdown selectors or other UI components. The JSDoc is comprehensive and includes the correct type definition.

</details>
<details>
<summary>packages/ui/src/calendar.tsx (1)</summary>

`20-20`: **Correctly implemented week start preference in the Calendar component.**

The `weekStartsOn` prop is now properly passed to the DayPicker component, enabling user-configured start of week preferences to take effect in calendar displays.


Note that this prop is defined before the spread operator `{...props}` at line 81. This is fine if the intention is to allow overriding from the spread props, but worth noting as it affects precedence.

</details>
<details>
<summary>web/core/components/profile/index.ts (1)</summary>

`9-9`: **Good export of the new StartOfWeekPreference component.**

The new component is properly exported, making it available for use throughout the application.

</details>
<details>
<summary>web/core/store/user/profile.store.ts (2)</summary>

`5-5`: **Correctly imported the EStartOfTheWeek enum.**

The import is properly placed with the other type imports.

---

`63-63`: **Well-initialized start_of_the_week preference with a sensible default.**

The `start_of_the_week` property is added to the user profile data with Sunday as the default value, which is a common convention. This ensures new user profiles will have a consistent default.

</details>
<details>
<summary>web/app/profile/appearance/page.tsx (2)</summary>

`13-14`: **Refactored imports look good**

The change correctly separates imports from different modules, making the code more organized.

---

`77-77`: **Successfully integrated start of week preference UI**

The StartOfWeekPreference component is appropriately added to the profile appearance page, giving users control over their preferred first day of the week in calendars.

</details>
<details>
<summary>packages/types/src/users.d.ts (3)</summary>

`1-1`: **Appropriately imported new enum type**

The import of EStartOfTheWeek from constants is correct and follows project conventions.

---

`160-163`: **Improved type definition using Pick**

Good use of TypeScript's Pick utility type to make the type definition more maintainable and precise.

---

`68-68`: <details>
<summary>✅ Verification successful</summary>

**Good addition of start of week preference to user profile**

Adding the start_of_the_week property of type EStartOfTheWeek to the TUserProfile type properly extends the user profile data model to include this new preference.


Let's verify that the profile store provides a default value for this new property:

---

🏁 Script executed:

```shell
#!/bin/bash
# Check if the profile store initializes the start_of_the_week property with a default value
rg "start_of_the_week" "web/core/store/user/profile.store.ts"
```

Length of output: 106

---



</details>

**Confirmed default initialization of `start_of_the_week`**

The profile store (`web/core/store/user/profile.store.ts`) properly initializes `start_of_the_week` to `EStartOfTheWeek.SUNDAY`, ensuring a sane default for user preferences. All set—approving these changes.

</details>
<details>
<summary>web/core/components/gantt-chart/chart/root.tsx (2)</summary>

`8-8`: **Added necessary hook import**

Correctly imported the useUserProfile hook to access user preferences.

---

`91-93`: **Well-structured hook implementation**

Good use of destructuring to extract the start_of_the_week value from the user profile.

</details>
<details>
<summary>web/core/constants/calendar.ts (2)</summary>

`1-1`: **Appropriate import of new enum**

The import of EStartOfTheWeek is correct and follows project conventions.

---

`64-64`: <details>
<summary>✅ Verification successful</summary>

**Well-structured integration of enum values with day definitions**

The addition of the enum value to each day in DAYS_LIST creates a clear mapping between days and their corresponding enum values, which is essential for consistent handling of the week start preference throughout the application.


Let's see how these enum values are used in helper functions:




Also applies to: 70-70, 75-75, 80-80, 85-85, 90-90, 95-95, 100-100

---

🏁 Script executed:

```shell
#!/bin/bash
# Check how the day enums are used in calendar helpers
rg --type-add 'ts:*.ts' --type ts "getOrderedDays|EStartOfTheWeek" "web/helpers/calendar.helper.ts"
```

Length of output: 215

---



</details>

**Integration Verified: Enum Values Properly Used in Helpers**

The `DAYS_LIST` entries map directly to `EStartOfTheWeek` members, and the `getOrderedDays` helper in `web/helpers/calendar.helper.ts` correctly imports and uses `EStartOfTheWeek` as its parameter type. No further changes are needed.

</details>
<details>
<summary>web/core/store/issue/issue_calendar_view.store.ts (1)</summary>

`71-93`: **Efficient week sorting in the calendar view getter**

The modifications to the `allWeeksOfActiveMonth` getter now ensure weeks are sorted numerically, leading to a more predictable display order. This is an essential foundation for supporting user-configurable start-of-week preferences across the application.

</details>
<details>
<summary>web/helpers/calendar.helper.ts (2)</summary>

`1-1`: **Good addition of required import for start-of-week functionality**

The import of `EStartOfTheWeek` enum is necessary for the new calendar ordering functionality.

---

`98-103`: **Well-implemented day ordering helper function**

The `getOrderedDays` function elegantly handles reordering days of the week based on user preferences using modular arithmetic. This is a clean implementation that will ensure consistent ordering across the application.

</details>
<details>
<summary>web/core/components/gantt-chart/data/index.ts (1)</summary>

`2-2`: **Required import added for the start-of-week functionality**

The import of `EStartOfTheWeek` enum from constants is necessary for the new week generation functionality.

</details>
<details>
<summary>web/core/components/issues/issue-layouts/calendar/week-header.tsx (2)</summary>

`3-17`: **Good implementation of user preference for week start day**

The integration of user preferences for the start of the week is well implemented. The component now properly:
1. Retrieves the user's preference via the `useUserProfile` hook
2. Uses the `getOrderedDays` helper to reorder days based on preference
3. Correctly structures the relevant code as hook calls and derived state

---

`31-32`: **Correct handling of weekend filtering with ordered days**

The weekend filtering now correctly works with the dynamically ordered days by checking the day's value property (0 for Sunday and 6 for Saturday) rather than relying on the position in the array.

</details>
<details>
<summary>web/core/components/dropdowns/date.tsx (1)</summary>

`195-196`: **Confirm `weekStartsOn` accepts the enum value (0-6)**  

React-Day-Picker (and most date-lib wrappers) expect a plain 0-6 integer.  
If `start_of_the_week` is stored as the enum value (0-6) you’re ✅.  
If the enum is a string (e.g. `"SUNDAY"`) you’ll get an invalid prop warning and the calendar will silently default to Sunday.  
Please double-check the enum definition or add a cast.

</details>
<details>
<summary>web/core/components/issues/issue-layouts/calendar/week-days.tsx (1)</summary>

`87-92`: **✅ Nice, deterministic re-ordering of days**

The modulo math is a clean way to realign the array based on the preferred first day.

</details>
<details>
<summary>web/core/components/gantt-chart/views/week-view.ts (2)</summary>

`184-196`: **👍 Good reuse of `generateWeeks` to keep labels in sync**

The day objects and abbreviations will now consistently respect the user’s preference – nice touch!

---

`42-47`: <details>
<summary>✅ Verification successful</summary>

**Verify all call-sites updated to the new `startOfWeek` parameter**

`generateWeekChart`, `getWeeksBetweenTwoDates`, and `populateDaysForWeek` now require the extra argument.  
A missed update will silently pass `undefined`, falling back to Sunday and breaking user expectations.



The pattern searches for invocations with too few parameters.

---

🏁 Script executed:

```shell
#!/bin/bash
# Find calls to the three functions that still use the old arity
rg --type tsx --type ts --no-heading -n \
   -e 'generateWeekChart\([^,)]*\)$' \
   -e 'getWeeksBetweenTwoDates\([^,)]*,[^,)]*,[^)]*\)$' \
   -e 'populateDaysForWeek\([^,)]*\)$'
```

Length of output: 192

---

🏁 Script executed:

```shell
#!/bin/bash
# Search for generateWeekChart calls missing the 4th argument
rg -n 'generateWeekChart\(' -g '*.ts' -g '*.tsx' | grep -v -E 'generateWeekChart\([^)]*(,[^)]*){3}\)'

# Search for getWeeksBetweenTwoDates calls missing the 3rd argument
rg -n 'getWeeksBetweenTwoDates\(' -g '*.ts' -g '*.tsx' | grep -v -E 'getWeeksBetweenTwoDates\([^)]*(,[^)]*){2}\)'

# Search for populateDaysForWeek calls missing the 2nd argument
rg -n 'populateDaysForWeek\(' -g '*.ts' -g '*.tsx' | grep -v -E 'populateDaysForWeek\([^)]*(,[^)]*){1}\)'
```

Length of output: 327

---



</details>

**All call-sites include the new `startOfWeek` argument**

I searched across all `.ts` and `.tsx` files for calls to `generateWeekChart`, `getWeeksBetweenTwoDates`, and `populateDaysForWeek` that don’t pass the fourth, third, and second parameters respectively—no occurrences were found. All call-sites have been updated to include the new `startOfWeek` argument.

</details>

</blockquote></details>

</details>

<!-- This is an auto-generated comment by CodeRabbit for review status -->
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-08T13:48:14Z
user: login: anmolsinghbhatia
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-05-09T08:06:08Z
user: login: coderabbitai[bot]
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-09T08:06:30Z
user: login: anmolsinghbhatia
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-05-09T08:07:16Z
user: login: coderabbitai[bot]
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-09T08:07:39Z
user: login: coderabbitai[bot]
body: **Actionable comments posted: 0**

<details>
<summary>🧹 Nitpick comments (2)</summary><blockquote>

<details>
<summary>web/core/components/profile/start-of-week-preference.tsx (2)</summary><blockquote>

`44-50`: **Remove unnecessary Fragment.**

The `<>...</>` Fragment wrapper is redundant here as it contains only a single child (the map function).

```diff
-          <>
            {START_OF_THE_WEEK_OPTIONS.map((day) => (
              <CustomSelect.Option key={day.value} value={day.value}>
                {day.label}
              </CustomSelect.Option>
            ))}
-          </>
```

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 Biome (1.9.4)</summary>

[error] 44-50: Avoid using unnecessary Fragment.

A fragment is redundant if it contains only one child, or if it is the child of a html element, and is not a keyed fragment.
Unsafe fix: Remove the Fragment


(lint/complexity/noUselessFragments)

</details>

</details>

---

`11-12`: **Consider using useMemo for the helper function.**

For optimization, you might want to memoize the `getStartOfWeekLabel` function or move it inside the component and wrap it with useMemo, especially if the component re-renders frequently.

```diff
-const getStartOfWeekLabel = (startOfWeek: EStartOfTheWeek) =>
-  START_OF_THE_WEEK_OPTIONS.find((option) => option.value === startOfWeek)?.label;

export const StartOfWeekPreference = observer(() => {
  // hooks
  const { data: userProfile, updateUserProfile } = useUserProfile();

+  const getStartOfWeekLabel = useMemo(() => {
+    return (startOfWeek: EStartOfTheWeek) =>
+      START_OF_THE_WEEK_OPTIONS.find((option) => option.value === startOfWeek)?.label;
+  }, []);
```

</blockquote></details>

</blockquote></details>

<details>
<summary>📜 Review details</summary>

**Configuration used: CodeRabbit UI**
**Review profile: CHILL**
**Plan: Pro**

<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between 18e5a4c74b492d63733b0b251edeb74052ac0551 and 8f1c350bb9250cc76096b1aac8346baafbc3bbbd.

</details>

<details>
<summary>📒 Files selected for processing (6)</summary>

* `space/core/store/profile.store.ts` (2 hunks)
* `web/core/components/dropdowns/date.tsx` (4 hunks)
* `web/core/components/gantt-chart/chart/root.tsx` (3 hunks)
* `web/core/components/issues/issue-layouts/calendar/week-days.tsx` (2 hunks)
* `web/core/components/issues/issue-layouts/calendar/week-header.tsx` (3 hunks)
* `web/core/components/profile/start-of-week-preference.tsx` (1 hunks)

</details>

<details>
<summary>✅ Files skipped from review due to trivial changes (1)</summary>

* space/core/store/profile.store.ts

</details>

<details>
<summary>🚧 Files skipped from review as they are similar to previous changes (4)</summary>

* web/core/components/gantt-chart/chart/root.tsx
* web/core/components/issues/issue-layouts/calendar/week-days.tsx
* web/core/components/issues/issue-layouts/calendar/week-header.tsx
* web/core/components/dropdowns/date.tsx

</details>

<details>
<summary>🧰 Additional context used</summary>

<details>
<summary>🧬 Code Graph Analysis (1)</summary>

<details>
<summary>web/core/components/profile/start-of-week-preference.tsx (2)</summary><blockquote>

<details>
<summary>packages/constants/src/profile.ts (1)</summary>

* `START_OF_THE_WEEK_OPTIONS` (94-123)

</details>
<details>
<summary>packages/ui/src/dropdowns/custom-select.tsx (1)</summary>

* `CustomSelect` (156-156)

</details>

</blockquote></details>

</details><details>
<summary>🪛 Biome (1.9.4)</summary>

<details>
<summary>web/core/components/profile/start-of-week-preference.tsx</summary>

[error] 44-50: Avoid using unnecessary Fragment.

A fragment is redundant if it contains only one child, or if it is the child of a html element, and is not a keyed fragment.
Unsafe fix: Remove the Fragment


(lint/complexity/noUselessFragments)

</details>

</details>

</details>

<details>
<summary>⏰ Context from checks skipped due to timeout of 90000ms (2)</summary>

* GitHub Check: Analyze (javascript)
* GitHub Check: Analyze (python)

</details>

<details>
<summary>🔇 Additional comments (1)</summary><blockquote>

<details>
<summary>web/core/components/profile/start-of-week-preference.tsx (1)</summary>

`1-55`: **Well-implemented component with good user experience.**

The component is well-structured with clear separation of concerns, proper error handling, and responsive layout. The descriptive text explains the impact of this setting clearly to users.

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 Biome (1.9.4)</summary>

[error] 44-50: Avoid using unnecessary Fragment.

A fragment is redundant if it contains only one child, or if it is the child of a html element, and is not a keyed fragment.
Unsafe fix: Remove the Fragment


(lint/complexity/noUselessFragments)

</details>

</details>

</details>

</blockquote></details>

</details>

<!-- This is an auto-generated comment by CodeRabbit for review status -->
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-09T08:10:27Z
user: login: gakshita
state: CHANGES_REQUESTED
author_association: COLLABORATOR
submitted_at: 2025-05-09T11:28:05Z
user: login: gakshita
state: APPROVED
author_association: COLLABORATOR
submitted_at: 2025-05-09T12:40:17Z
user: login: prateekshourya29
state: CHANGES_REQUESTED
author_association: MEMBER
submitted_at: 2025-05-12T11:34:52Z
user: login: anmolsinghbhatia
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-05-12T11:40:03Z
user: login: anmolsinghbhatia
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-05-12T11:43:00Z

Review comments:
diff_hunk: @@ -98,7 +102,7 @@ export const ChartViewRoot: FC<ChartViewRootProps> = observer((props) => {
     if (selectedCurrentViewData === undefined) return;
 
     const currentViewHelpers = timelineViewHelpers[selectedCurrentView];
-    const currentRender = currentViewHelpers.generateChart(selectedCurrentViewData, side, targetDate);
+    const currentRender = currentViewHelpers.generateChart(selectedCurrentViewData, side, targetDate, startOfWeek);
path: web/core/components/gantt-chart/chart/root.tsx
user: login: coderabbitai[bot]
body: _💡 Verification agent_

<details>
<summary>🧩 Analysis chain</summary>

**Integrates user preference into chart generation**

The change correctly passes the user's start of week preference to the chart generation function, ensuring the Gantt chart respects the user's settings.


Let's check how the generateChart function uses the startOfWeek parameter:

---

🏁 Script executed:

```shell
#!/bin/bash
# Check how the generateChart function uses the startOfWeek parameter
rg --type-add 'ts:*.ts' --type ts "generateChart.*startOfWeek" "web/core/components/gantt-chart/views/"
```

Length of output: 103

---

🏁 Script executed:

```shell
#!/bin/bash
# Locate the definition of generateChart to inspect its parameters
rg -n "generateChart\s*\(" -R web/core/components/gantt-chart
```

Length of output: 468

---

🏁 Script executed:

```shell
#!/bin/bash
# Search for any occurrence of generateChart under the gantt-chart directory
rg "generateChart" web/core/components/gantt-chart
```

Length of output: 482

---

🏁 Script executed:

```shell
#!/bin/bash
# Inspect signatures and usage of chart generators with context
rg -C2 "generateWeekChart" web/core/components/gantt-chart/views/week-view.ts
rg -C2 "generateMonthChart" web/core/components/gantt-chart/views/month-view.ts
rg -C2 "generateQuarterChart" web/core/components/gantt-chart/views/quarter-view.ts
```

Length of output: 1054

---



</details>

**Ensure all view generators accept `startOfWeek`**

The `root.tsx` change now passes `startOfWeek` into `currentViewHelpers.generateChart`, but the individual view generators currently ignore this fourth argument:

• `week-view.ts` – `generateWeekChart` signature only takes `(weekPayload, side)`  
• `month-view.ts` – `generateMonthChart` takes `(monthPayload, side, targetDate?)`  
• `quarter-view.ts` – `generateQuarterChart` takes `(quarterPayload, side, targetDate?)`

To fully integrate the user’s start-of-week preference:
- Update each `generateXChart` signature to accept `startOfWeek` (e.g. `(payload, side, targetDate?, startOfWeek?)`).
- Adjust the implementations to use `startOfWeek` where relevant (especially in weekly views).

Files to update:
- `web/core/components/gantt-chart/views/week-view.ts`
- `web/core/components/gantt-chart/views/month-view.ts`
- `web/core/components/gantt-chart/views/quarter-view.ts`

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-05-08T13:48:13Z
author_association: CONTRIBUTOR
diff_hunk: @@ -62,6 +64,10 @@ export const DateDropdown: React.FC<Props> = (props) => {
   const [isOpen, setIsOpen] = useState(false);
   // refs
   const dropdownRef = useRef<HTMLDivElement | null>(null);
+  // hooks
+  const {
+    data: { start_of_the_week: startOfWeek },
+  } = useUserProfile();
   // popper-js refs
path: web/core/components/dropdowns/date.tsx
user: login: coderabbitai[bot]
body: _⚠️ Potential issue_

**Handle `undefined` profile data to prevent a runtime crash**

`useUserProfile()` might return `{ data: undefined }` for a brief moment while the profile is still loading.  
Destructuring `start_of_the_week` directly will then throw: `Cannot destructure property 'start_of_the_week' of 'data' as it is undefined`.

```diff
-const {
-  data: { start_of_the_week: startOfWeek },
-} = useUserProfile();
+const { data } = useUserProfile();
+// Fallback to Sunday (0) when the profile hasn’t loaded yet
+const startOfWeek =
+  data?.start_of_the_week ?? /* import EStartOfTheWeek and use */ EStartOfTheWeek.SUNDAY;
```

Besides guarding against the crash, this keeps the calendar usable while the store hydrates.  
Don’t forget to add `EStartOfTheWeek` to the import list.  



<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

`````suggestion
  const { data } = useUserProfile();
  // Fallback to Sunday (0) when the profile hasn’t loaded yet
  const startOfWeek =
    data?.start_of_the_week ?? EStartOfTheWeek.SUNDAY;
  // popper-js refs
`````

</details>

<!-- suggestion_end -->

<!-- This is an auto-generated comment by CodeRabbit -->

✅ Addressed in commit 8f1c350
created_at: 2025-05-08T13:48:13Z
author_association: CONTRIBUTOR
diff_hunk: @@ -65,20 +68,38 @@ export const CalendarWeekDays: React.FC<Props> = observer((props) => {
     canEditProperties,
     isEpic = false,
   } = props;
+  // hooks
+  const {
+    data: { start_of_the_week: startOfWeek },
+  } = useUserProfile();
 
path: web/core/components/issues/issue-layouts/calendar/week-days.tsx
user: login: coderabbitai[bot]
body: _⚠️ Potential issue_

**Guard against undefined `data` in the profile hook**

Same crash risk here as in the DateDropdown: if `data` is momentarily `undefined`, the destructuring will explode.

```diff
-const {
-  data: { start_of_the_week: startOfWeek },
-} = useUserProfile();
+const { data } = useUserProfile();
+const startOfWeek = data?.start_of_the_week ?? EStartOfTheWeek.SUNDAY;
```

Add `EStartOfTheWeek` to the imports.



<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

`````suggestion
- const {
-   data: { start_of_the_week: startOfWeek },
- } = useUserProfile();
+ const { data } = useUserProfile();
+ const startOfWeek = data?.start_of_the_week ?? EStartOfTheWeek.SUNDAY;
`````

</details>

<!-- suggestion_end -->

<!-- This is an auto-generated reply by CodeRabbit -->
created_at: 2025-05-08T13:48:13Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,51 @@
+"use client";
+
+import React from "react";
+import { observer } from "mobx-react";
+// plane imports
+import { EStartOfTheWeek, START_OF_THE_WEEK_OPTIONS } from "@plane/constants";
+import { CustomSelect, setToast, TOAST_TYPE } from "@plane/ui";
+// hooks
+import { useUserProfile } from "@/hooks/store";
+
+const getStartOfWeekLabel = (startOfWeek: EStartOfTheWeek) =>
+  START_OF_THE_WEEK_OPTIONS.find((option) => option.value === startOfWeek)?.label;
+
+export const StartOfWeekPreference = observer(() => {
+  // hooks
+  const { data: userProfile, updateUserProfile } = useUserProfile();
+
+  return (
+    <div className="grid grid-cols-12 gap-4 py-6 sm:gap-16">
+      <div className="col-span-12 sm:col-span-6">
+        <h4 className="text-lg font-semibold text-custom-text-100">First day of the week</h4>
+        <p className="text-sm text-custom-text-200">This will change how all calendars in your app look.</p>
+      </div>
+      <div className="col-span-12 sm:col-span-6">
+        <CustomSelect
+          value={userProfile.start_of_the_week}
+          label={getStartOfWeekLabel(userProfile.start_of_the_week)}
+          onChange={(val: number) => {
+            updateUserProfile({ start_of_the_week: val }).then(() => {
+              setToast({
+                type: TOAST_TYPE.SUCCESS,
+                title: "Success",
+                message: "First day of the week updated successfully",
+              });
+            });
+          }}
path: web/core/components/profile/start-of-week-preference.tsx
user: login: coderabbitai[bot]
body: _🛠️ Refactor suggestion_

**Add error-path handling for profile updates**

If `updateUserProfile` rejects (network failure, validation error, etc.), the component stays silent.  
Recommend surfacing feedback so users know something went wrong.

```diff
 onChange={(val: number) => {
-  updateUserProfile({ start_of_the_week: val }).then(() => {
-    setToast({ type: TOAST_TYPE.SUCCESS, title: "Success", message: "First day of the week updated successfully" });
-  });
+  updateUserProfile({ start_of_the_week: val })
+    .then(() =>
+      setToast({ type: TOAST_TYPE.SUCCESS, title: "Success", message: "First day of the week updated successfully" })
+    )
+    .catch(() =>
+      setToast({ type: TOAST_TYPE.ERROR, title: "Update failed", message: "Please try again later." })
+    );
 }}
```



<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

`````suggestion
          onChange={(val: number) => {
            updateUserProfile({ start_of_the_week: val })
              .then(() =>
                setToast({
                  type: TOAST_TYPE.SUCCESS,
                  title: "Success",
                  message: "First day of the week updated successfully",
                })
              )
              .catch(() =>
                setToast({
                  type: TOAST_TYPE.ERROR,
                  title: "Update failed",
                  message: "Please try again later.",
                })
              );
          }}
`````

</details>

<!-- suggestion_end -->

<!-- This is an auto-generated reply by CodeRabbit -->
created_at: 2025-05-08T13:48:14Z
author_association: CONTRIBUTOR
diff_hunk: @@ -65,20 +68,38 @@ export const CalendarWeekDays: React.FC<Props> = observer((props) => {
     canEditProperties,
     isEpic = false,
   } = props;
+  // hooks
+  const {
+    data: { start_of_the_week: startOfWeek },
+  } = useUserProfile();
 
path: web/core/components/issues/issue-layouts/calendar/week-days.tsx
user: login: anmolsinghbhatia
body: Resolved
created_at: 2025-05-09T08:06:08Z
author_association: COLLABORATOR
diff_hunk: @@ -65,20 +68,38 @@ export const CalendarWeekDays: React.FC<Props> = observer((props) => {
     canEditProperties,
     isEpic = false,
   } = props;
+  // hooks
+  const {
+    data: { start_of_the_week: startOfWeek },
+  } = useUserProfile();
 
path: web/core/components/issues/issue-layouts/calendar/week-days.tsx
user: login: coderabbitai[bot]
body: @anmolsinghbhatia Thanks for resolving the issue! That fix will prevent potential crashes when the profile data is undefined. Nice work.

---

<!-- This is an auto-generated comment: tweet message by coderabbit.ai -->

If you found this review helpful, would you consider giving us a shout-out on [X](https://twitter.com/intent/tweet?related=CodeRabbitAI&text=Avoid%20crashes%20by%20safely%20handling%20possibly%20undefined%20%60data%60%20in%20hooks!%20Use%20optional%20chaining%20and%20defaults%20to%20keep%20your%20app%20stable.%20Try%20%40coderabbitai%20for%20smart%20code%20reviews!%20%F0%9F%90%87%E2%9C%A8&url=https%3A%2F%2Fgithub.com%2Fmakeplane%2Fplane%2Fpull%2F7033%23discussion_r2079758831)?

Thank you for using CodeRabbit!

<!-- end of auto-generated comment: tweet message by coderabbit.ai -->




<!-- <agentComponentType>chat-answer</agentComponentType> -->

<!-- <rawResChunk><answer>@anmolsinghbhatia Thanks for resolving the issue! That fix will prevent potential crashes when the profile data is undefined. Nice work.

---

&lt;!-- This is an auto-generated comment: tweet message by coderabbit.ai --&gt;

If you found this review helpful, would you consider giving us a shout-out on [X](https://twitter.com/intent/tweet?related=CodeRabbitAI&text=Avoid%20crashes%20by%20safely%20handling%20possibly%20undefined%20%60data%60%20in%20hooks!%20Use%20optional%20chaining%20and%20defaults%20to%20keep%20your%20app%20stable.%20Try%20%40coderabbitai%20for%20smart%20code%20reviews!%20%F0%9F%90%87%E2%9C%A8&url=https%3A%2F%2Fgithub.com%2Fmakeplane%2Fplane%2Fpull%2F7033%23discussion_r2079758831)?

Thank you for using CodeRabbit!

&lt;!-- end of auto-generated comment: tweet message by coderabbit.ai --&gt;

</answer></rawResChunk> -->

<!-- This is an auto-generated reply by CodeRabbit -->
created_at: 2025-05-09T08:06:30Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,51 @@
+"use client";
+
+import React from "react";
+import { observer } from "mobx-react";
+// plane imports
+import { EStartOfTheWeek, START_OF_THE_WEEK_OPTIONS } from "@plane/constants";
+import { CustomSelect, setToast, TOAST_TYPE } from "@plane/ui";
+// hooks
+import { useUserProfile } from "@/hooks/store";
+
+const getStartOfWeekLabel = (startOfWeek: EStartOfTheWeek) =>
+  START_OF_THE_WEEK_OPTIONS.find((option) => option.value === startOfWeek)?.label;
+
+export const StartOfWeekPreference = observer(() => {
+  // hooks
+  const { data: userProfile, updateUserProfile } = useUserProfile();
+
+  return (
+    <div className="grid grid-cols-12 gap-4 py-6 sm:gap-16">
+      <div className="col-span-12 sm:col-span-6">
+        <h4 className="text-lg font-semibold text-custom-text-100">First day of the week</h4>
+        <p className="text-sm text-custom-text-200">This will change how all calendars in your app look.</p>
+      </div>
+      <div className="col-span-12 sm:col-span-6">
+        <CustomSelect
+          value={userProfile.start_of_the_week}
+          label={getStartOfWeekLabel(userProfile.start_of_the_week)}
+          onChange={(val: number) => {
+            updateUserProfile({ start_of_the_week: val }).then(() => {
+              setToast({
+                type: TOAST_TYPE.SUCCESS,
+                title: "Success",
+                message: "First day of the week updated successfully",
+              });
+            });
+          }}
path: web/core/components/profile/start-of-week-preference.tsx
user: login: anmolsinghbhatia
body: Resolved
created_at: 2025-05-09T08:07:15Z
author_association: COLLABORATOR
diff_hunk: @@ -0,0 +1,51 @@
+"use client";
+
+import React from "react";
+import { observer } from "mobx-react";
+// plane imports
+import { EStartOfTheWeek, START_OF_THE_WEEK_OPTIONS } from "@plane/constants";
+import { CustomSelect, setToast, TOAST_TYPE } from "@plane/ui";
+// hooks
+import { useUserProfile } from "@/hooks/store";
+
+const getStartOfWeekLabel = (startOfWeek: EStartOfTheWeek) =>
+  START_OF_THE_WEEK_OPTIONS.find((option) => option.value === startOfWeek)?.label;
+
+export const StartOfWeekPreference = observer(() => {
+  // hooks
+  const { data: userProfile, updateUserProfile } = useUserProfile();
+
+  return (
+    <div className="grid grid-cols-12 gap-4 py-6 sm:gap-16">
+      <div className="col-span-12 sm:col-span-6">
+        <h4 className="text-lg font-semibold text-custom-text-100">First day of the week</h4>
+        <p className="text-sm text-custom-text-200">This will change how all calendars in your app look.</p>
+      </div>
+      <div className="col-span-12 sm:col-span-6">
+        <CustomSelect
+          value={userProfile.start_of_the_week}
+          label={getStartOfWeekLabel(userProfile.start_of_the_week)}
+          onChange={(val: number) => {
+            updateUserProfile({ start_of_the_week: val }).then(() => {
+              setToast({
+                type: TOAST_TYPE.SUCCESS,
+                title: "Success",
+                message: "First day of the week updated successfully",
+              });
+            });
+          }}
path: web/core/components/profile/start-of-week-preference.tsx
user: login: coderabbitai[bot]
body: @anmolsinghbhatia Thanks for addressing the error handling! It's a small change that improves the user experience significantly by providing feedback in both success and failure scenarios.


                
   /\     /\
  /  \___/  \
 /           \
/  ^       ^  \
|  O       O  |
 \  \     /  /
  \  \___/  /
   \_______/

---

<!-- This is an auto-generated comment: tweet message by coderabbit.ai -->

If you found this review helpful, would you consider giving us a shout-out on [X](https://twitter.com/intent/tweet?related=CodeRabbitAI&text=Improve%20UX%20by%20adding%20error%20handling%20to%20profile%20updates!%20Now%20users%20get%20clear%20feedback%20on%20failures%2C%20not%20just%20success.%20Boost%20your%20app%E2%80%99s%20reliability%20with%20%40coderabbitai%20%F0%9F%9B%A0%EF%B8%8F%E2%9C%A8%20Try%20it%20today!&url=https%3A%2F%2Fgithub.com%2Fmakeplane%2Fplane%2Fpull%2F7033%23discussion_r2079758836)?

Thank you for using CodeRabbit!

<!-- end of auto-generated comment: tweet message by coderabbit.ai -->




<!-- <agentComponentType>chat-answer</agentComponentType> -->

<!-- <rawResChunk><answer>@anmolsinghbhatia Thanks for addressing the error handling! It's a small change that improves the user experience significantly by providing feedback in both success and failure scenarios.


                
   /\     /\
  /  \___/  \
 /           \
/  ^       ^  \
|  O       O  |
 \  \     /  /
  \  \___/  /
   \_______/

---

&lt;!-- This is an auto-generated comment: tweet message by coderabbit.ai --&gt;

If you found this review helpful, would you consider giving us a shout-out on [X](https://twitter.com/intent/tweet?related=CodeRabbitAI&text=Improve%20UX%20by%20adding%20error%20handling%20to%20profile%20updates!%20Now%20users%20get%20clear%20feedback%20on%20failures%2C%20not%20just%20success.%20Boost%20your%20app%E2%80%99s%20reliability%20with%20%40coderabbitai%20%F0%9F%9B%A0%EF%B8%8F%E2%9C%A8%20Try%20it%20today!&url=https%3A%2F%2Fgithub.com%2Fmakeplane%2Fplane%2Fpull%2F7033%23discussion_r2079758836)?

Thank you for using CodeRabbit!

&lt;!-- end of auto-generated comment: tweet message by coderabbit.ai --&gt;

</answer></rawResChunk> -->

<!-- This is an auto-generated reply by CodeRabbit -->
created_at: 2025-05-09T08:07:39Z
author_association: CONTRIBUTOR
diff_hunk: @@ -74,7 +74,7 @@ const ProfileAppearancePage = observer(() => {
               <ThemeSwitch value={currentTheme} onChange={handleThemeChange} />
             </div>
           </div>
-          {userProfile?.theme?.theme === "custom" && <CustomThemeSelector applyThemeChange={applyThemeChange} />}
path: web/app/profile/appearance/page.tsx
user: login: gakshita
body: @anmolsinghbhatia I think this was removed by mistake
created_at: 2025-05-09T11:17:58Z
author_association: COLLABORATOR
diff_hunk: @@ -1,7 +1,23 @@
 // types
+import { EStartOfTheWeek } from "@plane/constants";
 import { WeekMonthDataType, ChartDataType, TGanttViews } from "../types";
 
 // constants
+export const generateWeeks = (startOfWeek: EStartOfTheWeek = EStartOfTheWeek.SUNDAY): WeekMonthDataType[] => {
+  const allDays: WeekMonthDataType[] = [
path: web/core/components/gantt-chart/data/index.ts
user: login: gakshita
body: This is same as weeks defined on line 21, you can use that instead
created_at: 2025-05-09T11:20:22Z
author_association: COLLABORATOR
diff_hunk: @@ -0,0 +1,55 @@
+"use client";
+
+import React from "react";
+import { observer } from "mobx-react";
+// plane imports
+import { EStartOfTheWeek, START_OF_THE_WEEK_OPTIONS } from "@plane/constants";
+import { CustomSelect, setToast, TOAST_TYPE } from "@plane/ui";
+// hooks
+import { useUserProfile } from "@/hooks/store";
+
+const getStartOfWeekLabel = (startOfWeek: EStartOfTheWeek) =>
+  START_OF_THE_WEEK_OPTIONS.find((option) => option.value === startOfWeek)?.label;
+
+export const StartOfWeekPreference = observer(() => {
+  // hooks
+  const { data: userProfile, updateUserProfile } = useUserProfile();
+
+  return (
+    <div className="grid grid-cols-12 gap-4 py-6 sm:gap-16">
+      <div className="col-span-12 sm:col-span-6">
+        <h4 className="text-lg font-semibold text-custom-text-100">First day of the week</h4>
path: web/core/components/profile/start-of-week-preference.tsx
user: login: gakshita
body: Translations please
created_at: 2025-05-09T11:23:55Z
author_association: COLLABORATOR
diff_hunk: @@ -65,20 +69,37 @@ export const CalendarWeekDays: React.FC<Props> = observer((props) => {
     canEditProperties,
     isEpic = false,
   } = props;
+  // hooks
+  const { data } = useUserProfile();
+  const startOfWeek = data?.start_of_the_week ?? EStartOfTheWeek.SUNDAY;
 
   const calendarLayout = issuesFilterStore?.issueFilters?.displayFilters?.calendar?.layout ?? "month";
   const showWeekends = issuesFilterStore?.issueFilters?.displayFilters?.calendar?.show_weekends ?? false;
 
   if (!week) return null;
 
+  const shouldShowDay = (dayDate: Date) => {
+    if (showWeekends) return true;
+    const day = dayDate.getDay();
+    return !(day === 0 || day === 6);
+  };
+
+  const sortedWeekDays = Object.values(week).sort((a, b) => {
path: web/core/components/issues/issue-layouts/calendar/week-days.tsx
user: login: gakshita
body: Use getOrderedDays() here
created_at: 2025-05-09T11:26:09Z
author_association: COLLABORATOR
diff_hunk: @@ -87,6 +90,8 @@ export const ChartViewRoot: FC<ChartViewRootProps> = observer((props) => {
     updateRenderView,
     updateAllBlocksOnChartChangeWhileDragging,
   } = useTimeLineChartStore();
+  const { data } = useUserProfile();
+  const startOfWeek = data?.start_of_the_week ?? EStartOfTheWeek.SUNDAY;
path: web/core/components/gantt-chart/chart/root.tsx
user: login: prateekshourya29
body: Can we handle this in the store using a computed function? Also, let’s define a `DEFAULT_START_OF_WEEK` constant to make it easier to reuse and update across the codebase.
created_at: 2025-05-12T11:30:21Z
author_association: MEMBER
diff_hunk: @@ -38,7 +39,12 @@ export interface IWeekBlock {
  * @param side
  * @returns
  */
-const generateWeekChart = (weekPayload: ChartDataType, side: null | "left" | "right", targetDate?: Date) => {
+const generateWeekChart = (
+  weekPayload: ChartDataType,
+  side: null | "left" | "right",
+  targetDate?: Date,
+  startOfWeek: EStartOfTheWeek = EStartOfTheWeek.SUNDAY
path: web/core/components/gantt-chart/views/week-view.ts
user: login: prateekshourya29
body: All of these can be replaces by that constant. 
created_at: 2025-05-12T11:30:52Z
author_association: MEMBER
diff_hunk: @@ -20,8 +29,8 @@ export const CalendarWeekHeader: React.FC<Props> = observer((props) => {
       {isLoading && (
         <div className="absolute h-[1.5px] w-3/4 animate-[bar-loader_2s_linear_infinite] bg-custom-primary-100" />
       )}
-      {Object.values(DAYS_LIST).map((day) => {
-        if (!showWeekends && (day.shortTitle === "Sat" || day.shortTitle === "Sun")) return null;
+      {orderedDays.map((day) => {
+        if (!showWeekends && (day.value === 0 || day.value === 6)) return null;
path: web/core/components/issues/issue-layouts/calendar/week-header.tsx
user: login: prateekshourya29
body: Can we compare this using `enum`
created_at: 2025-05-12T11:33:15Z
author_association: MEMBER
diff_hunk: @@ -20,8 +29,8 @@ export const CalendarWeekHeader: React.FC<Props> = observer((props) => {
       {isLoading && (
         <div className="absolute h-[1.5px] w-3/4 animate-[bar-loader_2s_linear_infinite] bg-custom-primary-100" />
       )}
-      {Object.values(DAYS_LIST).map((day) => {
-        if (!showWeekends && (day.shortTitle === "Sat" || day.shortTitle === "Sun")) return null;
+      {orderedDays.map((day) => {
+        if (!showWeekends && (day.value === 0 || day.value === 6)) return null;
path: web/core/components/issues/issue-layouts/calendar/week-header.tsx
user: login: anmolsinghbhatia
body: Done
created_at: 2025-05-12T11:40:03Z
author_association: COLLABORATOR
diff_hunk: @@ -87,6 +90,8 @@ export const ChartViewRoot: FC<ChartViewRootProps> = observer((props) => {
     updateRenderView,
     updateAllBlocksOnChartChangeWhileDragging,
   } = useTimeLineChartStore();
+  const { data } = useUserProfile();
+  const startOfWeek = data?.start_of_the_week ?? EStartOfTheWeek.SUNDAY;
path: web/core/components/gantt-chart/chart/root.tsx
user: login: anmolsinghbhatia
body: Resolved
created_at: 2025-05-12T11:43:00Z
author_association: COLLABORATOR

PR comments:
user: login: coderabbitai[bot]
created_at: 2025-05-08T13:37:42Z
body: <!-- This is an auto-generated comment: summarize by coderabbit.ai -->
<!-- walkthrough_start -->

## Walkthrough

The changes introduce a user-configurable "start of the week" setting across the application. This involves adding a new enum and options list, updating user profile types and stores, modifying calendar and Gantt chart components to respect the user's preference, and providing a UI for users to select their preferred week start day. Supporting utilities and constants are also updated or added.

## Changes

| File(s)                                                                                          | Change Summary |
|-------------------------------------------------------------------------------------------------|----------------|
| `packages/constants/src/profile.ts`                                                             | Added `EStartOfTheWeek` enum and `START_OF_THE_WEEK_OPTIONS` array for week day selection. |
| `packages/types/src/users.d.ts`                                                                 | Extended `TUserProfile` type with `start_of_the_week: EStartOfTheWeek`; minor formatting in `IUserProfileProjectSegregation`. |
| `packages/ui/src/calendar.tsx`                                                                  | Passed `weekStartsOn` prop to `DayPicker` component. |
| `web/app/profile/appearance/page.tsx`                                                           | Added unconditional rendering of `StartOfWeekPreference` component alongside existing theme selector. |
| `web/core/components/dropdowns/date.tsx`                                                       | Wrapped `DateDropdown` in MobX `observer`; injected user’s `start_of_the_week` into `Calendar` component as `weekStartsOn`. |
| `web/core/components/gantt-chart/chart/root.tsx`                                               | Passed user’s `start_of_the_week` to `generateChart` method in timeline view helper. |
| `web/core/components/gantt-chart/data/index.ts`                                                | Added `generateWeeks` function to produce reordered week day arrays starting from any day. |
| `web/core/components/gantt-chart/views/week-view.ts`                                           | Updated `generateWeekChart`, `getWeeksBetweenTwoDates`, and `populateDaysForWeek` to accept `startOfWeek` parameter and align weeks accordingly. |
| `web/core/components/issues/issue-layouts/calendar/week-days.tsx`                              | Reordered and filtered week days based on user’s `start_of_the_week` and `showWeekends` flag; used `cn` utility for class names. |
| `web/core/components/issues/issue-layouts/calendar/week-header.tsx`                            | Dynamically ordered week days based on user profile; updated weekend filtering to use numeric day values. |
| `web/core/components/profile/index.ts`                                                         | Exported new `start-of-week-preference` component. |
| `web/core/components/profile/start-of-week-preference.tsx`                                     | Added new MobX-observed `StartOfWeekPreference` component with dropdown to select week start day and update profile. |
| `web/core/constants/calendar.ts`                                                               | Extended `DAYS_LIST` entries with `value: EStartOfTheWeek` property. |
| `web/core/store/issue/issue_calendar_view.store.ts`                                            | Sorted weeks in `allWeeksOfActiveMonth` getter to ensure consistent ascending order. |
| `web/core/store/user/profile.store.ts`                                                         | Added `start_of_the_week` property with default value `EStartOfTheWeek.SUNDAY` to user profile store. |
| `web/helpers/calendar.helper.ts`                                                               | Added generic `getOrderedDays` utility to reorder arrays by a start day index. |
| `space/core/store/profile.store.ts`                                                            | Added `start_of_the_week` property with default value `EStartOfTheWeek.SUNDAY` to space profile store. |

## Sequence Diagram(s)

```mermaid
sequenceDiagram
    participant User
    participant StartOfWeekPreference
    participant ProfileStore
    participant CalendarComponent

    User->>StartOfWeekPreference: Selects new start day
    StartOfWeekPreference->>ProfileStore: updateUserProfile(start_of_the_week)
    ProfileStore-->>StartOfWeekPreference: Update successful
    StartOfWeekPreference->>User: Show success toast
    ProfileStore-->>CalendarComponent: start_of_the_week changed (reactive)
    CalendarComponent->>CalendarComponent: Re-render with new week start
```

## Poem

> 🗓️  
> A bunny hopped through days anew,  
> Now Sunday, Monday—start as you choose!  
> With enums and options, the week’s in your paw,  
> The calendar listens, in reverent awe.  
> Profile updated, your week’s off to a hop,  
> Thanks to fresh code—no reason to stop!  
> 🌈

<!-- walkthrough_end -->

<!-- announcements_start -->

> [!TIP]
> <details>
> <summary>⚡️ Faster reviews with caching</summary>
> 
> - CodeRabbit now supports caching for code and dependencies, helping speed up reviews. This means quicker feedback, reduced wait times, and a smoother review experience overall. Cached data is encrypted and stored securely. This feature will be automatically enabled for all accounts on May 16th. To opt out, configure `Review - Disable Cache` at either the organization or repository level. If you prefer to disable all data retention across your organization, simply turn off the `Data Retention` setting under your Organization Settings.
> 
> Enjoy the performance boost—your workflow just got faster.
> 
> </details>

<!-- announcements_end -->

---

<details>
<summary>📜 Recent review details</summary>

**Configuration used: CodeRabbit UI**
**Review profile: CHILL**
**Plan: Pro**

<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between 6b8bd0945e3b4d1d9296bcc377773150ab1c5422 and 7dfa2a3813a0d10f9e56d92dadc89df38efad6de.

</details>

<details>
<summary>📒 Files selected for processing (5)</summary>

* `web/core/components/dropdowns/date.tsx` (4 hunks)
* `web/core/components/gantt-chart/chart/root.tsx` (3 hunks)
* `web/core/components/issues/issue-layouts/calendar/week-days.tsx` (2 hunks)
* `web/core/components/issues/issue-layouts/calendar/week-header.tsx` (3 hunks)
* `web/helpers/calendar.helper.ts` (2 hunks)

</details>

<details>
<summary>🚧 Files skipped from review as they are similar to previous changes (5)</summary>

* web/core/components/gantt-chart/chart/root.tsx
* web/core/components/dropdowns/date.tsx
* web/core/components/issues/issue-layouts/calendar/week-days.tsx
* web/core/components/issues/issue-layouts/calendar/week-header.tsx
* web/helpers/calendar.helper.ts

</details>

</details>
<!-- internal state start -->


<!-- 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= -->

<!-- internal state end -->
<!-- finishing_touch_checkbox_start -->

<details open="true">
<summary>✨ Finishing Touches</summary>

- [ ] <!-- {"checkboxId": "7962f53c-55bc-4827-bfbf-6a18da830691"} --> 📝 Generate Docstrings

</details>

<!-- finishing_touch_checkbox_end -->
<!-- tips_start -->

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

<details>
<summary>❤️ Share</summary>

- [X](https://twitter.com/intent/tweet?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A&url=https%3A//coderabbit.ai)
- [Mastodon](https://mastodon.social/share?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A%20https%3A%2F%2Fcoderabbit.ai)
- [Reddit](https://www.reddit.com/submit?title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&text=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code.%20Check%20it%20out%3A%20https%3A//coderabbit.ai)
- [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fcoderabbit.ai&mini=true&title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&summary=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code)

</details>

<details>
<summary>🪧 Tips</summary>

### Chat

There are 3 ways to chat with [CodeRabbit](https://coderabbit.ai?utm_source=oss&utm_medium=github&utm_campaign=makeplane/plane&utm_content=7033):

- Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  - `I pushed a fix in commit <commit_id>, please review it.`
  - `Generate unit testing code for this file.`
  - `Open a follow-up GitHub issue for this discussion.`
- Files and specific lines of code (under the "Files changed" tab): Tag `@coderabbitai` in a new review comment at the desired location with your query. Examples:
  - `@coderabbitai generate unit testing code for this file.`
  -	`@coderabbitai modularize this function.`
- PR comments: Tag `@coderabbitai` in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  - `@coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.`
  - `@coderabbitai read src/utils.ts and generate unit testing code.`
  - `@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.`
  - `@coderabbitai help me debug CodeRabbit configuration file.`

### Support

Need help? Create a ticket on our [support page](https://www.coderabbit.ai/contact-us/support) for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

### CodeRabbit Commands (Invoked using PR comments)

- `@coderabbitai pause` to pause the reviews on a PR.
- `@coderabbitai resume` to resume the paused reviews.
- `@coderabbitai review` to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
- `@coderabbitai full review` to do a full review from scratch and review all the files again.
- `@coderabbitai summary` to regenerate the summary of the PR.
- `@coderabbitai generate docstrings` to [generate docstrings](https://docs.coderabbit.ai/finishing-touches/docstrings) for this PR.
- `@coderabbitai generate sequence diagram` to generate a sequence diagram of the changes in this PR.
- `@coderabbitai resolve` resolve all the CodeRabbit review comments.
- `@coderabbitai configuration` to show the current CodeRabbit configuration for the repository.
- `@coderabbitai help` to get help.

### Other keywords and placeholders

- Add `@coderabbitai ignore` anywhere in the PR description to prevent this PR from being reviewed.
- Add `@coderabbitai summary` to generate the high-level summary at a specific location in the PR description.
- Add `@coderabbitai` anywhere in the PR title to generate the title automatically.

### CodeRabbit Configuration File (`.coderabbit.yaml`)

- You can programmatically configure CodeRabbit by adding a `.coderabbit.yaml` file to the root of your repository.
- Please see the [configuration documentation](https://docs.coderabbit.ai/guides/configure-coderabbit) for more information.
- If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: `# yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json`

### Documentation and Community

- Visit our [Documentation](https://docs.coderabbit.ai) for detailed information on how to use CodeRabbit.
- Join our [Discord Community](http://discord.gg/coderabbit) to get help, request features, and share feedback.
- Follow us on [X/Twitter](https://twitter.com/coderabbitai) for updates and announcements.

</details>

<!-- tips_end -->
author_association: CONTRIBUTOR
user: login: makeplane[bot]
created_at: 2025-05-08T13:37:47Z
body: Pull Request Linked with Plane Work Items

- [WEB-3523] [Allow users to choose the settings to adjust when the week starts](https://app.plane.so/plane/projects/02c3e1d5-d7e2-401d-a773-45ecba45d745/issues/40fbd63a-40c6-4f4c-9343-1160eed33d54)


Comment Automatically Generated by [Plane](https://plane.so)

author_association: NONE