Merge pull request #418 from makeplane/sync/ce-ee

sync: community changes

web/app/profile/activity/page.tsx

@@ -6,9 +6,12 @@ import { observer } from "mobx-react";
 import { Button } from "@plane/ui";
 // components
 import { PageHead } from "@/components/core";
-import { SidebarHamburgerToggle } from "@/components/core/sidebar";
 import { EmptyState } from "@/components/empty-state";
-import { ProfileActivityListPage } from "@/components/profile";
+import {
+  ProfileActivityListPage,
+  ProfileSettingContentHeader,
+  ProfileSettingContentWrapper,
+} from "@/components/profile";
 // constants
 import { EmptyStateType } from "@/constants/empty-state";
 
@@ -51,22 +54,17 @@ const ProfileActivityPage = observer(() => {
   return (
     <>
       <PageHead title="Profile - Activity" />
-      <section className="mx-auto mt-5 md:mt-16 h-full w-full flex flex-col overflow-hidden px-5 md:px-8 pb-8 lg:w-3/5">
-        <div className="flex items-center border-b border-custom-border-100 gap-4 pb-3.5">
-          <SidebarHamburgerToggle />
-          <h3 className="text-xl font-medium">Activity</h3>
-        </div>
-        <div className="vertical-scrollbar scrollbar-md flex h-full w-full flex-col overflow-y-auto">
-          {activityPages}
-          {isLoadMoreVisible && (
-            <div className="flex w-full items-center justify-center text-xs">
-              <Button variant="accent-primary" size="sm" onClick={handleLoadMore}>
-                Load more
-              </Button>
-            </div>
-          )}
-        </div>
-      </section>
+      <ProfileSettingContentWrapper>
+        <ProfileSettingContentHeader title="Activity" />
+        {activityPages}
+        {isLoadMoreVisible && (
+          <div className="flex w-full items-center justify-center text-xs">
+            <Button variant="accent-primary" size="sm" onClick={handleLoadMore}>
+              Load more
+            </Button>
+          </div>
+        )}
+      </ProfileSettingContentWrapper>
     </>
   );
 });

web/app/profile/appearance/page.tsx

@@ -7,7 +7,8 @@ import { useTheme } from "next-themes";
 import { setPromiseToast } from "@plane/ui";
 // components
 import { LogoSpinner } from "@/components/common";
-import { CustomThemeSelector, ThemeSwitch, PageHead, SidebarHamburgerToggle } from "@/components/core";
+import { CustomThemeSelector, ThemeSwitch, PageHead } from "@/components/core";
+import { ProfileSettingContentHeader, ProfileSettingContentWrapper } from "@/components/profile";
 // constants
 import { I_THEME_OPTION, THEME_OPTIONS } from "@/constants/themes";
 // hooks
@@ -50,11 +51,8 @@ const ProfileAppearancePage = observer(() => {
     <>
       <PageHead title="Profile - Theme Prefrence" />
       {userProfile ? (
-        <div className="mx-auto mt-10 h-full w-full overflow-y-auto md:px-6 px-4 pb-8 md:mt-14 lg:px-20 vertical-scrollbar scrollbar-md">
-          <div className="flex items-center border-b border-custom-border-100 gap-4 pb-3.5">
-            <SidebarHamburgerToggle />
-            <h3 className="text-xl font-medium">Appearance</h3>
-          </div>
+        <ProfileSettingContentWrapper>
+          <ProfileSettingContentHeader title="Appearance" />
           <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">Theme</h4>
@@ -65,7 +63,7 @@ const ProfileAppearancePage = observer(() => {
             </div>
           </div>
           {userProfile?.theme?.theme === "custom" && <CustomThemeSelector />}
-        </div>
+        </ProfileSettingContentWrapper>
       ) : (
         <div className="grid h-full w-full place-items-center px-4 sm:px-0">
           <LogoSpinner />
@@ -75,4 +73,4 @@ const ProfileAppearancePage = observer(() => {
   );
 });
 
-export default ProfileAppearancePage;
+export default ProfileAppearancePage;

web/app/profile/notifications/page.tsx

@@ -1,17 +1,14 @@
 "use client";
 
 import useSWR from "swr";
-// layouts
-import { PageHead, SidebarHamburgerToggle } from "@/components/core";
+// components
+import { PageHead } from "@/components/core";
+import { ProfileSettingContentHeader, ProfileSettingContentWrapper } from "@/components/profile";
 import { EmailNotificationForm } from "@/components/profile/notification";
 import { EmailSettingsLoader } from "@/components/ui";
-// ui
-// components
 // services
 import { UserService } from "@/services/user.service";
-// type
 
-// services
 const userService = new UserService();
 
 export default function ProfileNotificationPage() {
@@ -27,18 +24,13 @@ export default function ProfileNotificationPage() {
   return (
     <>
       <PageHead title="Profile - Email Preference" />
-      <div className="mx-auto mt-8 h-full w-full md:px-6 px-4 lg:px-20 pb-8 vertical-scrollbar scrollbar-md">
-        <div className="flex gap-4 items-start pt-4 sm:pt-6 mb-2 pb-6 border-b border-custom-border-100">
-          <SidebarHamburgerToggle />
-          <div className="grow">
-            <div className="pb-1 text-xl font-medium text-custom-text-100">Email notifications</div>
-            <div className="text-sm font-normal text-custom-text-300">
-              Stay in the loop on Issues you are subscribed to. Enable this to get notified.
-            </div>
-          </div>
-        </div>
+      <ProfileSettingContentWrapper>
+        <ProfileSettingContentHeader
+          title="Email notifications"
+          description="Stay in the loop on Issues you are subscribed to. Enable this to get notified."
+        />
         <EmailNotificationForm data={data} />
-      </div>
+      </ProfileSettingContentWrapper>
     </>
   );
 }

web/app/profile/page.tsx

@@ -17,8 +17,8 @@ import { ImagePickerPopover, UserImageUploadModal, PageHead } from "@/components
 // ui
 // icons
 // components
-import { SidebarHamburgerToggle } from "@/components/core/sidebar";
 // constants
+import { ProfileSettingContentWrapper } from "@/components/profile";
 import { TIME_ZONES } from "@/constants/timezones";
 import { USER_ROLES } from "@/constants/workspace";
 // hooks
@@ -137,322 +137,309 @@ const ProfileSettingsPage = observer(() => {
   return (
     <>
       <PageHead title="Profile - General Settings" />
-      <div className="flex h-full flex-col">
-        <div className="block flex-shrink-0 border-b border-custom-border-200 p-4 md:hidden">
-          <SidebarHamburgerToggle />
-        </div>
-        <div className="overflow-hidden">
-          <Controller
-            control={control}
-            name="avatar"
-            render={({ field: { onChange, value } }) => (
-              <UserImageUploadModal
-                isOpen={isImageUploadModalOpen}
-                onClose={() => setIsImageUploadModalOpen(false)}
-                isRemoving={isRemoving}
-                handleDelete={() => handleDelete(currentUser?.avatar, true)}
-                onSuccess={(url) => {
-                  onChange(url);
-                  handleSubmit(onSubmit)();
-                  setIsImageUploadModalOpen(false);
-                }}
-                value={value && value.trim() !== "" ? value : null}
+      <ProfileSettingContentWrapper>
+        <Controller
+          control={control}
+          name="avatar"
+          render={({ field: { onChange, value } }) => (
+            <UserImageUploadModal
+              isOpen={isImageUploadModalOpen}
+              onClose={() => setIsImageUploadModalOpen(false)}
+              isRemoving={isRemoving}
+              handleDelete={() => handleDelete(currentUser?.avatar, true)}
+              onSuccess={(url) => {
+                onChange(url);
+                handleSubmit(onSubmit)();
+                setIsImageUploadModalOpen(false);
+              }}
+              value={value && value.trim() !== "" ? value : null}
+            />
+          )}
+        />
+        <DeactivateAccountModal isOpen={deactivateAccountModal} onClose={() => setDeactivateAccountModal(false)} />
+        <form onSubmit={handleSubmit(onSubmit)}>
+          <div className="flex w-full flex-col gap-8">
+            <div className="relative h-44 w-full">
+              <img
+                src={watch("cover_image") ?? "https://images.unsplash.com/photo-1506383796573-caf02b4a79ab"}
+                className="h-44 w-full rounded-lg object-cover"
+                alt={currentUser?.first_name ?? "Cover image"}
               />
-            )}
-          />
-          <DeactivateAccountModal isOpen={deactivateAccountModal} onClose={() => setDeactivateAccountModal(false)} />
-          <div className="vertical-scrollbar scrollbar-md mx-auto flex h-full w-full flex-col space-y-10 overflow-y-auto px-4 md:px-8 pb-8 pt-10 md:pt-16 lg:w-3/5">
-            <form onSubmit={handleSubmit(onSubmit)}>
-              <div className="flex w-full flex-col gap-8">
-                <div className="relative h-44 w-full">
-                  <img
-                    src={watch("cover_image") ?? "https://images.unsplash.com/photo-1506383796573-caf02b4a79ab"}
-                    className="h-44 w-full rounded-lg object-cover"
-                    alt={currentUser?.first_name ?? "Cover image"}
-                  />
-                  <div className="absolute -bottom-6 left-8 flex items-end justify-between">
-                    <div className="flex gap-3">
-                      <div className="flex h-16 w-16 items-center justify-center rounded-lg bg-custom-background-90">
-                        <button type="button" onClick={() => setIsImageUploadModalOpen(true)}>
-                          {!watch("avatar") || watch("avatar") === "" ? (
-                            <div className="h-16 w-16 rounded-md bg-custom-background-80 p-2">
-                              <CircleUserRound className="h-full w-full text-custom-text-200" />
-                            </div>
-                          ) : (
-                            <div className="relative h-16 w-16 overflow-hidden">
-                              <img
-                                src={watch("avatar") || undefined}
-                                className="absolute left-0 top-0 h-full w-full rounded-lg object-cover"
-                                onClick={() => setIsImageUploadModalOpen(true)}
-                                alt={currentUser?.display_name}
-                                role="button"
-                              />
-                            </div>
-                          )}
-                        </button>
-                      </div>
-                    </div>
-                  </div>
-
-                  <div className="absolute bottom-3 right-3 flex">
-                    <Controller
-                      control={control}
-                      name="cover_image"
-                      render={({ field: { value, onChange } }) => (
-                        <ImagePickerPopover
-                          label={"Change cover"}
-                          onChange={(imageUrl) => onChange(imageUrl)}
-                          control={control}
-                          value={value ?? "https://images.unsplash.com/photo-1506383796573-caf02b4a79ab"}
-                          isProfileCover
-                        />
+              <div className="absolute -bottom-6 left-8 flex items-end justify-between">
+                <div className="flex gap-3">
+                  <div className="flex h-16 w-16 items-center justify-center rounded-lg bg-custom-background-90">
+                    <button type="button" onClick={() => setIsImageUploadModalOpen(true)}>
+                      {!watch("avatar") || watch("avatar") === "" ? (
+                        <div className="h-16 w-16 rounded-md bg-custom-background-80 p-2">
+                          <CircleUserRound className="h-full w-full text-custom-text-200" />
+                        </div>
+                      ) : (
+                        <div className="relative h-16 w-16 overflow-hidden">
+                          <img
+                            src={watch("avatar") || undefined}
+                            className="absolute left-0 top-0 h-full w-full rounded-lg object-cover"
+                            onClick={() => setIsImageUploadModalOpen(true)}
+                            alt={currentUser?.display_name}
+                            role="button"
+                          />
+                        </div>
                       )}
-                    />
+                    </button>
                   </div>
                 </div>
+              </div>
 
-                <div className="item-center mt-4 flex justify-between md:px-8">
-                  <div className="flex flex-col">
-                    <div className="item-center flex text-lg font-semibold text-custom-text-100">
-                      <span>{`${watch("first_name")} ${watch("last_name")}`}</span>
-                    </div>
-                    <span className="text-sm tracking-tight">{watch("email")}</span>
-                  </div>
+              <div className="absolute bottom-3 right-3 flex">
+                <Controller
+                  control={control}
+                  name="cover_image"
+                  render={({ field: { value, onChange } }) => (
+                    <ImagePickerPopover
+                      label={"Change cover"}
+                      onChange={(imageUrl) => onChange(imageUrl)}
+                      control={control}
+                      value={value ?? "https://images.unsplash.com/photo-1506383796573-caf02b4a79ab"}
+                      isProfileCover
+                    />
+                  )}
+                />
+              </div>
+            </div>
 
-                  {/* <Link href={`/profile/${currentUser.id}`}>
+            <div className="item-center mt-4 flex justify-between md:px-8">
+              <div className="flex flex-col">
+                <div className="item-center flex text-lg font-semibold text-custom-text-100">
+                  <span>{`${watch("first_name")} ${watch("last_name")}`}</span>
+                </div>
+                <span className="text-sm tracking-tight">{watch("email")}</span>
+              </div>
+
+              {/* <Link href={`/profile/${currentUser.id}`}>
               <span className="flex item-center gap-1 text-sm text-custom-primary-100 underline font-medium">
                 <ExternalLink className="h-4 w-4" />
                 Activity Overview
               </span>
             </Link> */}
-                </div>
+            </div>
 
-                <div className="grid grid-cols-1 gap-6 md:px-8 lg:grid-cols-2 2xl:grid-cols-3">
-                  <div className="flex flex-col gap-1">
-                    <h4 className="text-sm">
-                      First name<span className="text-red-500">*</span>
-                    </h4>
-                    <Controller
-                      control={control}
+            <div className="grid grid-cols-1 gap-6 md:px-8 lg:grid-cols-2 2xl:grid-cols-3">
+              <div className="flex flex-col gap-1">
+                <h4 className="text-sm">
+                  First name<span className="text-red-500">*</span>
+                </h4>
+                <Controller
+                  control={control}
+                  name="first_name"
+                  rules={{
+                    required: "First name is required.",
+                  }}
+                  render={({ field: { value, onChange, ref } }) => (
+                    <Input
+                      id="first_name"
                       name="first_name"
-                      rules={{
-                        required: "First name is required.",
-                      }}
-                      render={({ field: { value, onChange, ref } }) => (
-                        <Input
-                          id="first_name"
-                          name="first_name"
-                          type="text"
-                          value={value}
-                          onChange={onChange}
-                          ref={ref}
-                          hasError={Boolean(errors.first_name)}
-                          placeholder="Enter your first name"
-                          className={`w-full rounded-md ${errors.first_name ? "border-red-500" : ""}`}
-                          maxLength={24}
-                        />
-                      )}
+                      type="text"
+                      value={value}
+                      onChange={onChange}
+                      ref={ref}
+                      hasError={Boolean(errors.first_name)}
+                      placeholder="Enter your first name"
+                      className={`w-full rounded-md ${errors.first_name ? "border-red-500" : ""}`}
+                      maxLength={24}
                     />
-                    {errors.first_name && <span className="text-xs text-red-500">Please enter first name</span>}
-                  </div>
-
-                  <div className="flex flex-col gap-1">
-                    <h4 className="text-sm">Last name</h4>
-
-                    <Controller
-                      control={control}
-                      name="last_name"
-                      render={({ field: { value, onChange, ref } }) => (
-                        <Input
-                          id="last_name"
-                          name="last_name"
-                          type="text"
-                          value={value}
-                          onChange={onChange}
-                          ref={ref}
-                          hasError={Boolean(errors.last_name)}
-                          placeholder="Enter your last name"
-                          className="w-full rounded-md"
-                          maxLength={24}
-                        />
-                      )}
-                    />
-                  </div>
-
-                  <div className="flex flex-col gap-1">
-                    <h4 className="text-sm">
-                      Email<span className="text-red-500">*</span>
-                    </h4>
-                    <Controller
-                      control={control}
-                      name="email"
-                      rules={{
-                        required: "Email is required.",
-                      }}
-                      render={({ field: { value, ref } }) => (
-                        <Input
-                          id="email"
-                          name="email"
-                          type="email"
-                          value={value}
-                          ref={ref}
-                          hasError={Boolean(errors.email)}
-                          placeholder="Enter your email"
-                          className={`w-full cursor-not-allowed rounded-md !bg-custom-background-80 ${
-                            errors.email ? "border-red-500" : ""
-                          }`}
-                          disabled
-                        />
-                      )}
-                    />
-                  </div>
-
-                  <div className="flex flex-col gap-1">
-                    <h4 className="text-sm">
-                      Role<span className="text-red-500">*</span>
-                    </h4>
-                    <Controller
-                      name="role"
-                      control={control}
-                      rules={{ required: "Role is required." }}
-                      render={({ field: { value, onChange } }) => (
-                        <CustomSelect
-                          value={value}
-                          onChange={onChange}
-                          label={value ? value.toString() : "Select your role"}
-                          buttonClassName={errors.role ? "border-red-500" : "border-none"}
-                          className="rounded-md border-[0.5px] !border-custom-border-200"
-                          optionsClassName="w-full"
-                          input
-                        >
-                          {USER_ROLES.map((item) => (
-                            <CustomSelect.Option key={item.value} value={item.value}>
-                              {item.label}
-                            </CustomSelect.Option>
-                          ))}
-                        </CustomSelect>
-                      )}
-                    />
-                    {errors.role && <span className="text-xs text-red-500">Please select a role</span>}
-                  </div>
-
-                  <div className="flex flex-col gap-1">
-                    <h4 className="text-sm">
-                      Display name<span className="text-red-500">*</span>
-                    </h4>
-                    <Controller
-                      control={control}
-                      name="display_name"
-                      rules={{
-                        required: "Display name is required.",
-                        validate: (value) => {
-                          if (value.trim().length < 1) return "Display name can't be empty.";
-
-                          if (value.split("  ").length > 1) return "Display name can't have two consecutive spaces.";
-
-                          if (value.replace(/\s/g, "").length < 1)
-                            return "Display name must be at least 1 characters long.";
-
-                          if (value.replace(/\s/g, "").length > 20)
-                            return "Display name must be less than 20 characters long.";
-
-                          return true;
-                        },
-                      }}
-                      render={({ field: { value, onChange, ref } }) => (
-                        <Input
-                          id="display_name"
-                          name="display_name"
-                          type="text"
-                          value={value}
-                          onChange={onChange}
-                          ref={ref}
-                          hasError={Boolean(errors?.display_name)}
-                          placeholder="Enter your display name"
-                          className={`w-full ${errors?.display_name ? "border-red-500" : ""}`}
-                          maxLength={24}
-                        />
-                      )}
-                    />
-                    {errors?.display_name && <span className="text-xs text-red-500">Please enter display name</span>}
-                  </div>
-
-                  <div className="flex flex-col gap-1">
-                    <h4 className="text-sm">
-                      Timezone<span className="text-red-500">*</span>
-                    </h4>
-
-                    <Controller
-                      name="user_timezone"
-                      control={control}
-                      rules={{ required: "Time zone is required" }}
-                      render={({ field: { value, onChange } }) => (
-                        <CustomSearchSelect
-                          value={value}
-                          label={
-                            value ? TIME_ZONES.find((t) => t.value === value)?.label ?? value : "Select a timezone"
-                          }
-                          options={timeZoneOptions}
-                          onChange={onChange}
-                          optionsClassName="w-full"
-                          buttonClassName={errors.user_timezone ? "border-red-500" : "border-none"}
-                          className="rounded-md border-[0.5px] !border-custom-border-200"
-                          input
-                        />
-                      )}
-                    />
-                    {errors.role && <span className="text-xs text-red-500">Please select a time zone</span>}
-                  </div>
-
-                  <div className="flex items-center justify-between py-2">
-                    <Button variant="primary" type="submit" loading={isLoading}>
-                      {isLoading ? "Saving..." : "Save changes"}
-                    </Button>
-                  </div>
-                </div>
+                  )}
+                />
+                {errors.first_name && <span className="text-xs text-red-500">Please enter first name</span>}
               </div>
-            </form>
-            <Disclosure as="div" className="border-t border-custom-border-100 md:px-8">
-              {({ open }) => (
-                <>
-                  <Disclosure.Button
-                    as="button"
-                    type="button"
-                    className="flex w-full items-center justify-between py-4"
-                  >
-                    <span className="text-lg tracking-tight">Deactivate account</span>
-                    <ChevronDown className={`h-5 w-5 transition-all ${open ? "rotate-180" : ""}`} />
-                  </Disclosure.Button>
-                  <Transition
-                    show={open}
-                    enter="transition duration-100 ease-out"
-                    enterFrom="transform opacity-0"
-                    enterTo="transform opacity-100"
-                    leave="transition duration-75 ease-out"
-                    leaveFrom="transform opacity-100"
-                    leaveTo="transform opacity-0"
-                  >
-                    <Disclosure.Panel>
-                      <div className="flex flex-col gap-8">
-                        <span className="text-sm tracking-tight">
-                          The danger zone of the profile page is a critical area that requires careful consideration and
-                          attention. When deactivating an account, all of the data and resources within that account
-                          will be permanently removed and cannot be recovered.
-                        </span>
-                        <div>
-                          <Button variant="danger" onClick={() => setDeactivateAccountModal(true)}>
-                            Deactivate account
-                          </Button>
-                        </div>
-                      </div>
-                    </Disclosure.Panel>
-                  </Transition>
-                </>
-              )}
-            </Disclosure>
+
+              <div className="flex flex-col gap-1">
+                <h4 className="text-sm">Last name</h4>
+
+                <Controller
+                  control={control}
+                  name="last_name"
+                  render={({ field: { value, onChange, ref } }) => (
+                    <Input
+                      id="last_name"
+                      name="last_name"
+                      type="text"
+                      value={value}
+                      onChange={onChange}
+                      ref={ref}
+                      hasError={Boolean(errors.last_name)}
+                      placeholder="Enter your last name"
+                      className="w-full rounded-md"
+                      maxLength={24}
+                    />
+                  )}
+                />
+              </div>
+
+              <div className="flex flex-col gap-1">
+                <h4 className="text-sm">
+                  Email<span className="text-red-500">*</span>
+                </h4>
+                <Controller
+                  control={control}
+                  name="email"
+                  rules={{
+                    required: "Email is required.",
+                  }}
+                  render={({ field: { value, ref } }) => (
+                    <Input
+                      id="email"
+                      name="email"
+                      type="email"
+                      value={value}
+                      ref={ref}
+                      hasError={Boolean(errors.email)}
+                      placeholder="Enter your email"
+                      className={`w-full cursor-not-allowed rounded-md !bg-custom-background-80 ${
+                        errors.email ? "border-red-500" : ""
+                      }`}
+                      disabled
+                    />
+                  )}
+                />
+              </div>
+
+              <div className="flex flex-col gap-1">
+                <h4 className="text-sm">
+                  Role<span className="text-red-500">*</span>
+                </h4>
+                <Controller
+                  name="role"
+                  control={control}
+                  rules={{ required: "Role is required." }}
+                  render={({ field: { value, onChange } }) => (
+                    <CustomSelect
+                      value={value}
+                      onChange={onChange}
+                      label={value ? value.toString() : "Select your role"}
+                      buttonClassName={errors.role ? "border-red-500" : "border-none"}
+                      className="rounded-md border-[0.5px] !border-custom-border-200"
+                      optionsClassName="w-full"
+                      input
+                    >
+                      {USER_ROLES.map((item) => (
+                        <CustomSelect.Option key={item.value} value={item.value}>
+                          {item.label}
+                        </CustomSelect.Option>
+                      ))}
+                    </CustomSelect>
+                  )}
+                />
+                {errors.role && <span className="text-xs text-red-500">Please select a role</span>}
+              </div>
+
+              <div className="flex flex-col gap-1">
+                <h4 className="text-sm">
+                  Display name<span className="text-red-500">*</span>
+                </h4>
+                <Controller
+                  control={control}
+                  name="display_name"
+                  rules={{
+                    required: "Display name is required.",
+                    validate: (value) => {
+                      if (value.trim().length < 1) return "Display name can't be empty.";
+
+                      if (value.split("  ").length > 1) return "Display name can't have two consecutive spaces.";
+
+                      if (value.replace(/\s/g, "").length < 1)
+                        return "Display name must be at least 1 characters long.";
+
+                      if (value.replace(/\s/g, "").length > 20)
+                        return "Display name must be less than 20 characters long.";
+
+                      return true;
+                    },
+                  }}
+                  render={({ field: { value, onChange, ref } }) => (
+                    <Input
+                      id="display_name"
+                      name="display_name"
+                      type="text"
+                      value={value}
+                      onChange={onChange}
+                      ref={ref}
+                      hasError={Boolean(errors?.display_name)}
+                      placeholder="Enter your display name"
+                      className={`w-full ${errors?.display_name ? "border-red-500" : ""}`}
+                      maxLength={24}
+                    />
+                  )}
+                />
+                {errors?.display_name && <span className="text-xs text-red-500">Please enter display name</span>}
+              </div>
+
+              <div className="flex flex-col gap-1">
+                <h4 className="text-sm">
+                  Timezone<span className="text-red-500">*</span>
+                </h4>
+
+                <Controller
+                  name="user_timezone"
+                  control={control}
+                  rules={{ required: "Time zone is required" }}
+                  render={({ field: { value, onChange } }) => (
+                    <CustomSearchSelect
+                      value={value}
+                      label={value ? TIME_ZONES.find((t) => t.value === value)?.label ?? value : "Select a timezone"}
+                      options={timeZoneOptions}
+                      onChange={onChange}
+                      optionsClassName="w-full"
+                      buttonClassName={errors.user_timezone ? "border-red-500" : "border-none"}
+                      className="rounded-md border-[0.5px] !border-custom-border-200"
+                      input
+                    />
+                  )}
+                />
+                {errors.role && <span className="text-xs text-red-500">Please select a time zone</span>}
+              </div>
+
+              <div className="flex items-center justify-between py-2">
+                <Button variant="primary" type="submit" loading={isLoading}>
+                  {isLoading ? "Saving..." : "Save changes"}
+                </Button>
+              </div>
+            </div>
           </div>
-        </div>
-      </div>
+        </form>
+        <Disclosure as="div" className="border-t border-custom-border-100 md:px-8">
+          {({ open }) => (
+            <>
+              <Disclosure.Button as="button" type="button" className="flex w-full items-center justify-between py-4">
+                <span className="text-lg tracking-tight">Deactivate account</span>
+                <ChevronDown className={`h-5 w-5 transition-all ${open ? "rotate-180" : ""}`} />
+              </Disclosure.Button>
+              <Transition
+                show={open}
+                enter="transition duration-100 ease-out"
+                enterFrom="transform opacity-0"
+                enterTo="transform opacity-100"
+                leave="transition duration-75 ease-out"
+                leaveFrom="transform opacity-100"
+                leaveTo="transform opacity-0"
+              >
+                <Disclosure.Panel>
+                  <div className="flex flex-col gap-8">
+                    <span className="text-sm tracking-tight">
+                      The danger zone of the profile page is a critical area that requires careful consideration and
+                      attention. When deactivating an account, all of the data and resources within that account will be
+                      permanently removed and cannot be recovered.
+                    </span>
+                    <div>
+                      <Button variant="danger" onClick={() => setDeactivateAccountModal(true)}>
+                        Deactivate account
+                      </Button>
+                    </div>
+                  </div>
+                </Disclosure.Panel>
+              </Transition>
+            </>
+          )}
+        </Disclosure>
+      </ProfileSettingContentWrapper>
     </>
   );
 });

web/app/profile/security/page.tsx

@@ -11,7 +11,7 @@ import { Button, Input, TOAST_TYPE, setToast } from "@plane/ui";
 import { PasswordStrengthMeter } from "@/components/account";
 import { LogoSpinner } from "@/components/common";
 import { PageHead } from "@/components/core";
-import { SidebarHamburgerToggle } from "@/components/core/sidebar";
+import { ProfileSettingContentHeader, ProfileSettingContentWrapper } from "@/components/profile";
 // helpers
 import { authErrorHandler } from "@/helpers/authentication.helper";
 import { getPasswordStrength } from "@/helpers/password.helper";
@@ -130,15 +130,9 @@ const SecurityPage = observer(() => {
   return (
     <>
       <PageHead title="Profile - Change Password" />
-      <div className="flex h-full flex-col">
-        <div className="block flex-shrink-0 border-b border-custom-border-200 p-4 md:hidden">
-          <SidebarHamburgerToggle />
-        </div>
-        <form
-          onSubmit={handleSubmit(handleChangePassword)}
-          className="mx-auto md:mt-16 mt-10 flex h-full w-full flex-col gap-8 px-4 md:px-8 pb-8 lg:w-3/5"
-        >
-          <h3 className="text-xl font-medium">Change password</h3>
+      <ProfileSettingContentWrapper>
+        <ProfileSettingContentHeader title="Change password" />
+        <form onSubmit={handleSubmit(handleChangePassword)} className="flex flex-col gap-8 py-6">
           <div className="flex flex-col gap-10 w-full max-w-96">
             <div className="space-y-1">
               <h4 className="text-sm">Current password</h4>
@@ -262,7 +256,7 @@ const SecurityPage = observer(() => {
             </Button>
           </div>
         </form>
-      </div>
+      </ProfileSettingContentWrapper>
     </>
   );
 });

web/core/components/dropdowns/member/types.d.ts

@@ -1,7 +1,7 @@
 import { TDropdownProps } from "../types";
 
 export type MemberDropdownProps = TDropdownProps & {
-  button?: ReactNode;
+  button?: React.ReactNode;
   dropdownArrow?: boolean;
   dropdownArrowClassName?: string;
   placeholder?: string;

web/core/components/exporter/single-export.tsx

@@ -16,7 +16,7 @@ type Props = {
 export const SingleExport: FC<Props> = ({ service, refreshing }) => {
   const provider = service.provider;
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const [isLoading, setIsLoading] = useState(false);
+  const [isLoading] = useState(false);
 
   const checkExpiry = (inputDateString: string) => {
     const currentDate = new Date();

web/core/components/gantt-chart/chart/views/bi-week.tsx

@@ -5,7 +5,7 @@ import { useGanttChart } from "@/components/gantt-chart/hooks/use-gantt-chart";
 
 export const BiWeekChartView: FC<any> = observer(() => {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const { currentView, currentViewData, renderView } = useGanttChart();
+  const { currentViewData, renderView } = useGanttChart();
 
   return (
     <>

web/core/components/gantt-chart/chart/views/day.tsx

@@ -5,7 +5,7 @@ import { useGanttChart } from "@/components/gantt-chart/hooks/use-gantt-chart";
 
 export const DayChartView: FC<any> = observer(() => {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const { currentView, currentViewData, renderView } = useGanttChart();
+  const { currentViewData, renderView } = useGanttChart();
 
   return (
     <>

web/core/components/gantt-chart/chart/views/hours.tsx

@@ -5,7 +5,7 @@ import { useGanttChart } from "@/components/gantt-chart/hooks/use-gantt-chart";
 
 export const HourChartView: FC<any> = observer(() => {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const { currentView, currentViewData, renderView } = useGanttChart();
+  const { currentViewData, renderView } = useGanttChart();
 
   return (
     <>

web/core/components/gantt-chart/chart/views/quarter.tsx

@@ -5,7 +5,7 @@ import { useGanttChart } from "@/components/gantt-chart/hooks/use-gantt-chart";
 
 export const QuarterChartView: FC<any> = observer(() => {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const { currentView, currentViewData, renderView } = useGanttChart();
+  const { currentViewData, renderView } = useGanttChart();
 
   return (
     <>

web/core/components/gantt-chart/chart/views/week.tsx

@@ -5,7 +5,7 @@ import { useGanttChart } from "@/components/gantt-chart/hooks/use-gantt-chart";
 
 export const WeekChartView: FC<any> = observer(() => {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const { currentView, currentViewData, renderView } = useGanttChart();
+  const { currentViewData, renderView } = useGanttChart();
 
   return (
     <>

web/core/components/gantt-chart/chart/views/year.tsx

@@ -5,7 +5,7 @@ import { useGanttChart } from "@/components/gantt-chart/hooks/use-gantt-chart";
 
 export const YearChartView: FC<any> = observer(() => {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const { currentView, currentViewData, renderView } = useGanttChart();
+  const { currentViewData, renderView } = useGanttChart();
 
   return (
     <>

web/core/components/inbox/content/issue-root.tsx

@@ -55,31 +55,15 @@ export const InboxIssueMainContent: React.FC<Props> = observer((props) => {
 
   const issueOperations: TIssueOperations = useMemo(
     () => ({
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      fetch: async (workspaceSlug: string, projectId: string, issueId: string) => {
-        try {
-          return;
-        } catch (error) {
-          setToast({
-            title: "Issue fetch failed",
-            type: TOAST_TYPE.ERROR,
-            message: "Issue fetch failed",
-          });
-        }
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars, arrow-body-style
+      fetch: async (_workspaceSlug: string, _projectId: string, _issueId: string) => {
+        return;
       },
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      remove: async (workspaceSlug: string, projectId: string, issueId: string) => {
-        try {
-          return;
-        } catch (error) {
-          setToast({
-            title: "Issue remove failed",
-            type: TOAST_TYPE.ERROR,
-            message: "Issue remove failed",
-          });
-        }
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars, arrow-body-style
+      remove: async (_workspaceSlug: string, _projectId: string, _issueId: string) => {
+        return;
       },
-      update: async (workspaceSlug: string, projectId: string, issueId: string, data: Partial<TIssue>) => {
+      update: async (_workspaceSlug: string, _projectId: string, _issueId: string, data: Partial<TIssue>) => {
         try {
           await inboxIssue.updateIssue(data);
           captureIssueEvent({

web/core/components/profile/index.ts

@@ -3,3 +3,5 @@ export * from "./overview";
 export * from "./profile-issues-filter";
 export * from "./sidebar";
 export * from "./time";
+export * from "./profile-setting-content-wrapper"
+export * from "./profile-setting-content-header"

web/core/components/profile/notification/email-notification-form.tsx

@@ -59,7 +59,7 @@ export const EmailNotificationForm: FC<IEmailNotificationFormProps> = (props) =>
 
   return (
     <>
-      <div className="pt-2 text-lg font-medium text-custom-text-100">Notify me when:</div>
+      <div className="pt-6 text-lg font-medium text-custom-text-100">Notify me when:</div>
       {/* Notification Settings */}
       <div className="flex flex-col py-2">
         <div className="flex gap-2 items-center pt-6">

web/core/components/profile/profile-setting-content-header.tsx

@@ -0,0 +1,17 @@
+"use client";
+import React, { FC } from "react";
+
+type Props = {
+  title: string;
+  description?: string;
+};
+
+export const ProfileSettingContentHeader: FC<Props> = (props) => {
+  const { title, description } = props;
+  return (
+    <div className="flex flex-col gap-1 py-4 border-b border-custom-border-100">
+      <div className="text-xl font-medium text-custom-text-100">{title}</div>
+      {description && <div className="text-sm font-normal text-custom-text-300">{description}</div>}
+    </div>
+  );
+};

web/core/components/profile/profile-setting-content-wrapper.tsx

@@ -0,0 +1,30 @@
+"use client";
+import React, { FC } from "react";
+// helpers
+import { cn } from "@/helpers/common.helper";
+import { SidebarHamburgerToggle } from "../core";
+
+type Props = {
+  children: React.ReactNode;
+  className?: string;
+};
+
+export const ProfileSettingContentWrapper: FC<Props> = (props) => {
+  const { children, className = "" } = props;
+  return (
+    <div className="flex h-full flex-col">
+      <div className="block flex-shrink-0 border-b border-custom-border-200 p-4 md:hidden">
+        <SidebarHamburgerToggle />
+      </div>
+
+      <div
+        className={cn(
+          "vertical-scrollbar scrollbar-md mx-auto h-full w-full flex flex-col px-8 md:px-20 lg:px-36 xl:px-56 py-10 md:py-16",
+          className
+        )}
+      >
+        {children}
+      </div>
+    </div>
+  );
+};

web/core/hooks/use-multiple-select.ts

@@ -250,7 +250,7 @@ export const useMultipleSelect = (props: Props) => {
   const isGroupSelected = useCallback(
     (groupID: string) => {
       const groupEntities = entitiesList.filter((entity) => entity.groupID === groupID);
-      const totalSelected = groupEntities.filter((entity) => getIsEntitySelected(entity.entityID ?? "")).length;
+      const totalSelected = groupEntities.filter((entity) => getIsEntitySelected(entity?.entityID ?? "")).length;
       if (totalSelected === 0) return "empty";
       if (totalSelected === groupEntities.length) return "complete";
       return "partial";

web/core/hooks/use-reload-confirmation.tsx

@@ -1,6 +1,5 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import { useCallback, useEffect, useState } from "react";
-import { useRouter } from "next/navigation";
+import { useState } from "react";
 
 //TODO: remove temp flag isActive later and use showAlert as the source of truth
 const useReloadConfirmations = (isActive = true) => {

web/core/store/issue/archived/filter.store.ts

@@ -157,7 +157,7 @@ export class ArchivedIssuesFilter extends IssueFilterHelperStore implements IArc
       };
 
       switch (type) {
-        case EIssueFilterType.FILTERS:
+        case EIssueFilterType.FILTERS: {
           const updatedFilters = filters as IIssueFilterOptions;
           _filters.filters = { ..._filters.filters, ...updatedFilters };
 
@@ -177,7 +177,8 @@ export class ArchivedIssuesFilter extends IssueFilterHelperStore implements IArc
             filters: _filters.filters,
           });
           break;
-        case EIssueFilterType.DISPLAY_FILTERS:
+        }
+        case EIssueFilterType.DISPLAY_FILTERS: {
           const updatedDisplayFilters = filters as IIssueDisplayFilterOptions;
           _filters.displayFilters = { ..._filters.displayFilters, ...updatedDisplayFilters };
 
@@ -217,7 +218,8 @@ export class ArchivedIssuesFilter extends IssueFilterHelperStore implements IArc
           });
 
           break;
-        case EIssueFilterType.DISPLAY_PROPERTIES:
+        }
+        case EIssueFilterType.DISPLAY_PROPERTIES: {
           const updatedDisplayProperties = filters as IIssueDisplayProperties;
           _filters.displayProperties = { ..._filters.displayProperties, ...updatedDisplayProperties };
 
@@ -235,8 +237,9 @@ export class ArchivedIssuesFilter extends IssueFilterHelperStore implements IArc
             display_properties: _filters.displayProperties,
           });
           break;
+        }
 
-        case EIssueFilterType.KANBAN_FILTERS:
+        case EIssueFilterType.KANBAN_FILTERS: {
           const updatedKanbanFilters = filters as TIssueKanbanFilters;
           _filters.kanbanFilters = { ..._filters.kanbanFilters, ...updatedKanbanFilters };
 
@@ -257,6 +260,7 @@ export class ArchivedIssuesFilter extends IssueFilterHelperStore implements IArc
           });
 
           break;
+        }
         default:
           break;
       }

web/core/store/issue/cycle/filter.store.ts

@@ -167,7 +167,7 @@ export class CycleIssuesFilter extends IssueFilterHelperStore implements ICycleI
       };
 
       switch (type) {
-        case EIssueFilterType.FILTERS:
+        case EIssueFilterType.FILTERS: {
           const updatedFilters = filters as IIssueFilterOptions;
           _filters.filters = { ..._filters.filters, ...updatedFilters };
 
@@ -189,7 +189,8 @@ export class CycleIssuesFilter extends IssueFilterHelperStore implements ICycleI
             filters: _filters.filters,
           });
           break;
-        case EIssueFilterType.DISPLAY_FILTERS:
+        }
+        case EIssueFilterType.DISPLAY_FILTERS: {
           const updatedDisplayFilters = filters as IIssueDisplayFilterOptions;
           _filters.displayFilters = { ..._filters.displayFilters, ...updatedDisplayFilters };
 
@@ -234,7 +235,8 @@ export class CycleIssuesFilter extends IssueFilterHelperStore implements ICycleI
           });
 
           break;
-        case EIssueFilterType.DISPLAY_PROPERTIES:
+        }
+        case EIssueFilterType.DISPLAY_PROPERTIES: {
           const updatedDisplayProperties = filters as IIssueDisplayProperties;
           _filters.displayProperties = { ..._filters.displayProperties, ...updatedDisplayProperties };
 
@@ -252,8 +254,9 @@ export class CycleIssuesFilter extends IssueFilterHelperStore implements ICycleI
             display_properties: _filters.displayProperties,
           });
           break;
+        }
 
-        case EIssueFilterType.KANBAN_FILTERS:
+        case EIssueFilterType.KANBAN_FILTERS: {
           const updatedKanbanFilters = filters as TIssueKanbanFilters;
           _filters.kanbanFilters = { ..._filters.kanbanFilters, ...updatedKanbanFilters };
 
@@ -274,6 +277,7 @@ export class CycleIssuesFilter extends IssueFilterHelperStore implements ICycleI
           });
 
           break;
+        }
         default:
           break;
       }

web/core/store/issue/draft/filter.store.ts

@@ -152,7 +152,7 @@ export class DraftIssuesFilter extends IssueFilterHelperStore implements IDraftI
       };
 
       switch (type) {
-        case EIssueFilterType.FILTERS:
+        case EIssueFilterType.FILTERS: {
           const updatedFilters = filters as IIssueFilterOptions;
           _filters.filters = { ..._filters.filters, ...updatedFilters };
 
@@ -172,7 +172,8 @@ export class DraftIssuesFilter extends IssueFilterHelperStore implements IDraftI
             filters: _filters.filters,
           });
           break;
-        case EIssueFilterType.DISPLAY_FILTERS:
+        }
+        case EIssueFilterType.DISPLAY_FILTERS: {
           const updatedDisplayFilters = filters as IIssueDisplayFilterOptions;
           _filters.displayFilters = { ..._filters.displayFilters, ...updatedDisplayFilters };
 
@@ -212,7 +213,8 @@ export class DraftIssuesFilter extends IssueFilterHelperStore implements IDraftI
           });
 
           break;
-        case EIssueFilterType.DISPLAY_PROPERTIES:
+        }
+        case EIssueFilterType.DISPLAY_PROPERTIES: {
           const updatedDisplayProperties = filters as IIssueDisplayProperties;
           _filters.displayProperties = { ..._filters.displayProperties, ...updatedDisplayProperties };
 
@@ -230,8 +232,8 @@ export class DraftIssuesFilter extends IssueFilterHelperStore implements IDraftI
             display_properties: _filters.displayProperties,
           });
           break;
-
-        case EIssueFilterType.KANBAN_FILTERS:
+        }
+        case EIssueFilterType.KANBAN_FILTERS: {
           const updatedKanbanFilters = filters as TIssueKanbanFilters;
           _filters.kanbanFilters = { ..._filters.kanbanFilters, ...updatedKanbanFilters };
 
@@ -252,6 +254,7 @@ export class DraftIssuesFilter extends IssueFilterHelperStore implements IDraftI
           });
 
           break;
+        }
         default:
           break;
       }

web/core/store/issue/helpers/base-issues.store.ts

@@ -1631,7 +1631,7 @@ export abstract class BaseIssuesStore implements IBaseIssuesStore {
     const dataIdsArray = isDataIdsArray ? dataIds : [dataIds];
 
     switch (dataType) {
-      case "state_id":
+      case "state_id": {
         const stateMap = this.rootIssueStore?.stateMap;
         if (!stateMap) break;
         for (const dataId of dataIdsArray) {
@@ -1639,7 +1639,8 @@ export abstract class BaseIssuesStore implements IBaseIssuesStore {
           if (state && state.name) dataValues.push(state.name.toLocaleLowerCase());
         }
         break;
-      case "label_ids":
+      }
+      case "label_ids": {
         const labelMap = this.rootIssueStore?.labelMap;
         if (!labelMap) break;
         for (const dataId of dataIdsArray) {
@@ -1647,7 +1648,8 @@ export abstract class BaseIssuesStore implements IBaseIssuesStore {
           if (label && label.name) dataValues.push(label.name.toLocaleLowerCase());
         }
         break;
-      case "assignee_ids":
+      }
+      case "assignee_ids": {
         const memberMap = this.rootIssueStore?.memberMap;
         if (!memberMap) break;
         for (const dataId of dataIdsArray) {
@@ -1655,7 +1657,8 @@ export abstract class BaseIssuesStore implements IBaseIssuesStore {
           if (member && member.first_name) dataValues.push(member.first_name.toLocaleLowerCase());
         }
         break;
-      case "module_ids":
+      }
+      case "module_ids": {
         const moduleMap = this.rootIssueStore?.moduleMap;
         if (!moduleMap) break;
         for (const dataId of dataIdsArray) {
@@ -1663,7 +1666,8 @@ export abstract class BaseIssuesStore implements IBaseIssuesStore {
           if (currentModule && currentModule.name) dataValues.push(currentModule.name.toLocaleLowerCase());
         }
         break;
-      case "cycle_id":
+      }
+      case "cycle_id": {
         const cycleMap = this.rootIssueStore?.cycleMap;
         if (!cycleMap) break;
         for (const dataId of dataIdsArray) {
@@ -1671,6 +1675,7 @@ export abstract class BaseIssuesStore implements IBaseIssuesStore {
           if (cycle && cycle.name) dataValues.push(cycle.name.toLocaleLowerCase());
         }
         break;
+      }
     }
 
     return isDataIdsArray ? (order ? orderBy(dataValues, undefined, [order])[0] : dataValues) : dataValues[0];

web/core/store/issue/issue_calendar_view.store.ts

@@ -86,17 +86,19 @@ export class CalendarStore implements ICalendarStore {
 
   getStartAndEndDate = computedFn((layout: "week" | "month") => {
     switch (layout) {
-      case "week":
+      case "week": {
         if (!this.allDaysOfActiveWeek) return;
         const dates = Object.keys(this.allDaysOfActiveWeek);
         return { startDate: dates[0], endDate: dates[dates.length - 1] };
-      case "month":
+      }
+      case "month": {
         if (!this.allWeeksOfActiveMonth) return;
         const weeks = Object.keys(this.allWeeksOfActiveMonth);
         const firstWeekDates = Object.keys(this.allWeeksOfActiveMonth[weeks[0]]);
         const lastWeekDates = Object.keys(this.allWeeksOfActiveMonth[weeks[weeks.length - 1]]);
 
         return { startDate: firstWeekDates[0], endDate: lastWeekDates[lastWeekDates.length - 1] };
+      }
     }
   });
 

web/core/store/issue/module/filter.store.ts

@@ -167,7 +167,7 @@ export class ModuleIssuesFilter extends IssueFilterHelperStore implements IModul
       };
 
       switch (type) {
-        case EIssueFilterType.FILTERS:
+        case EIssueFilterType.FILTERS: {
           const updatedFilters = filters as IIssueFilterOptions;
           _filters.filters = { ..._filters.filters, ...updatedFilters };
 
@@ -188,7 +188,8 @@ export class ModuleIssuesFilter extends IssueFilterHelperStore implements IModul
             filters: _filters.filters,
           });
           break;
-        case EIssueFilterType.DISPLAY_FILTERS:
+        }
+        case EIssueFilterType.DISPLAY_FILTERS: {
           const updatedDisplayFilters = filters as IIssueDisplayFilterOptions;
           _filters.displayFilters = { ..._filters.displayFilters, ...updatedDisplayFilters };
 
@@ -233,7 +234,8 @@ export class ModuleIssuesFilter extends IssueFilterHelperStore implements IModul
           });
 
           break;
-        case EIssueFilterType.DISPLAY_PROPERTIES:
+        }
+        case EIssueFilterType.DISPLAY_PROPERTIES: {
           const updatedDisplayProperties = filters as IIssueDisplayProperties;
           _filters.displayProperties = { ..._filters.displayProperties, ...updatedDisplayProperties };
 
@@ -251,8 +253,9 @@ export class ModuleIssuesFilter extends IssueFilterHelperStore implements IModul
             display_properties: _filters.displayProperties,
           });
           break;
+        }
 
-        case EIssueFilterType.KANBAN_FILTERS:
+        case EIssueFilterType.KANBAN_FILTERS: {
           const updatedKanbanFilters = filters as TIssueKanbanFilters;
           _filters.kanbanFilters = { ..._filters.kanbanFilters, ...updatedKanbanFilters };
 
@@ -273,6 +276,7 @@ export class ModuleIssuesFilter extends IssueFilterHelperStore implements IModul
           });
 
           break;
+        }
         default:
           break;
       }

web/core/store/issue/profile/filter.store.ts

@@ -157,7 +157,7 @@ export class ProfileIssuesFilter extends IssueFilterHelperStore implements IProf
       };
 
       switch (type) {
-        case EIssueFilterType.FILTERS:
+        case EIssueFilterType.FILTERS: {
           const updatedFilters = filters as IIssueFilterOptions;
           _filters.filters = { ..._filters.filters, ...updatedFilters };
 
@@ -179,7 +179,8 @@ export class ProfileIssuesFilter extends IssueFilterHelperStore implements IProf
             filters: _filters.filters,
           });
           break;
-        case EIssueFilterType.DISPLAY_FILTERS:
+        }
+        case EIssueFilterType.DISPLAY_FILTERS: {
           const updatedDisplayFilters = filters as IIssueDisplayFilterOptions;
           _filters.displayFilters = { ..._filters.displayFilters, ...updatedDisplayFilters };
 
@@ -219,7 +220,8 @@ export class ProfileIssuesFilter extends IssueFilterHelperStore implements IProf
           });
 
           break;
-        case EIssueFilterType.DISPLAY_PROPERTIES:
+        }
+        case EIssueFilterType.DISPLAY_PROPERTIES: {
           const updatedDisplayProperties = filters as IIssueDisplayProperties;
           _filters.displayProperties = { ..._filters.displayProperties, ...updatedDisplayProperties };
 
@@ -237,8 +239,9 @@ export class ProfileIssuesFilter extends IssueFilterHelperStore implements IProf
             display_properties: _filters.displayProperties,
           });
           break;
+        }
 
-        case EIssueFilterType.KANBAN_FILTERS:
+        case EIssueFilterType.KANBAN_FILTERS: {
           const updatedKanbanFilters = filters as TIssueKanbanFilters;
           _filters.kanbanFilters = { ..._filters.kanbanFilters, ...updatedKanbanFilters };
 
@@ -259,6 +262,7 @@ export class ProfileIssuesFilter extends IssueFilterHelperStore implements IProf
           });
 
           break;
+        }
         default:
           break;
       }

web/core/store/issue/project-views/filter.store.ts

@@ -165,7 +165,7 @@ export class ProjectViewIssuesFilter extends IssueFilterHelperStore implements I
       };
 
       switch (type) {
-        case EIssueFilterType.FILTERS:
+        case EIssueFilterType.FILTERS: {
           const updatedFilters = filters as IIssueFilterOptions;
           _filters.filters = { ..._filters.filters, ...updatedFilters };
 
@@ -183,7 +183,8 @@ export class ProjectViewIssuesFilter extends IssueFilterHelperStore implements I
             isEmpty(filteredFilters) ? "init-loader" : "mutation"
           );
           break;
-        case EIssueFilterType.DISPLAY_FILTERS:
+        }
+        case EIssueFilterType.DISPLAY_FILTERS: {
           const updatedDisplayFilters = filters as IIssueDisplayFilterOptions;
           _filters.displayFilters = { ..._filters.displayFilters, ...updatedDisplayFilters };
 
@@ -223,7 +224,8 @@ export class ProjectViewIssuesFilter extends IssueFilterHelperStore implements I
           });
 
           break;
-        case EIssueFilterType.DISPLAY_PROPERTIES:
+        }
+        case EIssueFilterType.DISPLAY_PROPERTIES: {
           const updatedDisplayProperties = filters as IIssueDisplayProperties;
           _filters.displayProperties = { ..._filters.displayProperties, ...updatedDisplayProperties };
 
@@ -241,8 +243,8 @@ export class ProjectViewIssuesFilter extends IssueFilterHelperStore implements I
             display_properties: _filters.displayProperties,
           });
           break;
-
-        case EIssueFilterType.KANBAN_FILTERS:
+        }
+        case EIssueFilterType.KANBAN_FILTERS: {
           const updatedKanbanFilters = filters as TIssueKanbanFilters;
           _filters.kanbanFilters = { ..._filters.kanbanFilters, ...updatedKanbanFilters };
 
@@ -263,6 +265,7 @@ export class ProjectViewIssuesFilter extends IssueFilterHelperStore implements I
           });
 
           break;
+        }
         default:
           break;
       }

web/core/store/issue/project/filter.store.ts

@@ -162,7 +162,7 @@ export class ProjectIssuesFilter extends IssueFilterHelperStore implements IProj
       };
 
       switch (type) {
-        case EIssueFilterType.FILTERS:
+        case EIssueFilterType.FILTERS: {
           const updatedFilters = filters as IIssueFilterOptions;
           _filters.filters = { ..._filters.filters, ...updatedFilters };
 
@@ -183,7 +183,8 @@ export class ProjectIssuesFilter extends IssueFilterHelperStore implements IProj
             filters: _filters.filters,
           });
           break;
-        case EIssueFilterType.DISPLAY_FILTERS:
+        }
+        case EIssueFilterType.DISPLAY_FILTERS: {
           const updatedDisplayFilters = filters as IIssueDisplayFilterOptions;
           _filters.displayFilters = { ..._filters.displayFilters, ...updatedDisplayFilters };
 
@@ -224,7 +225,8 @@ export class ProjectIssuesFilter extends IssueFilterHelperStore implements IProj
           });
 
           break;
-        case EIssueFilterType.DISPLAY_PROPERTIES:
+        }
+        case EIssueFilterType.DISPLAY_PROPERTIES: {
           const updatedDisplayProperties = filters as IIssueDisplayProperties;
           _filters.displayProperties = { ..._filters.displayProperties, ...updatedDisplayProperties };
 
@@ -242,8 +244,9 @@ export class ProjectIssuesFilter extends IssueFilterHelperStore implements IProj
             display_properties: _filters.displayProperties,
           });
           break;
+        }
 
-        case EIssueFilterType.KANBAN_FILTERS:
+        case EIssueFilterType.KANBAN_FILTERS: {
           const updatedKanbanFilters = filters as TIssueKanbanFilters;
           _filters.kanbanFilters = { ..._filters.kanbanFilters, ...updatedKanbanFilters };
 
@@ -264,6 +267,7 @@ export class ProjectIssuesFilter extends IssueFilterHelperStore implements IProj
           });
 
           break;
+        }
         default:
           break;
       }

web/core/store/issue/workspace/filter.store.ts

@@ -190,7 +190,7 @@ export class WorkspaceIssuesFilter extends IssueFilterHelperStore implements IWo
       };
 
       switch (type) {
-        case EIssueFilterType.FILTERS:
+        case EIssueFilterType.FILTERS: {
           const updatedFilters = filters as IIssueFilterOptions;
           _filters.filters = { ..._filters.filters, ...updatedFilters };
 
@@ -207,7 +207,8 @@ export class WorkspaceIssuesFilter extends IssueFilterHelperStore implements IWo
             isEmpty(filteredFilters) ? "init-loader" : "mutation"
           );
           break;
-        case EIssueFilterType.DISPLAY_FILTERS:
+        }
+        case EIssueFilterType.DISPLAY_FILTERS: {
           const updatedDisplayFilters = filters as IIssueDisplayFilterOptions;
           _filters.displayFilters = { ..._filters.displayFilters, ...updatedDisplayFilters };
 
@@ -252,7 +253,8 @@ export class WorkspaceIssuesFilter extends IssueFilterHelperStore implements IWo
             });
 
           break;
-        case EIssueFilterType.DISPLAY_PROPERTIES:
+        }
+        case EIssueFilterType.DISPLAY_PROPERTIES: {
           const updatedDisplayProperties = filters as IIssueDisplayProperties;
           _filters.displayProperties = { ..._filters.displayProperties, ...updatedDisplayProperties };
 
@@ -274,8 +276,9 @@ export class WorkspaceIssuesFilter extends IssueFilterHelperStore implements IWo
               display_properties: _filters.displayProperties,
             });
           break;
+        }
 
-        case EIssueFilterType.KANBAN_FILTERS:
+        case EIssueFilterType.KANBAN_FILTERS: {
           const updatedKanbanFilters = filters as TIssueKanbanFilters;
           _filters.kanbanFilters = { ..._filters.kanbanFilters, ...updatedKanbanFilters };
 
@@ -296,6 +299,7 @@ export class WorkspaceIssuesFilter extends IssueFilterHelperStore implements IWo
           });
 
           break;
+        }
         default:
           break;
       }

web/helpers/inbox.helper.ts

@@ -26,23 +26,27 @@ export const getCustomDates = (duration: EPastDurationFilters): string => {
   let firstDay, lastDay;
 
   switch (duration) {
-    case EPastDurationFilters.TODAY:
+    case EPastDurationFilters.TODAY: {
       firstDay = renderFormattedPayloadDate(today);
       lastDay = renderFormattedPayloadDate(today);
       return `${firstDay};after,${lastDay};before`;
-    case EPastDurationFilters.YESTERDAY:
+    }
+    case EPastDurationFilters.YESTERDAY: {
       const yesterday = subDays(today, 1);
       firstDay = renderFormattedPayloadDate(yesterday);
       lastDay = renderFormattedPayloadDate(yesterday);
       return `${firstDay};after,${lastDay};before`;
-    case EPastDurationFilters.LAST_7_DAYS:
+    }
+    case EPastDurationFilters.LAST_7_DAYS: {
       firstDay = renderFormattedPayloadDate(subDays(today, 7));
       lastDay = renderFormattedPayloadDate(today);
       return `${firstDay};after,${lastDay};before`;
-    case EPastDurationFilters.LAST_30_DAYS:
+    }
+    case EPastDurationFilters.LAST_30_DAYS: {
       firstDay = renderFormattedPayloadDate(subDays(today, 30));
       lastDay = renderFormattedPayloadDate(today);
       return `${firstDay};after,${lastDay};before`;
+    }
   }
 };